/* ==========================================================================
   zn-theme.css — DL-2866, extended by DL-2867
   Maps the ZendaitaNotifications RCL's --zn-* tokens onto the Daitalens palette.

   The class library compiles in no product colour: everything branded arrives as a CSS
   custom property the host sets. This file is that host side, and nothing else — it must
   never restyle a .zn-* element, only feed it values.

   Two rules that matter:

   1. Map to the --dl-* VARIABLES, not to their hex values. dl-effects.js rewrites
      --dl-primary-rgb and --dl-accent-rgb at runtime from the branding API, so a
      white-labelled customer's accent has to flow through here. Hard-coding the blue
      would quietly break every branded tenant.
   2. --zn-accent-rgb and --zn-success-rgb are RGB TRIPLES ("16, 113, 185"), not colours.
      The components wrap them in rgb()/rgba(). Handing them a hex silently breaks those
      rules with no error.

   Dark mode is [data-theme="dark"] on <html>, written by dlEffects.cycleTheme
   (Scripts/dl-effects.js) and persisted under localStorage['daitalens-theme']. This file
   redefines the tokens under that same selector; it does not add a second theme mechanism.
   ========================================================================== */

:root {
    /* ── Surfaces ── */
    --zn-bg: #FFFFFF;
    --zn-bg-subtle: var(--dl-bg-secondary);          /* #EDF2F7 — DL-2867: the preference rows' ground */
    --zn-bg-hover: var(--dl-bg-secondary);
    --zn-bg-unread: rgba(var(--dl-primary-rgb), 0.06);
    /* DL-2867 — --dl-bg-primary already flips to #0f1117 under [data-theme="dark"], so this one
       mapping is correct in both themes and the dark block deliberately does not restate it. */
    --zn-header-bg: var(--dl-bg-primary);            /* #F7F9FC light · #0f1117 dark */
    --zn-border: var(--dl-border-subtle);            /* rgba(0,0,0,.06) */

    /* ── Text ── */
    --zn-text: var(--dl-text-primary);               /* #1A202C */
    --zn-text-secondary: var(--dl-text-secondary);   /* #4A5568 */
    --zn-text-muted: var(--dl-text-muted);           /* #A0AEC0 */
    --zn-muted: var(--dl-text-secondary);

    /* ── Accent ──
       Triples, so the components can compose alphas. Runtime-overwritten by the branding API. */
    --zn-primary: rgb(var(--dl-primary-rgb));
    --zn-accent-rgb: var(--dl-primary-rgb);          /* 16, 113, 185 */
    --zn-accent-on-dark: rgb(var(--dl-accent-rgb));  /* 79, 202, 255 — the lifted accent */

    /* ── Semantics ──
       Daitalens does not redefine these in dark, so they are set once here. */
    --zn-danger: var(--dl-danger);                   /* #E53E3E */
    --zn-warning: var(--dl-warning);                 /* #D69E2E */
    --zn-success: var(--dl-success);                 /* #38A169 */
    --zn-success-rgb: 56, 161, 105;                  /* the triple form of --dl-success */

    /* ── Priority rail ──
       Critical and high borrow the semantic colours; normal and low stay quiet on purpose.
       If everything is urgent, nothing is. */
    --zn-priority-critical: var(--dl-danger);
    --zn-priority-high: var(--dl-warning);
    --zn-priority-normal: transparent;
    --zn-priority-low: transparent;

    /* ── Type ── */
    --zn-font-family: var(--dl-font-display);        /* 'Inter', -apple-system, … */
    --zn-font-size-base: 0.875rem;
    --zn-font-size-sm: 0.8125rem;
    --zn-font-size-xs: 0.75rem;

    /* ── Shape and elevation ── */
    --zn-radius: var(--dl-radius-md);                /* 10px */
    --zn-radius-sm: var(--dl-radius-sm);             /* 6px */
    --zn-shadow: var(--dl-shadow-sm);
    --zn-shadow-lg: var(--dl-shadow-md);             /* 0 4px 6px …, 0 2px 4px … */

    /* ── Motion ── */
    --zn-transition-fast: var(--dl-duration-fast) var(--dl-ease-smooth);
    --zn-transition-normal: var(--dl-duration-normal) var(--dl-ease-smooth);
}

[data-theme="dark"] {
    --zn-bg: var(--dl-bg-secondary);                 /* #1a1d27 */
    --zn-bg-subtle: #1a1d27;
    --zn-bg-hover: rgba(255, 255, 255, 0.06);
    --zn-bg-unread: rgba(var(--dl-primary-rgb), 0.14);
    --zn-border: rgba(255, 255, 255, 0.08);

    --zn-text: #e4e4e7;
    --zn-text-secondary: #9ca3af;
    --zn-text-muted: #6b7280;
    --zn-muted: #9ca3af;

    /* The accent is unchanged — the branding API overwrites --dl-primary-rgb at runtime in
       both themes — but links and the unread dot lift to the dark-safe accent so they hold
       contrast against #1a1d27. */
    --zn-primary: rgb(var(--dl-accent-rgb));

    --zn-shadow: var(--dl-shadow-sm);
    --zn-shadow-lg: var(--dl-shadow-md);             /* 0 4px 16px rgba(0,0,0,.4), … */

    /* DL-2867 — --zn-accent-rgb, --zn-accent-on-dark and --zn-success-rgb are NOT restated here.
       [data-theme="dark"] matches <html>, the same element :root matches, so anything this block
       omits keeps its :root value — which for all three is what dark wants. The accent pair is
       branding-driven (dl-effects.js rewrites --dl-primary-rgb and --dl-accent-rgb from the
       branding API in both themes); pinning a hex here would freeze every white-labelled tenant's
       preference switches to Daitalens blue. Success is one colour in both themes by design. */
}

/* ==========================================================================
   Mobile panel — #screen-c3 annotation 2
   A 380px dropdown inside a 390px screen wastes the edges and clips the longest titles, so
   the mobile panel takes the whole width, square-cornered, anchored under the 56px header
   rather than floating. The width comes through the token; only the geometry the token
   cannot express is written as a rule, and it is scoped to the mobile mount so it can never
   touch the desktop dropdown.
   ========================================================================== */

.dl-notify-mount--mobile {
    position: static;
}

.dl-notify-mount--mobile .zn-panel.dl-notify-panel--mobile {
    position: fixed;
    top: 56px;                                       /* .mobile-header height */
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
    border-left: none;
    border-right: none;
}