/* SI-SUPERVISI — UI modern, responsif, dan konsisten */
:root{--green:#087653;--green-dark:#075640;--green-light:#e9f8f1;--ink:#173451;--muted:#74869b;--line:#e5edf3;--page:#f2f6fa;--blue:#2563eb}
*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:14px}
.sidebar{position:fixed;inset:0 auto 0 0;width:248px;background:linear-gradient(180deg,#075b45,#064a39);color:#eafff7;z-index:1040;display:flex;flex-direction:column;transition:transform .25s ease;box-shadow:4px 0 20px #0c473510}
.brand{height:78px;padding:12px 16px;display:flex;align-items:center;gap:11px;border-bottom:1px solid #ffffff20}
.brand-logo{width:46px;height:52px;object-fit:contain;background:#fff;border-radius:9px;padding:3px}
.brand strong{display:block;font-size:14px;line-height:1.3}.brand small{display:block;color:#bde8d8;font-size:11px;font-weight:500}
.side-nav{padding:14px 10px;overflow-y:auto;flex:1}
.side-nav a,.logout-link{display:flex;align-items:center;gap:11px;padding:11px 12px;margin:3px 0;border-radius:9px;color:#d9f2e9;text-decoration:none;font-size:13px;font-weight:600;transition:background .18s,color .18s}
.side-nav a i,.logout-link i{width:17px;text-align:center;font-size:14px}
.side-nav a:hover,.side-nav a.active{background:#079b70;color:#fff}
.nav-label{padding:18px 12px 6px;color:#93cdb9;font-size:10px;font-weight:800;letter-spacing:.1em}
.sidebar-bottom{padding:12px;border-top:1px solid #ffffff20}
.signed-user{display:flex;align-items:center;gap:9px;padding:5px 3px 10px}.user-avatar{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#ffffff22;font-weight:800}
.signed-user strong,.signed-user small{display:block;max-width:165px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.signed-user strong{font-size:11px}.signed-user small{font-size:9px;color:#b8ddcf}
.logout-link{padding:8px 10px;margin:0;background:#ffffff0d;font-size:12px}
.main-content{margin-left:248px;min-height:100vh;min-width:0}
.page-content{padding:24px;max-width:1800px;margin:0 auto}
.mobile-topbar{display:none}
.sidebar-backdrop{display:none}
.content-card{background:#fff;border:1px solid #e8eef4;border-radius:15px;box-shadow:0 4px 18px #1c3c5908}
h4{font-size:20px;font-weight:800;color:#163a59}h5{font-size:16px;font-weight:800;color:#163a59}
.form-label{font-size:12px;font-weight:700;color:#455d75}.form-control,.form-select{border-color:#dce5ed;border-radius:9px;padding:9px 11px;font-size:13px}.form-control:focus,.form-select:focus{border-color:#4d9cda;box-shadow:0 0 0 .2rem #2563eb18}
.btn{border-radius:9px;font-size:13px;font-weight:650;padding:8px 13px}.btn-primary{background:#1769c2;border-color:#1769c2}.btn-primary:hover{background:#1157a3}
.table{font-size:12px;margin-bottom:0}.table thead th{background:#eef5fb;color:#234867;font-weight:750;border-bottom:1px solid #dce7f0;white-space:nowrap}.table td{color:#34516b;vertical-align:middle}.table>:not(caption)>*>*{padding:11px 10px}
.badge{font-size:10px;padding:6px 9px}
.alert{border-radius:10px;font-size:13px}
.login-page{min-height:100vh;display:grid;place-items:center;background:#0a3150 url('../img/login-background.jpg') center/cover fixed no-repeat;position:relative;padding:24px}
.login-shade{position:fixed;inset:0;background:linear-gradient(120deg,rgba(3,30,54,.82),rgba(4,83,100,.48))}
.login-wrap{position:relative;z-index:1;width:min(100%,450px)}
.login-card{background:rgba(255,255,255,.97);border-radius:22px;padding:32px;box-shadow:0 24px 70px #001c3555}
.login-brand{display:flex;align-items:center;gap:14px}.login-brand img{width:64px;height:70px;object-fit:contain}.login-brand span{font-size:10px;letter-spacing:.14em;color:#64809a;font-weight:800}.login-brand h1{font-size:19px;line-height:1.2;margin:3px 0;color:#123b5d;font-weight:900}.login-brand small{color:#64809a;font-size:12px}
.login-intro{font-size:13px;color:#74869a;margin:22px 0}
.login-card .form-label{margin-bottom:6px}.input-icon{position:relative}.input-icon>i{position:absolute;left:13px;top:12px;color:#8a9caf}.input-icon .form-control{padding-left:38px;height:42px}.password-toggle{position:absolute;right:7px;top:5px;border:0;background:transparent;color:#8092a5;padding:6px}
.btn-login{background:linear-gradient(100deg,#087653,#0aa986);color:#fff;height:44px;font-weight:800}.btn-login:hover{color:#fff;filter:brightness(.96)}
.login-note{text-align:center;color:#7e91a4;font-size:11px;margin-top:20px}.login-footer{text-align:center;color:#e8f4fa;font-size:11px;margin-top:16px}

/* Dashboard follows the reference layout: banner, 6 KPI tiles, 3 analytics panels, 3 activity panels */
.dashboard-page{background:#f1f5f9;color:#123451;overflow-x:hidden}
.dashboard-page .page-content{padding:14px 16px 20px;max-width:none}
.dashboard-hero{height:102px;margin:0 0 15px;padding:12px 18px;border-radius:18px;background:linear-gradient(105deg,#056044 0%,#079b79 58%,#12b8a7 100%);box-shadow:0 5px 12px #00463224;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fff}
.hero-school{display:flex;align-items:center;gap:15px;min-width:0}.hero-school img{width:64px;height:64px;flex:0 0 64px;object-fit:contain;padding:5px;background:#fff;border-radius:15px}
.hero-school small{display:block;font-size:9px;color:#eafff7}.hero-school h1{font-size:18px;font-weight:850;color:#fff;line-height:1.15;margin:3px 0}.hero-school span{font-size:10px;color:#eafff7}
.hero-officials{background:#ffffff20;border:1px solid #ffffff20;border-radius:12px;padding:9px 12px;color:#fff;font-size:9px;font-weight:650;line-height:1.65;white-space:nowrap}
.hero-officials i{width:13px}
.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}
.stat-card{min-width:0;min-height:72px;height:auto;padding:11px 13px;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e8eef5;border-radius:14px;box-shadow:0 3px 12px rgba(18,52,81,.045);transition:transform .18s ease,box-shadow .18s ease}.stat-card:hover{transform:translateY(-2px);box-shadow:0 7px 18px rgba(18,52,81,.08)}.stat-card>div{min-width:0}.stat-card .stat-subtext{display:block;font-size:8px;line-height:1.25;color:#91a0b2;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-icon{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:11px;color:#fff;font-size:14px}
.icon-green{background:linear-gradient(135deg,#08a878,#087d59)}.icon-orange{background:linear-gradient(135deg,#ffad35,#f47b0b)}.icon-blue{background:linear-gradient(135deg,#5a83ff,#365ee8)}.icon-cyan{background:linear-gradient(135deg,#18c4c0,#079a9b)}.icon-purple{background:linear-gradient(135deg,#c45be8,#9636c7)}.icon-pink{background:linear-gradient(135deg,#fb5887,#df2862)}
.stat-card small{display:block;font-size:9px;color:#718096;line-height:1.25}.stat-card strong{display:block;font-size:15px;font-weight:850;color:#092b4a;line-height:1.3;margin-top:2px}.stat-card em{font-size:11px;color:#07815f;font-style:normal}
.dashboard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}
.dash-card{min-width:0;min-height:196px;background:#fff;border-radius:14px;padding:15px;box-shadow:0 1px 2px #1234510d;overflow:hidden}
.dash-card h2{font-size:11px;font-weight:850;color:#123451;margin:0 0 14px;display:flex;align-items:center;gap:7px}.dash-card h2 i{color:#079b78;font-size:11px}
.progress-chart{min-height:130px;display:flex;align-items:center;gap:16px}
.donut{width:90px;height:90px;flex:0 0 90px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#10b981 var(--percent),#e2e8f0 0);position:relative}
.donut:before{content:"";position:absolute;inset:11px;background:#fff;border-radius:50%}.donut span{position:relative;font-size:16px;font-weight:850;color:#123451}
.progress-legend{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.progress-legend label,.distribution label,.follow-stat label{display:flex;justify-content:space-between;gap:8px;font-size:9px;color:#526982;margin-bottom:4px}.progress-legend b,.distribution b,.follow-stat b{font-size:9px;color:#153a59;font-weight:850}
.bar{height:7px;background:#edf2f7;border-radius:20px;overflow:hidden}.bar i{display:block;height:100%;border-radius:20px}
.bar-gray{background:#94a3b8}.bar-orange{background:#f59e0b}.bar-green{background:#10b981}.bar-blue{background:#3b82f6}.bar-teal{background:#20c9a8}.bar-red{background:#ef4444}.bar-purple{background:#a855f7}
.distribution{margin-bottom:10px}.bottom-grid .dash-card{min-height:220px}
.compact-list{display:flex;flex-direction:column}
.schedule-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid #e6edf3;min-width:0}
.date-badge{width:36px;height:36px;flex:0 0 36px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#e9fbf4;border-radius:9px;color:#07815f}.date-badge b{font-size:10px;line-height:1}.date-badge small{font-size:8px}
.row-main{flex:1;min-width:0;display:flex;flex-direction:column}.row-main strong{font-size:10px;font-weight:650;color:#173b5c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-main small{font-size:9px;color:#7a8da3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.status-pill{font-size:8px;padding:3px 7px;border-radius:14px;background:#eef3f8;color:#64748b;white-space:nowrap}.status-pill.selesai{background:#e5f8ef;color:#07815f}.status-pill.proses{background:#fff4df;color:#a66b08}
.observation-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #e6edf3}.score-pill{background:#3b82f6;color:#fff;border-radius:14px;padding:4px 8px;font-size:8px;white-space:nowrap}
.ranking-row{display:flex;align-items:center;gap:7px;padding:5px 0}.rank-circle{width:17px;height:17px;flex:0 0 17px;display:grid;place-items:center;border-radius:50%;background:#ffbd24;color:white;font-size:9px;font-weight:850}.ranking-row strong{flex:1;min-width:0;font-size:9px;color:#173b5c;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ranking-row>b{font-size:10px;color:#092b4a}
.follow-heading{border-top:1px solid #e6edf3;margin-top:7px;padding-top:7px;font-size:9px;font-weight:800;color:#173b5c}.follow-stat{margin-top:7px}.follow-stat label{font-size:8px}.empty-state{padding:18px 5px;text-align:center;color:#94a3b8;font-size:10px}
@media(max-width:1100px){.sidebar{width:220px}.main-content{margin-left:220px}.page-content{padding:18px}.dashboard-page .page-content{padding:12px}.dash-card{padding:13px}.progress-chart{gap:10px}.donut{width:76px;height:76px;flex-basis:76px}.donut:before{inset:9px}}
@media(max-width:800px){.sidebar{transform:translateX(-100%);width:260px}.sidebar.open{transform:translateX(0)}.main-content{margin-left:0}.mobile-topbar{height:56px;display:flex;align-items:center;gap:12px;padding:0 15px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:900}.mobile-topbar strong{font-size:13px;flex:1}.mobile-topbar span{font-size:10px;color:var(--muted)}.sidebar-backdrop.show{display:block;position:fixed;inset:0;background:#0b223c66;z-index:1030}.dashboard-page .page-content{padding:12px}}
@media(max-width:650px){.dashboard-hero{height:auto;min-height:0;flex-direction:column;align-items:flex-start;padding:13px;gap:10px}.hero-school img{width:48px;height:48px;flex-basis:48px}.hero-school h1{font-size:15px}.hero-officials{width:100%;white-space:normal}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.stat-card{height:66px;padding:9px}.stat-card small{font-size:8px}.stat-card strong{font-size:13px}.stat-icon{width:34px;height:34px;flex-basis:34px}.dashboard-grid{grid-template-columns:1fr;gap:9px}.dash-card{min-height:unset;padding:14px}.charts-grid .dash-card{min-height:175px}.bottom-grid .dash-card{min-height:unset}.progress-chart{min-height:110px}.page-content{padding:13px}.login-card{padding:24px}}
@media(max-width:380px){.stats-grid{grid-template-columns:1fr}.stat-card{height:62px}}

.hero-officials{display:flex;align-items:center;gap:8px}.hero-officials>img{width:34px;height:34px;object-fit:cover;object-position:top;border-radius:50%;border:2px solid #ffffffaa}.official-lines{min-width:0}@media(max-width:650px){.hero-officials>img{width:30px;height:30px}}

.donut{background:none!important}.donut canvas{position:absolute;inset:0;width:100%!important;height:100%!important}.donut:before{z-index:1}.donut span{z-index:2}


/* === Tema Biru SI-SUPERVISI === */
:root{
 --green:#1769c2;
 --green-dark:#104f96;
 --green-light:#eaf3ff;
 --blue:#1769c2;
 --ink:#173451;
 --page:#f1f6fc;
 --line:#dce8f5;
}
body{background:#f1f6fc}
.sidebar{background:linear-gradient(180deg,#123f78 0%,#0b2f5c 100%);box-shadow:4px 0 20px #082b5018;color:#edf6ff}
.brand{border-bottom-color:#ffffff24}
.brand small{color:#c5dcf5}
.side-nav a,.logout-link{color:#dcecff}
.side-nav a:hover,.side-nav a.active{background:#1769c2;color:#fff}
.nav-label{color:#9fc4ed}
.signed-user small{color:#bfd5ed}
.logout-link{background:#ffffff12}
.content-card{border-color:#e1eaf4;box-shadow:0 4px 18px #123b650a}
h4,h5{color:#123b65}
.form-control:focus,.form-select:focus{border-color:#4b91dc;box-shadow:0 0 0 .2rem #1769c21c}
.btn-primary{background:#1769c2;border-color:#1769c2}
.btn-primary:hover{background:#1057a6;border-color:#1057a6}
.table thead th{background:#eaf2fb;color:#1d4772;border-bottom-color:#d5e3f2}
.table td{color:#34516b}
.login-page{background-color:#0d3767}
.login-shade{background:linear-gradient(120deg,rgba(7,30,66,.86),rgba(15,86,151,.52))}
.btn-login{background:linear-gradient(100deg,#1558a6,#2786df)}
.dashboard-page{background:#f1f6fc;color:#123b65}
.dashboard-hero{background:linear-gradient(105deg,#103d75 0%,#1769c2 58%,#3294e5 100%);box-shadow:0 5px 12px #0b3c7524}
.hero-school small,.hero-school span{color:#e8f3ff}
.hero-officials{background:#ffffff1c;border-color:#ffffff2b}
.icon-green{background:linear-gradient(135deg,#2388df,#1456a4)}
.icon-cyan{background:linear-gradient(135deg,#35b6e8,#1879bf)}
.dash-card h2 i{color:#247bc7}
.donut{background:conic-gradient(#287fd0 var(--percent),#e2e8f0 0)}
.date-badge{background:#e8f2ff;color:#1769c2}
.status-pill.selesai{background:#e7f1ff;color:#1769c2}
.status-pill.proses{background:#e6f4ff;color:#1769c2}
.score-pill{background:#287fd0}
.bar-green{background:#287fd0}
.bar-teal{background:#37a7dc}
.follow-heading{color:#173f68}
@media(max-width:800px){.mobile-topbar{background:#fff;border-bottom-color:#dce8f5}}

/* Ringkasan upload RPP pada dashboard */
.upload-dashboard-card{background:#fff;border-radius:14px;padding:16px 18px;margin:0 0 12px;box-shadow:0 1px 2px #1234510d;min-width:0}
.upload-dashboard-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.upload-dashboard-head h2{font-size:12px;font-weight:850;color:#123b65;margin:0 0 4px;display:flex;align-items:center;gap:7px}
.upload-dashboard-head h2 i{color:#247bc7}
.upload-dashboard-head p{font-size:9px;color:#718096;margin:0}
.upload-dashboard-body{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:center}
.upload-dashboard-metric{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 12px;border:1px solid #e6edf5;border-radius:11px;background:#fbfdff}
.upload-metric-icon{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;color:#fff;font-size:13px}
.upload-metric-icon.uploaded{background:linear-gradient(135deg,#22b879,#12875b)}.upload-metric-icon.missing{background:linear-gradient(135deg,#ffb347,#ed8515)}.upload-metric-icon.documents{background:linear-gradient(135deg,#4d8fe4,#2765bd)}.upload-metric-icon.unlinked{background:linear-gradient(135deg,#8b9bad,#64748b)}
.upload-dashboard-metric small{display:block;font-size:9px;color:#718096}.upload-dashboard-metric strong{display:block;font-size:15px;color:#123b65;font-weight:850}
.upload-dashboard-progress{grid-column:1/-1;padding:2px 2px 0}
.upload-progress-label{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#526982;margin-bottom:6px}.upload-progress-label strong{font-size:12px;color:#1769c2}
.upload-progress-track{height:9px;background:#eaf0f7;border-radius:20px;overflow:hidden}.upload-progress-track span{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,#2388df,#20b879);min-width:0}
.upload-dashboard-progress>small{display:block;color:#8292a6;font-size:9px;margin-top:6px}
@media(max-width:650px){.upload-dashboard-card{padding:13px}.upload-dashboard-head{align-items:flex-start;flex-direction:column}.upload-dashboard-body{grid-template-columns:1fr 1fr;gap:8px}.upload-dashboard-metric{padding:9px}.upload-dashboard-progress{grid-column:1/-1}}


/* Rekap upload RPP - selaras dengan kartu dashboard */
.dashboard-page .upload-dashboard-card{
 background:#fff;border:1px solid #e4edf6;border-radius:15px;padding:15px 16px;margin:0 0 12px;
 box-shadow:0 2px 10px rgba(18,59,101,.045);min-width:0;
}
.dashboard-page .upload-dashboard-head{display:flex;align-items:center;justify-content:flex-start;margin:0 0 11px;padding:0}
.dashboard-page .upload-dashboard-head h2{font-size:11px;line-height:1.35;font-weight:850;color:#123b65;margin:0 0 3px;gap:6px}
.dashboard-page .upload-dashboard-head h2 i{font-size:11px;color:#287fd0}
.dashboard-page .upload-dashboard-head p{font-size:9px;line-height:1.4;color:#8292a6;margin:0}
.dashboard-page .upload-dashboard-body{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;align-items:stretch}
.dashboard-page .upload-dashboard-metric{display:flex;align-items:center;gap:9px;min-width:0;padding:10px 11px;border:1px solid #e8eef5;border-radius:10px;background:#fbfdff}
.dashboard-page .upload-metric-icon{width:32px;height:32px;flex:0 0 32px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:12px}
.dashboard-page .upload-metric-icon.uploaded{background:linear-gradient(135deg,#27a978,#16865f)}
.dashboard-page .upload-metric-icon.missing{background:linear-gradient(135deg,#ffb347,#ed8515)}
.dashboard-page .upload-metric-icon.documents{background:linear-gradient(135deg,#4d8fe4,#2765bd)}
.dashboard-page .upload-metric-icon.unlinked{background:linear-gradient(135deg,#8b9bad,#64748b)}
.dashboard-page .upload-dashboard-metric small{display:block;font-size:8px;line-height:1.35;color:#7b8da3;margin-bottom:2px}
.dashboard-page .upload-dashboard-metric strong{display:block;font-size:13px;line-height:1.25;color:#123b65;font-weight:850}
.dashboard-page .upload-dashboard-progress{grid-column:1/-1;padding:2px 1px 0}
.dashboard-page .upload-progress-label{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#60758d;margin-bottom:5px}
.dashboard-page .upload-progress-label strong{font-size:11px;color:#1769c2}
.dashboard-page .upload-progress-track{height:8px;background:#eaf0f7;border-radius:20px;overflow:hidden}
.dashboard-page .upload-progress-track span{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,#2388df,#20b879);transition:width .3s ease}
.dashboard-page .upload-dashboard-progress>small{display:block;color:#8292a6;font-size:8px;line-height:1.4;margin-top:5px}
@media(max-width:650px){.dashboard-page .upload-dashboard-card{padding:12px}.dashboard-page .upload-dashboard-body{grid-template-columns:1fr 1fr;gap:7px}.dashboard-page .upload-dashboard-metric{padding:8px}.dashboard-page .upload-dashboard-metric strong{font-size:12px}.dashboard-page .upload-dashboard-progress{grid-column:1/-1}}


/* Polesan visual konsisten: navy dan soft blue */
:root{--green:#1769c2;--green-dark:#123f70;--green-light:#edf5ff;--blue:#1769c2;--page:#f2f6fc;--ink:#173451;--line:#e3ebf5}
.sidebar{background:linear-gradient(180deg,#17477e 0%,#10345f 100%);box-shadow:4px 0 20px rgba(13,48,85,.10)}
.side-nav a:hover,.side-nav a.active{background:#1d70c9;color:#fff}
.nav-label{color:#a8c8eb}
.brand{border-bottom-color:rgba(255,255,255,.12)}
.content-card,.dash-card,.stat-card{border-color:#e3ebf5;box-shadow:0 5px 18px rgba(20,55,90,.045)}
.btn-primary{background:#1769c2;border-color:#1769c2}.btn-primary:hover{background:#1056a5;border-color:#1056a5}
.form-control:focus,.form-select:focus{border-color:#4c91d8;box-shadow:0 0 0 .2rem rgba(37,99,235,.12)}
.dashboard-hero{background:linear-gradient(110deg,#123f70 0%,#1769b6 58%,#3198df 100%);box-shadow:0 6px 18px rgba(18,63,112,.15)}
.dash-card h2 i{color:#267ac7}
.academic-context{display:flex;align-items:center;gap:12px;padding:11px 14px;margin:0 0 16px;border:1px solid #dce9f8;border-radius:13px;background:linear-gradient(100deg,#fff,#f5f9ff);box-shadow:0 3px 12px rgba(25,74,125,.04)}
.academic-context-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#e6f1ff;color:#1769c2}
.academic-context div{display:flex;flex-direction:column;line-height:1.3}.academic-context div small{font-size:9px;letter-spacing:.08em;color:#8093aa;font-weight:800}.academic-context div strong{font-size:12px;color:#173f68}.academic-semester-badge{margin-left:auto;padding:6px 11px;border-radius:999px;background:#e8f2ff;color:#145da9;font-size:10px;font-weight:800}
.settings-page{max-width:1120px}.settings-heading{display:flex;align-items:center;justify-content:space-between;margin:2px 0 18px}.settings-heading .eyebrow{font-size:9px;letter-spacing:.12em;font-weight:850;color:#4380bd}.settings-heading h4{margin-top:4px}.settings-icon{width:48px;height:48px;border-radius:14px;background:#e7f1ff;color:#1769c2;display:grid;place-items:center;font-size:19px}
.settings-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}.settings-card{padding:20px}.settings-card-title{display:flex;align-items:center;gap:11px;margin-bottom:18px}.settings-card-title>span{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#eaf3ff;color:#1769c2}.settings-card-title h5{font-size:14px;margin:0 0 3px}.settings-card-title small{font-size:10px;color:#8292a6}.academic-card{background:linear-gradient(160deg,#fff 0%,#f8fbff 100%)}.semester-options{display:grid;gap:9px}.semester-option{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #dfe8f2;border-radius:11px;background:#fff;cursor:pointer;transition:.18s}.semester-option input{position:absolute;opacity:0;pointer-events:none}.semester-option .semester-number{width:34px;height:34px;border-radius:9px;background:#eef4fb;color:#58728f;display:grid;place-items:center;font-size:11px;font-weight:850}.semester-option strong,.semester-option small{display:block}.semester-option strong{font-size:12px;color:#244765}.semester-option small{font-size:9px;color:#8798aa}.semester-option>i{margin-left:auto;color:transparent}.semester-option.selected{border-color:#4d91d8;background:#f2f8ff;box-shadow:0 0 0 2px rgba(37,99,235,.07)}.semester-option.selected .semester-number{background:#1769c2;color:#fff}.semester-option.selected>i{color:#1769c2}.academic-note{font-size:10px;line-height:1.5;color:#6f8298;background:#eef5fd;border-radius:9px;padding:10px;margin-top:14px}.academic-note i{color:#1769c2;margin-right:5px}.settings-actions{grid-column:1/-1;display:flex;justify-content:flex-end}.visual-card{padding:18px;margin-top:16px}.visual-card img{width:58px;height:58px;object-fit:contain;padding:5px;border:1px solid #e4ebf3;border-radius:12px;background:#fff}
.master-guru-layout .table-responsive{border:1px solid #e7edf4;border-radius:11px}.master-guru-layout .table thead th{position:sticky;top:0;z-index:1}.master-guru-layout td:last-child{min-width:150px}.master-guru-layout td:last-child .btn{margin:2px}.password-reset-form{min-width:220px;position:absolute;z-index:20;right:12px}.master-guru-layout details{position:relative}
@media(max-width:900px){.settings-grid{grid-template-columns:1fr}.settings-actions{grid-column:auto}.settings-heading{align-items:flex-start}.master-guru-layout td:last-child{min-width:130px}}
@media(max-width:650px){.academic-context{padding:9px 10px}.academic-semester-badge{font-size:9px;padding:5px 8px}.settings-card{padding:15px}.settings-actions .btn{width:100%}.settings-heading{gap:10px}.settings-icon{flex:0 0 42px;width:42px;height:42px}}

/* Periode akademik: pengaturan terpusat dan ringkasan yang ringkas. */
.active-period-preview{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid #d8e7f7;border-radius:13px;background:linear-gradient(110deg,#edf5ff,#fff)}
.active-period-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#1769c2;color:#fff;font-size:16px;flex:0 0 38px}
.active-period-preview small{display:block;font-size:9px;letter-spacing:.09em;font-weight:800;color:#7890aa;margin-bottom:3px}
.active-period-preview strong{display:block;color:#153f69;font-size:14px}
@media(max-width:760px){.settings-grid{grid-template-columns:1fr}.active-period-preview strong{font-size:12px}}