:root {
  --tosca: #00a896;
  --tosca-dark: #027a70;
  --soft: #f4fbfa;
  --line: #e8f3f1;
  --text: #1f2937;

  --siguwa-navy: #071a3a;
  --siguwa-blue: #0b4ea2;
  --siguwa-blue-2: #0e75d9;
  --siguwa-sky: #eaf5ff;
  --siguwa-gold: #f4c542;
  --siguwa-ink: #102033;
  --siguwa-muted: #65758b;
  --siguwa-border: #dbe8f5;
  --siguwa-card: #ffffff;
}

/* ================================================================
   GLOBAL
   ================================================================ */

body {
  background: linear-gradient(180deg, #f3f8ff 0%, #eef4fb 100%);
  color: var(--siguwa-ink);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--siguwa-blue-2);
  box-shadow: 0 0 0 .2rem rgba(14, 117, 217, .14);
}

.btn-tosca {
  background: linear-gradient(135deg, var(--siguwa-blue), var(--siguwa-blue-2));
  border: 0;
  color: #fff;
  box-shadow: 0 12px 24px rgba(11, 78, 162, .24);
}

.btn-tosca:hover {
  background: linear-gradient(135deg, #083d81, #0b66c4);
  color: #fff;
  transform: translateY(-1px);
}

.avatar-placeholder {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e7f4ef;
  color: #198754;
  font-size: 1.2rem;
}

/* ================================================================
   LOGIN PAGE
   ================================================================ */

.login-page {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-image:
    linear-gradient(120deg, rgba(3, 20, 48, .82), rgba(7, 72, 142, .64)),
    url('../img/login_slide_1.png');
  background-size: cover;
  background-position: center;
  animation: siguwaLoginSlides 18s infinite ease-in-out;
}

.login-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 15%, rgba(244, 197, 66, .28), transparent 24%),
    radial-gradient(circle at 78% 20%, rgba(14, 117, 217, .32), transparent 28%),
    linear-gradient(90deg, rgba(1, 10, 27, .72), rgba(1, 10, 27, .18));
  z-index: 0;
}

.login-page::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 210px;
  background: linear-gradient(0deg, rgba(2, 12, 30, .75), transparent);
  z-index: 0;
}

.login-page .container {
  position: relative;
  z-index: 1;
}

.auth-card {
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 28px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 28px 80px rgba(2, 12, 30, .38);
  backdrop-filter: blur(12px);
  overflow: hidden;
  max-width: 430px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* FIX UTAMA: batasi semua logo/gambar di area login */
.login-page .auth-card img,
.login-page .login-logo,
.login-page .auth-logo,
.login-page .brand-logo {
  width: 112px !important;
  height: 112px !important;
  max-width: 112px !important;
  max-height: 112px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto 14px auto !important;
}

.login-logo-wrap {
  width: 126px;
  height: 126px;
  border-radius: 28px;
  background: #fff;
  display: grid;
  place-items: center;
  margin: 0 auto 16px auto;
  box-shadow: 0 14px 38px rgba(7, 26, 58, .18);
  border: 1px solid rgba(11, 78, 162, .12);
}

/* Jika logo berada di dalam wrapper */
.login-logo-wrap img,
.login-logo-wrap .login-logo {
  width: 104px !important;
  height: 104px !important;
  max-width: 104px !important;
  max-height: 104px !important;
  margin: 0 auto !important;
}

.auth-card h1,
.auth-card h2,
.auth-card h3,
.auth-card h4,
.auth-card h5 {
  color: var(--siguwa-navy);
}

@keyframes siguwaLoginSlides {
  0%, 28% {
    background-image:
      linear-gradient(120deg, rgba(3, 20, 48, .82), rgba(7, 72, 142, .64)),
      url('../img/login_slide_1.png');
  }

  34%, 61% {
    background-image:
      linear-gradient(120deg, rgba(3, 20, 48, .82), rgba(7, 72, 142, .64)),
      url('../img/login_slide_2.png');
  }

  67%, 94% {
    background-image:
      linear-gradient(120deg, rgba(3, 20, 48, .82), rgba(7, 72, 142, .64)),
      url('../img/login_slide_3.png');
  }

  100% {
    background-image:
      linear-gradient(120deg, rgba(3, 20, 48, .82), rgba(7, 72, 142, .64)),
      url('../img/login_slide_1.png');
  }
}

/* ================================================================
   DASHBOARD TOPBAR
   ================================================================ */

.dashboard-topbar {
  background: linear-gradient(135deg, var(--siguwa-navy), var(--siguwa-blue)) !important;
  border-bottom: 1px solid rgba(244, 197, 66, .24);
}

.dashboard-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: #fff !important;
  font-weight: 800;
  line-height: 1.1;
}

.dashboard-logo {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  object-fit: contain;
  background: #fff;
  padding: 4px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}

.dashboard-brand-title {
  display: block;
  font-size: 1rem;
  letter-spacing: .02em;
}

.dashboard-brand-subtitle {
  display: block;
  font-size: .76rem;
  font-weight: 500;
  color: #cfe7ff;
  margin-top: 2px;
}

.dashboard-user {
  color: #dbeeff;
  font-weight: 600;
}

.dashboard-menu-btn {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
}

.dashboard-menu-btn:hover {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

.dashboard-logout-btn {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .24);
  color: #fff;
}

.dashboard-logout-btn:hover {
  background: #fff;
  color: var(--siguwa-blue);
}

/* ================================================================
   SIDEBAR
   ================================================================ */

.sidebar,
.dashboard-offcanvas {
  background: linear-gradient(180deg, #061733 0%, #082c63 52%, #073d83 100%) !important;
  color: #fff;
  box-shadow: 10px 0 30px rgba(7, 26, 58, .12);
}

.sidebar {
  min-height: 100vh;
}

.sidebar-brand-panel {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
}

.sidebar-logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  object-fit: contain;
  background: #fff;
  padding: 4px;
  flex: 0 0 auto;
}

.sidebar-brand-panel h5 {
  color: #fff;
  font-weight: 800;
  font-size: .98rem;
}

.sidebar-brand-panel small {
  color: #b8d7ff;
  font-size: .72rem;
}

.sidebar a {
  color: #d6e9ff;
  text-decoration: none;
  display: block;
  padding: .75rem 1rem;
  border-radius: .75rem;
  border: 1px solid transparent;
  margin-bottom: .25rem;
  font-weight: 600;
}

.sidebar a:hover,
.sidebar a.active {
  background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .08));
  border-color: rgba(244, 197, 66, .25);
  color: #fff;
  box-shadow: inset 4px 0 0 var(--siguwa-gold);
}

.sidebar a i {
  color: #a9d5ff;
}

.sidebar a.active i,
.sidebar a:hover i {
  color: var(--siguwa-gold);
}

/* ================================================================
   PAGE, CARD, TABLE
   ================================================================ */

.page-shell {
  background: linear-gradient(180deg, #f4f8ff 0%, #eef4fb 100%);
  min-height: calc(100vh - 64px);
}

main.mobile-padding {
  position: relative;
}

.mobile-padding {
  padding: 1rem;
}

.mobile-padding h1,
.mobile-padding .h3 {
  color: var(--siguwa-navy);
  letter-spacing: -.02em;
}

.mobile-padding > p.text-muted,
.mobile-padding .text-muted {
  color: var(--siguwa-muted) !important;
}

.stat-card {
  border: 1px solid var(--siguwa-border) !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 38px rgba(11, 78, 162, .08) !important;
  background: linear-gradient(180deg, #fff 0%, #fafdff 100%);
  overflow: hidden;
}

.stat-card::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--siguwa-blue), var(--siguwa-gold));
  margin: -1rem -1rem 1rem;
}

.stat-card h3 {
  color: var(--siguwa-navy);
  font-weight: 800;
}

.stat-card .bi.fs-2,
.stat-card i.fs-2 {
  color: var(--siguwa-blue-2) !important;
}

.card {
  border: 1px solid var(--siguwa-border) !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 40px rgba(7, 26, 58, .07) !important;
}

.card-header {
  background: linear-gradient(180deg, #fff 0%, #f6fbff 100%) !important;
  border-bottom: 1px solid var(--siguwa-border) !important;
  border-radius: 22px 22px 0 0 !important;
  color: var(--siguwa-navy);
}

.table thead th {
  background: #e9f4ff !important;
  color: #0a4287 !important;
  border-bottom: 1px solid #cfe4fa !important;
}

.table-hover tbody tr:hover {
  background: #f2f8ff;
}

.badge-soft {
  background: #e7fbf8;
  color: #0f766e;
}

.badge.text-bg-success,
.badge.bg-success {
  background: linear-gradient(135deg, #0b7d57, #18a779) !important;
}

.badge.text-bg-danger,
.badge.bg-danger {
  background: linear-gradient(135deg, #b42337, #e03b52) !important;
}

.badge.text-bg-info,
.badge.bg-info {
  background: linear-gradient(135deg, #0b75bb, #1ba6e8) !important;
  color: #fff !important;
}

.alert-info {
  background: #eaf5ff;
  border-left: 5px solid var(--siguwa-blue-2);
  color: #123d69;
}

.alert-warning {
  border-left: 5px solid #f4c542;
}

.alert-danger {
  border-left: 5px solid #dc3545;
}

/* ================================================================
   CALENDAR
   ================================================================ */

.calendar-table th,
.calendar-table td {
  vertical-align: top;
}

.calendar-table td {
  transition: background .15s ease, transform .15s ease;
}

.calendar-table td:hover {
  transform: translateY(-1px);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (min-width: 992px) {
  .mobile-padding {
    padding: 2rem;
  }
}

@media (max-width: 991.98px) {
  .dashboard-brand-subtitle {
    display: none;
  }

  .dashboard-logo {
    width: 38px;
    height: 38px;
  }

  .page-shell {
    min-height: 100vh;
  }

  .sidebar {
    min-height: auto;
  }

  .offcanvas .sidebar {
    min-height: 100%;
    box-shadow: none;
  }

  .mobile-padding {
    padding: 1.25rem !important;
  }

  .auth-card {
    max-width: 92vw;
  }

  .login-page .auth-card img,
  .login-page .login-logo,
  .login-page .auth-logo,
  .login-page .brand-logo {
    width: 96px !important;
    height: 96px !important;
    max-width: 96px !important;
    max-height: 96px !important;
  }

  .login-logo-wrap {
    width: 112px;
    height: 112px;
  }

  .login-logo-wrap img,
  .login-logo-wrap .login-logo {
    width: 90px !important;
    height: 90px !important;
    max-width: 90px !important;
    max-height: 90px !important;
  }
}
/* ================================================================
   FORCE FIX LOGO DASHBOARD & LOGIN
   ================================================================ */

/* Topbar dashboard logo wrapper */
.dashboard-topbar .dashboard-logo-box {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 4px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22) !important;
    flex: 0 0 46px !important;
}

/* Logo image inside dashboard topbar */
.dashboard-topbar .dashboard-logo-box img.dashboard-logo,
.dashboard-topbar img.dashboard-logo {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Login logo wrapper */
.login-logo-box,
.login-logo-wrap {
    width: 120px !important;
    height: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    margin: 0 auto 16px auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border-radius: 28px !important;
    box-shadow: 0 14px 38px rgba(7, 26, 58, .18) !important;
    overflow: hidden !important;
}

/* Login logo image */
.login-logo-box img,
.login-logo-wrap img,
.login-page .auth-card img.login-logo,
.login-page .auth-card img.login-logo-img,
.login-page .auth-card img.auth-logo {
    width: 96px !important;
    height: 96px !important;
    max-width: 96px !important;
    max-height: 96px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Jangan biarkan brand melebar karena logo */
.dashboard-brand {
    max-width: 70vw;
    overflow: hidden;
}

.dashboard-brand-copy {
    min-width: 0;
}

.dashboard-brand-title,
.dashboard-brand-subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ================================================================
   PATCH TAHAP 11 - DASHBOARD GURU & WALI KELAS RESPONSIVE
   Mobile-first action dashboard + two-column desktop layout
   ================================================================ */

.dashboard-home {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
}

.dashboard-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.55rem 1.7rem;
  border-radius: 24px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 90% 5%, rgba(244,197,66,.28), transparent 28%),
    linear-gradient(135deg, #071a3a 0%, #0b4ea2 62%, #0e75d9 100%);
  box-shadow: 0 18px 42px rgba(7,26,58,.16);
}

.dashboard-hero::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -85px;
  bottom: -120px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  pointer-events: none;
}

.dashboard-hero-wali {
  background:
    radial-gradient(circle at 90% 5%, rgba(244,197,66,.24), transparent 28%),
    linear-gradient(135deg, #08203f 0%, #0a5d8f 60%, #1489bc 100%);
}

.dashboard-eyebrow,
.dashboard-section-kicker {
  display: block;
  font-size: .72rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.dashboard-eyebrow {
  color: #bcdcff;
  margin-bottom: .45rem;
}

.dashboard-hero-title {
  color: #fff !important;
  font-size: clamp(1.38rem, 2.2vw, 2rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.025em;
}

.dashboard-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.1rem;
  margin-top: .65rem;
  font-size: .88rem;
  color: #d8ebff;
}

.dashboard-hero-icon {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  place-items: center;
  border-radius: 22px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  font-size: 2.15rem;
}

.dashboard-section-card {
  background: #fff;
  border: 1px solid var(--siguwa-border);
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(7,26,58,.065);
  padding: 1.25rem;
}

.dashboard-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.dashboard-section-head.compact {
  margin-bottom: .9rem;
}

.dashboard-section-kicker {
  color: var(--siguwa-blue-2);
  margin-bottom: .25rem;
}

.dashboard-section-title {
  margin: 0;
  color: var(--siguwa-navy);
  font-size: 1.12rem;
  line-height: 1.25;
  font-weight: 800;
}

.dashboard-count-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: .35rem .72rem;
  border-radius: 999px;
  background: #edf6ff;
  color: #0b4ea2;
  border: 1px solid #d3e8fb;
  font-size: .76rem;
  font-weight: 800;
  white-space: nowrap;
}

.dashboard-count-badge.warning {
  background: #fff7e6;
  border-color: #ffe1a6;
  color: #9a6200;
}

.dashboard-notice {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: .9rem 1rem;
  border-radius: 15px;
  font-size: .9rem;
}

.dashboard-notice > i {
  font-size: 1.15rem;
  margin-top: .05rem;
}

.dashboard-notice-info {
  background: #eaf5ff;
  border: 1px solid #cfe7ff;
  color: #184c7b;
}

.dashboard-schedule-list {
  display: grid;
  gap: .85rem;
}

.dashboard-schedule-item {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: stretch;
  border: 1px solid #e2ebf5;
  border-radius: 18px;
  background: #fbfdff;
  overflow: hidden;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.dashboard-schedule-item:hover {
  transform: translateY(-1px);
  border-color: #c6def4;
  box-shadow: 0 12px 26px rgba(7,26,58,.07);
}

.dashboard-schedule-item.current {
  border-color: #82c2f3;
  box-shadow: 0 0 0 2px rgba(14,117,217,.08), 0 12px 28px rgba(7,26,58,.07);
}

.dashboard-schedule-item.past {
  background: #fcfcfd;
}

.dashboard-schedule-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .9rem .45rem;
  background: linear-gradient(180deg, #eef7ff, #e8f1fb);
  border-right: 1px solid #d9e8f6;
  color: #0b4ea2;
}

.dashboard-schedule-item.current .dashboard-schedule-time {
  background: linear-gradient(180deg, #0b4ea2, #0e75d9);
  color: #fff;
}

.dashboard-schedule-time span {
  font-size: 1rem;
  line-height: 1;
  font-weight: 850;
}

.dashboard-schedule-time small {
  margin-top: .35rem;
  font-size: .72rem;
  font-weight: 700;
  opacity: .8;
}

.dashboard-schedule-body {
  padding: .95rem 1rem;
  min-width: 0;
}

.dashboard-schedule-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
}

.dashboard-schedule-topline h3 {
  margin: 0;
  color: var(--siguwa-navy);
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 800;
}

.dashboard-schedule-topline p {
  margin: .18rem 0 0;
  color: var(--siguwa-muted);
  font-size: .82rem;
  font-weight: 700;
}

.dashboard-time-pill {
  flex: 0 0 auto;
  padding: .27rem .52rem;
  border-radius: 999px;
  font-size: .67rem;
  font-weight: 800;
  background: #f0f3f7;
  color: #64748b;
}

.dashboard-time-pill.current {
  background: #e6f6ef;
  color: #08744f;
}

.dashboard-time-pill.upcoming {
  background: #edf6ff;
  color: #0b4ea2;
}

.dashboard-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: .42rem;
  margin-top: .75rem;
}

.dashboard-status-chip {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .28rem .52rem;
  border-radius: 999px;
  font-size: .7rem;
  line-height: 1.1;
  font-weight: 750;
}

.dashboard-status-chip.done {
  background: #eaf8f2;
  color: #08744f;
}

.dashboard-status-chip.pending {
  background: #fff5e9;
  color: #9a5e06;
}

.dashboard-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .8rem;
}

.dashboard-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  min-height: 39px;
  padding: .48rem .82rem;
  border-radius: 11px;
  border: 1px solid transparent;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
}

.dashboard-action-btn.primary {
  background: linear-gradient(135deg, #0b4ea2, #0e75d9);
  border-color: #0b63bb;
  color: #fff;
  box-shadow: 0 8px 18px rgba(11,78,162,.16);
}

.dashboard-action-btn.primary:hover {
  color: #fff;
  background: linear-gradient(135deg, #083e84, #0a64bf);
}

.dashboard-action-btn.secondary {
  background: #fff;
  border-color: #cbddec;
  color: #164a79;
}

.dashboard-action-btn.secondary:hover {
  background: #f3f8fd;
  color: #0b4ea2;
}

.dashboard-empty-state {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .35rem;
  padding: 1.5rem;
  border: 1px dashed #cbddeb;
  border-radius: 17px;
  background: #fafdff;
  color: var(--siguwa-muted);
}

.dashboard-empty-state.compact-state {
  min-height: 170px;
}

.dashboard-empty-state > i {
  margin-bottom: .35rem;
  font-size: 2rem;
  color: #6ca9dd;
}

.dashboard-empty-state strong {
  color: var(--siguwa-navy);
  font-size: .96rem;
}

.dashboard-empty-state span {
  max-width: 520px;
  font-size: .82rem;
}

.dashboard-attention-list {
  display: grid;
  gap: .55rem;
}

.dashboard-attention-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .72rem .8rem;
  border-radius: 13px;
  background: #fff8ea;
  border: 1px solid #f6dfac;
  color: #704900;
  font-size: .82rem;
  font-weight: 650;
}

.dashboard-attention-item i {
  color: #d88d00;
  margin-top: .08rem;
}

.dashboard-good-state {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .95rem 1rem;
  border-radius: 14px;
  background: #effaf5;
  border: 1px solid #caeedf;
  color: #156547;
}

.dashboard-good-state > i {
  font-size: 1.25rem;
  color: #119267;
}

.dashboard-good-state div {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.dashboard-good-state strong {
  font-size: .86rem;
}

.dashboard-good-state span {
  font-size: .76rem;
  color: #47816d;
}

.dashboard-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}

.dashboard-quick-action {
  min-height: 91px;
  display: flex;
  align-items: center;
  gap: .72rem;
  padding: .85rem;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #f7fbff);
  border: 1px solid #dbe8f5;
  color: var(--siguwa-navy);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.dashboard-quick-action:hover {
  transform: translateY(-2px);
  border-color: #b7d4ec;
  box-shadow: 0 12px 25px rgba(7,26,58,.08);
  color: #0b4ea2;
}

.dashboard-quick-icon {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #eaf5ff;
  color: #0b65bd;
  font-size: 1.13rem;
}

.dashboard-quick-action > span:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.dashboard-quick-action strong {
  font-size: .83rem;
  font-weight: 800;
}

.dashboard-quick-action small {
  margin-top: .2rem;
  color: var(--siguwa-muted);
  font-size: .7rem;
}

.dashboard-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}

.dashboard-metric {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .85rem;
  border-radius: 15px;
  background: #f7fbff;
  border: 1px solid #e0ecf7;
}

.dashboard-metric i {
  color: #4b8fc8;
  font-size: 1rem;
  margin-bottom: .35rem;
}

.dashboard-metric strong {
  color: var(--siguwa-navy);
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 850;
}

.dashboard-metric span {
  margin-top: .36rem;
  color: var(--siguwa-muted);
  font-size: .72rem;
  line-height: 1.2;
  font-weight: 650;
}

.dashboard-role-switch {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: .92rem 1rem;
  border-radius: 17px;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #0b4ea2, #0f7ecb);
  box-shadow: 0 12px 26px rgba(11,78,162,.16);
}

.dashboard-role-switch:hover {
  color: #fff;
  transform: translateY(-1px);
}

.dashboard-role-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255,255,255,.14);
  font-size: 1.15rem;
}

.dashboard-role-switch > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dashboard-role-switch strong {
  font-size: .82rem;
}

.dashboard-role-switch small {
  margin-top: .14rem;
  color: #d5ebff;
  font-size: .69rem;
}

.dashboard-attendance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: .75rem;
}

.dashboard-attendance-card {
  min-height: 142px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 18px;
  border: 1px solid;
  padding: .85rem;
}

.dashboard-attendance-card .dashboard-attendance-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  margin-bottom: .5rem;
  font-size: 1rem;
}

.dashboard-attendance-card strong {
  font-size: 1.7rem;
  line-height: 1;
  font-weight: 850;
}

.dashboard-attendance-card > span:last-child {
  margin-top: .35rem;
  font-size: .76rem;
  font-weight: 750;
}

.dashboard-attendance-card.hadir {
  background: #effaf5;
  border-color: #caeedf;
  color: #08744f;
}
.dashboard-attendance-card.hadir .dashboard-attendance-icon { background:#dff5eb; }

.dashboard-attendance-card.izin {
  background: #f2f7ff;
  border-color: #d4e4fb;
  color: #245d9b;
}
.dashboard-attendance-card.izin .dashboard-attendance-icon { background:#e2eeff; }

.dashboard-attendance-card.sakit {
  background: #fff8e9;
  border-color: #f4e1b7;
  color: #9b6810;
}
.dashboard-attendance-card.sakit .dashboard-attendance-icon { background:#fff0ca; }

.dashboard-attendance-card.tk {
  background: #fff1f2;
  border-color: #f5d0d6;
  color: #a52e42;
}
.dashboard-attendance-card.tk .dashboard-attendance-icon { background:#ffe1e5; }

.dashboard-inline-note {
  display: flex;
  gap: .45rem;
  align-items: center;
  padding: .65rem .75rem;
  border-radius: 12px;
  background: #f8fafc;
  color: #64748b;
  font-size: .75rem;
}

.dashboard-attention-panel {
  display: flex;
  gap: .9rem;
  padding: 1rem;
  border-radius: 16px;
  background: #fff8e9;
  border: 1px solid #f5dfa9;
}

.dashboard-attention-panel-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #ffe8ac;
  color: #9a6100;
  font-size: 1.25rem;
}

.dashboard-attention-panel-body {
  min-width: 0;
  color: #674500;
}

.dashboard-attention-panel-body > strong {
  display: block;
  font-size: .88rem;
}

.dashboard-pending-list {
  display: grid;
  gap: .22rem;
  margin-top: .55rem;
}

.dashboard-pending-list span {
  font-size: .73rem;
  color: #8d6925;
}

.dashboard-mobile-bottom-nav {
  position: fixed;
  z-index: 1035;
  left: 10px;
  right: 10px;
  bottom: calc(9px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  min-height: 66px;
  padding: .35rem;
  border: 1px solid rgba(196,215,233,.9);
  border-radius: 20px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 16px 38px rgba(7,26,58,.2);
  backdrop-filter: blur(14px);
}

.dashboard-mobile-bottom-nav a,
.dashboard-mobile-bottom-nav button {
  appearance: none;
  border: 0;
  background: transparent;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .22rem;
  border-radius: 15px;
  color: #6b7d91;
  text-decoration: none;
  font-size: .63rem;
  font-weight: 750;
}

.dashboard-mobile-bottom-nav i {
  font-size: 1.15rem;
}

.dashboard-mobile-bottom-nav a.active {
  background: #eaf5ff;
  color: #0b4ea2;
}

@media (min-width: 1400px) {
  .dashboard-home {
    padding-left: 2.3rem !important;
    padding-right: 2.3rem !important;
  }

  .dashboard-section-card {
    padding: 1.4rem;
  }
}

@media (min-width: 992px) {
  .dashboard-home .row > .col-xl-8 > .dashboard-section-card:first-child {
    min-height: 360px;
  }
}

@media (max-width: 1199.98px) {
  .dashboard-attendance-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 991.98px) {
  .dashboard-home.dashboard-mobile-nav-space {
    padding-bottom: 98px !important;
  }

  .dashboard-hero {
    padding: 1.2rem 1.15rem;
    border-radius: 19px;
  }

  .dashboard-section-card {
    border-radius: 18px;
    padding: 1rem;
    box-shadow: 0 10px 24px rgba(7,26,58,.06);
  }

  .dashboard-section-title {
    font-size: 1.03rem;
  }

  .dashboard-topbar .dashboard-logout-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    font-size: 0;
    border-radius: 12px;
  }

  .dashboard-topbar .dashboard-logout-btn i {
    font-size: 1rem;
    margin: 0 !important;
  }
}

@media (max-width: 575.98px) {
  .mobile-padding.dashboard-home {
    padding: .9rem .8rem 98px !important;
  }

  .dashboard-brand-title {
    font-size: .87rem;
  }

  .dashboard-topbar .dashboard-logo-box {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex-basis: 40px !important;
    border-radius: 12px !important;
  }

  .dashboard-topbar .dashboard-logo-box img.dashboard-logo,
  .dashboard-topbar img.dashboard-logo {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
  }

  .dashboard-menu-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
  }

  .dashboard-hero-title {
    font-size: 1.28rem;
  }

  .dashboard-hero-meta {
    display: grid;
    gap: .35rem;
    font-size: .76rem;
  }

  .dashboard-eyebrow,
  .dashboard-section-kicker {
    font-size: .64rem;
  }

  .dashboard-section-head {
    align-items: flex-start;
    margin-bottom: .9rem;
  }

  .dashboard-count-badge {
    min-height: 29px;
    padding: .3rem .58rem;
    font-size: .68rem;
  }

  .dashboard-schedule-item {
    grid-template-columns: 70px minmax(0,1fr);
    border-radius: 15px;
  }

  .dashboard-schedule-time {
    padding: .72rem .35rem;
  }

  .dashboard-schedule-time span {
    font-size: .9rem;
  }

  .dashboard-schedule-time small {
    font-size: .65rem;
  }

  .dashboard-schedule-body {
    padding: .75rem;
  }

  .dashboard-schedule-topline {
    display: block;
  }

  .dashboard-schedule-topline h3 {
    font-size: .9rem;
    padding-right: 0;
  }

  .dashboard-time-pill {
    display: inline-flex;
    margin-top: .42rem;
  }

  .dashboard-status-row {
    gap: .35rem;
    margin-top: .6rem;
  }

  .dashboard-status-chip {
    font-size: .64rem;
    padding: .25rem .42rem;
  }

  .dashboard-action-row {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .42rem;
  }

  .dashboard-action-btn {
    width: 100%;
    min-height: 44px;
    padding: .48rem .45rem;
    font-size: .7rem;
  }

  .dashboard-quick-grid {
    gap: .55rem;
  }

  .dashboard-quick-action {
    min-height: 84px;
    padding: .68rem;
    gap: .55rem;
  }

  .dashboard-quick-icon {
    width: 35px;
    height: 35px;
    flex-basis: 35px;
    border-radius: 11px;
    font-size: 1rem;
  }

  .dashboard-quick-action strong {
    font-size: .76rem;
  }

  .dashboard-quick-action small {
    font-size: .64rem;
  }

  .dashboard-metric-grid,
  .dashboard-attendance-grid {
    gap: .55rem;
  }

  .dashboard-metric {
    min-height: 98px;
    padding: .7rem;
  }

  .dashboard-metric strong {
    font-size: 1.35rem;
  }

  .dashboard-attendance-card {
    min-height: 116px;
    border-radius: 15px;
    padding: .65rem;
  }

  .dashboard-attendance-card strong {
    font-size: 1.5rem;
  }

  .dashboard-attention-panel {
    padding: .85rem;
  }

  .dashboard-attention-panel-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .dashboard-mobile-bottom-nav {
    left: 8px;
    right: 8px;
    min-height: 64px;
    border-radius: 18px;
  }
}

/* =========================================================
   TAHAP 12 - PRESENSI & E-JURNAL RESPONSIVE / MOBILE FIRST
   ========================================================= */
.operational-page {
  --op-border: #dbe7f2;
  --op-soft: #f6f9fc;
  --op-text: #18324d;
  --op-muted: #708399;
  --op-primary: #0b4ea2;
  --op-success: #178754;
  --op-warning: #b87500;
  --op-danger: #c83245;
  max-width: 1540px;
  margin: 0 auto;
  padding: 1.55rem 1.5rem 2.2rem;
  color: var(--op-text);
}

.operational-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.operational-page-head h1 {
  margin: .08rem 0 .3rem;
  font-size: clamp(1.55rem, 2vw, 2rem);
  font-weight: 800;
  letter-spacing: -.025em;
}

.operational-page-head p {
  margin: 0;
  color: var(--op-muted);
  font-size: .94rem;
}

.operational-kicker,
.operational-section-kicker {
  display: block;
  color: #68819a;
  text-transform: uppercase;
  letter-spacing: .075em;
  font-size: .68rem;
  font-weight: 800;
}

.operational-period-badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 42px;
  padding: .55rem .8rem;
  border: 1px solid #d5e4f2;
  border-radius: 13px;
  background: #fff;
  color: #43627f;
  font-size: .78rem;
  font-weight: 750;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(20, 54, 88, .05);
}

.operational-head-action {
  min-height: 42px;
  border-radius: 12px;
  font-weight: 700;
}

.operational-alert {
  border: 0;
  border-radius: 14px;
}

.operational-filter-card,
.operational-card {
  border: 1px solid var(--op-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(18, 52, 86, .065);
}

.operational-filter-card {
  padding: 1rem 1.1rem;
}

.operational-card {
  overflow: hidden;
}

.operational-label {
  margin-bottom: .42rem;
  color: #405b75;
  font-size: .78rem;
  font-weight: 800;
}

.operational-control {
  min-height: 48px;
  border-color: #d7e3ef;
  border-radius: 12px;
  color: #25445f;
  font-size: .9rem;
  box-shadow: none !important;
}

.operational-control:focus,
.operational-textarea:focus,
.attendance-note-wrap .form-control:focus,
.operational-search-wrap .form-control:focus {
  border-color: #8bb7e2;
  box-shadow: 0 0 0 .2rem rgba(11, 78, 162, .09) !important;
}

.operational-help {
  margin-top: .38rem;
  color: #7b8da0;
  font-size: .7rem;
  line-height: 1.4;
}

.schedule-context-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .9rem 1rem;
  border: 1px solid #d8e6f3;
  border-radius: 16px;
  background: linear-gradient(135deg, #f7fbff 0%, #eef7ff 100%);
}

.schedule-context-icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: #dceeff;
  color: #0b4ea2;
  font-size: 1.15rem;
}

.schedule-context-main {
  min-width: 0;
  flex: 1;
}

.schedule-context-main > span,
.schedule-context-main > strong,
.schedule-context-main > small {
  display: block;
}

.schedule-context-label {
  margin-bottom: .1rem;
  color: #738ba2;
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.schedule-context-main strong {
  overflow: hidden;
  color: #163c61;
  font-size: .94rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-context-main small {
  margin-top: .12rem;
  color: #698097;
  font-size: .72rem;
}

/* Presensi */
.attendance-summary-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
}

.attendance-summary-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 82px;
  padding: .8rem .9rem;
  border: 1px solid var(--op-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(18, 52, 86, .05);
}

.attendance-summary-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 1rem;
}

.attendance-summary-item > div > strong,
.attendance-summary-item > div > span {
  display: block;
}

.attendance-summary-item strong {
  font-size: 1.32rem;
  line-height: 1;
}

.attendance-summary-item > div > span {
  margin-top: .2rem;
  color: #71869a;
  font-size: .68rem;
  font-weight: 700;
}

.attendance-summary-item.hadir .attendance-summary-icon { background:#dff5eb; color:#13764a; }
.attendance-summary-item.izin .attendance-summary-icon { background:#e4efff; color:#1e63ae; }
.attendance-summary-item.sakit .attendance-summary-icon { background:#fff0c9; color:#9e6700; }
.attendance-summary-item.tk .attendance-summary-icon { background:#ffe4e8; color:#bc2e42; }

.attendance-list-card {
  overflow: visible;
}

.attendance-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.05rem;
  border-bottom: 1px solid #e6edf4;
}

.attendance-toolbar h2,
.operational-card-head h2 {
  margin: 0;
  color: #183a5a;
  font-size: 1rem;
  font-weight: 800;
}

.attendance-toolbar p {
  margin: .18rem 0 0;
  color: #7a8da0;
  font-size: .69rem;
}

.attendance-toolbar-actions {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.operational-search-wrap {
  position: relative;
  min-width: 235px;
}

.operational-search-wrap i {
  position: absolute;
  z-index: 2;
  left: .75rem;
  top: 50%;
  color: #8194a8;
  transform: translateY(-50%);
}

.operational-search-wrap .form-control {
  min-height: 41px;
  padding-left: 2.2rem;
  border-color: #dbe5ee;
  border-radius: 11px;
  font-size: .78rem;
}

.attendance-all-present {
  min-height: 41px;
  border-radius: 11px;
  font-size: .76rem;
  font-weight: 750;
  white-space: nowrap;
}

.attendance-column-head,
.attendance-student-row {
  grid-template-columns: 45px minmax(170px, .9fr) minmax(375px, 1.45fr) minmax(170px, .7fr);
  column-gap: .8rem;
  align-items: center;
}

.attendance-column-head {
  display: grid;
  padding: .62rem 1rem;
  border-bottom: 1px solid #e9eff5;
  background: #f7fafe;
  color: #7b8ea0;
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.attendance-student-row {
  display: grid;
  padding: .75rem 1rem;
  border-bottom: 1px solid #edf2f6;
  transition: background .16s ease, opacity .16s ease;
}

.attendance-student-row:last-child {
  border-bottom: 0;
}

.attendance-student-row:hover {
  background: #fbfdff;
}

.attendance-student-row.is-filtered-out {
  display: none !important;
}

.attendance-number {
  color: #8091a3;
  font-size: .74rem;
  font-weight: 800;
  text-align: center;
}

.attendance-student-info {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: .62rem;
}

.attendance-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  border-radius: 11px;
  background: #e9f3fd;
  color: #24649f;
  font-size: .8rem;
  font-weight: 850;
}

.attendance-student-info strong,
.attendance-student-info small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attendance-student-info strong {
  color: #203e59;
  font-size: .79rem;
}

.attendance-student-info small {
  margin-top: .14rem;
  color: #8594a4;
  font-size: .63rem;
}

.attendance-status-group {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .35rem;
}

.attendance-status-option {
  min-width: 0;
  min-height: 38px;
  padding: .42rem .4rem;
  border: 1px solid #dce5ed;
  border-radius: 10px;
  background: #fff;
  color: #657b90;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  font-size: .67rem;
  font-weight: 800;
  line-height: 1;
  user-select: none;
  transition: border-color .14s ease, background .14s ease, color .14s ease, transform .14s ease;
}

.attendance-status-option:hover {
  transform: translateY(-1px);
}

.attendance-radio:focus-visible + .attendance-status-option {
  outline: 3px solid rgba(11, 78, 162, .16);
  outline-offset: 1px;
}

.attendance-radio:checked + .attendance-status-option.hadir { border-color:#67bd91; background:#e3f6ec; color:#116c42; }
.attendance-radio:checked + .attendance-status-option.izin { border-color:#82ade0; background:#e8f2ff; color:#185b9f; }
.attendance-radio:checked + .attendance-status-option.sakit { border-color:#e7bc5d; background:#fff3d4; color:#8c5a00; }
.attendance-radio:checked + .attendance-status-option.tk { border-color:#df8b98; background:#ffe8ec; color:#ad2940; }

.attendance-note-wrap label {
  margin-bottom: .3rem;
  color: #708399;
  font-size: .68rem;
  font-weight: 750;
}

.attendance-note-wrap .form-control {
  min-height: 38px;
  border-color: #dce5ed;
  border-radius: 10px;
  font-size: .72rem;
}

.operational-save-bar {
  position: sticky;
  z-index: 12;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .85rem;
  padding: .8rem .9rem;
  border: 1px solid #dbe5ee;
  border-radius: 15px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -5px 22px rgba(22, 52, 82, .075);
  backdrop-filter: blur(12px);
}

.operational-save-info {
  align-items: center;
  gap: .5rem;
  color: #708399;
  font-size: .71rem;
}

.operational-save-info i {
  color: #178754;
  font-size: 1rem;
}

.operational-save-bar .btn {
  min-width: 190px;
  min-height: 46px;
  border-radius: 12px;
  font-size: .82rem;
  font-weight: 800;
}

.operational-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 190px;
  padding: 1.5rem;
  color: #7d8fa1;
  text-align: center;
}

.operational-empty-state > i {
  margin-bottom: .6rem;
  color: #9bb3c9;
  font-size: 2rem;
}

.operational-empty-state > strong,
.operational-empty-state > span {
  display: block;
}

.operational-empty-state > strong {
  color: #49647d;
  font-size: .9rem;
}

.operational-empty-state > span {
  max-width: 420px;
  margin-top: .25rem;
  font-size: .72rem;
}

.operational-empty-state.compact {
  min-height: 120px;
  padding: 1rem;
}

.operational-empty-state.compact > i {
  font-size: 1.45rem;
}

/* E-Jurnal */
.operational-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 1rem;
  border-bottom: 1px solid #e7eef5;
}

.operational-card-head.compact {
  padding: .85rem .9rem;
}

.operational-card-head a:not(.btn) {
  color: #2b6fae;
  font-size: .68rem;
  font-weight: 750;
  text-decoration: none;
}

.journal-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
}

.journal-field-wide {
  grid-column: 1 / -1;
}

.journal-absence-field {
  max-width: 390px;
}

.journal-number-input {
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #d8e3ed;
  border-radius: 12px;
  background: #f9fbfd;
}

.journal-number-input .form-control {
  flex: 0 0 92px;
  width: 92px;
  min-height: 46px;
  border: 0;
  border-right: 1px solid #e0e8ef;
  border-radius: 0;
  background: #fff;
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
  box-shadow: none !important;
}

.journal-number-input > span {
  padding: 0 .8rem;
  color: #73889b;
  font-size: .73rem;
}

.operational-textarea {
  border-color: #d8e3ed;
  border-radius: 12px;
  color: #28455f;
  font-size: .82rem;
  line-height: 1.55;
  resize: vertical;
  box-shadow: none;
}

.journal-save-bar {
  margin: 0 1rem 1rem;
}

.journal-side-stack {
  display: grid;
  gap: 1rem;
}

.journal-attendance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .45rem;
  padding: .9rem;
}

.journal-attendance-grid > div {
  min-width: 0;
  padding: .65rem .35rem;
  border-radius: 12px;
  text-align: center;
}

.journal-attendance-grid strong,
.journal-attendance-grid span {
  display: block;
}

.journal-attendance-grid strong {
  font-size: 1.1rem;
  line-height: 1;
}

.journal-attendance-grid span {
  margin-top: .28rem;
  font-size: .61rem;
  font-weight: 750;
}

.journal-attendance-grid .hadir { background:#e7f6ef; color:#157147; }
.journal-attendance-grid .izin { background:#eaf3ff; color:#225f9e; }
.journal-attendance-grid .sakit { background:#fff2d2; color:#916000; }
.journal-attendance-grid .tk { background:#ffe9ed; color:#ad2d41; }

.journal-presence-note {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 0 .9rem .9rem;
  padding: .7rem .75rem;
  border-radius: 11px;
  font-size: .68rem;
  line-height: 1.45;
}

.journal-presence-note.success { background:#edf8f2; color:#39725a; }
.journal-presence-note.warning { background:#fff7e3; color:#805e18; }

.journal-attendance-card > .btn {
  width: calc(100% - 1.8rem) !important;
  margin: 0 .9rem .9rem !important;
  min-height: 42px;
  border-radius: 11px;
  font-size: .73rem;
  font-weight: 750;
}

.recent-journal-list {
  display: grid;
}

.recent-journal-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: .7rem;
  padding: .72rem .85rem;
  border-bottom: 1px solid #edf2f6;
}

.recent-journal-item:last-child {
  border-bottom: 0;
}

.recent-journal-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 10px;
  background: #eef5fb;
  color: #426889;
}

.recent-journal-date strong {
  font-size: .9rem;
  line-height: 1;
}

.recent-journal-date span {
  margin-top: .18rem;
  font-size: .55rem;
}

.recent-journal-body {
  min-width: 0;
}

.recent-journal-body strong,
.recent-journal-body span,
.recent-journal-body small {
  display: block;
}

.recent-journal-body strong {
  overflow: hidden;
  color: #274762;
  font-size: .73rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-journal-body span {
  display: -webkit-box;
  overflow: hidden;
  margin-top: .16rem;
  color: #657e94;
  font-size: .67rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.recent-journal-body small {
  margin-top: .3rem;
  color: #92a0ae;
  font-size: .57rem;
}

@media (min-width: 1400px) {
  .operational-page {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .attendance-column-head,
  .attendance-student-row {
    grid-template-columns: 48px minmax(210px, .95fr) minmax(430px, 1.4fr) minmax(210px, .7fr);
  }
}

@media (max-width: 1199.98px) {
  .attendance-column-head,
  .attendance-student-row {
    grid-template-columns: 42px minmax(150px, .8fr) minmax(330px, 1.5fr) minmax(145px, .65fr);
    column-gap: .55rem;
  }

  .attendance-status-option {
    padding-left: .25rem;
    padding-right: .25rem;
    font-size: .62rem;
  }

  .journal-side-stack {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  }
}

@media (max-width: 991.98px) {
  .operational-page {
    padding: 1.1rem 1rem 6.8rem;
  }

  .operational-page-head {
    align-items: center;
  }

  .attendance-summary-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .attendance-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .attendance-toolbar-actions {
    width: 100%;
  }

  .operational-search-wrap {
    flex: 1;
    min-width: 0;
  }

  .attendance-student-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .72rem;
    margin: .72rem;
    padding: .85rem;
    border: 1px solid #e0e9f1;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(21, 54, 85, .04);
  }

  .attendance-student-row:not(:last-child) {
    border-bottom: 1px solid #e0e9f1;
  }

  .attendance-number {
    display: none;
  }

  .attendance-avatar {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .attendance-student-info strong {
    font-size: .83rem;
  }

  .attendance-status-group {
    grid-template-columns: repeat(4, minmax(0,1fr));
  }

  .attendance-status-option {
    min-height: 43px;
    font-size: .67rem;
  }

  .attendance-note-wrap .form-control {
    min-height: 42px;
  }

  .operational-save-bar {
    position: fixed;
    z-index: 1030;
    left: 10px;
    right: 10px;
    bottom: calc(9px + env(safe-area-inset-bottom));
    margin: 0;
    padding: .5rem;
    border-radius: 16px;
    box-shadow: 0 14px 35px rgba(17, 45, 75, .22);
  }

  .operational-save-bar .btn {
    width: 100%;
    min-width: 0;
    min-height: 50px;
  }

  .journal-side-stack {
    grid-template-columns: 1fr;
  }

  .journal-editor-card {
    overflow: visible;
  }

  .journal-save-bar {
    margin: 0;
  }
}

@media (max-width: 575.98px) {
  .operational-page {
    padding: .88rem .72rem 6.4rem;
  }

  .operational-page-head {
    align-items: flex-start;
    margin-bottom: .9rem;
  }

  .operational-page-head h1 {
    font-size: 1.34rem;
  }

  .operational-page-head p {
    font-size: .75rem;
    line-height: 1.45;
  }

  .operational-period-badge {
    display: none;
  }

  .operational-head-action {
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 0;
  }

  .operational-head-action i {
    margin: 0 !important;
    font-size: 1rem;
  }

  .operational-filter-card {
    padding: .8rem;
    border-radius: 15px;
  }

  .operational-control {
    min-height: 46px;
    font-size: .8rem;
  }

  .schedule-context-card {
    position: relative;
    align-items: flex-start;
    padding: .8rem;
    border-radius: 14px;
  }

  .schedule-context-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .schedule-context-main strong {
    padding-right: 0;
    font-size: .82rem;
    white-space: normal;
  }

  .schedule-context-main small {
    font-size: .65rem;
  }

  .schedule-context-card > .badge {
    display: none;
  }

  .attendance-summary-card {
    gap: .45rem;
  }

  .attendance-summary-item {
    min-height: 67px;
    gap: .48rem;
    padding: .6rem;
    border-radius: 13px;
  }

  .attendance-summary-icon {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
    border-radius: 9px;
    font-size: .82rem;
  }

  .attendance-summary-item strong {
    font-size: 1.08rem;
  }

  .attendance-summary-item > div > span {
    font-size: .6rem;
  }

  .attendance-toolbar {
    padding: .8rem;
  }

  .attendance-toolbar h2,
  .operational-card-head h2 {
    font-size: .9rem;
  }

  .attendance-toolbar-actions {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: .42rem;
  }

  .operational-search-wrap .form-control {
    min-height: 42px;
    font-size: .7rem;
  }

  .attendance-all-present {
    min-height: 42px;
    padding-left: .65rem;
    padding-right: .65rem;
    font-size: .67rem;
  }

  .attendance-student-row {
    margin: .55rem;
    padding: .72rem;
    border-radius: 13px;
  }

  .attendance-status-group {
    gap: .3rem;
  }

  .attendance-status-option {
    min-height: 43px;
    padding: .36rem .2rem;
    border-radius: 9px;
    font-size: .61rem;
  }

  .attendance-status-option i {
    font-size: .75rem;
  }

  .operational-card-head {
    padding: .8rem;
  }

  .operational-card-head .btn {
    min-height: 38px;
    padding: .4rem .55rem;
    font-size: .65rem;
  }

  .journal-form-grid {
    padding: .8rem;
    gap: .85rem;
  }

  .journal-absence-field {
    max-width: none;
  }

  .operational-textarea {
    font-size: .78rem;
  }

  .journal-attendance-grid {
    gap: .35rem;
    padding: .75rem;
  }

  .journal-attendance-grid > div {
    padding: .58rem .2rem;
    border-radius: 10px;
  }

  .journal-attendance-grid strong {
    font-size: .95rem;
  }

  .journal-attendance-grid span {
    font-size: .55rem;
  }

  .recent-journal-item {
    padding: .65rem .72rem;
  }
}

/* =========================================================
   TAHAP 13 - Nilai Semester + reusable mobile-card tables
   ========================================================= */
.grade-page {
  max-width: 1680px;
  margin: 0 auto;
}

.grade-formula-card {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  margin-bottom: 1rem;
  padding: .95rem 1rem;
  border: 1px solid #dce9f3;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(241,248,253,.98), rgba(255,255,255,.98));
}

.grade-formula-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #e8f4ee;
  color: #198754;
  font-size: 1.1rem;
}

.grade-formula-card strong {
  display: block;
  margin-bottom: .15rem;
  color: #19324a;
}

.grade-formula-card p {
  margin: 0;
  color: #617487;
  font-size: .84rem;
  line-height: 1.5;
}

.grade-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .75rem;
}

.grade-summary-item {
  min-height: 86px;
  padding: .9rem 1rem;
  border: 1px solid #e2eaf1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(17,45,75,.045);
}

.grade-summary-item span {
  display: block;
  color: #708294;
  font-size: .74rem;
  font-weight: 600;
}

.grade-summary-item strong {
  display: block;
  margin-top: .2rem;
  color: #19324a;
  font-size: 1.55rem;
  line-height: 1.1;
}

.grade-sheet-card {
  overflow: hidden;
  border: 1px solid #dde7ef;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(17,45,75,.055);
}

.grade-sheet-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.05rem;
  border-bottom: 1px solid #e4ebf1;
}

.grade-sheet-toolbar h2 {
  margin: 0;
  color: #19324a;
  font-size: 1rem;
  font-weight: 700;
}

.grade-sheet-toolbar p {
  margin: .18rem 0 0;
  color: #7a8a99;
  font-size: .72rem;
}

.grade-search-wrap {
  position: relative;
  width: min(330px, 100%);
}

.grade-search-wrap i {
  position: absolute;
  left: .8rem;
  top: 50%;
  transform: translateY(-50%);
  color: #8797a6;
  pointer-events: none;
}

.grade-search-wrap .form-control {
  min-height: 42px;
  padding-left: 2.25rem;
  border-radius: 12px;
}

.grade-desktop-head,
.grade-student-row {
  display: grid;
  grid-template-columns: minmax(210px,1.35fr) minmax(520px,4fr) minmax(92px,.7fr) minmax(108px,.75fr);
  gap: .75rem;
  align-items: center;
}

.grade-desktop-head {
  padding: .65rem 1rem;
  background: #f7fafc;
  border-bottom: 1px solid #e4ebf1;
  color: #718294;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.grade-student-row {
  padding: .85rem 1rem;
  border-bottom: 1px solid #e8eef3;
  transition: background-color .16s ease, box-shadow .16s ease;
}

.grade-student-row:last-child {
  border-bottom: 0;
}

.grade-student-row:focus-within {
  background: #fbfdfc;
  box-shadow: inset 3px 0 0 #198754;
}

.grade-student-info {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .65rem;
}

.grade-student-number {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #f0f5f8;
  color: #607487;
  font-size: .72rem;
  font-weight: 700;
}

.grade-student-info strong {
  display: block;
  overflow: hidden;
  color: #20384e;
  font-size: .83rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grade-student-info span {
  display: block;
  margin-top: .08rem;
  color: #8492a0;
  font-size: .65rem;
}

.grade-scores-area {
  display: grid;
  grid-template-columns: repeat(8, minmax(58px,1fr));
  gap: .38rem;
  min-width: 0;
}

.grade-score-field,
.grade-exam-field {
  margin: 0;
}

.grade-score-field > span,
.grade-exam-field > span {
  display: block;
  margin-bottom: .24rem;
  color: #718294;
  font-size: .59rem;
  font-weight: 700;
  text-align: center;
}

.grade-score-field .form-control,
.grade-exam-field .form-control {
  min-height: 39px;
  padding: .35rem .3rem;
  border-radius: 9px;
  text-align: center;
  font-size: .77rem;
  font-weight: 600;
}

.grade-score-field .form-control:focus,
.grade-exam-field .form-control:focus {
  border-color: #53a879;
  box-shadow: 0 0 0 .16rem rgba(25,135,84,.10);
}

.grade-exam-field > span {
  color: #526b82;
}

.grade-result-box {
  min-height: 59px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .45rem .35rem;
  border: 1px solid #dfe8ef;
  border-radius: 12px;
  background: #f8fafb;
  text-align: center;
}

.grade-result-box > span {
  color: #768696;
  font-size: .56rem;
  font-weight: 700;
  text-transform: uppercase;
}

.grade-result-box strong {
  margin: .08rem 0;
  color: #344d63;
  font-size: 1rem;
}

.grade-result-box small {
  color: #8a98a5;
  font-size: .55rem;
}

.grade-student-row.grade-complete .grade-result-box {
  border-color: #cfe8db;
  background: #f1faf5;
}

.grade-student-row.grade-complete .grade-result-box strong {
  color: #177548;
}

.grade-more-toggle {
  display: none;
}

.grade-save-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: .8rem 1rem;
  border: 1px solid #dfe8ef;
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 24px rgba(17,45,75,.06);
}

.grade-save-note {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: #6b7f91;
  font-size: .72rem;
}

.grade-save-note i {
  color: #198754;
}

.grade-save-bar .btn {
  min-width: 155px;
  min-height: 44px;
  border-radius: 11px;
  font-weight: 700;
}

.grade-no-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 110px;
  color: #7c8c99;
  font-size: .8rem;
}

/* Reusable simple-table mobile card behavior (opt-in with data-mobile-cards). */
@media (max-width: 767.98px) {
  .mobile-card-table-wrap {
    overflow: visible !important;
  }

  table[data-mobile-cards="true"] {
    display: block;
    width: 100%;
    margin: 0;
    border: 0 !important;
  }

  table[data-mobile-cards="true"] thead {
    display: none;
  }

  table[data-mobile-cards="true"] tbody {
    display: block;
    width: 100%;
    padding: .35rem;
  }

  table[data-mobile-cards="true"] tbody tr {
    display: block;
    width: 100%;
    margin: .5rem 0;
    padding: .58rem .7rem;
    border: 1px solid #e1e9ef !important;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(17,45,75,.045);
  }

  table[data-mobile-cards="true"] tbody td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
    width: 100%;
    min-height: 34px;
    padding: .42rem .12rem !important;
    border: 0 !important;
    border-bottom: 1px dashed #edf1f4 !important;
    text-align: right !important;
    font-size: .74rem;
    white-space: normal !important;
  }

  table[data-mobile-cards="true"] tbody td:last-child {
    border-bottom: 0 !important;
  }

  table[data-mobile-cards="true"] tbody td::before {
    content: attr(data-label);
    flex: 0 0 34%;
    color: #738597;
    font-size: .64rem;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
  }

  table[data-mobile-cards="true"] tbody td.mobile-card-empty {
    display: block;
    padding: 1.2rem .5rem !important;
    text-align: center !important;
  }

  table[data-mobile-cards="true"] tbody td.mobile-card-empty::before {
    display: none;
  }

  table[data-mobile-cards="true"] tbody td[data-label="Aksi"] {
    align-items: center;
  }

  table[data-mobile-cards="true"] tbody td[data-label="Aksi"] > * {
    margin-top: .1rem;
  }

  table[data-mobile-cards="true"] .btn-sm {
    min-height: 36px;
  }
}

@media (max-width: 991.98px) {
  .grade-page {
    padding-bottom: 5.8rem;
  }

  .grade-desktop-head {
    display: none;
  }

  .grade-student-list {
    padding: .35rem;
    background: #f7fafc;
  }

  .grade-student-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(78px,.25fr);
    gap: .8rem;
    margin: .55rem;
    padding: .82rem;
    border: 1px solid #e0e9ef;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(17,45,75,.045);
  }

  .grade-student-info {
    grid-column: 1 / -1;
    padding-bottom: .55rem;
    border-bottom: 1px solid #edf1f4;
  }

  .grade-student-info strong {
    font-size: .86rem;
    white-space: normal;
  }

  .grade-scores-area {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: .48rem;
  }

  .grade-score-secondary {
    display: none;
  }

  .grade-student-row.grade-show-more .grade-score-secondary {
    display: block;
  }

  .grade-more-toggle {
    grid-column: 1 / -1;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    border: 1px dashed #ccd9e3;
    border-radius: 10px;
    background: #f8fafb;
    color: #597086;
    font-size: .68rem;
    font-weight: 700;
  }

  .grade-exam-field {
    min-width: 0;
  }

  .grade-exam-field > span {
    text-align: left;
  }

  .grade-result-box {
    min-height: 62px;
  }

  .grade-save-bar {
    position: fixed;
    z-index: 1031;
    left: 10px;
    right: 10px;
    bottom: calc(9px + env(safe-area-inset-bottom));
    margin: 0;
    padding: .5rem;
    border-radius: 15px;
    box-shadow: 0 14px 35px rgba(17,45,75,.22);
  }

  .grade-save-note {
    display: none;
  }

  .grade-save-bar .btn {
    width: 100%;
    min-width: 0;
    min-height: 50px;
  }
}

@media (max-width: 575.98px) {
  .grade-formula-card {
    gap: .7rem;
    padding: .78rem;
    border-radius: 14px;
  }

  .grade-formula-icon {
    width: 37px;
    height: 37px;
    flex-basis: 37px;
  }

  .grade-formula-card p {
    font-size: .7rem;
  }

  .grade-summary-grid {
    gap: .45rem;
  }

  .grade-summary-item {
    min-height: 73px;
    padding: .65rem;
    border-radius: 13px;
  }

  .grade-summary-item span {
    font-size: .6rem;
  }

  .grade-summary-item strong {
    font-size: 1.25rem;
  }

  .grade-sheet-card {
    border-radius: 15px;
  }

  .grade-sheet-toolbar {
    display: block;
    padding: .8rem;
  }

  .grade-sheet-toolbar h2 {
    font-size: .9rem;
  }

  .grade-sheet-toolbar p {
    font-size: .64rem;
  }

  .grade-search-wrap {
    width: 100%;
    margin-top: .7rem;
  }

  .grade-search-wrap .form-control {
    min-height: 43px;
    font-size: .74rem;
  }

  .grade-student-list {
    padding: .1rem;
  }

  .grade-student-row {
    margin: .52rem;
    padding: .72rem;
    gap: .65rem;
    border-radius: 13px;
  }

  .grade-student-number {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
  }

  .grade-scores-area {
    gap: .38rem;
  }

  .grade-score-field > span,
  .grade-exam-field > span {
    font-size: .56rem;
  }

  .grade-score-field .form-control,
  .grade-exam-field .form-control {
    min-height: 42px;
    font-size: .75rem;
  }

  .grade-result-box > span,
  .grade-result-box small {
    font-size: .52rem;
  }

  .grade-result-box strong {
    font-size: 1rem;
  }
}

/* =========================================================
   TAHAP 14 - STANDARDISASI FORM, FILTER, TOAST & KONFIRMASI
   ========================================================= */
.app-toast-stack {
  z-index: 1095;
  margin-top: 64px;
  width: min(390px, calc(100vw - 20px));
}

.app-toast {
  width: 100%;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(17,45,75,.18);
}

.app-toast .toast-body {
  padding: .9rem 1rem;
  font-size: .82rem;
  line-height: 1.45;
}

.app-toast-icon { font-size: 1.05rem; margin-top: .08rem; }
.app-toast-success { border-left: 4px solid #198754; }
.app-toast-success .app-toast-icon { color: #198754; }
.app-toast-danger { border-left: 4px solid #dc3545; }
.app-toast-danger .app-toast-icon { color: #dc3545; }
.app-toast-warning { border-left: 4px solid #ffc107; }
.app-toast-warning .app-toast-icon { color: #9a7400; }

.app-confirm-modal { border-radius: 20px; }
.app-confirm-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #fff1f2;
  color: #dc3545;
  font-size: 1.35rem;
}

.app-filter-toggle {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 12px;
  font-weight: 700;
  color: #334e68;
}

.app-filter-toggle .app-filter-chevron {
  transition: transform .18s ease;
}
.app-filter-toggle.is-open .app-filter-chevron { transform: rotate(180deg); }

.app-form-card {
  border-radius: 18px;
  overflow: hidden;
}

.app-standard-form .form-label,
.app-filter-form .form-label {
  margin-bottom: .4rem;
  font-size: .76rem;
  font-weight: 700;
  color: #465f73;
}

.app-standard-form .form-control,
.app-standard-form .form-select,
.app-filter-form .form-control,
.app-filter-form .form-select {
  min-height: 44px;
  border-radius: 11px;
  border-color: #d8e2e9;
}

.app-standard-form .form-control:focus,
.app-standard-form .form-select:focus,
.app-filter-form .form-control:focus,
.app-filter-form .form-select:focus {
  border-color: rgba(25,135,84,.58);
  box-shadow: 0 0 0 .2rem rgba(25,135,84,.10);
}

.app-form-actions {
  margin-top: .3rem;
  padding-top: 1rem;
  border-top: 1px solid #edf1f4;
}

.app-form-actions .btn { min-height: 44px; }

@media (max-width: 767.98px) {
  .app-toast-stack {
    top: auto !important;
    bottom: calc(74px + env(safe-area-inset-bottom));
    right: 10px !important;
    left: 10px !important;
    width: auto;
    margin-top: 0;
    padding: 0 !important;
  }

  .app-mobile-filter-form {
    display: none;
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid #edf1f4;
  }

  .app-mobile-filter-form.is-open { display: flex; }

  .app-mobile-filter-form > [class*="col-"] {
    width: 100%;
  }

  .app-mobile-filter-form .btn,
  .app-mobile-filter-form .form-control,
  .app-mobile-filter-form .form-select {
    min-height: 46px;
  }

  .app-form-card .card-body { padding: .9rem; }
  .app-standard-form { --bs-gutter-y: .85rem; }

  .app-form-actions {
    position: sticky;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 8;
    padding: .55rem;
    margin-left: -.2rem;
    margin-right: -.2rem;
    border: 1px solid #dde7ed;
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 10px 28px rgba(17,45,75,.16);
    backdrop-filter: blur(8px);
  }

  .app-form-actions .btn:first-child { flex: 1 1 auto; }
}

/* =========================================================
   TAHAP 15 - DASHBOARD ADMIN & KEPALA MADRASAH
   ========================================================= */
.dashboard-hero-admin {
  background:
    radial-gradient(circle at 91% 7%, rgba(83,216,173,.24), transparent 28%),
    linear-gradient(135deg, #071a3a 0%, #0b456f 54%, #08744f 100%);
}

.dashboard-hero-kepsek {
  background:
    radial-gradient(circle at 90% 5%, rgba(244,197,66,.24), transparent 28%),
    linear-gradient(135deg, #111b3c 0%, #283b76 56%, #4964aa 100%);
}

.admin-attention-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .75rem;
}

.admin-attention-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .9rem;
  border-radius: 16px;
  border: 1px solid #dce8f2;
  background: #fbfdff;
  color: #253d56;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.admin-attention-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(17,45,75,.08);
  color: #163b62;
}

.admin-attention-card.warning { background:#fffaf0; border-color:#f3dfb8; }
.admin-attention-card.danger { background:#fff5f5; border-color:#f1cfd4; }
.admin-attention-card.info { background:#f4f9ff; border-color:#d6e7f8; }

.admin-attention-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #eaf4ff;
  color: #0b65bd;
  font-size: 1.12rem;
}
.admin-attention-card.warning .admin-attention-icon { background:#ffedc5; color:#9a6200; }
.admin-attention-card.danger .admin-attention-icon { background:#ffe1e5; color:#b02a3d; }

.admin-attention-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.admin-attention-copy strong {
  color: var(--siguwa-navy);
  font-size: .82rem;
  line-height: 1.3;
}

.admin-attention-copy small {
  color: var(--siguwa-muted);
  font-size: .69rem;
  line-height: 1.4;
}

.admin-attention-arrow { color:#8da0b2; font-size:.84rem; }

.admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .75rem;
}

.admin-metric-card {
  min-height: 104px;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem;
  border-radius: 16px;
  border: 1px solid #e0eaf3;
  background: linear-gradient(180deg,#fff,#f8fbfe);
}

.admin-metric-icon,
.admin-role-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #eaf5ff;
  color: #0b65bd;
  font-size: 1.08rem;
}

.admin-metric-card > div {
  min-width:0;
  display:flex;
  flex-direction:column;
}

.admin-metric-card strong {
  color:var(--siguwa-navy);
  font-size:1.35rem;
  line-height:1;
  font-weight:850;
}

.admin-metric-card span:last-child {
  margin-top:.35rem;
  color:var(--siguwa-muted);
  font-size:.7rem;
  font-weight:700;
}

.admin-role-list { display:grid; gap:.65rem; }
.admin-role-item {
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:.75rem;
  align-items:center;
  padding:.68rem .75rem;
  border-radius:14px;
  background:#f9fbfd;
  border:1px solid #e4edf4;
}
.admin-role-body { min-width:0; }
.admin-role-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  margin-bottom:.38rem;
}
.admin-role-top strong { font-size:.78rem; color:var(--siguwa-navy); }
.admin-role-top span { font-size:.68rem; color:var(--siguwa-muted); font-weight:700; }
.admin-role-track { height:6px; overflow:hidden; border-radius:999px; background:#e8eef4; }
.admin-role-track span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#0b4ea2,#0e75d9); }

.admin-readiness-list { display:grid; gap:.18rem; }
.admin-readiness-row {
  min-height:47px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.65rem 0;
  border-bottom:1px solid #edf1f4;
}
.admin-readiness-row:last-child { border-bottom:0; }
.admin-readiness-row > span { font-size:.76rem; color:#51677c; font-weight:650; }
.admin-readiness-row strong {
  padding:.28rem .52rem;
  border-radius:999px;
  font-size:.68rem;
  font-weight:800;
  white-space:nowrap;
}
.admin-readiness-row strong.ok { color:#08744f; background:#e8f7f1; }
.admin-readiness-row strong.warn { color:#94610b; background:#fff3d7; }
.admin-readiness-row strong.bad { color:#ad3045; background:#ffe8eb; }

.kepsek-kpi-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.8rem;
}

.kepsek-kpi-card {
  min-height:132px;
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:1rem;
  border-radius:18px;
  border:1px solid #dde8f1;
  background:#fbfdff;
}

.kepsek-kpi-icon {
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:#e8f3ff;
  color:#0b65bd;
  font-size:1.24rem;
}
.kepsek-kpi-card.siswa .kepsek-kpi-icon { background:#eaf8f2; color:#08744f; }
.kepsek-kpi-card.kelas .kepsek-kpi-icon { background:#fff0e4; color:#b35a13; }
.kepsek-kpi-card.jurnal .kepsek-kpi-icon { background:#fff0f2; color:#b33148; }

.kepsek-kpi-copy { min-width:0; display:flex; flex-direction:column; }
.kepsek-kpi-copy > span { color:var(--siguwa-muted); font-size:.72rem; font-weight:700; line-height:1.25; }
.kepsek-kpi-copy strong { margin-top:.3rem; color:var(--siguwa-navy); font-size:1.45rem; line-height:1.05; font-weight:850; }
.kepsek-kpi-copy small { margin-top:.25rem; color:#618096; font-size:.68rem; font-weight:800; }

.kepsek-quick-grid { grid-template-columns:1fr; }
.kepsek-quick-grid .dashboard-quick-action { min-height:76px; }

.kepsek-attention-list { display:grid; gap:.55rem; }
.kepsek-attention-item {
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:.62rem;
  align-items:start;
  padding:.72rem;
  border-radius:13px;
  border:1px solid #e3ebf2;
  background:#fafcfe;
}
.kepsek-attention-item > span {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:#eaf4ff;
  color:#0b65bd;
}
.kepsek-attention-item.warning { background:#fff9ed; border-color:#f1deb6; }
.kepsek-attention-item.warning > span { background:#ffedc8; color:#956008; }
.kepsek-attention-item.danger { background:#fff4f5; border-color:#f1cfd5; }
.kepsek-attention-item.danger > span { background:#ffe1e6; color:#ad3046; }
.kepsek-attention-item.info { background:#f4f9ff; border-color:#d6e7f7; }
.kepsek-attention-item div { min-width:0; display:flex; flex-direction:column; gap:.18rem; }
.kepsek-attention-item strong { color:var(--siguwa-navy); font-size:.76rem; line-height:1.3; }
.kepsek-attention-item small { color:var(--siguwa-muted); font-size:.66rem; line-height:1.4; }

.kepsek-section-description { margin-top:.24rem; color:var(--siguwa-muted); font-size:.72rem; }
.kepsek-chart-wrap { position:relative; min-height:300px; }
.kepsek-chart-wrap canvas { width:100% !important; height:300px !important; }

@media (max-width: 1199.98px) {
  .admin-attention-grid { grid-template-columns:1fr; }
  .admin-metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width: 767.98px) {
  .admin-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
  .admin-metric-card { min-height:92px; padding:.7rem; gap:.6rem; }
  .admin-metric-icon { width:37px; height:37px; flex-basis:37px; border-radius:11px; }
  .admin-metric-card strong { font-size:1.2rem; }
  .admin-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }

  .kepsek-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
  .kepsek-kpi-card { min-height:108px; display:block; padding:.72rem; }
  .kepsek-kpi-icon { width:36px; height:36px; margin-bottom:.55rem; border-radius:11px; font-size:1rem; }
  .kepsek-kpi-copy strong { font-size:1.18rem; }
  .kepsek-kpi-copy > span { font-size:.64rem; }
  .kepsek-chart-wrap { min-height:240px; }
  .kepsek-chart-wrap canvas { height:240px !important; }
}

@media (max-width: 575.98px) {
  .admin-attention-card { grid-template-columns:38px minmax(0,1fr) auto; padding:.72rem; gap:.58rem; border-radius:14px; }
  .admin-attention-icon { width:38px; height:38px; border-radius:11px; font-size:1rem; }
  .admin-attention-copy strong { font-size:.75rem; }
  .admin-attention-copy small { font-size:.64rem; }
  .admin-role-item { padding:.6rem; }
  .admin-role-icon { width:37px; height:37px; flex-basis:37px; }

  .kepsek-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kepsek-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kepsek-quick-grid .dashboard-quick-action:last-child { grid-column:1 / -1; }
  .kepsek-attention-item { padding:.65rem; }
  .kepsek-section-description { font-size:.66rem; }
}

/* ================================================================
   PATCH TAHAP 16 - NAVIGATION, PROFILE, LOADING & EMPTY STATE
   ================================================================ */

.min-w-0 { min-width: 0 !important; }

.app-skip-link {
  position: fixed;
  left: 12px;
  top: -80px;
  z-index: 3000;
  padding: .65rem .9rem;
  border-radius: 10px;
  background: #fff;
  color: var(--siguwa-navy);
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(7, 26, 58, .24);
  transition: top .15s ease;
}

.app-skip-link:focus { top: 12px; }

/* Topbar profile */
.app-profile-toggle {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 46px;
  padding: .25rem .45rem .25rem .3rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  color: #fff;
}

.app-profile-toggle:hover,
.app-profile-toggle:focus,
.app-profile-toggle.show {
  color: #fff;
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.28);
}

.app-profile-toggle::after { display: none; }

.app-profile-avatar {
  position: relative;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(135deg, #f4c542, #ffd966);
  color: #08244d;
  border: 1px solid rgba(255,255,255,.34);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .03em;
}

.app-profile-avatar.large {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  border-radius: 15px;
  font-size: .9rem;
}

.app-profile-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

.app-profile-avatar.photo-fallback img { display: none !important; }

.app-profile-initials {
  position: relative;
  z-index: 1;
}

.app-profile-copy {
  max-width: 190px;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.08;
}

.app-profile-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .78rem;
  font-weight: 800;
}

.app-profile-role {
  margin-top: .18rem;
  color: #c9e4ff;
  font-size: .66rem;
  font-weight: 600;
}

.app-profile-chevron { font-size: .72rem; opacity: .8; }

.app-profile-menu {
  width: min(330px, calc(100vw - 24px));
  padding: .7rem;
  margin-top: .55rem !important;
  border-radius: 18px;
}

.app-profile-menu-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .45rem .45rem .65rem;
}

.app-profile-menu-head strong {
  display: block;
  max-width: 220px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--siguwa-navy);
  font-size: .92rem;
}

.app-profile-menu-head small {
  display: block;
  margin-top: .15rem;
  color: var(--siguwa-muted);
  font-size: .72rem;
}

.app-profile-roles {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: 0 .45rem .45rem;
}

.app-role-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .48rem;
  border-radius: 999px;
  background: #eef6ff;
  border: 1px solid #d6e8fb;
  color: #0b4ea2;
  font-size: .66rem;
  font-weight: 800;
}

.app-profile-menu-label {
  padding: .25rem .5rem .35rem;
  color: #7b8ba0;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.app-profile-menu-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 42px;
  padding: .55rem .65rem;
  border-radius: 10px;
  color: #21364e;
  font-size: .79rem;
  font-weight: 700;
}

.app-profile-menu-item:hover { background: #f2f7fc; }
.app-profile-menu-item i { width: 20px; text-align: center; color: #0b69c4; }
.app-profile-menu-item.text-danger i { color: #dc3545; }

/* Sidebar */
.app-sidebar {
  flex-direction: column;
  gap: .85rem;
  min-height: calc(100vh - 64px);
  padding: 1rem !important;
}

.app-sidebar .sidebar-brand-panel { margin-bottom: 0 !important; }

.sidebar-brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(244,197,66,.16);
  border: 1px solid rgba(244,197,66,.28);
  color: var(--siguwa-gold);
  font-size: 1.05rem;
}

.sidebar-search-wrap {
  position: relative;
}

.sidebar-search-wrap > i {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  color: #9ec9f5;
  font-size: .82rem;
}

.sidebar-search {
  height: 40px;
  padding-left: 2.15rem;
  border-radius: 12px;
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: .78rem;
}

.sidebar-search::placeholder { color: #a7caec; }
.sidebar-search:focus {
  background: rgba(255,255,255,.12);
  color: #fff;
  border-color: rgba(244,197,66,.4);
  box-shadow: 0 0 0 .18rem rgba(244,197,66,.12);
}

.sidebar-nav {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: .15rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}

.sidebar-menu-label {
  margin: .1rem .65rem .45rem;
  color: #88b9e8;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.sidebar-entry { margin-bottom: .16rem; }
.sidebar-entry > a { margin-bottom: 0; }

.sidebar-dropdown-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem;
  border: 1px solid transparent;
  border-radius: .75rem;
  background: transparent;
  color: #d6e9ff;
  font-weight: 700;
  text-align: left;
}

.sidebar-dropdown-toggle:hover,
.sidebar-dropdown-toggle:not(.collapsed) {
  color: #fff;
  background: rgba(255,255,255,.08);
}

.sidebar-chevron { transition: transform .18s ease; }
.sidebar-dropdown-toggle:not(.collapsed) .sidebar-chevron { transform: rotate(180deg); }

.sidebar-submenu {
  padding: .18rem 0 .28rem .75rem;
}

.sidebar .sidebar-subitem {
  padding: .58rem .75rem;
  font-size: .76rem;
  font-weight: 650;
}

.sidebar-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 120px;
  color: #a9caeb;
  text-align: center;
  font-size: .76rem;
}

.sidebar-search-empty i { font-size: 1.35rem; }

.sidebar-footer-panel {
  flex: 0 0 auto;
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.11);
}

.sidebar-session-copy {
  display: flex;
  flex-direction: column;
  gap: .08rem;
  padding: 0 .65rem .5rem;
  color: #fff;
}

.sidebar-session-label {
  color: #90bde7;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.sidebar-session-copy strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .75rem;
}

.sidebar .sidebar-logout-link {
  color: #ffd8dc;
  background: rgba(220,53,69,.08);
}

.sidebar .sidebar-logout-link:hover {
  color: #fff;
  background: rgba(220,53,69,.18);
  border-color: rgba(255,140,151,.24);
  box-shadow: inset 4px 0 0 #ff8d98;
}

.dashboard-offcanvas .offcanvas-header {
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.dashboard-offcanvas .offcanvas-body { padding-top: .25rem !important; }

/* Empty states */
.app-table-empty-cell { padding: 0 !important; background: #fbfdff !important; }

.app-empty-state {
  min-height: 185px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: 1.4rem;
  text-align: center;
  color: var(--siguwa-muted);
}

.app-empty-state.compact { min-height: 145px; }

.app-empty-state .app-empty-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: .25rem;
  border-radius: 15px;
  background: #edf6ff;
  color: #0e75d9;
  font-size: 1.35rem;
}

.app-empty-state strong {
  color: var(--siguwa-navy);
  font-size: .9rem;
}

.app-empty-state > span:last-child {
  max-width: 520px;
  font-size: .76rem;
}

/* Loading state */
.app-submit-loading {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  pointer-events: none;
  opacity: .9;
}

.app-form-submitting {
  position: relative;
}

.app-form-submitting input,
.app-form-submitting select,
.app-form-submitting textarea {
  transition: opacity .15s ease;
}

.app-form-submitting [type="submit"] { cursor: wait; }

/* Status badge consistency */
.badge.text-bg-warning,
.badge.bg-warning {
  background: linear-gradient(135deg, #f3b61f, #ffd266) !important;
  color: #5e4300 !important;
}

.badge.text-bg-secondary,
.badge.bg-secondary {
  background: linear-gradient(135deg, #64748b, #8795a8) !important;
  color: #fff !important;
}

.badge.text-bg-primary,
.badge.bg-primary {
  background: linear-gradient(135deg, #0b4ea2, #0e75d9) !important;
  color: #fff !important;
}

@media (max-width: 991.98px) {
  .dashboard-topbar .container-fluid { min-height: 58px; }
  .app-profile-toggle {
    min-height: 42px;
    padding: .15rem;
    border-color: transparent;
    background: transparent;
  }
  .app-profile-toggle:hover,
  .app-profile-toggle:focus,
  .app-profile-toggle.show { background: rgba(255,255,255,.1); }
  .app-profile-avatar { width: 36px; height: 36px; flex-basis: 36px; border-radius: 11px; }
  .app-mobile-sidebar { width: min(330px, 88vw) !important; }
  .app-mobile-sidebar .app-sidebar { min-height: 100%; height: 100%; }
  .app-toast-stack { top: 64px !important; }
}

@media (max-width: 575.98px) {
  .dashboard-topbar .dashboard-logo-box {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex-basis: 40px !important;
    border-radius: 12px !important;
  }

  .dashboard-topbar .dashboard-logo-box img.dashboard-logo,
  .dashboard-topbar img.dashboard-logo {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
  }

  .dashboard-brand { gap: .5rem; }
  .dashboard-brand-title { font-size: .88rem; }
  .dashboard-menu-btn { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; }
  .app-profile-menu { margin-right: -.35rem !important; }
}

.app-loading-state {
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: 1rem;
  color: #5c7188;
  font-size: .78rem;
  font-weight: 700;
}

.app-loading-state .spinner-border { color: var(--siguwa-blue-2); }

/* =====================================================================
   TAHAP 17 - Final UI consistency audit
   Public forms, authentication, Guru Piket, and legacy report polish
   ===================================================================== */

.dashboard-mini-stats {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;
}
.dashboard-mini-stats > div {
  min-width:0;
  padding:.9rem;
  border:1px solid #e6edf4;
  border-radius:14px;
  background:#f8fafc;
}
.dashboard-mini-stats strong {
  display:block;
  color:#16324f;
  font-size:1.4rem;
  line-height:1.15;
}
.dashboard-mini-stats span {
  display:block;
  margin-top:.25rem;
  color:#64748b;
  font-size:.76rem;
}

/* Login */
.app-auth-card {
  max-width:520px;
  margin-inline:auto;
}
.app-auth-eyebrow,
.public-form-eyebrow {
  display:inline-flex;
  align-items:center;
  color:#168a67;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.app-auth-alert {
  border:0;
  border-radius:14px;
  font-size:.88rem;
}
.app-input-group .input-group-text {
  min-width:48px;
  justify-content:center;
  border-color:#d7e1ea;
  background:#f8fafc;
  color:#557086;
}
.app-input-group .form-control,
.app-input-group .btn {
  border-color:#d7e1ea;
}
.app-password-toggle {
  min-width:50px;
}
.app-auth-submit {
  min-height:52px;
  font-weight:750;
}
.app-auth-divider {
  display:flex;
  align-items:center;
  gap:.8rem;
  margin:1.35rem 0;
  color:#94a3b8;
  font-size:.75rem;
}
.app-auth-divider::before,
.app-auth-divider::after {
  content:"";
  flex:1;
  height:1px;
  background:#e5ebf1;
}

/* Public student permission form */
.public-form-page {
  min-height:100vh;
  background:
    radial-gradient(circle at top left, rgba(27,170,126,.10), transparent 32rem),
    linear-gradient(180deg,#f6fbf9 0,#f7f9fc 48%,#f4f7fa 100%);
  color:#1e293b;
}
.public-form-shell { max-width:900px; }
.public-form-hero {
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.2rem 1.35rem;
  border:1px solid rgba(212,227,220,.95);
  border-radius:22px;
  background:rgba(255,255,255,.92);
  box-shadow:0 14px 36px rgba(35,74,61,.08);
}
.public-brand-mark {
  width:70px;
  height:70px;
  flex:0 0 70px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:#fff;
  border:1px solid #dfeae5;
  box-shadow:0 8px 24px rgba(15,83,62,.08);
}
.public-brand-mark img {
  display:block;
  max-width:48px;
  max-height:48px;
  object-fit:contain;
}
.public-form-hero h1 {
  margin:.15rem 0 .15rem;
  font-size:clamp(1.35rem,2vw,1.8rem);
  font-weight:800;
  color:#173b32;
}
.public-form-hero p {
  margin:0;
  color:#64748b;
  font-size:.9rem;
}
.public-form-card,
.public-success-card {
  border-radius:20px;
  overflow:hidden;
}
.public-form-card .form-label {
  font-size:.8rem;
  font-weight:700;
  color:#52677a;
}
.public-form-card .form-control,
.public-form-card .form-select {
  min-height:46px;
  border-color:#d8e2ea;
  border-radius:12px;
}
.public-form-card textarea.form-control { min-height:112px; }
.public-form-card .form-control:focus,
.public-form-card .form-select:focus {
  border-color:#7ac6ad;
  box-shadow:0 0 0 .2rem rgba(31,154,113,.12);
}
.public-form-section-icon {
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  color:#168a67;
  background:#eaf8f3;
  font-size:1.05rem;
}
.public-step-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.7rem;
}
.public-step-item {
  display:flex;
  align-items:center;
  gap:.65rem;
  min-width:0;
  padding:.75rem .85rem;
  border:1px solid #e2e8f0;
  border-radius:15px;
  background:rgba(255,255,255,.72);
  color:#718096;
}
.public-step-item > span {
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e9eef3;
  font-size:.78rem;
  font-weight:800;
}
.public-step-item strong,
.public-step-item small { display:block; }
.public-step-item strong { font-size:.78rem; color:#506174; }
.public-step-item small { margin-top:.05rem; font-size:.67rem; }
.public-step-item.active,
.public-step-item.done {
  border-color:#bfe5d7;
  background:#f1fbf7;
}
.public-step-item.active > span,
.public-step-item.done > span {
  color:#fff;
  background:#199c74;
}
.public-step-item.active strong,
.public-step-item.done strong { color:#156b51; }
.public-form-alert {
  border:0;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(127,29,29,.06);
}
.public-inline-empty {
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.75rem .85rem;
  border-radius:12px;
  background:#f8fafc;
  color:#64748b;
  font-size:.82rem;
}
.public-inline-empty i { color:#94a3b8; font-size:1.05rem; }
.public-success-card { max-width:650px; }
.public-success-icon {
  width:78px;
  height:78px;
  display:grid;
  place-items:center;
  margin:0 auto 1rem;
  border-radius:50%;
  background:#e8f8f1;
  color:#16956d;
  font-size:2.45rem;
}
.public-success-note {
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  padding:.8rem .9rem;
  border-radius:14px;
  background:#f7fafc;
  color:#64748b;
  font-size:.82rem;
  text-align:left;
}
.public-success-note i { color:#168a67; margin-top:.05rem; }

/* Final polish for opt-in mobile-card tables that contain forms. */
@media (max-width: 767.98px) {
  table[data-mobile-cards="true"] .form-control,
  table[data-mobile-cards="true"] .form-select {
    width:100%;
    min-width:0;
  }
  table[data-mobile-cards="true"] td[data-label="Aksi"] .d-inline,
  table[data-mobile-cards="true"] td[data-label="Aksi"] form {
    display:flex !important;
    flex-wrap:wrap;
    gap:.4rem;
  }
  table[data-mobile-cards="true"] td[data-label="Aksi"] .btn {
    min-height:40px;
  }
  .dashboard-mini-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .public-form-shell { padding-inline:.85rem; }
  .public-form-hero {
    align-items:flex-start;
    padding:1rem;
    border-radius:17px;
  }
  .public-brand-mark {
    width:54px;
    height:54px;
    flex-basis:54px;
    border-radius:16px;
  }
  .public-brand-mark img { max-width:38px; max-height:38px; }
  .public-form-hero p { font-size:.8rem; }
  .public-step-grid { grid-template-columns:1fr; gap:.45rem; }
  .public-step-item { padding:.6rem .75rem; }
  .public-step-item small { display:none; }
  .public-form-card,
  .public-success-card { border-radius:17px; }
  .public-form-card .card-body { padding:1rem !important; }
  .public-form-card .btn-lg,
  .public-success-card .btn-lg { min-height:48px; width:100%; }
  .app-auth-card { padding:1.25rem !important; border-radius:18px; }
  .app-auth-page .form-control-lg { font-size:1rem; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .public-form-shell { max-width:820px; }
}

.matrix-scroll-hint {
  display:flex;
  align-items:center;
  gap:.45rem;
  padding:.55rem .7rem;
  border:1px solid #dfe7ef;
  border-radius:11px;
  background:#f8fafc;
  color:#6b7d91;
  font-size:.75rem;
}
.matrix-scroll-hint i { color:#168a67; }
.matrix-table-wrap {
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:#bdcad7 transparent;
}
.matrix-table-wrap::-webkit-scrollbar { height:7px; }
.matrix-table-wrap::-webkit-scrollbar-thumb { background:#bdcad7; border-radius:999px; }

@media (max-width: 767.98px) {
  .matrix-table-wrap {
    border-radius:12px;
  }
  .matrix-table {
    margin-bottom:0;
  }
}