/* ===== ConsorcioOS Dark Mode (retema profesional v2 — sin filtros, cobertura completa) ===== */
html.dark { color-scheme: dark; }
html.dark body { background-color: #0b1220; color: #dbe4f0; transition: background-color 0.3s ease, color 0.3s ease; }
/* Superficies: escala jerárquica azul-pizarra */
html.dark [class~="bg-white"],
html.dark [class~="bg-surface-container-lowest"],
html.dark [class~="bg-surface-bright"] { background-color: #111c30; }
html.dark [class~="bg-surface"],
html.dark [class~="bg-surface-container-low"],
html.dark [class~="bg-surface-gray"],
html.dark [class~="bg-background"] { background-color: #16233a; }
html.dark [class~="bg-surface-container"],
html.dark [class~="bg-surface-container-high"] { background-color: #1a2a45; }
html.dark [class*="bg-surface-dim"] { background-color: #1a2a45; }
html.dark [class~="bg-surface-container-highest"] { background-color: #1f304e; }
html.dark [class~="bg-surface-variant"] { background-color: #1a273f; }
html.dark [class~="bg-primary-container"] { background-color: #1e3a5f; }
html.dark [class~="bg-secondary-container"] { background-color: #243a59; }
html.dark [class~="bg-primary-container/20"],
html.dark [class~="bg-primary-container/10"] { background-color: rgba(110, 170, 220, 0.15); }
html.dark [class~="bg-primary"] { background-color: #2f5b7a; }
html.dark [class~="bg-secondary"] { background-color: #2c4a5f; }
html.dark [class~="bg-outline-variant"] { background-color: #26364f; }
/* Estados */
html.dark [class~="bg-success-green"] { background-color: #14532d; }
html.dark [class~="text-success-green"] { color: #4ade80; }
html.dark [class~="bg-error-red"],
html.dark [class~="bg-error"] { background-color: #7f1d1d; }
html.dark [class~="text-error-red"],
html.dark [class~="text-error"] { color: #f87171; }
html.dark [class~="bg-warning-yellow"] { background-color: #6b5210; }
html.dark [class~="text-warning-yellow"] { color: #fbbf24; }
html.dark [class~="bg-[#e7ffeb]"] { background-color: #123524; }
/* Overlays blancos -> suaves en dark */
html.dark [class~="bg-white/5"] { background-color: rgba(255, 255, 255, 0.04); }
html.dark [class~="bg-white/10"] { background-color: rgba(255, 255, 255, 0.07); }
html.dark [class~="bg-white/20"] { background-color: rgba(255, 255, 255, 0.11); }
html.dark [class~="bg-white/30"] { background-color: rgba(255, 255, 255, 0.15); }
html.dark [class~="bg-white/40"] { background-color: rgba(255, 255, 255, 0.18); }
/* REQ-F2: completar la escala — /15 decorativo (Login hero), /50 y /60 como
   paneles casi blancos apuntando a la superficie oscura del tema
   (surface-container-low / surface-container). */
html.dark [class~="bg-white/15"] { background-color: rgba(255, 255, 255, 0.09); }
html.dark [class~="bg-white/50"] { background-color: #16233a; }
html.dark [class~="bg-white/60"] { background-color: #1a2a45; }
/* Hover del chrome: sin flashes blancos */
html.dark [class*="hover:bg-white/60"]:hover,
html.dark [class*="hover:bg-white/70"]:hover,
html.dark [class*="hover:bg-white/10"]:hover,
html.dark [class*="hover:bg-surface-container"]:hover { background-color: rgba(255, 255, 255, 0.08); }
/* Chrome: navbar, sidebar y panel de búsqueda */
html.dark #app-header,
html.dark [class~="bg-[#dbeafe]"] { background-color: #0f1a2e; transition: background-color 0.3s ease; }
html.dark #app-header { border-color: #1e2d47; }
html.dark #app-sidebar { background-image: linear-gradient(180deg, #16233a 0%, #1e3a5f 100%); }
html.dark #global-search,
html.dark [class~="bg-[#eef6ff]"] { background-color: #101b30; }
html.dark [class*="border-[#bfdbfe]"] { border-color: #1e2d47; }
/* Textos */
html.dark [class~="text-on-surface"],
html.dark [class~="text-deep-black"] { color: #dbe4f0; }
html.dark [class~="text-on-surface-variant"],
html.dark [class~="text-secondary"] { color: #94a8c4; }
html.dark [class*="text-[#1e3a5f]"] { color: #b9c8e0; }
html.dark [class~="text-primary"] { color: #7cc0f0; }
html.dark [class~="text-on-primary-container"],
html.dark [class~="text-on-secondary-container"] { color: #cfe0f5; }
html.dark [class~="text-outline"] { color: #8fa1ba; }
/* Bordes y divisores */
html.dark [class~="border-outline-variant"] { border-color: #26364f; }
html.dark [class~="divide-outline-variant"] > :not([hidden]) ~ :not([hidden]) { border-color: #26364f; }
html.dark [class~="border-outline"] { border-color: #55657d; }
html.dark [class~="border-surface-gray"] { border-color: #1a2a45; }
html.dark [class~="border-primary"],
html.dark [class~="border-primary-container"] { border-color: #2f5b7a; }
html.dark [class~="border-white"] { border-color: rgba(148, 168, 196, 0.25); }
/* Formularios */
html.dark input,
html.dark select,
html.dark textarea { background-color: #0f1a2e; color: #dbe4f0; border-color: #26364f; transition: background-color 0.3s ease, border-color 0.3s ease; }
html.dark input::placeholder,
html.dark textarea::placeholder { color: #55657d; }
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus { border-color: #3a6b8f; }
/* Tablas */
html.dark th,
html.dark td { border-color: #26364f; }
/* Detalles */
html.dark ::selection { background-color: rgba(110, 170, 220, 0.35); }
html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-track { background-color: #0b1220; }
html.dark ::-webkit-scrollbar-thumb { background-color: #26364f; border-radius: 8px; }
html.dark ::-webkit-scrollbar-thumb:hover { background-color: #33466b; }
/* Sombras */
html.dark [class*="shadow-"] { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }



#app-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4.5rem;
  transform: translateX(0);
  transition: transform 0.3s ease;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background-color: #1e3a5f;
  background-image: linear-gradient(180deg, #1e3a5f 0%, #456277 100%);
}
@media (min-width: 1024px) {
  #app-sidebar {
    top: 0;
    bottom: 0;
    height: auto;
    transform: translateX(0);
    width: var(--sidebar-w, 17.5rem);
  }
}
#app-sidebar.open {
  transform: translateX(0);
}
@media (min-width: 1024px) {
  #app-sidebar.closed-desktop {
    transform: translateX(-100%);
  }
}
:root {
  --sidebar-w: 17.5rem;
}
#app-main {
  margin-left: 4.5rem;
}
@media (min-width: 1024px) {
  #app-main {
    margin-left: var(--sidebar-w, 17.5rem);
  }
}
@media (min-width: 1024px) {
  #app-main.no-sidebar {
    margin-left: 0;
  }
}
#app-header {
  left: 4.5rem;
  right: 0;
  width: auto;
  transition: left 0.3s ease;
}
@media (min-width: 1024px) {
  #app-header {
    left: var(--sidebar-w, 17.5rem);
  }
  #app-header.no-sidebar {
    left: 0;
  }
  #app-header:not(.no-sidebar) ~ #global-search {
    left: var(--sidebar-w, 17.5rem);
  }
}
@media (max-width: 1023.98px) {
  #app-header #menu-btn { display: inline-flex; }
  #app-header ~ #global-search { left: 4.5rem; }
  #app-sidebar > div:first-child { justify-content: center; padding-left: 0; padding-right: 0; }
  #app-sidebar .font-label-md,
  #app-sidebar .font-title-lg,
  #app-sidebar .font-label-sm,
  #app-sidebar .nav-section-toggle .nav-chevron { display: none; }
  #app-sidebar .nav-section-toggle,
  #app-sidebar .nav-item { justify-content: center; padding-left: 0.25rem; padding-right: 0.25rem; }
}
#sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
@media (max-width: 1023.98px) {
  #app-sidebar.open + #sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}
#app-sidebar .nav-submenu {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}
#app-sidebar .nav-section.open .nav-submenu {
  max-height: 40rem;
}
#app-sidebar .nav-chevron {
  transition: transform 0.25s ease;
}
#app-sidebar .nav-section.open .nav-chevron {
  transform: rotate(180deg);
}
#app-sidebar a.nav-active {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-weight: 700;
}
#app-sidebar nav::-webkit-scrollbar {
  width: 6px;
}
#app-sidebar nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

/* ============================================================
   SIDEBAR v2 — jerarquía clara: secciones vs subitems
   ============================================================ */
/* Toggle de sección: destacado, texto sin cortar, chevron estable */
#app-sidebar .nav-section-toggle {
  color: rgba(226, 232, 240, 0.95);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 0.7rem;
  text-align: left;
  transition: background-color 0.2s ease, color 0.2s ease;
}
#app-sidebar .nav-section-toggle:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}
#app-sidebar .nav-section.open > .nav-section-toggle {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
#app-sidebar .nav-section-toggle .material-symbols-outlined:first-child {
  font-size: 22px;
}
#app-sidebar .nav-section-toggle > span:not(.material-symbols-outlined) {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
  text-align: left;
}
#app-sidebar .nav-section-toggle .nav-chevron {
  font-size: 20px;
  margin-left: auto;
  color: rgba(226, 232, 240, 0.55);
  flex-shrink: 0;
}

/* Subitems: indentados, icono chico y suave, texto que envuelve */
#app-sidebar .nav-submenu {
  margin-top: 2px;
  position: relative;
}
#app-sidebar .nav-submenu::before {
  content: '';
  position: absolute;
  left: 1.55rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 1px;
  background: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}
#app-sidebar .nav-submenu .nav-item {
  padding-left: 2.4rem;
  border-radius: 0.65rem;
  color: rgba(203, 213, 225, 0.78);
  font-size: 0.8125rem;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
#app-sidebar .nav-submenu .nav-item .material-symbols-outlined {
  font-size: 18px;
  color: rgba(203, 213, 225, 0.5);
  transition: color 0.2s ease;
}
#app-sidebar .nav-submenu .nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
#app-sidebar .nav-submenu .nav-item:hover .material-symbols-outlined {
  color: #93c5fd;
}
#app-sidebar .nav-submenu .nav-item > span:last-child {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
}
#app-sidebar .nav-submenu .nav-item.nav-active {
  background: rgba(147, 197, 253, 0.14);
  color: #fff;
  font-weight: 600;
}
#app-sidebar .nav-submenu .nav-item.nav-active .material-symbols-outlined {
  color: #93c5fd;
}
#app-sidebar .nav-submenu .nav-item::before {
  left: 0.85rem;
  width: 2px;
  background: #93c5fd;
}
#app-sidebar .nav-submenu .nav-item.nav-active::before {
  opacity: 1;
  transform: scaleY(1);
}

/* Móvil: modo iconos — las reglas v2 no deben pisar el centrado */
@media (max-width: 1023.98px) {
  #app-sidebar .nav-submenu .nav-item,
  #app-sidebar .nav-section-toggle {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    justify-content: center;
  }
  #app-sidebar .nav-submenu .nav-item .material-symbols-outlined {
    font-size: 22px;
  }
  #app-sidebar .nav-submenu::before { display: none; }
  #app-sidebar .nav-submenu .nav-item::before { display: none; }
}
    

/* ============================================================
   Form controls base — equivalente local del plugin `forms` de
   Tailwind que los mockups cargan vía CDN (cdn.tailwindcss.com?plugins=forms).
   El runtime vendorizado (tailwind-runtime.js) NO incluye el plugin:
   preflight resetea border-width a 0 y los inputs quedan "planos".
   Esta capa restaura el aspecto aprobado de los 64 mockups para
   cualquier control que use las clases del diseño (o ninguna).
   ============================================================ */
input[type='text'], input[type='email'], input[type='password'],
input[type='number'], input[type='date'], input[type='datetime-local'],
input[type='tel'], input[type='url'], input[type='search'],
select, textarea {
  border-width: 1px;
  border-style: solid;
  border-color: #cfd6dc;             /* outline-variant del tema */
  background-color: #fbfcfd;         /* surface-container-low */
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-radius: 0.5rem;
  padding: 0.625rem 1rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type='text']:focus, input[type='email']:focus,
input[type='password']:focus, input[type='number']:focus,
input[type='date']:focus, input[type='datetime-local']:focus,
input[type='tel']:focus, input[type='url']:focus, input[type='search']:focus,
select:focus, textarea:focus {
  border-color: #456277;             /* primary */
  box-shadow: 0 0 0 1px rgba(69, 98, 119, 0.35);
}
input::placeholder, textarea::placeholder {
  color: #8a929b;                    /* outline */
}

/* ============================================================
   SIDEBAR: barra lateral que aparece desde el centro (scaleY)
   en el item activo y al hover.  (rediseño portales)
   ============================================================ */
.nav-item {
  position: relative;
  overflow: hidden;
  transition: background-color 0.22s ease, transform 0.22s ease, color 0.22s ease;
}
.nav-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: #93c5fd;               /* blue-300 sobre sidebar oscuro */
  transform: scaleY(0.35);
  transform-origin: center;
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.22s ease;
}
.nav-item:hover::before {
  opacity: 0.55;
  transform: scaleY(1);
}
.nav-item.nav-active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.nav-item.nav-active::before {
  opacity: 1;
  transform: scaleY(1);
}
.nav-item:hover {
  transform: translateX(2px);
}
.nav-item.nav-active:hover {
  transform: translateX(0);
}

/* ============================================================
   TARJETAS KPI del panel: hover con elevación suave
   ============================================================ */
.kpi-card {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}
.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -12px rgba(2, 6, 23, 0.28);
}

/* ============================================================
   TABLAS: hover de fila suave y encabezados estables
   ============================================================ */
.table-hover tbody tr {
  transition: background-color 0.18s ease;
}
.table-hover tbody tr:hover {
  background-color: rgba(69, 98, 119, 0.06);
}

/* ============================================================
   MONTOS Y DATOS MONOESPACIADOS: la clase font-mono-data apunta a
   Geist (sans variable, sin figuras tabulares por defecto); sin tnum
   los dígitos de los montos no se alinean en columnas y se ven "mal".
   Geist incluye figuras tabulares (característica opentype 'tnum').
   ============================================================ */
.font-mono-data {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ============================================================
   BOTONES con iconos: micro-interacción
   ============================================================ */
.btn-icon {
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.btn-icon:hover {
  transform: scale(1.06);
}
/* Los controles con clases explícitas del repo (w-full rounded-lg border ...)
   mantienen su estilo: las clases Tailwind tienen mayor especificidad por orden
   de carga (tailwind-runtime.js se emite antes de app.css en el layout). */

/* ============================================================
   CLASES DE LAYOUT (REQ-F1): utilidades usadas por las vistas Razor
   sin definición previa (también ausentes en los mockups: eran marcadores
   semánticos). Se definen acá para completar el CSS aprobado. Las clases
   base que compiten con utilidades Tailwind (bg-*, border-*, p-*) usan
   :where() para que las utilidades ganen por especificidad.
   ============================================================ */

/* Bento grid de 12 columnas (Dashboard/Admin, Home/Index, Inquilino/Index,
   Asambleas/Gestionar, Admin/Sanciones, Actas/Detalle): los hijos usan
   col-span-12 en base + variantes md:/lg: de Tailwind, así que el grid de
   12 col (minmax(0,1fr) para tracks iguales) cubre mobile (col-span-12 =
   ancho completo) y desktop (spans md:/lg:) sin fallbacks: un fallback de
   N columnas con spans > N crea tracks implícitos de 0px que rompen el
   layout (verificado en vivo a 768px). */
:root {
  --gutter: 1.5rem; /* token de espaciado del design system */
}
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

/* Tarjeta "glass": superficie translúcida + borde + blur. En dark apunta a la
   superficie oscura del tema (surface-container-low translúcido). */
:where(.glass-card) {
  background-color: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(194, 199, 205, 0.55); /* outline-variant */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html.dark :where(.glass-card) {
  background-color: rgba(22, 35, 58, 0.55); /* surface-container-low dark */
  border-color: rgba(38, 54, 79, 0.7);      /* outline-variant dark */
}

/* Tarjeta bento con base surface-container-lowest (Actas/Detalle,
   Proveedores/Detalle). Las bg-* explícitas de cada vista la reemplazan. */
:where(.bento-card) {
  background-color: #ffffff; /* surface-container-lowest */
  border: 1px solid #c2c7cd; /* outline-variant */
  border-radius: 0.75rem;    /* rounded-xl */
  padding: 1.5rem;           /* p-stack-md */
}
html.dark :where(.bento-card) {
  background-color: #111c30;
  border-color: #26364f;
}

/* Íconos Material Symbols rellenos (mockups: font-variation-settings 'FILL' 1;
   REQ-F1 agrega 'wght' 600 para peso consistente con la fuente variable). */
.ms-fill {
  font-variation-settings: 'FILL' 1, 'wght' 600;
}

/* Scrollbar fina y consistente con el tema (paneles con overflow:
   Actas/Detalle, Admin/Permisos, Admin/Roles). */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #c2c7cd transparent; /* outline-variant */
}
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #c2c7cd;
  border-radius: 8px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #73787d; /* outline */
}
html.dark .custom-scrollbar {
  scrollbar-color: #26364f transparent;
}
html.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #26364f;
}
html.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #33466b;
}

/* Primera columna fija al hacer scroll horizontal:
   .sticky-column (Admin/Permisos — las celdas tienen bg propia) y
   .table-sticky-first (Consorcios/Unidades — 1ª celda de cada fila). */
.sticky-column {
  position: sticky;
  left: 0;
  z-index: 5;
}
.table-sticky-first th:first-child,
.table-sticky-first td:first-child {
  position: sticky;
  left: 0;
  z-index: 5;
}
.table-sticky-first thead th:first-child {
  background-color: #f3f4f6; /* surface-gray */
}
.table-sticky-first tbody td:first-child,
.table-sticky-first tfoot td:first-child {
  background-color: #ffffff; /* surface-container-lowest */
}
html.dark .table-sticky-first thead th:first-child {
  background-color: #16233a; /* surface-gray dark */
}
html.dark .table-sticky-first tbody td:first-child,
html.dark .table-sticky-first tfoot td:first-child {
  background-color: #111c30; /* surface-container-lowest dark */
}

/* Tarjetas de estadísticas (Actas/LibroFirmas, mockup 35) y legales
   (Admin/Sanciones, mockup 57). legal-card sin padding: la vista agrega
   p-stack-md y el caso overflow-hidden (tabla) necesita sangría cero. */
.stat-card {
  background-color: #ffffff; /* surface-container-lowest */
  border: 1px solid #c2c7cd; /* outline-variant */
  border-radius: 0.75rem;    /* rounded-xl */
  padding: 1.5rem;           /* p-6 */
}
.legal-card {
  background-color: #ffffff;
  border: 1px solid #c2c7cd;
  border-radius: 0.75rem;
}
html.dark .stat-card,
html.dark .legal-card {
  background-color: #111c30; /* surface-container-lowest dark */
  border-color: #26364f;     /* outline-variant dark */
}

/* ============================================================
   SELECT2 — tema ConsorcioOS (REQ UX 2026-08-12)
   Selects nativos → select2 con búsqueda; el tema iguala los
   inputs del design system (borde outline-variant, focus primary).
   ============================================================ */
.select2-container .select2-selection--single {
  height: 2.5rem;
  display: flex;
  align-items: center;
  border: 1px solid var(--outline-variant, #c2c7cd);
  border-radius: 0.5rem;
  background: var(--surface-container-lowest, #fff);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 2.5rem;
  padding-left: 0.75rem;
  color: var(--on-surface, #17202e);
  font-size: 0.875rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 2.5rem;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--primary, #1d6fb8);
  box-shadow: 0 0 0 3px rgba(29, 111, 184, 0.18);
}
.select2-container--default .select2-dropdown {
  border: 1px solid var(--outline-variant, #c2c7cd);
  border-radius: 0.5rem;
  overflow: hidden;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--primary-container, #cfe4f7);
  color: var(--on-primary-container, #0b3954);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--outline-variant, #c2c7cd);
  border-radius: 0.375rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
}
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--outline-variant, #c2c7cd);
  border-radius: 0.5rem;
  min-height: 2.5rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--surface-container-high, #e4e9f0);
  border: 1px solid var(--outline-variant, #c2c7cd);
  border-radius: 0.375rem;
}
/* Dark mode */
html.dark .select2-container .select2-selection--single,
html.dark .select2-container--default .select2-selection--multiple {
  background: #111c30;
  border-color: #26364f;
}
html.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #e6ecf5;
}
html.dark .select2-container--default .select2-dropdown {
  background: #16233a;
  border-color: #26364f;
}
html.dark .select2-container--default .select2-results__option {
  color: #dbe4f0;
}
html.dark .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: #1d6fb8;
  color: #fff;
}
html.dark .select2-container--default .select2-search--dropdown .select2-search__field {
  background: #111c30;
  border-color: #26364f;
  color: #e6ecf5;
}