/* Minification failed. Returning unminified contents.
(19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(30,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(33,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(37,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(38,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(39,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(40,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(41,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(44,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(48,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(49,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(65,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(66,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(70,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(81,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(82,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-600'
(113,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(120,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(125,22): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(126,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-400'
(127,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(131,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-500'
(135,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-500'
(159,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(160,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(161,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(177,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(178,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(179,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(193,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(203,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(204,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-600'
(205,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(213,28): run-time error CSS1039: Token not allowed after unary operator: '-resolution-blue-400'
(214,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(219,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(230,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(231,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(237,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(238,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(243,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(244,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(254,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(255,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(256,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(260,28): run-time error CSS1039: Token not allowed after unary operator: '-resolution-blue-500'
(261,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(266,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(267,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(273,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(274,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(275,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-400'
(280,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(281,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(282,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-500'
(286,28): run-time error CSS1039: Token not allowed after unary operator: '-resolution-blue-500'
(287,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(298,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(299,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(300,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-400'
(310,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(311,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(312,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(317,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(318,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(326,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(327,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(328,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(332,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(333,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(349,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(360,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(361,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(362,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(370,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(377,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(385,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(390,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(392,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-400'
(397,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(398,22): run-time error CSS1039: Token not allowed after unary operator: '-resolution-blue-500'
(399,24): run-time error CSS1039: Token not allowed after unary operator: '-resolution-blue-500'
(403,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(404,22): run-time error CSS1039: Token not allowed after unary operator: '-resolution-blue-400'
(405,24): run-time error CSS1039: Token not allowed after unary operator: '-resolution-blue-400'
(411,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-500'
(413,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-400'
(419,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(420,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(421,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-400'
(429,22): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(430,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(431,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-400'
(438,22): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(439,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(440,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-500'
(447,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(453,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(457,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(458,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(463,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(464,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(465,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(472,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(473,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(484,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(499,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(514,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(520,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(533,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(544,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(570,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(571,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(572,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-400'
(579,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(580,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-600'
(586,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(587,33): run-time error CSS1039: Token not allowed after unary operator: '-tangerine-yellow-500'
(594,24): run-time error CSS1039: Token not allowed after unary operator: '-summer-sky-500'
(599,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-500'
(608,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(609,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-500'
(625,22): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(626,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(627,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(631,17): run-time error CSS1039: Token not allowed after unary operator: '-summer-sky-500'
(637,22): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(638,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(639,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(643,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(650,22): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(651,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-400'
(652,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(658,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(668,22): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(669,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-500'
(670,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(675,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(683,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(690,22): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(691,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(692,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-400'
(696,22): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(697,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(698,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(709,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(710,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(715,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(721,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(730,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(731,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(732,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(736,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(749,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(750,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(751,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(756,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(757,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(758,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(762,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(763,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(764,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(773,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(774,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(775,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-400'
(784,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(785,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(786,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-500'
(792,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(793,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-500'
(794,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(806,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(807,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(808,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(813,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(817,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(827,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(834,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(851,28): run-time error CSS1039: Token not allowed after unary operator: '-enterprise-black'
(868,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(869,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(870,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(884,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(885,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(886,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(895,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(896,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(897,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(903,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(904,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(905,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(914,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(915,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(916,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(923,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(924,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(939,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(940,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(941,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(948,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(949,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(950,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(956,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(957,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(972,22): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(973,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(977,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(978,34): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(982,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-500'
(986,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(990,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-500'
(994,33): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(999,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(1004,22): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(1008,22): run-time error CSS1039: Token not allowed after unary operator: '-paris-m-300'
(1014,22): run-time error CSS1039: Token not allowed after unary operator: '-paris-m-300'
(1020,22): run-time error CSS1039: Token not allowed after unary operator: '-paris-m-300'
(1025,22): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(1081,22): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(1083,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(1084,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-400'
(1092,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(1096,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-500'
(1101,24): run-time error CSS1039: Token not allowed after unary operator: '-summer-sky-500'
(1106,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(1112,22): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(1113,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(1114,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-400'
(1120,22): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(1121,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(1125,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(1131,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(1132,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(1137,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-500'
(1147,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-600'
(1151,31): run-time error CSS1039: Token not allowed after unary operator: '-neutral-600'
 */
/*
    Dark mode overrides.

    Strategy: the existing design system uses CSS custom properties extensively
    (see DesignSystemBase.css). This file ONLY redefines those custom properties
    when the document has [data-theme="dark"] on <html>. When the attribute is
    absent (the default for every user, including those on the early-access
    feature toggle), nothing in this file applies and the UI is identical to
    before.

    Keep this additive. Do NOT edit DesignSystemBase.css or other stylesheets
    for dark mode — overrides belong here so the feature is fully reversible.
*/

:root[data-theme="dark"] {
    /* NEUTRAL — flip the lightness scale.
       100 (was pure white background) becomes the new dark canvas;
       800 (was near-black text) becomes near-white text. */
    --neutral-100: #1A1D2E;
    --neutral-200: #14172A;
    --neutral-300: #2A2D44;
    --neutral-400: #3F4262;
    --neutral-500: #8A8DA3;
    --neutral-600: #B7B9CC;
    --neutral-700: #D6D8E8;
    --neutral-800: #ECEEF8;

    /* PARIS M — soften so the deep purple does not turn into a black hole on dark.  */
    --paris-m-100: #6F66E0;
    --paris-m-200: #635BCF;
    --paris-m-300: #5751BD;
    --paris-m-400: #4D49AC;
    --paris-m-500: #45419B;

    /* RESOLUTION BLUE — keep mid-saturation values; the primary action color  */
    /* must remain recognizable across themes. */
    --resolution-blue-100: #8C9CFC;
    --resolution-blue-200: #738AFF;
    --resolution-blue-300: #5C73F0;
    --resolution-blue-400: #4D64F4;
    --resolution-blue-500: #657AFB;

    /* SUMMER SKY — focus / accent color. Slightly brighter on dark for legibility. */
    --summer-sky-500: #45D8EE;

    /* ENTERPRISE BLACK — invert: the "enterprise" navbar variant looked black on light.
       On dark, we lift it slightly above the canvas so it stays visible. */
    --enterprise-black: #0B0E1F;
    --enterprise-black-100: #1F2236;

    /* Typography color tokens reference --neutral-800 / --neutral-600 by default,
       so they pick up the inverted values above automatically. We don't need to
       redeclare heading-h{1..6}-color or body-{large,medium,small}-color. */

    color-scheme: dark;
}

/*
    Targeted overrides for places where a literal color (not a var()) is baked in.
    Add to this section if QA finds regressions. Keep selectors specific so we don't
    over-reach.
*/

:root[data-theme="dark"] body {
    background-color: var(--neutral-200);
    color: var(--neutral-700);
}

:root[data-theme="dark"] .table {
    color: var(--neutral-700);
}

/* Soften white-on-white shadows that were tuned for the light theme. */
:root[data-theme="dark"] .open .dropdown-menu.adm-dropdown-menu,
:root[data-theme="dark"] .ui-menu.ui-widget.ui-widget-content.ui-autocomplete {
    box-shadow: 0 0.2rem 0.3rem 0 rgba(0, 0, 0, 0.6);
}

/* Footer: Layout.css hardcodes background-color: #f5f5f5 on .adm-footer. */
:root[data-theme="dark"] .adm-footer {
    background-color: var(--neutral-200);
    color: var(--neutral-600);
}

/*
    JustGage SVG text on dashboard KPI panels (Shared/Panels/GenericKpi.cshtml,
    CustomKpi.cshtml). JustGage renders the title / value / label as SVG <text>
    with a hardcoded black fill. Use a light fill + soft drop-shadow so the text
    stays readable over green / yellow / red gauge sectors without the heaviness
    of a stroke outline.
*/
:root[data-theme="dark"] .standard_panel svg text {
    fill: #E5E7F0 !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

/*
    Navbar text — applies to BOTH the default and the .enterprise variant.

    AdmNavbar.css uses var(--paris-m-500) (dark brand purple) for navbar text in
    the default variant, and var(--neutral-200) for the .enterprise variant.
    Both of those map to dark colors in dark mode, so without these overrides
    the navbar text becomes invisible on the dark navbar background.
*/
:root[data-theme="dark"] .adm-navbar .adm-navbar__user-company-name,
:root[data-theme="dark"] .adm-navbar .adm-navbar__version-btn.adm-navbar__button,
:root[data-theme="dark"] .adm-navbar .adm-navbar__user-name,
:root[data-theme="dark"] .adm-navbar .adm-navbar__user-role,
:root[data-theme="dark"] .adm-navbar .adm-navbar__navigation-button,
:root[data-theme="dark"] .adm-navbar .adm-navbar__notification,
:root[data-theme="dark"] .adm-navbar .adm-navbar__notification:hover,
:root[data-theme="dark"] .adm-navbar .adm-navbar__button {
    color: var(--neutral-800);
}

/* SVG icons inside navbar buttons inherit via stroke="currentColor"; make sure
   they pick up the light color even when nested inside spans. */
:root[data-theme="dark"] .adm-navbar .adm-navbar__button svg,
:root[data-theme="dark"] .adm-navbar .adm-navbar__notification svg {
    color: var(--neutral-800);
}

/* Search bar — both variants */
:root[data-theme="dark"] .adm-navbar .adm-navbar__search-bar {
    background: var(--neutral-200);
    border-color: var(--neutral-400);
    color: var(--neutral-800);
}

:root[data-theme="dark"] .adm-navbar .adm-navbar__search-bar::placeholder {
    color: var(--neutral-500);
}

:root[data-theme="dark"] .adm-navbar .adm-navbar__search-bar-icon {
    color: var(--neutral-500);
}

/*
    DevExpress Office365 theme overrides.

    The Office365 CSS is shipped as an embedded resource by DevExpress and isn't
    on disk in this repo, so we can't edit it. Instead we override the generated
    class names. Best-effort coverage for the most common widgets — GridView,
    Pager, Buttons, Editors. !important is necessary because DevExpress's own
    selectors are very specific and would otherwise win.

    A "proper" fix is to switch to the Office365Dark theme server-side; that's
    a bigger change (requires a server round-trip for the preference) and is
    flagged as a follow-up in the PR description.
*/

/* GridView — root, headers, data rows, alt rows, focused row, command column */
:root[data-theme="dark"] .dxgvControl_Office365,
:root[data-theme="dark"] .dxgv_Office365,
:root[data-theme="dark"] .dxgvDataRow_Office365,
:root[data-theme="dark"] .dxgvDataRow_Office365 td,
:root[data-theme="dark"] .dxgvCommandColumn_Office365,
:root[data-theme="dark"] .dxgvCommandColumnItem_Office365 {
    background-color: var(--neutral-100) !important;
    color: var(--neutral-700) !important;
    border-color: var(--neutral-300) !important;
}

:root[data-theme="dark"] .dxgvHeader_Office365,
:root[data-theme="dark"] .dxgvTable_Office365 > tbody > tr.dxgvHeader_Office365 > td,
:root[data-theme="dark"] .dxgvFilterRow_Office365,
:root[data-theme="dark"] .dxgvFilterRow_Office365 td,
:root[data-theme="dark"] td.dxgvHeader_Office365,
:root[data-theme="dark"] .dxgvHeader_Office365 td,
:root[data-theme="dark"] .dxgvHeaderPanel_Office365,
:root[data-theme="dark"] .dxgvHeaderPanel_Office365 td,
:root[data-theme="dark"] .dxgvCustomizationFormBackground_Office365,
:root[data-theme="dark"] .dxgvIndentCell_Office365,
:root[data-theme="dark"] .dxgvFilterRowMenuItem_Office365,
:root[data-theme="dark"] tr.dxgvHeader_Office365 > td.dxgv,
:root[data-theme="dark"] .dxgvTitlePanel_Office365 {
    background-color: var(--neutral-200) !important;
    color: var(--neutral-800) !important;
    border-color: var(--neutral-300) !important;
}

/* Header sort/filter button icons inside header cells */
:root[data-theme="dark"] .dxgvHeader_Office365 .dxgvHeaderSortDown_Office365,
:root[data-theme="dark"] .dxgvHeader_Office365 .dxgvHeaderSortUp_Office365,
:root[data-theme="dark"] .dxgvHeader_Office365 .dxGridView_gvHeaderFilter,
:root[data-theme="dark"] .dxgvHeader_Office365 img {
    filter: invert(0.9);
}

/* Alt row (zebra) */
:root[data-theme="dark"] .dxgvDataRowAlt_Office365,
:root[data-theme="dark"] .dxgvDataRowAlt_Office365 td {
    background-color: var(--neutral-200) !important;
}

/* Empty-data row ("Sin datos para mostrar" / "No data to display") — DevExpress
   renders this with the light theme background when the grid has no records, so
   without this override it shows as a white band on dark. Generic across every
   Office365 GridView. */
:root[data-theme="dark"] .dxgvEmptyDataRow_Office365,
:root[data-theme="dark"] .dxgvEmptyDataRow_Office365 td,
:root[data-theme="dark"] td.dxgvEmptyDataRow_Office365 {
    background-color: var(--neutral-100) !important;
    color: var(--neutral-600) !important;
    border-color: var(--neutral-300) !important;
}

/* Selected / focused / hovered rows */
:root[data-theme="dark"] .dxgvSelectedRow_Office365,
:root[data-theme="dark"] .dxgvSelectedRow_Office365 td,
:root[data-theme="dark"] .dxgvFocusedRow_Office365,
:root[data-theme="dark"] .dxgvFocusedRow_Office365 td {
    background-color: var(--resolution-blue-400) !important;
    color: var(--neutral-100) !important;
}

:root[data-theme="dark"] .dxgvDataRow_Office365.dxgvHoverRow_Office365,
:root[data-theme="dark"] .dxgvDataRow_Office365.dxgvHoverRow_Office365 td {
    background-color: var(--neutral-300) !important;
}

/* Group / detail / footer rows */
:root[data-theme="dark"] .dxgvGroupRow_Office365,
:root[data-theme="dark"] .dxgvGroupRow_Office365 td,
:root[data-theme="dark"] .dxgvDetail_Office365,
:root[data-theme="dark"] .dxgvFooter_Office365,
:root[data-theme="dark"] .dxgvFooter_Office365 td,
:root[data-theme="dark"] .dxgvGroupFooter_Office365,
:root[data-theme="dark"] .dxgvGroupFooter_Office365 td {
    background-color: var(--neutral-200) !important;
    color: var(--neutral-700) !important;
}

/* Loading panel */
:root[data-theme="dark"] .dxgvLoadingPanel_Office365,
:root[data-theme="dark"] .dxgvLoadingDiv_Office365 {
    background-color: var(--neutral-100) !important;
    color: var(--neutral-700) !important;
}

/* Search panel (already covered partially in DesignSystemBase.css but for safety) */
:root[data-theme="dark"] .dxgvSearchPanel_Office365 {
    background-color: var(--neutral-200) !important;
    color: var(--neutral-700) !important;
}

/* Pager */
:root[data-theme="dark"] .dxgvPagerBottomPanel_Office365,
:root[data-theme="dark"] .dxgvPagerTopPanel_Office365,
:root[data-theme="dark"] .dxpControl_Office365,
:root[data-theme="dark"] .dxpSummary_Office365,
:root[data-theme="dark"] .dxpPageNumber_Office365,
:root[data-theme="dark"] .dxpButton_Office365 {
    background-color: var(--neutral-200) !important;
    color: var(--neutral-700) !important;
    border-color: var(--neutral-300) !important;
}

:root[data-theme="dark"] .dxpCurrentPageNumber_Office365 {
    background-color: var(--resolution-blue-500) !important;
    color: var(--neutral-100) !important;
}

:root[data-theme="dark"] .dxpButtonHover_Office365,
:root[data-theme="dark"] .dxpPageNumberHover_Office365 {
    background-color: var(--neutral-300) !important;
    color: var(--neutral-800) !important;
}

/* Generic DevExpress buttons (.dxbButton) */
:root[data-theme="dark"] .dxbButton_Office365,
:root[data-theme="dark"] .dxb_Office365 {
    background-color: var(--neutral-200) !important;
    color: var(--neutral-700) !important;
    border-color: var(--neutral-400) !important;
}

:root[data-theme="dark"] .dxbButtonHover_Office365,
:root[data-theme="dark"] .dxbButton_Office365:hover {
    background-color: var(--neutral-300) !important;
    color: var(--neutral-800) !important;
    border-color: var(--neutral-500) !important;
}

:root[data-theme="dark"] .dxbButtonPressed_Office365 {
    background-color: var(--resolution-blue-500) !important;
    color: var(--neutral-100) !important;
}

/* Editors (textbox, combobox, etc.) — the visible input area */
:root[data-theme="dark"] .dxeEditAreaSys,
:root[data-theme="dark"] .dxeEditArea_Office365,
:root[data-theme="dark"] .dxeButtonEdit_Office365,
:root[data-theme="dark"] .dxeButtonEditButton_Office365,
:root[data-theme="dark"] .dxeTextBox_Office365,
:root[data-theme="dark"] .dxeMemo_Office365,
:root[data-theme="dark"] .dxeMemoEditArea_Office365 {
    background-color: var(--neutral-100) !important;
    color: var(--neutral-700) !important;
    border-color: var(--neutral-400) !important;
}

/* Dropdown lists / popup edit dropdowns */
:root[data-theme="dark"] .dxeListBox_Office365,
:root[data-theme="dark"] .dxeListBoxItem_Office365,
:root[data-theme="dark"] .dxeListBoxItemRow_Office365,
:root[data-theme="dark"] .dxpcDropDown_Office365,
:root[data-theme="dark"] .dxpcContent_Office365,
:root[data-theme="dark"] .dxpcHeader_Office365 {
    background-color: var(--neutral-100) !important;
    color: var(--neutral-700) !important;
    border-color: var(--neutral-300) !important;
}

:root[data-theme="dark"] .dxeListBoxItemHover_Office365,
:root[data-theme="dark"] .dxeListBoxItemSelected_Office365 {
    background-color: var(--neutral-300) !important;
    color: var(--neutral-800) !important;
}

/* Tabs (used by some screens with tabbed grids) */
:root[data-theme="dark"] .dxtc_Office365,
:root[data-theme="dark"] .dxtcLite_Office365 .dxtc-stripContainer,
:root[data-theme="dark"] .dxtcLite_Office365 .dxtc-stripContainer .dxtc-strip,
:root[data-theme="dark"] .dxtcLite_Office365 .dxtc-stripContainer .dxtc-strip .dxtc-tab {
    background-color: var(--neutral-200) !important;
    color: var(--neutral-700) !important;
    border-color: var(--neutral-300) !important;
}

:root[data-theme="dark"] .dxtcLite_Office365 .dxtc-stripContainer .dxtc-strip .dxtc-activeTab {
    background-color: var(--neutral-100) !important;
    color: var(--neutral-800) !important;
}

/*
    DataTables — the third-party bundle in libraries/datatables/datatables.min.css
    ships with hardcoded colors (#ffffff, #f9f9f9, #333, "white") that bypass our
    design-system variables. Override them here for dark mode. Scope every rule
    under :root[data-theme="dark"] so light mode is untouched.
*/

/* Container, info text, length selector, search box wrappers */
:root[data-theme="dark"] .dataTables_wrapper,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_info,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_length,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_processing {
    color: var(--neutral-700);
}

/* The table itself */
:root[data-theme="dark"] table.dataTable,
:root[data-theme="dark"] table.dataTable thead th,
:root[data-theme="dark"] table.dataTable thead td,
:root[data-theme="dark"] table.dataTable tbody th,
:root[data-theme="dark"] table.dataTable tbody td,
:root[data-theme="dark"] table.dataTable tfoot th,
:root[data-theme="dark"] table.dataTable tfoot td {
    background-color: var(--neutral-100);
    color: var(--neutral-700);
    border-color: var(--neutral-300);
}

/* Zebra striping (stripe class) and hover rows */
:root[data-theme="dark"] table.dataTable.stripe tbody tr.odd,
:root[data-theme="dark"] table.dataTable.display tbody tr.odd,
:root[data-theme="dark"] table.dataTable.stripe tbody tr.odd > td,
:root[data-theme="dark"] table.dataTable.display tbody tr.odd > td {
    background-color: var(--neutral-200);
}

:root[data-theme="dark"] table.dataTable.hover tbody tr:hover,
:root[data-theme="dark"] table.dataTable.display tbody tr:hover,
:root[data-theme="dark"] table.dataTable.hover tbody tr:hover > td,
:root[data-theme="dark"] table.dataTable.display tbody tr:hover > td {
    background-color: var(--neutral-300);
}

/* Row borders */
:root[data-theme="dark"] table.dataTable.row-border tbody th,
:root[data-theme="dark"] table.dataTable.row-border tbody td,
:root[data-theme="dark"] table.dataTable.display tbody th,
:root[data-theme="dark"] table.dataTable.display tbody td {
    border-top-color: var(--neutral-300);
}

/* Pagination buttons */
:root[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--neutral-700) !important;
    background: transparent;
    border-color: var(--neutral-400);
}

:root[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: var(--neutral-100) !important;
    background: var(--resolution-blue-500);
    border-color: var(--resolution-blue-500);
}

:root[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: var(--neutral-100) !important;
    background: var(--resolution-blue-400);
    border-color: var(--resolution-blue-400);
}

:root[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    color: var(--neutral-500) !important;
    background: transparent;
    border-color: var(--neutral-400);
}

/* Search and length inputs */
:root[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: var(--neutral-100);
    color: var(--neutral-700);
    border: 1px solid var(--neutral-400);
}

/* Buttons extension (.dt-buttons .dt-button) — overrides the white→grey gradient */
:root[data-theme="dark"] .dt-button,
:root[data-theme="dark"] button.dt-button,
:root[data-theme="dark"] div.dt-button,
:root[data-theme="dark"] a.dt-button {
    background: var(--neutral-200) !important;
    color: var(--neutral-700) !important;
    border-color: var(--neutral-400) !important;
}

:root[data-theme="dark"] .dt-button:hover:not(.disabled),
:root[data-theme="dark"] button.dt-button:hover:not(.disabled),
:root[data-theme="dark"] div.dt-button:hover:not(.disabled),
:root[data-theme="dark"] a.dt-button:hover:not(.disabled) {
    background: var(--neutral-300) !important;
    color: var(--neutral-800) !important;
    border-color: var(--neutral-500) !important;
}

/* Bootstrap 3 striped/hover tables — same problem, hardcoded #f9f9f9 / rgba(0,0,0,...) */
:root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
:root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td,
:root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: var(--neutral-200);
}

:root[data-theme="dark"] .table-hover > tbody > tr:hover,
:root[data-theme="dark"] .table-hover > tbody > tr:hover > td,
:root[data-theme="dark"] .table-hover > tbody > tr:hover > th {
    background-color: var(--neutral-300);
}

:root[data-theme="dark"] .table {
    background-color: var(--neutral-100) !important;
    color: var(--neutral-700) !important;
}

:root[data-theme="dark"] .table > thead > tr > th,
:root[data-theme="dark"] .table > thead > tr > td {
    background-color: var(--neutral-200) !important;
    color: var(--neutral-800) !important;
    border-color: var(--neutral-300) !important;
}

:root[data-theme="dark"] .table > tbody > tr > th,
:root[data-theme="dark"] .table > tbody > tr > td,
:root[data-theme="dark"] .table > tfoot > tr > th,
:root[data-theme="dark"] .table > tfoot > tr > td {
    color: var(--neutral-700);
    border-color: var(--neutral-300) !important;
}

/* Bootstrap .table-bordered also draws light borders on the cells themselves */
:root[data-theme="dark"] .table-bordered,
:root[data-theme="dark"] .table-bordered > thead > tr > th,
:root[data-theme="dark"] .table-bordered > tbody > tr > th,
:root[data-theme="dark"] .table-bordered > tfoot > tr > th,
:root[data-theme="dark"] .table-bordered > thead > tr > td,
:root[data-theme="dark"] .table-bordered > tbody > tr > td,
:root[data-theme="dark"] .table-bordered > tfoot > tr > td {
    border-color: var(--neutral-300) !important;
}

/*
    Manual zebra striping. Many grid partials (e.g.
    Views/ServiceRequests/Index_Partial.cshtml and the shared Productivity_*
    tables) stripe alternating rows with an inline `background-color: whitesmoke`
    instead of .table-striped. That literal stays near-white in dark mode, so the
    striped rows render as bright bands. Match the inline style by value so the
    override is generic across every grid that uses the pattern; !important beats
    the inline declaration, which carries none of its own.
*/
:root[data-theme="dark"] tr[style*="whitesmoke"],
:root[data-theme="dark"] td[style*="whitesmoke"],
:root[data-theme="dark"] th[style*="whitesmoke"] {
    background-color: var(--neutral-200) !important;
}

/*
    Same manual-striping pattern, different literals. The ImportDocs grids
    (Views/ImportDocs/IndexPartial.cshtml, ProcessedPartial.cshtml) alternate
    rows with inline `background-color: white` / `#f9f9f9`. Map the two literals
    to the same base/stripe shades the rest of the dark tables use so the zebra
    contrast is preserved. The trailing `;` on the white match keeps it from
    also catching `background-color: whitesmoke` (handled above with a different
    shade).
*/
:root[data-theme="dark"] tr[style*="background-color: white;"],
:root[data-theme="dark"] td[style*="background-color: white;"],
:root[data-theme="dark"] th[style*="background-color: white;"] {
    background-color: var(--neutral-100) !important;
}

:root[data-theme="dark"] tr[style*="#f9f9f9"],
:root[data-theme="dark"] td[style*="#f9f9f9"],
:root[data-theme="dark"] th[style*="#f9f9f9"] {
    background-color: var(--neutral-200) !important;
}

/*
    Kanban board column bodies (ServiceRequests/Board, TransTypeBoard,
    ConsultantBoard, AssignedToBoard, CompleteBoard, PublicBoard,
    PublicAssignedToBoard). Each column's panel-body has an inline
    `background-color: #f8f8f8` to set a soft grey lane behind the cards.
    That literal stays near-white in dark mode, so the lanes render as bright
    bands inside the otherwise-dark board. Match the inline style by value so
    the override covers every board screen without per-view edits.
*/
:root[data-theme="dark"] [style*="#f8f8f8"] {
    background-color: var(--neutral-200) !important;
}

/*
    Custom hover. Several grid pages add a page-level `tr:hover {
    background-color: #f5f5f5 }` rule (e.g. ServiceRequests/Index.cshtml) that is
    not the Bootstrap .table-hover handled above. Give grid_view_table rows the
    same dark hover used elsewhere.
*/
:root[data-theme="dark"] .grid_view_table > tbody > tr:hover,
:root[data-theme="dark"] .grid_view_table > tbody > tr:hover > td {
    background-color: var(--neutral-300) !important;
}

/*
    Form inputs. Two reasons !important is required here:
      1. bootstrap.min.css loads AFTER DarkMode.css in _Layout.cshtml, so its
         .form-control rules would otherwise win on cascade order.
      2. EditorTemplates2/String.cshtml hardcodes inline styles for readonly
         (background-color: whitesmoke) and required (ivory) inputs. !important
         on author CSS beats inline styles that lack their own !important.
*/
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] input[type="url"],
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="datetime-local"],
:root[data-theme="dark"] input[type="time"],
:root[data-theme="dark"] input[type="month"],
:root[data-theme="dark"] input[type="week"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
    background-color: var(--neutral-100) !important;
    color: var(--neutral-700) !important;
    border-color: var(--neutral-400) !important;
}

/* Readonly inputs: slightly darker than editable so the disabled affordance is preserved. */
:root[data-theme="dark"] input[readonly],
:root[data-theme="dark"] textarea[readonly],
:root[data-theme="dark"] .form-control[readonly] {
    background-color: var(--neutral-200) !important;
    color: var(--neutral-600) !important;
}

/* Required inputs in the codebase get inline "background-color: ivory;" — give them a subtle accent in dark mode. */
:root[data-theme="dark"] .form-control[required]:not([readonly]),
:root[data-theme="dark"] input[required]:not([readonly]):not([type="checkbox"]):not([type="radio"]) {
    background-color: var(--neutral-100) !important;
    border-left: 3px solid var(--tangerine-yellow-500) !important;
}

:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] select:focus {
    border-color: var(--summer-sky-500) !important;
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: var(--neutral-500) !important;
}

/* Disabled inputs */
:root[data-theme="dark"] .form-control[disabled],
:root[data-theme="dark"] input[disabled],
:root[data-theme="dark"] textarea[disabled],
:root[data-theme="dark"] select[disabled],
:root[data-theme="dark"] fieldset[disabled] .form-control {
    background-color: var(--neutral-200) !important;
    color: var(--neutral-500) !important;
    cursor: not-allowed;
}

/*
    jQuery UI tabs and widgets. theme.css (loaded after DarkMode.css) hardcodes
    .ui-widget-content with #ffffff bg and #333 text — that's why tab content
    panels stay light. !important is required to win the cascade. The existing
    .ui-tabs-active override in DesignSystemBase.css already uses !important,
    so this matches that established pattern.
*/

/* Tab panel content (the body of each tab) */
:root[data-theme="dark"] .ui-widget.ui-widget-content,
:root[data-theme="dark"] .ui-widget-content,
:root[data-theme="dark"] .ui-tabs .ui-tabs-panel {
    background: var(--neutral-100) !important;
    color: var(--neutral-700) !important;
    border-color: var(--neutral-300) !important;
}

:root[data-theme="dark"] .ui-widget-content a {
    color: var(--summer-sky-500) !important;
}

/* Tab strip header */
:root[data-theme="dark"] .ui-widget-header,
:root[data-theme="dark"] .ui-tabs .ui-tabs-nav {
    background: var(--neutral-200) !important;
    color: var(--neutral-700) !important;
    border-color: var(--neutral-300) !important;
}

:root[data-theme="dark"] .ui-widget-header a {
    color: var(--neutral-700) !important;
}

/* Inactive tab (.ui-state-default) */
:root[data-theme="dark"] .ui-state-default,
:root[data-theme="dark"] .ui-widget-content .ui-state-default,
:root[data-theme="dark"] .ui-widget-header .ui-state-default {
    background: var(--neutral-200) !important;
    border-color: var(--neutral-400) !important;
    color: var(--neutral-700) !important;
}

:root[data-theme="dark"] .ui-state-default a,
:root[data-theme="dark"] .ui-state-default a:link,
:root[data-theme="dark"] .ui-state-default a:visited {
    color: var(--neutral-700) !important;
}

/* Tab hover / focus */
:root[data-theme="dark"] .ui-state-hover,
:root[data-theme="dark"] .ui-widget-content .ui-state-hover,
:root[data-theme="dark"] .ui-widget-header .ui-state-hover,
:root[data-theme="dark"] .ui-state-focus,
:root[data-theme="dark"] .ui-widget-content .ui-state-focus,
:root[data-theme="dark"] .ui-widget-header .ui-state-focus {
    background: var(--neutral-300) !important;
    border-color: var(--neutral-500) !important;
    color: var(--neutral-800) !important;
}

:root[data-theme="dark"] .ui-state-hover a,
:root[data-theme="dark"] .ui-state-focus a {
    color: var(--neutral-800) !important;
}

/* Active tab text colour — DesignSystemBase.css already sets bg via .ui-tabs-active. */
:root[data-theme="dark"] .ui-tabs-active a,
:root[data-theme="dark"] .ui-state-active a,
:root[data-theme="dark"] .ui-state-active a:link,
:root[data-theme="dark"] .ui-state-active a:visited {
    color: var(--neutral-800) !important;
}

/* jQuery UI Dialog (uses .ui-widget-content too, but with its own chrome) */
:root[data-theme="dark"] .ui-dialog,
:root[data-theme="dark"] .ui-dialog-content,
:root[data-theme="dark"] .ui-dialog-buttonpane {
    background: var(--neutral-100) !important;
    color: var(--neutral-700) !important;
    border-color: var(--neutral-400) !important;
}

:root[data-theme="dark"] .ui-dialog-titlebar {
    background: var(--neutral-200) !important;
    color: var(--neutral-800) !important;
    border-color: var(--neutral-300) !important;
}

/*
    Activity tab chat (Shared/Productivity_*.cshtml -> #chatTab -> #tableChat).
    The table has an inline `background-color: whitesmoke`. Message bubble
    classes (.sendMessageBox / .receivedMessageBox) live inline inside
    _Layout.cshtml's <style> block with hardcoded #dcf8c6 (green) and white.
    !important needed to beat both inline style and inline <style> rules.
*/
:root[data-theme="dark"] #tableChat {
    background-color: var(--neutral-200) !important;
    color: var(--neutral-700) !important;
}

:root[data-theme="dark"] #tableChat td,
:root[data-theme="dark"] #tableChat th {
    color: var(--neutral-700);
}

/* Sent message bubble (your own messages) — keep the green family but darker. */
:root[data-theme="dark"] .sendMessageBox {
    background-color: #2A5D3A !important;
    color: var(--neutral-800);
}

:root[data-theme="dark"] .sendMessageBox:hover {
    background-color: #2F6A42 !important;
}

/* Received message bubble — dark surface that pops against the chat container. */
:root[data-theme="dark"] .receivedMessageBox {
    background-color: var(--neutral-100) !important;
    color: var(--neutral-700);
    border: 1px solid var(--neutral-300);
}

:root[data-theme="dark"] .receivedMessageBox:hover {
    background-color: var(--neutral-300) !important;
}

/*
    Bootstrap 3 .panel — used as the chat outer wrapper (the area around the
    "Ver Seguidores" button) and many other content panels across the app.
    bootstrap.css ships .panel { background-color: #fff } so we override it
    here. Dashboard panels (.adm_dashboard-cols .panel.panel-default in
    AdmHome.css) already use var(--neutral-100) which flips correctly; this
    rule covers all the other places .panel shows up.
*/
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .panel-default {
    background-color: var(--neutral-100) !important;
    color: var(--neutral-700) !important;
    border-color: var(--neutral-300) !important;
}

:root[data-theme="dark"] .panel-heading,
:root[data-theme="dark"] .panel-default > .panel-heading {
    background-color: var(--neutral-200) !important;
    color: var(--neutral-800) !important;
    border-color: var(--neutral-300) !important;
}

:root[data-theme="dark"] .panel-footer {
    background-color: var(--neutral-200) !important;
    color: var(--neutral-700) !important;
    border-color: var(--neutral-300) !important;
}

/*
    Bootstrap 3 .btn-default. DesignSystemBase.css overrides .btn-primary,
    .btn-secondary, etc. but not .btn-default, so it falls back to Bootstrap's
    white-on-light styling. Replicate the dark-mode equivalent.
*/
:root[data-theme="dark"] .btn-default {
    background-color: var(--neutral-200) !important;
    color: var(--neutral-700) !important;
    border-color: var(--neutral-400) !important;
}

:root[data-theme="dark"] .btn-default:hover,
:root[data-theme="dark"] .btn-default:focus,
:root[data-theme="dark"] .btn-default.focus,
:root[data-theme="dark"] .btn-default:active,
:root[data-theme="dark"] .btn-default.active,
:root[data-theme="dark"] .open > .dropdown-toggle.btn-default {
    background-color: var(--neutral-300) !important;
    color: var(--neutral-800) !important;
    border-color: var(--neutral-500) !important;
}

:root[data-theme="dark"] .btn-default.disabled,
:root[data-theme="dark"] .btn-default[disabled],
:root[data-theme="dark"] fieldset[disabled] .btn-default {
    background-color: var(--neutral-200) !important;
    color: var(--neutral-500) !important;
    border-color: var(--neutral-300) !important;
}

/*
    Bootstrap 3 modals. bootstrap.css ships .modal-content with a hardcoded
    white background (#fff) and the header/footer with light borders, so any
    modal (e.g. Shared/_ItemModal.cshtml's "Crear Artículo" popup on
    CreditInvoices/Create) renders as a white box in dark mode. Override the
    chrome here; form inputs inside are already handled by the .form-control
    rules above. !important is needed to beat Bootstrap's cascade order.
*/
:root[data-theme="dark"] .modal-content {
    background-color: var(--neutral-100) !important;
    color: var(--neutral-700) !important;
    border-color: var(--neutral-300) !important;
}

:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer {
    border-color: var(--neutral-300) !important;
}

:root[data-theme="dark"] .modal-title {
    color: var(--neutral-800) !important;
}

/* Backdrop: lift it slightly so a stacked modal reads against the dark canvas. */
:root[data-theme="dark"] .modal-backdrop {
    background-color: #000;
}

/* The close (×) button is near-black by default; make it visible on dark. */
:root[data-theme="dark"] .modal-header .close {
    color: var(--neutral-800);
    opacity: 0.7;
    text-shadow: none;
}

:root[data-theme="dark"] .modal-header .close:hover,
:root[data-theme="dark"] .modal-header .close:focus {
    color: var(--neutral-800);
    opacity: 1;
}

/*
    Enterprise plan tag (.adm__tag-enterprise, e.g. the plan label on
    Login/SelectCompany). It is the one tag that inverts the usual pattern:
    a dark background (var(--neutral-700)) with gold text
    (var(--tangerine-yellow-500)). In dark mode --neutral-700 flips to a light
    value, so the gold text ends up on a light pill and is unreadable.

    Pin the background to --enterprise-black (a dedicated dark surface defined
    above) so the gold-on-dark "enterprise" look is preserved and legible —
    matching how the tag reads in light mode. The gold token isn't flipped for
    dark mode, so the text colour needs no change.
*/
:root[data-theme="dark"] .adm__tag-enterprise {
    background-color: var(--enterprise-black) !important;
}

/*
    DevExpress PivotGrid (Office365 theme). Same constraints as the GridView
    overrides above: the Office365 stylesheet ships as an embedded resource so
    we override the generated class names here. Used by every page under
    Views/PivotTables/ (Sales, Purchases, AccountMovements, etc. — they all
    set ViewBag.DevExOnlyPivotGrid = true and settings.Theme = "Office365").
    !important is required to beat the very specific DevExpress selectors.
*/

/* Root control + canvas */
:root[data-theme="dark"] .dxpgControl_Office365,
:root[data-theme="dark"] .dxpg_Office365,
:root[data-theme="dark"] table.dxpgControl_Office365,
:root[data-theme="dark"] .dxpgControl_Office365 > tbody > tr > td {
    background-color: var(--neutral-100) !important;
    color: var(--neutral-700) !important;
    border-color: var(--neutral-300) !important;
}

/* Header band (row / column / filter / data field headers across the top and left) */
:root[data-theme="dark"] .dxpgHeader_Office365,
:root[data-theme="dark"] .dxpgFieldHeader_Office365,
:root[data-theme="dark"] .dxpgColumnHeader_Office365,
:root[data-theme="dark"] .dxpgRowHeader_Office365,
:root[data-theme="dark"] .dxpgFilterHeader_Office365,
:root[data-theme="dark"] .dxpgDataHeader_Office365,
:root[data-theme="dark"] .dxpgCustomTotalHeader_Office365,
:root[data-theme="dark"] td.dxpgHeader_Office365,
:root[data-theme="dark"] td.dxpgColumnHeader_Office365,
:root[data-theme="dark"] td.dxpgRowHeader_Office365 {
    background-color: var(--neutral-200) !important;
    color: var(--neutral-800) !important;
    border-color: var(--neutral-300) !important;
}

/* Field-area drop targets (the strips where users drop fields) */
:root[data-theme="dark"] .dxpgFieldArea_Office365,
:root[data-theme="dark"] .dxpgFilterArea_Office365,
:root[data-theme="dark"] .dxpgDataArea_Office365,
:root[data-theme="dark"] .dxpgColumnArea_Office365,
:root[data-theme="dark"] .dxpgRowArea_Office365 {
    background-color: var(--neutral-200) !important;
    color: var(--neutral-700) !important;
    border-color: var(--neutral-300) !important;
}

/* Data cells */
:root[data-theme="dark"] .dxpgCell_Office365,
:root[data-theme="dark"] td.dxpgCell_Office365 {
    background-color: var(--neutral-100) !important;
    color: var(--neutral-700) !important;
    border-color: var(--neutral-300) !important;
}

/* Total / grand-total cells — lift slightly so totals read as a band */
:root[data-theme="dark"] .dxpgTotalCell_Office365,
:root[data-theme="dark"] .dxpgRowTotalCell_Office365,
:root[data-theme="dark"] .dxpgColumnTotalCell_Office365,
:root[data-theme="dark"] .dxpgGrandTotalCell_Office365,
:root[data-theme="dark"] .dxpgCustomTotalCell_Office365 {
    background-color: var(--neutral-200) !important;
    color: var(--neutral-800) !important;
    border-color: var(--neutral-300) !important;
}

/* Header-cell hover / sort affordances */
:root[data-theme="dark"] .dxpgHeader_Office365:hover,
:root[data-theme="dark"] .dxpgColumnHeader_Office365:hover,
:root[data-theme="dark"] .dxpgRowHeader_Office365:hover {
    background-color: var(--neutral-300) !important;
    color: var(--neutral-800) !important;
}

/* Sort / filter icon images inside headers — invert so dark-on-light glyphs become light-on-dark */
:root[data-theme="dark"] .dxpgHeader_Office365 img,
:root[data-theme="dark"] .dxpgColumnHeader_Office365 img,
:root[data-theme="dark"] .dxpgRowHeader_Office365 img,
:root[data-theme="dark"] .dxpgFieldHeader_Office365 img {
    filter: invert(0.9);
}

/* Field-list popup (the floating dialog launched from "Show Field List") */
:root[data-theme="dark"] .dxpgPopupFieldList_Office365,
:root[data-theme="dark"] .dxpgFieldList_Office365,
:root[data-theme="dark"] .dxpgFieldListPanel_Office365 {
    background-color: var(--neutral-100) !important;
    color: var(--neutral-700) !important;
    border-color: var(--neutral-300) !important;
}

/* Filter popup (the dropdown that opens from a column / row header filter icon) */
:root[data-theme="dark"] .dxpgFilterPopup_Office365,
:root[data-theme="dark"] .dxpgFilterPopupContent_Office365,
:root[data-theme="dark"] .dxpgPrefilter_Office365 {
    background-color: var(--neutral-100) !important;
    color: var(--neutral-700) !important;
    border-color: var(--neutral-300) !important;
}

/* Loading panel */
:root[data-theme="dark"] .dxpgLoadingPanel_Office365,
:root[data-theme="dark"] .dxpgLoadingDiv_Office365 {
    background-color: var(--neutral-100) !important;
    color: var(--neutral-700) !important;
}

/*
    CodeMirror SQL editor. Used by CustomReports/Details (read-only SQL view),
    CustomReports/Edit -> CreateSQLReport (SQL textarea + sample list), and
    several other script/template editors (ClientScripts, ServerScripts,
    CustomActions, CustomPages, CustomKpis, HtmlTemplates, EMailTemplates,
    BenefitsDiscounts, ImportDocs xml view). The codemirror.min.css that
    ships with the lib hardcodes #fff / #000 / #f7f7f7 etc., so we override
    here under [data-theme="dark"]. Scope is the .CodeMirror container so
    the default ".cm-s-default" syntax theme is re-pointed to dark-friendly
    token colors without touching the upstream stylesheet.
*/
:root[data-theme="dark"] .CodeMirror {
    background: var(--neutral-100) !important;
    color: var(--neutral-700) !important;
}

:root[data-theme="dark"] .CodeMirror-gutters {
    background-color: var(--neutral-200) !important;
    border-right: 1px solid var(--neutral-300) !important;
}

:root[data-theme="dark"] .CodeMirror-linenumber {
    color: var(--neutral-500) !important;
}

:root[data-theme="dark"] .CodeMirror-guttermarker {
    color: var(--neutral-800) !important;
}

:root[data-theme="dark"] .CodeMirror-guttermarker-subtle {
    color: var(--neutral-500) !important;
}

:root[data-theme="dark"] .CodeMirror-cursor {
    border-left: 1px solid var(--neutral-800) !important;
}

:root[data-theme="dark"] .CodeMirror-scrollbar-filler,
:root[data-theme="dark"] .CodeMirror-gutter-filler {
    background-color: var(--neutral-200) !important;
}

/* Selection: outside-of-focus and focused */
:root[data-theme="dark"] .CodeMirror-selected {
    background: var(--neutral-300) !important;
}

:root[data-theme="dark"] .CodeMirror-focused .CodeMirror-selected {
    background: var(--paris-m-300) !important;
}

:root[data-theme="dark"] .CodeMirror-line::selection,
:root[data-theme="dark"] .CodeMirror-line > span::selection,
:root[data-theme="dark"] .CodeMirror-line > span > span::selection {
    background: var(--paris-m-300) !important;
}

:root[data-theme="dark"] .CodeMirror-line::-moz-selection,
:root[data-theme="dark"] .CodeMirror-line > span::-moz-selection,
:root[data-theme="dark"] .CodeMirror-line > span > span::-moz-selection {
    background: var(--paris-m-300) !important;
}

/* Active line (the row the cursor is on) */
:root[data-theme="dark"] .CodeMirror-activeline-background {
    background: var(--neutral-200) !important;
}

/* Matching/non-matching bracket highlight on dark */
:root[data-theme="dark"] div.CodeMirror span.CodeMirror-matchingbracket {
    color: #7CDE7C !important;
}

:root[data-theme="dark"] div.CodeMirror span.CodeMirror-nonmatchingbracket {
    color: #FF7B7B !important;
}

/*
    Default-theme (.cm-s-default) syntax colours. The upstream defaults
    (#708 keywords, #a11 strings, #00f defs, etc.) were tuned for a white
    background and become hard to read against the dark canvas above.
    Re-point them to a higher-contrast palette. Keep the hue families so
    SQL keywords still feel "keyword-y," strings still feel "string-y," etc.
*/
:root[data-theme="dark"] .cm-s-default .cm-keyword { color: #C792EA !important; }
:root[data-theme="dark"] .cm-s-default .cm-atom { color: #F78C6C !important; }
:root[data-theme="dark"] .cm-s-default .cm-number { color: #F78C6C !important; }
:root[data-theme="dark"] .cm-s-default .cm-def { color: #82AAFF !important; }
:root[data-theme="dark"] .cm-s-default .cm-variable-2 { color: #82AAFF !important; }
:root[data-theme="dark"] .cm-s-default .cm-type,
:root[data-theme="dark"] .cm-s-default .cm-variable-3 { color: #80CBC4 !important; }
:root[data-theme="dark"] .cm-s-default .cm-comment { color: #8A8DA3 !important; font-style: italic; }
:root[data-theme="dark"] .cm-s-default .cm-string { color: #C3E88D !important; }
:root[data-theme="dark"] .cm-s-default .cm-string-2 { color: #C3E88D !important; }
:root[data-theme="dark"] .cm-s-default .cm-meta { color: #B7B9CC !important; }
:root[data-theme="dark"] .cm-s-default .cm-qualifier { color: #B7B9CC !important; }
:root[data-theme="dark"] .cm-s-default .cm-builtin { color: #82AAFF !important; }
:root[data-theme="dark"] .cm-s-default .cm-bracket { color: #B7B9CC !important; }
:root[data-theme="dark"] .cm-s-default .cm-tag { color: #F07178 !important; }
:root[data-theme="dark"] .cm-s-default .cm-attribute { color: #FFCB6B !important; }
:root[data-theme="dark"] .cm-s-default .cm-header { color: #82AAFF !important; }
:root[data-theme="dark"] .cm-s-default .cm-quote { color: #C3E88D !important; }
:root[data-theme="dark"] .cm-s-default .cm-hr { color: #8A8DA3 !important; }
:root[data-theme="dark"] .cm-s-default .cm-link { color: #82AAFF !important; }
:root[data-theme="dark"] .cm-s-default .cm-error { color: #FF5370 !important; }

/*
    Tom Select. The default theme (libraries/tom-select/css/tom-select.default.min.css)
    ships with hardcoded #fff backgrounds, #303030 text and #d0d0d0 / #b8b8b8 borders,
    and the single control paints a white linear-gradient on top — so the control and
    its dropdown render as bright white boxes in dark mode (e.g. the candidate-assign
    control on JobOpenings/Details). Re-point those literals to the design-system
    neutrals here. The lib loads in @@section Styles (after DarkMode.css), so !important
    is required; `background` (not just background-color) is needed to kill the gradient.
*/

/* Control box (single + multi) */
:root[data-theme="dark"] .ts-control,
:root[data-theme="dark"] .ts-wrapper.single .ts-control,
:root[data-theme="dark"] .ts-wrapper.single.input-active .ts-control,
:root[data-theme="dark"] .full .ts-control {
    background: var(--neutral-100) !important;
    background-image: none !important;
    color: var(--neutral-700) !important;
    border-color: var(--neutral-400) !important;
    box-shadow: none !important;
}

/* Typed input text + dropdown body text */
:root[data-theme="dark"] .ts-control,
:root[data-theme="dark"] .ts-control input,
:root[data-theme="dark"] .ts-dropdown {
    color: var(--neutral-700) !important;
}

:root[data-theme="dark"] .ts-control input::placeholder {
    color: var(--neutral-500) !important;
}

/* Focused control */
:root[data-theme="dark"] .focus .ts-control {
    border-color: var(--summer-sky-500) !important;
}

/* Disabled control */
:root[data-theme="dark"] .disabled .ts-control {
    background-color: var(--neutral-200) !important;
}

/* Dropdown panel */
:root[data-theme="dark"] .ts-dropdown,
:root[data-theme="dark"] .ts-dropdown.single {
    background: var(--neutral-100) !important;
    color: var(--neutral-700) !important;
    border-color: var(--neutral-400) !important;
    box-shadow: 0 0.2rem 0.3rem 0 rgba(0, 0, 0, 0.6) !important;
}

/* Option-group headers + separators */
:root[data-theme="dark"] .ts-dropdown .optgroup-header {
    background: var(--neutral-200) !important;
    color: var(--neutral-800) !important;
}

:root[data-theme="dark"] .ts-dropdown .optgroup {
    border-top-color: var(--neutral-300) !important;
}

/* Active / hovered option */
:root[data-theme="dark"] .ts-dropdown .active,
:root[data-theme="dark"] .ts-dropdown .active.create {
    background-color: var(--neutral-300) !important;
    color: var(--neutral-800) !important;
}

/* "Create new" affordance */
:root[data-theme="dark"] .ts-dropdown .create {
    color: var(--neutral-500) !important;
}

/* Search-match highlight inside options */
:root[data-theme="dark"] .ts-dropdown [data-selectable] .highlight {
    background: rgba(69, 216, 238, 0.25) !important;
}

/* Single-control caret triangle (drawn with border-color tricks; grey by default) */
:root[data-theme="dark"] .ts-wrapper.single .ts-control:after {
    border-top-color: var(--neutral-600) !important;
}

:root[data-theme="dark"] .ts-wrapper.single.dropdown-active .ts-control:after {
    border-bottom-color: var(--neutral-600) !important;
}

/*
    Navbar dark-mode toggle button: swap which icon is visible.
    The button inlines both <svg>s; we hide the inactive one based on the theme.
*/
.adm-navbar__dark-mode-btn .adm-navbar__dark-mode-icon--sun {
    display: none;
}

.adm-navbar__dark-mode-btn .adm-navbar__dark-mode-icon--moon {
    display: inline-flex;
}

:root[data-theme="dark"] .adm-navbar__dark-mode-btn .adm-navbar__dark-mode-icon--sun {
    display: inline-flex;
}

:root[data-theme="dark"] .adm-navbar__dark-mode-btn .adm-navbar__dark-mode-icon--moon {
    display: none;
}