/* ============================================================
 * KOPASUS IT HUB - css/theme-kopasus.css
 * Tema "Elegan" mengikuti logo Kopasus IT SMA Plus PGRI Cibinong:
 *   biru navy (cincin), emas pucat (huruf IT), merah (pita),
 *   charcoal (latar tengah) dan putih perak (teks timbul).
 * Dimuat SETELAH app.css, components.css, responsive.css agar
 * menimpa token warna dan beberapa komponen tanpa mengubah logika.
 * ============================================================ */

@font-face { font-family: "Jakarta"; src: url("../assets/fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("../assets/fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("../assets/fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("../assets/fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("../assets/fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  /* Palet logo */
  --navy-950: #050830;
  --navy-900: #090e46;
  --navy-800: #0e1560;
  --navy-700: #16217d;
  --navy-600: #243399;
  --gold:      #e9dd6f;
  --gold-deep: #b6a52e;
  --gold-soft: #fbf7d6;
  --logo-red:  #f2300f;
  --charcoal:  #3e3f41;
  --silver:    #eef0f7;

  /* Permukaan (terang) */
  --bg: #f3f4f9;
  --bg-soft: #eaecf5;
  --bg-elev: #ffffff;
  --bg-elev-2: #f6f7fc;
  --line: #e4e7f1;
  --line-strong: #d0d5e6;
  --topbar-bg: rgba(255, 255, 255, .9);

  /* Teks */
  --text: #0f1440;
  --text-dim: #565c80;
  --text-faint: #8a8fab;

  /* Aksen utama = navy */
  --accent: #14206e;
  --accent-2: #26379f;
  --accent-soft: #e8ebf9;
  --accent-ink: #ffffff;

  /* Status selaras palet */
  --ok: #15803d;      --ok-soft: #e6f5ec;
  --warn: #b7791f;    --warn-soft: #fbf3dc;
  --danger: #d92b10;  --danger-soft: #fdebe7;
  --info: #2f55d4;    --info-soft: #e8eefd;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow-soft: 0 1px 2px rgba(9, 14, 70, .05);
  --shadow: 0 14px 30px -20px rgba(9, 14, 70, .45), 0 1px 2px rgba(9, 14, 70, .06);

  --font-serif: "Georgia", "Cambria", "Times New Roman", serif;
  --font-sans: "Jakarta", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Warna per divisi: tetap berbeda, tetap satu keluarga dengan logo */
[data-division="RPL"] { --accent: #14206e; --accent-2: #26379f; --accent-soft: #e8ebf9; }
[data-division="TKJ"] { --accent: #0b4f7a; --accent-2: #1c79b0; --accent-soft: #e2f1fa; }
[data-division="MM"]  { --accent: #a8200d; --accent-2: #e0391b; --accent-soft: #fdeae6; }

/* ===== Tema gelap: navy malam + emas ===== */
[data-theme="dark"] {
  --bg: #070a26;
  --bg-soft: #0c1138;
  --bg-elev: #10164a;
  --bg-elev-2: #161d5a;
  --line: #222a6c;
  --line-strong: #323c84;
  --topbar-bg: rgba(8, 11, 40, .9);

  --text: #eef0fb;
  --text-dim: #aab0d6;
  --text-faint: #7a81ad;

  --accent: #3f55d6;
  --accent-2: #5f74ee;
  --accent-soft: #1b2370;
  --accent-ink: #ffffff;

  --ok: #4ade80;     --ok-soft: #0f2a22;
  --warn: #fbd24e;   --warn-soft: #2e2810;
  --danger: #ff6a50; --danger-soft: #34150f;
  --info: #7f9bff;   --info-soft: #14205e;

  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow: 0 16px 34px -20px rgba(0, 0, 0, .8), 0 1px 2px rgba(0, 0, 0, .5);
}
[data-theme="dark"][data-division="RPL"] { --accent: #3f55d6; --accent-2: #5f74ee; --accent-soft: #1b2370; }
[data-theme="dark"][data-division="TKJ"] { --accent: #1f86c2; --accent-2: #3aa6e2; --accent-soft: #0f2c4d; }
[data-theme="dark"][data-division="MM"]  { --accent: #d63a1e; --accent-2: #f2593b; --accent-soft: #3a1612; }

/* ---------------- DASAR ---------------- */

body {
  background:
    radial-gradient(1100px 420px at 78% -140px, color-mix(in srgb, var(--navy-700) 9%, transparent), transparent 70%),
    var(--bg);
}
[data-theme="dark"] body {
  background:
    radial-gradient(1000px 460px at 80% -160px, rgba(36, 51, 153, .35), transparent 70%),
    var(--bg);
}

h1, h2, h3 { font-weight: 800; letter-spacing: -.015em; }
h1 { font-size: 24px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
body, button, input, select, textarea { font-family: var(--font-sans); }

a { color: var(--accent-2); }
[data-theme="dark"] a { color: var(--gold); }

:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
::selection { background: var(--gold); color: var(--navy-900); }

* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

.section-title {
  display: flex; align-items: center; gap: 10px; color: var(--text-dim);
  letter-spacing: .14em;
}
.section-title::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
}

/* ---------------- SIDEBAR (terang & bersih, aksen navy-emas) ---------------- */

.sidebar {
  background: var(--bg-elev); border-right: 1px solid var(--line); box-shadow: none; color: var(--text);
}
.sidebar-brand { padding: 16px 18px; border-bottom: 1px solid var(--line); gap: 12px; }
.brand-logo {
  width: 44px; height: 44px; flex: none; object-fit: contain; display: block;
  filter: drop-shadow(0 4px 8px rgba(9, 14, 70, .25));
}
.brand-text strong { font-size: 15.5px; font-weight: 800; letter-spacing: .04em; color: var(--text); }
.sidebar .division-tag {
  color: var(--gold-deep); letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; font-weight: 700;
}
[data-theme="dark"] .sidebar .division-tag { color: var(--gold); }

.sidebar .nav-group-label { color: var(--text-faint); letter-spacing: .12em; padding: 16px 12px 6px; }
.sidebar .nav-group-label.is-manage { color: var(--gold-deep); }
[data-theme="dark"] .sidebar .nav-group-label.is-manage { color: var(--gold); }
.nav-desktop button .ic svg { width: 18px; height: 18px; }
.sidebar .nav-desktop button { color: var(--text-dim); font-weight: 600; }
.sidebar .nav-desktop button .ic { background: transparent; width: 28px; height: 28px; }
.sidebar .nav-desktop button:hover { background: var(--bg-elev-2); color: var(--text); }
.sidebar .nav-desktop button[aria-current="page"] {
  background: var(--accent-soft); color: var(--accent); box-shadow: none; font-weight: 700;
}
[data-theme="dark"] .sidebar .nav-desktop button[aria-current="page"] { color: var(--gold); }
.sidebar .nav-desktop button[aria-current="page"]::before {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep)); width: 4px; box-shadow: none; left: -12px;
}
.sidebar .nav-desktop button[aria-current="page"] .ic {
  background: var(--navy-800); color: var(--gold); transform: none; border-radius: 9px;
}
[data-theme="dark"] .sidebar .nav-desktop button[aria-current="page"] .ic { background: var(--navy-700); }

/* Penanda area Kelola: pita emas lembut yang memisahkan dari menu fitur */
.nav-manage-head {
  display: flex; align-items: center; gap: 8px; margin: 18px 2px 2px; padding: 9px 12px;
  border-radius: 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--navy-800); background: linear-gradient(90deg, var(--gold-soft), transparent);
  border-left: 3px solid var(--gold-deep);
}
[data-theme="dark"] .nav-manage-head { color: var(--gold); background: linear-gradient(90deg, rgba(233, 221, 111, .14), transparent); }
.nav-manage-head .icon-sm { color: var(--gold-deep); }

.sidebar-foot { border-top: 1px solid var(--line); }
.sidebar .ghost-btn { background: var(--bg-elev-2); color: var(--text-dim); border-color: var(--line); }
.sidebar .ghost-btn:hover { color: var(--text); border-color: var(--gold-deep); background: var(--bg-elev-2); }
.sidebar .ghost-btn.danger { background: var(--logo-red); color: #fff; border-color: transparent; }
.sidebar .ghost-btn.danger:hover { filter: brightness(.94); background: var(--logo-red); }

/* ---------------- TOPBAR ---------------- */

.topbar { border-bottom: 1px solid var(--line); position: sticky; }
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--gold-deep) 18%, var(--gold) 50%, var(--gold-deep) 82%, transparent 100%);
  opacity: .75; pointer-events: none;
}
.topbar .brand-logo { width: 36px; height: 36px; }
.topbar .brand-text strong { color: var(--text); font-size: 15px; }
.wib-clock { color: var(--accent); letter-spacing: .03em; }
[data-theme="dark"] .wib-clock { color: var(--gold); }
.icon-btn:hover { border-color: var(--gold-deep); }

.avatar {
  background: linear-gradient(145deg, var(--navy-700), var(--navy-900));
  color: var(--gold); box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 3.5px var(--gold-deep);
  font-weight: 800;
}

/* ---------------- KARTU & KOMPONEN ---------------- */

.card { border-radius: var(--radius); }
.card:hover { border-color: var(--line-strong); }
.card-hero {
  background: linear-gradient(160deg, var(--accent-soft) 0%, var(--bg-elev) 62%);
  border-color: var(--line-strong);
}

.page-emoji {
  background: var(--navy-900); color: var(--gold);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--gold-deep);
}
[data-theme="dark"] .page-emoji { background: var(--navy-700); }
.page-head h1 { position: relative; }

.btn-primary {
  background: linear-gradient(135deg, var(--navy-800), var(--accent-2));
  color: #fff; border-color: transparent;
  box-shadow: inset 0 -2px 0 rgba(233, 221, 111, .9), 0 12px 24px -16px var(--navy-800);
}
[data-division="TKJ"] .btn-primary { background: linear-gradient(135deg, #0a416a, #1c79b0); }
[data-division="MM"] .btn-primary { background: linear-gradient(135deg, #8d1a0a, #e0391b); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn-outline:hover { border-color: var(--gold-deep); color: var(--accent); }
[data-theme="dark"] .btn-outline:hover { color: var(--gold); }

.tile:hover, .row-item.clickable:hover { border-color: var(--gold-deep); }
.tile-ic, .stat .stat-ic, .statb-head .stat-ic {
  background: linear-gradient(145deg, var(--accent-soft), var(--bg-elev-2));
  border: 1px solid color-mix(in srgb, var(--gold-deep) 35%, transparent);
}

.stat .num, .statb-num { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }

.progress { background: var(--bg-soft); }
.progress > i { background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }

.tabs { background: var(--bg-soft); }
.tabs button[aria-selected="true"] {
  color: var(--accent); background: var(--bg-elev);
  box-shadow: var(--shadow-soft), inset 0 -2px 0 var(--gold-deep);
}
[data-theme="dark"] .tabs button[aria-selected="true"] { color: var(--gold); }

.pill-info { color: var(--info); }

table.data th { color: var(--text-dim); background: var(--bg-elev-2); border-bottom: 2px solid color-mix(in srgb, var(--gold-deep) 45%, var(--line)); }

.input:focus, .textarea:focus, select.input:focus {
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 38%, transparent);
}
.choice.selected { border-color: var(--gold-deep); }
.choice input { accent-color: var(--navy-700); }

.modal { border-top: 3px solid var(--gold-deep); }
.modal-head h3, .np-head h3 { font-size: 17px; }
.modal-backdrop, .drawer-backdrop { background: rgba(5, 8, 48, .5); }
.drawer { border-top: 2px solid var(--gold-deep); }
.notif-panel { border-top: 2px solid var(--gold-deep); }
.toast { border-left-color: var(--gold-deep); }
.notif-item.unread { background: var(--accent-soft); border-color: color-mix(in srgb, var(--gold-deep) 35%, transparent); }
.feed-dot { background: var(--gold-deep); }
.agenda-date { background: var(--navy-900); color: var(--gold); }
.agenda-date b { color: #fff; }
.agenda-date span { color: var(--gold); }
[data-theme="dark"] .agenda-date { background: var(--navy-700); }

.alert-info   { color: var(--info); }
.alert-warn   { color: #7a4f0b; }
.alert-danger { color: #a11d0a; }
[data-theme="dark"] .alert-warn   { color: var(--warn); }
[data-theme="dark"] .alert-danger { color: var(--danger); }

.picket-col-head {
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
  border-bottom: 3px solid var(--gold-deep);
}
.fri-badge-apel { background: var(--navy-800); box-shadow: inset 0 -2px 0 var(--gold); }
.fri-badge-ngopi { background: var(--logo-red); }

/* ---------------- HERO BERANDA ---------------- */

.hero-user {
  background:
    radial-gradient(520px 260px at 100% 0%, rgba(233, 221, 111, .13), transparent 65%),
    linear-gradient(125deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
  box-shadow: 0 22px 44px -28px var(--navy-900), inset 0 -3px 0 var(--gold-deep);
  border-radius: var(--radius-lg);
}
/* Cincin konsentris: gema bentuk logo */
.hero-user::after {
  right: -90px; top: -110px; width: 380px; height: 380px; background: transparent;
  border: 34px solid rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 2px rgba(233, 221, 111, .22), 0 0 0 2px rgba(233, 221, 111, .12);
}
.hero-user h2 { font-size: 26px; font-weight: 800; color: #fff; }
.hero-user .mono { color: var(--gold); }
.hero-user .avatar {
  background: rgba(255, 255, 255, .1); color: var(--gold);
  border: 0; box-shadow: 0 0 0 2px var(--navy-800), 0 0 0 3.5px var(--gold);
}
.hero-quote {
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(233, 221, 111, .28);
}
.hero-quote-mark { color: var(--gold); font-family: var(--font-serif); }
.hero-quote-text { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

/* ---------------- NAVIGASI BAWAH (HP) ---------------- */

.bottom-nav { border-top: 2px solid var(--gold-deep); }
.bottom-nav button[aria-current="page"] { color: var(--accent); }
[data-theme="dark"] .bottom-nav button[aria-current="page"] { color: var(--gold); }

/* ---------------- HALAMAN MASUK ---------------- */

.auth-overlay {
  background:
    radial-gradient(700px 420px at 50% -8%, rgba(36, 51, 153, .8) 0%, transparent 70%),
    radial-gradient(500px 380px at 100% 100%, rgba(233, 221, 111, .1) 0%, transparent 70%),
    linear-gradient(160deg, var(--navy-800) 0%, var(--navy-950) 100%);
}
.auth-card {
  position: relative; border: 0; border-radius: 22px; padding: 34px 28px 28px;
  box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .75), 0 0 0 1px rgba(233, 221, 111, .3);
  background: var(--bg-elev);
}
.auth-card::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-deep));
}
.auth-logo {
  display: block; width: 112px; height: 112px; margin: -4px auto 10px; object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(5, 8, 48, .35));
}
.auth-mark {
  background: linear-gradient(145deg, var(--navy-700), var(--navy-900));
  box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 4px var(--gold-deep);
  color: var(--gold);
}
.auth-title { font-size: 21px; font-weight: 800; letter-spacing: .06em; color: var(--text); }
.auth-sub { margin-bottom: 22px; }

/* ---------------- FOOTER ---------------- */

.app-foot { border-top: 1px solid var(--line); }

/* ---------------- HP: topbar lebih ringkas ---------------- */
@media (max-width: 1023px) {
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar .brand-text { display: none; }
  .topbar-right { gap: 8px; }
  .wib-clock { padding: 6px 10px; font-size: 11.5px; white-space: nowrap; }
  .wib-clock::before { display: none; }
  .icon-btn { width: 38px; height: 38px; }
}

/* ---------------- IKON (Lucide) ---------------- */
.icon { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }
.icon-sm { width: 16px; height: 16px; }
.icon-xl { width: 44px; height: 44px; stroke-width: 1.5; }
.page-emoji .icon, .hero-emoji .icon { width: 22px; height: 22px; }
.tile-ic .icon, .stat-ic .icon { width: 22px; height: 22px; }
.tile-ic, .stat .stat-ic, .statb-head .stat-ic { color: var(--accent); }
[data-theme="dark"] .tile-ic, [data-theme="dark"] .stat .stat-ic, [data-theme="dark"] .statb-head .stat-ic { color: var(--gold); }
.hero-emoji { color: var(--accent); }
.icon-btn .icon { width: 19px; height: 19px; }
.bottom-nav button .ic .icon { width: 22px; height: 22px; }
.btn .icon-sm, .ghost-btn .icon-sm { margin-right: -2px; }
.empty .em { color: var(--text-faint); display: grid; place-items: center; }

/* Warna kartu statistik beranda mengikuti palet logo */
.stat-grid > :nth-child(1) .stat-ic { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.stat-grid > :nth-child(2) .stat-ic { background: var(--gold-soft); color: #8a7a14; border-color: transparent; }
.stat-grid > :nth-child(3) .stat-ic { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.stat-grid > :nth-child(4) .stat-ic { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
[data-theme="dark"] .stat-grid > :nth-child(2) .stat-ic { background: rgba(233, 221, 111, .14); color: var(--gold); }

/* ---------------- BERANDA: pemisah fitur vs kelola ---------------- */
.home-divider {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin-top: 14px;
  padding: 14px 18px; border-radius: var(--radius);
  background: linear-gradient(100deg, var(--navy-900), var(--navy-700)); color: #fff;
  box-shadow: inset 0 -3px 0 var(--gold-deep);
}
.home-divider > .icon { width: 28px; height: 28px; color: var(--gold); }
.home-divider-title { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; }
.home-divider-sub { font-size: 12.5px; color: rgba(255, 255, 255, .72); }
.home-shortcut-block.is-manage .tile { border-left: 3px solid var(--gold-deep); }
.home-shortcut-block.is-manage .section-title { color: var(--gold-deep); }
[data-theme="dark"] .home-shortcut-block.is-manage .section-title { color: var(--gold); }