:root{font-family:Inter,"Segoe UI",sans-serif;color:#172033;background:#f3f6f8;--navy:#12304a;--teal:#0f766e;--line:#d6e0e7}*{box-sizing:border-box}body{margin:0}header{background:linear-gradient(120deg,#102d46,#174f63);color:white;padding:30px max(5vw,24px);display:flex;justify-content:space-between;align-items:center}h1{margin:4px 0}.eyebrow{font-size:12px;letter-spacing:.12em;color:#9dd7d1}main{max-width:1260px;margin:24px auto;padding:0 20px}nav{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}.tab{background:#e6edf1;color:#456}.tab.active{background:var(--navy);color:white}.panel{display:none;background:white;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 8px 28px #0b24330d}.panel.active{display:block}h2{margin-top:0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}label{font-size:13px;font-weight:600;color:#435466}input,select{display:block;width:100%;margin-top:6px;border:1px solid #bdcbd4;border-radius:8px;padding:10px;background:#fff}button{border:0;border-radius:8px;padding:10px 15px;background:var(--teal);color:white;font-weight:700;cursor:pointer}.secondary{background:#e8f0f2;color:#1d4e57}.danger,.icon{background:#fbe9e7;color:#a42c22}.actions,.section-head,.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px}.report-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.catalog-card,.class-card{border:1px solid var(--line);border-radius:12px;padding:18px;background:#fbfcfd}.class-card{margin:14px 0}.catalog-card .card-head{margin-top:0}.catalog-list{display:grid;gap:8px}.catalog-row{display:grid;grid-template-columns:1fr 38px;gap:8px}.catalog-row input{margin:0}.save-status{color:#17634d;font-weight:700}.course{display:grid;grid-template-columns:2fr 1.3fr 1.3fr 1.1fr .7fr .7fr .7fr 1fr 38px;gap:8px;align-items:end;padding:12px 0;border-bottom:1px dashed var(--line)}.icon{font-size:20px;padding:8px}.alert{padding:12px;border-radius:8px;margin:12px 0}.error{background:#fff0ee;color:#9f251d}.ok{background:#e8f7f2;color:#17634d}.table-wrap{overflow:auto;margin-top:14px}table{width:100%;border-collapse:collapse;font-size:13px}th{background:#dbeaf1;color:#18374b}th,td{border:1px solid #c4d1d9;padding:8px;text-align:center}td:nth-child(6),td:nth-child(7),td:nth-child(8){text-align:left}.class-title{margin:24px 0 4px}.muted{color:#637785}@media(max-width:900px){.course,.catalog-grid{grid-template-columns:1fr 1fr}.catalog-grid{grid-template-columns:1fr}header span{display:none}}
.auth-screen{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,#102d46,#176b70)}.auth-screen[hidden],#appShell[hidden],[hidden]{display:none!important}.auth-card{width:min(440px,100%);background:white;border-radius:18px;padding:30px;box-shadow:0 20px 60px #061a2a55}.auth-card .eyebrow{color:#0f766e}.auth-card label{display:block;margin:14px 0}.auth-card button{width:100%;margin-top:10px}.form-error{min-height:22px;color:#a42c22;font-size:13px}.dept-line{margin:0 0 10px;color:#d8f6f4;font-size:14px;font-weight:700;letter-spacing:.08em}.program-list{display:grid;gap:16px;margin:16px 0 24px}.program-card{border:1px solid var(--line);border-radius:14px;padding:16px;background:#fbfcfd}.program-head{display:grid;gap:12px}.program-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr 1fr 1.4fr;gap:12px}.program-card table input,.program-card table select{margin:0;padding:7px}.linked-class{border-color:#8fc7d3;background:#f8fdff}.linked-note{margin:10px 0;padding:10px;border-radius:10px;background:#eef8fb;color:#315869;font-weight:600}.class-card input:disabled,.class-card select:disabled{background:#eef2f5;color:#607080;cursor:not-allowed}.result-layout{display:grid;grid-template-columns:260px 1fr;gap:18px;align-items:start}.result-tree{border:1px solid var(--line);border-radius:14px;background:#fbfcfd;padding:12px;max-height:75vh;overflow:auto;position:sticky;top:12px}.tree-node,.tree-month{width:100%;text-align:left;margin:2px 0;background:#eef4f7;color:#234;border-radius:8px;padding:8px 10px}.tree-node.active,.tree-month.active{background:var(--navy);color:white}.tree-term{margin-left:10px}.tree-months{margin-left:12px;display:grid;gap:2px}.result-context{padding:12px 14px;border:1px solid #b9d7df;background:#f4fbfd;border-radius:12px;margin-bottom:12px}.result-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.mini-tab{background:#e8f0f2;color:#1d4e57}.mini-tab.active{background:var(--teal);color:white}.course{grid-template-columns:1.7fr .8fr 1.1fr 1.1fr 1fr .75fr .75fr .7fr .9fr 1.4fr 38px}.course-status{align-self:center;font-size:12px;line-height:1.35}.completed-course{background:#fff4f2;border-radius:10px;padding-left:8px;padding-right:8px}.status-pill{display:inline-block;padding:4px 8px;border-radius:999px;font-weight:700;white-space:nowrap}.status-pill.todo{background:#edf2f7;color:#455468}.status-pill.doing{background:#fff4d6;color:#8a5b00}.status-pill.done{background:#e8f7f2;color:#17634d}.status-pill.bad{background:#ffe5e2;color:#a42c22}.progress-wrap table{min-width:1900px}.progress-wrap th,.progress-wrap td{font-size:12px;padding:6px}.progress-wrap td:nth-child(5){text-align:left;min-width:220px}.issue-notes{margin:22px 0;padding:18px;border:1px solid #f3c7c2;background:#fff8f7;border-radius:12px}.issue-notes h3{margin:0 0 10px;color:#8f261f}.issue-notes li{margin:8px 0;line-height:1.45}.ai-notes{margin:22px 0;padding:18px;border:1px solid #b9d7df;background:#f4fbfd;border-radius:12px}.ai-notes h3{margin:0 0 10px;color:#174f63}.ai-notes li{margin:8px 0;line-height:1.45}.user-box{text-align:right;display:grid;gap:4px}.user-box small{color:#b9d7df}.header-button{background:#ffffff1c;border:1px solid #ffffff55;padding:8px 12px}.user-form{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr auto;gap:12px;align-items:end;padding:16px;background:#f4f8fa;border-radius:12px}.user-list{display:grid;gap:10px;margin-top:18px}.user-row{display:grid;grid-template-columns:1.6fr 1fr 1.3fr 1fr auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:10px}.user-row>input,.user-row>select{margin:0}.user-row small{display:block;color:#637785}.active-user{display:flex;align-items:center;gap:8px}.active-user input{width:auto;margin:0}@media(max-width:1200px){.course,.program-grid{grid-template-columns:1fr 1fr}.result-layout{grid-template-columns:1fr}.result-tree{position:static;max-height:360px}}@media(max-width:900px){.user-form,.user-row{grid-template-columns:1fr 1fr}.user-box{font-size:12px}}
.tree-month-row{display:grid;gap:4px;margin-bottom:6px}.tree-leaves{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-left:10px}.tree-leaves button{padding:6px 4px;background:#dfecef;color:#28505a;font-size:11px}.tree-empty{padding:8px 10px}
.setup-package{margin:14px 0}.setup-package .alert{line-height:1.5}
.package-card{display:flex;justify-content:space-between;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;background:#fbfcfd;padding:14px;margin:10px 0}.package-card.active-package-card{border-color:#0f766e;background:#f1fbf8}
.package-tree{display:grid;gap:8px;margin-top:14px}
.pkg-node{border:1px solid #d8e5ec;border-radius:12px;background:#fbfdff;padding:8px 10px}
.pkg-node summary{cursor:pointer;font-weight:800;color:#12304a;padding:8px 10px;border-radius:8px;background:#edf5f8;list-style:none}
.pkg-node summary::-webkit-details-marker{display:none}
.pkg-node summary::before{content:"▸";display:inline-block;margin-right:8px;transition:.15s transform}
.pkg-node[open]>summary::before{transform:rotate(90deg)}
.pkg-program{margin:8px 0 0 14px;background:#fff}
.pkg-term{margin:8px 0 0 14px;background:#fff}
.pkg-months{display:grid;gap:8px;margin:10px 0 4px 18px}
.pkg-month{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #d9e5eb;border-radius:12px;padding:12px;background:#fff}
.pkg-month.active{border-color:#0f766e;background:#eefbf7}
.pkg-month strong,.pkg-month small,.pkg-month span{display:block}
.pkg-month small{color:#425d70;margin-top:2px}
.pkg-month span{color:#637785;font-size:13px;margin-top:3px}
.prep-side-tree{display:grid;gap:2px;margin:2px 0 7px 17px;padding-left:7px;border-left:1px solid rgba(255,255,255,.22)}
.side-node{margin:2px 0}
.side-node summary{cursor:pointer;list-style:none;border-radius:6px;background:rgba(255,255,255,.08);color:#eaf4ff;padding:5px 7px;font-size:10.8px;font-weight:800;line-height:1.2}
.side-node summary::-webkit-details-marker{display:none}
.side-node summary::before{content:"▸";display:inline-block;margin-right:5px;transition:.15s transform}
.side-node[open]>summary::before{transform:rotate(90deg)}
.side-program{margin-left:6px}
.side-term{margin-left:8px}
.side-month{width:100%;text-align:left;margin:2px 0 2px 10px;padding:5px 7px;border-radius:6px;background:rgba(255,255,255,.13);color:#fff;font-size:10.8px;font-weight:700}
.side-month.active{background:#1d84ff;box-shadow:inset 3px 0 0 #bae6fd}

/* Accordion sidebar: fixed header/support, scrollable menu body */
#appShell nav{
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  height:100vh!important;
  max-height:100vh!important;
  min-height:0!important;
}
#appShell nav .side-brand{
  flex:0 0 auto!important;
}
.sidebar-menu{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding-right:3px;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#7dd3fc rgba(255,255,255,.12);
}
#appShell nav .support-card{
  flex:0 0 auto!important;
  margin-top:8px!important;
}
.sidebar-menu::-webkit-scrollbar{width:8px}
.sidebar-menu::-webkit-scrollbar-track{background:rgba(255,255,255,.1);border-radius:10px}
.sidebar-menu::-webkit-scrollbar-thumb{background:#7dd3fc;border-radius:10px}
.sidebar-menu::-webkit-scrollbar-thumb:hover{background:#bae6fd}
#appShell .nav-group:not(.open)>.nav-submenu{display:none!important}
#appShell .nav-group.open>.nav-submenu{display:grid!important}
#appShell .subtab span::before{content:"▸";display:inline-block;margin-right:6px}
#appShell .subtab.tree-open span::before{content:"▾"}
.prep-side-tree:not(.open){display:none!important}
.prep-side-tree.open{display:grid}
.nav-tree .side-node summary.active,.prep-side-tree .side-node summary.active{background:#143a5b;color:#fff;box-shadow:inset 3px 0 0 #7dd3fc}
.nav-tree .side-node summary,.prep-side-tree .side-node summary{width:100%}
@media(max-width:820px){
  .sidebar-menu{max-height:55vh}
}

/* Dashboard redesign */
body{background:#eef3f7;color:#0d1b33}
#appShell:not([hidden]){min-height:100vh;display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-rows:auto 1fr}
#appShell>header{grid-column:2;grid-row:1;background:#fff;color:#0d1b33;padding:18px 28px;border-bottom:1px solid #d9e3ea;box-shadow:0 10px 28px #0a2a4a0d}
#appShell>header h1{font-size:28px;letter-spacing:.01em;color:#102044}
#appShell>header .eyebrow{color:#0f4e7a}
#appShell>header .dept-line{color:#1a7182}
#appShell>header>div:first-child p:not(.eyebrow):not(.dept-line){display:none}
#appShell>main{display:contents;max-width:none;margin:0;padding:0}
#appShell nav{grid-column:1;grid-row:1 / span 2;margin:0;padding:24px 16px;display:flex;flex-direction:column;gap:10px;min-height:100vh;background:linear-gradient(180deg,#052b58,#00395f 52%,#06264c);box-shadow:inset -1px 0 0 #ffffff18}
.side-brand{display:flex;gap:14px;align-items:center;color:#fff;padding:6px 8px 22px;margin-bottom:10px;border-bottom:1px solid #ffffff24}
.side-logo{width:48px;height:48px;border-radius:14px;background:#e8f3ff;color:#063060;display:grid;place-items:center;font-size:24px;transform:rotate(-12deg)}
.side-brand strong,.side-brand span{display:block;font-size:14px;line-height:1.45}
.side-brand span{font-weight:800}
#appShell .tab{width:100%;text-align:left;background:transparent;color:#dbeafe;border:1px solid transparent;border-radius:12px;padding:14px 16px;display:grid;gap:3px;position:relative}
#appShell .tab span{font-size:16px;font-weight:800}
#appShell .tab small{color:#b9d7ea;font-size:13px}
#appShell .tab.active{background:#0d6bd3;color:#fff;border-color:#2f9dff;box-shadow:0 12px 24px #001c3f55}
#appShell .tab.active small{color:#e9f5ff}
.support-card{margin-top:auto;border:1px solid #ffffff35;border-radius:12px;padding:16px;color:#fff;background:#ffffff0d}
.support-card span{display:block;color:#d7ecff;margin-top:4px}
#appShell .panel{grid-column:2;grid-row:2;margin:18px 28px 28px;display:none;border-radius:0;border:0;box-shadow:none;background:transparent;padding:0}
#appShell>header,#appShell .panel{min-width:0}
#appShell .panel.active{display:block}
#appShell .panel:not(.dashboard-panel)>*:not(.result-layout),#appShell .panel:not(.dashboard-panel)>.result-layout,#appShell .panel:not(.dashboard-panel)>.section-head,#appShell .panel:not(.dashboard-panel)>h2,#appShell .panel:not(.dashboard-panel)>p,#appShell .panel:not(.dashboard-panel)>.grid,#appShell .panel:not(.dashboard-panel)>.catalog-grid,#appShell .panel:not(.dashboard-panel)>.actions,#appShell .panel:not(.dashboard-panel)>div{background:#fff;border-radius:16px}
#appShell .panel:not(.dashboard-panel){background:#fff;border:1px solid #dbe5ec;border-radius:16px;padding:24px;box-shadow:0 20px 50px #0a2a4a10}
.user-box{color:#0d1b33}
.user-box small{color:#637785}
.header-button{background:#edf4f8;color:#12304a;border:1px solid #d5e3ea}
.dashboard-panel{background:transparent!important}
.dashboard-head{margin:0 0 14px;background:transparent!important}
.dashboard-head h2{margin:0;color:#102044;font-size:28px}
.dashboard-head p{margin:8px 0 0;color:#5b6b7b}
.progress-filter-bar{display:grid;grid-template-columns:repeat(7,minmax(130px,1fr));gap:14px;background:#fff;border:1px solid #ff6b6b;border-radius:12px;padding:16px 18px;margin:0 0 14px}
.progress-filter-bar label{color:#101f37}
.progress-filter-bar select{border-radius:8px;background:#fff}
.progress-context{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid #dfe8ef;border-radius:12px 12px 0 0;padding:16px 20px;color:#0f2c5f}
.progress-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;background:#fff;border-left:1px solid #dfe8ef;border-right:1px solid #dfe8ef;border-bottom:1px solid #dfe8ef;border-radius:0 0 12px 12px;padding:0 20px 20px}
.progress-card{display:flex;align-items:center;gap:20px;border-radius:10px;padding:22px 28px;border:1px solid #d8e5db;background:#f4fbf5}
.progress-card .card-icon{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:34px;font-weight:900}
.progress-card span{font-weight:800}.progress-card strong{font-size:38px;display:inline-block;margin:4px 8px 0 0}.progress-card em{font-style:normal;color:#1f2937}.progress-card p{margin:6px 0 0;color:#1f2937}
.progress-card.done{border-color:#9cd4aa;background:#f1fbf3}.progress-card.done .card-icon{background:#1f9d45;color:#fff}.progress-card.done strong{color:#14813a}
.progress-card.doing{border-color:#ffd59a;background:#fff8eb}.progress-card.doing .card-icon{background:#fb9818;color:#fff}.progress-card.doing strong{color:#9a5b06}
.progress-card.bad{border-color:#ffb6b1;background:#fff5f4}.progress-card.bad .card-icon{background:#e53935;color:#fff}.progress-card.bad strong,.progress-card.bad span{color:#dc2626}
.progress-table-head{display:flex;justify-content:space-between;align-items:center;margin-top:22px;padding:16px 20px;background:#fff;border:1px solid #dfe8ef;border-bottom:0;border-radius:12px 12px 0 0}
.progress-table-head h3{margin:0;color:#0f2c5f;font-size:18px}
.compact-progress{margin-top:0;background:#fff;border:1px solid #dfe8ef;border-radius:0 0 12px 12px}
.compact-progress table{min-width:1080px;background:#fff}
.compact-progress th{background:#f4f7fa;color:#222;font-size:13px}
.compact-progress td{font-size:13px;padding:10px;border-color:#dfe4ea}
.compact-progress td.left{text-align:left;min-width:220px}
.progress-bar{height:14px;border-radius:999px;background:#e5e7eb;overflow:hidden;min-width:140px}
.progress-bar span{display:block;height:100%;border-radius:999px;background:#16a34a}
.progress-bar span.doing{background:#f59e0b}.progress-bar span.todo{background:#9ca3af}.progress-bar span.bad{background:#dc2626}
.status-pill.todo{background:#fff4d6;color:#a16207}
.status-pill.bad{background:#fff0ee;color:#dc2626;border:1px solid #ffb4ad}
.mini-action{display:block;margin:6px auto 0;padding:6px 10px;border-radius:5px;font-size:12px}
#progressMessage .alert{margin:14px 0}
@media(max-width:1180px){#appShell:not([hidden]){grid-template-columns:250px 1fr}.progress-filter-bar{grid-template-columns:repeat(3,1fr)}.progress-cards{grid-template-columns:1fr}}
@media(max-width:820px){#appShell:not([hidden]){display:block}#appShell nav{min-height:auto}.progress-filter-bar{grid-template-columns:1fr}#appShell .panel{margin:16px}}

/* BMTC progress dashboard spec */
:root{--bmtc-navy:#002b6b;--bmtc-blue:#005bd3;--bmtc-active:#0b7cff;--bmtc-bg:#f5f7fb;--bmtc-text:#0f172a;--bmtc-muted:#64748b}
body{background:var(--bmtc-bg);color:var(--bmtc-text)}
#appShell:not([hidden]){grid-template-columns:260px 1fr;background:var(--bmtc-bg);font-family:Inter,Roboto,Arial,"Segoe UI",sans-serif}
#appShell>header.topbar{grid-column:2;min-height:84px;background:#fff;border-bottom:1px solid #e6edf5;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 4px 20px rgba(15,23,42,.05);position:sticky;top:0;z-index:100}
.top-title h1{margin:0;font-size:28px;font-weight:800;color:var(--bmtc-navy);letter-spacing:.01em}
.breadcrumb{display:flex;gap:10px;align-items:center;margin-top:8px;color:#334155;font-size:14px}.breadcrumb span:first-child{color:var(--bmtc-navy);font-weight:900}
.top-actions{display:flex;align-items:center;gap:20px}.dropdown-wrap{position:relative}.notify-bell{position:relative;font-size:26px;color:var(--bmtc-navy);background:transparent;border:0;padding:8px;cursor:pointer}.notify-bell b{position:absolute;right:0;top:0;background:#e11d22;color:#fff;border-radius:999px;font-size:11px;min-width:18px;height:18px;display:grid;place-items:center;border:2px solid #fff}
.week-box{display:flex;align-items:center;gap:10px;color:#0f2c5f;background:transparent;border:0;padding:8px;border-radius:10px;cursor:pointer;text-align:left}.week-box:hover,.notify-bell:hover{background:#f1f5f9}.week-box>span{font-size:24px}.week-box strong,.week-box small{display:block}.week-box small{color:var(--bmtc-muted)}
.top-dropdown{position:absolute;right:0;top:calc(100% + 10px);width:360px;background:#fff;border:1px solid #dbe5ef;border-radius:14px;box-shadow:0 18px 50px rgba(2,43,107,.18);padding:14px;z-index:200;color:#0f172a}.top-dropdown h4{margin:0 0 8px;color:#002b6b;font-size:16px}.top-dropdown .muted{margin:0 0 10px;color:#64748b}.notice{padding:10px 12px;border:1px solid #e2e8f0;border-radius:10px;margin:8px 0;background:#f8fafc}.notice strong,.notice span{display:block}.notice span{margin-top:3px;color:#64748b;font-size:13px}.notice.warn{background:#fff1f1;border-color:#fca5a5}.notice.done{background:#ecfdf3;border-color:#86efac}.notice.week{background:#eff6ff;border-color:#93c5fd}.week-days{display:grid;gap:8px}.week-day{width:100%;text-align:left;background:#f8fafc;color:#0f172a;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px}.week-day strong,.week-day span{display:block}.week-day span{font-size:13px;color:#64748b;margin-top:3px}.week-day.today{border-color:#005bd3;background:#eff6ff}
.avatar{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#e8f2ff;overflow:hidden;border:3px solid #e7f0ff;box-shadow:0 4px 12px rgba(0,43,107,.12)}.avatar img{width:100%;height:100%;object-fit:cover;object-position:center top}.chevron{font-size:22px;color:var(--bmtc-navy)}
.user-box{text-align:left;min-width:120px}.user-box strong{color:var(--bmtc-navy)}.user-box small{display:block;color:var(--bmtc-muted)}.top-buttons{display:flex;gap:6px;margin-top:3px}.header-button{padding:4px 8px;font-size:11px;border-radius:6px}
#appShell nav{width:260px;background:linear-gradient(180deg,#002b6b 0%,#004aad 100%);padding:14px 8px 24px;gap:8px;color:#fff}
.side-brand{display:block;text-align:left;padding:0 8px 16px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.12)}
.bmtc-logo-card{height:82px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;padding:8px;margin-bottom:14px;box-shadow:0 6px 18px rgba(0,0,0,.12);overflow:hidden}.bmtc-logo-card img{width:100%;height:100%;object-fit:contain;display:block}
.side-brand h3{margin:8px 18px 8px;color:#fff;font-size:17px;line-height:1.45;font-weight:800;text-transform:uppercase}.side-brand p{margin:0 18px;color:#d7e7ff;font-size:14px}
#appShell .tab{display:grid;grid-template-columns:1fr;gap:4px;padding:13px 16px 13px 62px;border-radius:8px;color:#fff;background:transparent;position:relative;min-height:58px}
#appShell .tab span{font-size:16px;font-weight:800;white-space:nowrap}#appShell .tab small{font-size:14px;color:#d6e6ff}
#appShell .tab span:first-letter{font-size:24px}#appShell .tab span{position:relative}#appShell .tab span::first-letter{margin-left:-30px}
#appShell .tab.active{background:var(--bmtc-active);box-shadow:0 4px 12px rgba(0,102,255,.35);border:0;color:#fff}#appShell .tab.active small{color:#fff}
.support-card{margin:28px 8px 0;border:1px solid rgba(255,255,255,.35);border-radius:10px;padding:16px;color:#fff;background:rgba(255,255,255,.06);line-height:1.7}.support-card strong{display:block}.support-card span{color:#fff}
#appShell .dashboard-panel{margin:8px 16px 20px;background:transparent!important}
.progress-filter-bar{display:grid;grid-template-columns:repeat(6,minmax(130px,1fr)) 140px;align-items:end;gap:18px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:18px;box-shadow:0 2px 8px rgba(0,0,0,.06);margin:0 0 10px}
.progress-filter-bar label{font-size:14px;color:#0f172a;font-weight:800}.progress-filter-bar select{height:42px;border:1px solid #cbd5e1;border-radius:6px;color:#0f172a;font-size:15px;padding:0 12px}.primary-button{height:42px;background:var(--bmtc-blue);border-radius:6px;color:#fff;font-weight:800;box-shadow:0 4px 12px rgba(0,91,211,.22)}
.progress-status-filter{display:none}.progress-status-filter.show{display:block;grid-column:1 / span 2}.progress-tools-hidden{display:none}
.progress-context{background:#fff;border:1px solid #e2e8f0;border-bottom:0;border-radius:10px 10px 0 0;padding:18px 20px;margin-top:0;color:#004aad;box-shadow:0 2px 8px rgba(0,0,0,.04);font-size:16px}.progress-context .class-icon{font-size:22px}.progress-context .major-text{color:#0f172a}
.progress-cards{grid-template-columns:repeat(3,1fr);background:#fff;border:1px solid #e2e8f0;border-top:0;border-radius:0 0 10px 10px;padding:0 18px 18px;gap:28px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.progress-card{min-height:150px;border-radius:8px;padding:24px 28px;justify-content:center}.progress-card span{font-size:16px}.progress-card strong{font-size:48px;line-height:1}.progress-card .card-icon{width:62px;height:62px}.progress-card.done{background:#eefaf2;border-color:#b8e6c4;color:#087a2f}.progress-card.doing{background:#fff7ed;border-color:#ffd39a;color:#c56b00}.progress-card.bad{background:#fff1f1;border-color:#ffb4b4;color:#d71920}.progress-card.bad .card-icon{border-radius:14px;clip-path:polygon(50% 0,100% 88%,0 88%)}.makeup-top{margin-top:8px;background:#fff;color:#d71920;border:1px solid #ef4444;border-radius:6px;padding:8px 18px}
.progress-table-head{margin-top:12px;background:#fff;border:1px solid #e2e8f0;border-bottom:0;border-radius:10px 10px 0 0;padding:14px 18px;box-shadow:0 2px 8px rgba(0,0,0,.04)}.progress-table-head h3{color:#0050bd;font-size:18px;font-weight:900}
.excel-btn,.print-btn,.filter-btn{background:#fff;border:1px solid #005bd3;color:#004aad;border-radius:6px;padding:9px 18px}.excel-btn{border-color:#16a34a;color:#15803d}.print-btn{color:#005bd3}
.compact-progress{border:1px solid #e2e8f0;border-radius:0;background:#fff}.compact-progress table{min-width:1080px}.compact-progress th{background:#f8fafc;color:#111827;font-weight:800}.compact-progress td{height:54px;border-color:#e2e8f0;color:#111827}.compact-progress td.left{text-align:left}.progress-total{background:#fff;margin:0;padding:14px 8px 18px;border:1px solid #e2e8f0;border-top:0;border-radius:0 0 10px 10px}
.progress-bar{height:12px;background:#e5e7eb}.progress-bar span.done{background:#16a34a}.progress-bar span.doing{background:#f59e0b}.progress-bar span.todo{background:#94a3b8}.progress-bar span.bad{background:#ef4444}.progress-pct.done{color:#15803d}.progress-pct.doing{color:#d97706}.progress-pct.todo{color:#64748b}.progress-pct.bad,.late-pct{color:#dc2626}
.program-progress tr:has(.status-pill.done) td:nth-child(11) strong{color:#15803d}.program-progress tr:has(.status-pill.doing) td:nth-child(11) strong{color:#d97706}.program-progress tr:has(.status-pill.todo) td:nth-child(11) strong{color:#64748b}.program-progress tr:has(.status-pill.bad) td:nth-child(11) strong{color:#dc2626}
.status-pill{border-radius:5px;padding:7px 13px}.status-pill.done{color:#15803d;background:#ecfdf3;border:1px solid #86efac}.status-pill.doing{color:#ea580c;background:#fff7ed;border:1px solid #fdba74}.status-pill.todo{color:#d97706;background:#fffbeb;border:1px solid #fbbf24}.status-pill.bad{color:#dc2626;background:#fef2f2;border:1px solid #fca5a5}
.mini-action{background:#e11d22;color:#fff;border-radius:4px}.progress-footer{text-align:center;color:#64748b;font-size:13px;padding:14px 0 4px}
@media(max-width:1180px){.progress-filter-bar{grid-template-columns:repeat(3,1fr)}.primary-button{grid-column:auto}.top-actions{gap:10px}.week-box{display:none}}

/* Compact visual tuning */
.bmtc-logo-card{height:72px;margin-bottom:12px}
.side-brand h3{font-size:15px;line-height:1.35;margin:6px 18px 6px}
.side-brand p{font-size:13px}
#appShell .tab{min-height:50px;padding:10px 12px 10px 48px;gap:2px}
#appShell .tab span{font-size:14px;font-weight:700;line-height:1.25}
#appShell .tab small{font-size:12px;line-height:1.25}
#appShell .tab span:first-letter{font-size:19px}
.support-card{font-size:13px;padding:12px}
.progress-cards{gap:22px;padding:0 16px 16px}
.progress-card{min-height:124px;padding:18px 24px;gap:16px;justify-content:flex-start}
.progress-card .card-icon{width:52px;height:52px;font-size:28px;flex:0 0 52px}
.progress-card span{font-size:14px;line-height:1.25}
.progress-card strong{font-size:38px;line-height:1;margin:2px 6px 0 0}
.progress-card em{font-size:14px}
.progress-card p{font-size:14px;margin-top:4px}
.makeup-top{padding:6px 14px;font-size:13px}
.program-progress table{min-width:1120px}
.program-progress th,.program-progress td{padding:9px 10px}
.program-progress td:nth-child(3){min-width:260px;text-align:left}
.program-progress td:nth-child(10){min-width:150px}

/* Progress table column sizing */
.program-progress table{min-width:980px!important;width:100%;table-layout:fixed}
.program-progress th,.program-progress td{padding:8px 6px;font-size:12px;white-space:normal}
.program-progress th:nth-child(1),.program-progress td:nth-child(1){width:42px}
.program-progress th:nth-child(2),.program-progress td:nth-child(2){width:82px}
.program-progress th:nth-child(3),.program-progress td:nth-child(3){width:280px;min-width:0!important;text-align:left}
.program-progress th:nth-child(4),.program-progress td:nth-child(4){width:58px}
.program-progress th:nth-child(5),.program-progress td:nth-child(5){width:72px}
.program-progress th:nth-child(6),.program-progress td:nth-child(6){width:72px}
.program-progress th:nth-child(7),.program-progress td:nth-child(7){width:86px}
.program-progress th:nth-child(8),.program-progress td:nth-child(8){width:70px}
.program-progress th:nth-child(9),.program-progress td:nth-child(9){width:70px}
.program-progress th:nth-child(10),.program-progress td:nth-child(10){width:140px;min-width:0!important}
.program-progress th:nth-child(11),.program-progress td:nth-child(11){width:82px}
.program-progress th:nth-child(12),.program-progress td:nth-child(12){width:130px}
.program-progress .progress-bar{min-width:0;width:118px;margin:auto}
.progress-standard{margin:8px 18px 0;padding:8px 12px;border:1px solid #bfdbfe;background:#eff6ff;color:#0f3b7a;border-radius:10px;font-size:13px;line-height:1.45}
.progress-standard b{color:#003b8f}
.nav-group{display:grid;gap:4px}
#appShell .nav-parent{padding-right:28px}
#appShell .nav-parent::after{content:"▾";position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:13px;color:#dbeafe}
#appShell .nav-group:not(.open) .nav-parent::after{content:"▸"}
.nav-submenu{display:none;gap:4px;margin-left:14px;padding-left:8px;border-left:1px solid rgba(255,255,255,.25)}
.nav-group.open .nav-submenu{display:grid}
#appShell .subtab{min-height:34px;padding:7px 8px 7px 24px;border-radius:6px;background:rgba(255,255,255,.06)}
#appShell .subtab span{font-size:11.5px;white-space:normal}
#appShell .subtab small{font-size:10px}
#appShell .subtab span:first-letter{font-size:13px}
#appShell .subtab.active{background:#1d84ff;box-shadow:0 3px 10px rgba(0,102,255,.28)}
.nav-tree{max-height:42vh;overflow:auto;padding-right:3px}
.nav-tree-label,.nav-tree-month{width:100%;border-radius:6px;text-align:left;background:rgba(255,255,255,.08);color:#eaf4ff;padding:6px 8px;font-size:11px;line-height:1.2;margin:2px 0}
.nav-tree-label{font-weight:800}
.nav-tree-label.active,.nav-tree-month.active{background:#143a5b;color:#fff;box-shadow:inset 3px 0 0 #7dd3fc}
.nav-tree-program{margin-left:7px}
.nav-tree-term{margin-left:9px}
.nav-tree-months{display:grid;gap:2px;margin-left:9px}
.nav-tree-month{background:rgba(255,255,255,.14);font-weight:700}
.nav-tree-empty{font-size:10.5px;color:#bfd6ea;padding:5px 8px}
.result-layout{display:block!important}
.result-detail{width:100%;min-width:0}
#appShell nav{scrollbar-width:thin;scrollbar-color:#7dd3fc rgba(255,255,255,.12);overscroll-behavior:contain}
#appShell nav::-webkit-scrollbar,.nav-tree::-webkit-scrollbar{width:8px}
#appShell nav::-webkit-scrollbar-track,.nav-tree::-webkit-scrollbar-track{background:rgba(255,255,255,.1);border-radius:10px}
#appShell nav::-webkit-scrollbar-thumb,.nav-tree::-webkit-scrollbar-thumb{background:#7dd3fc;border-radius:10px}
#appShell nav::-webkit-scrollbar-thumb:hover,.nav-tree::-webkit-scrollbar-thumb:hover{background:#bae6fd}
.nav-tree{scrollbar-width:thin;scrollbar-color:#7dd3fc rgba(255,255,255,.12)}

/* Extra compact progress summary cards */
.progress-cards{gap:16px;padding:0 12px 12px}
.progress-card{min-height:92px;padding:14px 20px;gap:12px}
.progress-card .card-icon{width:42px;height:42px;font-size:23px;flex-basis:42px}
.progress-card span{font-size:12px;line-height:1.15}
.progress-card strong{font-size:31px;margin:0 5px 0 0}
.progress-card em{font-size:12px}
.progress-card p{font-size:12px;margin:2px 0 0}
.makeup-top{margin-top:5px;padding:5px 11px;font-size:11px}

/* Extra compact fixed sidebar */
#appShell nav{position:sticky;top:0;height:100vh;overflow-y:auto;padding:10px 7px 16px;gap:5px}
.bmtc-logo-card{height:58px;border-radius:9px;margin-bottom:8px;padding:6px}
.side-brand{padding:0 6px 10px;margin-bottom:6px}
.side-brand h3{font-size:13px;line-height:1.28;margin:5px 16px 4px}
.side-brand p{font-size:12px;margin:0 16px}
#appShell .tab{min-height:42px;padding:8px 10px 8px 42px;border-radius:7px;gap:1px}
#appShell .tab span{font-size:12.5px;font-weight:700;line-height:1.18}
#appShell .tab small{font-size:11px;line-height:1.15}
#appShell .tab span:first-letter{font-size:16px}
.support-card{margin:14px 8px 0;padding:10px 12px;font-size:12px;line-height:1.45;border-radius:9px}
.support-card span{margin-top:3px}

/* Stable vertical scrolling for the left toolbar */
#appShell nav{
  position:sticky!important;
  top:0!important;
  align-self:start;
  height:100vh!important;
  min-height:0!important;
  max-height:100vh!important;
  overflow-y:scroll!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch;
  padding-bottom:28px!important;
}
#appShell nav .support-card{margin-top:14px!important}
.nav-tree{
  max-height:none!important;
  overflow:visible!important;
  padding-right:0!important;
}
@media(max-width:820px){
  #appShell nav{
    position:relative!important;
    height:auto!important;
    max-height:70vh!important;
    overflow-y:scroll!important;
  }
}

/* Final override: true accordion sidebar with independent vertical menu scroll */
#appShell nav{
  position:sticky!important;
  top:0!important;
  align-self:start!important;
  height:100vh!important;
  max-height:100vh!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  padding:10px 7px 12px!important;
}
#appShell nav .side-brand{flex:0 0 auto!important}
#appShell nav .sidebar-menu{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
  padding-right:3px!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin;
  scrollbar-color:#7dd3fc rgba(255,255,255,.12);
}
#appShell nav .support-card{flex:0 0 auto!important;margin-top:8px!important}
#appShell nav .sidebar-menu::-webkit-scrollbar{width:8px}
#appShell nav .sidebar-menu::-webkit-scrollbar-track{background:rgba(255,255,255,.1);border-radius:10px}
#appShell nav .sidebar-menu::-webkit-scrollbar-thumb{background:#7dd3fc;border-radius:10px}
#appShell nav .sidebar-menu::-webkit-scrollbar-thumb:hover{background:#bae6fd}
#appShell .nav-group:not(.open)>.nav-submenu{display:none!important}
#appShell .nav-group.open>.nav-submenu{display:grid!important}
#appShell .subtab span::before{content:"▸";display:inline-block;margin-right:6px}
#appShell .subtab.tree-open span::before{content:"▾"}
.prep-side-tree:not(.open){display:none!important}
.prep-side-tree.open{display:grid!important}
.nav-tree{max-height:none!important;overflow:visible!important;padding-right:0!important}
.side-node summary{user-select:none}
.side-node summary.active{background:#143a5b!important;color:#fff!important;box-shadow:inset 3px 0 0 #7dd3fc!important}
@media(max-width:820px){
  #appShell nav{position:relative!important;height:auto!important;max-height:75vh!important}
  #appShell nav .sidebar-menu{max-height:55vh!important}
}

/* Final-final sidebar layout: fixed logo and support, only the tree/menu scrolls */
#appShell nav{
  box-sizing:border-box!important;
  height:100vh!important;
  max-height:100vh!important;
  min-height:0!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  padding:10px 7px 10px!important;
}
#appShell nav .side-brand{
  flex:0 0 auto!important;
  position:relative!important;
  z-index:2!important;
  margin-bottom:4px!important;
}
#appShell nav .sidebar-menu{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:0 3px 8px 0!important;
  margin:0!important;
}
#appShell nav .support-card{
  flex:0 0 auto!important;
  position:relative!important;
  z-index:2!important;
  margin:6px 8px 0!important;
}
#appShell nav::-webkit-scrollbar{width:0!important}
@media(max-width:820px){
  #appShell nav{height:100vh!important;max-height:100vh!important;position:relative!important}
  #appShell nav .sidebar-menu{max-height:none!important}
}

/* Hard lock sidebar children into one vertical column under the logo */
#appShell nav,
#appShell nav *{
  float:none!important;
}
#appShell nav{
  width:260px!important;
  min-width:260px!important;
  max-width:260px!important;
  align-items:stretch!important;
}
#appShell nav>.side-brand,
#appShell nav>.sidebar-menu,
#appShell nav>.support-card{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
  transform:none!important;
}
#appShell nav>.sidebar-menu{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
}
#appShell nav .tab,
#appShell nav .nav-group,
#appShell nav .nav-submenu,
#appShell nav .prep-side-tree,
#appShell nav .nav-tree{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}

/* Absolute final sidebar structure: header fixed / middle scroll / footer fixed */
#appShell nav{
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  grid-template-columns:1fr!important;
  height:100vh!important;
  max-height:100vh!important;
  min-height:0!important;
  overflow:hidden!important;
  align-items:stretch!important;
  align-content:stretch!important;
}
#appShell nav>.side-brand{
  grid-row:1!important;
  align-self:start!important;
  overflow:hidden!important;
}
#appShell nav>.sidebar-menu{
  grid-row:2!important;
  align-self:stretch!important;
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
#appShell nav>.support-card{
  grid-row:3!important;
  align-self:end!important;
  overflow:hidden!important;
}

/* Class editor tree view */
#classList{display:grid;gap:12px}
.class-tree{padding:0!important;overflow:hidden;border-color:#9fd0df!important;background:#f8fdff!important}
.class-tree-head{margin:0!important;padding:14px 18px!important;background:#eaf6fb;border-bottom:1px solid #c9e2ea;cursor:pointer;display:grid!important;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.class-tree-head:hover{background:#dff1f8}
.class-toggle{width:34px;height:34px;padding:0!important;border-radius:8px;background:#123b5c!important;color:#fff!important;font-size:16px}
.class-summary h3{margin:0;color:#071933;font-size:18px}
.class-summary p{margin:4px 0 0;color:#527080;font-size:13px;font-weight:600}
.class-tree-body{padding:18px 22px 22px}
.class-tree.collapsed .class-tree-body{display:none!important}
.class-tree.collapsed .class-tree-head{border-bottom:0}
.class-tree .course-list{margin-top:14px;border-top:1px dashed #c7dae3}
.class-tree .course{background:#fff;border:1px solid #d8e5ec;border-radius:10px;margin-top:10px;padding:10px}

/* Weekday dropdown picker in class course setup */
.days-field{
  min-width:190px;
  display:block;
  position:relative;
  color:#30485a;
  font-weight:700;
}
.days-field .field-title{
  display:block;
  margin-bottom:6px;
}
.day-picker{
  position:relative;
  display:block;
}
.day-picker-toggle{
  width:100%;
  min-height:44px;
  padding:10px 34px 10px 12px!important;
  border:1px solid #b9d2de!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#001b35!important;
  text-align:left;
  font-weight:700;
  position:relative;
}
.day-picker-toggle::after{
  content:'▾';
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  color:#0a4056;
}
.day-picker.open .day-picker-toggle::after{content:'▴'}
.day-checks{
  display:none;
  position:absolute;
  left:0;
  top:calc(100% + 6px);
  z-index:80;
  width:100%;
  min-width:190px;
  grid-template-columns:1fr;
  gap:6px;
  padding:8px;
  border:1px solid #b9d2de;
  border-radius:12px;
  background:#fff;
  box-shadow:0 12px 30px rgba(4,35,60,.18);
}
.day-picker.open .day-checks{display:grid}
.day-checks label{
  display:flex!important;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:7px 9px!important;
  border:1px solid #d3e4ec;
  border-radius:9px;
  background:#eef7fb;
  color:#0a4056;
  font-weight:800;
  cursor:pointer;
}
.day-checks input{width:auto!important;height:auto!important;margin:0}
.day-checks label:has(input:checked){
  background:#0f8276;
  border-color:#0f8276;
  color:#fff;
}
.linked-class .course-batch,
.linked-class .class-code{
  background:#fff!important;
  color:#001b35!important;
  border-color:#6fbfd3!important;
}
.schedule-actions{
  align-items:stretch;
  gap:12px;
  flex-direction:column;
}
.schedule-main-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.continue-learning-panel{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border:1px solid #8fd0c8;
  border-radius:12px;
  background:linear-gradient(90deg,#ecfdf8,#f8fffd);
}
.continue-learning-panel strong{
  display:block;
  color:#075e54;
  font-size:16px;
}
.continue-learning-panel small{
  display:block;
  color:#496673;
  margin-top:4px;
  line-height:1.35;
}
.inherit-option{
  display:flex!important;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid #9fd0df;
  border-radius:10px;
  background:#eef9fb;
  color:#064052;
  font-weight:800;
}
.inherit-option input{
  width:auto!important;
  height:auto!important;
}
.inherit-note{
  display:inline-block;
  margin-top:4px;
  padding:4px 7px;
  border-radius:8px;
  background:#eaf7ef;
  color:#06633f;
  font-size:12px;
  font-weight:700;
}
.course-progress-count{
  display:inline-block;
  margin-top:3px;
  color:#075985;
  font-size:13px;
  font-weight:800;
}

/* Floating AI assistant */
.ai-assistant{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:9999;
  font-family:inherit;
}
.ai-assistant-toggle{
  border:0!important;
  border-radius:999px!important;
  padding:12px 18px!important;
  background:linear-gradient(135deg,#0057d8,#0f8276)!important;
  color:#fff!important;
  box-shadow:0 14px 36px rgba(0,48,120,.28);
  font-weight:900;
  letter-spacing:.2px;
}
.ai-assistant-toggle span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  margin-right:6px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
}
.ai-assistant-panel{
  position:absolute;
  right:0;
  bottom:58px;
  width:min(380px,calc(100vw - 34px));
  max-height:min(620px,calc(100vh - 110px));
  display:grid;
  grid-template-rows:auto minmax(170px,1fr) auto auto;
  overflow:hidden;
  border:1px solid #b9d2de;
  border-radius:18px;
  background:#fff;
  box-shadow:0 24px 60px rgba(0,31,72,.26);
}
.ai-assistant-panel header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  color:#fff;
  background:linear-gradient(135deg,#002d6b,#075d81);
}
.ai-assistant-panel header strong{
  display:block;
  font-size:16px;
}
.ai-assistant-panel header small{
  display:block;
  opacity:.86;
  font-weight:600;
}
.ai-assistant-panel header button{
  width:32px;
  height:32px;
  padding:0!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.16)!important;
  color:#fff!important;
}
.ai-assistant-messages{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  overflow-y:auto;
  background:#f6fbff;
}
.ai-msg{
  max-width:88%;
  padding:9px 11px;
  border-radius:13px;
  white-space:pre-wrap;
  line-height:1.35;
  font-size:13px;
}
.ai-msg.bot{
  align-self:flex-start;
  color:#0a3045;
  background:#e6f3f8;
  border:1px solid #c9e4ee;
}
.ai-msg.user{
  align-self:flex-end;
  color:#fff;
  background:#0f8276;
}
.ai-msg.error{
  color:#9b1c1c;
  background:#feecec;
  border-color:#ffd1d1;
}
.ai-quick-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:8px 10px;
  border-top:1px solid #e2eef3;
  background:#fff;
}
.ai-quick-actions button{
  padding:7px 9px!important;
  border-radius:999px!important;
  background:#eaf3f7!important;
  color:#064052!important;
  font-size:12px;
  font-weight:800;
}
#aiAssistantForm{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  padding:10px;
  border-top:1px solid #e2eef3;
  background:#fff;
}
#aiAssistantInput{
  min-height:40px;
  border:1px solid #b9d2de;
  border-radius:10px;
  padding:9px 10px;
}
#aiAssistantSend{
  border-radius:10px!important;
  padding:9px 12px!important;
}
@media(max-width:720px){
  .ai-assistant{right:12px;bottom:12px}
  .ai-assistant-panel{width:calc(100vw - 24px);max-height:calc(100vh - 90px)}
}

/* Keep weekday dropdown selectable and scrollable */
.class-tree,
.class-tree-body,
.class-tree .course-list,
.class-tree .course{
  overflow:visible!important;
}
.class-tree .course{
  position:relative;
  z-index:1;
}
.class-tree .course:has(.day-picker.open){
  z-index:2000;
}
.day-picker{
  position:relative!important;
  z-index:2100;
}

.day-picker.open .day-checks{
  display:grid!important;
  max-height:260px!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  z-index:2200!important;
}
.day-checks{
  bottom:auto!important;
}
.day-picker.drop-up .day-checks{
  top:auto!important;
  bottom:calc(100% + 6px)!important;
}

/* Subject catalog: full editable curriculum columns */
.catalog-grid>.catalog-card:first-child{
  grid-column:1/-1;
}
.subject-catalog-wrap{
  width:100%;
  overflow:auto;
}
.subject-catalog-table{
  min-width:1120px;
}
.subject-catalog-table th,
.subject-catalog-table td{
  vertical-align:middle;
  text-align:center!important;
}
.subject-catalog-table th:nth-child(3),
.subject-catalog-table td:nth-child(3){
  text-align:left!important;
  min-width:300px;
}
.subject-catalog-table input{
  width:100%;
  min-width:70px;
  height:40px;
  margin:0;
  padding:6px 8px;
  font-size:14px;
  border-radius:7px;
}
.subject-catalog-table td:nth-child(3) input{
  min-width:280px;
}
.subject-catalog-table .subject-stt{
  width:52px;
  font-weight:800;
  color:#12304a;
}
.subject-catalog-table .remove-subject{
  width:42px;
  height:38px;
}

/* Catalog page accordion tree */
.catalog-tree{
  display:grid;
  gap:12px;
  margin-top:16px;
}
.catalog-node{
  border:1px solid #d8e5ec;
  border-radius:14px;
  background:#fbfdff;
  overflow:hidden;
}
.catalog-node>summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  background:linear-gradient(90deg,#eef7fb,#f8fcff);
  color:#12304a;
  font-weight:900;
}
.catalog-node>summary::-webkit-details-marker{
  display:none;
}
.catalog-node>summary span{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:17px;
}
.catalog-node>summary span::before{
  content:"▸";
  display:inline-block;
  transition:.15s transform;
  color:#0f766e;
}
.catalog-node[open]>summary span::before{
  transform:rotate(90deg);
}
.catalog-node>summary span::first-letter{
  color:#0f766e;
}
.catalog-node>summary small{
  color:#607789;
  font-size:12px;
  font-weight:700;
  text-align:right;
}
.catalog-node[open]>summary{
  border-bottom:1px solid #d8e5ec;
}
.catalog-node[open]>summary span{
  color:#0f4f5f;
}
.catalog-node-body{
  padding:14px 16px 18px;
  background:#fff;
}
.catalog-node-actions{
  margin-bottom:10px;
}
.catalog-node .program-list{
  margin-top:8px;
}
.program-node{
  padding:0!important;
  overflow:hidden;
}
.program-node>summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  background:#edf7fb;
  color:#12304a;
  font-weight:900;
}
.program-node>summary::-webkit-details-marker{
  display:none;
}
.program-node>summary span{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:16px;
}
.program-node>summary span::before{
  content:"▸";
  display:inline-block;
  color:#0f766e;
  transition:.15s transform;
}
.program-node[open]>summary span::before{
  transform:rotate(90deg);
}
.program-node>summary small{
  color:#607789;
  font-size:12px;
  font-weight:800;
  text-align:right;
}
.program-node-body{
  padding:14px;
  background:#fff;
  border-top:1px solid #d8e5ec;
}
.breadcrumb-home{
  background:transparent!important;
  color:inherit!important;
  border:0!important;
  padding:0!important;
  font:inherit!important;
  font-weight:500!important;
  cursor:pointer;
}
.breadcrumb-home:hover,
.breadcrumb-home:focus{
  color:#0f766e!important;
  text-decoration:underline;
  outline:none;
}
.restore-result-btn{
  background:#eaf7ef!important;
  color:#087047!important;
  border:1px solid #b8e0ca!important;
}

/* Course fields: one clean layout matching the class-info form */
.continue-learning-btn{
  background:#e8f6f3!important;
  color:#0f766e!important;
  border:1px solid #b9ded7!important;
}
#classList .class-tree .course{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;
  gap:10px 12px!important;
  padding:10px!important;
  margin-top:10px!important;
  border:1px solid #d8e5ec!important;
  border-radius:12px!important;
  background:#fff!important;
  align-items:end!important;
  overflow:visible!important;
}
#classList .class-tree .course label,
#classList .class-tree .days-field,
#classList .class-tree .course .course-status,
#classList .class-tree .course .remove-course{
  grid-column:auto!important;
}
#classList .class-tree .course label,
#classList .class-tree .days-field .field-title{
  font-size:13px!important;
  font-weight:600!important;
  color:#334155!important;
  line-height:1.25!important;
  margin:0!important;
}
#classList .class-tree .course input,
#classList .class-tree .course select,
#classList .class-tree .day-picker-toggle{
  width:100%!important;
  height:38px!important;
  min-height:38px!important;
  margin-top:6px!important;
  padding:0 12px!important;
  font-size:13px!important;
  font-weight:400!important;
  border-radius:8px!important;
  border:1px solid #bdcbd4!important;
  background:#fff!important;
  color:#071933!important;
  text-align:left!important;
  box-shadow:none!important;
}
#classList .class-tree .course .course-status{
  min-height:38px!important;
  display:flex;
  align-items:center;
  font-size:13px!important;
  color:#527080!important;
  margin:0!important;
  padding:0!important;
}
#classList .class-tree .course .remove-course{
  width:38px!important;
  height:38px!important;
  min-height:38px!important;
  padding:0!important;
  border-radius:8px!important;
  align-self:end!important;
  justify-self:start!important;
}
#classList .class-tree .days-field{
  min-width:0!important;
  width:100%!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
#classList .class-tree .day-picker{
  display:block!important;
  width:100%!important;
}
#classList .class-tree .day-checks{
  position:absolute!important;
  left:0!important;
  top:calc(100% + 6px)!important;
  width:100%!important;
  min-width:220px!important;
  max-height:230px!important;
  overflow-y:auto!important;
  z-index:99999!important;
  pointer-events:auto!important;
}
#classList .class-tree .day-picker.drop-up .day-checks{
  top:auto!important;
  bottom:calc(100% + 6px)!important;
}
#classList .class-tree .day-checks label{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  width:100%!important;
  min-height:34px!important;
  padding:7px 9px!important;
  margin:0!important;
  font-size:14px!important;
  font-weight:600!important;
  color:#334155!important;
  cursor:pointer!important;
}
#classList .class-tree .day-auto{
  width:100%!important;
  min-height:34px!important;
  padding:7px 9px!important;
  margin:0!important;
  border-radius:9px!important;
  border:1px solid #b9ded7!important;
  background:#e8f6f3!important;
  color:#0f766e!important;
  font-size:14px!important;
  font-weight:700!important;
  text-align:left!important;
}
#classList .class-tree .day-checks label:has(input:checked){
  background:#0f8276!important;
  border-color:#0f8276!important;
  color:#fff!important;
}
#classList .class-tree .day-checks input[type="checkbox"]{
  width:16px!important;
  min-width:16px!important;
  height:16px!important;
  min-height:16px!important;
  margin:0!important;
  padding:0!important;
  flex:0 0 16px!important;
  cursor:pointer!important;
  appearance:auto!important;
}
@media(max-width:1280px){
  #classList .class-tree .course{
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;
  }
}
@media(max-width:980px){
  #classList .class-tree .course{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:640px){
  #classList .class-tree .course{
    grid-template-columns:1fr!important;
  }
}

#classList .class-tree .course-advanced{
  grid-column:1/-1!important;
  border:1px solid #d8e5ec;
  border-radius:10px;
  background:#f8fbfd;
  overflow:visible;
}
#classList .class-tree .course-advanced>summary{
  list-style:none;
  cursor:pointer;
  padding:10px 12px;
  color:#0f4d67;
  font-size:14px;
  font-weight:800;
}
#classList .class-tree .course-advanced>summary::before{content:"▸";display:inline-block;margin-right:7px;transition:.15s transform}
#classList .class-tree .course-advanced[open]>summary::before{transform:rotate(90deg)}
#classList .class-tree .course-advanced-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px 12px;
  padding:0 12px 12px;
}
#classList .class-tree label.check-field{
  display:flex!important;
  align-items:center!important;
  gap:8px;
  min-height:42px;
  padding:8px 10px;
  border:1px solid #d8e5ec;
  border-radius:8px;
  background:#fff;
}
#classList .class-tree label.check-field input[type="checkbox"]{
  width:17px!important;
  min-width:17px!important;
  height:17px!important;
  min-height:17px!important;
  margin:0!important;
  padding:0!important;
  appearance:auto!important;
}
#classList .class-tree .course.mode-inherit{border-color:#7bc8ba!important;background:#f7fffd!important}
.reference-row{background:#eef2f6!important;color:#617181!important}
.reference-badge{display:inline-block;margin-top:4px;padding:2px 7px;border-radius:999px;background:#d9e1e8;color:#40515d;font-size:11px;font-weight:800}
.audit-log{margin-top:18px;border:1px solid #d8e5ec;border-radius:12px;padding:14px;background:#f8fbfd}
.audit-log h3{margin:0 0 10px;color:#12304a}
.audit-log li{margin:7px 0;line-height:1.45}
@media(max-width:1180px){#classList .class-tree .course-advanced-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){#classList .class-tree .course-advanced-grid{grid-template-columns:1fr}}

.process-flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px;padding:10px 12px;border:1px solid #b8d7e4;border-radius:12px;background:#f2f9fc;color:#174f63;font-size:13px;font-weight:700}.process-flow span{padding:6px 10px;border-radius:999px;background:#fff;border:1px solid #d4e5ec}.process-flow b{color:#0f766e}.course-source-note{grid-column:1/-1;padding:10px 12px;border:1px solid #bee3d7;border-radius:9px;background:#effaf6;color:#17634d;font-size:13px;line-height:1.45}.dispatch-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:14px 0;padding:14px 16px;border:1px solid #b8d7e4;border-radius:12px;background:#f5fbfd}.dispatch-head>div:first-child{flex:1;min-width:0}.dispatch-head h3{margin:0 0 5px;color:#123b59}.dispatch-head p{margin:0;color:#5d7180}.dispatch-head .report-actions{flex:0 0 auto;display:flex;flex-wrap:wrap;justify-content:flex-end}.dispatch-issues{margin:10px 0;padding:12px 16px;border:1px solid #f1aaa3;border-radius:10px;background:#fff4f2;color:#8f261f}.dispatch-issues ol{margin:8px 0 0;padding-left:22px}.dispatch-issues li{margin:5px 0}.dispatch-wrap{width:100%;max-width:100%;max-height:62vh;overflow-x:auto}.dispatch-table{min-width:1900px}.dispatch-table th{position:sticky;top:0;z-index:2;background:#eef5f8}.dispatch-table td{vertical-align:top;min-width:100px}.dispatch-table td:nth-child(5){min-width:240px}.dispatch-table td:nth-child(n+6):nth-child(-n+10){min-width:180px}.dispatch-table input{width:100%;height:40px;min-height:40px;margin:0;padding:0 10px;border-radius:7px;font-size:14px}.dispatch-table small{display:block;margin-top:4px;color:#637785}.dispatch-ok{margin:10px 0}
@media(max-width:900px){.dispatch-head{display:block}.dispatch-head .report-actions{margin-top:10px}.process-flow{font-size:12px}}

/* Vận hành TKB: nằm trực tiếp dưới TKB của từng lớp, không tạo menu riêng. */
.tkb-class-block{margin:22px 0 28px}.tkb-class-block:first-child{margin-top:0}
.tkb-operations{margin-top:14px;border:1px solid #b8d7e4;border-radius:12px;background:#f8fbfd;overflow:hidden}
.tkb-operations>summary{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;list-style:none;color:#123b59;background:#eef7fa}
.tkb-operations>summary::-webkit-details-marker{display:none}
.tkb-operations>summary::before{content:'\25B6';font-size:12px;transition:transform .18s ease}
.tkb-operations[open]>summary::before{transform:rotate(90deg)}
.tkb-operations>summary strong{font-size:16px}.tkb-operations>summary small{color:#637785;font-weight:500}
.tkb-operation-body{padding:16px}
.tkb-operation-context{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px}
.tkb-context-item{min-width:0;padding:9px 11px;border:1px solid #d7e4ea;border-radius:8px;background:#fff}
.tkb-context-item small{display:block;margin-bottom:3px;color:#6b7d89;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.tkb-context-item strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1c384b;font-size:13px}
.tkb-operation-grid{display:grid;grid-template-columns:1.15fr 1.55fr 1.2fr;gap:12px;align-items:start}
.tkb-operation-grid label{font-size:13px;font-weight:650;color:#334155}
.tkb-operation-grid select,.tkb-operation-grid input{height:44px;min-height:44px;margin-top:6px;padding:0 12px;font-size:14px}
.tkb-operation-other{grid-column:1/-1}.tkb-operation-other[hidden]{display:none!important}
.tkb-session-detail{grid-column:1/-1;min-height:86px;padding:12px 14px;border:1px solid #d6e4ea;border-radius:10px;background:#fff;color:#334155}
.tkb-session-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 14px}
.tkb-session-detail span{display:block;line-height:1.45}.tkb-session-detail b{color:#123b59}
.tkb-operation-note{grid-column:1/-1;margin:0;padding:10px 12px;border-left:4px solid #0f766e;background:#eaf7f4;color:#175f58;font-size:13px;line-height:1.45}
.tkb-operation-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}.tkb-operation-actions .operation-cancel{background:#e8f0f2;color:#1d4e57}.tkb-operation-actions .operation-confirm{background:#c62828}
.tkb-operation-empty{margin:0;color:#637785}
.operation-absence-manager{margin-top:18px;padding-top:16px;border-top:1px solid #c8dce5}
.operation-absence-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.operation-absence-head>div{display:flex;flex-direction:column;gap:3px}.operation-absence-head strong{color:#123b59;font-size:15px}.operation-absence-head small{color:#637785}.operation-absence-head>span{min-width:62px;padding:5px 10px;border-radius:999px;background:#dbeef4;color:#15516b;text-align:center;font-size:12px;font-weight:800}
.operation-absence-list{display:grid;gap:10px}.operation-absence-item{display:grid;grid-template-columns:minmax(230px,1.25fr) minmax(210px,1fr) minmax(220px,1fr) auto;gap:10px;align-items:end;padding:12px;border:1px solid #efb9b9;border-radius:10px;background:#fff7f7}
.operation-absence-info{align-self:center;display:flex;flex-direction:column;gap:4px}.operation-absence-info strong{color:#8d2424}.operation-absence-info span{color:#7a5960;font-size:12px}.operation-absence-item label{font-size:13px;font-weight:650;color:#334155}.operation-absence-item select,.operation-absence-item input{height:42px;min-height:42px;margin-top:6px;padding:0 10px;font-size:13px}.operation-absence-actions{display:flex;gap:8px}.operation-absence-actions button{height:42px;padding:0 12px;white-space:nowrap}.operation-absence-actions .danger{background:#c62828;color:#fff}
.absence-row{background:#fff0f0!important}.absence-row td{border-color:#efb9b9!important}
.absence-badge{display:inline-block;margin:4px 5px 2px 0;padding:3px 8px;border-radius:999px;background:#c62828;color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em}
.absence-reason{display:inline;color:#a52222;font-size:12px;font-weight:700;line-height:1.4}
.absence-note{display:block;margin-top:3px;color:#9b2c2c;font-size:12px;line-height:1.4}
@media(max-width:1100px){.tkb-operation-context{grid-template-columns:repeat(3,minmax(0,1fr))}.tkb-operation-grid{grid-template-columns:1fr 1fr}.tkb-operation-grid .tkb-operation-reason{grid-column:1/-1}.tkb-session-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.operation-absence-item{grid-template-columns:1fr 1fr}.operation-absence-actions{grid-column:1/-1;justify-content:flex-end}}
@media(max-width:680px){.tkb-operation-context,.tkb-operation-grid,.tkb-session-detail-grid,.operation-absence-item{grid-template-columns:1fr}.tkb-operation-grid .tkb-operation-reason{grid-column:auto}.tkb-operations>summary{align-items:flex-start;flex-wrap:wrap}.tkb-operation-actions,.operation-absence-actions{grid-column:auto;justify-content:stretch;flex-direction:column}.tkb-operation-actions button,.operation-absence-actions button{flex:1}.operation-absence-head{align-items:flex-start;flex-direction:column}}

/* Sidebar brand refresh */
#appShell nav>.side-brand{
  padding:0 8px 13px!important;
  margin-bottom:8px!important;
  border-bottom:1px solid rgba(255,255,255,.14)!important;
}
#appShell nav>.side-brand .bmtc-logo-card{
  width:86%!important;
  height:66px!important;
  margin:0 auto 8px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
#appShell nav>.side-brand .bmtc-logo-card img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  filter:none!important;
}
#appShell nav>.side-brand h3{
  margin:7px auto 0!important;
  width:100%!important;
  color:#fff!important;
  font-size:14px!important;
  line-height:1.34!important;
  font-weight:800!important;
  text-align:center!important;
}
#appShell nav>.side-brand p{display:none!important}

/* Thiết lập dữ liệu đào tạo */
#catalogs {
  --navy: #0b2b5b;
  --teal: #087f73;
  --training-bg: #f5f8fc;
  --training-surface: #fff;
  --training-border: #d8e3ed;
  --training-text: #102a43;
  --training-muted: #627d98;
  --training-success: #16803a;
  --training-danger: #c62828;
  --control-height: 40px;
  --card-radius: 12px;
  --card-padding: 20px;
  --table-row-height: 48px;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

#catalogs .training-page {
  color: var(--training-text);
  font-family: inherit;
}

.training-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.training-page-head h2 {
  margin: 0 0 4px;
  color: var(--navy);
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.training-page-head p {
  margin: 0;
  color: var(--training-muted);
  font-size: 13px;
}

.training-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

#catalogs button,
#catalogs input,
#catalogs select,
#catalogs textarea {
  border-radius: 8px;
  font-size: 14px;
}

#catalogs button {
  min-height: var(--control-height);
  padding: 0 16px;
  border: 1px solid var(--teal);
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

#catalogs button:hover:not(:disabled) {
  background: #066c63;
  border-color: #066c63;
  box-shadow: 0 5px 12px rgb(8 127 115 / 16%);
}

#catalogs button:focus-visible,
#catalogs input:focus-visible,
#catalogs select:focus-visible,
#catalogs textarea:focus-visible {
  outline: 3px solid rgb(8 127 115 / 18%);
  outline-offset: 1px;
}

#catalogs button:disabled {
  opacity: .48;
  cursor: not-allowed;
}

#catalogs button.secondary {
  border-color: #9bb7d8;
  background: #fff;
  color: #12477e;
}

#catalogs button.secondary:hover:not(:disabled) {
  border-color: #5e8fc4;
  background: #f3f7fc;
  box-shadow: none;
}

#catalogs button.danger,
#catalogs .training-confirm button.danger {
  border-color: var(--training-danger);
  background: var(--training-danger);
}

.training-filters {
  display: grid;
  grid-template-columns: minmax(240px, 1.25fr) minmax(170px, .75fr) minmax(170px, .75fr);
  gap: 16px;
  margin-bottom: 20px;
}

.training-filters label {
  position: relative;
}

.training-filters input,
.training-filters select,
.training-drawer input,
.training-drawer select,
.training-drawer textarea {
  width: 100%;
  min-height: var(--control-height);
  border: 1px solid var(--training-border);
  background: #fff;
  color: var(--training-text);
  padding: 0 12px;
}

.training-filters input:hover,
.training-filters select:hover,
.training-drawer input:hover,
.training-drawer select:hover,
.training-drawer textarea:hover {
  border-color: #a7bdd2;
}

.training-search input {
  padding-right: 42px;
}

.training-search b {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--training-muted);
  font-size: 18px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.training-program-list {
  display: grid;
  gap: 12px;
}

.training-program-card {
  border: 1px solid var(--training-border);
  border-radius: var(--card-radius);
  background: var(--training-surface);
  box-shadow: 0 3px 10px rgb(16 42 67 / 6%);
  overflow: visible;
}

.training-program-card > header {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
}

#catalogs .training-program-toggle {
  min-width: 0;
  flex: 1;
  display: grid;
  grid-template-columns: 48px minmax(100px, auto) auto auto auto;
  align-items: center;
  justify-content: start;
  gap: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--training-text);
  text-align: left;
  box-shadow: none;
}

#catalogs .training-program-toggle:hover:not(:disabled) {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.training-program-toggle strong {
  font-size: 20px;
  color: var(--navy);
}

.training-program-toggle small,
.training-program-toggle > span:last-child {
  color: var(--training-muted);
  font-weight: 600;
}

.training-course-icon {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #edf3ff;
  color: #1558a5;
  font-size: 17px;
}

.training-program-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

#catalogs .training-chevron {
  width: var(--control-height);
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--navy);
  font-size: 22px;
  transform: rotate(-90deg);
  box-shadow: none;
}

.training-program-card.is-open .training-chevron {
  transform: rotate(0);
}

.training-program-body {
  padding: 0 16px 16px;
  border-top: 1px solid #edf2f7;
}

.training-program-body dl {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 16px 0 18px;
  padding: 14px 4px;
  border: 1px solid var(--training-border);
  border-radius: 10px;
}

.training-program-body dl div {
  min-width: 0;
  padding: 0 14px;
  border-right: 1px solid #e7eef5;
}

.training-program-body dl div:last-child {
  border-right: 0;
}

.training-program-body dt {
  margin-bottom: 5px;
  color: var(--training-muted);
  font-size: 11px;
  font-weight: 700;
}

.training-program-body dd {
  margin: 0;
  overflow: hidden;
  color: var(--training-text);
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}

.training-badge.is-active {
  border-color: #c7e8d1;
  background: #edf9f1;
  color: var(--training-success);
}

.training-badge.is-graduated {
  border-color: #d8e3ed;
  background: #f2f5f8;
  color: #52687c;
}

.training-badge.is-paused {
  border-color: #f3dcc1;
  background: #fff7ed;
  color: #a04b12;
}

.training-badge.is-base {
  border-color: #c9ebd3;
  background: #ebf8ef;
  color: #14743a;
}

.training-class-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.training-class-head h3 {
  margin: 0;
  color: var(--navy);
  font-size: 17px;
}

.training-table-wrap {
  max-width: 100%;
  max-height: 520px;
  overflow: auto;
  border: 1px solid var(--training-border);
  border-radius: 10px;
}

.training-table-wrap table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}

.training-table-wrap th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 42px;
  padding: 0 12px;
  border-bottom: 1px solid var(--training-border);
  background: #f6f9fc;
  color: #486581;
  font-size: 11px;
  text-align: left;
  white-space: nowrap;
}

.training-table-wrap td {
  height: var(--table-row-height);
  padding: 8px 12px;
  border-bottom: 1px solid #e9f0f6;
  color: #243b53;
  font-size: 12px;
  vertical-align: middle;
}

.training-table-wrap tr:last-child td {
  border-bottom: 0;
}

.training-table-wrap tbody tr:not(.training-pagination-row):hover td {
  background: #f8fbfe;
}

.training-table-wrap .is-number {
  text-align: center;
}

.training-row-menu {
  position: relative;
}

.training-row-menu > summary {
  width: 34px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--training-border);
  border-radius: 7px;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  font-weight: 800;
}

.training-row-menu > summary::-webkit-details-marker {
  display: none;
}

.training-row-menu > div {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  width: 160px;
  padding: 6px;
  border: 1px solid var(--training-border);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 12px 28px rgb(16 42 67 / 16%);
}

#catalogs .training-row-menu button {
  width: 100%;
  min-height: 34px;
  display: block;
  padding: 0 10px;
  border: 0;
  background: #fff;
  color: var(--training-text);
  text-align: left;
  font-size: 12px;
  box-shadow: none;
}

#catalogs .training-row-menu button:hover {
  background: #f3f7fb;
  box-shadow: none;
}

#catalogs .training-row-menu button.danger-text {
  color: var(--training-danger);
}

.training-pagination-row td {
  background: #fafcff;
}

.training-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--training-muted);
}

.training-pagination > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

#catalogs .training-pagination button {
  width: 32px;
  min-height: 32px;
  padding: 0;
  border-color: var(--training-border);
  background: #fff;
  color: var(--navy);
}

.training-catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}

#catalogs .training-catalog-grid button {
  min-height: 106px;
  display: grid;
  grid-template-columns: 42px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-content: center;
  padding: 16px;
  border-color: var(--training-border);
  background: #fff;
  color: var(--training-text);
  text-align: left;
  box-shadow: 0 3px 10px rgb(16 42 67 / 5%);
}

#catalogs .training-catalog-grid button:hover {
  border-color: #9cb9d5;
  background: #f9fbfe;
}

.training-catalog-grid button > span {
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #edf3ff;
  color: #174f97;
  font-size: 18px;
}

.training-catalog-grid button strong {
  align-self: end;
  color: var(--navy);
}

.training-catalog-grid button small {
  align-self: start;
  color: var(--training-muted);
  font-size: 11px;
}

.training-catalog-panels {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.training-catalog-panels > details {
  scroll-margin-top: 92px;
  border: 1px solid var(--training-border);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.training-catalog-panels > details > summary {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  color: var(--navy);
  font-weight: 750;
  cursor: pointer;
}

.catalog-panel-body {
  padding: 14px;
  border-top: 1px solid var(--training-border);
}

.catalog-panel-body > button {
  margin-bottom: 12px;
}

.training-catalog-save {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.training-empty,
.training-empty-state {
  padding: 32px 18px;
  color: var(--training-muted);
  text-align: center;
}

.training-empty-state {
  border: 1px dashed #b9cadb;
  border-radius: var(--card-radius);
  background: #fff;
}

.training-empty-state span {
  font-size: 28px;
}

.training-empty-state h3 {
  margin: 8px 0 4px;
  color: var(--navy);
}

.training-empty-state p {
  margin: 0;
}

.training-skeleton {
  display: grid;
  gap: 12px;
}

.training-skeleton i {
  height: 74px;
  border: 1px solid #e1e9f1;
  border-radius: var(--card-radius);
  background: #f1f5f9;
  animation: training-pulse 1.1s ease-in-out infinite alternate;
}

@keyframes training-pulse {
  to { opacity: .5; }
}

.training-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgb(11 43 91 / 28%);
}

.training-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 81;
  width: min(480px, 100vw);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-left: 1px solid var(--training-border);
  background: #fff;
  box-shadow: -18px 0 48px rgb(16 42 67 / 18%);
  transform: translateX(102%);
  transition: transform .22s ease;
}

.training-drawer.is-open {
  transform: translateX(0);
}

.training-drawer > header {
  min-height: 88px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--training-border);
}

.training-drawer h3 {
  margin: 0;
  color: var(--navy);
  font-size: 20px;
}

.training-drawer header p {
  margin: 3px 0 0;
  color: var(--training-muted);
}

#catalogs .training-drawer > header > button {
  width: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--navy);
  font-size: 28px;
  box-shadow: none;
}

.training-drawer form {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
}

.training-drawer-body {
  overflow-y: auto;
  padding: 20px 24px;
}

.training-form-field {
  display: block;
  margin-bottom: 16px;
}

.training-form-field > span {
  display: block;
  margin-bottom: 6px;
  color: #334e68;
  font-size: 12px;
  font-weight: 750;
}

.training-form-field textarea {
  min-height: 96px;
  padding-top: 10px;
  resize: vertical;
}

.training-form-field small {
  min-height: 17px;
  display: block;
  margin-top: 4px;
  color: var(--training-danger);
  font-size: 11px;
}

.training-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.training-drawer-message {
  min-height: 22px;
  padding: 0 24px 8px;
  color: var(--training-danger);
  font-size: 12px;
  font-weight: 650;
}

.training-drawer form > footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--training-border);
  background: #fff;
}

.training-confirm {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(11 43 91 / 32%);
}

.training-confirm > div {
  width: min(420px, 100%);
  padding: 22px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 55px rgb(16 42 67 / 24%);
}

.training-confirm h3 {
  margin: 0 0 8px;
  color: var(--navy);
}

.training-confirm p {
  margin: 0;
  color: var(--training-muted);
}

.training-confirm footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

body.training-drawer-open {
  overflow: hidden;
}

@media (max-width: 1440px) {
  .training-program-toggle {
    gap: 12px;
  }

  .training-program-actions > .secondary {
    padding-inline: 11px;
  }

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

@media (max-width: 1100px) {
  .training-program-card > header {
    align-items: flex-start;
  }

  #catalogs .training-program-toggle {
    grid-template-columns: 44px 1fr auto;
  }

  .training-program-toggle small,
  .training-program-toggle > span:last-child {
    grid-column: 2;
  }

  .training-program-body dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 0;
  }

  .training-program-body dl div {
    border-right: 0;
  }
}

@media (max-width: 760px) {
  .training-page-head,
  .training-class-head {
    align-items: stretch;
    flex-direction: column;
  }

  .training-head-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .training-filters {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .training-program-card > header {
    flex-direction: column;
  }

  #catalogs .training-program-toggle {
    width: 100%;
    grid-template-columns: 44px 1fr;
  }

  .training-program-toggle small,
  .training-program-toggle .training-badge,
  .training-program-toggle > span:last-child {
    grid-column: 2;
  }

  .training-program-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .training-program-body dl,
  .training-catalog-grid,
  .training-form-row {
    grid-template-columns: 1fr;
  }

  .training-catalog-grid {
    gap: 10px;
  }
}

/* Drawer của Tổng quan luôn nằm trên Trợ lý AI để các nút Hủy/Lưu không bị che. */
.training-drawer-backdrop { z-index: 10020; }
.training-drawer { z-index: 10021; }
.training-confirm { z-index: 10022; }

/* Tổng quan: cô lập các header con khỏi kiểu nền của topbar cũ. */
#catalogs .training-page-head {
  padding: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
}
#catalogs .training-program-card > header,
#catalogs .training-drawer > header {
  background: #fff;
  color: inherit;
  box-shadow: none;
}
#appShell #catalogs > .training-drawer-backdrop {
  border-radius: 0;
  background: rgb(11 43 91 / 28%);
}
#appShell #catalogs > .training-drawer {
  border-radius: 0;
  background: #fff;
}
#appShell #catalogs > .training-confirm {
  border-radius: 0;
  background: rgb(11 43 91 / 32%);
}

/* Tỷ lệ toàn khung theo mẫu giao diện Tổng quan. */
#appShell:not([hidden]) { grid-template-columns: 290px minmax(0, 1fr); }
#appShell nav { width: 290px; }
body[data-active-panel="catalogs"] #appShell > header.topbar {
  min-height: 70px;
  padding: 10px 24px;
}
body[data-active-panel="catalogs"] .top-title h1 { font-size: 25px; }
body[data-active-panel="catalogs"] .breadcrumb { display: none; }
body[data-active-panel="catalogs"] #appShell .panel#catalogs { margin: 22px 28px 28px; }

@media (max-width: 1180px) {
  #appShell:not([hidden]) { grid-template-columns: 250px minmax(0, 1fr); }
  #appShell nav { width: 250px; }
}

/* Tổng quan: hệ chữ gọn, rõ và đồng nhất với mẫu quản lý đào tạo. */
#appShell:not([hidden]) {
  font-family: "Bahnschrift", "Arial Narrow", "Segoe UI", Arial, sans-serif;
  font-stretch: semi-condensed;
  letter-spacing: 0;
}
#appShell button,
#appShell input,
#appShell select,
#appShell textarea {
  font-family: inherit;
}
body[data-active-panel="catalogs"] .top-title h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .005em;
}
#appShell .side-brand h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .005em;
}
#appShell .tab span {
  font-size: 15px;
  font-weight: 650;
}
#appShell .tab small {
  font-size: 12px;
  font-weight: 400;
}
#catalogs {
  --table-row-height: 42px;
}
#catalogs .training-page-head h2 {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0;
}
#catalogs .training-page-head p {
  font-size: 13px;
  font-weight: 400;
}
#catalogs .training-program-toggle strong {
  font-size: 20px;
  font-weight: 700;
}
#catalogs .training-program-toggle small,
#catalogs .training-program-toggle > span:last-child {
  font-weight: 400;
}
#catalogs .training-program-body dt {
  font-weight: 500;
}
#catalogs .training-program-body dd {
  font-weight: 600;
}
#catalogs .training-class-head h3 {
  font-size: 18px;
  font-weight: 700;
}
#catalogs .training-table-wrap th {
  font-size: 12px;
  font-weight: 600;
}
#catalogs .training-table-wrap td {
  font-size: 13px;
  font-weight: 400;
}
#catalogs .training-table-wrap .training-badge.is-active{border-color:#c8ddf6;background:#eef6ff;color:#0860c4}
#catalogs .training-badge.is-graduated{border-color:#c7e8d1;background:#edf9f1;color:#19733b}
#catalogs .training-drawer h3 {
  font-size: 20px;
  font-weight: 700;
}
#catalogs .training-form-field > span {
  font-size: 12px;
  font-weight: 600;
}
#catalogs button {
  font-weight: 650;
}

/* Bốn thẻ danh mục là điều khiển accordion duy nhất; không lặp tiêu đề bên dưới. */
#catalogs .training-catalog-grid button strong {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}
#catalogs .training-catalog-grid button small {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
}
#catalogs .training-catalog-grid button.is-active {
  border-color: var(--teal);
  background: #f0faf8;
  box-shadow: 0 0 0 2px rgb(8 127 115 / 10%);
}
#catalogs .training-catalog-panels {
  gap: 0;
  margin-top: 0;
}
#catalogs .training-catalog-panels > details {
  display: none;
  margin-top: 16px;
}
#catalogs .training-catalog-panels > details[open] {
  display: block;
}
#catalogs .training-catalog-panels > details > summary {
  display: none !important;
}
#catalogs .training-catalog-panels > details[open] .catalog-panel-body {
  border-top: 0;
}
#catalogs .training-catalog-save {
  display: none;
  margin-top: 12px;
}
#catalogs .training-catalog-panels.has-open .training-catalog-save {
  display: flex;
}

/* Professional BMTC workflow interface */
:root{--ui-navy:#08245b;--ui-sidebar:#00377f;--ui-sidebar-deep:#002b68;--ui-blue:#087bfe;--ui-teal:#078276;--ui-text:#132a55;--ui-body:#324a6d;--ui-muted:#6c7f99;--ui-border:#d6e2ef;--ui-soft:#f4f7fb;--ui-success:#16813d;--ui-warning:#dc6b0a;--ui-danger:#ec2632;--ui-radius:9px;--ui-shadow:0 3px 12px rgb(4 40 91 / 7%)}
.ui-icon-sprite{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.ui-icon{width:1.15em;height:1.15em;display:inline-block;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em}
#appShell:not([hidden]){grid-template-columns:290px minmax(0,1fr)!important;background:#f7f9fc;color:var(--ui-text);font-family:Bahnschrift,"Segoe UI Variable Text","Segoe UI",Arial,sans-serif;font-stretch:normal}
#appShell button,#appShell input,#appShell select,#appShell textarea{font:inherit}
#appShell>header.topbar{min-width:0;min-height:82px;padding:11px 22px 10px 26px;background:#fff;border-bottom:1px solid #e1e8f1;box-shadow:0 2px 14px rgb(12 48 92 / 5%)}
.top-title{min-width:0;flex:1 1 auto;display:flex;align-items:center;gap:14px}.top-context-copy{min-width:0}
.top-context-icon{width:48px;height:48px;display:grid;place-items:center;color:#0751ad}.top-context-icon .ui-icon{width:42px;height:42px;stroke-width:1.55}
.top-title h1,body[data-active-panel="catalogs"] .top-title h1{margin:0;color:var(--ui-navy);font-size:25px;line-height:1.15;font-weight:700;letter-spacing:-.015em;white-space:nowrap}
#topPageSubtitle{display:block!important;margin:5px 0 0;color:#5b7193;font-size:13px;line-height:1.25}.top-title .breadcrumb{display:none}
.top-actions{flex:0 0 auto;gap:14px;margin-left:20px}.notify-bell{width:42px;height:42px;display:grid;place-items:center;padding:0;color:var(--ui-navy)}.notify-bell .ui-icon{width:27px;height:27px}
.week-box{min-width:170px;height:48px;padding:5px 10px;color:var(--ui-navy)}.week-box>.ui-icon{width:28px;height:28px}.week-box strong{font-size:14px}.week-box small{font-size:11px}
.avatar{width:48px;height:48px;border-width:2px}.user-box{min-width:150px;gap:1px}.user-box strong{font-size:14px;line-height:1.2}.user-box small{font-size:12px}.top-buttons{margin-top:4px}.header-button{min-height:26px;padding:3px 11px;border-radius:5px;font-size:11px}.top-actions>.chevron{width:22px;color:var(--ui-navy);font-size:18px}
#appShell nav{width:290px!important;min-width:290px!important;max-width:290px!important;padding:14px 10px 10px;gap:5px;background:linear-gradient(180deg,var(--ui-sidebar-deep) 0%,#00469d 62%,#0051b2 100%)}
#appShell nav .side-brand{padding:0 8px 13px;margin:0 0 5px;text-align:center}.bmtc-logo-card{height:79px;margin:0;padding:2px 6px;border-radius:0;background:transparent;box-shadow:none}.bmtc-logo-card img{object-fit:contain}
#appShell .side-brand h3{margin:4px 0 0;color:#fff;font-size:14px;line-height:1.35;font-weight:700;letter-spacing:.01em}.sidebar-menu{gap:3px;padding-right:2px}
#appShell .tab{min-height:44px;display:grid;gap:2px;padding:8px 10px 8px 12px;border-radius:7px}
#appShell .tab>span{min-width:0;display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.25;font-weight:400;white-space:normal}
#appShell .tab>span:first-letter,#appShell .tab>span::first-letter{margin:0;font-size:inherit}
#appShell .tab>span .ui-icon{width:19px;height:19px;stroke-width:1.9}#appShell .tab>span b{font-weight:650}
#appShell .tab small{padding-left:29px;color:#c6dcf6;font-size:11px;line-height:1.2;font-weight:400}
#appShell .tab.active{background:linear-gradient(90deg,#0782ff,#0876ec);border:0;box-shadow:0 5px 15px rgb(0 21 64 / 22%)}
#appShell .nav-submenu{gap:2px;padding:2px 0 4px 18px;border-left:1px solid rgb(255 255 255 / 22%)}#appShell .subtab{min-height:43px;margin:0;padding-left:12px;background:rgb(255 255 255 / 7%)}#appShell .subtab>span::before{display:none}#appShell .subtab small{padding-left:29px}
.prep-side-tree{margin-left:10px;padding-left:8px}.side-node summary,.nav-tree .side-node summary,.prep-side-tree .side-node summary{min-height:27px;display:flex;align-items:center;padding:4px 7px;border-radius:5px;background:rgb(255 255 255 / 8%);font-size:11px}.side-month,.nav-tree-month{min-height:27px;padding:4px 8px;border-radius:5px;font-size:11px}
#appShell nav .prep-side-tree .side-node>summary,
#appShell nav .nav-tree .side-node>summary,
#appShell nav .prep-side-tree .side-month,
#appShell nav .nav-tree .nav-tree-month{
  font-size:12px!important;
  font-weight:600!important;
  line-height:1.25!important;
}
.support-card{margin:7px 2px 0!important;padding:10px 12px;border-radius:8px;font-size:12px;line-height:1.45}.support-card strong{display:flex;align-items:center;gap:8px}.support-card .ui-icon{width:17px;height:17px}
#appShell .panel{min-width:0}#appShell .panel#catalogs,#appShell .panel#setup,#appShell .panel#classes{margin:18px 24px 24px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
#appShell .panel#setup>*,#appShell .panel#classes>*,#appShell .panel#setup>div,#appShell .panel#classes>div{background:transparent;border-radius:0}
#catalogs .training-page{max-width:1180px}#catalogs .training-page-head{align-items:center;margin-bottom:18px}#catalogs .training-page-head h2{font-size:22px;font-weight:650}#catalogs .training-page-head p{margin-top:4px;font-size:12px}
#catalogs button{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:7px;font-size:13px;font-weight:600}
#catalogs .training-filters{grid-template-columns:minmax(240px,1.2fr) 180px 190px;gap:14px;max-width:760px;margin-bottom:17px}#catalogs .training-filters input,#catalogs .training-filters select{min-height:38px;margin:0;border-radius:7px;font-size:13px}.training-search b .ui-icon{width:17px;height:17px}
.training-program-card{border-radius:10px;box-shadow:var(--ui-shadow)}.training-program-card>header{min-height:65px;padding:9px 14px}#catalogs .training-program-toggle{grid-template-columns:45px minmax(100px,auto) auto auto auto;gap:15px}.training-course-icon{width:42px;height:42px;font-size:21px}.training-course-icon .ui-icon{width:24px;height:24px}
.training-program-actions button .ui-icon,.training-class-head button .ui-icon{width:15px;height:15px}#catalogs .training-row-menu>summary .ui-icon{width:18px;height:18px}#catalogs .training-chevron .ui-icon{width:20px;height:20px}#catalogs .training-chevron,.training-program-card.is-open .training-chevron{transform:none}
.training-program-body dl{margin:13px 0 15px;padding:12px 3px}.training-table-wrap th{height:38px;background:#f3f7fb}.training-table-wrap td{height:38px;padding-block:6px}
.training-catalog-grid{gap:12px;margin-top:18px}#catalogs .training-catalog-grid button{min-height:88px;grid-template-columns:40px 1fr;padding:13px 15px}.training-catalog-grid button>span{width:39px;height:39px}.training-catalog-grid button>span .ui-icon{width:21px;height:21px}
.training-drawer-backdrop{top:70px;background:rgb(11 43 91 / 9%)!important}.training-drawer{top:70px;width:min(500px,100vw);border-radius:11px 0 0;box-shadow:-10px 6px 34px rgb(16 42 67 / 16%)}.training-drawer>header{min-height:82px;padding:18px 25px}.training-drawer-body{padding:17px 25px}.training-form-field{margin-bottom:11px}.training-form-field>span{margin-bottom:5px;font-size:12px;font-weight:600}.training-drawer input,.training-drawer select{min-height:38px;margin-top:0}

/* Shared professional workflow */
.workflow-editor,.workflow-overview{color:var(--ui-text)}
.workflow-overview-head,.workflow-local-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
.workflow-local-head{min-height:43px;justify-content:flex-end;margin:0 0 7px;padding:0!important;border:0!important;background:transparent!important;color:var(--ui-text)!important;box-shadow:none!important}
.workflow-local-head>div:first-child{display:none}
.workflow-overview-head h2,.workflow-local-head h2{margin:0;color:var(--ui-navy);font-size:23px;line-height:1.2;font-weight:700}
.workflow-overview-head p,.workflow-local-head p{margin:4px 0 0;color:var(--ui-muted);font-size:13px}.workflow-local-head>div:last-child{display:flex;gap:10px}
.page-kicker{display:flex;align-items:center;gap:7px;margin-bottom:7px;color:#0a65c8;font-size:12px;font-weight:600}
#setup button,#classes button{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 14px;border:1px solid var(--ui-teal);border-radius:7px;background:var(--ui-teal);color:#fff;font-size:13px;font-weight:600}
#setup button.secondary,#classes button.secondary{border-color:#8caed6;background:#fff;color:#0a4fa6}
#setup button.danger,#classes button.danger,#setup .holiday-delete,#classes .remove-course,#classes .remove-class{border-color:#ff4c57;background:#fff;color:var(--ui-danger)}
#setup input,#setup select,#setup textarea,#classes input,#classes select,#classes textarea{width:100%;min-height:37px;margin-top:5px;padding:0 11px;border:1px solid #cbd9e8;border-radius:6px;background:#fff;color:var(--ui-text);font-size:13px}
#setup textarea,#classes textarea{padding-block:9px}#setup label,#classes label,#classes .field-title{color:#304b71;font-size:12px;font-weight:600}
#setup input:focus,#setup select:focus,#setup textarea:focus,#classes input:focus,#classes select:focus,#classes textarea:focus{outline:3px solid rgb(8 123 254 / 12%);border-color:#5d91ce}
.workflow-stepper{max-width:1040px;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;margin:8px auto 18px;padding:0 20px;list-style:none}
.workflow-stepper li{position:relative;display:flex;align-items:center;gap:11px;color:#4d6891;font-size:14px}.workflow-stepper li:not(:last-child)::after{content:"";height:1px;flex:1;margin:0 18px;background:#9fb2cd}
.workflow-stepper li>span{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border:1px solid #93a9c7;border-radius:50%;background:#fff;color:#274e8b;font-weight:600}
.workflow-stepper li.is-active{color:#087a76}.workflow-stepper li.is-active>span,.workflow-stepper li.is-done>span{border-color:#087a76;background:#087a76;color:#fff}.workflow-stepper li b{flex:0 0 auto;font-weight:600}
.workflow-card{border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:#fff!important;box-shadow:var(--ui-shadow)}.workflow-card h3{margin:0;color:var(--ui-navy);font-size:17px;font-weight:650}
.workflow-info{min-height:34px;display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid #c8dcf7;border-radius:6px;background:#f5f9ff;color:#0b62cd;font-size:12px}.workflow-info .ui-icon{width:17px;height:17px}
.workflow-footer{position:sticky;bottom:0;z-index:20;min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:13px;padding:11px 14px;border:1px solid var(--ui-border);border-radius:8px;background:#fff!important;box-shadow:0 -3px 12px rgb(10 42 82 / 4%)}
.workflow-footer>div{display:flex;align-items:center;gap:12px}.workflow-footer button:last-child{min-width:270px}

/* Setup editor */
.setup-editor-grid{display:grid;grid-template-columns:minmax(0,2.25fr) minmax(295px,1fr);gap:22px;align-items:start}.setup-editor-main{display:grid;gap:10px}
.setup-scope-card,.holiday-card,.setup-summary-panel{padding:17px 18px}.setup-scope-grid{display:grid;grid-template-columns:1.15fr 1.2fr 1.15fr 1.2fr .8fr;gap:16px;margin-top:13px}.setup-scope-grid input[readonly]{background:#f0f4f8;color:#71839d}
.scope-path{min-height:34px;display:flex;align-items:center;gap:13px;margin:10px 0 8px;padding:7px 11px;border:1px solid #d9e4f0;border-radius:6px;color:#4c6791;font-size:12px}.scope-path b{color:#9caec5}.workflow-card-title p{margin:4px 0 0;color:var(--ui-muted);font-size:12px}
.holiday-table{margin:13px 0 10px;border:1px solid #dbe5ef;border-radius:7px;overflow:visible}.holiday-table-head,.holiday-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(170px,1.08fr) minmax(230px,1.55fr) 58px;gap:12px;align-items:center}
.holiday-table-head{min-height:35px;padding:0 9px;border-bottom:1px solid #dbe5ef;background:#f6f9fc;color:#304b71;font-size:11px;font-weight:600}
.holiday-row{padding:6px 9px;border-bottom:1px solid #edf1f6}.holiday-row:last-child{border-bottom:0}.holiday-row input,.holiday-row select{min-height:33px!important;margin:0!important}
#setup .holiday-delete{width:34px;min-width:34px;min-height:33px;padding:0;justify-self:center}#setup .holiday-delete .ui-icon{width:16px;height:16px}#setup .add-holiday{min-height:34px;color:#087d77;border-color:#3aa8a0}
.holiday-quick{margin-top:9px;border:1px solid #dbe5ef;border-radius:6px;background:#fff}.holiday-quick summary{min-height:36px;display:flex;align-items:center;gap:8px;padding:7px 11px;color:#23436f;cursor:pointer;list-style:none;font-size:12px}.holiday-quick summary small{color:var(--ui-muted);font-weight:400}.holiday-quick[open] summary .ui-icon{transform:rotate(90deg)}
.holiday-quick>div{display:grid;grid-template-columns:1fr auto;gap:10px;padding:0 11px 10px}.holiday-card>.workflow-info{margin-top:8px}
.setup-summary-panel{position:sticky;top:100px}.setup-summary-panel>h3{padding-bottom:13px;border-bottom:1px solid #e2e9f1}.setup-summary-panel dl{display:grid;gap:11px;margin:13px 0}.setup-summary-panel dl div{display:flex;justify-content:space-between;gap:16px;font-size:12px}.setup-summary-panel dt{color:#667b99}.setup-summary-panel dd{margin:0;color:var(--ui-navy);font-weight:600}
.setup-package{margin:12px 0}.setup-open-state{display:flex;gap:11px;padding:13px;border:1px solid #acd8b7;border-radius:7px;background:#f3fbf5;color:#16743a}.setup-open-state.is-new{border-color:#bed4ee;background:#f5f9ff;color:#0a5dba}.setup-open-state>.ui-icon{width:19px;height:19px}.setup-open-state strong,.setup-open-state small{display:block}.setup-open-state small{margin-top:5px;color:#647991;font-size:11px;font-weight:400;line-height:1.45}
.technical-details{border:1px solid #dbe5ef;border-radius:6px}.technical-details summary{min-height:37px;display:flex;align-items:center;gap:8px;padding:7px 10px;list-style:none;cursor:pointer;color:#29476f;font-size:12px;font-weight:600}.technical-details[open] summary .ui-icon{transform:rotate(90deg)}.technical-details p{margin:0;padding:0 10px 10px;color:var(--ui-muted);font-size:11px;word-break:break-all}
.setup-checklist{display:grid;gap:10px;margin:12px 0 0;padding:13px;border:1px solid #acd8b7;border-radius:7px;background:#f5fbf6;list-style:none;color:#176e38;font-size:12px}.setup-checklist li{display:flex;align-items:center;gap:9px}.setup-checklist .ui-icon{width:17px;height:17px}

/* Class and course workflow */
.class-workflow .workflow-stepper{margin-bottom:13px}
.class-context-ribbon{min-height:43px;display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:14px;padding:8px 14px;border:1px solid #b8cfea;border-radius:7px;background:#fff!important;color:#163c74;font-size:12px;font-weight:600;box-shadow:0 2px 8px rgb(4 40 91 / 4%)}
.class-context-ribbon .context-path,.class-context-ribbon>span{display:flex;align-items:center;gap:12px}.class-context-ribbon b{color:#9db0ca}.class-context-ribbon .ui-icon{color:#0868cc}
.class-workspace{display:grid;grid-template-columns:250px minmax(560px,1fr) 305px;gap:20px;align-items:start}
.class-nav-panel,.class-detail-panel,.class-progress-panel{min-width:0;padding:14px}
.class-nav-panel{position:sticky;top:96px;min-height:560px;display:flex;flex-direction:column}
.class-nav-panel>h3,.class-progress-panel>h3{margin:0 0 12px;color:var(--ui-navy);font-size:16px;font-weight:650}
.class-search{position:relative;display:block;margin-bottom:11px}.class-search>.ui-icon{position:absolute;z-index:2;left:10px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:#66809f}.class-search input{height:36px!important;min-height:36px!important;margin:0!important;padding-left:34px!important}
.class-workflow-list{display:grid;gap:9px;min-height:0;max-height:520px;overflow:auto;padding:1px 2px 5px}
#classes .class-workflow-list>button{width:100%;min-height:92px;display:grid;grid-template-columns:24px minmax(0,1fr) 42px;align-items:start;gap:8px;padding:11px 9px;border:1px solid #d6e2ef;border-radius:7px;background:#fff;color:#123567;text-align:left;box-shadow:none}
#classes .class-workflow-list>button:hover{border-color:#8bb4e6;background:#f8fbff}
#classes .class-workflow-list>button.is-active{border-color:#1a79e8;background:#f3f8ff;box-shadow:0 0 0 1px rgb(8 123 254 / 10%)}
.class-workflow-list>button>.ui-icon{width:21px;height:21px;color:#064fb1}
.class-workflow-list>button>span:nth-child(2){min-width:0;display:grid;gap:6px}.class-workflow-list>button strong{overflow:hidden;text-overflow:ellipsis;color:#0a3270;font-size:13px;font-weight:700;white-space:nowrap}.class-workflow-list>button small{overflow:hidden;color:#536d91;font-size:10px;font-weight:400;text-overflow:ellipsis;white-space:nowrap}.class-workflow-list>button small b{display:inline-block;padding:2px 5px;border:1px solid #cbdcf1;border-radius:4px;background:#f4f8fd;color:#174d91;font-size:9px;font-weight:600}
.class-workflow-list>button em{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px;color:#3b5c88;font-size:10px;font-style:normal}.class-workflow-list>button em i{height:3px;overflow:hidden;border-radius:999px;background:#e2e9f3}.class-workflow-list>button em u{height:100%;display:block;border-radius:inherit;background:#1674df;text-decoration:none}
.mini-donut{--progress:0;width:40px;height:40px;align-self:center;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle closest-side,#fff 72%,transparent 74% 99%),conic-gradient(#1d79df calc(var(--progress)*1%),#e2e9f2 0);color:#164687;font-size:9px;font-weight:700}
.class-nav-empty{padding:28px 8px;color:var(--ui-muted);font-size:12px;text-align:center}.class-nav-actions{display:grid;gap:8px;margin-top:auto;padding-top:12px}.class-nav-actions button{width:100%}
.class-detail-panel{min-height:560px;padding:0;overflow:visible}.class-detail-placeholder{min-height:540px;display:grid;place-content:center;justify-items:center;padding:30px;color:#71839d;text-align:center}.class-detail-placeholder>.ui-icon{width:48px;height:48px;margin-bottom:12px;color:#b2c3d8}.class-detail-placeholder h3{margin:0;color:#2e4c73;font-size:17px}.class-detail-placeholder p{margin:7px 0 0;font-size:12px}
#classes #classList{display:block;min-width:0}
#classes #classList>.class-card{display:none!important;margin:0!important;border:0!important;border-radius:9px!important;background:#fff!important;box-shadow:none!important;overflow:visible!important}
#classes #classList>.class-card.workflow-active{display:block!important}
#classes #classList>.class-card.workflow-active .class-tree-body{display:block!important}
#classes .class-tree-head{min-height:63px;display:grid!important;grid-template-columns:38px minmax(0,1fr) 36px!important;align-items:center;gap:10px;margin:0!important;padding:11px 14px!important;border:0!important;border-bottom:1px solid #e2e9f1!important;border-radius:9px 9px 0 0;background:#fff!important;cursor:default}
#classes .class-tree-head:hover{background:#fff!important}
#classes .class-toggle{display:none!important}.class-summary-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:7px;background:#f0f5fd;color:#0757bd}.class-summary-icon .ui-icon{width:23px;height:23px}
#classes .class-summary h3{margin:0;color:#0c3270;font-size:16px;font-weight:700}.class-summary p{margin:4px 0 0;color:#547094;font-size:10px;font-weight:400}
#classes .remove-class{width:32px;min-width:32px;height:32px;min-height:32px;padding:0!important}.remove-class .ui-icon{width:15px;height:15px}
#classes .class-tree-body{padding:0 14px 14px!important}
.class-source-details{position:relative;margin:0;border:0}.class-source-details>summary{position:absolute;z-index:2;right:43px;top:-48px;display:flex;align-items:center;gap:6px;padding:5px 7px;color:#0757bd;cursor:pointer;list-style:none;font-size:10px;font-weight:600}.class-source-details>summary .ui-icon{width:13px;height:13px}.class-source-details[open]>summary{color:#087d77}.class-source-grid{display:none!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 -14px 12px;padding:12px 14px;border-bottom:1px solid #e2e9f1;background:#f8fafc}.class-source-details[open]>.class-source-grid{display:grid!important}.class-source-grid label{min-width:0}
.class-course-head{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}.class-course-head h3{margin:0;color:var(--ui-navy);font-size:15px;font-weight:650}.class-course-head p{margin:3px 0 0;color:var(--ui-muted);font-size:10px}.class-course-head .add-course{min-height:32px!important;padding-inline:11px!important;font-size:11px!important}
#classes .class-tree .course-list{display:grid;gap:9px;margin:0!important;padding:0!important;border:0!important}
#classes .class-tree .course{display:block!important;margin:0!important;padding:0!important;border:1px solid #d7e2ee!important;border-radius:7px!important;background:#fff!important;overflow:visible!important;box-shadow:none!important}
.course-summary-head{min-height:41px;display:grid;grid-template-columns:24px minmax(120px,1fr) auto auto minmax(0,.8fr) auto 28px 28px;align-items:center;gap:7px;padding:5px 8px;border-radius:7px;background:#fbfcfe;color:#24466f;font-size:10px}.course-number{font-weight:700;text-align:center}.course-summary-name{overflow:hidden;color:#153f7c;font-size:11px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.course-code-badge{padding:3px 6px;border:1px solid #c8dcf2;border-radius:4px;background:#f0f6fd;color:#145cae;font-size:9px;font-weight:600}.course-summary-periods{white-space:nowrap}.course-summary-teachers{overflow:hidden;color:#627795;text-overflow:ellipsis;white-space:nowrap}.course-summary-state{padding:3px 6px;border:1px solid #f2c99c;border-radius:4px;background:#fff7ed;color:#c75f05;font-size:9px;font-weight:600;white-space:nowrap}.course-summary-state.is-done{border-color:#bce3c6;background:#f0faf2;color:#147239}
#classes .course-summary-head button{width:27px;min-width:27px;height:27px;min-height:27px;padding:0!important;border-color:transparent!important;background:transparent!important;color:#183f75!important}.course-summary-head button .ui-icon{width:14px;height:14px}.course-summary-head .remove-course{color:var(--ui-danger)!important}
.course-editor-body{display:block;border-top:1px solid #e4ebf3}.course.is-collapsed .course-editor-body{display:none}
.course-form-section{padding:9px 10px 4px}.course-form-section+ .course-form-section{border-top:0}.course-form-section h4{margin:0 0 7px;color:#103c78;font-size:11px;font-weight:700}
#classes .course-grid{display:grid!important;gap:8px 10px!important;align-items:end}.course-info-grid{grid-template-columns:1.15fr .8fr 1fr 1fr}.course-teacher-grid{grid-template-columns:1fr .75fr 1fr .75fr 1fr}.course-time-grid{grid-template-columns:1.2fr .75fr .95fr .85fr .85fr 1fr}
#classes .course-grid>label,#classes .course-grid>.days-field{min-width:0;margin:0!important;padding:0!important;border:0!important;background:transparent!important;font-size:9px!important;line-height:1.2!important;font-weight:600!important;color:#395376!important}
#classes .course-grid input,#classes .course-grid select,#classes .course-grid .day-picker-toggle{height:31px!important;min-height:31px!important;margin-top:4px!important;padding:0 8px!important;border:1px solid #cad8e7!important;border-radius:5px!important;background:#fff!important;color:#17345e!important;font-size:10px!important;font-weight:400!important;box-shadow:none!important}
#classes .course-grid .day-picker-toggle{min-width:0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#classes .days-field .field-title{display:block;margin:0 0 4px!important;color:#395376!important;font-size:9px!important;font-weight:600!important}.course-time-grid .days-field{width:100%!important;min-width:0!important}.course-time-grid .day-picker{width:100%}
#classes .day-checks{top:calc(100% + 4px)!important;left:auto!important;right:0!important;width:210px!important;min-width:210px!important;max-height:235px!important;gap:4px!important;padding:6px!important;border-radius:7px!important;overflow:auto!important;z-index:1000!important}.day-picker.drop-up .day-checks{top:auto!important;bottom:calc(100% + 4px)!important}
#classes .day-checks label{min-height:29px!important;padding:5px 7px!important;border-radius:5px!important;font-size:11px!important;font-weight:500!important}.day-checks input[type=checkbox]{width:15px!important;min-width:15px!important;height:15px!important;min-height:15px!important;margin:0!important}.day-checks .day-auto{min-height:30px!important;margin:0!important;padding:5px 7px!important;border-radius:5px!important;font-size:10px!important}
.course-advanced{margin:5px 10px 9px!important;border:1px solid #dce5ef!important;border-radius:6px!important;background:#fbfcfe!important;overflow:visible!important}.course-advanced>summary{min-height:34px;display:flex;align-items:center;padding:7px 10px!important;list-style:none;color:#25476f!important;cursor:pointer;font-size:10px!important;font-weight:650!important}.course-advanced>summary::before{content:"›"!important;margin-right:8px!important;font-size:17px!important;line-height:1!important;transform:none!important}.course-advanced[open]>summary::before{transform:rotate(90deg)!important}.course-source-note{margin:0 10px 8px;padding:7px 9px;border-radius:5px;font-size:10px}.course-advanced-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;padding:0 10px 10px!important}.course-advanced-grid label{font-size:9px!important}.course-advanced-grid input,.course-advanced-grid select{height:31px!important;min-height:31px!important;font-size:10px!important}.course-advanced-grid .check-field{min-height:31px!important;padding:5px 7px!important;font-size:9px!important}.course-advanced-grid .check-field input{width:14px!important;min-width:14px!important;height:14px!important;min-height:14px!important;margin:0!important}
.course-status{min-height:28px!important;margin:0!important;padding:5px 10px!important;border-top:1px solid #edf1f6;color:#627795!important;font-size:10px!important}
.class-progress-panel{position:sticky;top:96px;min-height:430px}.class-progress-summary{display:grid;grid-template-columns:112px 1fr;align-items:center;gap:14px;padding:13px 0 17px;border-bottom:1px solid #e1e8f1}.progress-donut{--progress:0;width:105px;height:105px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle closest-side,#fff 72%,transparent 74% 99%),conic-gradient(#1674df calc(var(--progress)*1%),#e4ebf3 0);color:#103b80}.progress-donut strong{font-size:26px;font-weight:700}.class-progress-summary>div:last-child{display:grid;gap:3px;color:#4e678a;font-size:10px}.class-progress-summary b{color:#183d73;font-size:12px}.class-progress-summary em{display:grid;gap:2px;margin-top:7px;color:#667b98;font-style:normal}.class-progress-summary em strong{color:#e65f00;font-size:14px}
.class-check-list{margin-top:15px}.class-check-list h4{margin:0 0 8px;color:var(--ui-navy);font-size:14px}.class-check-list>div{min-height:51px;display:grid;grid-template-columns:22px 1fr;align-items:center;gap:8px;padding:7px 8px;border:1px solid #dce5ef;border-radius:6px;background:#fff;margin-bottom:7px}.class-check-list>div>.ui-icon{width:19px;height:19px}.class-check-list>div>span{display:grid;gap:2px}.class-check-list b{color:#2b4b75;font-size:10px}.class-check-list small{color:#71839d;font-size:9px}.class-check-list .is-ok>.ui-icon{color:#138449}.class-check-list .is-warning>.ui-icon{color:#e2700b}
.class-unsaved-note{display:flex;gap:8px;margin-top:14px;padding:10px;border:1px solid #f5c78e;border-radius:6px;background:#fff8ef;color:#d26305;font-size:10px;line-height:1.4}.class-unsaved-note .ui-icon{width:16px;height:16px;flex:0 0 auto}
.inherit-workflow-panel{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;padding:10px 13px;border:1px solid #b4d8d3;border-radius:8px;background:#f1faf8!important}.inherit-workflow-panel .inherit-option{flex:1;margin:0;padding:0;border:0;background:transparent;color:#155d57;font-size:11px}.inherit-option span{display:grid;gap:2px}.inherit-option small{color:#5d7779;font-size:10px;font-weight:400}.inherit-workflow-panel button{flex:0 0 auto}.class-workflow-footer{margin-top:10px}

@media(max-width:1500px){
  .class-workspace{grid-template-columns:220px minmax(500px,1fr) 265px;gap:14px}
  .class-progress-summary{grid-template-columns:84px 1fr}.progress-donut{width:80px;height:80px}.progress-donut strong{font-size:20px}
  .course-teacher-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.course-time-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Compact composition from the class-workflow reference */
body[data-active-panel="classes"] #appShell:not([hidden]){grid-template-columns:240px minmax(0,1fr)!important}
body[data-active-panel="classes"] #appShell nav{width:240px!important;min-width:240px!important;max-width:240px!important;background:linear-gradient(180deg,#002e70,#003f8f)!important}
body[data-active-panel="classes"] #appShell>header.topbar{min-height:81px}
body[data-active-panel="classes"] .top-title h1{font-size:22px}
body[data-active-panel="classes"] #appShell .panel#classes{margin:18px 24px 0 27px}
body[data-active-panel="classes"] .class-workflow{position:relative;min-width:0}
body[data-active-panel="classes"] .class-workflow>.workflow-local-head{position:absolute;z-index:3;top:0;right:0;margin:0}
body[data-active-panel="classes"] .class-workflow>.workflow-stepper{max-width:none;min-height:39px;margin:0 330px 15px 65px;padding:0}
body[data-active-panel="classes"] .workflow-stepper li.is-active{color:#0756bd}
body[data-active-panel="classes"] .workflow-stepper li.is-active>span{border-color:#0756bd;background:#0756bd}
body[data-active-panel="classes"] .workflow-stepper li.is-done{color:#087a76}
body[data-active-panel="classes"] .workflow-stepper li.is-done>span{border-color:#087a76;background:#087a76}
body[data-active-panel="classes"] .class-context-ribbon{width:calc(100% - 325px);min-height:43px;padding:0;border:0;background:transparent!important;box-shadow:none}
body[data-active-panel="classes"] .class-context-ribbon>.alert{width:100%;min-height:43px;display:flex;align-items:center;gap:10px;margin:0;padding:8px 13px;overflow:hidden;border:1px solid #bed3ed;border-radius:6px;background:#f8fbff;color:#173f77;font-size:11px;white-space:nowrap}
body[data-active-panel="classes"] .class-context-ribbon br{display:none}
body[data-active-panel="classes"] .class-detail-panel{max-height:calc(100vh - 275px);overflow-y:auto}
body[data-active-panel="classes"] .class-nav-panel,body[data-active-panel="classes"] .class-progress-panel{top:92px}
body[data-active-panel="classes"] .ai-assistant,body[data-active-panel="setup"] .ai-assistant{bottom:88px}

@media(max-width:1180px){
  #appShell:not([hidden]){grid-template-columns:235px minmax(0,1fr)!important}#appShell nav{width:235px!important;min-width:235px!important;max-width:235px!important}
  .setup-editor-grid{grid-template-columns:1fr}.setup-summary-panel{position:static}.setup-scope-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .class-workspace{grid-template-columns:215px minmax(0,1fr)}.class-progress-panel{position:static;grid-column:1/-1;min-height:0}.class-progress-panel{display:grid;grid-template-columns:160px 1fr 240px;gap:14px}.class-progress-panel>h3{grid-column:1/-1}.class-progress-summary{grid-template-columns:80px 1fr;padding:0;border:0}.class-check-list{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:0}.class-check-list h4{grid-column:1/-1}.class-check-list>div{margin:0}.class-unsaved-note{margin:0;align-self:start}
}
@media(max-width:820px){
  #appShell:not([hidden]){display:block!important}#appShell nav{position:relative;width:100%!important;min-width:100%!important;max-width:100%!important;height:auto;max-height:none}#appShell>header.topbar{position:relative;left:0;min-height:auto}.top-actions{gap:6px}.week-box{display:none}.user-box{min-width:0}.user-box small,.top-buttons{display:none}
  #appShell .panel#catalogs,#appShell .panel#setup,#appShell .panel#classes{margin:14px}
  .workflow-local-head,.workflow-overview-head{align-items:flex-start;flex-direction:column}.workflow-stepper{padding:0}.workflow-stepper li b{font-size:11px}.workflow-stepper li:not(:last-child)::after{margin:0 8px}
  .setup-scope-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.holiday-table{overflow-x:auto}.holiday-table-head,.holiday-row{min-width:660px}.workflow-footer{position:static;align-items:stretch;flex-direction:column}.workflow-footer>div{align-items:stretch;flex-direction:column}.workflow-footer button,.workflow-footer button:last-child{width:100%;min-width:0}
  .class-workspace{grid-template-columns:1fr}.class-nav-panel,.class-progress-panel{position:static}.class-workflow-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}.class-progress-panel{display:block}.class-info-grid,.course-info-grid,.course-teacher-grid,.course-time-grid,.course-advanced-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.course-summary-head{grid-template-columns:24px minmax(100px,1fr) auto 28px 28px}.course-summary-periods,.course-summary-teachers,.course-summary-state{display:none}.inherit-workflow-panel{align-items:stretch;flex-direction:column}
}
@media(max-width:520px){.setup-scope-grid,.class-source-grid,.class-info-grid,.course-info-grid,.course-teacher-grid,.course-time-grid,.course-advanced-grid{grid-template-columns:1fr!important}.class-workflow-list{grid-template-columns:1fr}.top-title h1,body[data-active-panel="catalogs"] .top-title h1{font-size:19px}.top-context-icon{display:none}}

/* Professional TKB - LBG - vehicle dispatch workspace */
body[data-active-panel="result"] #appShell .panel#result{
  margin:16px 18px 24px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#0d2857;
}
#result .result-command-bar{
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 15px;
  border:1px solid #e1e8f1;
  border-radius:9px!important;
  background:#fff!important;
  box-shadow:0 3px 14px rgb(18 55 105 / 5%);
}
#result .result-command-scope{min-width:260px;display:grid;gap:5px}
#result .result-context{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#183866;
  font-size:12px;
  font-weight:650;
}
#result .result-context span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
#result .result-context b{color:#91a3ba;font-weight:500}
#result .result-context .ui-icon{width:14px;height:14px;color:#075bbd}
#result #summary{margin:0;color:#0d2857;font-size:12px;font-weight:700;line-height:1.3}
#result .result-primary-actions{flex:1 1 auto;align-items:center;gap:8px;margin:0}
#result .result-primary-actions button{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 12px;
  border:1px solid #c9d7e8;
  border-radius:7px;
  background:#fff;
  color:#123b78;
  box-shadow:0 1px 3px rgb(21 55 100 / 4%);
  font-size:11.5px;
  font-weight:650;
  white-space:nowrap;
}
#result .result-primary-actions button:hover{border-color:#3885dd;background:#f7fbff}
#result .result-primary-actions button.result-export{border-color:#087c69;background:linear-gradient(180deg,#0b8b76,#087361);color:#fff;box-shadow:0 3px 9px rgb(6 109 91 / 18%)}
#result .result-primary-actions button:disabled{opacity:.46;cursor:not-allowed;box-shadow:none}
#result .result-primary-actions .ui-icon{width:15px;height:15px;stroke-width:1.8}
#result .result-alert-stack{display:grid;gap:9px;margin:12px 0 10px;background:transparent!important;border-radius:0!important}
#result .result-alert-stack .alert{
  min-height:39px;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:9px 13px;
  border:1px solid #b9dfca;
  border-radius:7px;
  background:linear-gradient(90deg,#effbf4,#f8fdfa);
  color:#087232;
  font-size:12px;
  line-height:1.35;
}
#result .result-alert-stack .alert.error{border-color:#f2d399;background:linear-gradient(90deg,#fff8e8,#fffdf8);color:#9a5a00}
#result .result-alert-stack .ui-icon{width:17px;height:17px;flex:0 0 auto}
#result .result-filter-card{
  padding:19px 20px 10px;
  border:1px solid #e1e8f1;
  border-radius:9px!important;
  background:#fff!important;
  box-shadow:0 3px 14px rgb(18 55 105 / 4%);
}
#result .result-filters{grid-template-columns:repeat(5,minmax(135px,1fr));gap:17px 28px}
#result .result-filters label{color:#234b7e;font-size:11.5px;font-weight:650}
#result .result-filters select{
  min-height:40px;
  margin-top:7px;
  padding:7px 11px;
  border:1px solid #cbd8e8;
  border-radius:7px;
  background:#fff;
  color:#102a53;
  font-size:12.5px;
  font-weight:500;
  box-shadow:0 1px 2px rgb(17 53 98 / 3%);
}
#result .result-filters select:focus{outline:2px solid #b7dcff;border-color:#1681ee}
#result .result-tabs{display:flex;gap:18px;margin:23px 0 0;padding:0;border:0}
#result .mini-tab{
  min-height:38px;
  padding:9px 17px;
  border:0;
  border-radius:7px;
  background:#f0f4f9;
  color:#173d73;
  font-size:12px;
  font-weight:700;
  box-shadow:none;
}
#result .mini-tab.active{background:linear-gradient(180deg,#0a377b,#062f6c);color:#fff;box-shadow:0 4px 10px rgb(4 49 110 / 17%)}
#result .result-data-tools{margin:9px 0 0;background:transparent!important;border-radius:0!important}
#result .result-data-tools details{border:1px solid #dfe7f0;border-radius:7px;background:#fff}
#result .result-data-tools summary{min-height:35px;display:flex;align-items:center;gap:7px;padding:7px 12px;cursor:pointer;color:#45617f;font-size:11.5px;font-weight:650;list-style:none}
#result .result-data-tools summary::-webkit-details-marker{display:none}
#result .result-data-tools summary .ui-icon{width:15px;height:15px}
#result .result-data-tools details>div{display:flex;align-items:center;gap:9px;padding:9px 12px;border-top:1px solid #e3eaf2}
#result .result-data-tools details>div>span{flex:1;color:#64768c;font-size:11.5px;line-height:1.4}
#result .result-data-tools button{min-height:34px;padding:7px 11px;border-radius:6px;font-size:11px}
#result .result-output{margin-top:12px;padding:17px 18px 24px;border:1px solid #e1e8f1;border-radius:9px;background:#fff;box-shadow:0 3px 14px rgb(18 55 105 / 4%)}
#result .result-output>.class-title:first-child{margin-top:0}
#result .result-output .table-wrap{border:1px solid #dce5ef;border-radius:8px}
#result .result-output table{background:#fff}
#result .result-output th{background:#f0f5fa;color:#173d6e;font-weight:700}
#result .result-output th,#result .result-output td{border-color:#dbe4ed}
#appShell nav .nav-tree .nav-tree-month.active,
#appShell nav .nav-tree .nav-tree-month[aria-current="page"]{
  background:linear-gradient(90deg,#178dff,#167de8)!important;
  color:#fff!important;
  box-shadow:inset 3px 0 0 #e1f4ff,0 3px 8px rgb(0 34 91 / 25%)!important;
}
#appShell nav .nav-tree .nav-tree-month:not(.active)[aria-current="false"]{box-shadow:none}
#appShell nav .prep-side-tree .side-month.active,
#appShell nav .prep-side-tree .side-month[aria-current="page"]{
  background:linear-gradient(90deg,#178dff,#167de8)!important;
  color:#fff!important;
  box-shadow:inset 3px 0 0 #e1f4ff,0 3px 8px rgb(0 34 91 / 25%)!important;
}
#appShell nav .prep-side-tree .side-month:not(.active)[aria-current="false"]{box-shadow:none}

/* Giới hạn phạm vi reflow của cây; giữ nguyên vị trí cuộn khi đổi tháng. */
#appShell nav .prep-side-tree,
#appShell nav .nav-tree{
  contain:layout paint style;
  overflow-anchor:none;
}

@media(max-width:1500px){
  #result .result-command-bar{align-items:flex-start;flex-direction:column}
  #result .result-primary-actions{justify-content:flex-start}
  #result .result-filters{grid-template-columns:repeat(4,minmax(135px,1fr))}
}
@media(max-width:1050px){#result .result-filters{grid-template-columns:repeat(2,minmax(150px,1fr))}}
@media(max-width:820px){
  body[data-active-panel="result"] #appShell .panel#result{margin:14px}
  #result .result-primary-actions button{flex:1 1 150px}
  #result .result-filters{grid-template-columns:1fr}
  #result .result-tabs{gap:7px;flex-direction:column}
  #result .result-data-tools details>div{align-items:stretch;flex-direction:column}
}

/* Phạm vi dữ liệu toàn trường: Năm học → Bộ môn → Khóa → Kỳ → Tháng; lớp và học phần thuộc Bộ môn. */
#catalogs .training-filters{grid-template-columns:minmax(230px,1.2fr) minmax(170px,.8fr) minmax(160px,.7fr) minmax(170px,.8fr);max-width:980px}
.catalog-object-row{display:grid;grid-template-columns:minmax(145px,.75fr) minmax(220px,1.4fr) minmax(160px,.8fr) auto;align-items:end;gap:12px;padding:12px;border:1px solid #dfe8f3;border-radius:9px;background:#fff}
.teacher-row.catalog-object-row{grid-template-columns:minmax(190px,1fr) minmax(190px,1fr) minmax(180px,.9fr) minmax(150px,.7fr) auto}
.catalog-object-row label{display:grid;gap:6px;color:#294b73;font-size:12px;font-weight:700}
.catalog-object-row input,.catalog-object-row select{min-height:39px;margin:0;border:1px solid #cbd8e8;border-radius:7px;background:#fff}
.teacher-department-field{min-width:0;margin:0;padding:7px 9px 9px;border:1px solid #cbd8e8;border-radius:7px;background:#f8fbff}
.teacher-department-field legend{padding:0 4px;color:#294b73;font-size:12px;font-weight:750}
.teacher-department-checks{display:grid;gap:5px;max-height:116px;overflow:auto}
.teacher-department-checks label{display:flex;align-items:center;gap:7px;min-width:0;font-weight:650}
.teacher-department-checks input{width:16px;height:16px;min-height:0;margin:0;accent-color:#0868d9}
.teacher-department-checks span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.training-department-group{display:grid;gap:10px;margin:0 0 18px;padding:12px;border:1px solid #cddded;border-radius:11px;background:#f7fbff}
.training-department-group>header{display:flex;align-items:center;gap:10px;padding:2px 4px;color:#0a3978}
.training-department-group>header>span{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#e5f0ff;color:#075ec6}
.training-department-group>header .ui-icon{width:18px;height:18px}
.training-department-group>header div{display:grid;gap:2px}
.training-department-group>header strong{font-size:15px}
.training-department-group>header small{color:#6c8099;font-size:11px;font-weight:650}
.training-department-programs{display:grid;gap:10px}
#appShell nav .nav-tree .side-class{margin-left:10px;border-left:1px solid rgb(169 210 255 / 45%)}
#appShell nav .nav-tree .side-class>summary{padding:8px 9px;color:#dbeeff;font-size:12px;font-weight:750}
#appShell nav .nav-tree .nav-tree-subjects{display:grid;gap:3px;padding:2px 0 5px 12px}
#appShell nav .nav-tree .nav-tree-subject{width:100%;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}
.progress-filter-bar{grid-template-columns:repeat(4,minmax(150px,1fr));align-items:end}
.setup-scope-grid{grid-template-columns:repeat(6,minmax(115px,1fr))}
@media(max-width:1280px){#catalogs .training-filters{grid-template-columns:repeat(2,minmax(180px,1fr))}.teacher-row.catalog-object-row,.catalog-object-row{grid-template-columns:repeat(2,minmax(180px,1fr))}.catalog-object-row .remove-department,.catalog-object-row .remove-teacher{justify-self:end}.setup-scope-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){#catalogs .training-filters,.teacher-row.catalog-object-row,.catalog-object-row,.progress-filter-bar,.setup-scope-grid{grid-template-columns:1fr}}

/* Cấp quản lý Bộ môn dùng nhất quán trên Tổng quan và mọi cây phạm vi. */
#catalogs .training-page-head h2::after{
  content:"Toàn trường";
  display:inline-flex;
  align-items:center;
  min-height:22px;
  margin-left:10px;
  padding:3px 8px;
  border:1px solid #bcd9f5;
  border-radius:999px;
  background:#edf6ff;
  color:#0860b8;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.02em;
  vertical-align:middle;
}
#catalogs .training-catalog-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
#catalogs [data-open-catalog="catalogDepartmentsNode"]>span{background:#e9f7f4;color:#087c69}
#catalogs [data-open-catalog="catalogDepartmentsNode"].is-active{border-color:#078276;background:#effaf7}
.department-catalog-node{border-color:#bbdbea;background:#f7fbff}
.department-catalog-node>summary{background:linear-gradient(90deg,#e9f6ff,#f8fcff)}
.department-catalog-node>summary span{color:#0757a4}
.training-department-group{border-left:3px solid #2483dc}

/* Cây Chuẩn bị giữ Năm học → Bộ môn → Khóa → Kỳ → Tháng. */
.pkg-department{margin:8px 0 0 14px;border-color:#c6dced;background:#f7fbff}
.pkg-department>summary{background:#e8f3ff;color:#0b4d92}
#appShell nav .side-department,
#appShell nav .nav-department{
  margin:3px 0 0 6px;
  padding-left:6px;
  border-left:1px solid rgb(125 211 252 / 48%);
}
#appShell nav .side-department>summary,
#appShell nav .nav-department>summary{
  background:rgb(50 132 215 / 24%);
  color:#eff8ff;
}
#appShell nav .nav-year>summary{color:#fff;font-weight:800}
#appShell nav .side-department>.side-program,
#appShell nav .nav-department>.side-program{margin-left:6px}
#resultNavTree>.nav-department{margin-left:0;padding-left:0;border-left:0}
#resultNavTree>.nav-department>summary{font-weight:800}
#resultNavTree>.nav-department>.nav-year{margin-left:7px}

/* Bộ môn là khóa phạm vi bắt buộc, nên được nhận biết rõ nhưng không phá form hiện có. */
#setupDepartment,
#resultDepartment,
#progressDepartment,
#trainingDepartmentFilter,
.department-id{border-color:#9fcbe9;background-color:#f8fcff}
#setupDepartment:focus,
#resultDepartment:focus,
#progressDepartment:focus,
#trainingDepartmentFilter:focus,
.department-id:focus{outline:2px solid #b7dcff;border-color:#1681ee}

/* Giữ đúng thứ tự phạm vi kể cả khi các form chuyên nghiệp được dựng lại bằng JS. */
.setup-scope-grid>label{order:10}
.setup-scope-grid>label:has(#setupSchoolYear){order:1}
.setup-scope-grid>label:has(#setupDepartment){order:2}
.setup-scope-grid>label:has(#setupProgram){order:3}
.setup-scope-grid>label:has(#setupTerm){order:4}
.setup-scope-grid>label:has(#month){order:5}
.setup-scope-grid>label:has(#year){order:6}
#result .result-filters>label{order:20}
#result .result-filters>label:has(#resultDepartment){order:1}
#result .result-filters>label:has(#resultSchoolYear){order:2}
#result .result-filters>label:has(#resultProgramFilter){order:3}
#result .result-filters>label:has(#resultTermFilter){order:4}
#result .result-filters>label:has(#resultMonthFilter){order:5}
#result .result-filters>label:has(#resultClassFilter){order:6}
#result .result-filters>label:has(#resultTeacherFilter){order:7}
#result .result-filters>label:has(#resultSubjectFilter){order:8}
#result .result-filters>label:has(#resultBaseFilter){order:9}
.progress-filter-bar>*{order:20}
.progress-filter-bar>label:has(#progressSchoolYear){order:1}
.progress-filter-bar>label:has(#progressDepartment){order:2}
.progress-filter-bar>label:has(#progressProgram){order:3}
.progress-filter-bar>label:has(#progressTerm){order:4}
.progress-filter-bar>label:has(#progressClass){order:5}
.progress-filter-bar>label:has(#progressMonth){order:6}
.progress-filter-bar>label:has(#progressWeek){order:7}
.progress-filter-bar>#viewProgress{order:8}
.progress-filter-bar>label:has(#progressStatus){order:9}

@media(max-width:1440px){#catalogs .training-catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){#catalogs .training-catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){#catalogs .training-catalog-grid{grid-template-columns:1fr}#catalogs .training-page-head h2::after{margin:7px 0 0;display:flex;width:max-content}}