/* =====================================================================
   AHE Sambungrejo — LMS (panel admin/guru/siswa) styles
   ===================================================================== */
:root{
  --blue:#2477d4; --blue-d:#1b4572; --blue-l:#eaf3fd;
  --lime:#8dc63f; --lime-d:#6aa524; --lime-l:#eef8db;
  --pink:#ec1e84; --pink-d:#c4156c; --pink-l:#ffe9f4;
  --orange:#f7941d; --orange-d:#d97908; --orange-l:#fff0db;
  --purple:#7a2fa8; --ink:#1f2d49; --muted:#637292; --line:#e7edf6;
  --soft:#f4f8fd; --white:#fff;
  --disp:'Baloo 2',system-ui,sans-serif; --body:'Nunito',system-ui,sans-serif;
  --r:16px; --pill:999px; --sh-sm:0 4px 14px rgba(27,69,114,.07); --sh:0 14px 36px rgba(27,69,114,.10);
}
*{box-sizing:border-box}
body{margin:0; font-family:var(--body); color:var(--ink); background:var(--soft); line-height:1.6}
h1,h2,h3,h4{font-family:var(--disp); color:var(--blue-d); margin:0; line-height:1.15}
a{color:inherit; text-decoration:none}
table{border-collapse:collapse}

/* layout */
.lms{display:flex; min-height:100vh}
.side{width:248px; flex-shrink:0; background:linear-gradient(180deg,var(--blue-d),#143a61); color:#cdddf0;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh}
.side-brand{display:flex; align-items:center; gap:10px; padding:20px 18px; border-bottom:1px solid rgba(255,255,255,.1)}
.ls-logo{height:42px; width:auto; background:#fff; padding:5px 8px; border-radius:10px}
.ls-badge{font-family:var(--disp); font-weight:800; font-style:italic; color:#fff; font-size:1.25rem;
  background:linear-gradient(140deg,#8e2da8,#e6177e); border:2px solid var(--orange); padding:4px 14px; border-radius:var(--pill)}
.ls-name{font-family:var(--disp); font-weight:800; color:#fff; font-size:.95rem; line-height:1.05}
.menu{padding:14px 12px; flex:1; overflow:auto}
.menu .lbl{font-size:.7rem; letter-spacing:1.5px; text-transform:uppercase; color:#7ea3cc; padding:14px 12px 6px}
.menu a{display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:12px; font-weight:700;
  font-size:.95rem; margin-bottom:3px; transition:background .15s,color .15s}
.menu a:hover{background:rgba(255,255,255,.08); color:#fff}
.menu a.on{background:linear-gradient(135deg,var(--blue),#3a91ee); color:#fff; box-shadow:0 6px 16px rgba(36,119,212,.4)}
.menu .soon{display:flex; align-items:center; gap:11px; padding:10px 13px; color:#6f93bd; font-size:.92rem; cursor:default}
.menu .soon .tag{margin-left:auto; font-size:.62rem; background:rgba(255,255,255,.12); padding:2px 8px; border-radius:var(--pill); letter-spacing:.5px}
/* ikon & label seragam untuk semua baris menu */
.menu a .mi,.menu summary .mi{width:22px; text-align:center; flex-shrink:0; font-size:1.05rem; line-height:1}
.menu a .ml,.menu summary .ml{flex:1; min-width:0}

/* submenu bersarang (collapsible) */
.menu details.menu-group{margin-bottom:3px}
.menu details.menu-group>summary{display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:12px;
  font-weight:700; font-size:.95rem; color:#cdddf0; cursor:pointer;
  list-style:none; -webkit-user-select:none; user-select:none; transition:background .15s,color .15s}
.menu details.menu-group>summary::-webkit-details-marker{display:none}
.menu details.menu-group>summary::marker{content:""}
.menu details.menu-group>summary .chev{flex-shrink:0; font-size:.72rem; opacity:.55; transition:transform .2s}
.menu details.menu-group[open]>summary .chev{transform:rotate(90deg); opacity:.85}
.menu details.menu-group>summary:hover{background:rgba(255,255,255,.08); color:#fff}
/* indentasi tingkat dalam */
.menu .menu-sub{margin:2px 0 6px 16px; padding-left:10px; border-left:1.5px solid rgba(255,255,255,.14)}
.menu .menu-sub a{font-size:.88rem; padding:8px 12px; font-weight:600; color:#b9d0e8}
.menu .menu-sub a:hover{color:#fff}
.menu .menu-sub a.on{background:linear-gradient(135deg,var(--blue),#3a91ee); color:#fff}
.menu .menu-sub details.menu-group>summary{font-size:.9rem; padding:8px 12px; color:#b9d0e8}
.menu .menu-sub .menu-sub a{font-size:.84rem; padding:6px 12px}

.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{background:#fff; border-bottom:1px solid var(--line); padding:14px 26px; display:flex; align-items:center;
  justify-content:space-between; gap:14px; position:sticky; top:0; z-index:10}
.topbar h1{font-size:1.35rem}
.user{display:flex; align-items:center; gap:12px}
.user .who{text-align:right; line-height:1.1}
.user .who b{font-family:var(--disp)}
.user .who small{color:var(--muted)}
.role-chip{font-family:var(--disp); font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:var(--pill);
  background:var(--blue-l); color:var(--blue); text-transform:uppercase; letter-spacing:.5px}
.avatar{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-size:1.2rem;
  background:linear-gradient(135deg,var(--lime),#a6d957); color:#fff; font-family:var(--disp); font-weight:800}
.content{padding:26px; width:100%; max-width:100%}

/* hamburger (mobile) */
.side-toggle{display:none; background:none; border:0; font-size:1.5rem; cursor:pointer; color:var(--blue-d)}

/* stat cards */
.grid{display:grid; gap:18px}
.grid-4{grid-template-columns:repeat(4,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)}
.stat{background:#fff; border-radius:var(--r); padding:20px; box-shadow:var(--sh-sm); border:1px solid var(--line); display:flex; gap:14px; align-items:center}
.stat .ic{width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-size:1.5rem; flex-shrink:0}
.stat .n{font-family:var(--disp); font-size:1.8rem; font-weight:800; color:var(--blue-d); line-height:1}
.stat .t{color:var(--muted); font-size:.88rem; font-weight:600}
.ic-blue{background:var(--blue-l)} .ic-lime{background:var(--lime-l)} .ic-pink{background:var(--pink-l)} .ic-orange{background:var(--orange-l)}

/* card */
.card{background:#fff; border-radius:var(--r); box-shadow:var(--sh-sm); border:1px solid var(--line); padding:22px; margin-bottom:20px}
.card-h{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.card-h h2{font-size:1.2rem}

/* table */
.ltable{width:100%; font-size:.93rem}
.ltable th,.ltable td{padding:11px 12px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle}
.ltable th{font-family:var(--disp); color:var(--blue-d); background:var(--soft); font-size:.85rem}
.ltable tr:hover td{background:var(--soft)}
.ltable .actions{display:flex; gap:6px; white-space:nowrap}
.table-scroll{overflow:auto}
/* tabel header beku + scroll */
.scroll-box{max-height:340px; overflow:auto; border:1px solid var(--line); border-radius:12px}
.scroll-box table{margin:0}
.scroll-box thead th{position:sticky; top:0; z-index:2; box-shadow:0 1px 0 var(--line)}
.dash-filter{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.dash-filter select,.dash-filter input{padding:7px 10px; border:2px solid var(--line); border-radius:9px; font-family:var(--body)}
/* kolom bisa diurut */
th.sortable{cursor:pointer; user-select:none; white-space:nowrap}
th.sortable:hover{color:var(--blue)}
th.sortable::after{content:" ⇅"; opacity:.4; font-size:.8em}
th.sortable[data-asc=true]::after{content:" ▲"; opacity:.8}
th.sortable[data-asc=false]::after{content:" ▼"; opacity:.8}
/* freeze kolom pertama pada grid lebar (rekap/kehadiran) */
.freeze-first th:first-child,.freeze-first td:first-child{position:sticky; left:0; z-index:1; background:#fff}
.freeze-first thead th:first-child{z-index:3}
/* kolom nama siswa pada rekap pembayaran tidak dipotong/wrap */
.rekap-table td:first-child{white-space:nowrap}
/* baris pencarian di bawah header (ikut sticky; top diatur via JS) */
.search-row th{background:var(--soft); padding:6px 8px}
.search-row .rekap-q{width:100%; min-width:70px; padding:5px 8px; border:1.5px solid var(--line);
  border-radius:8px; font-family:var(--body); font-size:.8rem; font-weight:400}
.search-row .rekap-q:focus{outline:none; border-color:var(--blue)}

/* matriks nilai: header beku + dua kolom kiri beku + skor */
.nilai-table{font-size:.88rem}
.nilai-table th,.nilai-table td{white-space:nowrap; text-align:center}
.nilai-table td.tl,.nilai-table th.tl{text-align:left}
.nilai-table .frz1,.nilai-table .frz2{position:sticky; background:#fff}
.nilai-table td.frz1,.nilai-table td.frz2{z-index:1}
.nilai-table thead .frz1,.nilai-table thead .frz2{z-index:5; background:var(--soft)}
.nilai-table .frz1{left:0; width:42px; min-width:42px}
.nilai-table .frz2{left:42px; min-width:160px}
.nilai-table tr:hover td.frz1,.nilai-table tr:hover td.frz2{background:var(--soft)}
.nilai-table .to-h{font-size:.74rem; line-height:1.1}
.nilai-table .to-h small{display:block; color:var(--muted); font-weight:400; font-size:.66rem}
.sk-cell{font-weight:700}
.sk-0{color:var(--pink-d)} .sk-na{color:var(--muted); font-weight:400}
.sk-hi{color:var(--lime-d)} .sk-mid{color:var(--orange-d)}

/* tabs */
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.tab-btn{font-family:var(--disp); font-weight:700; font-size:.92rem; cursor:pointer; border:2px solid var(--line);
  background:#fff; color:var(--muted); padding:9px 18px; border-radius:var(--pill); transition:all .15s}
.tab-btn:hover{border-color:var(--blue); color:var(--blue)}
.tab-btn.on{background:linear-gradient(135deg,var(--blue),#3a91ee); color:#fff; border-color:transparent; box-shadow:0 6px 16px rgba(36,119,212,.3)}

/* layout halaman jadwal: konten utama (kiri) + sidebar pengaturan (kanan) */
.jdw-layout{display:grid; grid-template-columns:minmax(0,1fr) 12px var(--jdw-right-w,330px); gap:8px; align-items:start}
.jdw-left{min-width:0}
.jdw-splitter{align-self:stretch; min-height:120px; cursor:col-resize; position:relative; touch-action:none}
.jdw-splitter::before{content:""; position:absolute; left:50%; top:0; bottom:0; width:4px; transform:translateX(-50%); background:var(--line); border-radius:4px; transition:background .12s}
.jdw-splitter:hover::before,.jdw-splitter.dragging::before{background:var(--blue-d); width:6px}
.jdw-right{position:sticky; top:82px; align-self:start; max-height:calc(100vh - 98px); overflow:auto;
  display:flex; flex-direction:column; gap:14px; padding:14px; background:var(--soft);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-sm)}
.jdw-right::before{content:"⚙️ Pengaturan Jadwal"; font-family:var(--disp); font-weight:800; color:var(--blue-d); font-size:.95rem}
.jdw-right .card, .jdw-right details.card{margin:0; box-shadow:none; padding:14px}
@media (max-width:1100px){
  .jdw-layout{grid-template-columns:1fr}
  .jdw-splitter{display:none}
  .jdw-right{position:static; max-height:none}
}

/* tanggal bayar di bawah cek SPP */
.pay-date{display:block; font-size:.66rem; color:var(--lime-d); font-weight:700; margin-top:3px; line-height:1.1}
.cek-cell{text-align:center; white-space:nowrap}

/* tombol cetak kwitansi PDF di sel SPP yang sudah dicentang */
.kw-pdf{display:inline-block; margin-top:4px; font-family:var(--disp); font-weight:700; font-size:.62rem; letter-spacing:.04em;
  color:#fff; background:var(--blue); border-radius:6px; padding:2px 8px; text-decoration:none; cursor:pointer; line-height:1.4}
.kw-pdf:hover{background:var(--blue-d)}

/* buttons */
.lbtn{display:inline-flex; align-items:center; gap:7px; font-family:var(--disp); font-weight:700; font-size:.9rem;
  border:0; cursor:pointer; padding:9px 16px; border-radius:var(--pill); transition:transform .12s,box-shadow .2s; white-space:nowrap}
.lbtn:hover{transform:translateY(-1px)}
.lbtn-pri{background:linear-gradient(135deg,var(--blue),#3a91ee); color:#fff; box-shadow:0 8px 18px rgba(36,119,212,.3)}
.lbtn-sm{padding:6px 12px; font-size:.82rem}
.lbtn-ghost{background:var(--blue-l); color:var(--blue)}
.lbtn-warn{background:var(--orange-l); color:var(--orange-d)}
.lbtn-danger{background:var(--pink-l); color:var(--pink-d)}
.lbtn-muted{background:#eef1f6; color:var(--muted)}

/* kode ujian / monospace chip */
.kode{font-family:ui-monospace,'Cascadia Code',Consolas,monospace; font-size:.8rem; font-weight:700; letter-spacing:.5px;
  background:var(--blue-l); color:var(--blue-d); padding:3px 8px; border-radius:7px; white-space:nowrap}

/* badges */
.badge{display:inline-block; font-family:var(--disp); font-size:.74rem; font-weight:700; padding:3px 10px; border-radius:var(--pill)}
.b-blue{background:var(--blue-l); color:var(--blue)} .b-lime{background:var(--lime-l); color:var(--lime-d)}
.b-pink{background:var(--pink-l); color:var(--pink-d)} .b-orange{background:var(--orange-l); color:var(--orange-d)}
.b-muted{background:#eef1f6; color:var(--muted)}

/* forms */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{display:flex; flex-direction:column; gap:6px}
.field.full{grid-column:1 / -1}
.field label{font-family:var(--disp); font-weight:600; font-size:.9rem; color:var(--blue-d)}
.field input,.field select,.field textarea{font-family:var(--body); font-size:.95rem; padding:10px 12px;
  border:2px solid var(--line); border-radius:11px; background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:0; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-l)}
.req{color:var(--pink)}

/* alert */
.alert{border-radius:var(--r); padding:14px 18px; margin-bottom:18px; font-weight:600}
.alert-ok{background:var(--lime-l); border:1.5px solid var(--lime); color:var(--lime-d)}
.alert-err{background:var(--pink-l); border:1.5px solid var(--pink); color:var(--pink-d)}
.alert-info{background:var(--blue-l); border:1.5px solid var(--blue); color:var(--blue)}

.profile-row{display:flex; gap:12px; padding:9px 0; border-bottom:1px dashed var(--line)}
.profile-row:last-child{border-bottom:0}
.profile-row .k{width:160px; color:var(--muted); font-weight:600; flex-shrink:0}
.profile-row .v{font-weight:700; color:var(--ink)}
.empty{padding:30px; text-align:center; color:var(--muted)}
.muted{color:var(--muted)}

/* auth */
.auth-wrap{min-height:100vh; display:grid; place-items:center; padding:24px;
  background:linear-gradient(135deg,var(--blue-d),#143a61)}
.auth{background:#fff; border-radius:24px; box-shadow:0 30px 70px rgba(0,0,0,.3); padding:36px; width:100%; max-width:400px}
.auth .brand-c{display:flex; justify-content:center; margin-bottom:8px}
.auth h1{text-align:center; font-size:1.5rem; margin-bottom:4px}
.auth p.sub{text-align:center; color:var(--muted); margin-bottom:20px}
.auth .field{margin-bottom:14px}
.demo{margin-top:18px; background:var(--soft); border-radius:12px; padding:14px; font-size:.82rem; color:var(--muted)}
.demo b{color:var(--blue-d)} .demo code{background:#fff; padding:1px 6px; border-radius:6px; border:1px solid var(--line)}

/* jadwal mengajar pekan ini (dashboard guru) */
.week-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px}
.week-day{background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:10px}
.week-day.is-today{border-color:var(--blue); background:var(--blue-l)}
.week-day-h{font-family:var(--disp); font-weight:700; color:var(--blue-d); font-size:.84rem; margin-bottom:8px; display:flex; align-items:center; gap:5px; flex-wrap:wrap}
.week-day-h span{color:var(--muted); font-weight:800}
.week-sesi{background:#fff; border:1px solid var(--line); border-radius:9px; padding:7px 9px; margin-bottom:6px; font-size:.84rem}
.week-sesi:last-child{margin-bottom:0}

/* presensi: kartu siswa + tombol toggle hadir (mobile friendly) */
.presensi-list{display:flex; flex-direction:column; gap:8px}
.presensi-row{display:flex; align-items:center; gap:12px; padding:11px 14px; border:1.5px solid var(--line); border-radius:12px; background:#fff}
.presensi-row .nm{flex:1; min-width:0; font-weight:700}
.presensi-row .nm small{display:block; color:var(--muted); font-weight:600; font-size:.78rem}
.att-toggle{display:inline-flex; border:2px solid var(--line); border-radius:var(--pill); overflow:hidden; flex-shrink:0}
.att-toggle input{display:none}
.att-toggle label{font-family:var(--disp); font-weight:700; font-size:.82rem; padding:7px 14px; cursor:pointer; color:var(--muted); user-select:none}
.att-toggle input:checked + label.opt-h{background:var(--lime); color:#fff}
.att-toggle input:checked + label.opt-a{background:var(--pink); color:#fff}
.foto-prev{max-width:100%; border-radius:12px; border:2px solid var(--line); margin-top:10px; display:block}
.foto-thumb{width:56px; height:56px; object-fit:cover; border-radius:9px; border:1px solid var(--line); cursor:zoom-in; transition:all .15s}
.foto-thumb.zoom{width:auto; height:auto; max-width:min(320px,80vw); object-fit:contain; cursor:zoom-out}

@media (max-width:560px){
  .week-grid{grid-template-columns:1fr}
  .week-day{display:flex; flex-wrap:wrap; gap:8px}
  .week-day-h{width:100%; margin-bottom:0}
  .week-sesi{flex:1 1 46%; margin-bottom:0}
}

/* ===== Mode kerja try out (full screen) ===== */
.exam-fs{position:fixed; inset:0; z-index:200; background:var(--soft); display:flex; flex-direction:column}
.exam-top{display:flex; align-items:center; gap:10px; padding:10px 14px; background:#fff; border-bottom:1px solid var(--line); flex-shrink:0}
.exam-top .mp{flex:1; min-width:0; font-family:var(--disp); font-weight:800; color:var(--blue-d); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.exam-timer{font-family:var(--disp); font-weight:800; font-size:1.1rem; color:var(--pink-d); background:var(--pink-l); padding:5px 12px; border-radius:var(--pill); white-space:nowrap}
.exam-timer.warn{background:var(--pink); color:#fff}
.exam-body{flex:1; overflow:auto; padding:18px 16px; max-width:780px; width:100%; margin:0 auto; align-self:center}
.exam-q{display:none}
.exam-q.on{display:block}
.exam-qnum{font-family:var(--disp); font-weight:800; color:var(--blue); margin-bottom:10px}
.exam-pertanyaan{font-weight:700; font-size:1.06rem; margin-bottom:16px; line-height:1.5}
.exam-fs .opt{display:flex; align-items:center; gap:10px; padding:13px 15px; border:2px solid var(--line); border-radius:12px; margin-bottom:10px; cursor:pointer; font-weight:600; background:#fff}
.exam-fs .opt input{width:auto; flex-shrink:0}
.exam-fs .opt:has(input:checked){border-color:var(--blue); background:var(--blue-l)}
.exam-nav{display:flex; align-items:center; gap:10px; padding:11px 14px; background:#fff; border-top:1px solid var(--line); flex-shrink:0; max-width:780px; width:100%; margin:0 auto}
.exam-nav .lbtn{flex-shrink:0}
.exam-nav .lbtn:disabled{opacity:.4; cursor:default}
.exam-nav .sp{flex:1; text-align:center; font-weight:700; color:var(--muted)}
.exam-drawer{position:fixed; top:0; right:0; bottom:0; width:300px; max-width:85vw; background:#fff; box-shadow:var(--sh); transform:translateX(100%); transition:transform .25s; z-index:210; display:flex; flex-direction:column; padding:18px; overflow:auto}
.exam-drawer.open{transform:none}
.exam-fs.drawer-open::after{content:""; position:fixed; inset:0; background:rgba(15,30,55,.45); z-index:205}
.qgrid{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:12px 0}
.qgrid button{font-family:var(--disp); font-weight:700; border:2px solid var(--line); background:#fff; border-radius:9px; padding:11px 0; cursor:pointer; color:var(--ink)}
.qgrid button.answered{background:var(--lime-l); border-color:var(--lime); color:var(--lime-d)}
.qgrid button.current{outline:3px solid var(--blue); outline-offset:-1px}

@media (max-width:860px){
  .side{position:fixed; left:0; top:0; z-index:60; transform:translateX(-100%); transition:transform .25s; box-shadow:var(--sh)}
  .lms.open .side{transform:none}
  /* lapisan gelap saat menu terbuka (ketuk di luar untuk menutup) */
  .lms.open::after{content:""; position:fixed; inset:0; background:rgba(15,30,55,.45); z-index:55}
  .side-toggle{display:block}
  .form-grid{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr}
}

/* ponsel */
@media (max-width:560px){
  .content{padding:14px}
  .topbar{padding:10px 14px; gap:8px}
  .topbar h1{font-size:1.1rem}
  .user{gap:8px}
  .user .who{display:none}                 /* sembunyikan nama/role, sisakan avatar + Keluar */
  .avatar{width:36px; height:36px; font-size:1rem}
  .card{padding:15px; border-radius:13px; margin-bottom:14px}
  .card-h h2{font-size:1.05rem}
  .grid{gap:12px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .stat{padding:14px; gap:11px}
  .stat .ic{width:44px; height:44px; font-size:1.25rem}
  .stat .n{font-size:1.45rem}
  .stat .t{font-size:.8rem}
  /* input 16px agar Safari iOS tidak auto-zoom saat fokus */
  .field input,.field select,.field textarea{font-size:16px; padding:9px 11px}
  .dash-filter{width:100%}
  .dash-filter input,.dash-filter select{flex:1 1 120px; min-width:0}
  .tabs{gap:6px}
  .tab-btn{padding:8px 13px; font-size:.85rem}
  .lbtn{padding:8px 13px}
  .ltable{font-size:.86rem}
  .ltable th,.ltable td{padding:9px 9px}
  .profile-row{flex-direction:column; gap:2px}
  .profile-row .k{width:auto}
  .auth{padding:24px}
}

/* =====================================================================
   Penyempurnaan responsif — HP & iPad (tablet)
   ===================================================================== */
/* Scroll tabel mulus di iOS + scrollbar tipis (tak menutupi konten). */
.scroll-box, .table-scroll{ -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:#cfdcec transparent }
.scroll-box::-webkit-scrollbar, .table-scroll::-webkit-scrollbar{ width:8px; height:8px }
.scroll-box::-webkit-scrollbar-thumb, .table-scroll::-webkit-scrollbar-thumb{ background:#cfdcec; border-radius:8px }
/* Gambar & media tak melampaui kontainer. */
img{ max-width:100%; height:auto }

/* ---- Tablet / iPad (≤1024px) ---- */
@media (max-width:1024px){
  .content{ padding:20px }
  .grid-4{ grid-template-columns:repeat(2,1fr) }   /* 4 kartu → 2 baris rapi */
  .week-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) } /* jadwal pekan tak gepeng */
}

/* ---- HP (≤560px): rapikan topbar, input, & tombol ---- */
@media (max-width:560px){
  /* topbar tidak meluber: judul memendek dengan elipsis, tombol tetap muat */
  .topbar{ flex-wrap:nowrap }
  .topbar h1{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1.05rem }
  .user{ flex-shrink:0 }
  /* input lebar-tetap (inline) di FORM dipaksa penuh agar tak melebihi layar */
  .form-grid .field input, .form-grid .field select, .form-grid .field textarea{ width:100% !important }
  /* grup tombol aksi & header kartu membungkus */
  .actions{ flex-wrap:wrap }
  .card-h{ gap:8px }
  .week-grid{ grid-template-columns:1fr }
  /* sembunyikan tombol Password jadi ikon saja sudah; kecilkan jeda tombol */
  .topbar .lbtn-sm{ padding:6px 10px }
}