/* ============================================================
   SDN 1 MENGWITANI — ADMIN DESIGN SYSTEM
   Loaded after app.min.css: overrides the stock admin template
   with the school's brand identity (same tokens as the public
   landing site) and a tighter, less generic component language.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --brand-primary: #C0392B;
  --brand-primary-dark: #8F2A1F;
  --brand-primary-tint: #F4DAD5;
  --brand-gold: #D19A34;
  --brand-gold-tint: #F3E3C2;
  --brand-green: #2E6A4C;
  --brand-green-tint: #DCEBE1;
  --brand-blue: #3B6DA8;
  --brand-blue-tint: #DCE7F3;
  --brand-ink: #241F19;
  --brand-muted: #6E6355;
  --brand-border: #E6E0D5;
  --brand-bg: #F6F4EF;
  --brand-card: #FFFFFF;
  --brand-radius-s: 8px;
  --brand-radius-m: 12px;
  --brand-radius-l: 18px;
  --brand-shadow: 0 8px 24px -12px rgba(36, 31, 25, 0.18);
  --brand-ease: cubic-bezier(0.23, 1, 0.32, 1);

  --bs-font-sans-serif: "Plus Jakarta Sans", sans-serif;
  --bs-body-bg: var(--brand-bg);
  --bs-body-bg-rgb: 246, 244, 239;
  --bs-body-color: var(--brand-ink);
  --bs-border-color: var(--brand-border);
  --bs-border-color-translucent: var(--brand-border);
  --bs-border-radius: var(--brand-radius-m);
  --bs-border-radius-sm: var(--brand-radius-s);
  --bs-border-radius-lg: var(--brand-radius-l);

  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: 192, 57, 43;
  --bs-blue: var(--brand-primary);
  --bs-success: var(--brand-green);
  --bs-success-rgb: 46, 106, 76;
  --bs-green: var(--brand-green);
  --bs-warning: var(--brand-gold);
  --bs-warning-rgb: 209, 154, 52;
  --bs-yellow: var(--brand-gold);
  --bs-info: var(--brand-blue);
  --bs-info-rgb: 59, 109, 168;
  --bs-cyan: var(--brand-blue);
}

[data-bs-theme="dark"] {
  --brand-ink: #F3EFE6;
  --brand-muted: #B9AD97;
  --brand-border: #3A342B;
  --brand-bg: #1B1712;
  --brand-card: #241F19;
}

body,
h1, h2, h3, h4, h5, h6,
.card-title, .page-title-box h4 {
  font-family: "Plus Jakarta Sans", sans-serif;
}

.page-title-box h4,
.card-title,
h1, h2, h3 {
  font-family: "Fraunces", serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

a { transition: color 150ms var(--brand-ease); }
.min-w-0 { min-width: 0; }

:focus-visible {
  outline: 3px solid var(--brand-gold);
  outline-offset: 2px;
}

/* ---------- CARDS ---------- */
.card {
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-m);
  box-shadow: var(--brand-shadow);
}
.card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--brand-border);
  padding: 18px 22px;
}
.card .card-body { padding: 22px; }

/* ---------- BUTTONS ---------- */
.btn {
  border-radius: var(--brand-radius-s);
  font-weight: 600;
  transition: transform 150ms var(--brand-ease), background-color 150ms var(--brand-ease), border-color 150ms var(--brand-ease), box-shadow 150ms var(--brand-ease);
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
}
.btn-soft-primary { background: var(--brand-primary-tint); color: var(--brand-primary-dark); border-color: transparent; }
.btn-soft-primary:hover { background: var(--brand-primary); color: #fff; }

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

/* ---------- TABLES ---------- */
.table > thead {
  background: var(--brand-bg);
}
.table > thead th {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-muted);
  border-bottom: 1px solid var(--brand-border);
  padding: 12px 16px;
}
.table > tbody td {
  padding: 14px 16px;
  vertical-align: middle;
  border-bottom: 1px solid var(--brand-border);
}
.table > tbody tr:hover { background: var(--brand-bg); }
.table > tbody tr:last-child td { border-bottom: none; }

/* ---------- BADGES ---------- */
.badge { font-weight: 700; letter-spacing: 0.01em; border-radius: 999px; padding: 5px 11px; }

.badge-role-admin   { background: var(--brand-gold-tint); color: #8A6512; }
.badge-role-guru    { background: var(--brand-green-tint); color: var(--brand-green); }
.badge-role-staff   { background: var(--brand-blue-tint); color: var(--brand-blue); }
.badge-role-komite  { background: #F1DCDC; color: #963C3C; }

.badge-status-active,
.badge-status-approved { background: var(--brand-green-tint); color: var(--brand-green); }
.badge-status-inactive,
.badge-status-rejected { background: #F1DCDC; color: #963C3C; }
.badge-status-pending  { background: var(--brand-gold-tint); color: #8A6512; }

/* ---------- KPI TILES ---------- */
.kpi-tile {
  background: var(--brand-card);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-m);
  box-shadow: var(--brand-shadow);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: transform 180ms var(--brand-ease), box-shadow 180ms var(--brand-ease);
}
a.kpi-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(36, 31, 25, 0.28);
}
.kpi-tile .kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--brand-radius-s);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}
.kpi-tile .kpi-icon.tint-primary { background: var(--brand-primary-tint); color: var(--brand-primary-dark); }
.kpi-tile .kpi-icon.tint-gold    { background: var(--brand-gold-tint); color: #8A6512; }
.kpi-tile .kpi-icon.tint-green   { background: var(--brand-green-tint); color: var(--brand-green); }
.kpi-tile .kpi-icon.tint-blue    { background: var(--brand-blue-tint); color: var(--brand-blue); }
.kpi-tile .kpi-num {
  font-family: "Fraunces", serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--brand-ink);
}
.kpi-tile .kpi-label {
  font-size: 0.8rem;
  color: var(--brand-muted);
  margin-top: 2px;
}

/* ---------- SECTION LIST ROWS (feed-style widgets) ---------- */
.list-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--brand-border);
}
.list-row:last-child { border-bottom: none; }
.list-row .list-row-icon {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}

/* ---------- EMPTY STATE ---------- */
.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--brand-muted);
}
.empty-state .empty-state-icon {
  font-size: 2.2rem;
  color: var(--brand-border);
  margin-bottom: 10px;
  display: block;
}

/* ---------- PAGE HEADER ---------- */
.page-title-box {
  padding: 4px 2px 20px;
}
.page-title-box .breadcrumb-item a { color: var(--brand-muted); text-decoration: none; }
.page-title-box .breadcrumb-item.active { color: var(--brand-ink); font-weight: 600; }

/* ---------- FORMS ---------- */
.form-label { font-weight: 700; font-size: 0.85rem; color: var(--brand-ink); }
.form-control, .form-select {
  border-radius: var(--brand-radius-s);
  border-color: var(--brand-border);
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-tint);
}

/* ---------- SIDEBAR ---------- */
.app-sidebar-menu .logo-box {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sidebar-brand-text {
  font-family: "Fraunces", serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
#side-navbar .menu-title {
  letter-spacing: 0.08em;
  font-size: 0.7rem;
}
#side-navbar .tp-link.active,
#side-navbar li.menuitem-active > .tp-link {
  color: var(--brand-gold) !important;
  font-weight: 700;
}
#side-navbar .tp-link.active .nav-icon,
#side-navbar li.menuitem-active > .tp-link .nav-icon {
  color: var(--brand-gold);
}
#side-navbar .nav-link.active { color: var(--brand-gold) !important; font-weight: 600; }

/* Clear left accent bar on the active top-level item, so the current page reads at a glance */
#side-navbar > li { position: relative; }
#side-navbar > li.menuitem-active::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand-gold);
}

/* ---------- MOBILE / TABLET SIDEBAR (off-canvas drawer) ----------
   The stock template leaves the sidebar permanently overlaying the page below
   992px with its header hidden and no way to close it. Turn it into a proper
   slide-in drawer with a backdrop instead. */
.sidebar-backdrop { display: none; }

@media (max-width: 991.98px) {
  .app-sidebar-menu {
    z-index: 1055 !important;
    transform: translateX(-100%);
    transition: transform 0.28s var(--brand-ease);
  }
  body[data-sidebar="default"] .app-sidebar-menu {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  }

  /* Restore the brand header inside the drawer (stock CSS hides it with !important) */
  .app-sidebar-menu .logo-box {
    display: block !important;
    width: 100% !important;
    position: sticky !important;
    z-index: 2;
  }
  .app-sidebar-menu .logo-box .logo-lg { display: block !important; }
  .app-sidebar-menu .logo-box .logo-sm { display: none !important; }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 12, 9, 0.55);
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s var(--brand-ease);
  }
  body[data-sidebar="default"] .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ---------- PROGRESS ---------- */
.progress { border-radius: 999px; background: var(--brand-bg); }
.progress-bar { background: var(--brand-primary); }
.progress-bar.bg-success { background: var(--brand-green) !important; }
.progress-bar.bg-warning { background: var(--brand-gold) !important; }