/* =====================================================================
   SIPAKAR SKARISA — tema tampilan
   Hijau sekolah, putih, abu-abu lembut. Diutamakan untuk HP guru.
   ===================================================================== */
@font-face { font-family: "Jakarta"; font-weight: 400; font-display: swap; src: url("../vendor/fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jakarta"; font-weight: 500; font-display: swap; src: url("../vendor/fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Jakarta"; font-weight: 600; font-display: swap; src: url("../vendor/fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Jakarta"; font-weight: 700; font-display: swap; src: url("../vendor/fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Jakarta"; font-weight: 800; font-display: swap; src: url("../vendor/fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); }

:root {
  --sk-green-900: #0f3d22;
  --sk-green-800: #14532d;
  --sk-green-700: #166534;
  --sk-green-600: #15803d;
  --sk-green-100: #dcfce7;
  --sk-green-50:  #f0fdf4;
  --sk-surface:   #ffffff;
  --sk-bg:        #f3f5f4;
  --sk-line:      #dde4df;
  --sk-ink:       #1d2a22;
  --sk-muted:     #5d6b63;
  --sk-amber:     #b45309;
  --sk-red:       #b91c1c;
  --sk-radius:    14px;
  --sk-radius-sm: 9px;

  --bs-font-sans-serif: "Jakarta", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-font-size: .95rem;
  --bs-body-color: var(--sk-ink);
  --bs-body-bg: var(--sk-bg);
  --bs-border-color: var(--sk-line);
  --bs-success: #166534;
  --bs-success-rgb: 22, 101, 52;
  --bs-primary: #1d4ed8;
  --bs-primary-rgb: 29, 78, 216;
  --bs-link-color: #166534;
  --bs-link-color-rgb: 22, 101, 52;
  --bs-link-hover-color: #0f3d22;
  --bs-focus-ring-color: rgba(22, 101, 52, .3);
}

[data-bs-theme="dark"] {
  --sk-surface: #18201b;
  --sk-bg:      #101612;
  --sk-line:    #2b3830;
  --sk-ink:     #e3ebe5;
  --sk-muted:   #9aaba0;
  --sk-green-50:  #13241a;
  --sk-green-100: #1b3524;
  --bs-body-color: var(--sk-ink);
  --bs-body-bg: var(--sk-bg);
  --bs-border-color: var(--sk-line);
  --bs-link-color: #4ade80;
  --bs-link-color-rgb: 74, 222, 128;
  --bs-link-hover-color: #86efac;
  color-scheme: dark;
}

body { background: var(--sk-bg); color: var(--sk-ink); -webkit-text-size-adjust: 100%; }
h1, h2, h3, h4, h5 { font-weight: 700; letter-spacing: -.01em; }
.text-muted, .form-text { color: var(--sk-muted) !important; }
:focus-visible { outline: 3px solid rgba(22, 101, 52, .45); outline-offset: 2px; }

/* ---------- Kerangka ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  --bs-offcanvas-width: 272px;
  width: 260px; flex: 0 0 260px;
  background: var(--sk-green-800); color: #e7f5ec;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
@media (max-width: 991.98px) {
  .sidebar { position: fixed; height: 100%; background: var(--sk-green-800) !important; }
}
/* Bootstrap membuat .offcanvas-lg transparan di layar lebar; kembalikan warna sidebar */
@media (min-width: 992px) {
  .sidebar.offcanvas-lg { background-color: var(--sk-green-800) !important; color: #e7f5ec; }
}
.sidebar-brand { display: flex; align-items: center; gap: .75rem; padding: 1.25rem 1.1rem 1rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand-mark {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: #fff; color: var(--sk-green-800); font-weight: 800; font-size: 1rem;
}
.brand-logo { width: 42px; height: 42px; object-fit: contain; background: #fff; border-radius: 12px; padding: 3px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 1.05rem; letter-spacing: .02em; }
.brand-text small { color: #a7d7b8; font-weight: 600; }
.sidebar-nav { padding: .6rem .6rem 1rem; flex: 1; }
.nav-group { font-size: .75rem; color: #9fcfb0; font-weight: 600; padding: 1rem .75rem .35rem; }
.nav-item {
  display: flex; align-items: center; gap: .75rem; padding: .62rem .75rem; border-radius: 10px;
  color: #e7f5ec; text-decoration: none; font-weight: 500; font-size: .93rem; cursor: pointer;
}
.nav-item i { font-size: 1.1rem; opacity: .85; width: 1.25rem; text-align: center; }
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-item.active { background: #fff; color: var(--sk-green-800); font-weight: 700; }
.nav-item.active i { opacity: 1; }
.sidebar-foot { padding: .6rem; border-top: 1px solid rgba(255,255,255,.1); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1.25rem; padding-top: calc(.6rem + env(safe-area-inset-top, 0px));
  background: var(--sk-surface); border-bottom: 1px solid var(--sk-line);
}
.topbar-title { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.school-name { font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clock { color: var(--sk-muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.btn-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--sk-line); background: var(--sk-surface); color: var(--sk-ink); font-size: 1.2rem; padding: 0; }
.btn-icon:hover { background: var(--sk-green-50); }
.user-chip { display: flex; align-items: center; gap: .55rem; }
.user-chip small { color: var(--sk-muted); font-size: .75rem; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--sk-green-100); color: var(--sk-green-800); display: grid; place-items: center; font-weight: 800; }
[data-bs-theme="dark"] .avatar { color: #86efac; }

.content { padding: 1.5rem 1.5rem 2rem; width: 100%; max-width: 1280px; margin: 0 auto; flex: 1; }
.content-wide { max-width: none; }
.app-footer { padding: 1rem 1.5rem; color: var(--sk-muted); font-size: .8rem; text-align: center; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 575.98px) { .content { padding: 1rem .8rem 1.5rem; } .topbar { padding-left: .8rem; padding-right: .8rem; } }

/* ---------- Komponen umum ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.page-head h1 { font-size: 1.5rem; margin: 0; }
.page-head p { margin: .2rem 0 0; color: var(--sk-muted); }
.panel { background: var(--sk-surface); border: 1px solid var(--sk-line); border-radius: var(--sk-radius); padding: 1.1rem 1.2rem; margin-bottom: 1.1rem; }
.panel-title { font-size: 1.02rem; font-weight: 700; margin: 0 0 .85rem; display: flex; align-items: center; gap: .5rem; justify-content: space-between; flex-wrap: wrap; }
.card { border-color: var(--sk-line); border-radius: var(--sk-radius); background: var(--sk-surface); }

.btn { border-radius: var(--sk-radius-sm); font-weight: 600; }
.btn-success { --bs-btn-bg: var(--sk-green-700); --bs-btn-border-color: var(--sk-green-700); --bs-btn-hover-bg: var(--sk-green-800); --bs-btn-hover-border-color: var(--sk-green-800); --bs-btn-active-bg: var(--sk-green-900); }
.btn-outline-success { --bs-btn-color: var(--sk-green-700); --bs-btn-border-color: var(--sk-green-700); --bs-btn-hover-bg: var(--sk-green-700); --bs-btn-hover-border-color: var(--sk-green-700); }
[data-bs-theme="dark"] .btn-outline-success { --bs-btn-color: #4ade80; --bs-btn-border-color: #2f6f46; }
.form-control, .form-select { border-radius: var(--sk-radius-sm); border-color: var(--sk-line); background-color: var(--sk-surface); }
.form-control:focus, .form-select:focus { border-color: var(--sk-green-600); box-shadow: 0 0 0 .2rem rgba(22,101,52,.18); }
.form-label { font-weight: 600; font-size: .88rem; margin-bottom: .3rem; }
.required::after { content: " *"; color: var(--sk-red); }

.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > thead th { font-size: .8rem; color: var(--sk-muted); font-weight: 700; background: var(--sk-green-50); border-bottom-width: 1px; white-space: nowrap; }
.table td { vertical-align: middle; }
.table-wrap { overflow-x: auto; border: 1px solid var(--sk-line); border-radius: var(--sk-radius-sm); background: var(--sk-surface); }
.table-wrap .table > :not(caption) > * > * { padding: .6rem .7rem; }

.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin-bottom: 1rem; }
.filter-bar > * { flex: 1 1 160px; }
.filter-bar .btn { flex: 0 0 auto; }

/* Kartu statistik: angka besar dengan keterangan */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; margin-bottom: 1.1rem; }
.stat { background: var(--sk-surface); border: 1px solid var(--sk-line); border-radius: var(--sk-radius); padding: .9rem 1rem; position: relative; }
.stat .num { font-size: 1.75rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat .lbl { color: var(--sk-muted); font-size: .84rem; margin-top: .2rem; }
.stat.is-warn .num { color: var(--sk-amber); }
.stat.is-bad .num { color: var(--sk-red); }
.stat.is-good .num { color: var(--sk-green-700); }
[data-bs-theme="dark"] .stat.is-good .num { color: #4ade80; }
a.stat { color: inherit; text-decoration: none; }
a.stat:hover { border-color: var(--sk-green-600); }

.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--sk-muted); }
.empty-state i { font-size: 2.6rem; color: var(--sk-green-600); display: block; margin-bottom: .5rem; }
.empty-state h2 { font-size: 1.15rem; color: var(--sk-ink); }

.chart-box { position: relative; height: 260px; }

/* ---------- Beranda guru ---------- */
.greet { background: var(--sk-green-800); color: #fff; border-radius: var(--sk-radius); padding: 1.2rem 1.3rem; margin-bottom: 1rem; }
.greet h1 { font-size: 1.35rem; margin: 0; }
.greet p { margin: .25rem 0 0; color: #bfe6cc; }
.quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1.1rem; }
@media (max-width: 575.98px) { .quick-actions { grid-template-columns: repeat(2, 1fr); } }
.qa {
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding: .95rem 1rem; min-height: 92px;
  border-radius: var(--sk-radius); border: 1px solid var(--sk-line); background: var(--sk-surface); color: var(--sk-ink);
  text-decoration: none; font-weight: 700; font-size: .92rem; line-height: 1.2;
}
.qa i { font-size: 1.5rem; color: var(--sk-green-700); }
.qa:hover { border-color: var(--sk-green-600); background: var(--sk-green-50); color: var(--sk-ink); }
.qa.primary { background: var(--sk-green-700); border-color: var(--sk-green-700); color: #fff; }
.qa.primary i { color: #fff; }
.qa.primary:hover { background: var(--sk-green-800); color: #fff; }
.qa small { font-weight: 500; opacity: .8; font-size: .78rem; }
[data-bs-theme="dark"] .qa i { color: #4ade80; }
[data-bs-theme="dark"] .qa.primary i { color: #fff; }

/* Linimasa jadwal hari ini */
.timeline { list-style: none; margin: 0; padding: 0; }
.slot { display: grid; grid-template-columns: 64px 1fr; gap: .8rem; padding: .85rem 0; border-top: 1px solid var(--sk-line); }
.slot:first-child { border-top: 0; }
.slot-time { font-variant-numeric: tabular-nums; font-weight: 700; line-height: 1.15; }
.slot-time small { display: block; color: var(--sk-muted); font-weight: 500; }
.slot-body h3 { font-size: 1rem; margin: 0 0 .15rem; }
.slot-meta { color: var(--sk-muted); font-size: .85rem; }
.slot-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.slot.is-now { background: var(--sk-green-50); margin: 0 -1.2rem; padding-left: 1.2rem; padding-right: 1.2rem; border-left: 4px solid var(--sk-green-600); }
.slot-actions .btn { padding: .45rem .8rem; }

/* ---------- Absensi kelas (fitur utama) ---------- */
.att-head { position: sticky; top: 57px; z-index: 5; background: var(--sk-bg); padding: .5rem 0 .6rem; }
.att-counts { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; }
.att-counts div { background: var(--sk-surface); border: 1px solid var(--sk-line); border-radius: 10px; text-align: center; padding: .35rem .2rem; }
.att-counts b { display: block; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.att-counts span { font-size: .72rem; color: var(--sk-muted); }
.att-list { list-style: none; padding: 0; margin: 0; background: var(--sk-surface); border: 1px solid var(--sk-line); border-radius: var(--sk-radius); }
.att-row { display: grid; grid-template-columns: 2rem 1fr auto; gap: .2rem .6rem; align-items: center; padding: .7rem .85rem; border-top: 1px solid var(--sk-line); }
.att-row:first-child { border-top: 0; }
.att-no { color: var(--sk-muted); font-variant-numeric: tabular-nums; font-size: .85rem; }
.att-name { font-weight: 600; line-height: 1.2; }
.att-name small { display: block; color: var(--sk-muted); font-weight: 500; font-size: .78rem; }
.att-note { grid-column: 2 / -1; }
.att-note input { font-size: .85rem; padding: .3rem .55rem; }
@media (max-width: 575.98px) { .att-row { grid-template-columns: 1.6rem 1fr; } .seg { grid-column: 1 / -1; } }

/* Tombol status H T I S A sebagai segmented control */
.seg { display: inline-flex; border: 1px solid var(--sk-line); border-radius: 10px; overflow: hidden; background: var(--sk-surface); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  min-width: 44px; height: 42px; display: grid; place-items: center; font-weight: 800; font-size: .95rem; cursor: pointer;
  border-left: 1px solid var(--sk-line); color: var(--sk-muted); user-select: none; flex: 1;
}
.seg label:first-of-type { border-left: 0; }
.seg input:focus-visible + label { outline: 3px solid rgba(22,101,52,.45); outline-offset: -3px; }
.seg input[value="H"]:checked + label { background: #16a34a; color: #fff; }
.seg input[value="T"]:checked + label { background: #f59e0b; color: #1f1300; }
.seg input[value="I"]:checked + label { background: #0ea5e9; color: #fff; }
.seg input[value="S"]:checked + label { background: #6366f1; color: #fff; }
.seg input[value="A"]:checked + label { background: #dc2626; color: #fff; }
.seg input[value="D"]:checked + label { background: #64748b; color: #fff; }
@media (max-width: 575.98px) { .seg { display: flex; width: 100%; } }
.att-row.unset .att-name::before { content: ""; display: inline-block; width: .5rem; height: .5rem; background: #f59e0b; border-radius: 50%; margin-right: .4rem; vertical-align: middle; }

.sticky-actions {
  position: sticky; bottom: 0; z-index: 6; background: var(--sk-surface); border-top: 1px solid var(--sk-line);
  margin: 1rem -1.5rem -2rem; padding: .75rem 1.5rem; padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.sticky-actions .btn { flex: 1 1 auto; padding: .7rem 1rem; }
@media (max-width: 575.98px) { .sticky-actions { margin: 1rem -.8rem -1.5rem; padding-left: .8rem; padding-right: .8rem; } }

/* Input nilai: tabel padat dengan navigasi keyboard */
.grade-input { width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.grade-input.is-invalid { background-image: none; padding-right: .75rem; }
.score-empty { color: var(--sk-amber); font-weight: 600; }

/* ---------- Halaman login ---------- */
.login-page { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-side {
  background: var(--sk-green-800); color: #eaf7ef; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between;
  background-image: radial-gradient(circle at 85% 15%, rgba(255,255,255,.07) 0 120px, transparent 121px), radial-gradient(circle at 10% 95%, rgba(255,255,255,.05) 0 180px, transparent 181px);
}
.login-side h1 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; line-height: 1.05; margin: 0 0 1rem; letter-spacing: -.02em; }
.login-side p { color: #bfe6cc; max-width: 34ch; font-size: 1.02rem; }
.login-side .school { font-weight: 700; font-size: .95rem; color: #fff; }
.login-form-wrap { display: grid; place-items: center; padding: 2rem 1.25rem; background: var(--sk-surface); }
.login-card { width: 100%; max-width: 380px; }
.login-card h2 { font-size: 1.4rem; }
.login-logo { width: 64px; height: 64px; object-fit: contain; }
@media (max-width: 767.98px) {
  .login-page { grid-template-columns: 1fr; }
  .login-side { padding: 1.5rem 1.25rem; }
  .login-side h1 { font-size: 1.9rem; margin-bottom: .4rem; }
  .login-side .hide-sm { display: none; }
}

/* ---------- Cetak ---------- */
.print-only { display: none; }
@media print {
  .sidebar, .topbar, .app-footer, .no-print, .sticky-actions, .btn, .filter-bar, .pagination, .alert { display: none !important; }
  .print-only { display: block; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .content { padding: 0; max-width: none; }
  .panel, .table-wrap { border: 0; padding: 0; }
  .table > thead th { background: #eee !important; color: #000; }
  .table td, .table th { border: 1px solid #999 !important; padding: 4px 6px !important; }
  a { color: #000; text-decoration: none; }
}
.kop { display: flex; align-items: center; gap: 1rem; border-bottom: 3px double #000; padding-bottom: .5rem; margin-bottom: .8rem; }
.kop img { width: 70px; height: 70px; object-fit: contain; }
.kop h2 { font-size: 15pt; margin: 0; }
.kop p { margin: 0; font-size: 10pt; }
.ttd { display: flex; justify-content: flex-end; margin-top: 2rem; }
.ttd div { text-align: center; min-width: 230px; }
.ttd .space { height: 70px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }