/* ========================================
   ZINRAI Theme Variables
   Dark and Light Mode CSS Custom Properties
   ======================================== */

/* ========================================
   STRUCTURAL TOKENS (theme-independent)
   ======================================== */
:root {
    /* Z-index — max int32 minus a small margin, above MudDialog (~1300)
       and any other floating layer. Used by portaled FilterDropdown menus
       (see filter-dropdown.js). Lives here, not in the theme blocks, so it
       can't be accidentally shadowed by a future light/dark redeclaration.
       The backdrop sits one below the menu so menu items still receive
       clicks while a click anywhere else closes the dropdown. */
    --z-dropdown-portal: 2147483600;
    --z-dropdown-portal-backdrop: 2147483599;

    /* Dark gradient start stop for promotional banner cards. Named for the
       Creative Suite dashboard banner it was introduced for; that banner was
       removed in ZN-1331, but ConventionTicketBanner.razor.css color-mixes this
       token in five places, so it stays. Such banners are intentionally
       dark-to-blue regardless of theme (Anna's spec), so this sits in the
       structural block and is NOT redefined per theme — using --bg-body for the
       start stop made the gradient flip to light-on-blue in light mode and
       dropped the centered text below readable contrast. */
    --promo-banner-bg-start: #000612;

    /* Left nav item height (ZN-833) — reduced from 44px so 14 top-level
       items fit on a ~700px-tall 100%-zoom 13" viewport without scrolling. */
    --nav-item-height: 38px;
    /* Collapsed-rail icon button stays a full 44px square (ZN-833) — the
       expanded-row density cut must not shrink the collapsed icon hit-area. */
    --nav-collapsed-item-size: 44px;
}

/* ========================================
   DARK THEME (Default)
   ======================================== */
:root,
[data-theme="dark"] {
    color-scheme: dark;

    /* Typography */
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Background Colors */
    --bg-body: #000612;
    --bg-sidebar: #0A0F1A;
    --bg-header: #131925;
    --bg-card: #131925;
    --bg-card-hover: #1A1F2B;
    --bg-input: #131925;
    --bg-input-focus: #1A1F2B;
    --bg-modal: #131925;
    --bg-dropdown: #131925;
    --bg-table-header: #131925;
    --bg-table-row: #131925;
    --bg-table-row-hover: #1A1F2B;
    --bg-table-row-alt: #0e131c;

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #9ca3af;
    /* ZN-946: --text-secondary/--text-muted (#9ca3af/#99a1af) are near-identical,
       so swapping one for the other reads as a no-op. This is a genuinely
       brighter slate-300 for pages that want more contrast than the standard
       muted tokens without going full --text-primary white. Scoped opt-in only
       (e.g. BillingPage.razor.css) -- not a replacement for --text-muted/
       --text-secondary app-wide. */
    --text-secondary-strong: #cbd5e1;
    --text-tertiary: #99a1af;
    --text-muted: #99a1af;
    --text-muted-bg: rgba(153, 161, 175, 0.2);
    --text-on-accent-soft: rgba(255, 255, 255, 0.9);
    --overlay-on-accent: rgba(255, 255, 255, 0.3);
    --overlay-on-accent-light: rgba(255, 255, 255, 0.15);
    --overlay-on-accent-subtle: rgba(255, 255, 255, 0.08);
    --text-inverse: #000612;
    --text-on-accent: #ffffff; /* Readable on filled colour backgrounds (success/warning/error/primary). Same in both themes. */
    --text-link: #00b9fc;
    --text-link-hover: #38BDF8;

    /* Checkbox glyphs — SVG stroke color is baked because background-image data URIs
       cannot resolve CSS variables. Both themes paint on var(--accent-primary), so the
       hardcoded white tracks --text-on-accent. Override per-theme if --text-on-accent diverges. */
    --checkbox-check-glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3.5 8.5 L6.5 11.5 L12.5 5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    --checkbox-indeterminate-glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M4 8 H12' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/></svg>");

    /* Border Colors */
    --border-primary: #39414f;
    --border-secondary: #39414f;
    --border-input: #39414f;
    --border-input-focus: #015bef;
    --border-card: #39414f;
    --border-divider: #39414f;

    /* Accent Colors — brand migrated from purple (legacy) to Electric Blue per Anna's palette (ZN-328) */
    --accent-primary: #015bef;
    --accent-primary-hover: #005aec;
    --accent-primary-deep: #0048c4;
    --accent-primary-tint: #5392f3;
    --accent-primary-bright: #3382ff;
    --accent-primary-light: rgba(1, 91, 239, 0.15);
    --accent-primary-glow: rgba(1, 91, 239, 0.04);
    --accent-primary-hover-border: rgba(1, 91, 239, 0.35);
    --accent-secondary: #06b6d4;
    --accent-secondary-hover: #0891b2;
    --accent-tertiary: #14b8a6;
    --accent-tertiary-tint: #2dd4bf;
    --accent-tertiary-glow: rgba(20, 184, 166, 0.35);
    --accent-tertiary-light: rgba(20, 184, 166, 0.1);
    --accent-mint: #6ee7b7;
    --accent-info: #00b9fc;
    --accent-info-glow: rgba(0, 185, 252, 0.4);
    --accent-info-light: rgba(0, 185, 252, 0.15);
    --text-info: #00b9fc;
    --accent-indigo: #6366ff;
    --accent-indigo-tint: #818cf8;
    --accent-indigo-glow: rgba(99, 102, 255, 0.35);
    --chart-pink-tint: #f472b6;
    --chart-pink-glow: rgba(236, 72, 153, 0.35);
    --chart-pink-light: rgba(236, 72, 153, 0.15);
    --chart-pink-border-strong: rgba(236, 72, 153, 0.4);
    --rank-gold: #e2b714;
    --rank-gold-tint: #f0c830;
    --rank-gold-glow: rgba(226, 183, 20, 0.35);
    --rank-gold-light: rgba(226, 183, 20, 0.15);
    --rank-gold-border-strong: rgba(226, 183, 20, 0.4);
    --accent-teal: #1c8480;
    --accent-teal-tint: #2ba8a3;
    --accent-teal-deep: #156d6a;
    --accent-teal-light: rgba(28, 132, 128, 0.18);
    --accent-secondary-light: rgba(6, 182, 212, 0.15);
    --accent-orange: #ff9d00;
    --accent-orange-deep: #ff6f00;
    --text-on-orange: #1a1200;
    --accent-success-vibrant: #20bf55;
    --accent-primary-deep-bg: #0048c4;
    --bg-section-header: rgba(6, 182, 212, 0.08);

    /* Event category colors (EventCalendar) */
    --event-blue: #2b7fff;
    --event-purple: #ad46ff;
    --event-pink: #f6339a;
    /* Event card backgrounds — dark theme uses soft tints of the category color */
    --event-blue-bg: rgba(43, 127, 255, 0.12);
    --event-purple-bg: rgba(173, 70, 255, 0.12);
    --event-pink-bg: rgba(246, 51, 154, 0.12);
    --event-meeting-bg: rgba(20, 184, 166, 0.12);

    /* Status Colors */
    --color-success: #10b981;
    --color-success-bg: rgba(16, 185, 129, 0.15);
    --color-success-bg-strong: rgba(16, 185, 129, 0.25);
    --color-success-bright: #4ade80;
    --color-warning: #f59e0b;
    --color-warning-bg: rgba(245, 158, 11, 0.15);
    --color-warning-bg-strong: rgba(245, 158, 11, 0.4);
    --color-warning-bright: #facc15;
    --color-error: #ef4444;
    --color-error-bg: rgba(239, 68, 68, 0.15);
    --color-error-bg-strong: rgba(239, 68, 68, 0.25);
    --color-error-bright: #f87171;
    --color-info: #3b82f6;
    --color-info-bg: rgba(59, 130, 246, 0.15);

    /* Accent backgrounds (higher-alpha bg for badge variants) */
    --accent-primary-bg-strong: rgba(1, 91, 239, 0.25);

    /* Chart Colors */
    --chart-blue: #015bef;
    --chart-cyan: #00b9fc;
    --chart-teal: #14b8a6;
    --chart-green: #20bf55;
    --chart-orange: #ff9d00;
    --chart-purple: #6366ff;
    --chart-pink: #ec4899;
    --chart-yellow: #eab308;

    /* Navigation */
    --nav-bg: #0A0F1A;
    --nav-item-bg: transparent;
    --nav-item-bg-hover: #007BFF;
    --nav-item-bg-active: transparent;
    --nav-item-text: #E5E7EB;
    --nav-item-text-hover: #FFFFFF;
    --nav-item-text-active: #38BDF8;
    --nav-icon-color: #E5E7EB;
    --nav-icon-color-hover: #FFFFFF;
    --nav-icon-color-active: #38BDF8;

    /* Buttons */
    --btn-primary-bg: #015bef;
    --btn-primary-bg-hover: #005aec;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: transparent;
    --btn-secondary-bg-hover: rgba(1, 91, 239, 0.1);
    --btn-secondary-text: #9ca3af;
    --btn-secondary-border: #39414f;
    --btn-danger-bg: #ef4444;
    --btn-danger-bg-hover: #dc2626;
    --btn-danger-text: #ffffff;
    --btn-success-bg: #10b981;
    --btn-success-bg-hover: #059669;
    --btn-success-text: #ffffff;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-accent-glow: 0 4px 12px rgba(1, 91, 239, 0.3);
    --shadow-success-glow: 0 4px 12px rgba(16, 185, 129, 0.3);
    --shadow-error-glow: 0 4px 12px rgba(239, 68, 68, 0.3);

    /* Scrollbar */
    --scrollbar-track: #131925;
    --scrollbar-thumb: #39414f;
    --scrollbar-thumb-hover: #4a5563;

    /* Misc */
    --overlay-bg: rgba(0, 0, 0, 0.6);
    --loading-spinner: #015bef;
    --badge-new-bg: #10b981;
    --badge-new-text: #ffffff;
    --notification-dot: #ef4444;
    
    /* Logo */
    --logo-filter: none;
    --logo-image-url: url("/assets/zinrai/zinrai-sidebar-logo.png");
    --logo-icon-url: url("/assets/zinrai/zinrai-sidebar-icon.png");

    /* Aliases for backward compatibility */
    --border-color: var(--border-primary);
    --bg-hover: var(--bg-card-hover);
    --accent-purple: var(--accent-primary);
    --accent-purple-dark: var(--accent-primary-hover);
    --accent-cyan: var(--accent-secondary);
    --accent-green: var(--color-success);
}

/* ========================================
   LIGHT THEME
   ======================================== */
[data-theme="light"] {
    color-scheme: light;

    /* Typography */
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Background Colors */
    --bg-body: #f5f6f8;
    --bg-sidebar: #ffffff;
    --bg-header: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f9fafb;
    --bg-input: #f9fafb;
    --bg-input-focus: #ffffff;
    --bg-modal: #ffffff;
    --bg-dropdown: #ffffff;
    --bg-table-header: #f3f4f6;
    --bg-table-row: #ffffff;
    --bg-table-row-hover: #f9fafb;
    --bg-table-row-alt: #f9fafb;
    
    /* Text Colors */
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    /* ZN-946: light-theme counterpart of the dark block's --text-secondary-strong
       above -- darker (slate-600) than --text-muted/--text-secondary for the
       same scoped opt-in use. */
    --text-secondary-strong: #475569;
    --text-tertiary: #9ca3af;
    --text-muted: #9ca3af;
    --text-muted-bg: rgba(107, 114, 128, 0.15);
    --text-on-accent-soft: rgba(255, 255, 255, 0.9);
    --overlay-on-accent: rgba(255, 255, 255, 0.3);
    --overlay-on-accent-light: rgba(255, 255, 255, 0.15);
    --overlay-on-accent-subtle: rgba(255, 255, 255, 0.08);
    --text-inverse: #ffffff;
    --text-on-accent: #ffffff; /* Readable on filled colour backgrounds. Same in both themes. */
    --text-link: #3b82f6;
    --text-link-hover: #2563eb;
    
    /* Border Colors */
    --border-primary: #e5e7eb;
    --border-secondary: #f3f4f6;
    --border-input: #d1d5db;
    --border-input-focus: #015bef;
    --border-card: #e5e7eb;
    --border-divider: #e5e7eb;

    /* Accent Colors — brand migrated from purple (legacy) to Electric Blue per Anna's palette (ZN-328) */
    --accent-primary: #015bef;
    --accent-primary-hover: #005aec;
    --accent-primary-deep: #0048c4;
    --accent-primary-tint: #5392f3;
    --accent-primary-bright: #3382ff;
    --accent-primary-light: rgba(1, 91, 239, 0.1);
    --accent-primary-glow: rgba(1, 91, 239, 0.03);
    --accent-primary-hover-border: rgba(1, 91, 239, 0.35);
    --accent-secondary: #06b6d4;
    --accent-secondary-hover: #0891b2;
    --accent-tertiary: #14b8a6;
    --accent-tertiary-tint: #2dd4bf;
    --accent-tertiary-glow: rgba(20, 184, 166, 0.35);
    --accent-tertiary-light: rgba(20, 184, 166, 0.08);
    --accent-mint: #6ee7b7;
    --accent-info: #00b9fc;
    --accent-info-glow: rgba(0, 185, 252, 0.4);
    --accent-info-light: rgba(0, 185, 252, 0.12);
    /* Darker info text for ≥4.5:1 contrast on white surfaces; --accent-info stays
       Sky Blue (Anna's spec) and is reserved for badge/button fills. */
    --text-info: #0073b1;
    --accent-indigo: #6366ff;
    --accent-indigo-tint: #818cf8;
    --accent-indigo-glow: rgba(99, 102, 255, 0.35);
    --chart-pink-tint: #f472b6;
    --chart-pink-glow: rgba(236, 72, 153, 0.35);
    --chart-pink-light: rgba(236, 72, 153, 0.15);
    --chart-pink-border-strong: rgba(236, 72, 153, 0.4);
    --rank-gold: #e2b714;
    --rank-gold-tint: #f0c830;
    --rank-gold-glow: rgba(226, 183, 20, 0.35);
    --rank-gold-light: rgba(226, 183, 20, 0.15);
    --rank-gold-border-strong: rgba(226, 183, 20, 0.4);
    --accent-teal: #1c8480;
    --accent-teal-tint: #2ba8a3;
    --accent-teal-deep: #156d6a;
    --accent-teal-light: #e4fffe;
    --accent-secondary-light: rgba(6, 182, 212, 0.1);
    --accent-orange: #ff9d00;
    --accent-orange-deep: #ff6f00;
    --text-on-orange: #1a1200;
    --accent-success-vibrant: #20bf55;
    --accent-primary-deep-bg: #0048c4;
    --bg-section-header: #ebf3f6;

    /* Event category colors (EventCalendar) */
    --event-blue: #2b7fff;
    --event-purple: #ad46ff;
    --event-pink: #f6339a;
    /* Event card backgrounds — pastel tints for light theme */
    --event-blue-bg: #e3eeff;
    --event-purple-bg: #f0deff;
    --event-pink-bg: #ffeff7;
    --event-meeting-bg: #f0f9f7;

    /* Status Colors */
    --color-success: #10b981;
    --color-success-bg: rgba(16, 185, 129, 0.1);
    --color-success-bg-strong: rgba(16, 185, 129, 0.18);
    --color-success-bright: #4ade80;
    --color-warning: #f59e0b;
    --color-warning-bg: rgba(245, 158, 11, 0.1);
    --color-warning-bg-strong: rgba(245, 158, 11, 0.3);
    --color-warning-bright: #facc15;
    --color-error: #ef4444;
    --color-error-bg: rgba(239, 68, 68, 0.1);
    --color-error-bg-strong: rgba(239, 68, 68, 0.18);
    --color-error-bright: #f87171;
    --color-info: #3b82f6;
    --color-info-bg: rgba(59, 130, 246, 0.1);

    /* Accent backgrounds (higher-alpha bg for badge variants) */
    --accent-primary-bg-strong: rgba(1, 91, 239, 0.18);

    /* Chart Colors */
    --chart-blue: #015bef;
    --chart-cyan: #00b9fc;
    --chart-teal: #14b8a6;
    --chart-green: #20bf55;
    --chart-orange: #ff9d00;
    --chart-purple: #6366ff;
    --chart-pink: #ec4899;
    --chart-yellow: #eab308;

    /* Navigation */
    --nav-bg: #ffffff;
    --nav-item-bg: transparent;
    --nav-item-bg-hover: #007BFF;
    --nav-item-bg-active: transparent;
    --nav-item-text: #1A1F2B;
    --nav-item-text-hover: #FFFFFF;
    --nav-item-text-active: #38BDF8;
    --nav-icon-color: #1A1F2B;
    --nav-icon-color-hover: #FFFFFF;
    --nav-icon-color-active: #38BDF8;

    /* Buttons */
    --btn-primary-bg: #015bef;
    --btn-primary-bg-hover: #005aec;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: transparent;
    --btn-secondary-bg-hover: rgba(1, 91, 239, 0.08);
    --btn-secondary-text: #6b7280;
    --btn-secondary-border: #e5e7eb;
    --btn-danger-bg: #ef4444;
    --btn-danger-bg-hover: #dc2626;
    --btn-danger-text: #ffffff;
    --btn-success-bg: #10b981;
    --btn-success-bg-hover: #059669;
    --btn-success-text: #ffffff;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-accent-glow: 0 4px 12px rgba(1, 91, 239, 0.25);
    --shadow-success-glow: 0 4px 12px rgba(16, 185, 129, 0.25);
    --shadow-error-glow: 0 4px 12px rgba(239, 68, 68, 0.25);

    /* Scrollbar */
    --scrollbar-track: #f3f4f6;
    --scrollbar-thumb: #d1d5db;
    --scrollbar-thumb-hover: #9ca3af;

    /* Misc */
    --overlay-bg: rgba(0, 0, 0, 0.4);
    --loading-spinner: #015bef;
    --badge-new-bg: #10b981;
    --badge-new-text: #ffffff;
    --notification-dot: #ef4444;
    
    /* Logo */
    --logo-filter: none;
    --logo-image-url: url("/assets/zinrai/zinrai-sidebar-logo-light.png");
    --logo-icon-url: url("/assets/zinrai/zinrai-sidebar-icon-light.png");

    /* Aliases for backward compatibility */
    --border-color: var(--border-primary);
    --bg-hover: var(--bg-card-hover);
    --accent-purple: var(--accent-primary);
    --accent-purple-dark: var(--accent-primary-hover);
    --accent-cyan: var(--accent-secondary);
    --accent-green: var(--color-success);
}

/* ========================================
   Global Scrollbar Styling
   ======================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}