/* ============================================
   SOLVEON ERP — DESIGN SYSTEM v5
   Arquitetura de tokens 100% via CSS Custom Properties
   Suporta override dinâmico de tema (dark / light / custom)
   ============================================ */

/* ===== FONT IMPORT ===== */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700;800;900&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

/* ============================================================
   CAMADA 1 — PALETA PRIMITIVA (nunca usada diretamente no CSS)
   Estes são os valores "crus" que alimentam os tokens semânticos.
   Para trocar o tema basta sobrescrever os tokens semânticos
   abaixo via <style> inline ou context processor do Django.
   ============================================================ */
:root {
    /* --- Escala de azuis Solveon --- */
    --_blue-050: #D4E4F4;
    --_blue-100: #8AAEC8;
    --_blue-200: #3A5A7A;
    --_blue-300: #1A3A5A;
    --_blue-400: #0A1E34;
    --_blue-500: #102040;
    --_blue-600: #1A3058;
    --_blue-700: #0A1628;
    --_blue-800: #060E1A;

    /* --- Neons --- */
    --_neon-blue:   #00A8E8;
    --_neon-cyan:   #00D4FF;
    --_neon-mid:    #0070B8;
    --_neon-deep:   #00508A;
    --_neon-light:  #0095E0;
    --_neon-soft:   #0080CC;

    /* --- Semânticas de estado --- */
    --_success:      #0D9E6A;
    --_success-dark: #0A7A52;
    --_danger:       #C0392B;
    --_danger-dark:  #A02E22;
    --_warning:      #D4860A;
    --_warning-dark: #B06E08;
    --_info:         #0095E0;
    --_info-dark:    #0078B8;
}

/* ============================================================
   CAMADA 2 — TOKENS SEMÂNTICOS (tema DARK — padrão Solveon)
   OVERRIDE AQUI para trocar o tema de uma empresa inteira.
   Exemplo no base.html:
     <style>
       :root {
         --bg-primary: #F5F7FA;
         --text-primary: #0D1117;
         ... (ver tema LIGHT mais abaixo como referência)
       }
     </style>
   ============================================================ */
:root {
    /* ── Fundos ── */
    --bg-primary:   #060E1A;
    --bg-secondary: #0A1628;
    --bg-tertiary:  #102040;
    --bg-elevated:  #1A3058;
    --bg-card:      #0A1628;
    --bg-hover:     rgba(0, 112, 184, 0.12);

    /* ── Texto ── */
    --text-primary:   #D4E4F4;
    --text-secondary: #8AAEC8;
    --text-tertiary:  #4A6A8A;
    --text-muted:     #4A6A8A;
    --text-disabled:  #2A4A6A;
    --text-inverse:   #060E1A;

    /* ── Neons / Brand ── */
    --neon-blue:   #00A8E8;
    --neon-cyan:   #00D4FF;
    --neon-purple: #2060C0;
    --neon-pink:   #0080CC;

    /* ── Metal (gradientes de logo/texto) ── */
    --metal-light: #C8DCF0;
    --metal-mid:   #8AAEC8;
    --metal-dark:  #3A5A7A;

    /* ── Primária ── */
    --primary:      #0070B8;
    --primary-dark: #00508A;
    --primary-light:#0095E0;
    --primary-soft: rgba(0, 112, 184, 0.12);

    /* ── Accent ── */
    --accent:      #00A8E8;
    --accent-soft: rgba(0, 168, 232, 0.14);

    /* ── Estados semânticos ── */
    --success:      #0D9E6A;
    --success-dark: #0A7A52;
    --success-soft: rgba(13, 158, 106, 0.12);

    --danger:      #C0392B;
    --danger-dark: #A02E22;
    --danger-soft: rgba(192, 57, 43, 0.12);

    --warning:      #D4860A;
    --warning-dark: #B06E08;
    --warning-soft: rgba(212, 134, 10, 0.14);

    --info:      #0095E0;
    --info-dark: #0078B8;
    --info-soft: rgba(0, 149, 224, 0.12);

    /* ── Bordas ── */
    --border-primary:   #1A3A5A;
    --border-secondary: #0A1E34;
    --border-light:     #1A3A5A;
    --border-dark:      #0A1E34;
    --border-neon:      rgba(0, 168, 232, 0.25);

    /* ── Sombras ── */
    --shadow-color:     rgba(0, 0, 0, 0.85);
    --shadow-neon:      0 0 18px rgba(0, 168, 232, 0.25);
    --shadow-neon-hover:0 0 32px rgba(0, 168, 232, 0.45);
    --shadow-metal:     0 4px 12px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(200, 220, 240, 0.08);
    --shadow-sm:        0 2px 4px var(--shadow-color);
    --shadow-md:        0 4px 8px var(--shadow-color);
    --shadow-lg:        0 8px 20px var(--shadow-color);
    --shadow-xl:        0 16px 40px var(--shadow-color);

    /* ── Gradientes reutilizáveis ── */
    --gradient-primary:   linear-gradient(180deg, var(--primary-light), var(--primary-dark));
    --gradient-surface:   linear-gradient(180deg, var(--bg-elevated), var(--bg-tertiary));
    --gradient-card:      linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary));
    --gradient-header:    linear-gradient(135deg, var(--bg-tertiary), var(--bg-elevated));
    --gradient-neon-line: linear-gradient(90deg, transparent, var(--neon-blue), var(--neon-cyan), var(--neon-blue), transparent);
    --gradient-logo:      linear-gradient(180deg, var(--metal-light) 0%, #FFFFFF 25%, var(--metal-mid) 50%, var(--metal-light) 75%, var(--metal-dark) 100%);

    /* ── Glows derivados (color-mix quando suportado, fallback rgba) ── */
    --glow-accent-sm:   rgba(0, 168, 232, 0.15);
    --glow-accent-md:   rgba(0, 168, 232, 0.25);
    --glow-accent-lg:   rgba(0, 168, 232, 0.45);
    --glow-primary-sm:  rgba(0, 112, 184, 0.12);
    --glow-primary-md:  rgba(0, 112, 184, 0.25);
    --glow-danger-sm:   rgba(192, 57, 43, 0.12);
    --glow-danger-md:   rgba(192, 57, 43, 0.35);
    --glow-success-sm:  rgba(13, 158, 106, 0.12);
    --glow-warning-sm:  rgba(212, 134, 10, 0.14);

    /* ── Overlays (fundos semi-transparentes) ── */
    --overlay-modal:    rgba(6, 14, 26, 0.95);
    --overlay-header:   rgba(6, 14, 26, 0.92);
    --overlay-footer:   rgba(6, 14, 26, 0.97);
    --overlay-form:     rgba(10, 22, 40, 0.80);
    --overlay-input:    rgba(6, 14, 26, 0.70);
    --overlay-input-focus: rgba(10, 22, 40, 0.90);
    --overlay-card-a:   rgba(16, 32, 64, 0.82);
    --overlay-card-b:   rgba(10, 22, 40, 0.98);
    --overlay-search:   rgba(10, 22, 40, 0.92);
    --overlay-search-focus: rgba(16, 32, 64, 0.96);
    --overlay-tooltip:  rgba(6, 14, 26, 0.94);
    --overlay-error-card: rgba(10, 22, 40, 0.85);

    /* ── Grid de fundo (pattern body::before) ── */
    --pattern-color: rgba(0, 112, 184, 0.04);
    --pattern-glow-l: rgba(0, 168, 232, 0.06);
    --pattern-glow-r: rgba(0, 96, 160, 0.06);

    /* ── Tipografia ── */
    --font-sans: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'Fira Code', monospace;
    --font-logo: 'Playfair Display', serif;
    --font-display: 'Rajdhani', var(--font-sans);

    /* ── Layout ── */
    --header-height: 68px;
    --transition: all 0.2s ease;
    --spacing-xs:  0.25rem;
    --spacing-sm:  0.5rem;
    --spacing-md:  1rem;
    --spacing-lg:  1.5rem;
    --spacing-xl:  2rem;
    --spacing-2xl: 3rem;

    /* ── Border radius ── */
    --radius-sm:  0.25rem;
    --radius-md:  0.375rem;
    --radius-lg:  0.625rem;
    --radius-xl:  0.875rem;
    --radius-2xl: 1rem;

    /* ── Botões ── */
    --btn-height:    2.25rem;
    --btn-height-sm: 1.75rem;
    --btn-height-lg: 2.75rem;
    --btn-padding-x: 1rem;
}

/* ============================================================
   CAMADA 3 — TEMA LIGHT (referência para override)
   Para ativar: adicione [data-theme="light"] no <html>
   ou sobrescreva :root via context processor Django.

   [data-theme="light"] {
       --bg-primary:   #F0F4F8;
       --bg-secondary: #FFFFFF;
       --bg-tertiary:  #E2EAF4;
       --bg-elevated:  #D0DCF0;
       --bg-card:      #FFFFFF;
       --bg-hover:     rgba(0, 112, 184, 0.08);
       --text-primary:   #0D1117;
       --text-secondary: #3A5A7A;
       --text-tertiary:  #6A8AAA;
       --text-muted:     #8AAEC8;
       --text-disabled:  #B0C8E0;
       --text-inverse:   #F0F4F8;
       --border-primary:   #C8DCF0;
       --border-secondary: #E2EAF4;
       --border-light:     #D4E4F4;
       --border-dark:      #B0C8E0;
       --border-neon:      rgba(0, 112, 184, 0.30);
       --shadow-color:     rgba(0, 60, 120, 0.12);
       --shadow-neon:      0 0 18px rgba(0, 112, 184, 0.18);
       --overlay-modal:    rgba(240, 244, 248, 0.95);
       --overlay-header:   rgba(255, 255, 255, 0.92);
       --overlay-footer:   rgba(240, 244, 248, 0.97);
       --overlay-form:     rgba(255, 255, 255, 0.90);
       --overlay-input:    rgba(255, 255, 255, 0.80);
       --overlay-input-focus: rgba(255, 255, 255, 1);
       --overlay-card-a:   rgba(255, 255, 255, 0.95);
       --overlay-card-b:   rgba(240, 244, 248, 0.98);
       --overlay-search:   rgba(255, 255, 255, 0.95);
       --overlay-search-focus: rgba(255, 255, 255, 1);
       --overlay-tooltip:  rgba(13, 17, 23, 0.92);
       --overlay-error-card: rgba(255, 255, 255, 0.90);
       --pattern-color: rgba(0, 112, 184, 0.03);
       --pattern-glow-l: rgba(0, 112, 184, 0.04);
       --pattern-glow-r: rgba(0, 80, 138, 0.04);
       --gradient-surface: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary));
       --gradient-card:    linear-gradient(180deg, var(--bg-secondary), var(--bg-tertiary));
       --gradient-header:  linear-gradient(135deg, var(--bg-tertiary), var(--bg-elevated));
   }
   ============================================================ */
    [data-theme="food-light"] {

        /* =========================
        BASE (warm neutral)
        ========================= */
        --bg-primary:   #F7F3EE;  /* fundo geral (creme leve) */
        --bg-secondary: #FFFFFF;  /* cards */
        --bg-tertiary:  #EFE7DE;  /* áreas internas */
        --bg-elevated:  #E4D8C8;  /* destaque */
        --bg-card:      #FFFFFF;
        --bg-hover:     rgba(166, 124, 82, 0.08);

        /* =========================
        TEXTO (café premium)
        ========================= */
        --text-primary:   #2C1F14;  /* marrom profundo */
        --text-secondary: #5A4332;
        --text-tertiary:  #8A6B52;
        --text-muted:     #A98A6E;
        --text-disabled:  #CBB7A3;
        --text-inverse:   #FFFFFF;

        /* =========================
        BRAND (gourmet)
        ========================= */
        --primary:       #8B5E3C;  /* café */
        --primary-dark:  #6B4423;
        --primary-light: #A67C52;
        --primary-soft:  rgba(139, 94, 60, 0.12);

        --accent:        #C89B3C;  /* dourado */
        --accent-soft:   rgba(200, 155, 60, 0.15);

        /* =========================
        ESTADOS (mais naturais)
        ========================= */
        --success:      #4F7A5A;  /* verde oliva */
        --success-dark: #3B5C44;
        --success-soft: rgba(79, 122, 90, 0.12);

        --danger:       #A94438;  /* vinho */
        --danger-dark:  #7A2F26;
        --danger-soft:  rgba(169, 68, 56, 0.12);

        --warning:      #D4A24C;  /* dourado queimado */
        --warning-dark: #A67C2A;
        --warning-soft: rgba(212, 162, 76, 0.16);

        --info:         #7C9A92;  /* verde acinzentado */
        --info-dark:    #5E7C74;
        --info-soft:    rgba(124, 154, 146, 0.14);

        /* =========================
        BORDAS (soft premium)
        ========================= */
        --border-primary:   #E2D6C8;
        --border-secondary: #EFE7DE;
        --border-light:     #F5EFE8;
        --border-dark:      #D3C2AF;
        --border-neon:      rgba(200, 155, 60, 0.35);

        /* =========================
        SOMBRAS (elegantes)
        ========================= */
        --shadow-color: rgba(60, 40, 20, 0.08);

        --shadow-sm: 0 1px 2px rgba(60, 40, 20, 0.06);
        --shadow-md: 0 4px 10px rgba(60, 40, 20, 0.08);
        --shadow-lg: 0 8px 24px rgba(60, 40, 20, 0.10);
        --shadow-xl: 0 16px 40px rgba(60, 40, 20, 0.12);

        --shadow-neon:       0 0 10px rgba(200, 155, 60, 0.18);
        --shadow-neon-hover: 0 0 18px rgba(200, 155, 60, 0.28);

        /* =========================
        OVERLAYS (glass quente)
        ========================= */
        --overlay-modal:    rgba(247, 243, 238, 0.95);
        --overlay-header:   rgba(255, 255, 255, 0.85);
        --overlay-footer:   rgba(247, 243, 238, 0.95);
        --overlay-form:     rgba(255, 255, 255, 0.90);
        --overlay-input:    rgba(255, 255, 255, 0.85);
        --overlay-input-focus: rgba(255, 255, 255, 1);

        --overlay-card-a:   rgba(255, 255, 255, 0.95);
        --overlay-card-b:   rgba(247, 243, 238, 0.98);

        --overlay-search:   rgba(255, 255, 255, 0.92);
        --overlay-search-focus: rgba(255, 255, 255, 1);

        --overlay-tooltip:  rgba(44, 31, 20, 0.95);

        /* =========================
        GRADIENTES (luxo discreto)
        ========================= */
        --gradient-primary: linear-gradient(180deg, #C89B3C, #8B5E3C);

        --gradient-surface: linear-gradient(180deg, #EFE7DE, #FFFFFF);
        --gradient-card:    linear-gradient(180deg, #FFFFFF, #F7F3EE);
        --gradient-header:  linear-gradient(135deg, #EFE7DE, #E4D8C8);

        --gradient-logo: linear-gradient(
            180deg,
            #FFF5D6 0%,
            #F1D08A 30%,
            #C89B3C 60%,
            #8B5E3C 100%
        );

        /* =========================
        GLOW (dourado elegante)
        ========================= */
        --glow-accent-sm: rgba(200, 155, 60, 0.12);
        --glow-accent-md: rgba(200, 155, 60, 0.22);
        --glow-accent-lg: rgba(200, 155, 60, 0.35);

        --glow-primary-sm: rgba(139, 94, 60, 0.10);
        --glow-primary-md: rgba(139, 94, 60, 0.20);

        /* =========================
        BACKGROUND PATTERN
        ========================= */
        --pattern-color: rgba(139, 94, 60, 0.03);
        --pattern-glow-l: rgba(200, 155, 60, 0.05);
        --pattern-glow-r: rgba(139, 94, 60, 0.04);
    }
/* ============================================================
   RESET E BASE
   ============================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    overflow-x: hidden;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* ============================================================
   UTILITÁRIOS (compat + consistência)
   ============================================================ */
.mb-0 { margin-bottom: 0 !important; }
.mt-4 { margin-top: var(--spacing-xl) !important; }
.mb-4 { margin-bottom: var(--spacing-xl) !important; }
.mt-5 { margin-top: var(--spacing-2xl) !important; }
.mb-5 { margin-bottom: var(--spacing-2xl) !important; }
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }
.text-muted   { color: var(--text-tertiary) !important; }
.text-danger  { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.opacity-50   { opacity: 0.6; }

/* ── Mini grid ── */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--spacing-md) * -1);
    margin-right: calc(var(--spacing-md) * -1);
}
.row > [class*="col-"] {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
    width: 100%;
}
@media (min-width: 768px) {
    .col-md-1  { width: 8.333333%; }
    .col-md-2  { width: 16.666667%; }
    .col-md-3  { width: 25%; }
    .col-md-4  { width: 33.333333%; }
    .col-md-5  { width: 41.666667%; }
    .col-md-6  { width: 50%; }
    .col-md-7  { width: 58.333333%; }
    .col-md-8  { width: 66.666667%; }
    .col-md-9  { width: 75%; }
    .col-md-10 { width: 83.333333%; }
    .col-md-11 { width: 91.666667%; }
    .col-md-12 { width: 100%; }
    .offset-md-1 { margin-left: 8.333333%; }
    .offset-md-2 { margin-left: 16.666667%; }
    .offset-md-3 { margin-left: 25%; }
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}
@media (max-width: 768px) {
    .container { padding: 0 var(--spacing-md); }
}

.form-text       { color: var(--text-tertiary); font-size: 0.75rem; margin-top: 0.25rem; }
.form-label      { display: block; margin-bottom: 0.35rem; color: var(--text-secondary); font-weight: 600; }
.invalid-feedback{ color: var(--danger); font-size: 0.75rem; margin-top: 0.25rem; }

/* ============================================================
   BACKGROUND PATTERN
   ============================================================ */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:
        linear-gradient(var(--pattern-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--pattern-color) 1px, transparent 1px),
        radial-gradient(circle at 15% 85%, var(--pattern-glow-l) 0%, transparent 40%),
        radial-gradient(circle at 85% 15%, var(--pattern-glow-r) 0%, transparent 40%);
    background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;
    pointer-events: none;
    z-index: -1;
}

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}
h1 { font-size: 1.5rem;  margin-bottom: var(--spacing-lg); }
h2 { font-size: 1.25rem; margin-bottom: var(--spacing-md); }
h3 { font-size: 1rem;    margin-bottom: var(--spacing-sm); }

/* ============================================================
   HEADER PRINCIPAL
   ============================================================ */
header {
    background: var(--overlay-header);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-neon);
    height: var(--header-height);
    padding: 0 var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-md), 0 1px 0 var(--glow-accent-sm);
}

.site-header .header-brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    min-width: 0;
}

.site-header .brand-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    text-decoration: none;
    min-width: 0;
}

.site-header .brand-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.3rem;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.site-header .brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1;
    min-width: 0;
}

.site-header .brand-title {
    font-family: var(--font-logo);
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    background: var(--gradient-logo);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
    filter: drop-shadow(0 0 8px var(--glow-accent-md));
    margin: 0;
}

.logo-sub {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--neon-blue);
    margin-top: -3px;
    opacity: 0.85;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.logo-sub::before,
.logo-sub::after {
    content: '';
    flex: 1;
    height: 1px;
    min-width: 12px;
}
.logo-sub::before { background: linear-gradient(90deg, transparent, var(--neon-blue)); }
.logo-sub::after  { background: linear-gradient(90deg, var(--neon-blue), transparent); }

/* ── Navegação principal ── */
header > nav {
    flex: 1;
    margin: 0 var(--spacing-lg);
}
header > nav > ul {
    display: flex;
    list-style: none;
    gap: 2px;
    height: var(--header-height);
}
header > nav > ul > li {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--header-height);
}
header > nav > ul > li > span {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: var(--transition);
    white-space: nowrap;
}
header > nav > ul > li > span::after {
    content: '▼';
    font-size: 0.55rem;
    opacity: 0.6;
    transition: transform 0.2s ease;
}
header > nav > ul > li:hover > span {
    background: var(--bg-hover);
    color: var(--neon-cyan);
}
header > nav > ul > li:hover > span::after {
    transform: rotate(180deg);
}

/* ── Submenu ── */
header > nav > ul > li > ul {
    position: absolute;
    top: calc(var(--header-height) - 2px);
    left: 0;
    min-width: 220px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), var(--shadow-neon);
    list-style: none;
    padding: var(--spacing-xs) 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: var(--transition);
    z-index: 1001;
    backdrop-filter: blur(8px);
}
header > nav > ul > li:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
header > nav > ul > li > ul > li > a {
    display: block;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition);
    border-left: 2px solid transparent;
}
header > nav > ul > li > ul > li > a:hover {
    background: var(--bg-hover);
    color: var(--neon-cyan);
    border-left-color: var(--neon-blue);
}
header > nav > ul > li > ul > li:not(:last-child) > a {
    border-bottom: 1px solid var(--border-light);
}

/* ── User Menu ── */
.site-header [data-user-menu] {
    position: relative;
    height: var(--header-height);
    display: flex;
    align-items: center;
}
.site-header [data-user-menu] > span {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}
.user-menu-greeting {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-theme-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.75rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: var(--primary-soft);
    border: 1px solid var(--glow-accent-sm);
    color: var(--text-primary);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}
.site-header [data-user-menu] > span::after {
    content: '▼';
    font-size: 0.55rem;
    opacity: 0.6;
}
.site-header [data-user-menu]:hover > span {
    border-color: var(--neon-blue);
    color: var(--neon-cyan);
}
.site-header [data-user-menu] > ul {
    position: absolute;
    top: calc(var(--header-height) - 2px);
    right: 0;
    min-width: 160px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    list-style: none;
    padding: var(--spacing-xs) 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: var(--transition);
    z-index: 1001;
}
.site-header [data-user-menu]:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.site-header [data-user-menu] > ul > li > a {
    display: block;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition);
}
.site-header [data-user-menu] > ul > li > a:hover {
    background: var(--bg-hover);
    color: var(--neon-cyan);
}
.theme-switcher-item {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}
.theme-switcher-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-xs);
}
.theme-switcher-actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}
.theme-switcher-actions form {
    margin: 0;
}
.theme-switcher-btn {
    border: 1px solid var(--border-primary);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: var(--transition);
}
.theme-switcher-btn:hover {
    border-color: var(--neon-blue);
    color: var(--neon-cyan);
}
.theme-switcher-btn.is-active {
    background: var(--gradient-primary);
    border-color: transparent;
    color: var(--text-inverse);
    box-shadow: var(--shadow-sm);
}
.site-header > div > a {
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.8125rem;
    transition: var(--transition);
}
.site-header > div > a:hover {
    border-color: var(--neon-blue);
    color: var(--neon-cyan);
}

/* ── Menu Toggle Mobile ── */
.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    background: var(--overlay-search);
    border: 1px solid var(--border-primary);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: var(--spacing-sm);
    transition: var(--transition);
}
.menu-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.menu-toggle-label {
    display: none;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.menu-toggle:hover {
    border-color: var(--border-neon);
    color: var(--neon-cyan);
    background: var(--glow-primary-sm);
}

/* ── Mobile Responsive Header ── */
@media (max-width: 992px) {
    .menu-toggle { display: block; }
    header {
        flex-wrap: wrap;
        padding: var(--spacing-sm) var(--spacing-md);
        height: auto;
        min-height: var(--header-height);
        gap: 0.75rem;
        align-items: stretch;
    }
    .site-header .header-brand {
        width: 100%;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        padding: 0.8rem 0.9rem;
        border-radius: 18px;
        background: linear-gradient(135deg, var(--overlay-search) 0%, var(--overlay-card-a) 100%);
        border: 1px solid var(--border-primary);
        box-shadow: var(--shadow-md);
    }
    .site-header .brand-link {
        flex: 1;
        min-width: 0;
        gap: 0.75rem;
    }
    .site-header .brand-copy {
        min-width: 0;
        gap: 0.15rem;
    }
    .site-header .brand-title {
        font-size: 1.05rem;
        letter-spacing: 0.08em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        filter: none;
    }
    .site-header .brand-logo {
        width: 40px;
        height: 40px;
        border-radius: 14px;
    }
    .logo-sub {
        font-size: 0.56rem;
        letter-spacing: 0.18em;
        color: var(--text-secondary);
        opacity: 0.9;
    }
    .logo-sub::before,
    .logo-sub::after {
        display: none;
    }
    .menu-toggle {
        min-width: auto;
        padding: 0 0.8rem;
        border-radius: 14px;
        background: linear-gradient(135deg, var(--primary-soft) 0%, var(--overlay-search) 100%);
    }
    .menu-toggle-label {
        display: inline-block;
    }
    header > nav {
        display: none;
        width: 100%;
        margin: 0;
        order: 3;
        background: linear-gradient(180deg, var(--overlay-card-a) 0%, var(--overlay-card-b) 100%);
        border: 1px solid var(--border-primary);
        padding: 0.5rem;
        border-radius: 20px;
        box-shadow: var(--shadow-lg);
    }
    header > nav.active { display: block; }
    header > nav > ul {
        flex-direction: column;
        height: auto;
        gap: 0.45rem;
    }
    header > nav > ul > li {
        height: auto;
        display: block;
    }
    header > nav > ul > li > span {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        min-height: 3rem;
        padding: 0.85rem 1rem;
        border-radius: 16px;
        background: var(--overlay-search);
        border: 1px solid var(--border-light);
        color: var(--text-primary);
        box-shadow: inset 0 1px 0 var(--glow-primary-sm);
    }
    header > nav > ul > li > ul {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        box-shadow: none;
        border: none;
        margin: 0.35rem 0 0;
        padding: 0.35rem 0 0.2rem 0.7rem;
        background: transparent;
    }
    header > nav > ul > li > ul.open { display: block; }
    header > nav > ul > li > ul > li > a {
        display: block;
        padding: 0.75rem 0.95rem;
        border-radius: 14px;
        margin-bottom: 0.35rem;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid transparent;
    }
    header > nav > ul > li > ul > li > a:hover {
        border-color: var(--border-neon);
    }
    .site-header [data-user-menu] {
        width: 100%;
        margin-left: 0;
        order: 2;
        flex-direction: column;
        align-items: stretch;
    }
    .site-header [data-user-menu] > span {
        width: 100%;
        justify-content: space-between;
        gap: var(--spacing-sm);
        flex-wrap: wrap;
        min-height: 3.2rem;
        padding: 0.85rem 1rem;
        border-radius: 18px;
        background: linear-gradient(135deg, var(--overlay-search) 0%, var(--primary-soft) 100%);
        box-shadow: var(--shadow-md);
    }
    .site-header [data-user-menu] > ul {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        width: 100%;
        box-shadow: var(--shadow-md);
        border: 1px solid var(--border-primary);
        background: linear-gradient(180deg, var(--overlay-card-a) 0%, var(--overlay-card-b) 100%);
        margin-top: 0.45rem;
        border-radius: 18px;
        padding: 0.45rem;
    }
    .site-header [data-user-menu] > ul.open { display: block; }
    .site-header [data-user-menu]:hover > ul {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .site-header [data-user-menu] > ul > li > a {
        padding: 0.8rem 0.95rem;
        border-radius: 14px;
    }
    .theme-switcher-item {
        margin: 0.2rem 0;
        padding: 0.9rem 0.95rem;
        border-radius: 16px;
        background: var(--overlay-search);
        border: 1px solid var(--border-light);
    }
    .theme-switcher-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.45rem;
    }
    .theme-switcher-actions form,
    .theme-switcher-btn {
        width: 100%;
    }
    .theme-switcher-btn {
        min-height: 2.4rem;
        padding: 0.45rem 0.6rem;
        border-radius: 12px;
    }
}
@media (max-width: 768px) {
    :root {
        --header-height: 56px;
        --btn-height: 2.5rem;
    }
    main  { padding: var(--spacing-md); }
    h1    { font-size: 1.25rem; }
    .logo-sub {
        display: none;
    }
    .site-header .header-brand {
        padding: 0.7rem 0.8rem;
    }
    .site-header .brand-title {
        font-size: 0.98rem;
    }
    .user-theme-badge {
        min-height: 1.65rem;
        font-size: 0.62rem;
    }
}
@media (max-width: 540px) {
    header {
        padding: 0.65rem;
    }
    .site-header .brand-title {
        font-size: 0.92rem;
        letter-spacing: 0.05em;
    }
    .theme-switcher-actions {
        grid-template-columns: 1fr;
    }
    .site-header [data-user-menu] > span {
        align-items: flex-start;
    }
    .user-menu-greeting {
        max-width: 100%;
        white-space: normal;
        line-height: 1.35;
    }
    .menu-toggle {
        min-width: 2.8rem;
        padding: 0;
    }
    .menu-toggle-label {
        display: none;
    }
    .site-header .header-brand,
    .site-header [data-user-menu] > span,
    .site-header [data-user-menu] > ul,
    header > nav {
        border-radius: 16px;
    }
    header > nav > ul > li > span,
    .site-header [data-user-menu] > ul > li > a,
    .theme-switcher-item {
        border-radius: 13px;
    }
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
body.dashboard-page {
    background:
        radial-gradient(circle at top left,  var(--glow-accent-sm), transparent 30%),
        radial-gradient(circle at top right, var(--glow-primary-sm), transparent 26%),
        linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

main {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-xl);
    flex: 1 1;
    width: 100%;
}
main.app-main {
    position: relative;
    padding-top: calc(var(--spacing-xl) + 0.35rem);
    padding-bottom: calc(var(--spacing-xl) + 0.5rem);
}
main.app-main::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 320px;
    background: linear-gradient(180deg, var(--glow-accent-sm) 0%, transparent 100%);
    pointer-events: none;
}
.content-shell {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    min-width: 0;
}
@media (max-width: 768px) {
    main.app-main {
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }
    .content-shell {
        gap: var(--spacing-md);
    }
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
    background: var(--overlay-footer);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-neon);
    padding: var(--spacing-lg) var(--spacing-xl);
    margin-top: 0;
    position: relative;
    flex-shrink: 0;
    overflow-x: hidden;
}
footer::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gradient-neon-line);
}
footer > div,
.footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}
.footer-left {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
}
footer p           { color: var(--text-tertiary); font-size: 0.75rem; }
footer ul          { display: flex; list-style: none; gap: var(--spacing-lg); flex-wrap: wrap; max-width: 100%; }
footer ul li a     { color: var(--text-tertiary); text-decoration: none; font-size: 0.75rem; }
footer ul li a:hover { color: var(--neon-cyan); }

/* ============================================================
   TABELAS
   ============================================================ */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    background: var(--bg-card);
}
table {
    min-width: 640px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-primary);
    margin: 1.5rem 0;
    border: 1px solid var(--border-primary);
    position: relative;
}
table::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--neon-blue), var(--neon-cyan), var(--neon-blue));
    box-shadow: 0 0 12px var(--glow-accent-md);
}
thead {
    background: var(--gradient-surface);
}
th {
    text-align: left;
    padding: 0.9rem 1.4rem;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--neon-blue);
    border-bottom: 1px solid var(--glow-accent-md);
    font-family: var(--font-display);
    vertical-align: middle;
    height: auto;
}
td {
    padding: 0.9rem 1.4rem;
    border-bottom: 1px solid var(--border-primary);
    color: var(--text-secondary);
    font-size: 0.9rem;
    background: transparent;
    transition: var(--transition);
    vertical-align: middle;
    height: auto;
}
tr:last-child td { border-bottom: none; }
tr:hover td {
    background: var(--bg-hover);
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .table-wrapper,
    .dashboard-premium .notification-table-wrapper {
        overflow: visible;
        border: none;
        background: transparent;
    }
    .responsive-table {
        min-width: 0;
        margin: 0;
        border: none;
        box-shadow: none;
        background: transparent;
    }
    .responsive-table::before,
    .responsive-table thead {
        display: none;
    }
    .responsive-table,
    .responsive-table tbody,
    .responsive-table tr,
    .responsive-table td {
        display: block;
        width: 100%;
    }
    .responsive-table tbody {
        display: grid;
        gap: var(--spacing-md);
    }
    .responsive-table tr {
        position: relative;
        overflow: hidden;
        padding: var(--spacing-md);
        border-radius: var(--radius-xl);
        border: 1px solid var(--border-primary);
        background: linear-gradient(180deg, var(--overlay-card-a) 0%, var(--overlay-card-b) 100%);
        box-shadow: var(--shadow-md);
    }
    .responsive-table tr::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--gradient-neon-line);
        opacity: 0.7;
    }
    .responsive-table td {
        display: grid;
        grid-template-columns: minmax(108px, 36%) minmax(0, 1fr);
        gap: 0.75rem;
        align-items: start;
        margin: 0;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--border-light);
        background: transparent !important;
        min-width: 0;
    }
    .responsive-table td:first-child {
        padding-top: 0;
    }
    .responsive-table td:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }
    .responsive-table td::before {
        content: attr(data-label);
        color: var(--text-tertiary);
        font-size: 0.68rem;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-family: var(--font-display);
    }
    .responsive-table td > * {
        min-width: 0;
    }
    .responsive-table td[data-card-role="actions"],
    .responsive-table td.actions-cell {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: stretch;
    }
    .responsive-table td[data-card-role="actions"]::before,
    .responsive-table td.actions-cell::before {
        flex-basis: 100%;
        margin-bottom: 0.15rem;
    }
    .responsive-table td[data-card-role="actions"] a,
    .responsive-table td[data-card-role="actions"] button,
    .responsive-table td[data-card-role="actions"] form,
    .responsive-table td.actions-cell a,
    .responsive-table td.actions-cell button,
    .responsive-table td.actions-cell form {
        flex: 1 1 calc(50% - 0.25rem);
        margin: 0;
    }
    .responsive-table td[data-card-role="actions"] form .btn,
    .responsive-table td[data-card-role="actions"] form button,
    .responsive-table td.actions-cell form .btn,
    .responsive-table td.actions-cell form button {
        width: 100%;
    }
    .responsive-table tr.responsive-empty-row {
        padding: 1.1rem 1rem;
    }
    .responsive-table tr.responsive-empty-row::before {
        display: none;
    }
    .responsive-table tr.responsive-empty-row td {
        display: block;
        padding: 0;
        border: 0;
        text-align: center;
        color: var(--text-secondary);
    }
    .responsive-table tr.responsive-empty-row td::before {
        content: none;
    }
}
@media (max-width: 480px) {
    .responsive-table td {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }
    .responsive-table td[data-card-role="actions"] a,
    .responsive-table td[data-card-role="actions"] button,
    .responsive-table td[data-card-role="actions"] form,
    .responsive-table td.actions-cell a,
    .responsive-table td.actions-cell button,
    .responsive-table td.actions-cell form {
        flex-basis: 100%;
    }
}

/* ── Treinamentos ── */
.training-filter {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--border-primary);
    background: var(--bg-card);
}

.training-filter-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.training-section {
    margin-bottom: 1.75rem;
}

.training-section-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border-primary);
}

.training-section-header::before {
    width: 0.42rem;
    height: 1.65rem;
    border-radius: 999px;
    background: var(--primary);
    content: "";
}

.training-section-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0;
}

.training-section-subtitle {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.training-table {
    table-layout: fixed;
}

.training-preview-col {
    width: 132px;
}

.training-table th:first-child {
    width: 132px;
}

.training-table td:first-child {
    width: 132px;
    max-width: 132px;
    padding: 8px 10px;
    overflow: hidden;
}

.training-table td {
    vertical-align: middle;
}

.training-table-thumb {
    position: relative;
    display: block;
    width: 112px;
    max-width: 112px;
    height: 63px;
    max-height: 63px;
    overflow: hidden;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-secondary);
}

.training-table-thumb-video {
    width: 112px;
    max-width: 112px;
    height: 63px;
    max-height: 63px;
}

.training-table-thumb img {
    display: block;
    width: 100%;
    max-width: 112px;
    height: 100%;
    max-height: 63px;
    object-fit: cover;
}

.training-table-thumb-placeholder,
.training-table-icon {
    display: grid;
    place-items: center;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-weight: 700;
}

.training-table-thumb-placeholder {
    width: 100%;
    height: 100%;
    font-size: 1.25rem;
}

.training-table-icon {
    width: 34px;
    height: 34px;
    font-size: 1rem;
}

.training-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 32px;
    height: 22px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    background: rgba(18, 18, 18, 0.82);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.38);
    transform: translate(-50%, -50%);
}

.training-play::before {
    width: 0;
    height: 0;
    margin-left: 2px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #fff;
    content: "";
}

.training-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 1.25rem;
    align-items: start;
}

.training-detail-content,
.training-detail-summary,
.training-views-panel,
.training-delete-card {
    border: 1px solid var(--border-primary);
}

.training-description {
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

.training-description p {
    margin-top: 0;
}

.training-video-player {
    width: 100%;
    max-height: 520px;
    border-radius: 8px;
    background: #000;
}

.training-url-block {
    margin-top: 1rem;
}

.training-progress-form {
    margin-top: 1.5rem;
}

.training-views-panel {
    margin-top: 1.5rem;
}

.training-form {
    border: 1px solid var(--border-primary);
}

.training-delete-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

@media (max-width: 860px) {
    .training-detail-layout {
        grid-template-columns: 1fr;
    }

    .training-table th:first-child,
    .training-table td:first-child {
        width: 104px;
        max-width: 104px;
    }

    .training-table-thumb {
        width: 88px;
        max-width: 88px;
        height: 50px;
        max-height: 50px;
    }

    .training-table-thumb-video {
        width: 88px;
        max-width: 88px;
        height: 50px;
        max-height: 50px;
    }

    .training-table-thumb img {
        max-width: 88px;
        max-height: 50px;
    }
}

/* ── Paginação ── */
.pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-top: var(--spacing-md);
    padding: var(--spacing-md) 0 0;
}
.pagination-summary { color: var(--text-secondary); font-size: 0.875rem; }
.pagination-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.pagination-link,
.pagination-ellipsis {
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.85rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.875rem;
    border: 1px solid var(--border-primary);
    background: var(--bg-card);
    color: var(--text-primary);
    transition: all 0.2s ease;
}
.pagination-link:hover {
    border-color: var(--border-neon);
    color: var(--neon-cyan);
    transform: translateY(-1px);
}
.pagination-link.is-active {
    background: linear-gradient(135deg, var(--glow-primary-md), var(--glow-accent-sm));
    border-color: var(--glow-accent-md);
    color: var(--text-primary);
    font-weight: 700;
}
.pagination-ellipsis { color: var(--text-secondary); background: transparent; }
@media (max-width: 768px) {
    .pagination-bar { flex-direction: column; align-items: stretch; }
    .pagination-nav  { justify-content: center; }
}

/* ============================================================
   FORMULÁRIOS
   ============================================================ */
.app-form {
    background: var(--overlay-form);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl), 0 0 0 1px var(--border-neon);
    max-width: 800px;
    width: 100%;
    margin: var(--spacing-xl) auto;
    border: 1px solid var(--border-neon);
    position: relative;
}
.app-form::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
    box-shadow: 0 0 8px var(--glow-accent-md);
}
.app-form > div:not(.form-actions) {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-light);
}
label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--neon-blue);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--font-display);
}
input, select, textarea {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-family: var(--font-sans);
    transition: var(--transition);
    background: var(--overlay-input);
    color: var(--text-primary);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--neon-blue);
    box-shadow: 0 0 0 2px var(--glow-accent-sm), 0 0 16px var(--glow-accent-sm);
    background: var(--overlay-input-focus);
}
input:hover, select:hover, textarea:hover {
    border-color: var(--glow-accent-md);
}
input[type="checkbox"],
input[type="radio"] {
    width: auto;
    min-height: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}
.form-grid .form-group { margin-bottom: 0; }
.form-actions {
    padding: var(--spacing-lg);
    background: var(--bg-tertiary);
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    border-top: 1px solid var(--border-light);
}
.form-group { margin-bottom: var(--spacing-lg); }
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 2px var(--glow-danger-sm) !important;
}
.error-feedback {
    margin-top: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--danger-soft);
    border-left: 3px solid var(--danger);
    border-radius: var(--radius-sm);
}
.error-message {
    display: block;
    color: var(--danger);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
}
.help-text {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: 0.7rem;
    color: var(--text-tertiary);
}
.required { color: var(--danger); margin-left: 2px; font-weight: bold; }

/* ── Erros gerais ── */
.alert-error {
    padding: 1rem 1.5rem;
    margin-bottom: var(--spacing-lg);
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid var(--glow-danger-sm);
    border-radius: var(--radius-lg);
}
.alert-error ul     { margin: var(--spacing-xs) 0 0 var(--spacing-lg); padding: 0; }
.alert-error li     { margin-bottom: var(--spacing-xs); }
.alert-error strong { display: block; margin-bottom: var(--spacing-xs); color: var(--danger); }

/* ============================================================
   PADRONIZAÇÃO DE BOTÕES E LINKS-BOTÃO
   ============================================================ */
button,
.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-success,
.btn-warning,
.btn-info,
input[type="submit"],
input[type="button"],
a.btn,
table td a,
.action-btn,
form a,
a[href*="cancelar"],
a[href*="voltar"],
.quick-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--btn-height);
    padding: 0 var(--btn-padding-x);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    background-origin: border-box;
    background-clip: border-box;
}
button::before,
.btn::before,
.btn-primary::before,
.btn-secondary::before,
.btn-danger::before,
.btn-success::before,
.btn-warning::before,
.btn-info::before,
input[type="submit"]::before,
table td a::before,
.action-btn::before {
    display: inline-block;
    font-size: 0.75rem;
    line-height: 1;
}

/* ── Primário ── */
.btn-primary,
button[type="submit"]:not(.btn-secondary) {
    background: var(--gradient-primary);
    color: var(--metal-light);
    border: 1px solid var(--border-neon);
    box-shadow: 0 0 14px var(--glow-primary-sm);
}

/* ── Secundário ── */
.btn-secondary,
form a,
a[href*="cancelar"],
a[href*="voltar"] {
    background: var(--gradient-surface);
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
}

/* ── Tabela ── */
table td a,
.action-btn {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
    min-height: 2rem;
}

/* ── Danger ── */
.btn-danger,
a[href*="excluir"] {
    background: linear-gradient(180deg, var(--danger), var(--danger-dark));
    color: var(--metal-light);
    border: 1px solid var(--glow-danger-sm);
}

/* ── Success ── */
.btn-success {
    background: linear-gradient(180deg, var(--success), var(--success-dark));
    color: var(--metal-light);
    border: 1px solid var(--glow-success-sm);
}

/* ── Warning ── */
.btn-warning {
    background: linear-gradient(180deg, var(--warning), var(--warning-dark));
    color: var(--text-inverse);
    border: 1px solid var(--glow-warning-sm);
}

/* ── Info ── */
.btn-info {
    background: linear-gradient(180deg, var(--info), var(--info-dark));
    color: var(--metal-light);
    border: 1px solid var(--info-soft);
}

/* ── Tamanhos ── */
.btn-sm {
    min-height: var(--btn-height-sm);
    padding: 0 0.75rem;
    font-size: 0.625rem;
}
.btn-lg {
    min-height: var(--btn-height-lg);
    padding: 0 1.5rem;
    font-size: 0.875rem;
}

/* ── Hover geral ── */
button:hover,
.btn:hover,
input[type="submit"]:hover,
a.btn:hover,
table td a:hover,
.action-btn:hover,
form a:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-neon);
    border-color: var(--glow-accent-md);
    color: var(--neon-cyan);
}
.btn-primary:hover,
button[type="submit"]:not(.btn-secondary):hover {
    color: var(--text-primary);
    box-shadow: 0 0 24px var(--glow-accent-md);
}
table td a:hover,
.action-btn:hover {
    background: var(--primary-soft);
    border-color: var(--neon-blue);
    color: var(--neon-cyan);
}
.btn-danger:hover,
a[href*="excluir"]:hover {
    box-shadow: 0 0 20px var(--glow-danger-md);
    border-color: var(--danger);
    color: var(--text-primary);
}
button:active, .btn:active, a:active { transform: translateY(0) !important; }

/* ── Grupos de botões ── */
.form-actions,
.actions-links,
.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}
.form-actions button,
.form-actions .btn,
.form-actions a,
.actions-links button,
.actions-links .btn,
.actions-links a,
.action-buttons button,
.action-buttons .btn,
.action-buttons a { min-height: var(--btn-height); }

/* ── Mobile ── */
@media (max-width: 768px) {
    .app-form {
        margin: var(--spacing-lg) auto;
        padding: var(--spacing-lg);
    }
    .app-form > div:not(.form-actions) {
        padding: var(--spacing-md);
    }
    .form-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .form-actions .btn,
    .form-actions button,
    .form-actions a {
        width: 100%;
    }
    button, .btn, input[type="submit"], a.btn, .action-btn {
        min-height: 2.5rem;
        padding: 0 1rem;
        font-size: 0.75rem;
    }
    th,
    td {
        padding: 0.75rem 0.85rem;
    }
    th {
        font-size: 0.68rem;
    }
    td {
        font-size: 0.82rem;
    }
    table td a { min-height: 2rem; padding: 0 0.5rem; font-size: 0.625rem; }
    @media (max-width: 480px) {
        table td a span,
        table td a:not([href*="excluir"]):not([href*="editar"]):not([href*="ver"]) { display: none; }
        table td a { padding: 0 0.5rem; min-width: 2rem; }
        table td a::before { margin-right: 0; font-size: 0.875rem; }
    }
}

/* ============================================================
   CARDS
   ============================================================ */
.card, .dashboard-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-primary);
    position: relative;
    overflow: hidden;
}
.card::after, .dashboard-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: var(--gradient-neon-line);
    transform: translateX(-100%);
    animation: borderFlow 4s ease-in-out infinite;
}
@keyframes borderFlow {
    0%   { transform: translateX(-100%); opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}
.card-header {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-primary);
    font-weight: 600;
}
.card-body { padding: var(--spacing-lg); }
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}

/* ── Stats ── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}
.stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: var(--transition);
}
.stat-card:hover {
    border-color: var(--neon-blue);
    transform: translateY(-3px);
}
.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--neon-cyan);
    margin-bottom: var(--spacing-xs);
}
.stat-label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Welcome ── */
.welcome-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}
.welcome-card h2 { margin-bottom: var(--spacing-xs); }
.welcome-card p  { color: var(--text-secondary); }

/* ── Quick Actions ── */
.quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin: var(--spacing-md) 0;
}

/* ============================================================
   PAGE HEADER / BREADCRUMB / INFO GRID
   ============================================================ */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    margin: var(--spacing-lg) 0 var(--spacing-md);
}
.page-header-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-lg);
    width: 100%;
}
.page-header-left {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: var(--spacing-xs);
}
.page-header-right {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    min-width: 0;
    margin-left: auto;
}
.page-header-right .action-buttons {
    justify-content: flex-end;
}
.page-header-left h1 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    line-height: 1.1;
}
.page-breadcrumb {
    margin-top: var(--spacing-xs);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    color: var(--text-tertiary);
    font-size: 0.75rem;
}
.page-breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.page-breadcrumb a:hover {
    color: var(--neon-cyan);
    border-bottom-color: var(--glow-accent-md);
}
.page-breadcrumb span { color: var(--text-tertiary); }
.page-breadcrumb .page-header-right {
    margin-left: auto;
    max-width: 100%;
}
.status-bar {
    margin: var(--spacing-md) 0 var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    background: var(--overlay-form);
    backdrop-filter: blur(10px);
}
.status-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
}
.status-reason { color: var(--text-secondary); font-size: 0.85rem; }
.info-grid  { display: grid; gap: var(--spacing-sm); }
.info-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-secondary);
}
.info-row:last-child { border-bottom: none; }
.info-label {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-family: var(--font-display);
}
.info-value { color: var(--text-primary); font-size: 0.9rem; overflow-wrap: anywhere; }
.color-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid var(--border-secondary);
    margin-right: var(--spacing-sm);
    vertical-align: -2px;
    box-shadow: 0 0 0 1px var(--shadow-color) inset;
}
@media (max-width: 768px) {
    .page-header-content { flex-direction: column; align-items: stretch; }
    .page-header-left {
        width: 100%;
    }
    .page-breadcrumb {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }
    .page-breadcrumb .page-header-right {
        width: 100%;
        margin-left: 0;
        margin-top: var(--spacing-sm);
    }
    .page-header-right,
    .page-header-right .action-buttons {
        width: 100%;
    }
    .page-header-right .action-buttons > * {
        flex: 1 1 100%;
    }
    .status-bar {
        padding: var(--spacing-md);
    }
    .info-row { grid-template-columns: 1fr; gap: var(--spacing-xs); }
}

/* ============================================================
   DETAIL PAGES
   ============================================================ */
.detail-page {
    margin-top: clamp(1rem, 2vw, 1.5rem);
}
.detail-page .page-header {
    margin: 0 0 1rem;
    padding: 1.5rem;
    border-radius: 24px;
    border: 1px solid var(--border-primary);
    background:
        radial-gradient(circle at top right, var(--glow-accent-sm) 0%, transparent 32%),
        linear-gradient(180deg, var(--overlay-card-a) 0%, var(--overlay-card-b) 100%);
    box-shadow: var(--shadow-lg);
}
.detail-page .page-header-content {
    align-items: flex-end;
    gap: 1.25rem;
}
.detail-page .page-header-left {
    gap: 0.85rem;
}
.detail-page .page-header-left h1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
}
.detail-page .page-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
}
.detail-page .page-breadcrumb > a {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border-secondary);
    background: var(--overlay-search);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.82rem;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.detail-page .page-breadcrumb > a:hover {
    color: var(--text-primary);
    border-color: var(--glow-accent-md);
    background: var(--overlay-modal);
}
.detail-page .page-header-right {
    margin-left: auto;
}
.detail-page .page-header-right .action-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}
.detail-page .page-header-right .action-buttons > * {
    flex: 0 0 auto;
}
.detail-page .page-header-right .btn,
.detail-page .section-header .btn,
.detail-page .section-header .action-buttons > * {
    min-height: 2.7rem;
    border-radius: 999px;
}
.detail-page .status-bar {
    margin: 0 0 1.15rem;
    padding: 1rem 1.1rem;
    border-radius: 20px;
    border: 1px solid var(--border-primary);
    background: linear-gradient(180deg, var(--overlay-card-a) 0%, var(--overlay-search) 100%);
    box-shadow: var(--shadow-md);
}
.detail-page .status-item {
    gap: 0.65rem;
}
.detail-page .status-reason {
    padding-left: 0.15rem;
}
.detail-page .dashboard-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    margin: 0 0 1.25rem;
}
.detail-page .dashboard-card,
.detail-page .card {
    padding: 0;
    border-radius: 22px;
    background: linear-gradient(180deg, var(--overlay-card-a) 0%, var(--overlay-card-b) 100%);
    border-color: var(--border-primary);
    box-shadow: var(--shadow-lg);
}
.detail-page .dashboard-card::after,
.detail-page .card::after {
    display: none;
}
.detail-page .card-header {
    padding: 1.15rem 1.25rem 0.4rem;
    background: transparent;
    border-bottom: 0;
}
.detail-page .card-header h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.25;
}
.detail-page .card-body {
    padding: 0 1.25rem 1.2rem;
}
.detail-page .info-grid {
    gap: 0.1rem;
}
.detail-page .info-row {
    grid-template-columns: minmax(120px, 140px) 1fr;
    align-items: start;
    gap: 1rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border-light);
}
.detail-page .info-label {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
}
.detail-page .info-value {
    font-size: 0.95rem;
    line-height: 1.6;
}
.detail-page .info-value strong {
    color: var(--text-primary);
}
.detail-page .dashboard-card img,
.detail-page .card img {
    border-radius: 16px;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}
.detail-page .section-header {
    margin: 1.5rem 0 0.9rem;
    padding: 0 0.1rem;
}
.detail-page .section-header h2 {
    font-size: 1.08rem;
}
.detail-page .table-wrapper {
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--border-primary);
    background: linear-gradient(180deg, var(--overlay-card-a) 0%, var(--overlay-card-b) 100%);
    box-shadow: var(--shadow-md);
}
.detail-page .table-wrapper table {
    margin: 0;
}
.detail-page .table-wrapper thead th {
    background: var(--overlay-modal);
}
.detail-page .table-wrapper tbody tr:hover td {
    background: var(--glow-accent-sm);
}
@media (max-width: 900px) {
    .detail-page .page-header {
        padding: 1.25rem;
    }
    .detail-page .page-header-content {
        flex-direction: column;
        align-items: stretch;
    }
    .detail-page .page-header-right {
        width: 100%;
        margin-left: 0;
    }
    .detail-page .page-header-right .action-buttons {
        justify-content: stretch;
        width: 100%;
    }
    .detail-page .page-header-right .action-buttons > * {
        flex: 1 1 calc(50% - 0.375rem);
    }
}
@media (max-width: 640px) {
    .detail-page .page-header {
        padding: 1.05rem;
        border-radius: 20px;
    }
    .detail-page .page-header-left h1 {
        font-size: 1.45rem;
    }
    .detail-page .page-breadcrumb {
        flex-direction: column;
        align-items: flex-start;
    }
    .detail-page .page-header-right .action-buttons > * {
        flex: 1 1 100%;
    }
    .detail-page .status-bar {
        padding: 0.9rem 0.95rem;
        border-radius: 18px;
    }
    .detail-page .dashboard-grid {
        grid-template-columns: 1fr;
    }
    .detail-page .card-header {
        padding: 1rem 1rem 0.35rem;
    }
    .detail-page .card-body {
        padding: 0 1rem 1rem;
    }
    .detail-page .info-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
        padding: 0.8rem 0;
    }
    .detail-page .table-wrapper {
        border-radius: 18px;
    }
}

/* ============================================================
   ALERTAS
   ============================================================ */
.alert, .flash-message, .messages > div {
    padding: 1rem 1.5rem;
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: slideIn 0.3s ease;
    border: 1px solid transparent;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}
@keyframes slideIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.flash-message::after, .alert::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--neon-blue), transparent);
    animation: loading 2s linear infinite;
}
@keyframes loading {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.alert-success, .flash-message.flash-success, .messages > .success {
    background: var(--success-soft);
    color: var(--success);
    border-color: var(--glow-success-sm);
}
.alert-error, .alert-danger, .flash-message.flash-error, .messages > .error {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: var(--glow-danger-sm);
}
.alert-warning, .messages > .warning {
    background: var(--warning-soft);
    color: var(--warning);
    border-color: var(--glow-warning-sm);
}
.alert-info, .messages > .info {
    background: var(--info-soft);
    color: var(--info);
    border-color: var(--glow-accent-sm);
}
.alert button { background: none; border: none; font-size: 1.25rem; cursor: pointer; color: inherit; opacity: 0.6; }
.alert button:hover { opacity: 1; }

/* ============================================================
   BADGES
   ============================================================ */
.status-badge, .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid transparent;
    font-family: var(--font-display);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(6px);
}
.badge::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: linear-gradient(45deg, transparent, var(--glow-accent-sm), transparent);
    transform: rotate(45deg);
    animation: shine 5s linear infinite;
}
@keyframes shine {
    0%   { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}
.status-active, .status-success, .badge-success {
    background: var(--success-soft);
    color: var(--success);
    border-color: var(--glow-success-sm);
}
.status-pending, .badge-warning {
    background: var(--warning-soft);
    color: var(--warning);
    border-color: var(--glow-warning-sm);
}
.status-inactive, .status-blocked, .status-error, .badge-danger {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: var(--glow-danger-sm);
}
.badge-info {
    background: var(--info-soft);
    color: var(--info);
    border-color: var(--info-soft);
}
.badge-purple {
    background: rgba(128, 0, 255, 0.18);
    color: #C77DFF;
    border-color: rgba(128, 0, 255, 0.5);
}
.badge-cyan {
    background: rgba(34, 211, 238, 0.18);
    color: #67E8F9;
    border-color: rgba(34, 211, 238, 0.45);
}
.badge-blue {
    background: rgba(59, 130, 246, 0.18);
    color: #93C5FD;
    border-color: rgba(59, 130, 246, 0.45);
}
.badge-pink {
    background: rgba(236, 72, 153, 0.18);
    color: #F9A8D4;
    border-color: rgba(236, 72, 153, 0.45);
}
.badge-orange {
    background: rgba(249, 115, 22, 0.18);
    color: #FDBA74;
    border-color: rgba(249, 115, 22, 0.45);
}
.badge-teal {
    background: rgba(20, 184, 166, 0.18);
    color: #5EEAD4;
    border-color: rgba(20, 184, 166, 0.45);
}
.badge-neutral {
    background: rgba(148, 163, 184, 0.18);
    color: #CBD5E1;
    border-color: rgba(148, 163, 184, 0.4);
}
.badge-gold {
    background: rgba(234, 179, 8, 0.18);
    color: #FDE68A;
    border-color: rgba(234, 179, 8, 0.45);
}
.super-admin-badge {
    background: var(--primary-soft);
    color: var(--neon-cyan);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    font-weight: 600;
    margin-left: var(--spacing-xs);
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb {
    background: var(--gradient-surface);
    border-radius: 4px;
    border: 2px solid var(--bg-primary);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--neon-blue), var(--neon-cyan));
    box-shadow: 0 0 8px var(--glow-accent-md);
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
    header, footer, nav, .quick-actions, .btn, button { display: none !important; }
    body, main { background: white; color: black; margin: 0; padding: 0; }
}

/* ============================================================
   LOGIN
   ============================================================ */
.login-container {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
}
.login-card {
    background: linear-gradient(180deg, var(--overlay-card-a) 0%, var(--overlay-card-b) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-primary);
    border-radius: 26px;
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    animation: cardAppear 0.6s ease;
}
@keyframes cardAppear {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.login-header {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}
.login-header h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.login-subtitle { color: var(--text-muted); font-size: 0.95rem; }
.login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.login-form .form-group {
    padding: 0;
    border: 0;
    background: transparent;
}
.login-form .alert {
    margin-bottom: 0;
}
.login-button {
    width: 100%;
    min-height: 3rem;
    padding: 0 1.2rem;
    background: linear-gradient(135deg, var(--primary), var(--neon-blue));
    border: none;
    border-radius: 999px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}
.login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px var(--glow-accent-lg);
}

/* ============================================================
   DASHBOARD
   ============================================================ */
.dashboard-page-shell {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.dashboard { width: 100%; }
.dashboard-header { margin-bottom: 2rem; }
.dashboard-header h1 { font-size: 28px; margin-bottom: 4px; }
.tenant-label { color: var(--text-secondary); }
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.2rem;
    margin-bottom: 2rem;
}
.kpi-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    padding: 1.4rem;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}
.kpi-card:hover {
    border-color: var(--glow-accent-md);
    transform: translateY(-3px);
}
.kpi-card span  { font-size: 13px; color: var(--text-secondary); }
.kpi-card strong{ font-size: 28px; margin-top: 6px; color: var(--neon-cyan); }
.plan-info { display: flex; flex-direction: column; gap: 12px; }
.plan-row  { display: flex; justify-content: space-between; font-size: 14px; }
.dashboard-table { width: 100%; border-collapse: collapse; }
.dashboard-table thead { background: var(--bg-tertiary); }
.dashboard-table th { text-align: left; padding: 10px; font-size: 13px; color: var(--text-secondary); }
.dashboard-table td { padding: 10px; border-top: 1px solid var(--border-secondary); }
.empty { text-align: center; color: var(--text-secondary); }

/* ============================================================
   ACTION BUTTONS (tabelas)
   ============================================================ */
.action-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: nowrap;
}
table td.actions {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    width: 1%;
    white-space: nowrap;
}
.inline-form {
    display: inline-flex;
    margin: 0; padding: 0;
    background: none; box-shadow: none; border: none;
}
.inline-form::before { display: none; }

/* ============================================================
   TOOLTIPS
   ============================================================ */
[data-tooltip] { position: relative; }
[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.45rem 0.9rem;
    background: var(--bg-elevated);
    color: var(--neon-cyan);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    border: 1px solid var(--border-neon);
    box-shadow: var(--shadow-neon);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    pointer-events: none;
    z-index: 1000;
    text-transform: uppercase;
    font-family: var(--font-display);
}
[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}

/* ============================================================
   MODAL
   ============================================================ */
.modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--overlay-modal);
    backdrop-filter: blur(12px);
    z-index: 1050;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.modal.show { display: flex !important; opacity: 1; }
.modal-dialog {
    position: relative;
    width: auto;
    max-width: 600px;
    margin: 1.75rem auto;
    pointer-events: none;
}
.modal.show .modal-dialog { animation: modalSlideIn 0.3s ease-out; }
@keyframes modalSlideIn {
    from { transform: translateY(-30px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-neon);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl), 0 0 40px var(--glow-accent-md);
    overflow: hidden;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: var(--gradient-header);
    border-bottom: 2px solid var(--border-neon);
}
.modal-header .modal-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--neon-cyan);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-display);
}
.modal-header .btn-close {
    background: none; border: none;
    font-size: 1.5rem; line-height: 1;
    color: var(--text-secondary);
    cursor: pointer; padding: 0;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md);
    transition: var(--transition);
}
.modal-header .btn-close:hover {
    background: var(--danger-soft);
    color: var(--danger);
    transform: none;
}
.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1.5rem;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-primary);
}
.modal-footer button,
.modal-footer .btn { margin: 0; min-height: 2.25rem; }
.modal-body::-webkit-scrollbar { width: 6px; }
.modal-body::-webkit-scrollbar-track { background: var(--bg-primary); border-radius: 3px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--neon-blue); border-radius: 3px; }
@media (max-width: 576px) {
    .modal-dialog { margin: 0.5rem; max-width: calc(100% - 1rem); }
    .modal-body   { padding: 1rem; max-height: calc(100vh - 150px); }
    .modal-header, .modal-footer { padding: 0.75rem 1rem; }
}

/* ============================================================
   UX IMPROVEMENTS
   ============================================================ */

/* ── Form Header ── */
.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--border-primary);
}
.form-header-content { display: flex; flex-direction: column; gap: 0.5rem; }
.form-title { font-size: 1.75rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.breadcrumb-tenant {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-secondary);
    max-width: fit-content;
}
.tenant-icon  { font-size: 1rem; opacity: 0.7; }
.tenant-name  { color: var(--accent); font-weight: 500; }
@media (max-width: 768px) {
    .form-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* ── Form Errors ── */
.form-errors-container { margin-bottom: 2rem; }
.form-errors-container .alert {
    background: var(--danger-soft);
    border: 1px solid var(--danger);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}
.alert-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--danger);
    margin: 0 0 1rem 0;
}
.non-field-errors,
.field-errors { display: flex; flex-direction: column; gap: 0.75rem; }
.field-error-group {
    background: var(--danger-soft);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    border-left: 3px solid var(--danger);
}
.field-error-label { display: block; margin-bottom: 0.5rem; color: var(--text-primary); font-weight: 500; }
.field-error-label strong { color: var(--danger); }
.error-item { display: flex; align-items: flex-start; gap: 0.5rem; color: var(--text-secondary); font-size: 0.95rem; }
.error-bullet { color: var(--danger); font-weight: bold; flex-shrink: 0; }

input.field-with-error,
textarea.field-with-error,
select.field-with-error {
    border-color: var(--danger) !important;
    background-color: var(--danger-soft);
}
input.field-with-error:focus,
textarea.field-with-error:focus,
select.field-with-error:focus {
    border-color: var(--danger) !important;
    box-shadow: 0 0 8px var(--glow-danger-sm);
}

/* ── Breadcrumb ── */
.breadcrumb-container { margin-bottom: 1.5rem; }
.breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center;
    list-style: none; padding: 0; margin: 0; gap: 0.25rem;
}
.breadcrumb-item { display: flex; align-items: center; }
.breadcrumb-item:not(:last-child)::after { content: '/'; margin: 0 0.5rem; color: var(--text-tertiary); }
.breadcrumb-link {
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: var(--accent); text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.breadcrumb-link:hover { background: var(--accent-soft); color: var(--neon-cyan); }
.breadcrumb-icon       { font-size: 1rem; }
.breadcrumb-text       { white-space: nowrap; }
.breadcrumb-item.active{ color: var(--text-primary); }

/* ── Confirm Modal ── */
#confirmModal {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    display: none; align-items: center; justify-content: center;
    z-index: 9999; padding: 1rem;
}
#confirmModal.show { animation: fadeIn 0.2s ease; }
.confirm-modal-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--overlay-modal);
    cursor: pointer;
}
.confirm-modal-content {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-width: 500px; width: 100%;
    max-height: 90vh; overflow-y: auto;
    animation: slideUp 0.3s ease;
}
.confirm-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.5rem; border-bottom: 1px solid var(--border-secondary);
}
.confirm-modal-title { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.confirm-modal-body  { padding: 1.5rem; }
.confirm-mensagem    { color: var(--text-secondary); margin: 0 0 1rem 0; font-size: 1rem; line-height: 1.5; }
.confirm-itens       { margin-bottom: 1.5rem; }
.confirm-itens-list  { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.confirm-itens-list li {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 0.75rem;
    background: var(--success-soft);
    border-left: 3px solid var(--success);
    border-radius: var(--radius-md);
    color: var(--text-primary); font-size: 0.95rem;
}
.check-icon  { color: var(--success); font-weight: bold; flex-shrink: 0; font-size: 1.1rem; }
.confirm-warning {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--danger-soft);
    border: 1px solid var(--danger);
    border-radius: var(--radius-md);
    color: var(--text-primary);
}
.warning-icon { font-size: 1.25rem; flex-shrink: 0; }
.warning-text { font-weight: 500; color: var(--danger); }
.confirm-modal-footer {
    display: flex; justify-content: flex-end; gap: 1rem;
    padding: 1.5rem; border-top: 1px solid var(--border-secondary);
}
.btn-close {
    background: none; border: none; font-size: 1.5rem;
    color: var(--text-secondary); cursor: pointer; padding: 0;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); transition: var(--transition);
}
.btn-close:hover { background: var(--bg-elevated); color: var(--text-primary); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Status Badges (UX) ── */
.status-badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.75rem; font-size: 0.85rem; font-weight: 600;
    border-radius: var(--radius-md); white-space: nowrap;
    text-transform: uppercase; letter-spacing: 0.02em;
}
.badge-icon { font-size: 0.95rem; font-weight: bold; }
.badge-text { color: inherit; }
.badge-active, .badge-completed { background: var(--success-soft); color: var(--success); border: 1px solid var(--success); }
.badge-pending, .badge-draft    { background: var(--warning-soft); color: var(--warning); border: 1px solid var(--warning); }
.badge-in_progress              { background: var(--info-soft);    color: var(--info);    border: 1px solid var(--info); }
.badge-cancelled, .badge-inactive{ background: var(--danger-soft); color: var(--danger);  border: 1px solid var(--danger); }
.badge-suspended                { background: var(--warning-soft); color: var(--warning); border: 1px solid var(--warning); }
.badge-trial                    { background: var(--accent-soft);  color: var(--accent);  border: 1px solid var(--accent); }
.badge-expired, .badge-payment_failed { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger); }

/* ── Field with Help ── */
.field-with-help { margin-bottom: 1.5rem; }
.form-label {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.5rem; color: var(--text-primary); font-weight: 500;
}
.tooltip-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; font-size: 0.85rem; border-radius: 50%;
    background: var(--bg-tertiary); color: var(--accent);
    cursor: help; flex-shrink: 0; transition: var(--transition);
}
.tooltip-icon:hover    { background: var(--accent-soft); color: var(--neon-cyan); }
.required-indicator    { color: var(--danger); font-weight: bold; }

/* ── Pagination (UX extra) ── */
.pagination-summary {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem; font-size: 0.95rem; color: var(--text-secondary);
}
.summary-text   { display: flex; align-items: center; gap: 0.5rem; }
.pagination-jump{ display: flex; align-items: center; gap: 0.5rem; }
.jump-label     { font-size: 0.9rem; color: var(--text-tertiary); white-space: nowrap; }
.jump-input {
    width: 60px; padding: 0.4rem 0.5rem; font-size: 0.85rem;
    border: 1px solid var(--border-primary); border-radius: var(--radius-md);
    background: var(--bg-secondary); color: var(--text-primary);
}
.jump-input:focus { border-color: var(--accent); box-shadow: 0 0 8px var(--glow-accent-sm); }
.jump-info      { font-size: 0.85rem; color: var(--text-tertiary); }
.pagination-nav {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 0.5rem;
}
.pagination-link {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.5rem 0.75rem; color: var(--accent); background: transparent;
    border: 1px solid var(--border-primary); border-radius: var(--radius-md);
    text-decoration: none; cursor: pointer; transition: var(--transition);
    font-size: 0.9rem; font-weight: 500; min-height: 32px; justify-content: center;
}
.pagination-link:hover:not(.is-active):not(.pagination-disabled) {
    background: var(--accent-soft); border-color: var(--accent);
    color: var(--neon-cyan); transform: translateY(-1px);
    box-shadow: 0 2px 8px var(--glow-accent-sm);
}
.pagination-link.is-active {
    background: var(--accent); color: var(--bg-primary);
    border-color: var(--accent); font-weight: 600; cursor: default;
}
.pagination-link.pagination-disabled {
    color: var(--text-muted); border-color: var(--border-secondary);
    cursor: not-allowed; opacity: 0.5;
}
.pagination-link.pagination-disabled:hover { background: transparent; border-color: var(--border-secondary); transform: none; }
.pagination-icon { font-size: 1.1rem; }
.pagination-text { display: none; }
@media (min-width: 640px) { .pagination-text { display: inline; } }
.pagination-ellipsis { padding: 0.5rem 0.3rem; color: var(--text-tertiary); }

/* ── Live Search ── */
.live-search       { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); }
.live-search-input-wrap { position: relative; }
.live-search-input {
    width: 100%; min-height: 2.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-neon);
    border-radius: var(--radius-lg);
    background: var(--overlay-search);
    color: var(--text-primary); font-size: 0.95rem;
    box-shadow: var(--shadow-sm); transition: var(--transition);
}
.live-search-input::placeholder { color: var(--text-secondary); }
.live-search-input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: var(--shadow-neon);
    background: var(--overlay-search-focus);
}
.live-search-empty-state { margin: 0; color: var(--warning); font-size: 0.9rem; }
.live-search-container   { position: relative; margin-bottom: 1.5rem; }
.live-search-input-wrapper { position: relative; }
.search-icon {
    position: absolute; left: 0.75rem; top: 50%;
    transform: translateY(-50%); color: var(--text-tertiary); font-size: 1.1rem;
}
.search-loader {
    position: absolute; right: 0.75rem; top: 50%;
    transform: translateY(-50%); display: none;
    width: 20px; height: 20px;
    border: 2px solid var(--border-primary);
    border-top-color: var(--accent);
    border-radius: 50%; animation: spin 0.6s linear infinite;
}
.search-loader.show { display: block; }
@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin: var(--spacing-xl) 0 var(--spacing-md);
}
.section-header h2 {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.2;
}
.dashboard-card img,
.card img {
    max-width: 100%;
    height: auto;
}
@media (max-width: 768px) {
    .section-header {
        flex-direction: column;
        align-items: stretch;
    }
    .section-header > * {
        width: 100%;
    }
    .section-header .btn,
    .section-header .action-buttons,
    .section-header .action-buttons > * {
        width: 100%;
    }
    .live-search-input {
        min-height: 3rem;
        font-size: 0.9rem;
    }
    .dashboard-card {
        padding: var(--spacing-lg);
    }
    .card-header,
    .card-body {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
}

/* ── Subscription Warning ── */
.subscription-warning {
    background: var(--danger-soft); border: 1px solid var(--danger);
    border-radius: var(--radius-lg); padding: 1rem;
    margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1rem;
}
.subscription-icon    { font-size: 1.5rem; flex-shrink: 0; }
.subscription-content { flex: 1; }
.subscription-title   { font-weight: 600; color: var(--danger); margin: 0 0 0.25rem 0; }
.subscription-text    { color: var(--text-primary); font-size: 0.95rem; margin: 0; }
.subscription-link    { color: var(--accent); text-decoration: none; font-weight: 500; transition: var(--transition); }
.subscription-link:hover { text-decoration: underline; }

/* ── Password Toggle ── */
.password-input-wrapper { position: relative; display: inline-block; width: 100%; }
.password-input-wrapper input[type="password"],
.password-input-wrapper input[type="text"] { width: 100%; padding-right: 40px; box-sizing: border-box; }
.password-toggle-btn {
    position: absolute; right: 10px; top: 0; bottom: 0; height: 100%;
    background: none; border: none; padding: 0 6px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-tertiary); opacity: 0.6;
    transition: opacity 0.2s ease; z-index: 10; margin: 0;
}
.password-toggle-btn:hover  { opacity: 1; color: var(--text-secondary); }
.password-toggle-btn:focus  { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 4px; opacity: 1; }
.password-toggle-btn svg    { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }

/* ── Table Actions Cell ── */
.actions-cell {
    display: flex; align-items: center; justify-content: flex-start;
    gap: 0.75rem; flex-wrap: nowrap;
    padding: 0.9rem 1.4rem !important;
    min-width: 280px; height: 6.5rem;
}
.actions-cell .btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 768px) {
    .action-buttons {
        flex-wrap: wrap;
    }
    .actions-cell {
        min-width: 0;
        width: 100%;
        height: auto;
        padding: 0.75rem !important;
        flex-wrap: wrap;
    }
    .actions-cell .btn {
        flex: 1 1 calc(50% - 0.5rem);
    }
}
@media (max-width: 480px) {
    .actions-cell .btn {
        flex-basis: 100%;
    }
}

/* ── Responsive (UX) ── */
@media (max-width: 768px) {
    .pagination-summary  { flex-direction: column; gap: 0.75rem; }
    .pagination-nav      { gap: 0.25rem; }
    .pagination-link     { padding: 0.4rem 0.5rem; font-size: 0.8rem; }
    .form-header         { flex-direction: column; }
    .confirm-modal-content { max-width: 90%; }
    .bulk-actions        { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   APP UI REFRESH
   ============================================================ */
.content-shell {
    gap: clamp(1rem, 1.5vw, 1.35rem);
}
.container {
    min-width: 0;
}
.container > * {
    min-width: 0;
}
main p a,
main li a,
main .info-value a,
main .alert a,
main .subscription-text a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    transition: color 0.2s ease;
}
main p a:hover,
main li a:hover,
main .info-value a:hover,
main .alert a:hover,
main .subscription-text a:hover {
    color: var(--primary);
}

.page-header {
    margin: 0 0 1.15rem;
    padding: 1.35rem 1.5rem;
    border-radius: 24px;
    border: 1px solid var(--border-primary);
    background:
        radial-gradient(circle at top right, var(--glow-accent-sm) 0%, transparent 30%),
        linear-gradient(180deg, var(--overlay-card-a) 0%, var(--overlay-card-b) 100%);
    box-shadow: var(--shadow-lg);
}
.page-header-content {
    align-items: flex-end;
    gap: 1.2rem;
}
.page-header-left {
    gap: 0.8rem;
}
.page-header-left h1 {
    margin: 0;
    font-size: clamp(1.55rem, 2.7vw, 2.2rem);
    letter-spacing: -0.03em;
    line-height: 1.06;
}
.page-header-right .action-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}
.page-header-right .action-buttons > * {
    flex: 0 0 auto;
}
.page-breadcrumb {
    margin-top: 0;
    gap: 0.6rem;
}
.page-breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border-secondary);
    background: var(--overlay-search);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.82rem;
    line-height: 1;
}
.page-breadcrumb a:hover {
    color: var(--text-primary);
    border-bottom-color: transparent;
    border-color: var(--glow-accent-md);
    background: var(--overlay-modal);
}
.status-bar {
    margin: 0 0 1.2rem;
    padding: 1rem 1.1rem;
    border-radius: 20px;
    border: 1px solid var(--border-primary);
    background: linear-gradient(180deg, var(--overlay-card-a) 0%, var(--overlay-search) 100%);
    box-shadow: var(--shadow-md);
}

.card,
.dashboard-card {
    padding: 0;
    border-radius: 22px;
    background: linear-gradient(180deg, var(--overlay-card-a) 0%, var(--overlay-card-b) 100%);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-lg);
}
.card::after,
.dashboard-card::after {
    display: none;
}
.card-header {
    padding: 1.1rem 1.25rem 0.45rem;
    background: transparent;
    border-bottom: 0;
}
.card-header h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.25;
}
.card-body {
    padding: 0 1.25rem 1.2rem;
}
.section-header {
    margin: 1.45rem 0 0.9rem;
}
.section-header h2 {
    font-size: 1.08rem;
}

.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 22px;
    border: 1px solid var(--border-primary);
    background: linear-gradient(180deg, var(--overlay-card-a) 0%, var(--overlay-card-b) 100%);
    box-shadow: var(--shadow-lg);
}
table {
    min-width: 720px;
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    box-shadow: none;
}
table::before {
    display: none;
}
thead {
    background: transparent;
}
th {
    padding: 1rem 1.15rem;
    background: var(--overlay-modal);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-secondary);
    letter-spacing: 0.12em;
}
td {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
}
tr:hover td {
    background: var(--overlay-card-a);
    color: var(--text-primary);
}

.live-search {
    gap: 0.65rem;
    margin-bottom: 1rem;
}
.live-search-input-wrap::before {
    content: '⌕';
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 1rem;
    pointer-events: none;
}
.live-search-input {
    min-height: 3.1rem;
    padding: 0.85rem 1rem 0.85rem 2.8rem;
    border-radius: 18px;
    border: 1px solid var(--border-primary);
    background: linear-gradient(180deg, var(--overlay-search) 0%, var(--overlay-card-a) 100%);
    box-shadow: var(--shadow-md);
}
.live-search-input:focus {
    border-color: var(--glow-accent-md);
    box-shadow: 0 0 0 3px var(--glow-accent-sm), var(--shadow-md);
    background: var(--overlay-search-focus);
}

.app-form {
    padding: 0;
    max-width: 980px;
    margin: 1rem auto 0;
    border-radius: 24px;
    border: 1px solid var(--border-primary);
    background: linear-gradient(180deg, var(--overlay-card-a) 0%, var(--overlay-card-b) 100%);
    box-shadow: var(--shadow-xl);
}
.app-form::before {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glow-accent-md), transparent);
    box-shadow: none;
}
.app-form > div:not(.form-actions) {
    padding: 1.25rem 1.4rem;
    border-bottom: 1px solid var(--border-light);
}
.form-grid {
    gap: 1rem;
}
.form-group {
    margin-bottom: 0;
    padding: 1rem;
    border-radius: 18px;
    background: var(--overlay-search);
    border: 1px solid var(--border-light);
}
label {
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
}
input,
select,
textarea {
    min-height: 3rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--border-secondary);
    background: var(--overlay-input);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
textarea {
    min-height: 7.5rem;
}
input:focus,
select:focus,
textarea:focus {
    border-color: var(--glow-accent-md);
    box-shadow: 0 0 0 3px var(--glow-accent-sm);
}
.help-text {
    margin-top: 0.45rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.form-actions {
    padding: 1rem 1.4rem;
    background: var(--overlay-modal);
    border-top: 1px solid var(--border-light);
    justify-content: flex-end;
    gap: 0.75rem;
}

button,
.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-success,
.btn-warning,
.btn-info,
input[type="submit"],
input[type="button"],
a.btn,
table td a,
.action-btn,
form a,
a[href*="cancelar"],
a[href*="voltar"],
.quick-actions a {
    min-height: 2.7rem;
    padding: 0 1rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.01em;
}
button::before,
.btn::before,
.btn-primary::before,
.btn-secondary::before,
.btn-danger::before,
.btn-success::before,
.btn-warning::before,
.btn-info::before,
input[type="submit"]::before,
table td a::before,
.action-btn::before {
    content: none !important;
    display: none !important;
}
.btn-primary,
button[type="submit"]:not(.btn-secondary) {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: var(--text-primary);
    border: 1px solid var(--glow-accent-md);
    box-shadow: 0 12px 26px var(--glow-accent-sm);
}
.btn-secondary,
form a,
a[href*="cancelar"],
a[href*="voltar"] {
    background: var(--overlay-search);
    color: var(--text-primary);
    border: 1px solid var(--border-secondary);
}
table td a,
.action-btn {
    min-height: 2.2rem;
    padding: 0 0.8rem;
    border-radius: 12px;
    background: var(--overlay-card-a);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}
.btn-danger,
a[href*="excluir"] {
    background: linear-gradient(180deg, var(--danger), var(--danger-dark));
    color: var(--text-primary);
}
.btn-success {
    background: linear-gradient(180deg, var(--success), var(--success-dark));
    color: var(--text-primary);
}
.btn-warning {
    background: linear-gradient(180deg, var(--warning), var(--warning-dark));
    color: var(--text-inverse);
}
.btn-info {
    background: linear-gradient(180deg, var(--info), var(--info-dark));
    color: var(--text-primary);
}
.btn-sm {
    min-height: 2.1rem;
    padding: 0 0.8rem;
    font-size: 0.72rem;
    border-radius: 12px;
}
button:hover,
.btn:hover,
input[type="submit"]:hover,
a.btn:hover,
table td a:hover,
.action-btn:hover,
form a:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--glow-accent-md);
    color: var(--text-primary);
}
.action-buttons,
.form-actions,
.actions-links {
    gap: 0.75rem;
}
.actions-cell {
    gap: 0.5rem;
    min-width: 230px;
    height: auto;
    padding: 0.85rem 1rem !important;
}
.actions-cell .btn {
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .page-header {
        padding: 1.15rem 1.2rem;
    }
    .page-header-content {
        flex-direction: column;
        align-items: stretch;
    }
    .page-header-right,
    .page-header-right .action-buttons {
        width: 100%;
    }
    .page-header-right .action-buttons > * {
        flex: 1 1 calc(50% - 0.375rem);
    }
}
@media (max-width: 768px) {
    .card-header,
    .card-body,
    .app-form > div:not(.form-actions),
    .form-actions {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .responsive-table tr {
        padding: 1rem;
        border-radius: 20px;
    }
    .responsive-table td {
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--border-light);
    }
    .responsive-table td:last-child {
        border-bottom: 0;
    }
    .responsive-table td::before {
        font-size: 0.68rem;
        letter-spacing: 0.12em;
    }
    .actions-cell .btn {
        flex: 1 1 calc(50% - 0.25rem);
    }
}
@media (max-width: 520px) {
    .page-header {
        padding: 1rem;
        border-radius: 20px;
    }
    .page-header-left h1 {
        font-size: 1.35rem;
    }
    .page-header-right .action-buttons > * {
        flex: 1 1 100%;
    }
    .page-breadcrumb {
        flex-direction: column;
        align-items: flex-start;
    }
    .table-wrapper,
    .app-form {
        border-radius: 18px;
    }
    .actions-cell .btn {
        flex-basis: 100%;
    }
}

.list-page,
.form-page,
.confirm-page,
.content-page {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.list-page .page-header-left h1,
.form-page .page-header-left h1,
.confirm-page .page-header-left h1,
.content-page .page-header-left h1 {
    font-size: clamp(1.5rem, 2.6vw, 2.15rem);
}
.list-page .table-wrapper {
    margin-top: 0.2rem;
}
.list-page .live-search-empty-state {
    padding-left: 0.2rem;
}
.form-page .app-form {
    max-width: 1080px;
}
.form-page .page-header,
.confirm-page .page-header {
    margin-bottom: 1rem;
}
.confirm-page .app-form {
    max-width: 760px;
}
.confirm-page .app-form > div:first-child {
    background: linear-gradient(180deg, var(--overlay-modal) 0%, transparent 100%);
}
.confirm-page .alert {
    margin: 0;
}
.content-page .card {
    max-width: 980px;
}
.content-page .card-body {
    padding-top: 1.15rem;
}
.content-page .card-body > h3 {
    margin-top: 1.4rem;
    margin-bottom: 0.7rem;
}
.content-page .card-body > h3:first-child {
    margin-top: 0;
}
.content-page .card-body > p,
.content-page .card-body > ul {
    max-width: 72ch;
}
.content-page .dashboard-grid {
    margin-top: 0;
}
.content-page .quick-actions {
    margin-top: 1rem;
}
.error-page .error-card {
    background: linear-gradient(180deg, var(--overlay-card-a) 0%, var(--overlay-card-b) 100%);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-xl);
}
.error-page .error-actions {
    justify-content: center;
    gap: 0.75rem;
}
.error-page .error-actions .btn {
    min-width: 180px;
}
.error-page .error-footer small {
    color: var(--text-secondary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
@media (max-width: 768px) {
    .list-page .page-header-right .action-buttons > *,
    .form-page .page-header-right .action-buttons > *,
    .confirm-page .page-header-right .action-buttons > *,
    .content-page .page-header-right .action-buttons > * {
        flex: 1 1 100%;
    }
    .content-page .card {
        max-width: none;
    }
}

/* ============================================================
   ERROR PAGES
   ============================================================ */
.error-container {
    min-height: calc(100vh - 200px);
    display: flex; align-items: center; justify-content: center;
    padding: 2rem; position: relative;
}
.error-card {
    background: var(--overlay-error-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-xl);
    padding: 3rem; width: 100%; max-width: 550px;
    text-align: center; position: relative; overflow: hidden;
    box-shadow: var(--shadow-xl);
    animation: errorAppear 0.5s ease;
}
.error-card-danger {
    border: 1px solid var(--glow-danger-sm);
    box-shadow: 0 0 40px var(--glow-danger-sm);
}
.error-card-danger::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--danger), var(--danger-dark), var(--danger));
    box-shadow: 0 0 12px var(--glow-danger-md);
}
.error-card-warning {
    border: 1px solid var(--glow-warning-sm);
    box-shadow: 0 0 40px var(--glow-warning-sm);
}
.error-card-warning::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--warning), var(--warning-dark), var(--warning));
    box-shadow: 0 0 12px var(--glow-warning-sm);
}
@keyframes errorAppear {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.error-icon { margin-bottom: 1.5rem; animation: pulse 2s ease-in-out infinite; }
.error-card-danger .error-icon  { color: var(--danger); }
.error-card-warning .error-icon { color: var(--warning); }
@keyframes pulse {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.05); }
}
.error-code {
    font-size: 5rem; font-weight: 800; font-family: var(--font-mono);
    margin-bottom: 0.5rem; letter-spacing: 4px;
}
.error-card-danger .error-code {
    background: linear-gradient(135deg, var(--danger), var(--warning));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.error-card-warning .error-code {
    background: linear-gradient(135deg, var(--warning), var(--neon-blue));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.error-title {
    font-size: 1.75rem; margin-bottom: 1.5rem;
    text-transform: uppercase; letter-spacing: 2px; font-weight: 700;
}
.error-card-danger .error-title  { color: var(--danger); }
.error-card-warning .error-title { color: var(--warning); }
.error-message { color: var(--text-secondary); margin-bottom: 2rem; line-height: 1.6; }
.error-message p { margin-bottom: 0.5rem; }
.error-detail {
    font-size: 0.85rem; color: var(--text-tertiary);
    background: var(--overlay-modal);
    padding: 0.75rem; border-radius: var(--radius-md);
    margin-top: 1rem; font-family: var(--font-mono); word-break: break-word;
}
.error-actions { display: flex; gap: 1rem; justify-content: center; margin-bottom: 2rem; }
.error-footer {
    margin-top: 1.5rem; padding-top: 1rem;
    border-top: 1px solid var(--border-light);
    color: var(--text-tertiary); font-size: 0.75rem;
}
@media (max-width: 768px) {
    .error-card { padding: 2rem; }
    .error-code  { font-size: 3.5rem; }
    .error-title { font-size: 1.25rem; }
    .error-actions { flex-direction: column; }
    .error-actions .btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
    .error-container { padding: 1rem; }
    .error-card      { padding: 1.5rem; }
    .error-icon svg  { width: 60px; height: 60px; }
    .error-code      { font-size: 2.5rem; }
}

/* ============================================================
   DASHBOARD PREMIUM v2
   ============================================================ */
.dashboard-premium { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0; }

/* ── Hero ── */
.dashboard-premium .hero-section {
    background: linear-gradient(135deg, var(--glow-primary-sm) 0%, var(--glow-accent-sm) 35%, transparent 100%),
        var(--bg-secondary);
    border-radius: 22px; padding: 32px 40px; margin-bottom: 32px;
    position: relative; overflow: hidden;
    border: 1px solid var(--border-primary); box-shadow: var(--shadow-md);
}
.dashboard-premium .hero-section::before {
    content: ''; position: absolute; top: -50%; right: -20%; width: 60%; height: 200%;
    background: radial-gradient(circle, var(--glow-accent-sm) 0%, transparent 70%);
    pointer-events: none;
}
.dashboard-premium .hero-layout {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.95fr);
    gap: 24px; align-items: stretch;
}
.dashboard-premium .hero-content { display: flex; flex-direction: column; justify-content: center; }
.dashboard-premium .hero-kicker {
    display: inline-flex; align-self: flex-start;
    padding: 0.45rem 0.85rem; border-radius: 999px;
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
    color: var(--text-secondary); background: var(--overlay-search);
    border: 1px solid var(--border-secondary); margin-bottom: 16px;
}
.dashboard-premium .hero-greeting { font-size: 30px; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); }
.dashboard-premium .hero-subtitle {
    color: var(--text-secondary); font-size: 15px;
    margin-bottom: 16px; opacity: 0.96; max-width: 62ch; line-height: 1.7;
}
.dashboard-premium .hero-meta { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 16px; }
.dashboard-premium .hero-meta-item {
    display: flex; align-items: center; gap: 8px; font-size: 13px;
    color: var(--text-secondary); font-family: var(--font-mono);
    padding: 0.5rem 0.75rem; border-radius: 999px;
    background: var(--overlay-search); border: 1px solid var(--border-dark);
}
.dashboard-premium .hero-meta-item::before { content: "●"; color: var(--neon-blue); font-size: 10px; }
.dashboard-premium .hero-side-panel { display: grid; gap: 14px; }
.dashboard-premium .hero-side-card {
    min-height: 128px; display: flex; flex-direction: column;
    justify-content: center; gap: 8px; padding: 18px 20px; border-radius: 20px;
    background: linear-gradient(180deg, var(--overlay-search) 0%, var(--overlay-card-a) 100%);
    border: 1px solid var(--border-secondary);
    box-shadow: inset 0 1px 0 var(--glow-accent-sm);
}
.dashboard-premium .hero-side-label  { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); }
.dashboard-premium .hero-side-value  { color: var(--text-primary); font-size: 28px; line-height: 1.15; font-weight: 800; }
.dashboard-premium .hero-side-caption{ color: var(--metal-mid); font-size: 13px; line-height: 1.5; }

/* ── Section headings ── */
.dashboard-premium .dashboard-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 0 0 18px; }
.dashboard-premium .dashboard-section-kicker  { display: inline-block; margin-bottom: 8px; color: var(--neon-blue); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; font-weight: 700; }
.dashboard-premium .dashboard-section-title   { margin: 0; font-size: 22px; color: var(--text-primary); }
.dashboard-premium .dashboard-section-copy    { margin: 0; max-width: 420px; color: var(--metal-mid); font-size: 13px; line-height: 1.65; text-align: right; }

/* ── Stats Grid Premium ── */
.dashboard-premium .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 40px; }
@media (max-width: 1200px) { .dashboard-premium .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .dashboard-premium .stats-grid { grid-template-columns: 1fr; } }
.dashboard-premium .stat-card {
    background: linear-gradient(180deg, var(--overlay-card-a) 0%, var(--overlay-card-b) 100%);
    border-radius: 18px; padding: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; overflow: hidden;
    border: 1px solid var(--border-primary); box-shadow: var(--shadow-md);
}
.dashboard-premium .stat-card::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--glow-accent-lg), var(--glow-accent-sm));
}
.dashboard-premium .stat-card:hover { transform: translateY(-2px); border-color: var(--glow-accent-md); box-shadow: var(--shadow-lg); }
.dashboard-premium .stat-header     { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.dashboard-premium .stat-icon {
    width: 48px; height: 48px;
    background: linear-gradient(135deg, var(--glow-primary-md), var(--glow-accent-sm));
    border: 1px solid var(--glow-accent-md); border-radius: 16px;
    display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.dashboard-premium .stat-trend {
    font-size: 12px; padding: 4px 8px; border-radius: 20px;
    background: var(--success-soft); color: var(--success);
    border: 1px solid var(--glow-success-sm); font-weight: 700;
}
.dashboard-premium .stat-value  { font-size: 36px; font-weight: 800; color: var(--text-primary); line-height: 1.2; margin-bottom: 8px; }
.dashboard-premium .stat-label  { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); margin-bottom: 4px; }
.dashboard-premium .stat-unit   { font-size: 12px; color: var(--metal-mid); }
.dashboard-premium .stat-footer { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-light); font-size: 12px; color: var(--text-secondary); }

/* ── Charts ── */
.dashboard-premium .charts-section { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-bottom: 40px; }
@media (max-width: 1000px) { .dashboard-premium .charts-section { grid-template-columns: 1fr; } }
.dashboard-premium .chart-card {
    background: linear-gradient(180deg, var(--overlay-card-a) 0%, var(--overlay-card-b) 100%);
    border-radius: 18px; overflow: hidden;
    border: 1px solid var(--border-primary); transition: all 0.3s ease;
}
.dashboard-premium .chart-card:hover { border-color: var(--glow-accent-md); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.dashboard-premium .chart-card-header {
    padding: 20px 24px;
    background: linear-gradient(180deg, var(--overlay-card-a) 0%, var(--overlay-search) 100%);
    border-bottom: 1px solid var(--border-light);
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.dashboard-premium .chart-card-title {
    font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 0;
    display: flex; align-items: center; gap: 8px;
}
.dashboard-premium .chart-card-title::before {
    content: ""; width: 10px; height: 10px; border-radius: 999px;
    background: linear-gradient(135deg, var(--neon-blue), var(--neon-cyan));
    box-shadow: 0 0 0 4px var(--glow-accent-sm);
}
.dashboard-premium .chart-card-badge {
    font-size: 11px; padding: 4px 10px;
    background: var(--primary-soft); border: 1px solid var(--glow-accent-md);
    border-radius: 20px; color: var(--text-primary); font-weight: 700;
}
.dashboard-premium .chart-card-body    { padding: 24px; min-height: 320px; }
.dashboard-premium .chart-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 640px) { .dashboard-premium .chart-summary-grid { grid-template-columns: 1fr; } }
.dashboard-premium .chart-summary-item { background: var(--overlay-card-a); border: 1px solid var(--border-light); border-radius: 14px; padding: 14px 16px; }
.dashboard-premium .chart-summary-label{ display: block; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 6px; }
.dashboard-premium .chart-summary-value{ color: var(--text-primary); font-size: 18px; }
.dashboard-premium .dashboard-chart {
    position: relative; width: 100%; min-height: 280px; border-radius: 16px;
    background: linear-gradient(180deg, var(--overlay-modal) 0%, var(--overlay-search) 100%);
    border: 1px solid var(--border-dark); padding: 8px;
    box-shadow: inset 0 0 0 1px var(--glow-accent-sm);
}
.dashboard-premium .chart-svg          { width: 100%; height: 280px; display: block; }
.dashboard-premium .chart-grid-line    { stroke: var(--border-secondary); stroke-width: 1; }
.dashboard-premium .chart-axis-label   { fill: var(--text-secondary); font-size: 11px; font-family: var(--font-mono); }
.dashboard-premium .chart-legend       { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.dashboard-premium .legend-item        { display: inline-flex; align-items: center; gap: 8px; color: var(--text-primary); font-size: 12px; }
.dashboard-premium .legend-dot         { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
.dashboard-premium .legend-dot-blue    { background: var(--info); }
.dashboard-premium .legend-dot-red     { background: var(--danger); }
.dashboard-premium .legend-dot-cyan    { background: var(--neon-cyan); }
.dashboard-premium .legend-dot-green   { background: var(--success); }
.dashboard-premium .legend-dot-orange  { background: var(--warning); }
.dashboard-premium .chart-placeholder {
    width: 100%; min-height: 280px;
    background: linear-gradient(180deg, var(--overlay-modal) 0%, var(--overlay-search) 100%);
    border-radius: 16px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 16px;
    border: 1px dashed var(--border-neon); transition: all 0.3s ease; padding: 20px;
}
.dashboard-premium .chart-placeholder:hover { border-color: var(--glow-accent-md); background: linear-gradient(180deg, var(--overlay-search) 0%, var(--overlay-card-a) 100%); }
.dashboard-premium .chart-placeholder-icon { font-size: 48px; opacity: 0.5; }
.dashboard-premium .chart-placeholder-text { font-size: 13px; color: var(--text-secondary); }
.chart-tooltip {
    position: fixed; z-index: 1200; pointer-events: none; max-width: 240px;
    padding: 0.65rem 0.85rem; border-radius: 12px;
    border: 1px solid var(--glow-accent-sm);
    background: var(--overlay-tooltip); color: var(--text-primary);
    box-shadow: var(--shadow-lg); font-size: 12px; line-height: 1.45;
    opacity: 0; transform: translateY(4px);
    transition: opacity 0.14s ease, transform 0.14s ease;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.chart-tooltip.is-visible { opacity: 1; transform: translateY(0); }

/* ── Quick Actions (Premium) ── */
.dashboard-premium .quick-actions-wrapper {
    background: linear-gradient(180deg, var(--overlay-card-a) 0%, var(--overlay-card-b) 100%);
    border-radius: 20px;
    margin-bottom: 40px;
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-md);
}
.dashboard-premium .quick-actions-header  {
    padding: 20px 22px 12px;
    border-bottom: 1px solid var(--border-light);
}
.dashboard-premium .quick-actions-title   {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0 0 6px 0;
}
.dashboard-premium .quick-actions-subtitle{
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    max-width: 46ch;
}
.dashboard-premium .quick-actions-grid    {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 18px 22px 22px;
}
.dashboard-premium .quick-action-btn {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 14px;
    min-height: 88px;
    padding: 16px 18px;
    background: var(--overlay-search);
    border: 1px solid var(--border-secondary);
    border-radius: 16px;
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.dashboard-premium .quick-action-btn:hover {
    background: var(--overlay-card-a);
    border-color: var(--glow-accent-sm);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.dashboard-premium .quick-action-icon            {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: var(--overlay-modal);
    border: 1px solid var(--border-light);
    font-family: var(--font-mono);
}
.dashboard-premium .quick-action-content         {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.dashboard-premium .quick-action-eyebrow         {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.dashboard-premium .quick-action-content strong  {
    color: inherit;
    font-size: 15px;
    line-height: 1.25;
}
.dashboard-premium .quick-action-content small   {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
}
.dashboard-premium .quick-action-arrow           {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    color: var(--text-tertiary);
    font-size: 18px;
    transition: transform 0.2s ease, color 0.2s ease;
}
.dashboard-premium .quick-action-btn:hover .quick-action-arrow {
    transform: translateX(2px);
    color: var(--neon-cyan);
}

/* ── Recent Activities ── */
.dashboard-premium .recent-activities { background: linear-gradient(180deg, var(--overlay-card-a) 0%, var(--overlay-card-b) 100%); border-radius: 18px; overflow: hidden; border: 1px solid var(--border-primary); }
.dashboard-premium .recent-header {
    padding: 20px 24px 18px;
    background: linear-gradient(180deg, var(--overlay-card-a) 0%, var(--overlay-search) 100%);
    border-bottom: 1px solid var(--border-light);
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.dashboard-premium .recent-title {
    font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 0;
    display: flex; align-items: center; gap: 8px;
}
.dashboard-premium .recent-title::before {
    content: ""; width: 10px; height: 10px; border-radius: 999px;
    background: linear-gradient(135deg, var(--warning), var(--neon-cyan));
    box-shadow: 0 0 0 4px var(--glow-accent-sm);
}
.dashboard-premium .recent-link {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 0 16px; border-radius: 999px;
    border: 1px solid var(--glow-accent-sm);
    background: var(--overlay-search); font-size: 12px;
    color: var(--text-primary); text-decoration: none; transition: all 0.2s ease;
}
.dashboard-premium .recent-link:hover { color: var(--neon-cyan); border-color: var(--glow-accent-md); background: var(--glow-primary-sm); }
.dashboard-premium .recent-empty      { padding: 60px 24px; text-align: center; color: var(--text-secondary); }
.dashboard-premium .recent-empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
.dashboard-premium .recent-empty-text { font-size: 14px; }
.dashboard-premium .recent-body       { padding: 18px 24px 24px; }

.dashboard-premium .notification-metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 20px 24px 0 24px; }
@media (max-width: 900px) { .dashboard-premium .notification-metrics-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .dashboard-premium .notification-metrics-grid { grid-template-columns: 1fr; } }
.dashboard-premium .notification-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
@media (max-width: 900px) { .dashboard-premium .notification-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .dashboard-premium .notification-overview { grid-template-columns: 1fr; } }
.dashboard-premium .notification-overview-card {
    display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 16px;
    background: linear-gradient(180deg, var(--overlay-card-a) 0%, var(--overlay-search) 100%);
    border: 1px solid var(--border-secondary);
}
.dashboard-premium .notification-overview-label  { display: block; color: var(--text-secondary); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.dashboard-premium .notification-overview-card strong { font-size: 26px; color: var(--text-primary); }
.dashboard-premium .notification-table-wrapper {
    overflow-x: auto; border-radius: 16px;
    border: 1px solid var(--border-secondary);
    background: linear-gradient(180deg, var(--overlay-card-a) 0%, var(--overlay-card-b) 100%);
}
.dashboard-premium .notification-table { width: 100%; border-collapse: collapse; margin: 0; }
.dashboard-premium .notification-table th {
    text-align: left; padding: 14px 16px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary);
    border-bottom: 1px solid var(--border-secondary); background: var(--overlay-modal);
}
.dashboard-premium .notification-table td { padding: 16px; vertical-align: top; border-bottom: 1px solid var(--border-secondary); color: var(--text-primary); }
.dashboard-premium .notification-table tbody tr:last-child td { border-bottom: none; }
.dashboard-premium .notification-row { transition: background 0.18s ease; }
.dashboard-premium .notification-row:hover { background: var(--glow-accent-sm); }
.dashboard-premium .notification-row-info    td:first-child { box-shadow: inset 3px 0 0 var(--info); }
.dashboard-premium .notification-row-warning td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
.dashboard-premium .notification-row-error   td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.dashboard-premium .notification-row-success td:first-child { box-shadow: inset 3px 0 0 var(--success); }
.dashboard-premium .notification-table-content { display: flex; flex-direction: column; gap: 6px; }
.dashboard-premium .notification-table-content strong { color: var(--text-primary); font-size: 14px; line-height: 1.45; }
.dashboard-premium .notification-table-content p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
.dashboard-premium .notification-status {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 32px; padding: 0.4rem 0.75rem; border-radius: 999px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.dashboard-premium .notification-status-read   { background: var(--success-soft); border: 1px solid var(--glow-success-sm); color: var(--success); }
.dashboard-premium .notification-status-unread { background: var(--info-soft); border: 1px solid var(--info-soft); color: var(--info); }
.dashboard-premium .notification-table-date    { font-family: var(--font-mono); font-size: 11px; color: var(--metal-light); white-space: nowrap; }
@media (max-width: 720px) {
    .dashboard-premium .recent-body { padding: 16px 16px 18px; }
    .dashboard-premium .notification-table th,
    .dashboard-premium .notification-table td { padding: 12px; }
    .dashboard-premium .notification-table-date { white-space: normal; }
}
.dashboard-premium .notification-badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.dashboard-premium .notification-badge-info    { background: var(--info-soft);    color: var(--info);    border: 1px solid var(--info-soft); }
.dashboard-premium .notification-badge-warning { background: var(--warning-soft); color: var(--warning); border: 1px solid var(--glow-warning-sm); }
.dashboard-premium .notification-badge-error   { background: var(--danger-soft);  color: var(--danger);  border: 1px solid var(--glow-danger-sm); }
.dashboard-premium .notification-badge-success { background: var(--success-soft); color: var(--success); border: 1px solid var(--glow-success-sm); }
.dashboard-premium .notification-unread-dot    { width: 9px; height: 9px; border-radius: 999px; background: var(--neon-cyan); display: inline-block; box-shadow: 0 0 0 4px var(--glow-accent-sm); }
.dashboard-premium .plan-usage-card            { grid-column: 1 / -1; }
.dashboard-premium .plan-usage-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; width: 100%; margin: 0; padding: 0; }
.dashboard-premium .plan-usage-item { background: var(--overlay-card-a); border: 1px solid var(--border-light); border-radius: 16px; padding: 16px 18px; }
.dashboard-premium .plan-usage-item strong { display: block; margin-bottom: 6px; color: var(--text-primary); font-size: 14px; }
.dashboard-premium .plan-usage-item span   { color: var(--text-secondary); font-family: var(--font-mono); font-size: 13px; }

/* ── Data Table ── */
.dashboard-premium .data-table { width: 100%; border-collapse: collapse; }
.dashboard-premium .data-table th { text-align: left; padding: 14px 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); background: var(--overlay-modal); border-bottom: 1px solid var(--border-light); }
.dashboard-premium .data-table td { padding: 14px 20px; font-size: 13px; color: var(--text-secondary); border-bottom: 1px solid var(--border-light); }
.dashboard-premium .data-table tr:last-child td { border-bottom: none; }
.dashboard-premium .data-table tr:hover td { background: var(--glow-primary-sm); }

/* ── Badges (Premium) ── */
.dashboard-premium .badge         { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.dashboard-premium .badge-success { background: var(--success-soft); color: var(--success); }
.dashboard-premium .badge-warning { background: var(--warning-soft); color: var(--warning); }
.dashboard-premium .badge-danger  { background: var(--danger-soft);  color: var(--danger); }
.dashboard-premium .badge-info    { background: var(--info-soft);    color: var(--info); }

/* ── Loading ── */
.dashboard-premium .loading-state   { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px; gap: 16px; }
.dashboard-premium .loading-spinner { width: 32px; height: 32px; border: 2px solid var(--border-primary); border-top-color: var(--neon-blue); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.dashboard-premium .loading-text    { font-size: 13px; color: var(--text-tertiary); }

/* ── Responsive (Premium) ── */
@media (max-width: 1080px) {
    .dashboard-premium .hero-layout              { grid-template-columns: 1fr; }
    .dashboard-premium .hero-side-panel          { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-premium .dashboard-section-heading{ align-items: start; flex-direction: column; }
    .dashboard-premium .dashboard-section-copy   { max-width: none; text-align: left; }
}
@media (max-width: 720px) {
    .dashboard-premium .hero-section             { padding: 24px 22px; }
    .dashboard-premium .hero-side-panel,
    .dashboard-premium .quick-actions-grid       { grid-template-columns: 1fr; }
    .dashboard-premium .dashboard-section-title  { font-size: 20px; }
    .dashboard-premium .hero-side-value          { font-size: 24px; }
    .dashboard-premium .recent-link              { width: 100%; }
}
@media (max-width: 768px) {
    .dashboard-premium .hero-section   { padding: 24px; }
    .dashboard-premium .hero-greeting  { font-size: 22px; }
    .dashboard-premium .stat-value     { font-size: 28px; }
    .dashboard-premium .quick-actions-header { padding: 18px 18px 10px; }
    .dashboard-premium .quick-actions-grid   { padding: 16px 18px 18px; }
}
@media (max-width: 480px) {
    .dashboard-premium .hero-meta      { flex-direction: column; gap: 8px; }
    .dashboard-premium .quick-actions-title { font-size: 18px; }
    .dashboard-premium .quick-actions-subtitle { font-size: 12px; }
    .dashboard-premium .quick-actions-grid { padding: 14px; }
    .dashboard-premium .quick-action-btn {
        grid-template-columns: auto 1fr;
        min-height: auto;
        padding: 14px;
        gap: 12px;
    }
    .dashboard-premium .quick-action-arrow {
        display: none;
    }
    .dashboard-premium .quick-action-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
    .dashboard-premium .quick-action-content {
        gap: 4px;
    }
    .dashboard-premium .quick-action-content strong {
        font-size: 14px;
    }
    .dashboard-premium .quick-action-content small {
        font-size: 11px;
    }
    .dashboard-premium .chart-card-header { align-items: flex-start; }
    .dashboard-premium .hero-section,
    .dashboard-premium .stat-card,
    .dashboard-premium .chart-card,
    .dashboard-premium .recent-activities,
    .dashboard-premium .quick-actions-wrapper {
        border-radius: 16px;
    }
    .dashboard-premium .chart-card-body,
    .dashboard-premium .recent-body,
    .dashboard-premium .quick-actions-grid,
    .dashboard-premium .notification-metrics-grid {
        padding-left: 0;
        padding-right: 0;
    }
}