/* ============================================================
   Kendo swatch — Microsoft Fluent 2 "Teams Dark"
   ------------------------------------------------------------
   A drop-in :root variable overlay that retunes the Kendo /
   Telerik UI for Blazor Default theme to Microsoft's Fluent 2
   Teams dark palette. Layer it on top of
   `kendo-theme-default/all.css` — no component-structural CSS
   is emitted, so the swatch is safe to enable/disable at
   runtime (e.g. by toggling <link disabled>) without reflow.

   Follows Telerik's own swatch pattern (compare with
   `kendo-theme-default/swatches/default-ocean-blue.css`).

   Source palette: Fluent 2 Web — Dark (Teams variant)
   https://fluent2.microsoft.design/color
   https://react.fluentui.dev/?path=/docs/theme-colors--docs

   Fluent token → Kendo token mapping is semantic:
     colorNeutralBackground1        → --kendo-color-surface       (#292929)
     colorNeutralBackground2        → --kendo-color-surface-alt   (#1F1F1F)
     colorNeutralBackground3        → --kendo-color-app-surface   (#141414)
     colorNeutralBackgroundCanvas   → body background             (#1B1A19)
     colorBrandBackground           → --kendo-color-primary       (#5B5FC7)
     colorBrandForeground1          → --kendo-color-primary-hover (#7F85F5)
   ============================================================ */

:root {
    color-scheme: dark;

    /* ── Surfaces (Fluent 2 neutral ramp, dark) ───────────────── */
    /* Canvas — the deepest surface; page background.            */
    --kendo-color-app-surface:    #1b1a19;
    --kendo-color-on-app-surface: #ffffff;
    /* Secondary neutral — muted text, dividers, placeholders.   */
    --kendo-color-subtle:         #adadad;
    /* Surface — raised components (cards, drawer, app bar).     */
    --kendo-color-surface:        #292929;
    /* Surface alt — hover rows, tabs, secondary panels.         */
    --kendo-color-surface-alt:    #1f1f1f;
    --kendo-color-on-surface:     #ffffff;
    --kendo-color-on-surface-alt: #ffffff;

    /* ── Borders ──────────────────────────────────────────────── */
    /* colorNeutralStroke1 / stroke2 (dark).                      */
    --kendo-color-border:     rgba(255, 255, 255, 0.09);
    --kendo-color-border-alt: rgba(255, 255, 255, 0.20);

    /* ── Base (inputs, secondary buttons, neutral panels) ────── */
    --kendo-color-base:               #3d3d3d;
    --kendo-color-base-hover:         #4a4a4a;
    --kendo-color-base-active:        #575757;
    --kendo-color-base-subtle:        #292929;
    --kendo-color-base-subtle-hover:  #333333;
    --kendo-color-base-subtle-active: #3d3d3d;
    --kendo-color-base-emphasis:      #707070;
    --kendo-color-base-on-subtle:     #ffffff;
    --kendo-color-on-base:            #ffffff;
    --kendo-color-base-on-surface:    #ffffff;

    /* ── Primary (Fluent 2 brand ramp — Teams) ────────────────── */
    /* Dark theme uses a lighter mid-tone so the brand reads on   */
    /* the near-black canvas; on-primary text stays white.        */
    --kendo-color-primary:               #5b5fc7;
    --kendo-color-primary-hover:         #7f85f5;
    --kendo-color-primary-active:        #9299f7;
    --kendo-color-primary-subtle:        #242433;
    --kendo-color-primary-subtle-hover:  #2c2c40;
    --kendo-color-primary-subtle-active: #35354d;
    --kendo-color-primary-emphasis:      #a6acf9;
    --kendo-color-primary-on-subtle:     #dcddfb;
    --kendo-color-on-primary:            #ffffff;
    --kendo-color-primary-on-surface:    #a6acf9;

    /* ── Secondary (neutral pill buttons) ─────────────────────── */
    --kendo-color-secondary:               #5a5a5a;
    --kendo-color-secondary-hover:         #6a6a6a;
    --kendo-color-secondary-active:        #787878;
    --kendo-color-secondary-subtle:        #2a2a2a;
    --kendo-color-secondary-subtle-hover:  #323232;
    --kendo-color-secondary-subtle-active: #3a3a3a;
    --kendo-color-secondary-emphasis:      #9a9a9a;
    --kendo-color-secondary-on-subtle:     #e5e5e5;
    --kendo-color-on-secondary:            #181818;
    --kendo-color-secondary-on-surface:    #c7c7c7;

    /* ── Info (Fluent communication blue, dark) ───────────────── */
    --kendo-color-info:               #62abf5;
    --kendo-color-info-hover:         #479ef5;
    --kendo-color-info-active:        #2886de;
    --kendo-color-info-subtle:        #0c1c2e;
    --kendo-color-info-subtle-hover:  #0f2339;
    --kendo-color-info-subtle-active: #132a44;
    --kendo-color-info-emphasis:      #96c6fa;
    --kendo-color-info-on-subtle:     #d0e4ff;
    --kendo-color-on-info:            #ffffff;
    --kendo-color-info-on-surface:    #96c6fa;

    /* ── Success (Fluent green, dark) ─────────────────────────── */
    --kendo-color-success:               #54b054;
    --kendo-color-success-hover:         #4f9b50;
    --kendo-color-success-active:        #498649;
    --kendo-color-success-subtle:        #0f2611;
    --kendo-color-success-subtle-hover:  #132d15;
    --kendo-color-success-subtle-active: #16351a;
    --kendo-color-success-emphasis:      #7fc77f;
    --kendo-color-success-on-subtle:     #c0e5c0;
    --kendo-color-on-success:            #ffffff;
    --kendo-color-success-on-surface:    #7fc77f;

    /* ── Warning (Fluent yellow/amber, dark) ──────────────────── */
    --kendo-color-warning:               #ffb900;
    --kendo-color-warning-hover:         #ffc733;
    --kendo-color-warning-active:        #ffd666;
    --kendo-color-warning-subtle:        #2d2000;
    --kendo-color-warning-subtle-hover:  #362700;
    --kendo-color-warning-subtle-active: #3f2e00;
    --kendo-color-warning-emphasis:      #ffdb82;
    --kendo-color-warning-on-subtle:     #ffeab4;
    --kendo-color-on-warning:            #3d2e00;
    --kendo-color-warning-on-surface:    #ffdb82;

    /* ── Error (Fluent red, dark) ─────────────────────────────── */
    --kendo-color-error:               #e37d80;
    --kendo-color-error-hover:         #e8898c;
    --kendo-color-error-active:        #f1adaf;
    --kendo-color-error-subtle:        #3b1519;
    --kendo-color-error-subtle-hover:  #471a1f;
    --kendo-color-error-subtle-active: #531f25;
    --kendo-color-error-emphasis:      #eaa0a2;
    --kendo-color-error-on-subtle:     #f6cbcd;
    --kendo-color-on-error:            #ffffff;
    --kendo-color-error-on-surface:    #eaa0a2;

    /* ── Elevations (Fluent dark shadow ramp) ─────────────────── */
    --kendo-elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.8);
    --kendo-elevation-2: 0 2px 4px 0 rgba(0, 0, 0, 0.8);
    --kendo-elevation-3: 0 4px 8px 0 rgba(0, 0, 0, 0.8);
    --kendo-elevation-4: 0 8px 16px 0 rgba(0, 0, 0, 0.8);

    /* ── AppBar (Telerik-specific — not derived from surface) ── */
    --kendo-appbar-bg:     #292929;
    --kendo-appbar-text:   #ffffff;
    --kendo-appbar-border: rgba(255, 255, 255, 0.09);
}

/* Body takes the Teams canvas so non-Telerik content matches. */
body {
    background-color: #1b1a19;
    color: #ffffff;
}

/* The Default Telerik theme ships a light-specific AppBar rule that wins on
   cascade order. Force the Teams surface with a targeted !important so the
   AppBar paints correctly whether the light swatch is present or not. */
.k-appbar {
    background-color: #292929 !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
    /* Kendo Default adds elevation-4 drop shadow. Fluent 2 / Teams uses a flat
       divider instead, so we suppress the shadow and rely on the border above. */
    box-shadow: none !important;
}