/* =====================================================================
   TWIN EDU AI — DESIGN SYSTEM
   Tema: "Living Twin" — jejaring hijau organik + emas Kemenag
   Font Display : Plus Jakarta Sans   Font Body : Inter   Font Data : JetBrains Mono
   ===================================================================== */

:root{
  /* ---- Palet warna resmi blueprint ---- */
  --emerald-900:#0B4A1F;      /* hijau tua kemenag gelap */
  --emerald-700:#0F7B0F;      /* hijau kemenag utama */
  --emerald-500:#2FA84F;      /* hijau muda aksen */
  --emerald-200:#CDEFD9;      /* hijau sangat muda / bg tint */
  --emerald-50:#F2FBF4;
  --gold-500:#D4AF37;         /* emas */
  --gold-100:#FBF1D2;
  --ink-900:#0E1B14;          /* teks utama, hijau-hitam */
  --ink-600:#4B5D53;
  --ink-400:#8AA093;
  --paper:#F7FAF7;            /* putih hangat */
  --white:#FFFFFF;
  --danger:#E1503B;
  --warning:#E8A93B;
  --info:#2F7BA8;

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-pill:999px;

  --shadow-sm:0 2px 8px rgba(14,27,20,.06);
  --shadow-md:0 8px 24px rgba(14,27,20,.08);
  --shadow-lg:0 20px 48px rgba(11,74,31,.16);

  --font-display:'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  background:
    radial-gradient(circle at 8% 0%, var(--emerald-200) 0%, transparent 40%),
    radial-gradient(circle at 100% 10%, var(--gold-100) 0%, transparent 35%),
    var(--paper);
  color:var(--ink-900);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,.font-display{font-family:var(--font-display); letter-spacing:-0.02em; font-weight:700;}
.font-mono{font-family:var(--font-mono);}
a{text-decoration:none;color:inherit;}

/* ---------------------------------------------------------------------
   SIGNATURE ELEMENT: "Twin Orbit" — cincin data yang mengorbit avatar,
   melambangkan Digital Twin siswa yang terus dipelajari AI.
   --------------------------------------------------------------------- */
.twin-orbit{
  position:relative; width:180px; height:180px; margin:0 auto;
}
.twin-orbit__core{
  position:absolute; inset:38px; border-radius:50%;
  background:linear-gradient(145deg, var(--emerald-500), var(--emerald-900));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-display); font-weight:800; font-size:28px;
  box-shadow:0 12px 30px rgba(15,123,15,.35), inset 0 0 0 4px rgba(255,255,255,.15);
  z-index:2;
}
.twin-orbit__ring{
  position:absolute; inset:0; border-radius:50%;
  border:1.5px dashed rgba(15,123,15,.28);
  animation:spin 26s linear infinite;
}
.twin-orbit__ring.ring-2{ inset:16px; border-color:rgba(212,175,55,.4); animation-duration:18s; animation-direction:reverse;}
.twin-orbit__node{
  position:absolute; width:14px; height:14px; border-radius:50%;
  background:var(--gold-500); box-shadow:0 0 0 4px rgba(212,175,55,.18);
}
@keyframes spin{ to{ transform:rotate(360deg);} }
@media (prefers-reduced-motion: reduce){ .twin-orbit__ring{ animation:none; } }

/* ---------------------------------------------------------------------
   GLASS CARD
   --------------------------------------------------------------------- */
.glass-card{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
}
.card-flat{
  background:var(--white);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  border:1px solid rgba(14,27,20,.05);
}

/* ---------------------------------------------------------------------
   BUTTONS
   --------------------------------------------------------------------- */
.btn-twin{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:var(--radius-pill); border:none;
  font-family:var(--font-display); font-weight:600; font-size:14.5px;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
}
.btn-twin-primary{
  background:linear-gradient(135deg, var(--emerald-500), var(--emerald-700));
  color:#fff; box-shadow:0 10px 24px rgba(15,123,15,.28);
}
.btn-twin-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(15,123,15,.36); color:#fff;}
.btn-twin-gold{
  background:linear-gradient(135deg, var(--gold-500), #B8912A);
  color:#3a2e05; box-shadow:0 10px 24px rgba(212,175,55,.30);
}
.btn-twin-outline{
  background:transparent; border:1.5px solid rgba(15,123,15,.3); color:var(--emerald-700);
}
.btn-twin-outline:hover{ background:var(--emerald-50); color:var(--emerald-700);}
.btn-twin-sm{padding:8px 16px; font-size:13px;}
.btn-block{width:100%;}

/* ---------------------------------------------------------------------
   FORM
   --------------------------------------------------------------------- */
.form-label-twin{font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--ink-900); margin-bottom:6px; display:block;}
.form-control-twin{
  width:100%; padding:13px 16px; border-radius:var(--radius-sm);
  border:1.5px solid rgba(14,27,20,.12); background:var(--white);
  font-family:var(--font-body); font-size:14.5px; color:var(--ink-900);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control-twin:focus{
  outline:none; border-color:var(--emerald-500);
  box-shadow:0 0 0 4px rgba(47,168,79,.14);
}
.input-icon-group{position:relative;}
.input-icon-group .icon{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--ink-400);}
.input-icon-group .form-control-twin{padding-left:44px;}

/* ---------------------------------------------------------------------
   TOPBAR / SIDEBAR (Desktop)
   --------------------------------------------------------------------- */
.app-shell{display:flex; min-height:100vh;}
.sidebar{
  width:264px; flex-shrink:0; background:linear-gradient(185deg, var(--emerald-900), #0a3517);
  color:#eafbee; position:sticky; top:0; height:100vh; overflow-y:auto;
  padding:22px 16px; display:flex; flex-direction:column; gap:4px;
}
.sidebar-brand{display:flex; align-items:center; gap:10px; padding:8px 10px 22px;}
.sidebar-brand__mark{
  width:38px; height:38px; border-radius:11px;
  background:linear-gradient(135deg, var(--gold-500), var(--emerald-500));
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; color:#0b2a10;
}
.sidebar-brand__text{font-family:var(--font-display); font-weight:800; font-size:16px; color:#fff; line-height:1.1;}
.sidebar-brand__text span{display:block; font-size:10.5px; font-weight:500; color:rgba(234,251,238,.6); letter-spacing:.06em;}

.nav-group-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:rgba(234,251,238,.4); padding:16px 12px 6px;}
.nav-item-twin{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px;
  color:rgba(234,251,238,.82); font-size:14px; font-weight:500; transition:background .15s ease, color .15s ease;
}
.nav-item-twin:hover{background:rgba(255,255,255,.08); color:#fff;}
.nav-item-twin.active{background:rgba(255,255,255,.14); color:#fff; font-weight:700; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
.nav-item-twin .ic{width:20px; text-align:center; flex-shrink:0;}
.nav-item-twin .badge-ai{margin-left:auto; font-size:9.5px; background:var(--gold-500); color:#3a2e05; padding:2px 6px; border-radius:6px; font-weight:800;}

.main-area{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{
  height:72px; display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; background:rgba(247,250,247,.85); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:20; border-bottom:1px solid rgba(14,27,20,.06);
}
.topbar-title{font-family:var(--font-display); font-weight:700; font-size:19px;}
.topbar-title .eyebrow{display:block; font-family:var(--font-body); font-weight:500; font-size:12px; color:var(--ink-400);}
.user-chip{display:flex; align-items:center; gap:10px; padding:6px 8px 6px 6px; border-radius:var(--radius-pill); background:var(--white); box-shadow:var(--shadow-sm); cursor:pointer;}
.avatar{
  width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg, var(--emerald-500), var(--emerald-900));
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0;
}
.avatar-lg{width:64px; height:64px; font-size:20px;}

.page-body{padding:26px 28px 100px; flex:1;}

/* ---------------------------------------------------------------------
   STAT / AI INSIGHT WIDGETS
   --------------------------------------------------------------------- */
.stat-card{padding:20px; display:flex; flex-direction:column; gap:10px;}
.stat-card__icon{width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:19px;}
.stat-card__value{font-family:var(--font-display); font-size:28px; font-weight:800; line-height:1;}
.stat-card__label{font-size:12.5px; color:var(--ink-600); font-weight:500;}
.stat-trend{font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:var(--radius-pill); width:fit-content;}
.trend-up{background:var(--emerald-50); color:var(--emerald-700);}
.trend-down{background:#FDECE9; color:var(--danger);}

.ai-insight{
  border-radius:var(--radius-lg); padding:22px; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--emerald-700) 0%, var(--emerald-900) 100%);
}
.ai-insight::after{
  content:''; position:absolute; right:-40px; top:-40px; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,.35), transparent 70%);
}
.ai-insight .tag{display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.14); padding:5px 11px; border-radius:var(--radius-pill); font-size:11px; font-weight:700; letter-spacing:.03em;}

.risk-badge{padding:3px 10px; border-radius:var(--radius-pill); font-size:11.5px; font-weight:700;}
.risk-rendah{background:var(--emerald-50); color:var(--emerald-700);}
.risk-sedang{background:var(--gold-100); color:#8a6d17;}
.risk-tinggi{background:#FDECE9; color:var(--danger);}

/* ---------------------------------------------------------------------
   TABLE
   --------------------------------------------------------------------- */
.table-twin{width:100%; border-collapse:separate; border-spacing:0;}
.table-twin thead th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-400); font-weight:700; padding:12px 16px; border-bottom:1.5px solid rgba(14,27,20,.06);
}
.table-twin tbody td{padding:14px 16px; font-size:14px; border-bottom:1px solid rgba(14,27,20,.05);}
.table-twin tbody tr:hover{background:var(--emerald-50);}

/* ---------------------------------------------------------------------
   MOBILE APP MODE — grid kotak-kotak seperti aplikasi Android
   --------------------------------------------------------------------- */
.mobile-app-header{
  display:none;
  padding:20px 20px 60px;
  background:linear-gradient(160deg, var(--emerald-700), var(--emerald-900));
  color:#fff; border-radius:0 0 28px 28px; position:relative; overflow:hidden;
}
.mobile-app-header::after{
  content:''; position:absolute; right:-30px; top:-30px; width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,.3), transparent 70%);
}
.mobile-menu-grid{
  display:none;
  grid-template-columns:repeat(4, 1fr);
  gap:14px; padding:0 16px; margin-top:-44px; position:relative; z-index:5;
}
.mobile-menu-item{
  background:var(--white); border-radius:18px; box-shadow:var(--shadow-md);
  aspect-ratio:1/1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  font-size:10.5px; font-weight:700; color:var(--ink-900); text-align:center; padding:6px 4px;
}
.mobile-menu-item .ic-wrap{
  width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:18px;
}
.mobile-bottom-nav{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:50;
  background:rgba(255,255,255,.92); backdrop-filter:blur(14px);
  border-top:1px solid rgba(14,27,20,.08); padding:8px 6px calc(env(safe-area-inset-bottom) + 6px);
  justify-content:space-around; box-shadow:0 -6px 20px rgba(14,27,20,.06);
}
.mobile-bottom-nav a{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; color:var(--ink-400); font-weight:600; padding:4px 10px;}
.mobile-bottom-nav a.active{color:var(--emerald-700);}
.mobile-bottom-nav .ic{font-size:19px;}

@media (max-width: 860px){
  .sidebar{display:none;}
  .topbar{display:none;}
  .page-body{padding:0 0 90px;}
  .mobile-app-header{display:block;}
  .mobile-menu-grid{display:grid;}
  .mobile-bottom-nav{display:flex;}
  .desktop-only{display:none !important;}
  .app-shell{display:block;}
}
@media (min-width: 861px){
  .mobile-only{display:none !important;}
}

/* Scrollbar halus */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:rgba(15,123,15,.25); border-radius:99px;}

/* Utility */
.text-muted-twin{color:var(--ink-600);}
.text-gold{color:var(--gold-500);}
.text-emerald{color:var(--emerald-700);}
.bg-emerald-50{background:var(--emerald-50);}
.divider{height:1px; background:rgba(14,27,20,.07); margin:18px 0;}