/* ══════════════════════════════════════════════════════════════════
   Theme variables — applied via <html data-theme="dark|light">
   Dark (charcoal) is the default when no attribute is present.
   ══════════════════════════════════════════════════════════════════ */

/* ── Dark / charcoal (default) ───────────────────────────────────── */
html,
html[data-theme="dark"] {
    --t-bg:          #1c1c26;
    --t-card:        rgba(255,255,255,0.055);
    --t-card-bdr:    rgba(255,255,255,0.10);
    --t-modal:       #252530;
    --t-modal-hdr:   rgba(12,12,20,0.55);
    --t-modal-ftr:   rgba(12,12,20,0.35);
    --t-input:       rgba(12,12,20,0.65);
    --t-input-bdr:   rgba(255,255,255,0.12);
    --t-thead:       rgba(12,12,20,0.70);
    --t-thead-txt:   #94a3b8;
    --t-row-alt:     rgba(255,255,255,0.026);
    --t-row-hover:   rgba(59,130,246,0.08);
    --t-row-bdr:     rgba(255,255,255,0.05);
    --t-header:      rgba(18,18,28,0.94);
    --t-header-bdr:  rgba(255,255,255,0.08);
    --t-footer:      #131318;
    --t-footer-txt:  #475569;

    --t-txt-h:       #f1f5f9;
    --t-txt:         #cbd5e1;
    --t-txt-muted:   #8b9aac;
    --t-txt-label:   #94a3b8;

    --t-accent:      #3b82f6;
    --t-accent-bg:   rgba(59,130,246,0.18);
    --t-link:        #93c5fd;
    --t-link-hover:  #bfdbfe;

    --t-shadow-sm:   0 4px 24px rgba(0,0,0,0.4);
    --t-shadow-lg:   0 25px 60px rgba(0,0,0,0.6);
    --t-card-shadow: 0 4px 24px rgba(0,0,0,0.4);
    --t-blur:        blur(14px);
    --t-btn-close-filter: invert(1) brightness(0.65);

    --t-secondary-btn:     rgba(255,255,255,0.10);
    --t-secondary-btn-bdr: rgba(255,255,255,0.15);
    --t-secondary-btn-txt: #cbd5e1;
    --t-dropdown:          #252530;
    --t-dropdown-bdr:      rgba(255,255,255,0.10);
    --t-dropdown-item:     #94a3b8;
    --t-dropdown-hover-bg: rgba(255,255,255,0.07);
    --t-dropdown-hover-txt:#f1f5f9;
    --t-check-bg:          rgba(255,255,255,0.08);
    --t-check-bdr:         rgba(255,255,255,0.20);

    --t-b-green-bg:  transparent;  --t-b-green-txt: #34d399;  --t-b-green-bdr: #34d399;
    --t-b-grey-bg:   transparent;  --t-b-grey-txt:  #94a3b8;  --t-b-grey-bdr:  rgba(255,255,255,0.30);
    --t-b-amber-bg:  transparent;  --t-b-amber-txt: #fbbf24;  --t-b-amber-bdr: #fbbf24;
    --t-b-red-bg:    transparent;  --t-b-red-txt:   #fb7185;  --t-b-red-bdr:   #fb7185;

    --t-a-success-bg: rgba(16,185,129,0.15);  --t-a-success-bdr: rgba(16,185,129,0.3);  --t-a-success-txt: #34d399;
    --t-a-danger-bg:  rgba(244,63,94,0.15);   --t-a-danger-bdr:  rgba(244,63,94,0.3);   --t-a-danger-txt:  #fb7185;
    --t-a-warning-bg: rgba(245,158,11,0.15);  --t-a-warning-bdr: rgba(245,158,11,0.3);  --t-a-warning-txt: #fbbf24;
    --t-a-info-bg:    rgba(59,130,246,0.15);  --t-a-info-bdr:    rgba(59,130,246,0.3);  --t-a-info-txt:    #60a5fa;

    --t-pg-bg: rgba(255,255,255,0.05); --t-pg-bdr: rgba(255,255,255,0.10); --t-pg-txt: #94a3b8;
    --t-pg-h-bg: rgba(59,130,246,0.2); --t-pg-h-bdr: rgba(59,130,246,0.4); --t-pg-h-txt: #60a5fa;
    --t-pg-act: #3b82f6;
    --t-pg-dis-bg: rgba(255,255,255,0.03); --t-pg-dis-txt: #475569;

    --t-bg-gradient:
        radial-gradient(ellipse at 15% 15%, rgba(59,130,246,0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 80%, rgba(16,185,129,0.09) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 5%,  rgba(139,92,246,0.07) 0%, transparent 40%);

    /* Toggle switch */
    --ts-track:  rgba(255,255,255,0.10);
    --ts-border: rgba(255,255,255,0.15);
}

/* ── Light theme ─────────────────────────────────────────────────── */
html[data-theme="light"] {
    --t-bg:          #f0f2f5;
    --t-card:        #ffffff;
    --t-card-bdr:    #e2e8f0;
    --t-modal:       #ffffff;
    --t-modal-hdr:   #f8fafc;
    --t-modal-ftr:   #f8fafc;
    --t-input:       #ffffff;
    --t-input-bdr:   #d1d5db;
    --t-thead:       #f1f5f9;
    --t-thead-txt:   #6b7280;
    --t-row-alt:     #f8fafc;
    --t-row-hover:   #eff6ff;
    --t-row-bdr:     #e5e7eb;
    --t-header:      rgba(255,255,255,0.97);
    --t-header-bdr:  #e2e8f0;
    --t-footer:      #f1f5f9;
    --t-footer-txt:  #6b7280;

    --t-txt-h:       #111827;
    --t-txt:         #374151;
    --t-txt-muted:   #6b7280;
    --t-txt-label:   #4b5563;

    --t-accent:      #2563eb;
    --t-accent-bg:   #eff6ff;
    --t-link:        #2563eb;
    --t-link-hover:  #1d4ed8;

    --t-shadow-sm:   0 1px 8px rgba(0,0,0,0.08);
    --t-shadow-lg:   0 8px 32px rgba(0,0,0,0.12);
    --t-card-shadow: 0 1px 6px rgba(0,0,0,0.08);
    --t-blur:        none;
    --t-btn-close-filter: none;

    --t-secondary-btn:     #f3f4f6;
    --t-secondary-btn-bdr: #d1d5db;
    --t-secondary-btn-txt: #374151;
    --t-dropdown:          #ffffff;
    --t-dropdown-bdr:      #e2e8f0;
    --t-dropdown-item:     #374151;
    --t-dropdown-hover-bg: #f3f4f6;
    --t-dropdown-hover-txt:#111827;
    --t-check-bg:          #ffffff;
    --t-check-bdr:         #d1d5db;

    --t-b-green-bg:  transparent;  --t-b-green-txt: #16a34a;  --t-b-green-bdr: #16a34a;
    --t-b-grey-bg:   transparent;  --t-b-grey-txt:  #6b7280;  --t-b-grey-bdr:  #9ca3af;
    --t-b-amber-bg:  transparent;  --t-b-amber-txt: #b45309;  --t-b-amber-bdr: #b45309;
    --t-b-red-bg:    transparent;  --t-b-red-txt:   #dc2626;  --t-b-red-bdr:   #dc2626;

    --t-a-success-bg: #f0fdf4;   --t-a-success-bdr: #86efac;  --t-a-success-txt: #15803d;
    --t-a-danger-bg:  #fef2f2;   --t-a-danger-bdr:  #fca5a5;  --t-a-danger-txt:  #dc2626;
    --t-a-warning-bg: #fffbeb;   --t-a-warning-bdr: #fde68a;  --t-a-warning-txt: #b45309;
    --t-a-info-bg:    #eff6ff;   --t-a-info-bdr:    #93c5fd;  --t-a-info-txt:    #1d4ed8;

    --t-pg-bg: #ffffff; --t-pg-bdr: #d1d5db; --t-pg-txt: #6b7280;
    --t-pg-h-bg: #eff6ff; --t-pg-h-bdr: #93c5fd; --t-pg-h-txt: #2563eb;
    --t-pg-act: #2563eb;
    --t-pg-dis-bg: #f9fafb; --t-pg-dis-txt: #9ca3af;

    --t-bg-gradient: none;

    /* Toggle switch */
    --ts-track:  #dbeafe;
    --ts-border: #93c5fd;
}

/* ══════════════════════════════════════════════════════════════════
   TOGGLE SWITCH — shared across all layouts (loaded via theme-vars)
   ══════════════════════════════════════════════════════════════════ */
.theme-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 52px;
    height: 26px;
    border-radius: 99px;
    background: var(--ts-track);
    border: 1px solid var(--ts-border);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background .25s, border-color .25s;
    vertical-align: middle;
}

/* Sliding thumb */
.ts-thumb {
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--t-accent);
    transition: left .25s cubic-bezier(.4, 0, .2, 1);
    z-index: 1;
    box-shadow: 0 1px 5px rgba(0,0,0,0.35);
}

html[data-theme="light"] .ts-thumb {
    left: 28px;
    background: #facc15;                          /* bright sun */
    box-shadow: 0 0 8px rgba(250,204,21,0.75);
}

/* Moon icon (left side) */
.ts-moon {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    z-index: 2;
    pointer-events: none;
    color: #fff;
    transition: color .25s;
}

/* Sun icon (right side) */
.ts-sun {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    z-index: 2;
    pointer-events: none;
    color: rgba(255,255,255,0.45);
    transition: color .25s;
}

/* Active icon lit, inactive dimmed */
html[data-theme="light"] .ts-moon { color: rgba(0,0,0,0.30); }
html[data-theme="light"] .ts-sun  { color: #7c2d12; }   /* dark amber — contrast on the bright sun thumb */

/* ══════════════════════════════════════════════════════════════════
   STATUS TAG — one class per DB status drives icon + color (FA6 Pro).
   Used in panel status badges and history tables across the app.
   ══════════════════════════════════════════════════════════════════ */
.status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
}
.status::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;          /* solid */
    font-style: normal;
    line-height: 1;
}
.status--pending  { color: #fb923c; }                 /* orange */
.status--pending::before  { content: "\f252"; }       /* hourglass-half */
.status--examined { color: #60a5fa; }                 /* blue   */
.status--examined::before { content: "\f058"; }       /* circle-check   */
.status--approved { color: #34d399; }                 /* green  */
.status--approved::before { content: "\f164"; }       /* thumbs-up      */
.status--disputed { color: #f87171; }                 /* red    */
.status--disputed::before { content: "\f024"; }       /* flag           */

/* Review-request statuses (pending / approved / completed / cancelled) */
.status--req-pending   { color: #fb923c; }
.status--req-pending::before   { content: "\f252"; }   /* hourglass-half */
.status--req-approved  { color: #34d399; }
.status--req-approved::before  { content: "\f164"; }   /* thumbs-up      */
.status--req-completed { color: #60a5fa; }
.status--req-completed::before { content: "\f560"; }   /* check-double   */
.status--req-cancelled { color: #f87171; }
.status--req-cancelled::before { content: "\f057"; }   /* circle-xmark   */