@charset "utf-8";

:root {
    color-scheme: light;

    /* Typography */
    --fontFamilyBase: 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --fontSizeBase100: 10px;
    --fontSizeBase200: 12px;
    --fontSizeBase300: 14px;
    --fontSizeBase400: 16px;
    --fontSizeBase500: 20px;
    --fontSizeBase600: 24px;
    --lineHeightBase100: 14px;
    --lineHeightBase200: 16px;
    --lineHeightBase300: 20px;
    --lineHeightBase400: 22px;
    --lineHeightBase500: 28px;
    --lineHeightBase600: 32px;
    --fontWeightRegular: 400;
    --fontWeightSemibold: 600;
    --fontWeightBold: 700;

    /* Spacing */
    --spacingHorizontalXS: 4px;
    --spacingHorizontalS: 8px;
    --spacingHorizontalM: 12px;
    --spacingHorizontalL: 16px;
    --spacingHorizontalXL: 20px;
    --spacingHorizontalXXL: 24px;
    --spacingVerticalXXS: 2px;
    --spacingVerticalXS: 4px;
    --spacingVerticalS: 8px;
    --spacingVerticalM: 12px;
    --spacingVerticalL: 16px;
    --spacingVerticalXL: 20px;
    --spacingVerticalXXL: 24px;
    --spacingVerticalXXXL: 32px;

    /* Radius */
    --borderRadiusNone: 0;
    --borderRadiusSmall: 4px;
    --borderRadiusMedium: 6px;
    --borderRadiusLarge: 8px;
    --borderRadiusXLarge: 12px;
    --borderRadiusCircular: 9999px;
    --r-sm: 4px;
    --r-md: 4px;
    --r-lg: 4px;
    --r-xl: 8px;
    --r-circle: 50%;

    /* Stroke / motion */
    --strokeWidthThin: 1px;
    --strokeWidthThick: 2px;
    --strokeWidthThicker: 3px;
    --durationFast: 120ms;
    --durationNormal: 220ms;
    --curveEasyEase: cubic-bezier(.33, 0, .67, 1);

    /* Layout */
    --sidebar-w: 240px;
    --sidebar-collapsed: 48px;
    --topbar-h: 48px;

    /* Brand - default web blue */
    --brand-80: #0078d4;
    --brand-90: #106ebe;
    --brand-100: #005a9e;
    --brand-bg-tint: #eff6fc;

    /* Light neutrals — deliberate elevation steps (Fluent "layering").
       Canvas (nb2) is a clear light-gray floor; raised surfaces — shell,
       cards, fields — are bright white (nb1) so they lift off the page and
       the layout stays easy to scan without relying on borders. */
    --nb1: #ffffff;
    --nb2: #f0f2f5;
    --nb3: #e4e7ec;
    --nb1-hover: #f5f6f8;
    --nb1-pressed: #ebedf0;
    --nf1: #242424;
    --nf2: #424242;
    --nf3: #616161;
    --nf-disabled: #bdbdbd;
    --nf-on-brand: #ffffff;
    --ns1: #c8cdd4;
    --ns2: #e1e4e8;
    --ns3: #eceff3;
    --danger: #c50f1f;
    --danger-hover: #a80000;
    --danger-bg: #fde7e9;
    --danger-fg: #ffffff;

    /* Semantic — success */
    --success: #107c10;
    --success-hover: #0e6e0e;
    --success-bg: #dff6dd;
    --success-fg: #ffffff;

    /* Semantic — warning */
    --warning: #b45309;
    --warning-hover: #92400e;
    --warning-bg: #fef3c7;
    --warning-fg: #ffffff;

    /* Semantic — info */
    --info: #0078d4;
    --info-hover: #106ebe;
    --info-bg: #dbeafe;
    --info-fg: #ffffff;

    /* Overlays / scrims — for modals, tooltips, dropdown shadows */
    --scrim-soft: rgba(0,0,0,0.04);
    --scrim-faint: rgba(0,0,0,0.08);
    --scrim-light: rgba(0,0,0,0.12);
    --scrim-medium: rgba(0,0,0,0.18);
    --scrim-strong: rgba(0,0,0,0.28);
    --scrim-heavy: rgba(0,0,0,0.45);
    --scrim-modal: rgba(0,0,0,0.58);
    --tint-soft: rgba(255,255,255,0.15);
    --tint-medium: rgba(255,255,255,0.28);
    --tint-strong: rgba(255,255,255,0.75);
    --tint-heavy: rgba(255,255,255,0.95);

    /* Shadows */
    --shadow2: 0 1px 2px rgba(0,0,0,0.08);
    --shadow4: 0 2px 4px rgba(0,0,0,0.12), 0 0 2px rgba(0,0,0,0.08);
    --shadow8: 0 4px 8px rgba(0,0,0,0.14), 0 0 2px rgba(0,0,0,0.10);
    --shadow16: 0 8px 16px rgba(0,0,0,0.16), 0 0 2px rgba(0,0,0,0.12);

    /* Fluent-style aliases used by Personalize.aspx */
    --colorBrandBackground: var(--brand-80);
    --colorBrandBackgroundHover: var(--brand-90);
    --colorBrandBackgroundPressed: var(--brand-100);
    --colorBrandBackground2: var(--brand-bg-tint);
    --colorBrandForeground1: var(--brand-80);
    --colorBrandStroke1: var(--brand-80);
    --colorBrandShadowAmbient: rgba(0, 120, 212, 0.22);
    --colorStrokeFocus2: #79b8f3;
    --colorStatusDangerBackground3: #d13438;
    --colorStatusSuccessBackground3: #107c10;
    --colorStatusWarningBackground3: #bc4b09;

    --colorNeutralBackground1: var(--nb1);
    --colorNeutralBackground2: var(--nb2);
    --colorNeutralBackground3: var(--nb3);
    --colorNeutralBackgroundAlpha2: rgba(255,255,255,0.88);
    --colorNeutralForeground1: var(--nf1);
    --colorNeutralForeground2: var(--nf2);
    --colorNeutralForeground3: var(--nf3);
    --colorNeutralForegroundDisabled: var(--nf-disabled);
    --colorNeutralForegroundOnBrand: var(--nf-on-brand);
    --colorNeutralStroke1: var(--ns1);
    --colorNeutralStroke2: var(--ns2);
    --colorNeutralStroke3: var(--ns3);
    --colorNeutralCardBackground: var(--nb1);
    --colorNeutralCardBackgroundHover: var(--nb2);
    --colorNeutralShadowAmbientLighter: rgba(0,0,0,0.10);

    /* Shared component surfaces */
    --surface-canvas: var(--nb2);
    --surface-card: var(--nb1);
    --surface-card-subtle: color-mix(in srgb, var(--nb1) 55%, var(--nb2) 45%);
    --surface-card-muted: var(--nb3);
    --surface-toolbar: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%);
    --surface-overlay: rgba(0, 0, 0, 0.36);
    /* Card elevation — lean on shadow + canvas contrast, not heavy borders,
       so cards read as raised panels instead of outlines drawn on paper. */
    --card-shadow: var(--shadow8);
    --card-border: color-mix(in srgb, var(--ns2) 55%, transparent);

    /* Shared field system — fields are a faint inset on white cards (clearly
       distinct from the card surface) with a firm, legible border. */
    --field-bg: color-mix(in srgb, #ffffff 62%, var(--nb2) 38%);
    --field-bg-hover: color-mix(in srgb, #ffffff 50%, var(--nb2) 50%);
    --field-bg-disabled: var(--nb2);
    --field-bg-readonly: var(--nb2);
    --field-border: var(--ns1);
    --field-border-hover: var(--nf3);
    --field-border-focus: var(--brand-80);
    --field-placeholder: var(--nf3);
    --field-focus-ring: transparent;
    --field-inset-highlight: transparent;

    /* Shared button system */
    --btn-primary-bg: var(--brand-80);
    --btn-primary-bg-hover: var(--brand-90);
    --btn-primary-bg-pressed: var(--brand-100);
    --btn-primary-border: var(--brand-80);
    --btn-primary-fg: var(--nf-on-brand);

    --btn-secondary-bg: var(--nb1);
    --btn-secondary-bg-hover: var(--nb1-hover);
    --btn-secondary-bg-pressed: var(--nb1-pressed);
    --btn-secondary-border: var(--ns1);
    --btn-secondary-fg: var(--nf1);

    --btn-danger-bg: #fff1f2;
    --btn-danger-bg-hover: #ffe0e3;
    --btn-danger-bg-pressed: #ffd0d5;
    --btn-danger-border: #f2bcc3;
    --btn-danger-fg: var(--danger);

    /* Login-specific aliases */
    --color-bg1: var(--colorNeutralBackground1);
    --color-bg2: var(--colorNeutralBackground2);
    --color-bg3: var(--colorNeutralBackground3);
    --color-fg1: var(--colorNeutralForeground1);
    --color-fg2: var(--colorNeutralForeground2);
    --color-fg3: var(--colorNeutralForeground3);
    --color-stroke1: var(--colorNeutralStroke1);
    --color-stroke2: var(--colorNeutralStroke2);
    --login-panel-right-bg: #dce9f8;
    --right-dot: rgba(0,80,180,0.06);
    --right-glow: rgba(0,100,220,0.12);
    --right-glow2: rgba(0,60,160,0.07);
    --right-text: #1a3a5c;
    --right-sub: rgba(0,40,100,0.45);
    --right-line: rgba(0,60,180,0.10);
    --right-sep: rgba(0,60,180,0.08);
    --logo-filter: grayscale(1) opacity(0.4);
    --toggle-bg: var(--color-bg2);
}

html[data-theme-mode="dark"] {
    color-scheme: dark;
    /* Dark elevation: page (nb2) is darkest, surfaces (nb1) sit above it,
       nb3 is the hover/elevated layer. Each layer carries a stronger
       accent tint so depth reads clearly. */
    --nb2: #141414;
    --nb1: #292929;
    --nb3: #333333;
    --nb1-hover: #3d3d3d;
    --nb1-pressed: #474747;
    --nf1: #ffffff;
    --nf2: #d6d6d6;
    --nf3: #adadad;
    --nf-disabled: #6e6e6e;
    --ns1: #666666;
    --ns2: #4c4c4c;
    --ns3: #3d3d3d;
    --danger-hover: #e0626a;
    --danger-bg: rgba(209,52,56,0.16);
    --danger-fg: #ffffff;
    --success: #4ade80;
    --success-hover: #22c55e;
    --success-bg: rgba(34,197,94,0.16);
    --success-fg: #062a13;
    --warning: #f59e0b;
    --warning-hover: #d97706;
    --warning-bg: rgba(245,158,11,0.18);
    --warning-fg: #2a1c00;
    --info: #60a5fa;
    --info-hover: #3b82f6;
    --info-bg: rgba(96,165,250,0.18);
    --info-fg: #03204a;
    --scrim-soft: rgba(0,0,0,0.18);
    --scrim-faint: rgba(0,0,0,0.24);
    --scrim-light: rgba(0,0,0,0.32);
    --scrim-medium: rgba(0,0,0,0.42);
    --scrim-strong: rgba(0,0,0,0.55);
    --scrim-heavy: rgba(0,0,0,0.68);
    --scrim-modal: rgba(0,0,0,0.78);
    --tint-soft: rgba(255,255,255,0.06);
    --tint-medium: rgba(255,255,255,0.12);
    --tint-strong: rgba(255,255,255,0.20);
    --tint-heavy: rgba(255,255,255,0.32);
    --colorNeutralBackgroundAlpha2: rgba(24,24,24,0.86);
    --colorNeutralShadowAmbientLighter: rgba(0,0,0,0.18);
    --login-panel-right-bg: #0f0f0f;
    --right-dot: rgba(255,255,255,0.035);
    --right-glow: rgba(0,100,210,0.22);
    --right-glow2: rgba(0,50,140,0.14);
    --right-text: rgba(255,255,255,0.88);
    --right-sub: rgba(255,255,255,0.38);
    --right-line: rgba(255,255,255,0.07);
    --right-sep: rgba(255,255,255,0.06);
    --logo-filter: invert(1) opacity(0.3);
    --toggle-bg: var(--color-bg3);
    --surface-toolbar: linear-gradient(180deg, rgba(29,29,29,0.96) 0%, rgba(23,23,23,0.96) 100%);
    --surface-overlay: rgba(0, 0, 0, 0.56);
    --surface-canvas: var(--nb2);
    --surface-card-subtle: color-mix(in srgb, var(--nb1) 60%, var(--nb3) 40%);
    --card-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 10px 24px rgba(0,0,0,0.4);
    --card-border: var(--ns2);
    --field-bg: #1f1f1f;
    --field-bg-hover: #242424;
    --field-bg-disabled: var(--nb2);
    --field-bg-readonly: var(--nb2);
    --field-border: var(--ns1);
    --field-border-hover: var(--nf3);
    --field-border-focus: var(--brand-80);
    --field-placeholder: var(--nf3);
    --field-focus-ring: transparent;
    --field-inset-highlight: transparent;
    --btn-danger-bg: rgba(209,52,56,0.16);
    --btn-danger-bg-hover: rgba(209,52,56,0.22);
    --btn-danger-bg-pressed: rgba(209,52,56,0.28);
    --btn-danger-border: rgba(209,52,56,0.34);
    --btn-danger-fg: #ffb3b8;
}

html[data-high-contrast] {
    color-scheme: dark;
    --nb1: #000000;
    --nb2: #000000;
    --nb3: #0c0c0c;
    --nb1-hover: #111111;
    --nb1-pressed: #151515;
    --nf1: #ffffff;
    --nf2: #ffffff;
    --nf3: #f5f5f5;
    --nf-disabled: #9f9f9f;
    --ns1: #ffffff;
    --ns2: #ffffff;
    --ns3: #d0d0d0;
    --danger: #ff5f5f;
    --danger-hover: #ff8a8a;
    --danger-bg: rgba(255,95,95,0.18);
    --danger-fg: #000000;
    --success: #5fff5f;
    --success-hover: #8aff8a;
    --success-bg: rgba(95,255,95,0.18);
    --success-fg: #000000;
    --warning: #ffd700;
    --warning-hover: #ffea66;
    --warning-bg: rgba(255,215,0,0.18);
    --warning-fg: #000000;
    --info: #5ec8ff;
    --info-hover: #87dbff;
    --info-bg: rgba(94,200,255,0.18);
    --info-fg: #000000;
    --scrim-soft: rgba(0,0,0,0.5);
    --scrim-faint: rgba(0,0,0,0.6);
    --scrim-light: rgba(0,0,0,0.7);
    --scrim-medium: rgba(0,0,0,0.8);
    --scrim-strong: rgba(0,0,0,0.88);
    --scrim-heavy: rgba(0,0,0,0.94);
    --scrim-modal: rgba(0,0,0,0.96);
    --tint-soft: rgba(255,255,255,0.18);
    --tint-medium: rgba(255,255,255,0.32);
    --tint-strong: rgba(255,255,255,0.5);
    --tint-heavy: rgba(255,255,255,0.7);
    --colorNeutralBackgroundAlpha2: #000000;
    --colorStrokeFocus2: #ffff00;
    --login-panel-right-bg: #000000;
    --right-dot: rgba(255,255,255,0.09);
    --right-glow: rgba(26,235,255,0.12);
    --right-glow2: rgba(255,255,255,0.06);
    --right-text: #ffffff;
    --right-sub: rgba(255,255,255,0.78);
    --right-line: rgba(255,255,255,0.22);
    --right-sep: rgba(255,255,255,0.18);
    --logo-filter: none;
    --surface-card: #000000;
    --surface-card-subtle: #0c0c0c;
    --surface-card-muted: #111111;
    --surface-toolbar: #000000;
    --surface-overlay: rgba(0, 0, 0, 0.72);
    --field-bg: #000000;
    --field-bg-hover: #000000;
    --field-bg-disabled: #111111;
    --field-bg-readonly: #111111;
    --field-border: #ffffff;
    --field-border-hover: #ffff00;
    --field-border-focus: #ffff00;
    --field-placeholder: #f5f5f5;
    --field-focus-ring: rgba(255,255,0,0.25);
    --field-inset-highlight: rgba(255,255,255,0);
    --btn-secondary-bg: #000000;
    --btn-secondary-bg-hover: #111111;
    --btn-secondary-bg-pressed: #1b1b1b;
    --btn-secondary-border: #ffffff;
    --btn-secondary-fg: #ffffff;
    --btn-danger-bg: #000000;
    --btn-danger-bg-hover: #111111;
    --btn-danger-bg-pressed: #1b1b1b;
    --btn-danger-border: #ff5f5f;
    --btn-danger-fg: #ff5f5f;
}

html[data-accent="blue"] {
    --brand-80: #0078d4;
    --brand-90: #106ebe;
    --brand-100: #005a9e;
    --brand-bg-tint: #eff6fc;
}

html[data-accent="lightGreen"] {
    --brand-80: #0b6700;
    --brand-90: #095700;
    --brand-100: #064500;
    --brand-bg-tint: #e9f5e7;
}

html[data-accent="cranberry"] {
    --brand-80: #6e0925;
    --brand-90: #5f081f;
    --brand-100: #480516;
    --brand-bg-tint: #f9eaee;
}

html[data-accent="navy"] {
    --brand-80: #00396e;
    --brand-90: #002f5b;
    --brand-100: #002345;
    --brand-bg-tint: #e8eef5;
}

html[data-accent="lavender"] {
    --brand-80: #4747a1;
    --brand-90: #3c3c8a;
    --brand-100: #2f2f6c;
    --brand-bg-tint: #efeffb;
}

html[data-accent="steel"] {
    --brand-80: #005b8e;
    --brand-90: #004d79;
    --brand-100: #003b5d;
    --brand-bg-tint: #e8f2f8;
}

html[data-accent="royalBlue"] {
    --brand-80: #3c50b1;
    --brand-90: #33459a;
    --brand-100: #273579;
    --brand-bg-tint: #eef1fb;
}

html[data-accent="darkRed"] {
    --brand-80: #8b1118;
    --brand-90: #761015;
    --brand-100: #590b0f;
    --brand-bg-tint: #faebec;
}

html[data-accent="darkOrange"] {
    --brand-80: #a24c00;
    --brand-90: #8a4100;
    --brand-100: #663000;
    --brand-bg-tint: #fbefe5;
}

html[data-accent="moss"] {
    --brand-80: #567c00;
    --brand-90: #496900;
    --brand-100: #374f00;
    --brand-bg-tint: #f1f6e5;
}

html[data-accent="purple"] {
    --brand-80: #5c2e91;
    --brand-90: #4e277b;
    --brand-100: #3b1d5d;
    --brand-bg-tint: #f3edf9;
}

html[data-accent="magenta"] {
    --brand-80: #8f0f75;
    --brand-90: #7b0d64;
    --brand-100: #5c094b;
    --brand-bg-tint: #faebf7;
}

html[data-accent="plum"] {
    --brand-80: #6b255c;
    --brand-90: #5c1f4f;
    --brand-100: #45173c;
    --brand-bg-tint: #f5edf4;
}

html[data-accent="beige"] {
    --brand-80: #8d5f2f;
    --brand-90: #785126;
    --brand-100: #5d3f1d;
    --brand-bg-tint: #f8f1ea;
}

html[data-accent="marigold"] {
    --brand-80: #d17b00;
    --brand-90: #b86d00;
    --brand-100: #8f5500;
    --brand-bg-tint: #fff3df;
}

html[data-accent="forest"] {
    --brand-80: #0b6a4d;
    --brand-90: #095a42;
    --brand-100: #074331;
    --brand-bg-tint: #e7f4ef;
}

html[data-accent="gold"] {
    --brand-80: #835b00;
    --brand-90: #704d00;
    --brand-100: #543900;
    --brand-bg-tint: #fbf2df;
}

html[data-accent="platinum"] {
    --brand-80: #434e5d;
    --brand-90: #39424f;
    --brand-100: #2b323c;
    --brand-bg-tint: #eef1f4;
}

html[data-accent="red"] {
    --brand-80: #b10e1c;
    --brand-90: #990c18;
    --brand-100: #730911;
    --brand-bg-tint: #fdebec;
}

html[data-accent="pink"] {
    --brand-80: #bf0077;
    --brand-90: #a50067;
    --brand-100: #7d004e;
    --brand-bg-tint: #fde7f4;
}

html[data-accent="neutral"] {
    --brand-80: #444241;
    --brand-90: #3a3837;
    --brand-100: #2c2a29;
    --brand-bg-tint: #f1efee;
}

/* ═══════════════════════════════════════════════════════════════════
   ACCENT ROLE TOKENS
   The accent appears ONLY at identity moments (brand, selection, primary
   action, focus) on a neutral professional stage. These sit AFTER the
   per-accent palette so the dark/HC derivations below can win over it.
   ═══════════════════════════════════════════════════════════════════ */
:root {
    --brand-fg: var(--brand-80);                                    /* accent as text/icon */
    --sel-bg: var(--brand-bg-tint);                                 /* the ONE selection tint */
    --sel-fg: var(--brand-100);
    --hover-bg: rgba(0, 0, 0, 0.045);                               /* neutral hover wash */
    --bg-canvas: var(--nb2);
    --bg-card: var(--nb1);
    --bg-well: var(--nb3);
    --bg-inset: var(--field-bg);
    --bg-hover: var(--nb1-hover);
    --bg-elevated: var(--nb1);
    --fg-1: var(--nf1);
    --fg-2: var(--nf2);
    --fg-3: var(--nf3);
    --fg-4: var(--nf-disabled);
    --stroke-1: var(--ns1);
    --stroke-2: var(--ns2);
    --stroke-3: var(--ns3);
}

html[data-theme-mode="dark"] {
    /* dark accents (navy, plum...) are unreadable as text on dark
       surfaces — lift them; tints computed from the accent, never fixed */
    --brand-fg: color-mix(in srgb, var(--brand-80) 55%, #ffffff);
    --brand-bg-tint: color-mix(in srgb, var(--brand-80) 22%, #292929);
    --sel-bg: color-mix(in srgb, var(--brand-80) 28%, #292929);
    --sel-fg: color-mix(in srgb, var(--brand-80) 55%, #ffffff);
    --hover-bg: rgba(255, 255, 255, 0.07);
}

html[data-high-contrast] {
    /* HC is an accessibility mode: one fixed maximally-legible accent
       regardless of the chosen accent; solid inverse selection; no tints */
    --brand-80: #4cc2ff;
    --brand-90: #6fd0ff;
    --brand-100: #9edcff;
    --brand-fg: #4cc2ff;
    --brand-bg-tint: #002b40;
    --sel-bg: #4cc2ff;
    --sel-fg: #000000;
    --hover-bg: #1a1a1a;
    --nf-on-brand: #000000;
    --shadow2: none; --shadow4: none; --shadow8: none; --shadow16: none;
    --card-shadow: none;
    --card-border: #ffffff;
    --btn-primary-bg: #4cc2ff;
    --btn-primary-bg-hover: #6fd0ff;
    --btn-primary-bg-pressed: #9edcff;
    --btn-primary-border: #ffffff;
    --btn-primary-fg: #000000;
}

html,
body {
    font-family: var(--fontFamilyBase);
    background: var(--nb2);
    color: var(--nf1);
}