/* ==========================================================================
   SSHS E-Class Pro — Strengthened Senior High School Class Record
   Three-Term System | DepEd Order 8 s.2015
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap');

:root {
  /* Brand */
  --primary:      #1a6b3c;
  --primary-dk:   #0f4726;
  --primary-lt:   #e6f4ed;

  /* Category Colors — SSHS */
  --ww-color:  #1e3a8a;  /* Dark Blue  — Written/Oral Works     */
  --ww-bg:     #dbeafe;
  --ww-bdr:    #93c5fd;
  --pt-color:  #7c2d12;  /* Dark Amber — Product/Performance    */
  --pt-bg:     #fef3c7;
  --pt-bdr:    #fcd34d;
  --st-color:  #4c1d95;  /* Dark Purple — Summative Tests & TE  */
  --st-bg:     #ede9fe;
  --st-bdr:    #c4b5fd;
  --gr-color:  #14532d;  /* Dark Green — Grades                 */
  --gr-bg:     #dcfce7;
  --gr-bdr:    #86efac;

  /* Excel Tab Colors (exact match to real file & screenshot) */
  --tab-sshs:    #002060;  /* Dark Blue: SSHS-SUBJECTS */
  --tab-input:   #c00000;  /* DepEd Red: INPUT DATA */
  --tab-t1:      #00cccc;  /* Cyan/Teal: TERM 1 */
  --tab-t2:      #ffff00;  /* Yellow: TERM 2 */
  --tab-t3:      #ed7d31;  /* Orange/Rust: TERM 3 */
  --tab-avg:     #385723;  /* Forest Green: AVERAGE */

  /* DepEd Official Colors */
  --deped-blue:  #002060;
  --deped-red:   #c00000;
  --deped-gold:  #ffc000;
  --excel-bdr:   #000000;
  --excel-hdr-bg:#f2f2f2;

  /* UI Surface */
  --bg:       #f0f4f8;
  --card:     #ffffff;
  --subtle:   #f8fafc;
  --hover:    #f1f5f9;
  --border:   #e2e8f0;
  --bdr-md:   #cbd5e1;

  /* Text */
  --tx-h:  #0f172a;
  --tx-b:  #1e293b;
  --tx-m:  #475569;
  --tx-l:  #94a3b8;

  /* Grid */
  --gh:    #e8edf2;  /* header bg */
  --gb:    #000000;  /* header border */
  --gc:    #000000;  /* cell border */
  --ga:    #f8fafc;  /* alt row */
  --gs:    rgba(26,107,60,.12); /* selection */
  --gsr:   #1a6b3c;             /* selection ring */
  --hps-bg: #fffbeb;
  --hps-tx: #78350f;
  --hps-bd: #000000;

  /* Passed / Failed */
  --pass-bg:#dcfce7; --pass-tx:#15803d;
  --fail-bg:#fee2e2; --fail-tx:#b91c1c;
  --late-bg:#fef9c3; --late-tx:#a16207;

  /* Layout */
  --hd:   56px;
  --nav:  38px;
  --rb:   44px;
  --fb:   30px;
  --sb:   28px;
  --etb:  36px;  /* Excel tab bar height */

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', Consolas, monospace;
  --r: 6px;  --r-lg: 12px;
  --sh-sm: 0 1px 3px rgba(0,0,0,.07);
  --sh-md: 0 4px 10px rgba(0,0,0,.09);
  --sh-lg: 0 10px 25px rgba(0,0,0,.12);
}

/* Dark Mode */
[data-theme="dark"] {
  --bg:    #09101a; --card: #111827; --subtle: #1a2539;
  --hover: #1e2d42; --border: #243048; --bdr-md: #2e3f5a;
  --tx-h: #f8fafc;  --tx-b: #e2e8f0;  --tx-m: #94a3b8;
  --gh:  #182236;   --gb:   #1e2d42;  --gc: #1e2d42;  --ga: #141f30;
  --hps-bg:#2b1f09; --hps-tx:#fbbf24;
  --ww-bg: #172554; --pt-bg: #431407; --st-bg: #2e1065; --gr-bg: #052e16;
}

/* ─── Reset & Base ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;font-family:var(--font);background:var(--bg);color:var(--tx-b);-webkit-font-smoothing:antialiased;overflow-x:auto;}

/* Dashboard horizontal scrollbar */
#dashboardView {
  width: 100%;
  min-height: 100vh;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#dashboardView .wrap {
  min-width: 1040px;
}
#dashboardView::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
#dashboardView::-webkit-scrollbar-track {
  background: #0f1a30;
}
#dashboardView::-webkit-scrollbar-thumb {
  background: #f2b705;
  border-radius: 5px;
}
#dashboardView::-webkit-scrollbar-thumb:hover {
  background: #ffcb1f;
}

/* ─── App Shell — Clean Spreadsheet Interface ─── */
#app{
  display:grid;
  grid-template-rows: 44px 1fr var(--sb) var(--etb);
  height:100vh;overflow:hidden;
}


/* ══════════════════════════════════════════════════════════
   TOP BAR
══════════════════════════════════════════════════════════ */
.topbar{
  background:var(--card);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1rem;gap:.6rem;box-shadow:var(--sh-sm);z-index:60;
}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;flex-shrink:0}
.brand-ico{
  width:34px;height:34px;
  background:linear-gradient(135deg,#1a6b3c,#0f4726);
  border-radius:var(--r);display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:1.05rem;color:white;
  box-shadow:0 2px 8px rgba(26,107,60,.35);flex-shrink:0;
}
.brand-txt{display:flex;flex-direction:column}
.brand-name{font-size:.95rem;font-weight:800;color:var(--tx-h);line-height:1.2}
.brand-sub{font-size:.64rem;font-weight:600;color:var(--tx-m);letter-spacing:.04em;text-transform:uppercase}

.topbar-center{
  display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;
  background:var(--subtle);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:.28rem .65rem;
}
.sel-item{display:flex;align-items:center;gap:.28rem;font-size:.78rem;font-weight:600;color:var(--tx-m)}
.sel-item select{
  border:none;background:transparent;font:inherit;font-weight:700;
  color:var(--tx-h);cursor:pointer;outline:none;max-width:200px;
}
.sel-div{width:1px;height:16px;background:var(--border)}

.topbar-right{display:flex;align-items:center;gap:.4rem}
.weight-badge{
  display:inline-flex;align-items:center;gap:.28rem;
  border:1px solid var(--border);border-radius:var(--r);
  padding:.18rem .5rem;font-size:.7rem;font-weight:700;background:var(--subtle);
}
.wtag{padding:.1rem .35rem;border-radius:3px;font-size:.68rem;font-weight:800}
.wtag-ww{background:var(--ww-bg);color:var(--ww-color)}
.wtag-pt{background:var(--pt-bg);color:var(--pt-color)}
.wtag-st{background:var(--st-bg);color:var(--st-color)}

.ico-btn{
  width:32px;height:32px;border-radius:var(--r);border:1px solid var(--border);
  background:var(--card);color:var(--tx-m);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .15s;font-size:.9rem;
}
.ico-btn:hover{background:var(--hover);color:var(--tx-h);border-color:var(--bdr-md)}
.ico-btn.active{background:var(--primary-lt);color:var(--primary);border-color:var(--primary)}

/* ══════════════════════════════════════════════════════════
   MODULE NAV (Top)
══════════════════════════════════════════════════════════ */
.module-nav{
  background:var(--card);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 1rem;
  overflow-x:auto;scrollbar-width:none;
}
.module-nav::-webkit-scrollbar{display:none}
.nav-tabs{display:flex;align-items:center}
.nav-tab{
  display:flex;align-items:center;gap:.35rem;
  padding:0 .85rem;height:var(--nav);
  font-size:.8rem;font-weight:600;color:var(--tx-m);
  border-bottom:2px solid transparent;border:none;
  background:none;cursor:pointer;transition:all .15s;white-space:nowrap;
}
.nav-tab:hover{color:var(--tx-h)}
.nav-tab.active{color:var(--primary);border-bottom:2px solid var(--primary)}

/* ══════════════════════════════════════════════════════════
   TOOLBAR RIBBON
══════════════════════════════════════════════════════════ */
.ribbon{
  background:var(--card);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1rem;gap:.4rem;overflow:hidden;
}
.ribbon-left,.ribbon-right{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.lbl{font-size:.72rem;font-weight:600;color:var(--tx-m);white-space:nowrap}

.btn{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.3rem .65rem;font-size:.75rem;font-weight:600;
  border-radius:var(--r);border:1px solid transparent;
  cursor:pointer;font-family:var(--font);transition:all .15s;white-space:nowrap;
}
.btn-primary{background:var(--primary);color:white;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-dk)}
.btn-outline{background:var(--card);border-color:var(--border);color:var(--tx-b)}
.btn-outline:hover{background:var(--hover);border-color:var(--bdr-md)}
.btn-danger{background:#fef2f2;border-color:#fca5a5;color:#dc2626}
.btn-danger:hover{background:#fee2e2}

.form-sel{
  border:1px solid var(--border);border-radius:var(--r);
  padding:.26rem .4rem;font-size:.75rem;font-weight:600;
  font-family:var(--font);background:var(--card);color:var(--tx-b);
  cursor:pointer;outline:none;
}
.form-sel:focus{border-color:var(--primary)}

.toggle-lbl{
  display:flex;align-items:center;gap:.3rem;
  font-size:.72rem;font-weight:600;color:var(--tx-m);cursor:pointer;
}
.toggle-lbl input[type=checkbox]{accent-color:var(--primary)}

/* Dropdown */
.dropdown{position:relative;display:inline-block}
.drop-menu{
  position:absolute;top:calc(100% + 4px);right:0;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  min-width:210px;padding:.35rem 0;z-index:300;display:none;
}
.drop-menu.open{display:block;animation:dropIn .15s ease-out}
@keyframes dropIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.drop-item{
  display:flex;align-items:center;gap:.5rem;
  padding:.42rem .85rem;font-size:.78rem;font-weight:500;
  color:var(--tx-b);background:none;border:none;
  width:100%;text-align:left;cursor:pointer;transition:background .1s;
}
.drop-item:hover{background:var(--hover);color:var(--primary)}
.drop-item.danger{color:#dc2626}
.drop-item.danger:hover{background:#fef2f2}
.drop-sep{height:1px;background:var(--border);margin:.3rem 0}

/* ══════════════════════════════════════════════════════════
   FORMULA BAR
══════════════════════════════════════════════════════════ */
.fbar{
  background:var(--card);border-bottom:2px solid var(--border);
  display:flex;align-items:center;gap:.4rem;
  padding:0 1rem;font-family:var(--mono);font-size:.78rem;
}
.fbar-cell{
  width:68px;background:var(--subtle);border:1px solid var(--border);
  border-radius:var(--r);padding:.1rem .35rem;
  font-weight:800;text-align:center;color:var(--primary);font-size:.74rem;
}
.fbar-sym{color:var(--tx-l);font-style:italic;font-weight:700}
.fbar-input{
  flex:1;border:1px solid var(--border);border-radius:var(--r);
  padding:.1rem .45rem;font:inherit;background:var(--card);
  color:var(--tx-b);outline:none;
}
.fbar-input:focus{border-color:var(--primary)}

/* ══════════════════════════════════════════════════════════
   MAIN CONTENT
══════════════════════════════════════════════════════════ */
.content-area{overflow:hidden;position:relative}
.tab-pane{display:none;height:100%;flex-direction:column}
.tab-pane.active{display:flex}

/* Spreadsheet Viewport */
.sheet-vp{
  flex:1;overflow:auto;background:var(--card);
  scrollbar-width:thin;scrollbar-color:var(--bdr-md) transparent;
}
.sheet-vp::-webkit-scrollbar{width:7px;height:7px}
.sheet-vp::-webkit-scrollbar-thumb{background:var(--bdr-md);border-radius:4px}

/* ─── Excel Table ─── */
.xl-table, .excel-table {
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--mono);
  font-size: .76rem;
  background: var(--card);
  width: max-content;
  min-width: 100%;
  border: 2.5px solid #000000 !important;
}

/* Headers */
.xl-table thead th, .excel-table thead th {
  background: var(--gh);
  color: var(--tx-h);
  font-family: var(--font);
  font-weight: 700;
  font-size: .7rem;
  text-align: center;
  padding: .35rem .4rem;
  border-right: 1px solid #000000 !important;
  border-bottom: 1px solid #000000 !important;
  white-space: nowrap;
}
.xl-table thead tr:first-child th, .excel-table thead tr:first-child th {
  border-top: 2px solid #000000 !important;
}
.xl-table thead tr:nth-child(1) th{position:sticky;top:0;z-index:25}
.xl-table thead tr:nth-child(2) th{position:sticky;top:27px;z-index:24}
.xl-table thead tr:nth-child(3) th{position:sticky;top:54px;z-index:23}

/* Band headers */
.th-info{background:var(--gh)!important}
.th-ww{background:var(--ww-bg)!important;color:var(--ww-color)!important;border-bottom:1px solid #000000!important}
.th-pt{background:var(--pt-bg)!important;color:var(--pt-color)!important;border-bottom:1px solid #000000!important}
.th-st{background:var(--st-bg)!important;color:var(--st-color)!important;border-bottom:1px solid #000000!important}
.th-gr{background:var(--gr-bg)!important;color:var(--gr-color)!important;border-bottom:1px solid #000000!important}

/* Frozen columns & First column */
.xl-table tr > th:first-child,
.xl-table tr > td:first-child,
.excel-table tr > th:first-child,
.excel-table tr > td:first-child,
.col-no {
  border-left: 2px solid #000000 !important;
}

.col-no{position:sticky;left:0;width:36px;min-width:36px;max-width:36px;background:var(--gh);z-index:12;border-right:1px solid #000000!important;border-bottom:1px solid #000000!important}
.col-name{position:sticky;left:36px;width:210px;min-width:210px;background:var(--card);z-index:11;border-right:2px solid #000000!important;border-bottom:1px solid #000000!important;text-align:left!important;padding-left:.6rem!important}
thead .col-no,thead .col-name{background:var(--gh);z-index:35}

/* Rightmost column */
.xl-table tr > th:last-child,
.xl-table tr > td:last-child,
.excel-table tr > th:last-child,
.excel-table tr > td:last-child {
  border-right: 2px solid #000000 !important;
}

/* Last Row */
.xl-table tbody tr:last-child td,
.excel-table tbody tr:last-child td {
  border-bottom: 2px solid #000000 !important;
}

/* Body cells */
.xl-table td, .excel-table td {
  border-right: 1px solid #000000 !important;
  border-bottom: 1px solid #000000 !important;
  padding: .28rem .38rem;
  text-align: center;
  height: 28px;
  white-space: nowrap;
  color: var(--tx-b);
}
.xl-table tbody tr:hover td{background:var(--hover)!important}
.xl-table tbody tr:nth-child(even) td{background:var(--ga)}
.xl-table tbody tr:nth-child(even):hover td{background:var(--hover)!important}
.xl-table tbody tr:hover td.col-no,
.xl-table tbody tr:hover td.col-name{background:var(--hover)!important}

/* HPS Row */
tr.row-hps td{background:var(--hps-bg)!important;color:var(--hps-tx);font-weight:700;border-bottom:2px solid #000000!important;border-right:1px solid #000000!important}

/* Divider rows (MALE / FEMALE) */
tr.row-div td, tr.gender-divider-row td{
  background:var(--subtle)!important;font-family:var(--font);font-size:.7rem;
  font-weight:800;color:var(--tx-m);letter-spacing:.07em;text-transform:uppercase;
  padding:.28rem .65rem!important;text-align:left!important;
  border-top:2px solid #000000!important;border-bottom:2px solid #000000!important;
  border-left:2px solid #000000!important;border-right:2px solid #000000!important;
}

/* Full span / auto-enroll / action rows */
tr.row-auto-enroll td {
  border-bottom: 1px solid #000000 !important;
  border-right: 1px solid #000000 !important;
}
.xl-table tbody tr > td[colspan],
.excel-table tbody tr > td[colspan] {
  border-left: 2px solid #000000 !important;
  border-right: 2px solid #000000 !important;
  border-bottom: 1px solid #000000 !important;
}

/* Editable cells */
.cell-edit{cursor:cell;outline:none;caret-color:var(--primary)}
.cell-edit:hover{background:var(--gs)!important}
.cell-edit:focus,.cell-edit.sel{background:white!important;box-shadow:inset 0 0 0 2px var(--gsr)!important;z-index:5;position:relative}

/* Category cell tints */
.c-ww{background:rgba(219,234,254,.25)!important}
.c-pt{background:rgba(254,243,199,.3)!important}
.c-st{background:rgba(237,233,254,.35)!important}

/* Computed columns */
.c-calc{background:var(--subtle)!important;color:var(--tx-m);font-weight:600}
.hide-calc .c-calc{display:none!important}

/* Grade cells */
.c-grade{background:var(--gr-bg)!important;color:var(--gr-color);font-weight:800;font-size:.82rem}
.c-desc{background:var(--subtle)!important;color:var(--tx-b);font-family:var(--font);font-size:.72rem;font-weight:600}

/* Badges */
.badge{display:inline-block;padding:.1rem .4rem;border-radius:20px;font-size:.66rem;font-weight:700;font-family:var(--font)}
.badge-pass{background:var(--pass-bg);color:var(--pass-tx)}
.badge-fail{background:var(--fail-bg);color:var(--fail-tx)}

/* ══════════════════════════════════════════════════════════
   STATUS BAR
══════════════════════════════════════════════════════════ */
.statusbar{
  background:var(--primary);height:var(--sb);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1rem;font-size:.7rem;font-weight:600;
  color:rgba(255,255,255,.85);z-index:50;
}
.statusbar-left,.statusbar-right{display:flex;align-items:center;gap:1rem}
.stat-m{display:flex;align-items:center;gap:.3rem}
.stat-m strong{color:#a7f3d0;font-weight:800}

/* ══════════════════════════════════════════════════════════
   EXCEL SHEET TAB BAR (Bottom — like in the picture!)
══════════════════════════════════════════════════════════ */
.excel-tab-bar{
  background:#e8edf2;border-top:2px solid var(--border);
  display:flex;align-items:flex-end;
  padding:0 .5rem;gap:.25rem;overflow-x:auto;
  scrollbar-width:none;height:var(--etb);
}
.excel-tab-bar::-webkit-scrollbar{display:none}

.etab{
  display:flex;align-items:center;justify-content:center;
  padding:0 .85rem;height:28px;
  font-family:var(--font);font-size:.72rem;font-weight:800;
  border:none;cursor:pointer;
  border-radius:var(--r) var(--r) 0 0;
  text-transform:uppercase;letter-spacing:.04em;
  color:white;transition:all .15s;
  flex-shrink:0;margin-bottom:0;
  box-shadow:0 -1px 4px rgba(0,0,0,.15);
}
.etab:not(.active){opacity:.75;transform:translateY(3px);height:25px}
.etab:hover{opacity:1;transform:translateY(0);height:28px}

/* Color coding — matches the picture */
.etab-sshs  {background:var(--tab-sshs)}
.etab-input {background:var(--tab-input)}
.etab-t1    {background:var(--tab-t1);color:#1a1a1a}
.etab-t2    {background:var(--tab-t2)}
.etab-t3    {background:var(--tab-t3)}
.etab-avg   {background:var(--tab-avg)}

/* ══════════════════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════════════════ */
.overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;
  padding:1rem;z-index:500;opacity:0;visibility:hidden;transition:all .2s;
}
.overlay.open{opacity:1;visibility:visible}
.modal{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  width:100%;max-width:500px;overflow:hidden;
  transform:scale(.95);transition:transform .2s;
}
.overlay.open .modal{transform:scale(1)}
.modal-hd{padding:.9rem 1.2rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.modal-title{font-size:.95rem;font-weight:800;color:var(--tx-h)}
.modal-body{padding:1.2rem;max-height:65vh;overflow-y:auto}
.modal-ft{padding:.8rem 1.2rem;border-top:1px solid var(--border);background:var(--subtle);display:flex;align-items:center;justify-content:flex-end;gap:.5rem}
.fg{margin-bottom:.85rem}
.fg label{display:block;font-size:.73rem;font-weight:700;color:var(--tx-m);margin-bottom:.28rem}
.fc{width:100%;padding:.45rem .65rem;font-size:.83rem;font-family:var(--font);border:1px solid var(--border);border-radius:var(--r);background:var(--card);color:var(--tx-b);outline:none;transition:border-color .15s}
.fc:focus{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-lt)}

/* ══════════════════════════════════════════════════════════
   SUMMARY / FINAL GRADES TAB
══════════════════════════════════════════════════════════ */
.tab-scroll{flex:1;overflow:auto;padding:.85rem}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm);overflow:hidden;margin-bottom:.75rem}
.card-hd{padding:.7rem 1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--subtle)}
.card-title{font-size:.88rem;font-weight:800;color:var(--tx-h)}

/* ══════════════════════════════════════════════════════════
   ANALYTICS
══════════════════════════════════════════════════════════ */
.analytics-wrap{display:flex;flex-direction:column;gap:.85rem;padding:.85rem;overflow:auto}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.65rem}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:.8rem .9rem;box-shadow:var(--sh-sm)}
.kpi-lbl{font-size:.68rem;font-weight:700;color:var(--tx-m);text-transform:uppercase;letter-spacing:.05em}
.kpi-val{font-size:1.65rem;font-weight:900;color:var(--primary);line-height:1.1;margin-top:.12rem}
.charts-row{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:.65rem}
.bar-row{display:flex;align-items:center;gap:.55rem;margin-bottom:.55rem}
.bar-lbl{width:140px;font-size:.72rem;font-weight:600;color:var(--tx-m)}
.bar-track{flex:1;height:18px;background:var(--subtle);border-radius:4px;overflow:hidden}
.bar-fill{height:100%;border-radius:4px;display:flex;align-items:center;padding-left:.4rem;font-size:.66rem;font-weight:800;color:white;transition:width .5s ease}

/* ══════════════════════════════════════════════════════════
   ATTENDANCE
══════════════════════════════════════════════════════════ */
.att-P{background:var(--pass-bg)!important;color:var(--pass-tx);font-weight:700;cursor:pointer}
.att-A{background:var(--fail-bg)!important;color:var(--fail-tx);font-weight:700;cursor:pointer}
.att-L{background:var(--late-bg)!important;color:var(--late-tx);font-weight:700;cursor:pointer}
.att-E{background:#e0e7ff!important;color:#4338ca;font-weight:700;cursor:pointer}

/* ══════════════════════════════════════════════════════════
   FOCUS / ZEN MODE
══════════════════════════════════════════════════════════ */
body.zen-mode #app{
  grid-template-rows:0 var(--nav) var(--rb) 0 1fr var(--sb) var(--etb);
}
body.zen-mode .topbar{display:none}
body.zen-mode .fbar{display:none}

/* ══════════════════════════════════════════════════════════
   MOBILE
══════════════════════════════════════════════════════════ */
@media(max-width:768px){
  :root{--hd:52px;--rb:40px}
  .topbar-center{display:none}
  .brand-sub{display:none}
  .weight-badge{display:none}
  .fbar{display:none!important}
  #app{grid-template-rows:var(--hd) var(--nav) var(--rb) 0 1fr var(--sb) var(--etb)}
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .charts-row{grid-template-columns:1fr}
  .col-name{left:36px;width:145px;min-width:145px}
  .statusbar-left span:not(:first-child){display:none}
  .etab{padding:0 .55rem;font-size:.65rem}
}

/* ══════════════════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════════════════ */
@media print{
  html,body{overflow:visible;height:auto}
  #app{display:block;height:auto}
  .topbar,.module-nav,.ribbon,.fbar,.statusbar,.excel-tab-bar,.row-auto-enroll{display:none!important}
  .content-area{overflow:visible}
  .tab-pane{display:block!important;height:auto}
  .sheet-vp{overflow:visible;max-height:none}
}
/* ══════════════════════════════════════════════════════════
   DEPED OFFICIAL SHEET HEADER (matches media_1788750444234.png)
══════════════════════════════════════════════════════════ */
#depedBanner,
.deped-sheet-banner {
  display: none !important;
}

[data-theme="dark"] .deped-sheet-banner {
  background: #0f172a;
  color: #f8fafc;
  border-bottom-color: #334155;
}
.dsb-top {
  display: grid;
  grid-template-columns: 80px 1fr 140px;
  align-items: center;
  margin-bottom: 8px;
}
.dsb-seal {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dsb-title-block {
  text-align: center;
}
.dsb-title {
  font-family: Arial, 'Segoe UI', sans-serif;
  font-size: 1.35rem;
  font-weight: 900;
  color: #000000;
  letter-spacing: .02em;
  margin: 0;
  line-height: 1.2;
}
[data-theme="dark"] .dsb-title { color: #f8fafc; }
.dsb-subtitle {
  font-family: Arial, 'Segoe UI', sans-serif;
  font-size: .8rem;
  font-style: italic;
  color: #222222;
  margin-top: 2px;
}
[data-theme="dark"] .dsb-subtitle { color: #94a3b8; }
.dsb-logo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Metadata Grid */
.dsb-meta-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  font-size: .76rem;
  margin-bottom: 6px;
}
.dsb-meta-table td {
  padding: 3px 6px;
  vertical-align: middle;
}
.dsb-lbl {
  font-weight: 800;
  color: #000000;
  text-align: right;
  white-space: nowrap;
  padding-right: 6px;
}
[data-theme="dark"] .dsb-lbl { color: #cbd5e1; }
.dsb-box {
  border: 1px solid #000000;
  background: #ffffff;
  padding: 2px 8px;
  font-weight: 700;
  color: #000000;
  min-height: 20px;
  display: flex;
  align-items: center;
}
[data-theme="dark"] .dsb-box {
  background: #1e293b;
  color: #f8fafc;
  border-color: #475569;
}

/* Class Info Band */
.dsb-band-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  font-size: .76rem;
  border: 1.5px solid #000000;
}
[data-theme="dark"] .dsb-band-table { border-color: #475569; }
.dsb-band-table td {
  border: 1px solid #000000;
  padding: 4px 8px;
  vertical-align: middle;
}
[data-theme="dark"] .dsb-band-table td { border-color: #475569; }
.dsb-term-box {
  width: 190px;
  font-size: 1.15rem;
  font-weight: 900;
  text-align: center;
  letter-spacing: .05em;
  background: #f8fafc;
  color: #000000;
}
[data-theme="dark"] .dsb-term-box { background: #1e293b; color: #38bdf8; }
.dsb-band-lbl {
  font-size: .7rem;
  font-weight: 800;
  color: #000000;
  text-transform: uppercase;
}
[data-theme="dark"] .dsb-band-lbl { color: #94a3b8; }
.dsb-band-val {
  font-size: .82rem;
  font-weight: 700;
  color: #000000;
}
[data-theme="dark"] .dsb-band-val { color: #f8fafc; }

/* ══════════════════════════════════════════════════════════
   INPUT DATA SHEET (matches media_1788750203921.png)
══════════════════════════════════════════════════════════ */
.input-sheet-wrap {
  flex: 1;
  overflow: auto;
  background: #f1f5f9;
  padding: 1.25rem;
  display: flex;
  justify-content: center;
}
[data-theme="dark"] .input-sheet-wrap { background: #0b1120; }
.input-sheet-card {
  background: #ffffff;
  border: 2px solid #002060;
  box-shadow: 0 8px 30px rgba(0,32,96,.15);
  max-width: 1200px;
  width: 100%;
  padding: 1.5rem 2rem;
  font-family: Arial, 'Segoe UI', sans-serif;
  color: #000;
}
[data-theme="dark"] .input-sheet-card {
  background: #111827;
  border-color: #1e3a8a;
  color: #e2e8f0;
}
.isc-top {
  display: grid;
  grid-template-columns: 80px 1fr 140px;
  align-items: center;
  border-bottom: 2px solid #002060;
  padding-bottom: .75rem;
  margin-bottom: 1.2rem;
}
.isc-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: #002060;
  text-align: center;
  letter-spacing: .02em;
}
[data-theme="dark"] .isc-title { color: #60a5fa; }
.isc-grid {
  display: grid;
  grid-template-columns: 380px 1fr 1fr;
  gap: 1.5rem;
}
@media(max-width: 1024px) {
  .isc-grid { grid-template-columns: 1fr; }
}
.isc-left-box {
  border: 2px solid #002060;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}
[data-theme="dark"] .isc-left-box { background: #1e293b; border-color: #3b82f6; }
.isc-box-hd {
  background: #002060;
  color: #ffffff;
  font-weight: 900;
  font-size: .78rem;
  letter-spacing: .05em;
  padding: .5rem .75rem;
  text-align: center;
  text-transform: uppercase;
}
.isc-form-inner {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.isc-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
}
.isc-lbl {
  font-weight: 800;
  color: #002060;
  text-transform: uppercase;
}
[data-theme="dark"] .isc-lbl { color: #93c5fd; }
.isc-input, .isc-select {
  border: 1.5px solid #000000;
  padding: .35rem .5rem;
  font-size: .8rem;
  font-weight: 700;
  background: #ffffff;
  color: #000000;
  outline: none;
  font-family: inherit;
  border-radius: 2px;
}
[data-theme="dark"] .isc-input, [data-theme="dark"] .isc-select {
  background: #0f172a;
  color: #f8fafc;
  border-color: #64748b;
}
.isc-hint {
  font-size: .68rem;
  font-style: italic;
  color: #64748b;
  margin-top: .15rem;
}
.isc-disclaimer {
  font-size: .7rem;
  font-style: italic;
  color: #475569;
  border-top: 1px dashed #cbd5e1;
  padding-top: .6rem;
  margin-top: .4rem;
  line-height: 1.4;
}
[data-theme="dark"] .isc-disclaimer { color: #94a3b8; border-top-color: #334155; }
.isc-prep {
  margin-top: 1.5rem;
  font-size: .75rem;
}
.isc-prep-name {
  font-weight: 900;
  font-size: .85rem;
  margin-top: .2rem;
  text-transform: uppercase;
  border-bottom: 1px solid #000;
  padding-bottom: 2px;
  display: inline-block;
}
[data-theme="dark"] .isc-prep-name { border-bottom-color: #fff; }

/* Learner Columns */
.isc-col-hd {
  background: #002060;
  color: #fff;
  font-weight: 800;
  font-size: .75rem;
  padding: .35rem .6rem;
  letter-spacing: .05em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.isc-learners-list {
  border: 1.5px solid #002060;
  max-height: 480px;
  overflow-y: auto;
  background: #fff;
}
[data-theme="dark"] .isc-learners-list { background: #1e293b; border-color: #3b82f6; }
.isc-learner-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e2e8f0;
  padding: 2px 4px;
}
[data-theme="dark"] .isc-learner-item { border-bottom-color: #334155; }
.isc-l-no {
  width: 26px;
  height: 22px;
  background: #002060;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  font-weight: 800;
  margin-right: 4px;
  flex-shrink: 0;
}
.isc-l-input {
  flex: 1;
  border: none;
  font-size: .76rem;
  font-weight: 600;
  color: #000;
  padding: 2px 4px;
  background: transparent;
  outline: none;
  font-family: inherit;
}
[data-theme="dark"] .isc-l-input { color: #f8fafc; }
.isc-l-input:focus { background: #e0f2fe; }
[data-theme="dark"] .isc-l-input:focus { background: #1e3a8a; }

/* Count Box */
.isc-count-box {
  margin-top: 1rem;
  border: 2px solid #002060;
  background: #fff;
}
[data-theme="dark"] .isc-count-box { background: #1e293b; border-color: #3b82f6; }
.isc-count-hd {
  background: #002060;
  color: #fff;
  font-weight: 900;
  font-size: .75rem;
  padding: .35rem .6rem;
  text-align: center;
  letter-spacing: .05em;
}
.isc-count-body {
  padding: .5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .8rem;
  font-weight: 800;
}
.isc-count-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed #cbd5e1;
  padding: .2rem 0;
}
.isc-count-row:last-child {
  border-bottom: none;
  border-top: 2px solid #002060;
  padding-top: .3rem;
  color: #002060;
  font-size: .88rem;
}
[data-theme="dark"] .isc-count-row:last-child {
  border-top-color: #60a5fa;
  color: #60a5fa;
}

/* Save / Action Strip */
.isc-actions-strip {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD VIEW
══════════════════════════════════════════════════════════ */
.view-dashboard {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;
  background: #f1f5f9;
}
[data-theme="dark"] .view-dashboard { background: #090e17; }
.d-hero {
  background: linear-gradient(135deg, #002060 0%, #1a4f9c 100%);
  padding: 1.25rem 2rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 16px rgba(0,32,96,.25);
}
.d-hero-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.d-hero-titles h1 {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.2;
}
.d-hero-titles p {
  font-size: .76rem;
  opacity: .85;
  margin-top: .15rem;
  font-weight: 500;
}
.d-hero-btn {
  background: #ffc000;
  color: #002060;
  font-weight: 900;
  font-size: .88rem;
  padding: .65rem 1.4rem;
  border-radius: var(--r-lg);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  transition: all .2s;
  text-decoration: none;
}
.d-hero-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
  background: #ffd033;
}
.d-strip {
  background: #001540;
  color: #cbd5e1;
  padding: .45rem 2rem;
  font-size: .74rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.d-strip strong { color: #fde047; }
.d-container {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  flex: 1;
}
.d-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: .75rem;
}
.d-filter-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--tx-h);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.d-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1.1rem;
}
.d-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all .2s;
}
.d-card:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
  border-color: #002060;
}
.d-card-top {
  height: 5px;
  background: linear-gradient(90deg, #002060, #16a34a);
}
.d-card-body {
  padding: 1.1rem;
  flex: 1;
}
.d-card-subject {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--tx-h);
  line-height: 1.3;
}
.d-card-sec {
  display: inline-block;
  background: var(--primary-lt);
  color: var(--primary);
  font-size: .72rem;
  font-weight: 800;
  padding: .15rem .5rem;
  border-radius: 4px;
  margin: .35rem 0 .75rem 0;
}
.d-card-teacher {
  font-size: .8rem;
  color: var(--tx-m);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .6rem;
}
.d-card-terms {
  display: flex;
  gap: .35rem;
  margin-top: .6rem;
}
.d-term-pill {
  font-size: .68rem;
  font-weight: 800;
  padding: .15rem .45rem;
  border-radius: 20px;
}
.d-term-1 { background: #cffafe; color: #0891b2; }
.d-term-2 { background: #fef08a; color: #854d0e; }
.d-term-3 { background: #ffedd5; color: #c2410c; }
.d-card-footer {
  padding: .75rem 1.1rem;
  background: var(--subtle);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.btn-card-open {
  flex: 1;
  background: #002060;
  color: #fff;
  border: none;
  border-radius: var(--r);
  padding: .5rem .8rem;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  text-decoration: none;
}
.btn-card-open:hover { background: #001540; }
.btn-card-del {
  width: 34px;
  height: 34px;
  border-radius: var(--r);
  border: 1px solid #fca5a5;
  background: #fef2f2;
  color: #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: .85rem;
  transition: all .15s;
}
.btn-card-del:hover {
  background: #fee2e2;
  border-color: #dc2626;
}

/* ═══════════════════════════════════════════════════════════
   AUTO-ENROLL ROSTER ROW (Below HPS)
═══════════════════════════════════════════════════════════ */
.row-auto-enroll {
  background: #eff6ff !important;
  border-top: 1px solid #bfdbfe;
  border-bottom: 2px solid #93c5fd;
}
.row-auto-enroll td {
  background: #eff6ff !important;
  color: #1e40af;
  vertical-align: middle;
}
.row-auto-enroll .col-no {
  background: #dbeafe !important;
  text-align: center;
  font-weight: 700;
}
.btn-auto-enroll {
  background: #2563eb !important;
  color: #ffffff !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 4px !important;
  border: 1px solid #1d4ed8 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(37,99,235,0.25);
  transition: all .15s ease;
  white-space: nowrap;
}
.btn-auto-enroll:hover {
  background: #1d4ed8 !important;
  box-shadow: 0 2px 6px rgba(29,78,216,0.35);
  transform: translateY(-1px);
}
[data-theme="dark"] .row-auto-enroll {
  background: #1e293b !important;
  border-color: #334155;
}
[data-theme="dark"] .row-auto-enroll td {
  background: #1e293b !important;
  color: #93c5fd;
}
[data-theme="dark"] .row-auto-enroll .col-no {
  background: #0f172a !important;
}

/* ═══════════════════════════════════════════════════════════
   REDESIGNED DASHBOARD (Spectral & Inter · Classic DepEd Theme)
═══════════════════════════════════════════════════════════ */
:root {
  --ink: #0f1a30;
  --ink-soft: #16223f;
  --ink-line: #263457;
  --gold: #f2b705;
  --gold-dim: #caa53a;
  --sky: #7ea0ff;
  --paper: #f6f3ea;
  --paper-line: #e2ddcc;
  --text-light: #e9edf9;
  --text-muted: #97a3c4;
  --text-dark: #1b2033;
  --text-dark-muted: #5b6178;
  --radius-card: 14px;
  --radius-pill: 999px;
  --serif: 'Spectral', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.view-dashboard {
  background: var(--paper) !important;
  color: var(--text-dark) !important;
  font-family: var(--sans) !important;
  min-height: 100vh;
}

.view-dashboard .wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
}

/* Topbar */
.view-dashboard .dash-topbar {
  background: var(--ink);
  border-bottom: 1px solid var(--ink-line);
}
.view-dashboard .dash-topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  gap: 20px;
}
.view-dashboard .brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
.view-dashboard .seal {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}
.view-dashboard .brand-text .name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 24px;
  color: var(--text-light);
  letter-spacing: 0.3px;
  line-height: 1.2;
}
.view-dashboard .brand-text .division {
  font-size: 14.5px;
  font-weight: 500;
  color: #b8c4e0;
  margin-top: 2px;
}
.view-dashboard nav.top-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.view-dashboard nav.top-nav a {
  text-decoration: none;
  font-size: 14px;
  color: var(--text-muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.view-dashboard nav.top-nav a:hover {
  color: var(--text-light);
  border-color: var(--gold-dim);
}
@media (max-width: 760px) {
  .view-dashboard nav.top-nav { display: none; }
}

/* Hero */
.view-dashboard .hero {
  background:
    radial-gradient(ellipse 900px 500px at 82% -10%, rgba(122,150,235,0.18), transparent 60%),
    linear-gradient(180deg, var(--ink), #0c1526);
  color: var(--text-light);
  padding: 76px 0 90px;
}
.view-dashboard .hero .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.view-dashboard .hero-content {
  width: 100%;
  max-width: 740px;
}
.view-dashboard .tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--gold);
  border: 1px solid rgba(242,183,5,0.35);
  background: rgba(242,183,5,0.07);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.3px;
}
.view-dashboard .tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
}
.view-dashboard h1.headline {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(38px, 5.2vw, 58px);
  line-height: 1.06;
  margin: 22px 0 18px;
  max-width: 12ch;
  color: var(--text-light);
}
.view-dashboard .hero p.lede {
  font-size: 16.5px;
  color: var(--text-muted);
  max-width: 48ch;
  margin: 0 0 30px;
  line-height: 1.6;
}
.view-dashboard .term-tabs {
  display: inline-flex;
  border: 1px solid var(--ink-line);
  border-radius: 10px;
  overflow: hidden;
  margin: 4px 0 28px;
}
.view-dashboard .term-tab {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text-muted);
  background: var(--ink-soft);
  border: none;
  border-right: 1px solid var(--ink-line);
  padding: 11px 20px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.view-dashboard .term-tab:last-child { border-right: none; }
.view-dashboard .term-tab:hover { color: var(--text-light); }
.view-dashboard .term-tab.active {
  background: var(--gold);
  color: #241a00;
}

.view-dashboard .hero .cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.view-dashboard .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  padding: 13px 22px;
  border-radius: 9px;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
  border: none;
}
.view-dashboard .btn:hover { transform: translateY(-1px); }
.view-dashboard .btn-primary {
  background: var(--gold);
  color: #241a00;
}
.view-dashboard .btn-primary:hover { background: #ffcb1f; }
.btn-dash-back {
  background: var(--gold, #f2b705) !important;
  color: #1a1300 !important;
  border: 1px solid #caa53a !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(242,183,5,0.35);
  transition: all 0.15s ease;
}
.btn-dash-back:hover {
  background: #ffcb1f !important;
  color: #000 !important;
  transform: translateY(-1px);
}
.view-dashboard .btn-ghost {
  background: transparent;
  color: var(--text-light);
  border: 1px solid var(--ink-line);
}
.view-dashboard .btn-ghost:hover { border-color: var(--sky); color: #fff; }

/* Record demo card */
.view-dashboard .record-card {
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: 18px;
  padding: 26px 26px 22px;
  box-shadow: 0 30px 60px -25px rgba(0,0,0,0.55);
  margin-top: 32px;
  width: 100%;
  max-width: 660px;
}
.view-dashboard .record-card .rc-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
}
.view-dashboard .record-card .rc-head .label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--text-muted);
  font-weight: 700;
}
.view-dashboard .record-card .rc-head .sy {
  font-size: 13px;
  color: var(--sky);
  font-weight: 600;
}
.view-dashboard .class-table {
  width: 100%;
  border-collapse: collapse;
}
.view-dashboard .class-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--text-muted);
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink-line);
}
.view-dashboard .class-table td {
  padding: 13px 0;
  font-size: 14px;
  color: var(--text-light);
  border-bottom: 1px dashed var(--ink-line);
}
.view-dashboard .class-table tr:last-child td { border-bottom: none; }
.view-dashboard .open-link {
  color: var(--sky);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.view-dashboard .open-link:hover { text-decoration: underline; color: #a5bfff; }

/* Framework Section */
.view-dashboard .section {
  padding: 84px 0;
}
.view-dashboard .section-head {
  max-width: 56ch;
  margin-bottom: 44px;
}
.view-dashboard .section-head .kicker {
  font-size: 13px;
  color: var(--gold-dim);
  font-weight: 600;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.view-dashboard .section-head h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 36px);
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--text-dark);
}
.view-dashboard .section-head p {
  color: var(--text-dark-muted);
  font-size: 15.5px;
  margin: 0;
}

.view-dashboard .framework {
  background: var(--paper);
}
.view-dashboard .weight-bar {
  display: flex;
  height: 46px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--paper-line);
  margin-bottom: 28px;
}
.view-dashboard .weight-bar .seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
}
.view-dashboard .seg.ww { width: 20%; background: #33456f; }
.view-dashboard .seg.pt { width: 50%; background: var(--ink); }
.view-dashboard .seg.stte { width: 30%; background: var(--gold-dim); color: #241a00; }

.view-dashboard .weight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 760px) {
  .view-dashboard .weight-grid { grid-template-columns: 1fr; }
}
.view-dashboard .weight-item {
  border-top: 3px solid var(--ink-line);
  padding-top: 14px;
}
.view-dashboard .weight-item.ww { border-color: #33456f; }
.view-dashboard .weight-item.pt { border-color: var(--ink); }
.view-dashboard .weight-item.stte { border-color: var(--gold-dim); }
.view-dashboard .weight-item .pct {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
}
.view-dashboard .weight-item .wname {
  font-weight: 600;
  font-size: 14.5px;
  margin: 4px 0 6px;
}
.view-dashboard .weight-item p {
  font-size: 13.5px;
  color: var(--text-dark-muted);
  margin: 0;
}

/* Sections directory */
.view-dashboard .sections-dir {
  background: #fff;
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
}
.view-dashboard .sec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 900px) {
  .view-dashboard .sec-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .view-dashboard .sec-grid { grid-template-columns: 1fr; }
}
.view-dashboard .sec-card {
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-card);
  padding: 20px 18px;
  background: var(--paper);
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.view-dashboard .sec-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}
.view-dashboard .sec-card .grade-tag {
  font-size: 11.5px;
  color: var(--text-dark-muted);
  font-weight: 600;
}
.view-dashboard .sec-card .philosopher {
  font-family: var(--serif);
  font-size: 22px;
  margin: 4px 0 10px;
  font-weight: 600;
}
.view-dashboard .sec-card .subj-tag {
  display: inline-block;
  font-size: 12px;
  background: var(--ink);
  color: var(--text-light);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
}
.view-dashboard .sec-card .learners {
  font-size: 13px;
  color: var(--text-dark-muted);
}

/* Access section */
.view-dashboard .access {
  background: var(--paper);
}
.view-dashboard .access-panel {
  background: var(--ink);
  border-radius: 20px;
  padding: 44px 48px;
  color: var(--text-light);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 30px;
  align-items: center;
  margin-bottom: 36px;
}
@media (max-width: 760px) {
  .view-dashboard .access-panel { grid-template-columns: 1fr; padding: 34px 26px; }
}
.view-dashboard .access-panel h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--text-light);
}
.view-dashboard .access-panel p {
  color: var(--text-muted);
  font-size: 14.5px;
  margin: 0;
  max-width: 44ch;
}
.view-dashboard .access-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
@media (max-width: 760px) {
  .view-dashboard .access-actions { justify-content: flex-start; }
}

/* Dashboard Footer */
.view-dashboard footer {
  background: var(--ink);
  border-top: 1px solid var(--ink-line);
  padding: 34px 0;
}
.view-dashboard footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.view-dashboard footer p {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-muted);
}