/* wwwroot/css/admin/tokens.css
   Design token toàn Admin Panel — trích từ Components/Layout/AdminLayout.razor
   (trước đây <style> inline, tự nhúng lại mỗi lần layout render).
   Scope .adm-root (KHÔNG phải :root) — có chủ đích: Radzen components cũng được
   dùng ở vài trang public/Member (ForumCreatePost, MyNotes, LessonPlayer...),
   nếu đưa lên :root sẽ đè theme Admin lên cả những trang đó. Dark mode qua
   attribute data-admin-theme (set bởi wwwroot/js/admin-theme.js), không đổi. */

    *, *::before, *::after { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; font-family: 'Be Vietnam Pro', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

    /* =====================================================================
       DESIGN TOKENS — Admin Dashboard Design System (brand #1EA69E)
       Định nghĩa 1 lần trên .adm-root, mọi component con (kể cả Radzen)
       kế thừa qua CSS custom properties. Không hardcode màu trong component.
       Light = mặc định; Dark = .adm-root[data-theme="dark"]
         hoặc html[data-admin-theme="dark"] .adm-root (chống FOUC trước hydrate).
    ===================================================================== */
    .adm-root {
        /* ----- Brand ----- */
        --primary: #1EA69E;
        --primary-hover: #188A83;
        --primary-active: #15756F;
        --primary-light: #E8F8F7;
        --primary-border: #BFE9E6;
        --primary-soft: rgba(30, 166, 158, .12);

        /* ----- Neutral ----- */
        --background: #F8FAFC;
        --surface: #FFFFFF;
        --sidebar: #0F172A;
        --border: #E5E7EB;
        --divider: #E2E8F0;
        --text: #111827;
        --text-body: #374151;
        --text-secondary: #6B7280;
        --disabled: #9CA3AF;

        /* ----- Status ----- */
        --success: #22C55E;
        --warning: #F59E0B;
        --danger:  #EF4444;
        --info:    #3B82F6;

        /* ----- Grid / filter / menu tokens (dùng chung mọi trang Admin) ----- */
        --adm-grid-row-border: #F1F5F9;
        --adm-grid-icon: #64748B;
        --adm-chip-text: #475569;
        --adm-row-selected: #EEF9F8;
        --adm-ctl-icon: #64748B;
        --adm-ctl-border-hover: #CBD5E1;
        --adm-menu-icon: #64748B;
        --adm-menu-danger: #DC2626;
        --adm-menu-danger-hover: #B91C1C;
        --adm-hover-bg: #F3F4F6;
        --adm-hover-bg-strong: #E5E7EB;
        --adm-overlay: rgba(15, 23, 42, .45);
        --adm-overlay-light: rgba(15, 23, 42, .32);

        /* ----- Radius / shadow / motion ----- */
        --radius-sm: 8px;
        --radius: 10px;
        --radius-lg: 16px;
        --shadow-card: 0 2px 8px rgba(0, 0, 0, .05);
        --shadow-card-hover: 0 6px 18px rgba(0, 0, 0, .08);
        --shadow-header: 0 1px 2px rgba(0, 0, 0, .04);
        --shadow-menu: 0 10px 30px rgba(0, 0, 0, .08);
        --shadow-modal: 0 20px 60px rgba(0, 0, 0, .25);
        --transition: .2s ease;

        /* ----- Ghi đè theme Radzen: áp cho MỌI component Radzen trong admin
           (nút, input, datagrid, dropdown, alert, badge...) ----- */
        --rz-primary: #1EA69E;
        --rz-primary-color: #1EA69E;
        --rz-primary-light: #2DD4BF;
        --rz-primary-lighter: rgba(30, 166, 158, .12);
        --rz-primary-dark: #188A83;
        --rz-primary-darker: #15756F;
        --rz-on-primary: #FFFFFF;

        --rz-info: #3B82F6; --rz-info-light: #60A5FA; --rz-info-lighter: rgba(59, 130, 246, .14); --rz-info-dark: #2563EB; --rz-info-darker: #1D4ED8;
        --rz-success: #22C55E; --rz-success-light: #4ADE80; --rz-success-lighter: rgba(34, 197, 94, .14); --rz-success-dark: #16A34A; --rz-success-darker: #15803D;
        --rz-warning: #F59E0B; --rz-warning-light: #FBBF24; --rz-warning-lighter: rgba(245, 158, 11, .14); --rz-warning-dark: #D97706; --rz-warning-darker: #B45309;
        --rz-danger: #EF4444; --rz-danger-light: #F87171; --rz-danger-lighter: rgba(239, 68, 68, .14); --rz-danger-dark: #DC2626; --rz-danger-darker: #B91C1C;

        --rz-link-color: #1EA69E;
        --rz-link-hover-color: #188A83;

        --rz-border-radius: 8px;
        --rz-button-border-radius: 10px;
        --rz-input-border-radius: 10px;
        --rz-card-border-radius: 16px;

        --rz-base: #FFFFFF;
        --rz-base-background-color: #FFFFFF;
        --rz-base-background: #FFFFFF;
        --rz-base-100: #F8FAFC;
        --rz-panel-background-color: #FFFFFF;
        --rz-input-background-color: #FFFFFF;
        --rz-grid-background-color: #FFFFFF;
        --rz-grid-header-background-color: #F8FAFC;
        --rz-grid-stripe-background-color: transparent;
        --rz-grid-stripe-odd-background-color: transparent;
        --rz-grid-frozen-stripe-background-color: transparent;
        --rz-grid-frozen-stripe-odd-background-color: transparent;
        --rz-grid-hover-background-color: #F8FAFC;
        --rz-grid-selected-background-color: #EEF9F8;

        --rz-text-color: #374151;
        --rz-text-title-color: #111827;
        --rz-text-secondary-color: #6B7280;
        --rz-border-color: #E5E7EB;
        --rz-border: 1px solid #E5E7EB;

        display: flex;
        flex-direction: column;
        height: 100vh;
        background: var(--background);
        color: var(--text-body);
        color-scheme: light;
        transition: background-color var(--transition), color var(--transition);
    }

    /* =====================================================================
       DARK MODE — ghi đè token (giữ brand teal, đổi nền/chữ/viền)
    ===================================================================== */
    html[data-admin-theme="dark"] .adm-root,
    .adm-root[data-theme="dark"] {
        --primary: #2DD4BF;
        --primary-hover: #5EEAD4;
        --primary-active: #14B8A6;
        --primary-light: rgba(45, 212, 191, .16);
        --primary-border: rgba(45, 212, 191, .35);
        --primary-soft: rgba(45, 212, 191, .18);

        --background: #0B1220;
        --surface: #111827;
        --sidebar: #020617;
        --border: #1F2A3D;
        --divider: #1E293B;
        --text: #F8FAFC;
        --text-body: #E2E8F0;
        --text-secondary: #94A3B8;
        --disabled: #64748B;

        --success: #34D399;
        --warning: #FBBF24;
        --danger:  #F87171;
        --info:    #60A5FA;

        --adm-grid-row-border: #1E293B;
        --adm-grid-icon: #94A3B8;
        --adm-chip-text: #CBD5E1;
        --adm-row-selected: rgba(45, 212, 191, .14);
        --adm-ctl-icon: #94A3B8;
        --adm-ctl-border-hover: #334155;
        --adm-menu-icon: #94A3B8;
        --adm-menu-danger: #F87171;
        --adm-menu-danger-hover: #FCA5A5;
        --adm-hover-bg: #1E293B;
        --adm-hover-bg-strong: #334155;
        --adm-overlay: rgba(2, 6, 23, .65);
        --adm-overlay-light: rgba(2, 6, 23, .5);

        --shadow-card: 0 2px 8px rgba(0, 0, 0, .35);
        --shadow-card-hover: 0 6px 18px rgba(0, 0, 0, .45);
        --shadow-header: 0 1px 2px rgba(0, 0, 0, .35);
        --shadow-menu: 0 12px 36px rgba(0, 0, 0, .55);
        --shadow-modal: 0 24px 64px rgba(0, 0, 0, .6);

        --rz-primary: #2DD4BF;
        --rz-primary-color: #2DD4BF;
        --rz-primary-light: #5EEAD4;
        --rz-primary-lighter: rgba(45, 212, 191, .18);
        --rz-primary-dark: #14B8A6;
        --rz-primary-darker: #0D9488;
        --rz-on-primary: #042F2E;

        --rz-info: #60A5FA; --rz-info-light: #93C5FD; --rz-info-lighter: rgba(96, 165, 250, .18); --rz-info-dark: #3B82F6; --rz-info-darker: #2563EB;
        --rz-success: #34D399; --rz-success-light: #6EE7B7; --rz-success-lighter: rgba(52, 211, 153, .18); --rz-success-dark: #10B981; --rz-success-darker: #059669;
        --rz-warning: #FBBF24; --rz-warning-light: #FCD34D; --rz-warning-lighter: rgba(251, 191, 36, .18); --rz-warning-dark: #F59E0B; --rz-warning-darker: #D97706;
        --rz-danger: #F87171; --rz-danger-light: #FCA5A5; --rz-danger-lighter: rgba(248, 113, 113, .18); --rz-danger-dark: #EF4444; --rz-danger-darker: #DC2626;

        --rz-link-color: #2DD4BF;
        --rz-link-hover-color: #5EEAD4;

        --rz-base: #111827;
        --rz-base-background-color: #111827;
        --rz-base-background: #111827;
        --rz-base-100: #0B1220;
        --rz-panel-background-color: #111827;
        /* Input trùng màu card/form (--surface), không dùng --background tối hơn */
        --rz-input-background-color: #111827;
        --rz-form-field-filled-background-color: #111827;
        --rz-form-field-filled-hover-background-color: #1E293B;
        --rz-form-field-label-background-color: #111827;
        --rz-grid-background-color: #111827;
        --rz-grid-header-background-color: #0B1220;
        /* Radzen DataGrid mặc định sọc odd=white / even=base-100 — phải ghi đè cả 2 */
        --rz-grid-stripe-background-color: #111827;
        --rz-grid-stripe-odd-background-color: #111827;
        --rz-grid-frozen-stripe-background-color: #111827;
        --rz-grid-frozen-stripe-odd-background-color: #111827;
        --rz-grid-hover-background-color: #0B1220;
        --rz-grid-selected-background-color: rgba(45, 212, 191, .14);
        --rz-grid-cell-color: #E2E8F0;
        --rz-grid-header-color: #E2E8F0;
        --rz-base-200: #1E293B;
        --rz-pager-background-color: #111827;
        --rz-pager-summary-color: #94A3B8;
        --rz-pager-numeric-button-background-color: #1E293B;
        --rz-pager-numeric-button-color: #E2E8F0;
        --rz-pager-numeric-button-hover-background-color: #334155;
        --rz-pager-numeric-button-selected-background-color: #111827;
        --rz-pager-numeric-button-selected-color: #2DD4BF;
        --rz-pager-back-button-background-color: #1E293B;
        --rz-pager-back-button-color: #E2E8F0;
        --rz-pager-next-button-background-color: #1E293B;
        --rz-pager-next-button-color: #E2E8F0;

        --rz-text-color: #E2E8F0;
        --rz-text-title-color: #F8FAFC;
        --rz-text-secondary-color: #94A3B8;
        --rz-border-color: #1F2A3D;
        --rz-border: 1px solid #1F2A3D;

        color-scheme: dark;
    }