/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding: 0; }
table, th, td { text-align: center; }

/* ============================================================
   Action buttons (table rows)
   ============================================================ */
div.action-btn a {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background-color: #6c757d;
    line-height: 30px;
}
div.action-btn a:hover { background-color: #343a40; }

/* ============================================================
   Bootstrap SVG icons
   ============================================================ */
.bi {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -.125em;
    fill: currentColor;
}

/* ============================================================
   Sidebar  (YouTube-style rounded pill)
   ============================================================ */
@media (min-width: 768px) {
    .sidebar .offcanvas-md,
    .sidebar .offcanvas-lg {
        position: static;
    }
}

/* Padding wrapper agar pill tidak mepet pinggir sidebar */
.sidebar .offcanvas-body > .nav,
.sidebar .offcanvas-body > ul.nav {
    padding: 8px 8px 4px;
}

/* ── Nav link utama ── */
.sidebar .nav-link {
    border-radius: 10px;
    padding: 8px 14px;
    min-height: 40px;
    font-size: .875rem;
    font-weight: 500;
    color: #111827;
    transition: background .12s ease;
}
.sidebar .nav-link:hover {
    background: rgba(0, 0, 0, .06);
    color: #111827;
}
.sidebar .nav-link.active {
    background: #e2e5e9;
    font-weight: 600;
    color: #111827;
}
/* Hapus garis biru kiri */
.sidebar .nav-link.active::before { display: none; }

.sidebar-heading { font-size: .75rem; }

/* ── Section toggle (Absensi, Jadwal, dst.) ── */
.sidebar-toggle {
    background: none;
    border: none;
    border-radius: 10px;
    padding: 8px 14px;
    min-height: 40px;
    color: #111827;
    font-size: .875rem;
    font-weight: 500;
    width: 100%;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background .12s ease;
}
.sidebar-toggle:hover { background: rgba(0, 0, 0, .06); color: #111827; }
.sidebar-toggle.active-section {
    background: rgba(0, 0, 0, .06);
    font-weight: 600;
    color: #111827;
}
.sidebar-toggle .chevron {
    margin-left: auto;
    flex-shrink: 0;
    transition: transform .2s ease;
}
.sidebar-toggle[aria-expanded="true"] .chevron { transform: rotate(90deg); }

/* ── Sub-nav item ── */
.sidebar .sub-nav .nav-link {
    font-size: .8125rem;
    font-weight: 400;
    min-height: 36px;
    padding: 6px 14px;
    border-radius: 8px;
}
.sidebar .sub-nav .nav-link.active {
    background: #e2e5e9;
    font-weight: 600;
    color: #111827;
}

/* Sub-nav items tidak perlu border kiri juga */
.sidebar .sub-nav .nav-link.active::before { display: none; }

/* Label grup (class name di Kelas Wali — tidak interaktif) */
.sidebar .sub-nav .nav-link[style*="cursor:default"] {
    background: none !important;
    cursor: default !important;
    min-height: unset;
    padding-top: 10px;
    padding-bottom: 2px;
    font-size: .72rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ============================================================
   Navbar
   ============================================================ */
.app-topbar {
    min-height: 72px;
    background: #212529;
    box-shadow: 0 3px 12px rgba(15,23,42,.14);
    z-index: 1030;
}
.navbar-brand {
    min-width: 0;
    padding: .5rem 1rem;
}
.brand-logo-frame {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    height: 40px;
}
.brand-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 160px;
    max-height: 40px;
    object-fit: contain;
}
.brand-name {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

/* ============================================================
   Login page
   ============================================================ */
.form-signin { max-width: 380px; padding: 1.5rem; }
.form-signin .form-floating:focus-within { z-index: 2; }
.form-signin .form-floating + .form-floating { margin-top: -1px; }
.form-signin .form-floating:first-of-type input {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.form-signin .form-floating:last-of-type input {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    margin-bottom: 10px;
}

/* ============================================================
   Forms — invalid feedback always visible when is-invalid set
   ============================================================ */
.was-validated .form-control:invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback,
.was-validated .form-select:invalid ~ .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback,
.was-validated .form-check-input:invalid ~ .invalid-feedback,
.form-check-input.is-invalid ~ .invalid-feedback { display: block; }

/* ============================================================
   Attendance checklist
   ============================================================ */
.checklist-table td { vertical-align: middle; }
.status-badge { font-size: .75rem; }

/* ============================================================
   NFC scanner
   ============================================================ */
.nfc-scanner-box {
    border: 3px dashed #2470dc;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.nfc-scanner-box.scanning {
    border-color: #198754;
    animation: pulse-border 1.5s infinite;
}
.nfc-scanner-box.error { border-color: #dc3545; }

@keyframes pulse-border {
    0%   { border-color: #198754; }
    50%  { border-color: #20c997; }
    100% { border-color: #198754; }
}

/* ============================================================
   Gate record status badges
   ============================================================ */
.arrival-on-time  { color: #198754; }
.arrival-late     { color: #dc3545; }
.departure-normal { color: #6c757d; }
.departure-early  { color: #fd7e14; }

/* ============================================================
   Pagination
   ============================================================ */
.pagination a { margin: 0 .5rem; }

/* ── Collapsible sidebar ─────────────────────────────── */
@media (min-width: 768px) {
  .sidebar {
    overflow: hidden;
    transition: width .24s ease, flex-basis .24s ease, max-width .24s ease,
                padding .24s ease, border-color .24s ease;
  }
  body.sb-hidden .sidebar {
    width: 72px !important;
    flex: 0 0 72px !important;
    max-width: 72px !important;
    padding: 0 !important;
  }
  body.sb-hidden .sidebar .offcanvas-md { display: none !important; }
  body.sb-hidden main {
    max-width: calc(100% - 72px) !important;
    flex: 0 0 calc(100% - 72px) !important;
    margin-left: 0 !important;
  }
}
.sb-toggle-btn {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, .75);
  padding: 0;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.sb-toggle-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, .1);
}

/* ============================================================
   Utility classes — text size
   ============================================================ */
.text-xs   { font-size: .75rem !important; }
.text-xxs  { font-size: .68rem !important; }
.text-micro { font-size: .65rem !important; }

/* ============================================================
   Utility classes — sticky table columns
   ============================================================ */
.table-sticky-col {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--bs-body-bg);
}
.table-sticky-col-2 {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--bs-table-bg, var(--bs-body-bg));
}

/* ============================================================
   Utility classes — report table
   ============================================================ */
.report-table th,
.report-table td { font-size: .78rem; vertical-align: middle; }

/* ============================================================
   Utility classes — KPI / stat card
   ============================================================ */
.kpi-val {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
}
.kpi-label {
  font-size: .7rem;
  color: var(--bs-secondary-color);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ============================================================
   Utility classes — scroll panel
   ============================================================ */
.scroll-panel { overflow-y: auto; }
.scroll-panel-sm  { max-height: 240px; overflow-y: auto; }
.scroll-panel-md  { max-height: 360px; overflow-y: auto; }
.scroll-panel-lg  { max-height: 480px; overflow-y: auto; }

/* ============================================================
   Utility classes — soft badges (alternative to Bootstrap subtle)
   ============================================================ */
.badge-soft-primary   { background: #dbeafe; color: #1d4ed8; }
.badge-soft-success   { background: #dcfce7; color: #15803d; }
.badge-soft-warning   { background: #fef9c3; color: #92400e; }
.badge-soft-danger    { background: #fee2e2; color: #b91c1c; }
.badge-soft-secondary { background: #f1f5f9; color: #475569; }
.badge-soft-purple    { background: #ede9fe; color: #6d28d9; }

/* ============================================================
   Utility classes — truncate with ellipsis
   ============================================================ */
.text-truncate-col {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0;
}