/* ═══════════════════════════════════════════════════════════════════════════
   Command Center dashboard skin (.pw-cw scope)
   Shared by the school Command Center (Warm ERP) dashboard theme and the
   superadmin Platform Command Center dashboard. Loaded per-page via
   @push('css') <link> in those blades — NOT global — so the .content-wrapper
   chrome below never leaks to other pages.
   Accent derives from the global tpl brand vars (public/css/tpl-theme.css):
   change --tpl-primary there and both dashboards re-theme with it.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── Page-scoped chrome: brand-tinted full-bleed background for this dashboard only.
   Derives a faint wash from the global tpl accent (--tpl-primary on :root); warm
   cream stays as the fallback where color-mix is unsupported. ── */
.content-wrapper { background: #faf6f1; background: color-mix(in srgb, var(--tpl-primary) 5%, #faf9f7); }
.content-wrapper > .content { padding: 0; }

/* ═══ ROOT SCOPE + WARM PALETTE (scoped to .pw-cw) ═══ */
.pw-cw {
    --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --mono: 'JetBrains Mono', monospace;
    --content-bg: #faf6f1;
    --content-bg: color-mix(in srgb, var(--tpl-primary) 5%, #faf9f7);
    --card-bg: #ffffff;
    --card-border: #f0e6d9;
    --card-shadow: 0 1px 3px rgba(120,80,30,0.04), 0 1px 2px rgba(120,80,30,0.02);
    --card-shadow-hover: 0 10px 30px -8px rgba(120,80,30,0.10), 0 4px 10px -3px rgba(120,80,30,0.05);
    --text-primary: #2d1f10;
    --text-secondary: #6b5b4d;
    --text-tertiary: #a29386;
    --text-muted: #c9bdb0;
    /* Accent follows the global tpl brand colour (public/css/tpl-theme.css).
       Change --tpl-primary there and this dashboard's accent re-themes with it.
       Warm orange stays as the fallback if the tpl vars are ever unavailable. */
    --accent: var(--tpl-primary, #d97706);
    --accent-dark: var(--tpl-primary-deep, #b45309);
    --accent-light: var(--tpl-primary-2, #f59e0b);
    --accent-bg: var(--tpl-primary-focus, rgba(217, 119, 6, 0.08));
    --accent-glow: var(--tpl-primary-focus, rgba(217, 119, 6, 0.12));
    --accent-shadow: var(--tpl-primary-shadow-lg, rgba(217, 119, 6, 0.4));
    --accent-soft: var(--tpl-primary-soft, rgba(217, 119, 6, 0.03));
    --grad-accent: linear-gradient(135deg, var(--accent-light), var(--accent));
    --success: #16a34a;
    --success-bg: rgba(22, 163, 74, 0.07);
    --warning: #ea580c;
    --warning-bg: rgba(234, 88, 12, 0.07);
    --danger: #dc2626;
    --danger-bg: rgba(220, 38, 38, 0.07);
    --info: #0284c7;
    --info-bg: rgba(2, 132, 199, 0.07);
    --grad-amber: linear-gradient(135deg, #d97706, #f59e0b);
    --grad-orange: linear-gradient(135deg, #ea580c, #f97316);
    --grad-emerald: linear-gradient(135deg, #16a34a, #22c55e);
    --grad-sky: linear-gradient(135deg, #0284c7, #38bdf8);
    --grad-rose: linear-gradient(135deg, #e11d48, #fb7185);
    --grad-violet: linear-gradient(135deg, #7c3aed, #a78bfa);
    --grad-teal: linear-gradient(135deg, #0d9488, #2dd4bf);
    --grad-brown: linear-gradient(135deg, #92400e, #b45309);
    --grad-pink: linear-gradient(135deg, #be185d, #ec4899);
    --grad-lime: linear-gradient(135deg, #4d7c0f, #84cc16);
    --grad-sienna: linear-gradient(135deg, #9a3412, #ea580c);
    --grad-copper: linear-gradient(135deg, #a16207, #ca8a04);
    --grad-slate: linear-gradient(135deg, #475569, #64748b);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --transition: 0.2s ease;

    font-family: var(--font);
    color: var(--text-primary);
    background: var(--content-bg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: calc(100vh - 57px);
}
.pw-cw a { text-decoration: none; color: inherit; }
.pw-cw *, .pw-cw *::before, .pw-cw *::after { box-sizing: border-box; }

/* Page header */
.pw-cw .page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.pw-cw .page-header h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; color: var(--text-primary); line-height: 1.2; margin: 0; }
.pw-cw .page-header p { font-size: 13px; color: var(--text-secondary); margin: 3px 0 0; }
.pw-cw .header-actions { display: flex; gap: 8px; }

/* Buttons (renamed from btn/btn-outline/btn-primary) */
.pw-cw .pwcw-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 600; transition: all var(--transition); border: none; cursor: pointer; }
.pw-cw .pwcw-btn-outline { background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text-secondary); }
.pw-cw .pwcw-btn-outline:hover { border-color: #c9bdb0; color: var(--text-primary); box-shadow: var(--card-shadow); }
.pw-cw .pwcw-btn-primary { background: var(--grad-accent); color: #fff; box-shadow: 0 2px 8px -2px var(--accent-shadow); }
.pw-cw .pwcw-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -4px var(--accent-shadow); }

/* Updates ticker (replaces header action buttons) */
.pw-cw .pwcw-ticker { display: flex; align-items: center; height: 40px; flex: 1; min-width: 260px; max-width: 620px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 100px; box-shadow: var(--card-shadow); overflow: hidden; }
.pw-cw .pwcw-ticker-label { display: flex; align-items: center; gap: 6px; padding: 0 16px; height: 100%; font-size: 11.5px; font-weight: 700; letter-spacing: 0.5px; color: var(--accent-dark); border-right: 1px solid var(--card-border); white-space: nowrap; }
.pw-cw .pwcw-ticker-track { flex: 1; min-width: 0; overflow: hidden; padding: 0 14px; font-size: 12px; font-weight: 600; }
.pw-cw .pwcw-ticker-track marquee { display: block; }
.pw-cw .pwcw-ticker-item { margin-right: 30px; white-space: nowrap; color: var(--text-secondary); }

/* Stat cards */
/* The KPI strip stays ONE ROW and shrinks to fit, rather than wrapping to 3+2
   and leaving a ragged gap. minmax(0,1fr) is what allows the columns to go
   below their content's intrinsic width; without it a long value like
   "₹55,88,200" would force the track wider and reintroduce the overflow.
   Padding, icon and type all scale with the viewport so five cards stay legible
   down to tablet width. Wrapping only resumes on real phones (see the 768px
   breakpoint), where five across would be ~65px each. */
.pw-cw .stats-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 0.8vw, 14px); }
.pw-cw .stat-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: clamp(10px, 1vw, 16px) clamp(11px, 1vw, 18px); position: relative; overflow: hidden; transition: all 0.25s; }
.pw-cw .stat-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
.pw-cw .stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pw-cw .stat-icon { width: clamp(28px, 2.3vw, 38px); height: clamp(28px, 2.3vw, 38px); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: clamp(12px, 1.05vw, 16px); color: #fff; position: relative; flex-shrink: 0; }
.pw-cw .stat-icon::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, transparent 50%); border-radius: inherit; }
.pw-cw .stat-change { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 100px; }
.pw-cw .stat-change.up { background: var(--success-bg); color: var(--success); }
.pw-cw .stat-change.down { background: var(--danger-bg); color: var(--danger); }
.pw-cw .stat-card > .stat-top, .pw-cw .stat-card > .stat-value, .pw-cw .stat-card > .stat-label { position: relative; z-index: 1; }
.pw-cw .stat-value { font-size: clamp(16px, 1.45vw, 24px); font-weight: 800; letter-spacing: -0.5px; color: var(--text-primary); line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pw-cw .stat-label { font-size: clamp(9.5px, 0.72vw, 12px); color: var(--text-tertiary); font-weight: 500; margin-top: 2px; line-height: 1.35; }
/* Sparkline: small chart in the right 55% of the card (matches feature-showcase). */
.pw-cw .stat-sparkline { position: absolute; top: 50%; right: -5%; transform: translateY(-40%); width: 55%; height: 50px; opacity: 0.9; z-index: 0; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05)); }

/* Cards (renamed from .card/.card-title) */
.pw-cw .pwcw-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow 0.25s; }
.pw-cw .pwcw-card:hover { box-shadow: var(--card-shadow-hover); }
.pw-cw .card-hd { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--card-border); }
.pw-cw .pwcw-card-title { font-size: 14px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.2px; margin: 0; }
.pw-cw .card-sub { font-size: 11.5px; color: var(--text-tertiary); font-weight: 400; margin-top: 1px; }
.pw-cw .card-actions { display: flex; gap: 3px; }
.pw-cw .tab-btn { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 500; color: var(--text-tertiary); cursor: pointer; transition: all 0.15s; }
.pw-cw .tab-btn:hover { color: var(--text-primary); background: var(--content-bg); }
.pw-cw .tab-btn.active { color: var(--accent-dark); background: var(--accent-bg); font-weight: 600; }
.pw-cw .card-bd { padding: 18px; }

/* Scroll utility for list cards: contain long data instead of cutting it. */
.pw-cw .pwcw-scroll { overflow-y: auto; }
.pw-cw .pwcw-scroll::-webkit-scrollbar { width: 5px; }
.pw-cw .pwcw-scroll::-webkit-scrollbar-track { background: transparent; }
.pw-cw .pwcw-scroll::-webkit-scrollbar-thumb { background: #e5d9c9; border-radius: 3px; }
.pw-cw .pwcw-scroll::-webkit-scrollbar-thumb:hover { background: #d0c0aa; }

/* Grids */
.pw-cw .grid-2 { display: grid; grid-template-columns: 1.7fr 1fr; gap: 14px; }
.pw-cw .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.pw-cw .grid-4 { display: grid; grid-template-columns: 1fr 1fr 1.2fr 0.8fr; gap: 14px; }
/* Auto-fit flow row: present cards fill the width, gated-out cards leave no
   empty tracks. Used for all the per-role optional widgets. */
.pw-cw .pwcw-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }

/* Bar chart */
.pw-cw .bar-chart { display: flex; align-items: flex-end; justify-content: space-between; gap: 5px; height: 170px; padding-top: 8px; }
.pw-cw .bar-group { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 6px; }
.pw-cw .bar-stack { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; align-items: center; }
.pw-cw .bar { width: 65%; max-width: 32px; border-radius: 4px 4px 2px 2px; transition: all 0.3s; position: relative; cursor: pointer; animation: pwcwBarGrow 1s ease-out forwards; transform-origin: bottom; }
.pw-cw .bar:hover { filter: brightness(1.1); transform: scaleX(1.15); }
.pw-cw .bar-sec { border-radius: 2px 2px 4px 4px; }
@keyframes pwcwBarGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.pw-cw .bar-lbl { font-size: 10px; color: var(--text-tertiary); font-weight: 500; }
.pw-cw .chart-legend { display: flex; align-items: center; gap: 18px; padding: 12px 18px 4px; }
.pw-cw .legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); font-weight: 500; }
.pw-cw .legend-dot { width: 9px; height: 9px; border-radius: 3px; }

/* Activity feed */
.pw-cw .activity-feed { display: flex; flex-direction: column; }
.pw-cw .act-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 18px; border-bottom: 1px solid var(--card-border); transition: background 0.12s; }
.pw-cw .act-item:last-child { border-bottom: none; }
.pw-cw .act-item:hover { background: var(--accent-soft); }
.pw-cw .act-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; flex-shrink: 0; margin-top: 1px; }
.pw-cw .act-body { flex: 1; min-width: 0; }
.pw-cw .act-text { font-size: 12.5px; font-weight: 500; color: var(--text-primary); line-height: 1.4; }
.pw-cw .act-text strong { font-weight: 700; }
.pw-cw .act-meta { font-size: 10.5px; color: var(--text-tertiary); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.pw-cw .act-tag { padding: 1px 6px; border-radius: 4px; font-size: 9.5px; font-weight: 600; }
/* Absolute timestamp on the right of each activity row. */
.pw-cw .act-time { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; text-align: right; margin-top: 1px; white-space: nowrap; line-height: 1.25; }
.pw-cw .act-time-d { font-size: 10.5px; font-weight: 700; color: var(--text-secondary); }
.pw-cw .act-time-t { font-size: 10px; font-weight: 500; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

/* Attendance donut */
.pw-cw .donut-wrap { display: flex; align-items: center; gap: 20px; padding: 4px 0; }
.pw-cw .donut-chart { width: 120px; height: 120px; position: relative; flex-shrink: 0; }
.pw-cw .donut-chart svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pw-cw .donut-chart circle { fill: none; stroke-linecap: round; }
.pw-cw .donut-bg { stroke: #f5ede4; stroke-width: 9; }
.pw-cw .donut-fill { stroke-width: 9; stroke-dasharray: 345; animation: pwcwDonutFill 1.5s ease-out forwards; }
@keyframes pwcwDonutFill { from { stroke-dashoffset: 345; } }
.pw-cw .donut-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.pw-cw .donut-val { font-size: 22px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.5px; line-height: 1.1; }
.pw-cw .donut-lbl { font-size: 10px; color: var(--text-tertiary); font-weight: 500; }
.pw-cw .donut-legend { display: flex; flex-direction: column; gap: 8px; }
.pw-cw .dleg-item { display: flex; align-items: center; gap: 7px; }
.pw-cw .dleg-dot { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }
.pw-cw .dleg-name { font-size: 11px; color: var(--text-secondary); font-weight: 500; }
.pw-cw .dleg-val { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-left: auto; }

/* Due fees table */
.pw-cw .due-table { width: 100%; border-collapse: collapse; }
.pw-cw .due-table th { font-size: 10px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; text-align: left; padding: 0 0 10px; border-bottom: 1px solid var(--card-border); }
.pw-cw .due-table td { font-size: 12.5px; padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,0.025); color: var(--text-primary); }
.pw-cw .due-table tr:last-child td { border-bottom: none; }
.pw-cw .due-student { display: flex; align-items: center; gap: 8px; }
.pw-cw .due-av { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; }
.pw-cw .due-name { font-weight: 600; font-size: 12.5px; }
.pw-cw .due-cls { font-size: 10.5px; color: var(--text-tertiary); }
.pw-cw .due-amt { font-weight: 700; color: var(--danger); }
.pw-cw .due-status { padding: 2px 9px; border-radius: 100px; font-size: 10px; font-weight: 600; }
.pw-cw .due-status.overdue { background: var(--danger-bg); color: var(--danger); }
.pw-cw .due-status.pending { background: var(--warning-bg); color: var(--warning); }

/* Module grid */
.pw-cw .mods-grid-mega { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.pw-cw .mod-tile { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 6px; border-radius: var(--radius-sm); border: 1px solid var(--card-border); cursor: pointer; transition: all 0.2s; text-align: center; }
.pw-cw .mod-tile:hover { border-color: var(--accent); background: var(--accent-bg); transform: translateY(-2px); box-shadow: 0 4px 12px -4px var(--accent-glow); }
.pw-cw .mod-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; }
.pw-cw .mod-name { font-size: 10px; font-weight: 600; color: var(--text-secondary); line-height: 1.2; }

/* Ecosystem Hub controls (search + category tabs) */
.pw-cw .pwcw-hub-hd { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pw-cw .pwcw-hub-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pw-cw .pwcw-search { position: relative; display: flex; align-items: center; }
.pw-cw .pwcw-search > i { position: absolute; left: 10px; font-size: 11px; color: var(--text-muted); pointer-events: none; }
.pw-cw .pwcw-search input { width: 180px; height: 32px; padding: 0 26px 0 28px; border: 1px solid var(--card-border); border-radius: var(--radius-sm); background: var(--content-bg); font-size: 12px; font-family: var(--font); color: var(--text-primary); outline: none; transition: all 0.15s; }
.pw-cw .pwcw-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); background: #fff; width: 210px; }
.pw-cw .pwcw-search input::placeholder { color: var(--text-muted); }
.pw-cw .pwcw-kbd { position: absolute; right: 7px; font-size: 9px; font-weight: 700; color: var(--text-muted); border: 1px solid var(--card-border); border-radius: 4px; padding: 1px 4px; background: #fff; }
.pw-cw .pwcw-hubtabs { display: flex; gap: 2px; background: var(--content-bg); padding: 3px; border-radius: 8px; flex-wrap: wrap; }
.pw-cw .pwcw-hubtabs .tab-btn { border: none; font-family: var(--font); background: none; }
.pw-cw .pwcw-hubtabs .tab-btn.active { background: #fff; box-shadow: 0 1px 3px rgba(120,80,30,0.08); color: var(--accent-dark); }
.pw-cw .pwcw-modal-search { margin-bottom: 4px; }
.pw-cw .pwcw-modal-search input { width: 100%; height: 40px; font-size: 13px; }
.pw-cw .pwcw-modal-search input:focus { width: 100%; }

/* Events */
.pw-cw .event-list { display: flex; flex-direction: column; gap: 10px; }
.pw-cw .event-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--card-border); transition: all 0.15s; }
.pw-cw .event-item:hover { border-color: var(--accent); background: var(--accent-bg); }
.pw-cw .event-date { width: 44px; height: 44px; border-radius: 10px; background: var(--content-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--card-border); }
.pw-cw .event-day { font-size: 16px; font-weight: 800; color: var(--accent-dark); line-height: 1.1; }
.pw-cw .event-mon { font-size: 9px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; }
.pw-cw .event-info { flex: 1; min-width: 0; }
.pw-cw .event-title { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.pw-cw .event-sub { font-size: 10.5px; color: var(--text-tertiary); margin-top: 1px; }
.pw-cw .event-type { padding: 3px 8px; border-radius: 100px; font-size: 9.5px; font-weight: 600; flex-shrink: 0; }

/* Timetable */
.pw-cw .tt-list { display: flex; flex-direction: column; gap: 6px; }
.pw-cw .tt-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; border-left: 3px solid transparent; transition: background 0.12s; }
.pw-cw .tt-item:hover { background: rgba(0,0,0,0.015); }
.pw-cw .tt-time { font-size: 10.5px; font-weight: 600; color: var(--text-tertiary); width: 52px; flex-shrink: 0; font-family: var(--mono); }
.pw-cw .tt-subject { font-size: 12.5px; font-weight: 600; color: var(--text-primary); flex: 1; }
.pw-cw .tt-teacher { font-size: 10.5px; color: var(--text-tertiary); font-weight: 500; }
.pw-cw .tt-item.now { background: var(--accent-bg); border-left-color: var(--accent); }
.pw-cw .tt-now-badge { padding: 2px 6px; border-radius: 4px; font-size: 9px; font-weight: 700; background: var(--accent); color: #fff; text-transform: uppercase; letter-spacing: 0.3px; }

/* Transport */
.pw-cw .bus-list { display: flex; flex-direction: column; gap: 8px; }
.pw-cw .bus-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--card-border); transition: all 0.15s; }
.pw-cw .bus-item:hover { border-color: var(--accent); }
.pw-cw .bus-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; flex-shrink: 0; }
.pw-cw .bus-info { flex: 1; min-width: 0; }
.pw-cw .bus-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.pw-cw .bus-route { font-size: 10.5px; color: var(--text-tertiary); }
.pw-cw .bus-status { padding: 3px 8px; border-radius: 100px; font-size: 10px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.pw-cw .bus-status .pulse-dot { width: 6px; height: 6px; border-radius: 50%; animation: pwcwPulse 2s ease-in-out infinite; }
@keyframes pwcwPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Staff chips */
.pw-cw .staff-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pw-cw .staff-chip { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 100px; border: 1px solid var(--card-border); font-size: 11px; font-weight: 500; color: var(--text-secondary); transition: all 0.15s; }
.pw-cw .staff-chip:hover { border-color: var(--accent); background: var(--accent-bg); }
.pw-cw .staff-av { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; }

/* Exams */
.pw-cw .exam-list { display: flex; flex-direction: column; gap: 8px; }
.pw-cw .exam-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--card-border); transition: all 0.12s; }
.pw-cw .exam-item:hover { border-color: var(--accent); }
.pw-cw .exam-subject { font-size: 12.5px; font-weight: 600; color: var(--text-primary); flex: 1; }
.pw-cw .exam-class { font-size: 10.5px; color: var(--text-tertiary); }
.pw-cw .exam-date-text { font-size: 11px; font-weight: 600; color: var(--accent-dark); }

/* Announcements */
.pw-cw .announce-item { padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--card-border); margin-bottom: 8px; transition: all 0.12s; }
.pw-cw .announce-item:last-child { margin-bottom: 0; }
.pw-cw .announce-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.pw-cw .announce-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
.pw-cw .announce-text { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.5; }
.pw-cw .announce-footer { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 10px; color: var(--text-muted); }
.pw-cw .announce-footer i { font-size: 10px; }

/* Animations */
@keyframes pwcwFadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.pw-cw .anim { animation: pwcwFadeInUp 0.45s ease-out both; }
.pw-cw .d1 { animation-delay: 0.03s; }
.pw-cw .d2 { animation-delay: 0.06s; }
.pw-cw .d3 { animation-delay: 0.09s; }
.pw-cw .d4 { animation-delay: 0.12s; }
.pw-cw .d5 { animation-delay: 0.15s; }
.pw-cw .d6 { animation-delay: 0.18s; }
.pw-cw .d7 { animation-delay: 0.21s; }
.pw-cw .d8 { animation-delay: 0.24s; }
.pw-cw .d9 { animation-delay: 0.27s; }

/* Modal */
.pw-cw-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9999; align-items: center; justify-content: center; backdrop-filter: blur(3px); padding: 24px; }
.pw-cw-modal-content { background: #fff; width: 95%; max-width: 1050px; max-height: calc(100vh - 48px); border-radius: 16px; padding: 22px 22px 10px; position: relative; box-shadow: 0 10px 40px rgba(0,0,0,0.2); animation: pwcwPopIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; border: 1px solid #f0e6d9; display: flex; flex-direction: column; overflow: hidden; }
.pw-cw-modal-content > .pw-cw { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0; margin: 0; gap: 12px; background: none; }
#pwcw-modalGrid { flex: 1; min-height: 0; }
@keyframes pwcwPopIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
#pwcw-closeModalBtn:hover { background: rgba(220,38,38,0.07) !important; color: #dc2626 !important; border-color: #dc2626 !important; }

/* Expand-to-modal affordance on card headers + the generic detail modal. */
.pw-cw .pwcw-expand-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--card-border); background: var(--card-bg); border-radius: 7px; color: var(--text-tertiary); font-size: 11px; cursor: pointer; transition: all 0.15s; flex-shrink: 0; }
.pw-cw .pwcw-expand-btn:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-bg); }
.pw-cw-detail-body { overflow-y: auto; max-height: calc(100vh - 190px); padding-right: 6px; }
/* Cloned card content shows in full inside the modal — drop the in-card height caps. */
.pw-cw-detail-body .pwcw-scroll, .pw-cw-detail-body .activity-feed { max-height: none !important; overflow: visible !important; }
.pw-cw-detail-body .card-bd { padding: 0 !important; }
#pwcw-detailClose:hover { background: rgba(220,38,38,0.07) !important; color: #dc2626 !important; border-color: #dc2626 !important; }

/* Clickable activity rows + per-item detail rendered inside the modal. */
.pw-cw .act-item[data-act-open] { cursor: pointer; }
.pw-cw .pwcw-dtl-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pw-cw .pwcw-dtl-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; flex-shrink: 0; }
.pw-cw .pwcw-dtl-title { font-size: 16px; font-weight: 800; color: var(--text-primary); line-height: 1.3; }
.pw-cw .pwcw-dtl-kind { font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.pw-cw .pwcw-dtl-rows { border: 1px solid var(--card-border); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.pw-cw .pwcw-drow { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; font-size: 13px; }
.pw-cw .pwcw-drow:not(:last-child) { border-bottom: 1px solid var(--card-border); }
.pw-cw .pwcw-dk { color: var(--text-tertiary); font-weight: 500; white-space: nowrap; }
.pw-cw .pwcw-dv { color: var(--text-primary); font-weight: 600; text-align: right; word-break: break-word; }
.pw-cw .pwcw-dtl-body { font-size: 13px; line-height: 1.7; color: var(--text-secondary); padding: 14px; background: var(--content-bg); border-radius: 10px; }
.pw-cw .pwcw-dtl-body p, .pw-cw .pwcw-dtl-body ul, .pw-cw .pwcw-dtl-body ol { margin: 0 0 8px; }
.pw-cw .pwcw-dtl-body :last-child { margin-bottom: 0; }
.pw-cw .pwcw-dtl-body img { max-width: 100%; height: auto; border-radius: 8px; }

/* Responsive */
@media (max-width: 1400px) {
    /* stats-row deliberately NOT re-columned here — it used to become 3+2,
       which is what a 140% browser zoom (≈1370px effective) was tripping. It
       now compresses in place; see .stats-row above. */
    .pw-cw .grid-4 { grid-template-columns: 1fr 1fr; }
    .pw-cw .mods-grid-mega { grid-template-columns: repeat(5, 1fr); }
}
/* The sparkline sits behind the number at 55% card width; once the cards are
   this narrow it crowds the value, and it is decoration either way. */
@media (max-width: 1200px) {
    .pw-cw .stat-sparkline { display: none; }
}
@media (max-width: 1100px) {
    .pw-cw .grid-3 { grid-template-columns: 1fr 1fr; }
    .pw-cw .grid-2 { grid-template-columns: 1fr; }
    .pw-cw .mods-grid-mega { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
    .pw-cw .grid-3, .pw-cw .grid-4 { grid-template-columns: 1fr; }
    .pw-cw .mods-grid-mega { grid-template-columns: repeat(3, 1fr); }
}
/* Below tablet, five across would be ~65px per card — wrap rather than shrink. */
@media (max-width: 768px) {
    .pw-cw { padding: 16px; }
    .pw-cw .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pw-cw .stat-value { font-size: 20px; }
    .pw-cw .stat-label { font-size: 11px; }
}
@media (max-width: 460px) {
    .pw-cw .stats-row { grid-template-columns: 1fr; }
}

/* ═══ Superadmin (Platform Command Center + Branch Overview) additions ═══ */
/* Entity list rows (schools, orders, sign-ins) */
.pw-cw .pwsa-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,0.03); }
.pw-cw .pwsa-row:last-child { border-bottom: none; }
.pw-cw .pwsa-av { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; }
.pw-cw .pwsa-row-main { flex: 1; min-width: 0; }
.pw-cw .pwsa-row-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-cw .pwsa-row-sub { font-size: 10.5px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-cw .pwsa-row-end { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.pw-cw .pwsa-chip { padding: 2px 9px; border-radius: 100px; font-size: 10px; font-weight: 600; white-space: nowrap; }
/* Error log rows */
.pw-cw .pwsa-err-item { border-left: 3px solid var(--danger); background: var(--danger-bg); padding: 9px 11px; border-radius: 6px; margin-bottom: 8px; font-family: var(--mono); font-size: 11px; line-height: 1.5; }
.pw-cw .pwsa-err-item:last-child { margin-bottom: 0; }
/* Health meter rows */
.pw-cw .pwsa-meter-lbl { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--text-tertiary); margin-bottom: 6px; }
.pw-cw .pwsa-meter { height: 6px; background: var(--content-bg); border-radius: 3px; overflow: hidden; }
.pw-cw .pwsa-meter > div { height: 100%; border-radius: 3px; background: var(--grad-accent); }
/* Live pulse dot on the Online KPI */
.pw-cw .pwsa-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: pwcwPulse 2s ease-in-out infinite; margin-right: 4px; }
/* Capability tiles (Group Admin "Your toolkit" band) */
.pw-cw .pwsa-cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.pw-cw .pwsa-cap-tile { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--card-border); transition: all 0.15s; }
.pw-cw .pwsa-cap-tile:hover { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 4px 12px -4px var(--accent-glow); }
.pw-cw .pwsa-cap-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; flex-shrink: 0; }
.pw-cw .pwsa-cap-title { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.pw-cw .pwsa-cap-desc { font-size: 10.5px; color: var(--text-tertiary); line-height: 1.4; margin-top: 2px; }
/* 4-column KPI variant (Branch Overview roll-up row) */
/* Superadmin variant (4 cards). Same rule as the 5-card strip: hold the single
   row and compress, rather than dropping to 2+2 at the first zoom step. */
.pw-cw .stats-row.pwsa-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 768px) { .pw-cw .stats-row.pwsa-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .pw-cw .stats-row.pwsa-cols-4 { grid-template-columns: 1fr; } }

/* ═══ .pw-sa — Platform (superadmin) variant: cool slate console shell ═══
   The school dashboard keeps the warm-cream shell; the superadmin dashboards
   add .pw-sa on the root to switch to a cool slate tone with their OWN accent,
   so at first glance it reads "platform console", not "school panel".
   Accent comes from --pwsa-accent (set inline on the root from the
   admin_platform_accent setting, Theme Engine page); deep cyan is the default. */
.pw-cw.pw-sa {
    --pwsa-a: var(--pwsa-accent, #0e7490);
    --accent: var(--pwsa-a);
    --accent-dark: color-mix(in srgb, var(--pwsa-a) 78%, #0f172a);
    --accent-light: color-mix(in srgb, var(--pwsa-a) 70%, #ffffff);
    --accent-bg: color-mix(in srgb, var(--pwsa-a) 9%, transparent);
    --accent-glow: color-mix(in srgb, var(--pwsa-a) 13%, transparent);
    --accent-shadow: color-mix(in srgb, var(--pwsa-a) 40%, transparent);
    --accent-soft: color-mix(in srgb, var(--pwsa-a) 4%, transparent);
    --grad-accent: linear-gradient(135deg, var(--accent-light), var(--accent));
    --content-bg: #f8fafc;
    --content-bg: color-mix(in srgb, var(--pwsa-a) 4%, #f8fafc);
    --card-bg: #ffffff;
    --card-border: #e2e8f0;
    --card-shadow: 0 1px 3px rgba(15,23,42,0.05), 0 1px 2px rgba(15,23,42,0.03);
    --card-shadow-hover: 0 10px 30px -8px rgba(15,23,42,0.10), 0 4px 10px -3px rgba(15,23,42,0.05);
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #94a3b8;
    --text-muted: #cbd5e1;
}
.pw-cw.pw-sa .pwcw-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; }
.pw-cw.pw-sa .pwcw-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.pw-cw.pw-sa .donut-bg { stroke: #eef2f7; }
.pw-cw.pw-sa .pwcw-hubtabs .tab-btn.active { box-shadow: 0 1px 3px rgba(15,23,42,0.08); }
/* Platform identity chip above the hero greeting */
.pw-cw .pwsa-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-dark); background: var(--accent-bg); border: 1px solid color-mix(in srgb, var(--accent, #0e7490) 25%, transparent); border-radius: 100px; padding: 3px 10px; margin-bottom: 7px; }