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

:root {
  --kt-bg:       #080B12;
  --kt-surface:  #0D1117;
  --kt-card:     #111722;
  --kt-card2:    #161D2A;
  --kt-border:   #1C2537;
  --kt-border2:  #243044;
  --kt-accent:   #00D4A0;
  --kt-accent-bg:rgba(0,212,160,.08);
  --kt-blue:     #4D9EFF;
  --kt-yellow:   #FFB830;
  --kt-red:      #FF4D6A;
  --kt-purple:   #A855F7;
  --kt-text:     #E2EAF4;
  --kt-muted:    #7A8BA8;
  --kt-faint:    #3D4F6A;
  --kt-mono:     'JetBrains Mono',monospace;
  --kt-font:     'Plus Jakarta Sans',system-ui,sans-serif;
  --kt-r:        10px;
  --kt-r2:       14px;
  --kt-sidebar:  215px;
  --kt-topbar:   48px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: var(--kt-font); background: var(--kt-bg) !important; color: var(--kt-text) !important; font-size: 14px; }
::selection { background: var(--kt-accent-bg); color: var(--kt-accent); }
.protected { user-select: none; -webkit-user-select: none; }

/* ── Layout ──────────────────────────────────────────── */
.kt-body { background: var(--kt-bg); }
.kt-wrapper { display: flex; min-height: 100vh; }

/* ── Sidebar ─────────────────────────────────────────── */
.kt-sidebar {
  width: var(--kt-sidebar);
  background: var(--kt-surface);
  border-right: 1px solid var(--kt-border);
  position: fixed; top: 0; left: 0; height: 100vh;
  display: flex; flex-direction: column;
  z-index: 200;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.kt-sb-logo { padding: 14px 13px 12px; border-bottom: 1px solid var(--kt-border); display: flex; align-items: center; gap: 9px; }
.kt-sb-icon { width: 30px; height: 30px; background: var(--kt-accent); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-family: var(--kt-mono); font-size: 11px; font-weight: 700; color: #0A0F1A; flex-shrink: 0; }
.kt-sb-name { font-size: 12px; font-weight: 700; }
.kt-sb-sub  { font-size: 9px; color: var(--kt-faint); letter-spacing: .5px; }
.kt-sb-nav  { flex: 1; overflow-y: auto; padding: 5px 0; scrollbar-width: none; }
.kt-sb-nav::-webkit-scrollbar { display: none; }
.kt-nav-sec { font-size: 9px; font-weight: 700; color: var(--kt-faint); text-transform: uppercase; letter-spacing: 1.5px; padding: 8px 13px 2px; }
.kt-nav-i   { display: flex; align-items: center; gap: 8px; padding: 7px 13px; color: var(--kt-muted); font-size: 12px; font-weight: 500; text-decoration: none; transition: all .12s; cursor: pointer; position: relative; }
.kt-nav-i:hover { color: var(--kt-text); background: var(--kt-card); }
.kt-nav-i.active { color: var(--kt-accent); background: var(--kt-accent-bg); }
.kt-nav-i.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--kt-accent); }
.kt-nav-i i { font-size: 13px; width: 17px; text-align: center; flex-shrink: 0; }
.kt-nav-badge { margin-left: auto; background: var(--kt-red); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 20px; min-width: 16px; text-align: center; }
.kt-nav-new   { margin-left: auto; background: var(--kt-accent-bg); color: var(--kt-accent); font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px; }
.kt-sb-bottom { padding: 8px 11px 12px; border-top: 1px solid var(--kt-border); }
.kt-user-card { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--kt-card); border: 1px solid var(--kt-border); border-radius: var(--kt-r); }
.kt-user-card:hover { border-color: var(--kt-border2); }
.kt-avatar  { width: 28px; height: 28px; border-radius: 50%; background: var(--kt-accent-bg); border: 1px solid var(--kt-accent); display: flex; align-items: center; justify-content: center; font-family: var(--kt-mono); font-size: 9px; font-weight: 600; color: var(--kt-accent); flex-shrink: 0; }
.kt-user-name { font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-user-role { font-size: 10px; color: var(--kt-accent); }

/* ── Main ────────────────────────────────────────────── */
.kt-main { margin-left: var(--kt-sidebar); flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
.kt-topbar { height: var(--kt-topbar); background: var(--kt-surface); border-bottom: 1px solid var(--kt-border); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; position: sticky; top: 0; z-index: 100; flex-shrink: 0; }
.kt-page-title { font-size: 14px; font-weight: 700; }
.kt-page { padding: 16px; flex: 1; }

/* ── Notifications ───────────────────────────────────── */
.kt-notif-drop { position: absolute; top: 40px; right: 0; width: 290px; background: var(--kt-card); border: 1px solid var(--kt-border2); border-radius: var(--kt-r2); z-index: 300; display: none; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.kt-notif-drop.show { display: block; }
.kt-notif-head { padding: 10px 13px; border-bottom: 1px solid var(--kt-border); font-size: 10px; font-weight: 700; color: var(--kt-muted); text-transform: uppercase; letter-spacing: .8px; }
.kt-notif-item { padding: 10px 13px; border-bottom: 1px solid var(--kt-border); cursor: pointer; transition: background .12s; }
.kt-notif-item:hover { background: var(--kt-card2); }
.kt-notif-item:last-child { border-bottom: none; }
.kt-notif-item.unread { border-left: 2px solid var(--kt-accent); }
.kt-notif-title { font-size: 12px; font-weight: 600; }
.kt-notif-msg   { font-size: 11px; color: var(--kt-muted); margin-top: 1px; }
.kt-notif-time  { font-size: 10px; color: var(--kt-faint); margin-top: 2px; }

/* ── Bootstrap overrides ─────────────────────────────── */
.card { background: var(--kt-card) !important; border: 1px solid var(--kt-border) !important; border-radius: var(--kt-r2) !important; color: var(--kt-text) !important; }
.card-title, .kt-card-title { font-size: 10px; font-weight: 700; color: var(--kt-muted); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 12px; }
.form-control, .form-select, .kt-input { background: var(--kt-card2) !important; border: 1px solid var(--kt-border2) !important; color: var(--kt-text) !important; border-radius: var(--kt-r) !important; font-size: 13px !important; }
.form-control:focus, .form-select:focus, .kt-input:focus { border-color: var(--kt-accent) !important; box-shadow: 0 0 0 3px var(--kt-accent-bg) !important; }
.form-control::placeholder { color: var(--kt-faint) !important; }
.form-label, .kt-label { font-size: 10px; font-weight: 700; color: var(--kt-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
select.form-select option { background: var(--kt-card2); color: var(--kt-text); }
.kt-input-addon { background: var(--kt-card2); border: 1px solid var(--kt-border2); border-left: none; color: var(--kt-muted); }
.table { color: var(--kt-text) !important; }
.table th { font-size: 9px; font-weight: 700; color: var(--kt-faint); text-transform: uppercase; letter-spacing: .8px; border-color: var(--kt-border) !important; padding: 8px 11px; white-space: nowrap; background: var(--kt-card) !important; }
.table td { font-size: 12px; border-color: var(--kt-border) !important; padding: 9px 11px; vertical-align: middle; background: var(--kt-card) !important; }
.table-hover tbody tr:hover td { background: var(--kt-card2) !important; }
.badge { font-size: 10px !important; font-weight: 600 !important; padding: 3px 7px !important; }
.alert { border-radius: var(--kt-r) !important; font-size: 13px !important; }
.modal-content { background: var(--kt-card) !important; border: 1px solid var(--kt-border2) !important; color: var(--kt-text) !important; }
.modal-header { border-bottom: 1px solid var(--kt-border) !important; }
.modal-footer { border-top: 1px solid var(--kt-border) !important; }
.btn-close { filter: invert(1) !important; }
.dropdown-menu { background: var(--kt-card) !important; border: 1px solid var(--kt-border2) !important; }
.dropdown-item { color: var(--kt-text) !important; font-size: 13px !important; }
.dropdown-item:hover { background: var(--kt-card2) !important; }

/* ── Buttons ─────────────────────────────────────────── */
.kt-btn-primary { background: var(--kt-accent) !important; border-color: var(--kt-accent) !important; color: #0A0F1A !important; font-weight: 700 !important; }
.kt-btn-primary:hover { background: #00edb3 !important; }
.kt-btn-ghost { background: var(--kt-card) !important; border: 1px solid var(--kt-border) !important; color: var(--kt-muted) !important; }
.kt-btn-ghost:hover { color: var(--kt-text) !important; border-color: var(--kt-border2) !important; }

/* ── Stats ───────────────────────────────────────────── */
.kt-stat { padding: 13px 14px; }
.kt-stat-label { font-size: 9px; font-weight: 700; color: var(--kt-muted); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 6px; }
.kt-stat-value { font-family: var(--kt-mono); font-size: 22px; font-weight: 700; line-height: 1; margin-bottom: 3px; }
.kt-stat-sub   { font-size: 10px; color: var(--kt-faint); }
.kt-c-green  { color: var(--kt-accent); }
.kt-c-blue   { color: var(--kt-blue); }
.kt-c-yellow { color: var(--kt-yellow); }
.kt-c-red    { color: var(--kt-red); }
.kt-c-purple { color: var(--kt-purple); }

/* ── Progress ────────────────────────────────────────── */
.kt-prog { height: 4px; background: var(--kt-border); border-radius: 20px; overflow: hidden; }
.kt-pf   { height: 100%; background: var(--kt-accent); border-radius: 20px; transition: width .5s; }

/* ── Signal ──────────────────────────────────────────── */
.kt-dir-buy  { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-family: var(--kt-mono); font-size: 11px; font-weight: 700; background: rgba(0,212,160,.15); color: var(--kt-accent); }
.kt-dir-sell { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-family: var(--kt-mono); font-size: 11px; font-weight: 700; background: rgba(255,77,106,.1); color: var(--kt-red); }
.kt-mono     { font-family: var(--kt-mono); }

/* ── Auth ────────────────────────────────────────────── */
.kt-auth { background: var(--kt-bg); }
.kt-logo-mark { font-family: var(--kt-mono); font-size: 22px; font-weight: 700; color: var(--kt-accent); }
.kt-logo-sub  { font-size: 10px; color: var(--kt-faint); text-transform: uppercase; letter-spacing: 1px; margin-top: 3px; }
.kt-auth-card { background: var(--kt-card); border: 1px solid var(--kt-border); border-radius: var(--kt-r2); }

/* ── Mobile ──────────────────────────────────────────── */
.kt-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 190; display: none; }
.kt-overlay.show { display: block; }
@media (max-width: 768px) {
  .kt-sidebar { transform: translateX(-100%); }
  .kt-sidebar.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.8); }
  .kt-main { margin-left: 0; }
  .kt-page { padding: 12px; }
}

/* ── Scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--kt-border2); border-radius: 3px; }

/* ── Dark Mode Overrides ─────────────────────────────── */
/* Bootstrap badge colors - semua harus punya text yang readable */
.badge.bg-success   { background: rgba(0,212,160,.18) !important; color: #00D4A0 !important; }
.badge.bg-warning   { background: rgba(255,184,48,.18) !important; color: #FFB830 !important; }
.badge.bg-danger    { background: rgba(255,77,106,.18) !important; color: #FF4D6A !important; }
.badge.bg-info      { background: rgba(77,158,255,.18) !important; color: #4D9EFF !important; }
.badge.bg-secondary { background: rgba(122,139,168,.15) !important; color: #7A8BA8 !important; }
.badge.bg-primary   { background: rgba(0,212,160,.18) !important; color: #00D4A0 !important; }
.badge.bg-light     { background: rgba(226,234,244,.1) !important; color: #E2EAF4 !important; }
.badge.bg-dark      { background: rgba(255,255,255,.08) !important; color: #7A8BA8 !important; }
.badge.bg-purple    { background: rgba(168,85,247,.18) !important; color: #A855F7 !important; }
.badge.bg-b         { background: rgba(77,158,255,.18) !important; color: #4D9EFF !important; }
.badge.bg-g         { background: rgba(0,212,160,.18) !important; color: #00D4A0 !important; }
.badge.bg-r         { background: rgba(255,77,106,.18) !important; color: #FF4D6A !important; }
.badge.bg-y         { background: rgba(255,184,48,.18) !important; color: #FFB830 !important; }
.badge.bg-gray      { background: rgba(122,139,168,.15) !important; color: #7A8BA8 !important; }

/* Bootstrap button variants untuk dark mode */
.btn-success  { background: rgba(0,212,160,.2) !important; border-color: rgba(0,212,160,.4) !important; color: #00D4A0 !important; }
.btn-warning  { background: rgba(255,184,48,.2) !important; border-color: rgba(255,184,48,.4) !important; color: #FFB830 !important; }
.btn-danger   { background: rgba(255,77,106,.2) !important; border-color: rgba(255,77,106,.4) !important; color: #FF4D6A !important; }
.btn-info     { background: rgba(77,158,255,.2) !important; border-color: rgba(77,158,255,.4) !important; color: #4D9EFF !important; }
.btn-secondary{ background: rgba(122,139,168,.15) !important; border-color: rgba(122,139,168,.3) !important; color: #7A8BA8 !important; }
.btn-outline-danger   { color: #FF4D6A !important; border-color: rgba(255,77,106,.5) !important; }
.btn-outline-danger:hover { background: rgba(255,77,106,.15) !important; }
.btn-outline-warning  { color: #FFB830 !important; border-color: rgba(255,184,48,.5) !important; }
.btn-outline-warning:hover { background: rgba(255,184,48,.15) !important; }
.btn-outline-success  { color: #00D4A0 !important; border-color: rgba(0,212,160,.5) !important; }
.btn-outline-success:hover { background: rgba(0,212,160,.1) !important; }

/* Bootstrap alert dark override */
.alert-success  { background: rgba(0,212,160,.08) !important; border-color: rgba(0,212,160,.25) !important; color: #7AE8CC !important; }
.alert-warning  { background: rgba(255,184,48,.08) !important; border-color: rgba(255,184,48,.25) !important; color: #FFD080 !important; }
.alert-danger   { background: rgba(255,77,106,.08) !important; border-color: rgba(255,77,106,.25) !important; color: #FF8099 !important; }
.alert-info     { background: rgba(77,158,255,.08) !important; border-color: rgba(77,158,255,.25) !important; color: #80C4FF !important; }

/* Bootstrap text helpers */
.text-dark    { color: var(--kt-text) !important; }
.text-muted   { color: var(--kt-muted) !important; }
.text-black   { color: var(--kt-text) !important; }
.text-body    { color: var(--kt-text) !important; }
.text-success { color: #00D4A0 !important; }
.text-warning { color: #FFB830 !important; }
.text-danger  { color: #FF4D6A !important; }
.text-info    { color: #4D9EFF !important; }

/* Bootstrap bg helpers */
.bg-white, .bg-light { background: var(--kt-card2) !important; color: var(--kt-text) !important; }
.bg-success { background: rgba(0,212,160,.15) !important; color: #00D4A0 !important; }
.bg-warning { background: rgba(255,184,48,.15) !important; color: #FFB830 !important; }
.bg-danger  { background: rgba(255,77,106,.15) !important; color: #FF4D6A !important; }
.bg-info    { background: rgba(77,158,255,.15) !important; color: #4D9EFF !important; }
.bg-secondary{ background: rgba(122,139,168,.12) !important; color: #7A8BA8 !important; }
.bg-dark    { background: var(--kt-card) !important; color: var(--kt-text) !important; }
.bg-purple  { background: rgba(168,85,247,.15) !important; color: #A855F7 !important; }

/* Table striped */
.table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--kt-card2) !important; color: var(--kt-text) !important; }

/* Input group addon */
.input-group-text { background: var(--kt-card2) !important; border-color: var(--kt-border2) !important; color: var(--kt-muted) !important; }

/* Select option */
option { background: #111722; color: #E2EAF4; }

/* Spinner */
.spinner-border { color: var(--kt-accent); }

/* Progress bar */
.progress { background: var(--kt-border) !important; }
.progress-bar { background: var(--kt-accent) !important; }

/* Form check */
.form-check-input { background-color: var(--kt-card2) !important; border-color: var(--kt-border2) !important; }
.form-check-input:checked { background-color: var(--kt-accent) !important; border-color: var(--kt-accent) !important; }

/* List group */
.list-group-item { background: var(--kt-card) !important; border-color: var(--kt-border) !important; color: var(--kt-text) !important; }

/* Breadcrumb */
.breadcrumb-item, .breadcrumb-item a { color: var(--kt-muted) !important; }
.breadcrumb-item.active { color: var(--kt-text) !important; }

/* Pagination */
.page-link { background: var(--kt-card) !important; border-color: var(--kt-border) !important; color: var(--kt-muted) !important; }
.page-item.active .page-link { background: var(--kt-accent) !important; border-color: var(--kt-accent) !important; color: #0A0F1A !important; }

/* Accordion */
.accordion-button { background: var(--kt-card2) !important; color: var(--kt-text) !important; }
.accordion-button:not(.collapsed) { background: var(--kt-accent-bg) !important; color: var(--kt-accent) !important; }
.accordion-body { background: var(--kt-card) !important; color: var(--kt-text) !important; }

/* Nav tabs */
.nav-tabs .nav-link { color: var(--kt-muted) !important; border-color: transparent !important; }
.nav-tabs .nav-link.active { color: var(--kt-accent) !important; background: transparent !important; border-bottom-color: var(--kt-accent) !important; }
.nav-tabs { border-bottom-color: var(--kt-border) !important; }

/* Tooltip */
.tooltip-inner { background: var(--kt-card2); color: var(--kt-text); border: 1px solid var(--kt-border); }

/* Popover */
.popover { background: var(--kt-card) !important; border-color: var(--kt-border) !important; }
.popover-header { background: var(--kt-card2) !important; border-color: var(--kt-border) !important; color: var(--kt-text) !important; }
.popover-body { color: var(--kt-text) !important; }

/* Code */
code { background: var(--kt-card2); color: var(--kt-accent); padding: 2px 5px; border-radius: 4px; font-family: var(--kt-mono); font-size: 12px; }
pre  { background: var(--kt-card2) !important; color: var(--kt-text) !important; border: 1px solid var(--kt-border); border-radius: var(--kt-r); padding: 12px; }
/* ── Extra dark-mode safety ──────────────────────────── */
/* Ensure all Bootstrap default colors are overridden */
*, *::before, *::after { color: inherit; }
h1,h2,h3,h4,h5,h6,p,span,div,label,td,th,li,a:not([href]),small { color: inherit; }
/* Explicit white for all text contexts */
.card *, .modal-content *, .dropdown-menu * { color: inherit; }
/* Fix Bootstrap form text black issue */
.form-control, .form-select { color: var(--kt-text) !important; }
.form-control:disabled, .form-select:disabled { color: var(--kt-faint) !important; background: var(--kt-card) !important; }
/* Fix select dropdown on Chrome/Android */
select, select option, select optgroup { background-color: #111722 !important; color: #E2EAF4 !important; }
/* Fix any remaining bootstrap .btn text */
.btn { color: var(--kt-text); }
.btn-primary { background: var(--kt-accent) !important; border-color: var(--kt-accent) !important; color: #0A0F1A !important; font-weight: 700 !important; }
/* Fix table text specifically */
.table, .table td, .table th, .table tbody, .table thead { color: var(--kt-text) !important; }
/* Fix Tambah Murid, Export CSV, all topbar buttons */
.kt-topbar .btn, .kt-topbar a.btn { }
/* Fix progress text */
.kt-prog-label { color: var(--kt-muted) !important; }