:root {
    --pgs-primary: #F97316;
    --pgs-accent: #FDE047;
}

html[data-theme="dark"] {
    --pgs-bg: #18181B;
    --pgs-surface: #27272A;
    --pgs-surface-alt: #18181B;
    --pgs-text: #FAFAFA;
    --pgs-text-muted: #A1A1AA;
    --pgs-border: rgba(113, 113, 122, 0.55);
    --pgs-shadow: 0 18px 50px rgba(0, 0, 0, 0.50);
    --pgs-accent-ink: #FDE047;
    --pgs-soft-pill-bg: rgba(253, 224, 71, 0.15);
    --pgs-soft-pill-text: #FDE047;
    --pgs-panel-tint: rgba(24, 24, 27, 0.88);

    /* Neon Specific Tokens (Dark) */
    --neon-card-bg: #09090b;
    --neon-card-border: rgba(39, 39, 42, 0.8);
    --neon-table-header-bg: rgba(24, 24, 27, 0.6);
    --neon-row-hover: rgba(39, 39, 42, 0.3);
    --neon-text-primary: #FAFAFA;
    --neon-text-secondary: #A1A1AA;
}

html[data-theme="light"] {
    --pgs-bg: #EEF2F7;
    --pgs-surface: #FFFFFF;
    --pgs-surface-alt: #E7EDF5;
    --pgs-text: #18181B;
    --pgs-text-muted: #3F3F46;
    --pgs-border: rgba(24, 24, 27, 0.12);
    --pgs-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    --pgs-accent-ink: #A16207;
    --pgs-soft-pill-bg: rgba(245, 158, 11, 0.12);
    --pgs-soft-pill-text: #92400E;
    --pgs-panel-tint: rgba(255, 255, 255, 0.92);

    /* Neon Specific Tokens (Light) */
    --neon-card-bg: #FFFFFF;
    --neon-card-border: rgba(15, 23, 42, 0.12);
    --neon-table-header-bg: #F8FAFC;
    --neon-row-hover: rgba(15, 23, 42, 0.02);
    --neon-text-primary: #0F172A;
    --neon-text-secondary: #475569;
}

body {
    background: radial-gradient(circle at top, rgba(249, 115, 22, 0.10), transparent 22%), var(--pgs-bg);
    color: var(--pgs-text);
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.025em;
}

svg {
    flex-shrink: 0;
    shape-rendering: geometricPrecision;
    vector-effect: non-scaling-stroke;
}

button svg,
a svg,
span svg {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pgs-scrollbar::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.pgs-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(249, 115, 22, 0.55);
    border-radius: 999px;
}

.chart-shell {
    position: relative;
    min-height: 320px;
}

.auth-stage {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 18%, rgba(253, 224, 71, 0.08), transparent 18%),
        radial-gradient(circle at 82% 14%, rgba(249, 115, 22, 0.12), transparent 22%),
        radial-gradient(circle at 50% 100%, rgba(59, 130, 246, 0.10), transparent 28%),
        linear-gradient(180deg, color-mix(in srgb, var(--pgs-bg) 92%, white 8%) 0%, var(--pgs-bg) 100%);
}

.auth-stage::before,
.auth-stage::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(56px);
}

.auth-stage::before {
    width: 220px;
    height: 220px;
    top: -60px;
    left: -30px;
    background: rgba(249, 115, 22, 0.12);
}

.auth-stage::after {
    width: 200px;
    height: 200px;
    right: -20px;
    bottom: -30px;
    background: rgba(59, 130, 246, 0.10);
}

.auth-card {
    position: relative;
    background: linear-gradient(180deg, color-mix(in srgb, var(--pgs-surface) 94%, transparent 6%), color-mix(in srgb, var(--pgs-surface-alt) 92%, transparent 8%));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), var(--pgs-shadow), 0 0 26px rgba(249, 115, 22, 0.10);
}

.auth-card::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 22%, transparent 72%, rgba(249, 115, 22, 0.05));
    pointer-events: none;
}

.sidebar-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 999px;
    background: transparent;
    transition: background 0.2s ease, transform 0.2s ease;
    transform: scaleY(0.4);
}

.sidebar-link.is-active::before,
.sidebar-link:hover::before {
    background: var(--pgs-primary);
    transform: scaleY(1);
}

.live-pulse {
    position: relative;
    display: inline-flex;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--pgs-primary);
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.5);
    animation: pulseDot 1.8s infinite;
}

.theme-icon-moon,
html[data-theme="dark"] .theme-icon-sun,
html[data-theme="light"] .theme-icon-moon {
    display: none;
}

html[data-theme="dark"] .theme-icon-moon,
html[data-theme="light"] .theme-icon-sun {
    display: inline-flex;
}

@keyframes pulseDot {
    0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.45); }
    70% { box-shadow: 0 0 0 8px rgba(249, 115, 22, 0); }
    100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}

.kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.22), 0 18px 45px rgba(0,0,0,0.18);
}

.sparkline-bar {
    display: inline-block;
    width: 6px;
    border-radius: 999px;
    background: rgba(249, 115, 22, 0.85);
}

.shadow-glow {
    box-shadow: 0 0 0 1px rgba(249,115,22,.16), 0 18px 40px rgba(0,0,0,.16);
}

html[data-theme="light"] [class*="bg-[#27272A]"],
html[data-theme="light"] [class*="bg-[#27272A]/"],
html[data-theme="light"] [class*="bg-[#27272A]"] {
    background-color: var(--pgs-surface) !important;
}

html[data-theme="light"] [class*="bg-[#18181B]"],
html[data-theme="light"] [class*="bg-[#18181B]/"],
html[data-theme="light"] [class*="bg-[#18181B]"] {
    background-color: var(--pgs-surface-alt) !important;
}

html[data-theme="light"] [class*="text-[#FAFAFA]"],
html[data-theme="light"] [class*="text-[#fafafa]"] {
    color: var(--pgs-text) !important;
}

html[data-theme="light"] [class*="text-zinc-200"],
html[data-theme="light"] [class*="text-zinc-300"],
html[data-theme="light"] [class*="text-zinc-400"],
html[data-theme="light"] [class*="text-zinc-500"] {
    color: var(--pgs-text-muted) !important;
}

html[data-theme="light"] [class*="border-zinc-700"],
html[data-theme="light"] [class*="border-zinc-800"] {
    border-color: var(--pgs-border) !important;
}

html[data-theme="light"] [class*="from-zinc-700"][class*="via-zinc-800"][class*="to-zinc-900"] {
    background-image: linear-gradient(to right, #f3f4f6, #e4e4e7, #d4d4d8) !important;
    color: var(--pgs-text) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 10px 24px rgba(15,23,42,0.08) !important;
}

html[data-theme="light"] [class*="bg-black/40"],
html[data-theme="light"] [class*="bg-black/60"],
html[data-theme="light"] .bg-black\/70,
html[data-theme="light"] [class*="bg-black/80"] {
    background-color: rgba(15, 23, 42, 0.55) !important;
}

html[data-theme="light"] [class*="bg-zinc-900"] {
    background-color: color-mix(in srgb, var(--pgs-surface-alt) 95%, transparent) !important;
}

html[data-theme="light"] [class*="bg-zinc-800"] {
    background-color: color-mix(in srgb, var(--pgs-surface-alt) 98%, transparent) !important;
}

html[data-theme="light"] [class*="bg-[#09090b]"],
html[data-theme="light"] [class*="bg-[#0A0A0A]"],
html[data-theme="light"] [class*="bg-[#0a0a0a]"] {
    background-color: color-mix(in srgb, var(--pgs-surface) 95%, transparent) !important;
}

html[data-theme="light"] .hover\:bg-zinc-800:hover,
html[data-theme="light"] .hover\:bg-zinc-800\/50:hover,
html[data-theme="light"] .hover\:bg-zinc-800\/80:hover,
html[data-theme="light"] .hover\:bg-zinc-700:hover,
html[data-theme="light"] [class*="hover:bg-zinc-"]:hover {
    background-color: rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] .hover\:text-\[\#FAFAFA\]:hover,
html[data-theme="light"] .hover\:text-white:hover {
    color: var(--pgs-text) !important;
}

html[data-theme="light"] .hover\:border-\[\#F97316\]:hover {
    border-color: var(--pgs-primary) !important;
}

html[data-theme="light"] .text-\[\#FDE047\],
html[data-theme="light"] [class*="text-[#FDE047]"] {
    color: var(--pgs-accent-ink) !important;
}

html[data-theme="light"] .bg-\[\#FDE047\]\/15,
html[data-theme="light"] .bg-\[\#FDE047\]\/20,
html[data-theme="light"] [class*="bg-[#FDE047]/15"],
html[data-theme="light"] [class*="bg-[#FDE047]/20"] {
    background-color: var(--pgs-soft-pill-bg) !important;
}

html[data-theme="light"] .bg-\[\#F97316\]\/15,
html[data-theme="light"] .bg-\[\#F97316\]\/12,
html[data-theme="light"] [class*="bg-[#F97316]/15"],
html[data-theme="light"] [class*="bg-[#F97316]/12"] {
    background-color: rgba(249, 115, 22, 0.10) !important;
}

html[data-theme="light"] .bg-emerald-500\/20,
html[data-theme="light"] .bg-red-500\/20 {
    background-color: color-mix(in srgb, currentColor 10%, transparent) !important;
}

html[data-theme="light"] .text-red-300 {
    color: #B91C1C !important;
}

html[data-theme="light"] .text-emerald-300,
html[data-theme="light"] .text-emerald-400 {
    color: #047857 !important;
}

html[data-theme="light"] .text-red-400 {
    color: #DC2626 !important;
}

html[data-theme="light"] .text-\[\#18181B\],
html[data-theme="light"] [class*="text-[#18181B]"] {
    color: #18181B !important;
}

html[data-theme="light"] .bg-\[\#F97316\],
html[data-theme="light"] [class*="bg-[#F97316]"] {
    color: #18181B !important;
}

html[data-theme="light"] header,
html[data-theme="light"] aside,
html[data-theme="light"] .auth-card,
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .shadow-glow {
    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.10), 0 16px 32px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] header {
    background: rgba(255,255,255,0.88) !important;
}

html[data-theme="light"] aside {
    background: rgba(255,255,255,0.96) !important;
}

html[data-theme="light"] .rounded-2xl.bg-\[\#18181B\],
html[data-theme="light"] .rounded-2xl.bg-\[\#18181B\]\/85,
html[data-theme="light"] .rounded-2xl.bg-\[\#18181B\]\/90 {
    background-color: #EEF2F7 !important;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    color: var(--pgs-text) !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: #71717A !important;
}

html[data-theme="light"] .text-xs.uppercase.tracking-\[0\.3em\],
html[data-theme="light"] .text-xs.uppercase.tracking-\[0\.25em\],
html[data-theme="light"] .text-\[11px\].font-semibold.uppercase {
    color: var(--pgs-accent-ink) !important;
}

.admin-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.admin-block,
.admin-panel,
.admin-table-card,
.admin-form-card {
    border: 1px solid var(--pgs-border);
    background: color-mix(in srgb, var(--pgs-surface) 92%, transparent 8%);
    border-radius: 1.75rem;
    box-shadow: var(--pgs-shadow);
}

.admin-block {
    padding: 1.5rem;
}

.admin-page-hero {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
    align-items: stretch;
}

.admin-hero-main,
.admin-hero-side {
    border: 1px solid var(--pgs-border);
    border-radius: 2rem;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--pgs-surface) 96%, transparent 4%), color-mix(in srgb, var(--pgs-surface-alt) 94%, transparent 6%));
    padding: 1.6rem;
}

.admin-kicker {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--pgs-accent-ink);
}

.admin-title {
    margin-top: 0.55rem;
    font-size: clamp(1.8rem, 2vw, 2.6rem);
    line-height: 1.08;
    font-weight: 700;
    color: var(--pgs-text);
}

.admin-subtitle {
    margin-top: 0.75rem;
    max-width: 62ch;
    color: var(--pgs-text-muted);
    line-height: 1.65;
    font-size: 0.95rem;
}

.admin-meta-grid {
    margin-top: 1.25rem;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.admin-meta-card {
    border: 1px solid var(--pgs-border);
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--pgs-surface-alt) 88%, transparent 12%);
    padding: 0.95rem 1rem;
}

.admin-meta-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--pgs-text-muted);
}

.admin-meta-value {
    margin-top: 0.45rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--pgs-text);
}

.admin-actions-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1rem;
}

.admin-action-tile {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 70px;
    border: 1px solid var(--pgs-border);
    border-radius: 1.25rem;
    padding: 0.95rem 1rem;
    background: color-mix(in srgb, var(--pgs-surface-alt) 90%, transparent 10%);
    color: var(--pgs-text);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.admin-action-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(249, 115, 22, 0.35);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
}

.admin-action-icon,
.admin-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 1rem;
    background: rgba(249, 115, 22, 0.14);
    color: var(--pgs-primary);
}

.admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--pgs-border);
    border-radius: 1.5rem;
    padding: 1rem 1.1rem;
    background: color-mix(in srgb, var(--pgs-surface) 94%, transparent 6%);
}

.admin-toolbar-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.admin-input,
.admin-select,
.admin-textarea {
    width: 100%;
    border: 1px solid var(--pgs-border);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--pgs-surface-alt) 90%, transparent 10%);
    color: var(--pgs-text);
    padding: 0.85rem 1rem;
    font-size: 0.94rem;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.admin-input:focus,
.admin-select:focus,
.admin-textarea:focus {
    outline: none;
    border-color: rgba(249, 115, 22, 0.55);
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.12);
}
.admin-select option {
    background-color: #18181B;
    color: #FAFAFA;
}
html[data-theme="light"] .admin-select option {
    background-color: #FFFFFF;
    color: #0F172A;
}

.admin-button,
.admin-button-secondary,
.admin-button-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.8rem 1rem;
    border-radius: 1rem;
    font-size: 0.92rem;
    font-weight: 600;
    transition: transform 180ms ease, opacity 180ms ease, border-color 180ms ease, background 180ms ease;
}

.admin-button {
    background: var(--pgs-primary);
    color: #18181B;
}

.admin-button:hover,
.admin-button-secondary:hover,
.admin-button-danger:hover {
    transform: translateY(-1px);
}

.admin-button-secondary {
    border: 1px solid var(--pgs-border);
    color: var(--pgs-text);
    background: color-mix(in srgb, var(--pgs-surface-alt) 92%, transparent 8%);
}

.admin-button-danger {
    background: rgba(239, 68, 68, 0.16);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.24);
}

.admin-stats-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.admin-stat-card {
    position: relative;
    overflow: hidden;
    padding: 1.2rem;
    border: 1px solid var(--pgs-border);
    border-radius: 1.5rem;
    background: color-mix(in srgb, var(--pgs-surface) 96%, transparent 4%);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.admin-stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(249, 115, 22, 0.32);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
}

.admin-stat-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.admin-stat-title {
    color: var(--pgs-text-muted);
    font-size: 0.84rem;
}

.admin-stat-value {
    margin-top: 0.8rem;
    font-size: clamp(2rem, 2.2vw, 2.6rem);
    line-height: 1;
    font-weight: 700;
    color: var(--pgs-text);
}

.admin-stat-note {
    margin-top: 0.8rem;
    color: var(--pgs-text-muted);
    font-size: 0.84rem;
}

.admin-stat-link {
    margin-top: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--pgs-primary);
    font-size: 0.84rem;
    font-weight: 600;
}

.admin-two-column {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
}

.admin-chart-card,
.admin-list-card,
.admin-table-card,
.admin-form-card,
.admin-feed-card {
    padding: 1.25rem;
}

.admin-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.admin-card-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--pgs-text);
}

.admin-card-copy {
    color: var(--pgs-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.admin-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 30px;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: var(--pgs-soft-pill-bg);
    color: var(--pgs-soft-pill-text);
    font-size: 0.76rem;
    font-weight: 700;
}

/* ==========================================
   Matrix Typography Scaler (Readability)
   ========================================== */
.text-\[9px\] { font-size: 11px !important; }
.text-\[10px\] { font-size: 12px !important; }
.text-\[11px\] { font-size: 13.5px !important; }
.text-xs { font-size: 14px !important; }
.text-\[12px\] { font-size: 14px !important; }
.text-\[13px\] { font-size: 15px !important; }
.text-sm { font-size: 15.5px !important; }

/* ==========================================
   Semantic Badge System
   ========================================== */
.pgs-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s ease;
}

.pgs-badge svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* ---- Success (Completed) ---- */
.pgs-badge--success {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    border-color: rgba(16, 185, 129, 0.25);
}
html[data-theme="dark"] .pgs-badge--success {
    background: rgba(16, 185, 129, 0.15);
    color: #34D399;
    border-color: rgba(16, 185, 129, 0.3);
}

/* ---- Danger (Unmet) ---- */
.pgs-badge--danger {
    background: rgba(239, 68, 68, 0.12);
    color: #B91C1C;
    border-color: rgba(239, 68, 68, 0.25);
}
html[data-theme="dark"] .pgs-badge--danger {
    background: rgba(239, 68, 68, 0.15);
    color: #F87171;
    border-color: rgba(239, 68, 68, 0.3);
}

/* ---- Warning (Late) ---- */
.pgs-badge--warning {
    background: rgba(245, 158, 11, 0.12);
    color: #B45309;
    border-color: rgba(245, 158, 11, 0.25);
}
html[data-theme="dark"] .pgs-badge--warning {
    background: rgba(245, 158, 11, 0.15);
    color: #FBBF24;
    border-color: rgba(245, 158, 11, 0.3);
}

/* ---- Critical (Overdue) ---- */
.pgs-badge--critical {
    background: rgba(220, 38, 38, 0.95);
    color: #FFFFFF;
    border-color: #B91C1C;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}
html[data-theme="dark"] .pgs-badge--critical {
    background: rgba(239, 68, 68, 0.95);
    color: #FFFFFF;
    border-color: #DC2626;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.35);
}

/* ---- Info (Pending / In Progress) ---- */
.pgs-badge--info {
    background: rgba(59, 130, 246, 0.12);
    color: #1D4ED8;
    border-color: rgba(59, 130, 246, 0.25);
}
html[data-theme="dark"] .pgs-badge--info {
    background: rgba(59, 130, 246, 0.15);
    color: #60A5FA;
    border-color: rgba(59, 130, 246, 0.3);
}

.admin-feed {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.admin-feed-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    border-radius: 1.15rem;
    border: 1px solid var(--pgs-border);
    background: color-mix(in srgb, var(--pgs-surface-alt) 90%, transparent 10%);
}

.admin-feed-title {
    color: var(--pgs-text);
    font-size: 0.92rem;
    font-weight: 600;
}

.admin-feed-meta {
    margin-top: 0.22rem;
    color: var(--pgs-text-muted);
    font-size: 0.78rem;
}

.admin-grid-2,
.admin-grid-3 {
    display: grid;
    gap: 1rem;
}

.admin-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.admin-table thead th {
    padding: 0.8rem 1rem;
    text-align: left;
    color: var(--pgs-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.admin-table tbody td {
    padding: 1rem;
    border-top: 1px solid var(--pgs-border);
    color: var(--pgs-text);
    vertical-align: top;
}

.admin-table tbody tr:hover td {
    background: color-mix(in srgb, var(--pgs-surface-alt) 84%, transparent 16%);
}

.admin-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--pgs-text-muted);
}

.admin-form-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-form-field label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--pgs-text);
    font-size: 0.84rem;
    font-weight: 600;
}

.admin-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.admin-surface-muted {
    background: color-mix(in srgb, var(--pgs-surface-alt) 88%, transparent 12%);
}

.admin-divider {
    height: 1px;
    background: var(--pgs-border);
}

.admin-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--pgs-border);
}

html[data-theme="light"] .admin-action-tile,
html[data-theme="light"] .admin-meta-card,
html[data-theme="light"] .admin-feed-item,
html[data-theme="light"] .admin-input,
html[data-theme="light"] .admin-select,
html[data-theme="light"] .admin-textarea,
html[data-theme="light"] .admin-toolbar {
    background: color-mix(in srgb, white 82%, var(--pgs-surface-alt) 18%);
}

html[data-theme="light"] .admin-table tbody tr:hover td {
    background: rgba(249, 115, 22, 0.05);
}

@media (max-width: 1279px) {
    .admin-page-hero,
    .admin-two-column,
    .admin-grid-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .admin-grid-2,
    .admin-form-grid,
    .admin-actions-grid,
    .admin-stats-grid {
        grid-template-columns: 1fr;
    }

    .admin-hero-main,
    .admin-hero-side,
    .admin-block,
    .admin-chart-card,
    .admin-list-card,
    .admin-table-card,
    .admin-form-card,
    .admin-feed-card {
        padding: 1rem;
    }
}

.admin-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(8px);
}

.admin-modal-panel {
    width: min(100%, 880px);
    max-height: calc(100vh - 3rem);
    overflow: auto;
    border-radius: 28px;
    border: 1px solid var(--pgs-border);
    background: var(--pgs-surface);
    padding: 1.5rem;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
}

.admin-modal-panel.admin-modal-panel-lg {
    width: min(100%, 1080px);
}

.admin-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.admin-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    border: 1px solid var(--pgs-border);
    background: var(--pgs-bg-muted);
    color: var(--pgs-text-muted);
    transition: all 180ms ease;
}

.admin-modal-close:hover {
    border-color: rgba(249, 115, 22, 0.25);
    color: var(--pgs-primary);
}

.admin-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

html[data-theme="dark"] .chart-shell {
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0));
}

html[data-theme="dark"] .chart-shell canvas {
    opacity: 1;
}

[x-cloak] { display: none !important; }

@media (max-width: 767px) {
    .chart-shell {
        min-height: 240px;
    }

    .admin-modal-backdrop {
        padding: 0.75rem;
        align-items: flex-end;
    }

    .admin-modal-panel,
    .admin-modal-panel.admin-modal-panel-lg {
        width: 100%;
        max-height: 88vh;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        padding: 1rem;
    }

    .admin-modal-head,
    .admin-modal-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-modal-footer > * {
        width: 100%;
    }
}

.pgs-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.pgs-topbar-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.pgs-topbar-brand {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
}

.pgs-topbar-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 1.35rem;
    border: 1px solid var(--pgs-border);
    background: color-mix(in srgb, var(--pgs-bg-muted) 88%, transparent 12%);
    color: var(--pgs-primary);
    flex-shrink: 0;
}

.pgs-topbar-title {
    margin-top: 0.35rem;
    font-size: clamp(1.55rem, 1.4vw, 2rem);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--pgs-text);
}

.pgs-topbar-copy {
    margin-top: 0.45rem;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--pgs-text-muted);
}

.pgs-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.pgs-profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 100%;
    padding: 0.55rem 0.7rem 0.55rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--pgs-border);
    background: color-mix(in srgb, var(--pgs-bg) 94%, transparent 6%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
}

.pgs-status-rail {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 2rem;
    padding: 0.2rem 0;
    color: var(--pgs-text-muted);
    font-size: 0.88rem;
}

@media (max-width: 1023px) {
    .pgs-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .pgs-topbar-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    .pgs-topbar-brand {
        gap: 0.75rem;
    }

    .pgs-topbar-mark {
        width: 3rem;
        height: 3rem;
        border-radius: 1rem;
    }

    .pgs-topbar-title {
        font-size: 1.45rem;
    }

    .pgs-topbar-copy {
        font-size: 0.86rem;
    }

    .pgs-topbar-actions {
        width: 100%;
    }

    .pgs-profile-chip {
        width: 100%;
        justify-content: space-between;
    }
}
.pgs-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.pgs-topbar-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    flex: 1 1 auto;
}

.pgs-topbar-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.pgs-topbar-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 1.35rem;
    border: 1px solid var(--pgs-border);
    background: color-mix(in srgb, var(--pgs-bg-muted) 88%, transparent 12%);
    color: var(--pgs-primary);
    flex-shrink: 0;
}

.pgs-topbar-title {
    margin-top: 0.35rem;
    font-size: clamp(1.55rem, 1.4vw, 2rem);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--pgs-text);
}

.pgs-topbar-copy {
    margin-top: 0.45rem;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--pgs-text-muted);
}

.pgs-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.pgs-profile-chip {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 210px;
    max-width: 100%;
    padding: 0.45rem 0.6rem 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--pgs-border);
    background: color-mix(in srgb, var(--pgs-bg) 94%, transparent 6%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
}

.pgs-status-rail {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 2rem;
    padding: 0.2rem 0;
    color: var(--pgs-text-muted);
    font-size: 0.88rem;
}

@media (max-width: 1023px) {
    .pgs-topbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
    }

    .pgs-topbar-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    .pgs-topbar {
        gap: 0.75rem;
    }

    .pgs-topbar-main {
        align-items: flex-start;
        gap: 0.75rem;
    }

    .pgs-topbar-brand {
        gap: 0.75rem;
        align-items: flex-start;
    }

    .pgs-topbar-mark {
        display: none;
    }

    .pgs-topbar-title {
        margin-top: 0.15rem;
        font-size: 1.15rem;
        line-height: 1.15;
    }

    .pgs-topbar-copy {
        display: none;
    }

    .pgs-topbar-actions {
        width: 100%;
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        align-items: center;
    }

    .pgs-profile-chip {
        min-width: 0;
        width: 100%;
        padding: 0.4rem 0.5rem 0.4rem 0.8rem;
    }

    .pgs-status-wrap {
        display: none;
    }
}
.pgs-simplebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 72px;
}

.pgs-simplebar-main {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    flex: 1 1 auto;
}

.pgs-simplebar-title {
    margin-top: 0.2rem;
    font-size: clamp(1.25rem, 1.25vw, 1.85rem);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--pgs-text);
}

.pgs-simplebar-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
}

.pgs-simplebar-user {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: 0.35rem;
}

@media (max-width: 767px) {
    .pgs-simplebar {
        min-height: 60px;
        gap: 0.75rem;
    }

    .pgs-simplebar-title {
        font-size: 1.05rem;
    }

    .pgs-simplebar-actions {
        gap: 0.15rem;
    }
}

.dashboard-filter-control {
    width: auto;
}

.dashboard-filter-search {
    width: 240px;
}

@media (max-width: 767px) {
    .admin-page,
    .admin-page-hero,
    .admin-two-column,
    .admin-toolbar,
    .admin-toolbar-group,
    .admin-card-header,
    .admin-feed-item,
    .admin-stat-row {
        min-width: 0;
    }

    .admin-toolbar {
        align-items: stretch;
    }

    .admin-toolbar-group {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .dashboard-filter-control,
    .dashboard-filter-search,
    .admin-button,
    .admin-button-secondary,
    .admin-chip {
        width: 100%;
    }

    .admin-card-header {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-feed-item,
    .admin-stat-row {
        gap: 0.75rem;
    }

    .admin-feed-item {
        flex-direction: column;
    }

    .admin-stat-row {
        align-items: flex-start;
    }

    .admin-icon-badge,
    .admin-action-icon {
        width: 2.5rem;
        height: 2.5rem;
    }

    .admin-table thead {
        display: none;
    }

    .admin-table,
    .admin-table tbody,
    .admin-table tr,
    .admin-table td {
        display: block;
        width: 100%;
    }

    .admin-table tr {
        border-top: 1px solid var(--pgs-border);
        padding: 0.4rem 0;
    }

    .admin-table tbody td {
        border-top: 0;
        padding: 0.55rem 0;
    }
}

.dashboard-filter-bar {
    padding: 0.85rem 1rem;
    border-radius: 1.25rem;
}

.dashboard-filter-bar .admin-toolbar-group {
    gap: 0.6rem;
}

.dashboard-filter-control {
    min-width: 120px;
    width: 120px;
    min-height: 40px;
    padding: 0.7rem 0.85rem;
    border-radius: 0.9rem;
    font-size: 0.88rem;
}

.dashboard-filter-search {
    width: 200px;
    min-height: 40px;
    padding: 0.7rem 0.85rem;
    border-radius: 0.9rem;
    font-size: 0.88rem;
}

.dashboard-filter-bar .admin-button {
    min-height: 40px;
    padding: 0.7rem 0.95rem;
    border-radius: 0.9rem;
    font-size: 0.88rem;
}

.dashboard-filter-bar .admin-chip {
    min-height: 40px;
    padding: 0.5rem 0.8rem;
    font-size: 0.74rem;
}

@media (max-width: 767px) {
    .dashboard-filter-bar {
        padding: 0.8rem;
    }

    .dashboard-filter-control,
    .dashboard-filter-search {
        width: 100%;
        min-width: 0;
    }
}

.dashboard-reference {
    gap: 1rem;
}

.dashboard-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.dashboard-page-title {
    font-size: 1.35rem;
    line-height: 1.1;
    font-weight: 700;
    color: var(--pgs-text);
}

.dashboard-page-subtitle {
    margin-top: 0.2rem;
    font-size: 0.82rem;
    color: var(--pgs-text-muted);
}

.dashboard-summary-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(180px, 0.9fr) minmax(0, 2.1fr);
}

.dashboard-completion-card,
.dashboard-mini-card,
.dashboard-panel-card,
.dashboard-table-card {
    border: 1px solid var(--pgs-border);
    border-radius: 1.1rem;
    background: color-mix(in srgb, var(--pgs-surface) 96%, transparent 4%);
}

.dashboard-completion-card {
    padding: 1.2rem;
    text-align: left;
}

.dashboard-card-label {
    font-size: 0.78rem;
    color: var(--pgs-text-muted);
}

.dashboard-completion-value {
    margin-top: 0.75rem;
    font-size: 3rem;
    line-height: 1;
    font-weight: 700;
    color: #0f766e;
}

html[data-theme="dark"] .dashboard-completion-value {
    color: #5eead4;
}

.dashboard-card-meta {
    margin-top: 0.5rem;
    font-size: 0.84rem;
    color: var(--pgs-text);
}

.dashboard-mini-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-mini-card {
    padding: 1rem 1.1rem;
    text-align: left;
}

.dashboard-mini-card-overdue { background: rgba(249, 115, 22, 0.08); }
.dashboard-mini-card-early { background: rgba(59, 130, 246, 0.10); }
.dashboard-mini-card-ontime { background: rgba(16, 185, 129, 0.10); }
.dashboard-mini-card-late { background: rgba(245, 158, 11, 0.12); }

.dashboard-mini-value {
    margin-top: 0.35rem;
    font-size: 2rem;
    line-height: 1;
    font-weight: 700;
    color: var(--pgs-text);
}

.dashboard-panel-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-panel-card,
.dashboard-table-card {
    padding: 1rem 1.1rem;
}

.dashboard-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.dashboard-panel-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pgs-text);
}

.dashboard-panel-muted {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--pgs-text-muted);
}

.dashboard-progress-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.dashboard-progress-row {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) minmax(90px, 1.5fr) 44px 46px;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
}

.dashboard-progress-name,
.dashboard-progress-percent,
.dashboard-progress-ratio {
    font-size: 0.82rem;
    color: var(--pgs-text);
}

.dashboard-progress-track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(161, 161, 170, 0.35);
}

.dashboard-progress-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.dashboard-progress-fill.is-good { background: #10b981; }
.dashboard-progress-fill.is-mid { background: #f59e0b; }
.dashboard-progress-fill.is-low { background: #ea580c; }

.dashboard-clean-table {
    width: 100%;
    border-collapse: collapse;
}

.dashboard-clean-table th,
.dashboard-clean-table td {
    padding: 0.8rem 0.65rem;
    text-align: left;
    border-top: 1px solid var(--pgs-border);
    font-size: 0.83rem;
    color: var(--pgs-text);
}

.dashboard-clean-table thead th {
    border-top: 0;
    color: var(--pgs-text-muted);
    font-size: 0.74rem;
    text-transform: none;
}

.dashboard-status-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.22rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 600;
}

.dashboard-status-pill.status-early { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.dashboard-status-pill.status-on-time { background: rgba(16, 185, 129, 0.12); color: #059669; }
.dashboard-status-pill.status-late { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.dashboard-status-pill.status-overdue { background: rgba(249, 115, 22, 0.12); color: #ea580c; }
.dashboard-status-pill.status-not-yet-due { background: rgba(161, 161, 170, 0.14); color: #52525b; }

@media (max-width: 1023px) {
    .dashboard-summary-grid,
    .dashboard-panel-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .dashboard-header-row,
    .dashboard-panel-head {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-mini-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-progress-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .dashboard-clean-table thead {
        display: none;
    }

    .dashboard-clean-table,
    .dashboard-clean-table tbody,
    .dashboard-clean-table tr,
    .dashboard-clean-table td {
        display: block;
        width: 100%;
    }

    .dashboard-clean-table tr {
        border-top: 1px solid var(--pgs-border);
        padding: 0.4rem 0;
    }

    .dashboard-clean-table td {
        border-top: 0;
        padding: 0.35rem 0;
    }
}

.dashboard-monitoring {
    gap: 1rem;
}

.dashboard-monitor-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dashboard-monitor-card {
    border: 1px solid var(--pgs-border);
    border-radius: 1.1rem;
    background: color-mix(in srgb, var(--pgs-surface) 96%, transparent 4%);
    padding: 1rem 1.1rem;
}

.dashboard-monitor-label {
    font-size: 0.78rem;
    color: var(--pgs-text-muted);
}

.dashboard-monitor-value {
    margin-top: 0.55rem;
    font-size: 2rem;
    line-height: 1;
    font-weight: 700;
    color: var(--pgs-text);
}

@media (max-width: 1279px) {
    .dashboard-monitor-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .dashboard-monitor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.dashboard-monitoring-refined {
    gap: 1.15rem;
}

.dashboard-header-row-tight {
    align-items: flex-start;
}

.dashboard-report-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.dashboard-compact-select {
    width: 104px;
    min-height: 38px;
    padding: 0.55rem 0.8rem;
    border-radius: 0.85rem;
    font-size: 0.82rem;
}

.dashboard-kpi-layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(180px, 0.85fr) minmax(0, 2.15fr);
}

.dashboard-focus-card,
.dashboard-timing-card,
.dashboard-panel-card-soft {
    border: 1px solid var(--pgs-border);
    border-radius: 1.1rem;
    background: color-mix(in srgb, var(--pgs-surface) 97%, transparent 3%);
}

.dashboard-focus-card {
    padding: 1.2rem;
}

.dashboard-focus-value {
    margin-top: 0.8rem;
    font-size: 3.1rem;
    line-height: 1;
    font-weight: 700;
    color: #10b981;
}

html[data-theme="dark"] .dashboard-focus-value {
    color: #34d399;
}

.dashboard-timing-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-timing-card {
    padding: 1rem 1.1rem;
}

.dashboard-timing-card.is-overdue { background: rgba(249, 115, 22, 0.08); }
.dashboard-timing-card.is-early { background: rgba(59, 130, 246, 0.10); }
.dashboard-timing-card.is-ontime { background: rgba(16, 185, 129, 0.10); }
.dashboard-timing-card.is-late { background: rgba(245, 158, 11, 0.12); }

.dashboard-timing-value {
    margin-top: 0.35rem;
    font-size: 2.2rem;
    line-height: 1;
    font-weight: 700;
    color: var(--pgs-text);
}

.dashboard-panel-card-soft {
    padding: 1rem 1.1rem;
}

.dashboard-progress-row-compact {
    grid-template-columns: minmax(120px, 1fr) minmax(90px, 1.45fr) 44px 52px;
}

.dashboard-clean-table-refined th,
.dashboard-clean-table-refined td {
    padding: 0.75rem 0.7rem;
}

@media (max-width: 1023px) {
    .dashboard-kpi-layout,
    .dashboard-panel-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .dashboard-report-controls {
        width: 100%;
    }

    .dashboard-compact-select,
    .dashboard-report-controls .admin-button-secondary {
        width: 100%;
    }

    .dashboard-timing-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-progress-row-compact {
        grid-template-columns: 1fr;
    }
}

.review-modal-panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.review-modal-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--pgs-border);
}

.review-modal-title {
    font-size: clamp(1.4rem, 2vw, 2rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--pgs-text);
}

.review-modal-subtitle {
    margin-top: 0.35rem;
    max-width: 48rem;
    color: var(--pgs-text-muted);
    font-size: 0.95rem;
}

.review-modal-head-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.review-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.review-status-pill.is-pending {
    background: rgba(245, 158, 11, 0.14);
    color: #f59e0b;
}

.review-status-pill.is-approved {
    background: rgba(16, 185, 129, 0.14);
    color: #10b981;
}

.review-status-pill.is-rejected {
    background: rgba(239, 68, 68, 0.14);
    color: #ef4444;
}

.review-modal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.9fr);
    gap: 1rem;
}

.review-panel,
.review-stat-card,
.review-info-card,
.review-action-bar {
    border: 1px solid var(--pgs-border);
    background: var(--pgs-surface-muted);
    border-radius: 24px;
}

.review-panel {
    padding: 1.2rem;
}

.review-panel-emphasis {
    background: linear-gradient(145deg, color-mix(in srgb, var(--pgs-primary) 10%, var(--pgs-surface-muted)), var(--pgs-surface-muted));
}

.review-panel-head,
.review-info-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.review-panel-icon,
.review-info-icon,
.review-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 16px;
    color: var(--pgs-primary);
    background: rgba(249, 115, 22, 0.14);
}

.review-panel-icon svg,
.review-info-icon svg,
.review-stat-icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

.review-panel-kicker,
.review-info-label,
.review-stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--pgs-text-muted);
}

.review-panel-title,
.review-info-title,
.review-stat-value {
    color: var(--pgs-text);
    font-size: 1rem;
    font-weight: 700;
}

.review-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.1rem;
    color: var(--pgs-text);
    font-size: 0.92rem;
    font-weight: 600;
}

.review-progress-track {
    margin-top: 0.6rem;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(161, 161, 170, 0.28);
}

.review-progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f97316, #fb923c);
}

.review-progress-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 1rem;
}

.review-progress-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    background: color-mix(in srgb, var(--pgs-surface) 78%, transparent);
}

.review-progress-item span,
.review-stat-note {
    color: var(--pgs-text-muted);
    font-size: 0.8rem;
}

.review-progress-item strong,
.review-info-copy {
    color: var(--pgs-text);
    font-size: 0.94rem;
}

.review-stat-stack {
    display: grid;
    gap: 0.85rem;
}

.review-stat-card {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem 1.05rem;
}

.review-stat-icon.is-blue {
    background: rgba(59, 130, 246, 0.14);
    color: #3b82f6;
}

.review-stat-icon.is-green {
    background: rgba(16, 185, 129, 0.14);
    color: #10b981;
}

.review-detail-grid {
    display: grid;
    gap: 1rem;
}

.review-info-card {
    padding: 1.15rem;
}

.review-info-card-wide {
    min-width: 0;
}

.review-info-copy {
    margin-top: 0.95rem;
    line-height: 1.7;
}

.review-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
}

.review-file-button,
.review-approve-button,
.review-reject-button {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.review-decision-group {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.85rem;
}

.review-decision-form {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.85rem;
}

.review-reject-form {
    display: flex;
    align-items: flex-end;
}

.review-result-note {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--pgs-text-muted);
    font-size: 0.9rem;
}

@media (max-width: 960px) {
    .review-modal-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .review-modal-hero,
    .review-action-bar,
    .review-result-note {
        flex-direction: column;
        align-items: stretch;
    }

    .review-modal-head-actions,
    .review-decision-group,
    .review-decision-form,
    .review-reject-form {
        width: 100%;
    }

    .review-progress-list {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   UI-UX PRO MAX: Dashboard KPIs
   ========================================== */

.dashboard-kpi-layout {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(280px, 1.2fr) minmax(0, 2fr);
    margin-bottom: 2rem;
}

@media (max-width: 1024px) {
    .dashboard-kpi-layout {
        grid-template-columns: 1fr;
    }
}

.dashboard-focus-card {
    position: relative;
    padding: 1.75rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(135deg, rgba(39, 39, 42, 0.8) 0%, rgba(24, 24, 27, 0.95) 100%);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255,255,255,0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.dashboard-focus-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.08);
    border-color: rgba(249, 115, 22, 0.2);
}
.dashboard-focus-card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.dashboard-card-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--pgs-text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dashboard-focus-value {
    font-size: clamp(3rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1;
    margin-top: 1rem;
    background: linear-gradient(to right, #34D399, #10B981);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.04em;
}

.dashboard-card-meta {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--pgs-text-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    display: inline-flex;
    width: fit-content;
}

.dashboard-timing-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.dashboard-timing-card {
    position: relative;
    padding: 1.25rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(39, 39, 42, 0.5) 0%, rgba(24, 24, 27, 0.85) 100%);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255,255,255,0.03);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}
.dashboard-timing-card:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.06);
}

.dashboard-timing-value {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    margin-top: 0.75rem;
    color: var(--pgs-text);
    letter-spacing: -0.03em;
}

.dashboard-timing-card.is-overdue { border-color: rgba(239, 68, 68, 0.2); }
.dashboard-timing-card.is-overdue::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    pointer-events: none;
    background: radial-gradient(circle at top right, rgba(239, 68, 68, 0.08) 0%, transparent 60%);
}
.dashboard-timing-card.is-overdue::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #EF4444, transparent);
    opacity: 0.8;
}
.dashboard-timing-card.is-overdue .dashboard-timing-value { color: #FCA5A5; }

.dashboard-timing-card.is-early { border-color: rgba(59, 130, 246, 0.2); }
.dashboard-timing-card.is-early::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    pointer-events: none;
    background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.08) 0%, transparent 60%);
}
.dashboard-timing-card.is-early::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #3B82F6, transparent);
    opacity: 0.8;
}
.dashboard-timing-card.is-early .dashboard-timing-value { color: #93C5FD; }

.dashboard-timing-card.is-ontime { border-color: rgba(16, 185, 129, 0.2); }
.dashboard-timing-card.is-ontime::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    pointer-events: none;
    background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.08) 0%, transparent 60%);
}
.dashboard-timing-card.is-ontime::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #10B981, transparent);
    opacity: 0.8;
}
.dashboard-timing-card.is-ontime .dashboard-timing-value { color: #6EE7B7; }

.dashboard-timing-card.is-late { border-color: rgba(245, 158, 11, 0.2); }
.dashboard-timing-card.is-late::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    pointer-events: none;
    background: radial-gradient(circle at top right, rgba(245, 158, 11, 0.08) 0%, transparent 60%);
}
.dashboard-timing-card.is-late::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #F59E0B, transparent);
    opacity: 0.8;
}
.dashboard-timing-card.is-late .dashboard-timing-value { color: #FCD34D; }

/* Light mode overrides for Pro Max UI */
html[data-theme="light"] .dashboard-focus-card,
html[data-theme="light"] .dashboard-timing-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03), inset 0 1px 0 rgba(255,255,255,1);
}
html[data-theme="light"] .dashboard-timing-value {
    color: #0F172A;
}
html[data-theme="light"] .dashboard-timing-card.is-overdue .dashboard-timing-value { color: #B91C1C; }
html[data-theme="light"] .dashboard-timing-card.is-early .dashboard-timing-value { color: #1D4ED8; }
html[data-theme="light"] .dashboard-timing-card.is-ontime .dashboard-timing-value { color: #047857; }
html[data-theme="light"] .dashboard-timing-card.is-late .dashboard-timing-value { color: #B45309; }
html[data-theme="light"] .dashboard-card-meta { background: rgba(15, 23, 42, 0.04); color: #475569; }

/* ==========================================
   UI-UX PRO MAX: NEON CRYPTO WIDGET DASHBOARD
   ========================================== */

/* Page & Grid Setup */
.neon-page {
    /* Use a very deep neon-ready background if body allows, else transparent */
    color: #e2e8f0;
    font-family: 'Inter', -apple-system, sans-serif;
}

.neon-grid-top {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(320px, 1.2fr) minmax(0, 2fr);
    margin-bottom: 1.25rem;
}

.neon-grid-timing {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.neon-grid-panels {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    margin-bottom: 1.25rem;
}

@media (max-width: 1024px) {
    .neon-grid-top { grid-template-columns: 1fr; }
}

/* Base Widget Card */
.neon-widget {
    background-color: rgba(10, 14, 23, 0.85);
    background-image: radial-gradient(circle at top right, rgba(255,255,255,0.02) 0%, transparent 60%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 1.25rem;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transition: all 0.25s ease;
}

.neon-widget:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

.neon-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    z-index: 2;
}

.neon-widget-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: 0.02em;
}

.neon-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
}

/* Themed Borders and Glows */
.neon-widget--orange { border: 1px solid rgba(249, 115, 22, 0.4); box-shadow: 0 0 20px rgba(249, 115, 22, 0.1); }
.neon-widget--orange .neon-icon-wrap { background: rgba(249, 115, 22, 0.15); color: #fdba74; }
.neon-widget--orange .neon-kpi-huge, .neon-widget--orange .neon-kpi-large { color: #f97316; text-shadow: 0 0 10px rgba(249, 115, 22, 0.4); }

.neon-widget--blue { border: 1px solid rgba(59, 130, 246, 0.4); box-shadow: 0 0 20px rgba(59, 130, 246, 0.1); }
.neon-widget--blue .neon-icon-wrap { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
.neon-widget--blue .neon-kpi-large { color: #60a5fa; text-shadow: 0 0 10px rgba(59, 130, 246, 0.4); }

.neon-widget--green { border: 1px solid rgba(16, 185, 129, 0.4); box-shadow: 0 0 20px rgba(16, 185, 129, 0.1); }
.neon-widget--green .neon-icon-wrap { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
.neon-widget--green .neon-kpi-large { color: #34d399; text-shadow: 0 0 10px rgba(16, 185, 129, 0.4); }

.neon-widget--amber { border: 1px solid rgba(245, 158, 11, 0.4); box-shadow: 0 0 20px rgba(245, 158, 11, 0.1); }
.neon-widget--amber .neon-icon-wrap { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
.neon-widget--amber .neon-kpi-large { color: #fbbf24; text-shadow: 0 0 10px rgba(245, 158, 11, 0.4); }

.neon-widget--red { border: 1px solid rgba(239, 68, 68, 0.4); box-shadow: 0 0 20px rgba(239, 68, 68, 0.1); }
.neon-widget--red .neon-icon-wrap { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.neon-widget--red .neon-kpi-large { color: #f87171; text-shadow: 0 0 10px rgba(239, 68, 68, 0.4); }

/* KPI Values */
.neon-kpi-huge {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    z-index: 2;
    position: relative;
    letter-spacing: -0.02em;
}

.neon-kpi-large {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    z-index: 2;
    position: relative;
}

.neon-widget-pill {
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-weight: 500;
}

/* Faux Chart Lines */
.neon-widget-chart-placeholder {
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 40px;
    opacity: 0.3;
    pointer-events: none;
    z-index: 1;
}

/* Table Widget */
.neon-table-wrapper {
    overflow-x: auto;
    width: 100%;
}
.neon-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    text-align: left;
}
.neon-table th {
    color: #94a3b8;
    font-weight: 500;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.neon-table td {
    padding: 0.85rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.neon-table tr:last-child td { border-bottom: none; }
.neon-td-strong { color: #f8fafc; font-weight: 500; }
.neon-td-muted { color: #94a3b8; }
.neon-td-bright { color: #cbd5e1; font-family: monospace; }
.neon-status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
}
.neon-stat--green { color: #10b981; background-color: #10b981; box-shadow: 0 0 8px #10b981; }
.neon-stat--orange { color: #f97316; background-color: #f97316; box-shadow: 0 0 8px #f97316; }
.neon-stat--amber { color: #f59e0b; background-color: #f59e0b; box-shadow: 0 0 8px #f59e0b; }
.neon-stat--red { color: #ef4444; background-color: #ef4444; box-shadow: 0 0 8px #ef4444; }
.neon-stat--blue { color: #3b82f6; background-color: #3b82f6; box-shadow: 0 0 8px #3b82f6; }

/* Progress Bars */
.neon-progress-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.neon-progress-item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.neon-progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 500;
}
.neon-progress-stats { color: #cbd5e1; }
.neon-muted { color: #64748b; font-size: 0.7rem; }
.neon-progress-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.neon-progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.5s ease;
    position: relative;
}
.neon-bar--green { background: linear-gradient(90deg, #059669, #10b981); box-shadow: 0 0 10px rgba(16, 185, 129, 0.4); }
.neon-bar--blue { background: linear-gradient(90deg, #2563eb, #3b82f6); box-shadow: 0 0 10px rgba(59, 130, 246, 0.4); }
.neon-bar--orange { background: linear-gradient(90deg, #ea580c, #f97316); box-shadow: 0 0 10px rgba(249, 115, 22, 0.4); }
.neon-progress-glow {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 20px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8));
    border-radius: 999px;
    filter: blur(2px);
}

.neon-link-action {
    color: #94a3b8;
    font-size: 0.75rem;
    text-decoration: none;
    background: rgba(255,255,255,0.05);
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    transition: all 0.2s;
}
.neon-link-action:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

.neon-empty {
    text-align: center;
    color: #64748b;
    font-size: 0.85rem;
    padding: 2rem 0;
}

/* ==========================================
   LIGHT THEME OVERRIDES FOR NEON WIDGETS
   ========================================== */

html[data-theme="light"] .neon-page {
    color: #0F172A; /* slate-900 */
}

/* Glass Card Light Mode */
html[data-theme="light"] .neon-widget {
    background-color: rgba(241, 245, 249, 0.92); /* Soft cool-grey glassmorphism */
    background-image: none;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.10);
}

html[data-theme="light"] .neon-widget:hover {
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08), 0 12px 32px rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.14);
}

/* Headers and Texts */
html[data-theme="light"] .neon-widget-title { color: #334155; } /* slate-700 */
html[data-theme="light"] .neon-kpi-huge, 
html[data-theme="light"] .neon-kpi-large { color: #0F172A; } /* slate-900 */
html[data-theme="light"] .neon-widget-pill { background: rgba(15, 23, 42, 0.06); color: #475569; }

/* Themed Colors Re-calibration for Light Mode (Removing white shadow bleeding) */
html[data-theme="light"] .neon-widget--orange .neon-kpi-huge, 
html[data-theme="light"] .neon-widget--orange .neon-kpi-large { color: #EA580C; text-shadow: none; }
html[data-theme="light"] .neon-widget--orange .neon-icon-wrap { background: rgba(234, 88, 12, 0.1); color: #C2410C; }

html[data-theme="light"] .neon-widget--blue .neon-kpi-large { color: #2563EB; text-shadow: none; }
html[data-theme="light"] .neon-widget--blue .neon-icon-wrap { background: rgba(37, 99, 235, 0.1); color: #1D4ED8; }

html[data-theme="light"] .neon-widget--green .neon-kpi-large { color: #059669; text-shadow: none; }
html[data-theme="light"] .neon-widget--green .neon-icon-wrap { background: rgba(5, 150, 105, 0.1); color: #047857; }

html[data-theme="light"] .neon-widget--amber .neon-kpi-large { color: #D97706; text-shadow: none; }
html[data-theme="light"] .neon-widget--amber .neon-icon-wrap { background: rgba(217, 119, 6, 0.1); color: #B45309; }

html[data-theme="light"] .neon-widget--red .neon-kpi-large { color: #DC2626; text-shadow: none; }
html[data-theme="light"] .neon-widget--red .neon-icon-wrap { background: rgba(220, 38, 38, 0.1); color: #B91C1C; }

/* Faux Chart Lines */
html[data-theme="light"] .neon-widget-chart-placeholder { opacity: 0.15; color: #0F172A; }

/* Table Adjustments — visible grid borders for light mode */
html[data-theme="light"] .neon-table {
    border: 1px solid #94A3B8;
}
html[data-theme="light"] .neon-table th {
    color: #0F172A;
    font-weight: 700;
    background-color: #E2E8F0;
    border-bottom: 2px solid #64748B;
    border-right: 1px solid #94A3B8;
}
html[data-theme="light"] .neon-table th:last-child {
    border-right: none;
}
html[data-theme="light"] .neon-table td {
    color: #1E293B;
    border-bottom: 1px solid #CBD5E1;
    border-right: 1px solid #CBD5E1;
}
html[data-theme="light"] .neon-table td:last-child {
    border-right: none;
}
html[data-theme="light"] .neon-table tbody tr:hover td {
    background-color: rgba(59, 130, 246, 0.06);
}
html[data-theme="light"] .neon-table tbody tr:nth-child(even) td {
    background-color: #F1F5F9;
}
html[data-theme="light"] .neon-td-strong { color: #0F172A; }
html[data-theme="light"] .neon-td-muted { color: #64748B; }
html[data-theme="light"] .neon-td-bright { color: #334155; }

/* Neon widgets — solid border frame for light mode */
html[data-theme="light"] .neon-widget {
    border: 1px solid #94A3B8 !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08) !important;
}

/* Progress card items — visible borders */
html[data-theme="light"] .neon-widget .border.border-zinc-800\/60,
html[data-theme="light"] .neon-widget [class*="border-zinc-800"] {
    border-color: #94A3B8 !important;
}

/* Progress Bar Overrides */
html[data-theme="light"] .neon-progress-name { color: #334155; }
html[data-theme="light"] .neon-progress-stats { color: #475569; }
html[data-theme="light"] .neon-progress-track { background: rgba(15, 23, 42, 0.08); }
html[data-theme="light"] .neon-progress-glow { filter: blur(5px); opacity: 0.5; }
html[data-theme="light"] .neon-link-action { color: #475569; background: rgba(15, 23, 42, 0.06); }
html[data-theme="light"] .neon-link-action:hover { color: #0F172A; background: rgba(15, 23, 42, 0.10); }
html[data-theme="light"] .neon-empty { color: #94A3B8; }

/* Table Status Text Colors */
.neon-text--green { color: #10b981; font-weight: 500; }
.neon-text--orange { color: #f97316; font-weight: 500; }
.neon-text--amber { color: #f59e0b; font-weight: 500; }
.neon-text--red { color: #ef4444; font-weight: 500; }
.neon-text--blue { color: #3b82f6; font-weight: 500; }

html[data-theme="light"] .neon-text--green { color: #047857; }
html[data-theme="light"] .neon-text--orange { color: #C2410C; }
html[data-theme="light"] .neon-text--amber { color: #B45309; }
html[data-theme="light"] .neon-text--red { color: #B91C1C; }
html[data-theme="light"] .neon-text--blue { color: #1D4ED8; }

/* Dashboard Controls */
.dashboard-report-controls {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
.neon-input-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    color-scheme: dark;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.neon-input-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.neon-input-select option {
    background-color: #18181B;
    color: #E2E8F0;
}
.neon-input-select option:disabled {
    color: #71717A;
}

.neon-btn-primary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}
.neon-btn-primary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
    transform: translateY(-1px);
}

/* Light Mode Overrides for controls & text */
html[data-theme="light"] .neon-input-select {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.1);
    color: #0F172A;
    color-scheme: light;
}
html[data-theme="light"] .neon-input-select:disabled {
    opacity: 0.6;
}
html[data-theme="light"] .neon-input-select option {
    background-color: #FFFFFF;
    color: #0F172A;
}
html[data-theme="light"] .neon-input-select option:disabled {
    color: #64748B;
}
html[data-theme="light"] .neon-btn-primary {
    background: rgba(15, 23, 42, 0.9);
    border-color: transparent;
    color: #fff;
}
html[data-theme="light"] .neon-btn-primary:hover {
    background: rgba(15, 23, 42, 1);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

/* Light Theme Fixes for Workflow Hardcoded Dark Gradients */
html[data-theme="light"] .bg-gradient-to-br.from-\[\#18181B\].to-\[\#0A0D14\],
html[data-theme="light"] .bg-gradient-to-br[class*="from-[#18181B]"],
html[data-theme="light"] [class*="from-zinc-900"],
html[data-theme="light"] [class*="from-zinc-800"],
html[data-theme="light"] [class*="to-[#0A0D14]"],
html[data-theme="light"] [class*="to-[#09090b]"] {
    background-image: linear-gradient(to bottom right, #FFFFFF, #F1F5F9) !important;
}
html[data-theme="light"] .\!bg-\[\#18181B\]\/80 {
    background-color: #FAFAFA !important;
}
html[data-theme="light"] .bg-zinc-800\/60,
html[data-theme="light"] .bg-zinc-800\/30 {
    background-color: rgba(15, 23, 42, 0.05) !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
}
html[data-theme="light"] .border-zinc-800\/50 {
    border-color: rgba(15, 23, 42, 0.1) !important;
}
html[data-theme="light"] .shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.03) !important;
}

/* ──────────────────────────────────────────────────────────
   LIGHT MODE: Hardcoded dark-element overrides (Admin Pages)
   ────────────────────────────────────────────────────────── */

/* Main container backgrounds (#09090b is near-black) */
html[data-theme="light"] .bg-\[\#09090b\] {
    background-color: #FFFFFF !important;
}
html[data-theme="light"] .bg-\[\#0A0A0A\] {
    background-color: #F8FAFC !important;
}

/* Card/row backgrounds: zinc-900/XX variants */
html[data-theme="light"] .bg-zinc-900\/30,
html[data-theme="light"] .bg-zinc-900\/40,
html[data-theme="light"] .bg-zinc-900\/60,
html[data-theme="light"] .bg-zinc-900\/80,
html[data-theme="light"] .bg-zinc-900\/20,
html[data-theme="light"] .bg-zinc-900\/10 {
    background-color: rgba(241, 245, 249, 0.6) !important;
}
html[data-theme="light"] .bg-zinc-900 {
    background-color: #F1F5F9 !important;
}

/* Border overrides: zinc-800 variants */
html[data-theme="light"] .border-zinc-800\/80,
html[data-theme="light"] .border-zinc-800\/60,
html[data-theme="light"] .border-zinc-800\/40,
html[data-theme="light"] .border-zinc-800 {
    border-color: #E2E8F0 !important;
}
html[data-theme="light"] .border-zinc-700,
html[data-theme="light"] .border-zinc-700\/80,
html[data-theme="light"] .border-zinc-700\/50 {
    border-color: #CBD5E1 !important;
}
html[data-theme="light"] .divide-zinc-800\/40 > :not([hidden]) ~ :not([hidden]) {
    border-color: #E2E8F0 !important;
}

/* White text → dark text in light mode */
html[data-theme="light"] .text-\[\#FAFAFA\],
html[data-theme="light"] .text-\[\#fafafa\] {
    color: #0F172A !important;
}

/* Counter badges [5/10] */
html[data-theme="light"] .bg-black\/40 {
    background-color: rgba(15, 23, 42, 0.08) !important;
}

/* Progress bar track */
html[data-theme="light"] .bg-black\/60 {
    background-color: rgba(15, 23, 42, 0.08) !important;
}

/* Zinc text colors → darker for legibility */
html[data-theme="light"] .text-zinc-300 {
    color: #334155 !important;
}
html[data-theme="light"] .text-zinc-400 {
    color: #64748B !important;
}
html[data-theme="light"] .text-zinc-500 {
    color: #64748B !important;
}
html[data-theme="light"] .text-zinc-600 {
    color: #94A3B8 !important;
}

/* Hover state overrides */
html[data-theme="light"] .hover\:bg-zinc-800\/40:hover {
    background-color: rgba(241, 245, 249, 0.8) !important;
}
html[data-theme="light"] .hover\:bg-zinc-800\/50:hover {
    background-color: rgba(241, 245, 249, 0.9) !important;
}
html[data-theme="light"] .hover\:bg-zinc-700:hover {
    background-color: #E2E8F0 !important;
}
html[data-theme="light"] .hover\:bg-zinc-800:hover {
    background-color: #F1F5F9 !important;
}
html[data-theme="light"] .hover\:border-zinc-700\/80:hover,
html[data-theme="light"] .hover\:border-zinc-700:hover {
    border-color: #94A3B8 !important;
}
html[data-theme="light"] .hover\:text-\[\#FAFAFA\]:hover,
html[data-theme="light"] .hover\:text-\[\#fafafa\]:hover {
    color: #0F172A !important;
}
html[data-theme="light"] .hover\:text-zinc-200:hover {
    color: #1E293B !important;
}

/* Stat card & button backgrounds */
html[data-theme="light"] .bg-zinc-800 {
    background-color: #F1F5F9 !important;
}
html[data-theme="light"] .hover\:bg-zinc-700\/80:hover {
    background-color: #E2E8F0 !important;
}

/* Dashed empty placeholders */
html[data-theme="light"] .border-dashed.border-zinc-800 {
    border-color: #CBD5E1 !important;
}

/* Drop shadow removal for light mode */
html[data-theme="light"] .drop-shadow-\[0_0_5px_rgba\(0\,0\,0\,0\.5\)\] {
    filter: none !important;
}

/* Modal backdrops */
html[data-theme="light"] .bg-black\/80 {
    background-color: rgba(15, 23, 42, 0.5) !important;
}

/* Form inputs in light mode */
html[data-theme="light"] input.bg-\[\#09090b\],
html[data-theme="light"] textarea.bg-\[\#09090b\],
html[data-theme="light"] select.bg-\[\#09090b\],
html[data-theme="light"] input.bg-\[\#0A0A0A\],
html[data-theme="light"] textarea.bg-\[\#0A0A0A\],
html[data-theme="light"] select.bg-\[\#0A0A0A\] {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}
html[data-theme="light"] input::placeholder {
    color: #94A3B8 !important;
}

/* Shadow-2xl toning */
html[data-theme="light"] .shadow-2xl {
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

/* Accent text color overrides for light mode */
html[data-theme="light"] .text-emerald-400 { color: #059669 !important; }
html[data-theme="light"] .text-blue-400 { color: #2563EB !important; }
html[data-theme="light"] .text-amber-400 { color: #D97706 !important; }
html[data-theme="light"] .text-cyan-400 { color: #0891B2 !important; }
html[data-theme="light"] .text-indigo-400 { color: #4F46E5 !important; }
html[data-theme="light"] .text-red-400 { color: #DC2626 !important; }
html[data-theme="light"] .text-amber-400\/70 { color: #B45309 !important; }
html[data-theme="light"] .text-cyan-400\/70 { color: #0E7490 !important; }

/* ──────────────────────────────────────────────────────────
   LIGHT MODE: Sidebar overrides
   ────────────────────────────────────────────────────────── */

/* Sidebar container */
html[data-theme="light"] aside.bg-\[\#18181B\] {
    background-color: #FFFFFF !important;
    border-right-color: #CBD5E1 !important;
}

/* Logo/title text */
html[data-theme="light"] aside .text-\[\#FAFAFA\] {
    color: #0F172A !important;
}

/* Section buttons (Setup, Workflow, Admin) */
html[data-theme="light"] aside .text-zinc-400 {
    color: #475569 !important;
}
html[data-theme="light"] aside .text-zinc-500 {
    color: #94A3B8 !important;
}
html[data-theme="light"] aside button.hover\:bg-zinc-800\/50:hover {
    background-color: #F1F5F9 !important;
}

/* Nav link items */
html[data-theme="light"] aside a.text-zinc-400 {
    color: #475569 !important;
}
html[data-theme="light"] aside a.hover\:bg-zinc-800\/80:hover {
    background-color: #F1F5F9 !important;
}
html[data-theme="light"] aside a.hover\:text-white:hover,
html[data-theme="light"] aside a.hover\:text-\[\#FAFAFA\]:hover {
    color: #0F172A !important;
}

/* Nav badges */
html[data-theme="light"] aside .bg-\[\#18181B\] {
    background-color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
    color: #475569 !important;
}
html[data-theme="light"] aside .group-hover\:bg-\[\#3F3F46\]:hover {
    background-color: #E2E8F0 !important;
}

/* System Status box */
html[data-theme="light"] aside .from-\[\#18181B\].to-\[\#09090B\],
html[data-theme="light"] aside [class*="from-[#18181B]"][class*="to-[#09090B]"] {
    background: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
}
html[data-theme="light"] aside .bg-zinc-900\/50 {
    background-color: #E2E8F0 !important;
}
html[data-theme="light"] aside .text-zinc-300 {
    color: #334155 !important;
}

/* Mobile overlay */
html[data-theme="light"] .bg-black\/45 {
    background-color: rgba(15, 23, 42, 0.3) !important;
}

/* Active link - keep orange accent */
html[data-theme="light"] aside a.bg-\[\#F97316\]\/10 {
    background-color: rgba(249, 115, 22, 0.08) !important;
}

/* ==========================================
   Neon Utility Overrides (Universal)
   ========================================== */
.neon-page {
    display: flex;
    flex-direction: column;
    padding-bottom: 3rem;
}

.neon-widget {
    background-color: var(--neon-card-bg);
    border: 1px solid var(--neon-card-border);
}

.neon-table-header {
    background-color: var(--neon-table-header-bg);
    border-bottom: 1px solid var(--neon-card-border);
}

.neon-row:hover {
    background-color: var(--neon-row-hover);
}

.neon-text-main { color: var(--neon-text-primary) !important; }
.neon-text-muted { color: var(--neon-text-secondary) !important; }

html[data-theme="light"] .neon-text-muted {
    font-weight: 500; /* Extra weight for readability in light mode */
}

/* Fix specific hardcoded classes used in templates */
html[data-theme="light"] [class*="bg-[#09090b]"] {
    background-color: var(--neon-card-bg) !important;
}

html[data-theme="light"] [class*="text-zinc-400"],
html[data-theme="light"] [class*="text-zinc-500"] {
    color: var(--neon-text-secondary) !important;
}

html[data-theme="light"] [class*="border-zinc-800"] {
    border-color: var(--neon-card-border) !important;
}

html[data-theme="light"] [class*="bg-zinc-900/60"] {
    background-color: var(--neon-table-header-bg) !important;
}

html[data-theme="light"] [class*="bg-zinc-900/40"] {
    background-color: color-mix(in srgb, var(--pgs-surface-alt) 70%, transparent) !important;
}




.notification-group-dot {
    display: inline-flex;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    box-shadow: 0 0 16px currentColor;
}

.notification-card {
    border: 1px solid var(--pgs-border);
    border-radius: 1.4rem;
    background: linear-gradient(160deg, color-mix(in srgb, var(--pgs-surface) 92%, transparent 8%), color-mix(in srgb, var(--pgs-surface-alt) 88%, transparent 12%));
    padding: 1rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.notification-card:hover {
    transform: translateY(-2px);
}

.notification-card--danger {
    border-color: rgba(239, 68, 68, 0.28);
    box-shadow: 0 16px 34px rgba(239, 68, 68, 0.10);
}

.notification-card--warning {
    border-color: rgba(249, 115, 22, 0.28);
    box-shadow: 0 16px 34px rgba(249, 115, 22, 0.10);
}

.notification-card--info {
    border-color: rgba(59, 130, 246, 0.24);
    box-shadow: 0 16px 34px rgba(59, 130, 246, 0.08);
}

.notification-card--success {
    border-color: rgba(16, 185, 129, 0.24);
    box-shadow: 0 16px 34px rgba(16, 185, 129, 0.08);
}

.notification-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.95rem;
    border: 1px solid transparent;
}

.notification-icon--danger {
    color: #f87171;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.22);
}

.notification-icon--warning {
    color: #fb923c;
    background: rgba(249, 115, 22, 0.12);
    border-color: rgba(249, 115, 22, 0.22);
}

.notification-icon--info {
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.22);
}

.notification-icon--success {
    color: #34d399;
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.22);
}

.notification-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 28px;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.notification-pill--muted {
    background: rgba(161, 161, 170, 0.10);
    border-color: rgba(161, 161, 170, 0.16);
    color: var(--pgs-text-muted);
}

.notification-pill--danger {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.18);
    color: #f87171;
}

.notification-pill--warning {
    background: rgba(249, 115, 22, 0.12);
    border-color: rgba(249, 115, 22, 0.18);
    color: #fb923c;
}

.notification-pill--info {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.18);
    color: #60a5fa;
}

.notification-pill--success {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.18);
    color: #34d399;
}

.notification-action {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(249, 115, 22, 0.22);
    background: rgba(249, 115, 22, 0.10);
    color: var(--pgs-text);
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0.5rem 0.85rem;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.notification-action:hover {
    transform: translateY(-1px);
    border-color: rgba(249, 115, 22, 0.4);
    background: rgba(249, 115, 22, 0.16);
}

html[data-theme="light"] .notification-card {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.96));
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .notification-icon--danger,
html[data-theme="light"] .notification-pill--danger {
    color: #dc2626;
}

html[data-theme="light"] .notification-icon--warning,
html[data-theme="light"] .notification-pill--warning {
    color: #c2410c;
}

html[data-theme="light"] .notification-icon--info,
html[data-theme="light"] .notification-pill--info {
    color: #1d4ed8;
}

html[data-theme="light"] .notification-icon--success,
html[data-theme="light"] .notification-pill--success {
    color: #047857;
}
.notification-card--read {
    opacity: 0.76;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.notification-mark-all,
.notification-read-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--pgs-border);
    background: rgba(161, 161, 170, 0.08);
    color: var(--pgs-text);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0.45rem 0.8rem;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, opacity 180ms ease;
}

.notification-mark-all:hover,
.notification-read-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(249, 115, 22, 0.34);
    background: rgba(249, 115, 22, 0.10);
}

.notification-mark-all:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

html[data-theme="light"] .notification-card--read {
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}
/* Simpler notification surface */
.notification-panel {
    backdrop-filter: none;
}

.notification-card {
    border: 1px solid var(--pgs-border);
    border-radius: 1rem;
    background: var(--pgs-surface);
    padding: 0.9rem 1rem;
    box-shadow: none;
    transition: background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

.notification-card:hover {
    background: color-mix(in srgb, var(--pgs-surface-alt) 78%, transparent 22%);
}

.notification-card--danger {
    border-color: rgba(239, 68, 68, 0.22);
}

.notification-card--warning {
    border-color: rgba(249, 115, 22, 0.22);
}

.notification-card--info {
    border-color: rgba(59, 130, 246, 0.18);
}

.notification-card--success {
    border-color: rgba(16, 185, 129, 0.18);
}

.notification-card--read {
    opacity: 0.72;
}

.notification-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    border: 1px solid var(--pgs-border);
    background: var(--pgs-surface-alt);
}

.notification-icon--danger { color: #ef4444; }
.notification-icon--warning { color: #f97316; }
.notification-icon--info { color: #3b82f6; }
.notification-icon--success { color: #10b981; }

.notification-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    border: 1px solid var(--pgs-border);
    background: transparent;
    color: var(--pgs-text);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.45rem 0.75rem;
    transition: background 160ms ease, border-color 160ms ease;
}

.notification-action:hover {
    border-color: rgba(15, 23, 42, 0.18);
    background: var(--pgs-surface-alt);
}

.notification-mark-all,
.notification-read-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--pgs-border);
    background: transparent;
    color: var(--pgs-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.38rem 0.72rem;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}

.notification-mark-all:hover,
.notification-read-toggle:hover {
    color: var(--pgs-text);
    background: var(--pgs-surface-alt);
}

.notification-mark-all:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

html[data-theme="light"] .notification-card {
    background: var(--pgs-surface);
}
/* Google-like simple notifications */
.notification-panel {
    border-radius: 1.25rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

.notification-card {
    border: 1px solid transparent;
    border-radius: 1rem;
    background: transparent;
    padding: 0.85rem 0.9rem;
    box-shadow: none;
}

.notification-card:hover {
    background: color-mix(in srgb, var(--pgs-surface-alt) 82%, transparent 18%);
    border-color: color-mix(in srgb, var(--pgs-border) 75%, transparent 25%);
}

.notification-card--danger,
.notification-card--warning,
.notification-card--info,
.notification-card--success {
    border-color: transparent;
}

.notification-card--read {
    opacity: 0.68;
}

.notification-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: none;
    background: color-mix(in srgb, var(--pgs-surface-alt) 88%, transparent 12%);
    flex: 0 0 auto;
}

.notification-title {
    color: var(--pgs-text);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
}

.notification-message {
    margin-top: 0.2rem;
    color: var(--pgs-text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.notification-time {
    flex: 0 0 auto;
    color: var(--pgs-text-muted);
    font-size: 0.72rem;
    white-space: nowrap;
}

.notification-state {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pgs-surface-alt) 86%, transparent 14%);
    color: var(--pgs-text-muted);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.12rem 0.42rem;
}

.notification-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.65rem;
}

.notification-inline-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.notification-action,
.notification-mark-all,
.notification-read-toggle {
    border-radius: 999px;
    border: 1px solid var(--pgs-border);
    background: transparent;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.34rem 0.68rem;
    box-shadow: none;
    transform: none;
}

.notification-action {
    color: var(--pgs-text);
    gap: 0;
}

.notification-action:hover,
.notification-mark-all:hover,
.notification-read-toggle:hover {
    background: color-mix(in srgb, var(--pgs-surface-alt) 88%, transparent 12%);
    border-color: color-mix(in srgb, var(--pgs-border) 70%, rgba(249, 115, 22, 0.2) 30%);
}

@media (max-width: 767px) {
    .notification-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .notification-time {
        white-space: normal;
    }
}
/* Light theme dark sidebar */
html[data-theme="light"] .sidebar-shell {
    background: linear-gradient(180deg, #111111 0%, #050505 100%);
    border-right-color: rgba(255, 255, 255, 0.08);
    box-shadow: 14px 0 32px rgba(0, 0, 0, 0.18);
}

html[data-theme="light"] .sidebar-shell .admin-button-secondary {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: #fafafa;
}

html[data-theme="light"] .sidebar-section-toggle {
    color: #a1a1aa;
}

html[data-theme="light"] .sidebar-section-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fafafa;
}

html[data-theme="light"] .sidebar-item-link {
    color: #a1a1aa;
}

html[data-theme="light"] .sidebar-item-link:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

html[data-theme="light"] .sidebar-item-link span[class*="border-zinc-800"] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: #d4d4d8;
}

html[data-theme="light"] .sidebar-status-card {
    border-color: rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 12px 24px rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] .sidebar-status-card .bg-zinc-900\/50 {
    background: rgba(255, 255, 255, 0.06);
}

html[data-theme="light"] .sidebar-logout {
    color: #a1a1aa;
}

html[data-theme="light"] .sidebar-logout:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fafafa;
}