/* ====================================================
   DARK THEME - Sistem Informasi Sekolah
   File terpusat, di-include ke semua halaman admin
   ==================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --brand:        #818cf8;
  --brand-500:    #6366f1;
  --brand-600:    #4f46e5;
  --brand-dim:    rgba(99,102,241,0.15);
  --brand-glow:   rgba(99,102,241,0.08);
  --accent:       #a78bfa;
  
  --bg:           #0f0e17;
  --bg2:          #16151f;
  --bg3:          #1e1d2e;
  --bg4:          #25243a;
  --bg5:          #2e2d44;
  
  --border:       rgba(255,255,255,0.08);
  --border-b:     rgba(99,102,241,0.3);
  
  --text:         #ede9fe;
  --text-2:       #a5b4fc;
  --text-dim:     #7c7b9e;
  --text-dimmer:  #4a4970;
  
  --success:      #34d399;
  --success-dim:  rgba(52,211,153,0.15);
  --warning:      #fbbf24;
  --warning-dim:  rgba(251,191,36,0.15);
  --danger:       #f87171;
  --danger-dim:   rgba(248,113,113,0.15);
  --info:         #60a5fa;
  --info-dim:     rgba(96,165,250,0.15);

  --radius:  12px;
  --r-sm:    8px;
  --shadow:  0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.5);
}

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif !important;
  background-color: var(--bg) !important;
  color: var(--text) !important;
  min-height: 100vh;
}

/* Noise texture overlay */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
}

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

/* ── ANIMATED BLOBS ── */
.blob-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blob-bg .b1 { position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(99,102,241,0.2), transparent); top: -150px; left: -100px; filter: blur(80px); animation: blobdrift 18s ease-in-out infinite; }
.blob-bg .b2 { position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(167,139,250,0.18), transparent); bottom: 10%; right: -100px; filter: blur(70px); animation: blobdrift 22s ease-in-out infinite reverse; }
@keyframes blobdrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-40px) scale(1.08); } }

/* ── TOPBAR (PAGE HEADER) ── */
.page-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border);
  background: rgba(22,21,31,0.5);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 100;
  flex-wrap: wrap; gap: 1rem;
}
.page-topbar h1, .page-topbar h2 {
  font-size: 1.4rem; font-weight: 700;
  color: var(--text); margin: 0;
  display: flex; align-items: center; gap: 10px;
}
.page-topbar h1 i, .page-topbar h2 i { color: var(--brand); }

/* ── BOOTSTRAP OVERRIDES ── */
/* Cards */
.card {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow) !important;
}
.card-header {
  background: var(--bg4) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.card-body { color: var(--text) !important; }

/* Tables */
.table {
  --bs-table-bg: var(--bg3);
  --bs-table-color: var(--text);
  --bs-table-striped-bg: var(--bg4);
  --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: var(--bg5);
  --bs-table-hover-color: var(--text);
  --bs-table-border-color: var(--border);
  border-color: var(--border) !important;
}
.table > thead > tr > th {
  background: var(--bg4) !important;
  color: var(--text-2) !important;
  border-color: var(--border) !important;
  font-weight: 600; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.table > tbody > tr > td {
  color: var(--text) !important;
  border-color: var(--border) !important;
  vertical-align: middle;
}
.table-primary { --bs-table-bg: rgba(99,102,241,0.15); --bs-table-color: var(--text-2); }
.table-bordered { border-color: var(--border) !important; }

/* Form elements */
.form-control, .form-select {
  background: var(--bg4) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--r-sm) !important;
}
.form-control:focus, .form-select:focus {
  background: var(--bg4) !important;
  border-color: var(--brand) !important;
  color: var(--text) !important;
  box-shadow: 0 0 0 3px var(--brand-dim) !important;
}
.form-control::placeholder { color: var(--text-dim) !important; }
.form-label { color: var(--text-2) !important; font-weight: 500; }
.input-group-text {
  background: var(--bg5) !important;
  border-color: var(--border) !important;
  color: var(--text-dim) !important;
}

/* Alert dark variants */
.alert-success { background: var(--success-dim) !important; border-color: rgba(52,211,153,0.3) !important; color: var(--success) !important; }
.alert-danger  { background: var(--danger-dim)  !important; border-color: rgba(248,113,113,0.3) !important; color: var(--danger) !important; }
.alert-warning { background: var(--warning-dim) !important; border-color: rgba(251,191,36,0.3) !important; color: var(--warning) !important; }
.alert-info    { background: var(--info-dim)    !important; border-color: rgba(96,165,250,0.3) !important; color: var(--info) !important; }
.alert { border-radius: var(--r-sm) !important; }

/* Buttons */
.btn-primary   { background: var(--brand-600) !important; border-color: var(--brand-600) !important; color: white !important; }
.btn-primary:hover { background: var(--brand-500) !important; border-color: var(--brand-500) !important; }
.btn-secondary { background: var(--bg5) !important; border-color: var(--border) !important; color: var(--text) !important; }
.btn-secondary:hover { background: var(--bg4) !important; color: var(--text) !important; }
.btn-success   { background: rgba(52,211,153,0.15) !important; border-color: rgba(52,211,153,0.4) !important; color: var(--success) !important; }
.btn-success:hover { background: rgba(52,211,153,0.25) !important; color: var(--success) !important; }
.btn-danger    { background: rgba(248,113,113,0.15) !important; border-color: rgba(248,113,113,0.4) !important; color: var(--danger) !important; }
.btn-danger:hover { background: rgba(248,113,113,0.25) !important; color: var(--danger) !important; }
.btn-warning   { background: rgba(251,191,36,0.15) !important; border-color: rgba(251,191,36,0.4) !important; color: var(--warning) !important; }
.btn-warning:hover { background: rgba(251,191,36,0.25) !important; color: var(--warning) !important; }
.btn-info      { background: rgba(96,165,250,0.15) !important; border-color: rgba(96,165,250,0.4) !important; color: var(--info) !important; }
.btn-info:hover { background: rgba(96,165,250,0.25) !important; color: var(--info) !important; }
.btn-dark      { background: var(--bg4) !important; border-color: var(--border-b) !important; color: var(--text) !important; }
.btn-dark:hover { background: var(--bg5) !important; }
.btn-outline-secondary { border-color: var(--border) !important; color: var(--text-dim) !important; }
.btn-outline-secondary:hover { background: var(--bg4) !important; color: var(--text) !important; }
.btn-outline-danger { border-color: rgba(248,113,113,0.4) !important; color: var(--danger) !important; }
.btn-outline-danger:hover { background: var(--danger-dim) !important; }
.btn-brand { background: var(--brand-600) !important; border: none !important; color: white !important; }
.btn-brand:hover { background: var(--brand-500) !important; color: white !important; }
.btn { border-radius: var(--r-sm) !important; }

/* Badge */
.badge.bg-primary   { background: var(--brand-600) !important; }
.badge.bg-success   { background: rgba(52,211,153,0.25) !important; color: var(--success) !important; border: 1px solid rgba(52,211,153,0.4); }
.badge.bg-danger    { background: rgba(248,113,113,0.25) !important; color: var(--danger) !important; border: 1px solid rgba(248,113,113,0.4); }
.badge.bg-warning   { background: rgba(251,191,36,0.25) !important; color: var(--warning) !important; border: 1px solid rgba(251,191,36,0.4); }
.badge.bg-info      { background: rgba(96,165,250,0.25) !important; color: var(--info) !important; border: 1px solid rgba(96,165,250,0.4); }
.badge.bg-secondary { background: var(--bg5) !important; color: var(--text-dim) !important; border: 1px solid var(--border); }

/* Nav Tabs */
.nav-tabs { border-bottom: 1px solid var(--border) !important; }
.nav-tabs .nav-link { color: var(--text-dim) !important; border: none !important; border-bottom: 3px solid transparent !important; padding: 10px 18px !important; border-radius: 0 !important; }
.nav-tabs .nav-link:hover { color: var(--text) !important; border-bottom-color: var(--brand-dim) !important; background: none !important; }
.nav-tabs .nav-link.active { color: var(--brand) !important; border-bottom-color: var(--brand) !important; background: none !important; }
.tab-content { background: var(--bg3) !important; }

/* Modal */
.modal-content { background: var(--bg3) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; color: var(--text) !important; }
.modal-header { border-bottom: 1px solid var(--border) !important; }
.modal-footer { border-top: 1px solid var(--border) !important; }
.btn-close { filter: invert(1) !important; }

/* Misc */
.text-muted { color: var(--text-dim) !important; }
.text-dark  { color: var(--text) !important; }
.bg-light   { background: var(--bg2) !important; }
.bg-white   { background: var(--bg3) !important; }
.border     { border-color: var(--border) !important; }
hr          { border-color: var(--border) !important; }
h1,h2,h3,h4,h5,h6 { color: var(--text) !important; }

/* Dropdown */
.dropdown-menu { background: var(--bg4) !important; border: 1px solid var(--border) !important; border-radius: var(--r-sm) !important; }
.dropdown-item { color: var(--text) !important; }
.dropdown-item:hover { background: var(--brand-dim) !important; color: var(--text) !important; }
.dropdown-divider { border-color: var(--border) !important; }

/* Page action bar */
.page-action-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 1rem 1.5rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}

/* Hover effect on table rows */
.table-hover tbody tr:hover td { background: var(--bg5) !important; }

/* Scrollbar dark */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--bg5); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-dim); }

/* ────────────────────────────────────
   SELECT2 DARK THEME (global)
   ──────────────────────────────────── */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--bg4) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  min-height: 42px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text) !important;
  line-height: 42px !important;
  padding-left: 12px !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--text-dim) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--text-dim) transparent transparent !important;
}
/* Dropdown popup */
.select2-dropdown {
  background-color: var(--bg4) !important;
  border: 1px solid var(--border-b) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.7) !important;
  z-index: 9999 !important;
}
/* Search field inside dropdown */
.select2-search--dropdown .select2-search__field {
  background-color: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 6px !important;
  outline: none !important;
}
.select2-search--dropdown .select2-search__field:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 2px var(--brand-dim) !important;
}
/* Option items */
.select2-results__options { background-color: var(--bg4) !important; }
.select2-results__option {
  color: var(--text) !important;
  background-color: transparent !important;
  padding: 9px 12px !important;
  font-size: 0.9rem !important;
}
.select2-results__option--highlighted,
.select2-results__option--highlighted[aria-selected] {
  background-color: var(--brand-dim) !important;
  color: var(--brand) !important;
}
.select2-results__option[aria-selected=true] {
  background-color: var(--brand-600) !important;
  color: #fff !important;
}
/* Focus state */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-dim) !important;
  outline: none !important;
}
/* Native select option (fallback) */
select option {
  background-color: var(--bg4, #25243a) !important;
  color: var(--text, #ede9fe) !important;
}