/* ============================================================
   TKJ Smart Learning Platform — app.css  v2
   ============================================================ */

/* ── Variables ─────────────────────────────────────────── */
:root {
  --primary:     #6366f1;
  --primary-dark:#4f46e5;
  --success:     #22c55e;
  --warning:     #f59e0b;
  --danger:      #ef4444;
  --info:        #06b6d4;

  --bg:          #f1f5f9;
  --surface:     #ffffff;
  --surface2:    #f8fafc;
  --border:      #e2e8f0;
  --text:        #0f172a;
  --muted:       #64748b;

  /* Aliases for views that use --tkj-* prefix */
  --tkj-bg:      var(--bg);
  --tkj-surface: var(--surface);
  --tkj-border:  var(--border);
  --tkj-text:    var(--text);
  --tkj-muted:   var(--muted);

  --sidebar-w:   240px;
  --navbar-h:    60px;
  --bottom-nav-h:64px;
  --radius:      12px;
  --radius-lg:   16px;
  --shadow:      0 1px 3px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.06);
  --shadow-md:   0 4px 16px rgba(0,0,0,.12);
  --transition:  all .2s ease;
  --font:        'Inter', sans-serif;
  --font-code:   'Fira Code', monospace;
}

[data-theme="dark"] {
  --bg:      #0f172a;
  --surface: #1e293b;
  --surface2:#162032;
  --border:  #334155;
  --text:    #e2e8f0;
  --muted:   #94a3b8;

  /* Update aliases for dark mode */
  --tkj-bg:      var(--bg);
  --tkj-surface: var(--surface);
  --tkj-border:  var(--border);
  --tkj-text:    var(--text);
  --tkj-muted:   var(--muted);
}

/* ── Reset & Base ───────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background .2s, color .2s;
  padding-bottom: 0;
}

/* Mobile: ruang untuk bottom navigation */
@media (max-width:767.98px) {
  body { padding-bottom: var(--bottom-nav-h); }
}

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

/* ── Navbar ─────────────────────────────────────────────── */
.navbar-tkj {
  height: var(--navbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 1.25rem;
  position: sticky; top: 0; z-index: 1040;
  box-shadow: 0 1px 0 var(--border);
}
[data-theme="dark"] .navbar-tkj { background: var(--surface); }

.brand-icon {
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg,var(--primary),#8b5cf6);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.95rem; flex-shrink:0;
}
.brand-text { font-size:1.05rem; font-weight:700; color:var(--text); }
.brand-accent { color:var(--primary); }

.navbar-tkj .nav-link {
  color: var(--muted);
  font-weight:500; font-size:.875rem;
  padding:.4rem .7rem; border-radius:8px;
  transition: var(--transition);
  white-space:nowrap;
}
.navbar-tkj .nav-link:hover,
.navbar-tkj .nav-link.active { color:var(--primary); background:rgba(99,102,241,.08); }

/* Icon buttons di navbar */
.nav-icon-btn {
  width:36px; height:36px; border-radius:10px;
  background:transparent; border:1px solid var(--border);
  color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: var(--transition); flex-shrink:0;
}
.nav-icon-btn:hover { background:var(--bg); color:var(--text); }

/* User pill */
.nav-user-pill {
  display:flex; align-items:center; gap:.5rem;
  padding:.3rem .5rem .3rem .3rem;
  border:1px solid var(--border); border-radius:50px;
  background:transparent; cursor:pointer;
  transition:var(--transition);
}
.nav-user-pill:hover { background:var(--bg); }
.nav-user-avatar {
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,var(--primary),#8b5cf6);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:700; flex-shrink:0;
}

/* ── Sidebar ────────────────────────────────────────────── */
.sidebar-tkj {
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  flex-shrink: 0;
  position: sticky;
  top: var(--navbar-h);
  height: calc(100vh - var(--navbar-h));
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* Sidebar brand (top) */
.sidebar-brand {
  padding: 1rem 1rem .75rem;
  border-bottom: 1px solid var(--border);
}
.sidebar-brand-label {
  font-size:.65rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted);
}

/* Sidebar nav items */
.sidebar-menu { padding:.5rem .625rem; flex:1; }

.sidebar-group-label {
  font-size:.6rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted);
  padding:.75rem .625rem .3rem;
  display:block;
}

.sidebar-link {
  display:flex; align-items:center; gap:.65rem;
  padding:.55rem .75rem;
  border-radius:10px;
  color:var(--muted);
  font-weight:500; font-size:.85rem;
  text-decoration:none;
  transition:var(--transition);
  margin-bottom:2px;
  position:relative;
}
.sidebar-link:hover {
  background: var(--bg);
  color: var(--text);
}
.sidebar-link.active {
  background: rgba(99,102,241,.1);
  color: var(--primary);
  font-weight:600;
}
.sidebar-link.active::before {
  content:'';
  position:absolute; left:0; top:20%; bottom:20%;
  width:3px; border-radius:0 3px 3px 0;
  background:var(--primary);
}
.sidebar-link i {
  width:18px; text-align:center; font-size:.85rem; flex-shrink:0;
}
.sidebar-link .sl-badge {
  margin-left:auto;
  background:var(--warning); color:#000;
  font-size:.6rem; font-weight:700;
  padding:.15rem .4rem; border-radius:20px;
}

/* Sidebar footer */
.sidebar-footer {
  padding:.75rem .625rem;
  border-top:1px solid var(--border);
  flex-shrink:0;
}

/* ── Main wrapper ───────────────────────────────────────── */
#app-wrapper {
  display:flex;
  min-height: calc(100vh - var(--navbar-h));
}
#page-content {
  flex:1;
  min-width:0;
  overflow-x:hidden;
}
main.main-content {
  padding:1.5rem;
}
@media(max-width:767.98px) {
  main.main-content { padding:1rem; }
}

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding:.9rem 1.25rem;
  font-weight:600; font-size:.875rem;
}
.card-body { color:var(--text); }

/* Stat card */
.stat-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.25rem;
  box-shadow:var(--shadow);
  transition:var(--transition);
}
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.stat-card .stat-icon {
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
}
.stat-card .stat-value { font-size:1.75rem; font-weight:800; line-height:1; }
.stat-card .stat-label { font-size:.75rem; color:var(--muted); margin-top:.25rem; }

/* Module card */
.card-module {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:var(--transition);
  text-decoration:none;
  display:block;
}
.card-module:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.card-module .module-cover {
  height:110px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:2rem; position:relative;
}

/* ── Tables ─────────────────────────────────────────────── */
.table { color:var(--text); }
.table th { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); border-bottom:2px solid var(--border); }
.table td { font-size:.85rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.table-light { background:var(--surface2); }
[data-theme="dark"] .table-light { background:rgba(255,255,255,.03); }
.table-hover tbody tr:hover { background:var(--bg); }

/* ── Buttons ────────────────────────────────────────────── */
.btn { font-weight:500; border-radius:9px; font-size:.85rem; }
.btn-primary { background:var(--primary); border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-dark); border-color:var(--primary-dark); }
.btn-sm { font-size:.78rem; padding:.3rem .65rem; }
.btn-xs { font-size:.72rem; padding:.2rem .5rem; }

/* ── Forms ──────────────────────────────────────────────── */
.form-control, .form-select {
  background:var(--surface);
  border:1.5px solid var(--border);
  color:var(--text);
  border-radius:10px;
  font-size:.875rem;
  transition:var(--transition);
}
.form-control:focus, .form-select:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(99,102,241,.12);
  background:var(--surface);
  color:var(--text);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select { background:var(--surface2); }
.input-group-text {
  background:var(--surface2); border:1.5px solid var(--border);
  color:var(--muted); border-radius:10px;
}
.form-label { font-size:.82rem; font-weight:600; color:var(--text); }
.form-text { font-size:.75rem; color:var(--muted); }

/* ── Badges ─────────────────────────────────────────────── */
.badge { font-weight:600; letter-spacing:.01em; }

/* ── Alerts ─────────────────────────────────────────────── */
.alert { border-radius:var(--radius); border-width:1.5px; font-size:.875rem; }

/* ── Progress ───────────────────────────────────────────── */
.progress { background:var(--border); border-radius:10px; }
.progress-bar { border-radius:10px; }

/* ── Dropdown ───────────────────────────────────────────── */
.dropdown-menu {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  padding:.5rem;
  font-size:.85rem;
}
.dropdown-item {
  border-radius:8px; padding:.5rem .75rem;
  color:var(--text); transition:var(--transition);
}
.dropdown-item:hover { background:var(--bg); color:var(--primary); }
.dropdown-divider { border-color:var(--border); margin:.35rem 0; }

/* ── Tabs ───────────────────────────────────────────────── */
.nav-tabs { border-bottom:1px solid var(--border); }
.nav-tabs .nav-link {
  color:var(--muted); font-size:.85rem; font-weight:500;
  border:none; border-bottom:2px solid transparent;
  padding:.6rem 1rem; border-radius:0;
  transition:var(--transition);
}
.nav-tabs .nav-link:hover { color:var(--text); background:transparent; }
.nav-tabs .nav-link.active {
  color:var(--primary); border-bottom-color:var(--primary);
  background:transparent; font-weight:600;
}

/* ── Flash / alerts ─────────────────────────────────────── */
.flash-container { padding:.75rem 1.5rem 0; }

/* ── Page header ────────────────────────────────────────── */
.page-header { margin-bottom:1.5rem; }
.page-header h4 { font-weight:700; margin-bottom:.2rem; }
.page-header p { font-size:.85rem; color:var(--muted); margin:0; }

/* ── Bottom Navigation (Mobile) ────────────────────────── */
.bottom-nav {
  display:none;
  position:fixed;
  bottom:0; left:0; right:0;
  height:var(--bottom-nav-h);
  background:var(--surface);
  border-top:1px solid var(--border);
  z-index:1050;
  box-shadow:0 -4px 20px rgba(0,0,0,.08);
}
@media (max-width:767.98px) {
  .bottom-nav { display:flex; }
  .sidebar-tkj { display:none !important; }
  .navbar-tkj .d-md-flex { display:none !important; }
}
.bottom-nav-item {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:.2rem; text-decoration:none;
  color:var(--muted); font-size:.6rem; font-weight:500;
  padding:.5rem .25rem;
  position:relative; transition:var(--transition);
  -webkit-tap-highlight-color:transparent;
}
.bottom-nav-item.active { color:var(--primary); }
.bottom-nav-item i { font-size:1.15rem; line-height:1; }
.bottom-nav-item:hover { color:var(--primary); }
.bottom-nav-item .bn-badge {
  position:absolute; top:.4rem; right:calc(50% - .9rem);
  background:var(--danger); color:#fff;
  font-size:.5rem; font-weight:700;
  width:14px; height:14px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

/* Ripple effect on bottom nav tap */
.bottom-nav-item:active { opacity:.6; transform:scale(.93); }

/* ── Markdown Body ──────────────────────────────────────── */
.markdown-body { font-size:.975rem; line-height:1.8; color:var(--text); }
.markdown-body h1,.markdown-body h2,.markdown-body h3,
.markdown-body h4,.markdown-body h5 { font-weight:700; margin-top:2rem; margin-bottom:.75rem; }
.markdown-body h1 { font-size:1.75rem; border-bottom:2px solid var(--border); padding-bottom:.5rem; }
.markdown-body h2 { font-size:1.35rem; border-bottom:1px solid var(--border); padding-bottom:.3rem; }
.markdown-body h3 { font-size:1.1rem; color:var(--primary); }
.markdown-body p { margin-bottom:1rem; }
.markdown-body code {
  font-family:var(--font-code);
  background:rgba(99,102,241,.08); padding:2px 6px;
  border-radius:5px; font-size:.875em; color:var(--primary);
}
.markdown-body pre {
  background:#0f172a; border-radius:var(--radius);
  padding:1.25rem; overflow-x:auto; margin:1.5rem 0;
}
.markdown-body pre code { background:transparent; color:#e2e8f0; padding:0; }
.markdown-body blockquote {
  border-left:4px solid var(--primary);
  background:rgba(99,102,241,.06);
  padding:1rem 1.25rem; border-radius:0 10px 10px 0; margin:1.5rem 0;
}
.markdown-body img { max-width:100%; border-radius:10px; }
.markdown-body table { width:100%; margin:1.25rem 0; }

/* ── Quiz ───────────────────────────────────────────────── */
.answer-option { display:block; cursor:pointer; }
.option-content {
  display:flex; align-items:center; gap:12px;
  padding:.8rem 1rem; border:1.5px solid var(--border);
  border-radius:var(--radius); transition:var(--transition);
  background:var(--surface);
}
.option-content:hover { border-color:var(--primary); background:rgba(99,102,241,.04); }
.answer-option.selected .option-content { border-color:var(--primary); background:rgba(99,102,241,.08); }
.answer-option.correct .option-content { border-color:var(--success)!important; background:rgba(34,197,94,.08)!important; }
.answer-option.wrong .option-content { border-color:var(--danger)!important; background:rgba(239,68,68,.08)!important; }
.option-letter {
  width:32px; height:32px; border-radius:50%;
  background:var(--bg); border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.85rem; flex-shrink:0;
}

/* ── Sidebar-related for materi ─────────────────────────── */
.bab-item {
  display:flex; align-items:center; gap:12px;
  padding:1rem 1.25rem;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); text-decoration:none;
  color:var(--text); transition:var(--transition); margin-bottom:8px;
}
.bab-item:hover { border-color:var(--primary); box-shadow:var(--shadow); }
.bab-number {
  width:40px; height:40px; border-radius:10px;
  background:rgba(99,102,241,.1); color:var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; flex-shrink:0;
}
.bab-item.completed .bab-number { background:rgba(34,197,94,.1); color:var(--success); }

/* Reading progress bar */
.reading-progress-bar {
  position:fixed; top:0; left:0; height:3px;
  background:linear-gradient(90deg,var(--primary),#8b5cf6);
  z-index:9999; transition:width .1s;
}

/* TOC */
.toc-sticky { position:sticky; top:calc(var(--navbar-h) + 1rem); max-height:calc(100vh - var(--navbar-h) - 2rem); overflow-y:auto; }
.toc-item { display:block; font-size:.82rem; padding:3px 0; color:var(--muted); text-decoration:none; transition:var(--transition); }
.toc-item:hover,.toc-item.active { color:var(--primary); font-weight:600; }
.toc-level-1 { padding-left:1rem; font-size:.78rem; }

/* Code copy button */
.code-block-wrapper { position:relative; }
.btn-copy { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:.72rem; border-radius:6px; }
.btn-copy:hover { background:rgba(255,255,255,.2); color:#fff; }
.btn-copy.copied { background:rgba(34,197,94,.7); }

/* ── Dark mode overrides ────────────────────────────────── */
[data-theme="dark"] .bg-light { background:rgba(255,255,255,.04)!important; }
[data-theme="dark"] .border { border-color:var(--border)!important; }
[data-theme="dark"] .table-light { background:rgba(255,255,255,.03)!important; }
[data-theme="dark"] .form-control,[data-theme="dark"] .form-select { background:var(--surface); border-color:var(--border); color:var(--text); }
[data-theme="dark"] .form-control:focus,[data-theme="dark"] .form-select:focus { background:var(--surface2); }
[data-theme="dark"] .modal-content { background:var(--surface); border-color:var(--border); }
[data-theme="dark"] .modal-header,[data-theme="dark"] .modal-footer { border-color:var(--border); }
[data-theme="dark"] .input-group-text { background:var(--surface2); border-color:var(--border); }
[data-theme="dark"] .btn-outline-secondary { color:var(--muted); border-color:var(--border); }
[data-theme="dark"] .btn-outline-secondary:hover { background:var(--bg); color:var(--text); }
[data-theme="dark"] code { background:rgba(255,255,255,.08)!important; color:#a5b4fc!important; }

/* ── Utilities ──────────────────────────────────────────── */
.text-truncate-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.container-materi { max-width:1400px; margin:0 auto; }
.font-mono { font-family:var(--font-code); }
.rounded-xl { border-radius:var(--radius-lg)!important; }
.shadow-soft { box-shadow:var(--shadow)!important; }

/* Login page specific */
.login-page { background:var(--bg); }
.login-container { display:flex; min-height:100vh; }
.login-left { width:420px; flex-shrink:0; }
.login-right { flex:1; background:var(--surface); }
@media(max-width:991.98px) { .login-left { display:none!important; } }

/* Sekolah autocomplete */
.sekolah-dropdown {
  position:absolute; top:100%; left:0; right:0; z-index:999;
  border:1px solid var(--border); border-radius:10px;
  max-height:200px; overflow-y:auto;
  background:var(--surface); box-shadow:var(--shadow-md);
  margin-top:2px;
}
.sekolah-dropdown .item {
  padding:.6rem 1rem; cursor:pointer; font-size:.875rem;
  display:flex; align-items:center; gap:.5rem; transition:background .15s;
}
.sekolah-dropdown .item:hover { background:var(--bg); }
.sekolah-dropdown .item-umum { border-top:1px solid var(--border); color:var(--muted); font-style:italic; }