/* ============ TOKENS ============ */
:root{
  --red-950:#3d0f14;
  --red-900:#5c1620;
  --red-800:#7a1f2b;
  --red-700:#8f2a35;
  --red-600:#a83c46;
  --red-100:#f3e3e2;
  --gold:#c9a227;
  --gold-soft:#e7cf87;
  --ink:#271417;
  --ink-soft:#5a4247;
  --paper:#faf6f3;
  --surface:#ffffff;
  --line:#e9dcd8;
  --success:#4f7a5a;
  --warn:#b8752e;
  --danger:#a3372f;

  --radius-s:8px;
  --radius-m:14px;
  --radius-l:22px;
  --shadow-1:0 2px 10px rgba(61,15,20,.08);
  --shadow-2:0 12px 32px rgba(61,15,20,.16);

  --font-head:'Sora',sans-serif;
  --font-body:'Inter',sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-head); margin:0; color:var(--red-950);}
p{margin:0;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit;}
.hidden{display:none !important;}
:focus-visible{outline:2px solid var(--red-700); outline-offset:2px;}

/* ============ BUTTONS ============ */
.btn-primary{
  background:linear-gradient(155deg,var(--red-800),var(--red-950));
  color:#fff;
  border:none;
  padding:13px 20px;
  border-radius:var(--radius-s);
  font-weight:600;
  font-size:.95rem;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:var(--shadow-1);
}
.btn-primary:hover{transform:translateY(-1px); box-shadow:var(--shadow-2);}
.btn-primary.small{padding:9px 16px; font-size:.85rem;}
.btn-ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,.25);
  color:#f3e3e2;
  padding:9px 14px;
  border-radius:var(--radius-s);
  font-weight:500;
  font-size:.85rem;
}
.btn-ghost:hover{background:rgba(255,255,255,.08);}
.btn-danger{
  background:transparent;
  color:var(--danger);
  border:1px solid var(--danger);
  padding:10px 16px;
  border-radius:var(--radius-s);
  font-weight:600;
  margin-right:auto;
}
.btn-danger:hover{background:rgba(163,55,47,.08);}

/* ============ AUTH SCREEN ============ */
.auth-screen{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
}
.auth-side{
  background:
    radial-gradient(circle at 15% 20%, rgba(201,162,39,.18), transparent 45%),
    linear-gradient(160deg,var(--red-900),var(--red-950) 70%);
  color:var(--red-100);
  display:flex;
  align-items:center;
  padding:60px;
}
.auth-side-inner{max-width:420px;}
.brand-badge{
  width:52px; height:52px;
  border-radius:14px;
  background:var(--gold);
  color:var(--red-950);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:800; font-size:1.1rem;
  margin-bottom:22px;
}
.brand-badge.small{width:36px; height:36px; font-size:.85rem; margin-bottom:0;}
.auth-side-inner h1{color:#fff; font-size:2.1rem; margin-bottom:14px;}
.auth-side-inner p{line-height:1.6; color:var(--red-100); opacity:.9; margin-bottom:26px;}
.auth-features{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px;}
.auth-features li{
  padding-left:26px;
  position:relative;
  font-size:.92rem;
  color:var(--red-100);
}
.auth-features li::before{
  content:"✓";
  position:absolute; left:0; top:0;
  color:var(--gold-soft);
  font-weight:700;
}

.auth-forms{
  display:flex; align-items:center; justify-content:center;
  padding:40px;
}
.auth-card{
  width:100%; max-width:380px;
  background:var(--surface);
  border-radius:var(--radius-l);
  padding:36px 34px;
  box-shadow:var(--shadow-2);
  display:flex; flex-direction:column;
}
.auth-card h2{font-size:1.4rem; margin-bottom:6px;}
.auth-sub{color:var(--ink-soft); font-size:.88rem; margin-bottom:22px;}
.auth-card label{font-size:.82rem; font-weight:600; margin-bottom:6px; margin-top:14px; color:var(--ink);}
.auth-card input, .auth-card select, .auth-card textarea{
  border:1.5px solid var(--line);
  border-radius:var(--radius-s);
  padding:11px 13px;
  font-size:.92rem;
  background:var(--paper);
  color:var(--ink);
}
.auth-card input:focus{border-color:var(--red-700);}
.password-field{position:relative; display:flex;}
.password-field input{flex:1; padding-right:42px;}
.toggle-eye{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; font-size:1rem; opacity:.6;
}
.remember-row{
  flex-direction:row !important;
  align-items:center;
  gap:8px;
  font-weight:500 !important;
  font-size:.85rem !important;
  color:var(--ink-soft);
  cursor:pointer;
}
.remember-row input{width:16px; height:16px; margin:0;}
.form-error{color:var(--danger); font-size:.82rem; min-height:1.1em; margin-top:10px;}
.form-success{color:var(--success); font-size:.82rem; min-height:1.1em; margin-top:6px;}
.auth-card .btn-primary{margin-top:8px; width:100%;}
.switch-auth{
  text-align:center; margin-top:20px; font-size:.85rem; color:var(--ink-soft);
}
.switch-auth button{
  background:none; border:none; color:var(--red-800); font-weight:700; padding:0; font-size:inherit;
}

/* ============ APP LAYOUT ============ */
.app-screen{
  display:flex;
  min-height:100vh;
}
.sidebar{
  width:250px;
  flex-shrink:0;
  background:linear-gradient(180deg,var(--red-900),var(--red-950));
  display:flex;
  flex-direction:column;
  padding:26px 18px;
  position:sticky; top:0; height:100vh;
}
.sidebar-brand{
  display:flex; align-items:center; gap:12px;
  color:#fff; font-family:var(--font-head); font-weight:700; font-size:1.05rem;
  margin-bottom:34px; padding:0 6px;
}
.sidebar-nav{display:flex; flex-direction:column; gap:6px; flex:1;}
.nav-item{
  display:flex; align-items:center; gap:12px;
  background:transparent; border:none;
  color:var(--red-100); opacity:.8;
  padding:12px 14px; border-radius:var(--radius-s);
  font-size:.92rem; font-weight:500; text-align:left;
  transition:background .15s ease, opacity .15s ease;
}
.nav-item:hover{background:rgba(255,255,255,.06); opacity:1;}
.nav-item.active{background:rgba(255,255,255,.12); opacity:1; color:#fff; font-weight:600;}
.nav-icon{font-size:1rem; width:18px; text-align:center;}
.sidebar-footer{display:flex; flex-direction:column; gap:14px; border-top:1px solid rgba(255,255,255,.12); padding-top:18px;}
.user-chip{display:flex; align-items:center; gap:10px;}
.user-avatar{
  width:38px; height:38px; border-radius:50%;
  background:var(--gold); color:var(--red-950);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-family:var(--font-head); flex-shrink:0;
}
.user-info{display:flex; flex-direction:column; line-height:1.25; overflow:hidden;}
.user-info strong{color:#fff; font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.user-info span{color:var(--red-100); font-size:.75rem; opacity:.75;}

.main-content{flex:1; padding:32px 40px; max-width:1100px;}
.topbar{
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:26px;
}
.topbar h1{font-size:1.6rem;}
.topbar p{color:var(--ink-soft); font-size:.9rem; margin-top:4px; text-transform:capitalize;}

.content-section{display:none;}
.content-section.active{display:block; animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

/* ============ STAT ROW ============ */
.stat-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:26px;
}
.stat-card{
  background:var(--surface); border-radius:var(--radius-m);
  padding:18px 20px; box-shadow:var(--shadow-1);
  border-left:4px solid var(--red-800);
  display:flex; flex-direction:column; gap:4px;
}
.stat-card-warn{border-left-color:var(--warn);}
.stat-number{font-family:var(--font-head); font-size:1.7rem; font-weight:700; color:var(--red-950);}
.stat-card-warn .stat-number{color:var(--warn);}
.stat-label{font-size:.8rem; color:var(--ink-soft);}

/* ============ PANELS ============ */
.dashboard-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.panel{
  background:var(--surface); border-radius:var(--radius-m);
  padding:22px; box-shadow:var(--shadow-1);
}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.panel-head h3{font-size:1.05rem;}
.panel-tag{
  font-size:.78rem; background:var(--red-100); color:var(--red-800);
  padding:4px 10px; border-radius:20px; font-weight:600;
}

.list-stack{display:flex; flex-direction:column; gap:10px;}
.list-empty{
  color:var(--ink-soft); font-size:.88rem; text-align:center;
  padding:30px 10px; border:1.5px dashed var(--line); border-radius:var(--radius-s);
}

/* item kelas */
.class-item, .task-item{
  display:flex; align-items:center; gap:14px;
  padding:13px 14px;
  border-radius:var(--radius-s);
  border-left:4px solid var(--red-700);
  background:var(--paper);
  cursor:pointer;
  transition:background .15s ease;
}
.class-item:hover, .task-item:hover{background:var(--red-100);}
.item-time{
  font-family:var(--font-head); font-weight:700; font-size:.85rem; color:var(--red-800);
  min-width:64px; text-align:center;
}
.item-body{flex:1; min-width:0;}
.item-title{font-weight:600; font-size:.92rem; margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.item-sub{font-size:.78rem; color:var(--ink-soft);}
.item-badge{
  font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap;
}
.badge-danger{background:#f6dedb; color:var(--danger);}
.badge-warn{background:#f5e6d0; color:var(--warn);}
.badge-ok{background:#deeee2; color:var(--success);}
.badge-muted{background:var(--line); color:var(--ink-soft);}
.task-item.done{opacity:.55;}
.task-item.done .item-title{text-decoration:line-through;}

/* ============ JADWAL GRID ============ */
.jadwal-grid{display:flex; flex-direction:column; gap:22px;}
.jadwal-day{}
.jadwal-day h4{
  font-family:var(--font-head); font-size:.95rem; color:var(--red-900);
  margin-bottom:10px; padding-bottom:6px; border-bottom:2px solid var(--red-100);
}

/* ============ MODALS ============ */
.modal-overlay{
  position:fixed; inset:0; background:rgba(61,15,20,.45);
  display:flex; align-items:center; justify-content:center;
  padding:20px; z-index:100;
}
.modal-card{
  background:var(--surface); border-radius:var(--radius-l);
  width:100%; max-width:460px;
  padding:26px 28px;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-2);
  max-height:90vh; overflow-y:auto; overflow-x:hidden;
  animation:pop .18s ease;
}
@keyframes pop{from{transform:scale(.96); opacity:0;} to{transform:scale(1); opacity:1;}}
.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.modal-close{background:none; border:none; font-size:1.4rem; color:var(--ink-soft); line-height:1;}
.modal-card label{font-size:.82rem; font-weight:600; margin-bottom:6px; margin-top:14px; display:block;}
.modal-card input, .modal-card select, .modal-card textarea{
  width:100%; border:1.5px solid var(--line); border-radius:var(--radius-s);
  padding:11px 13px; font-size:.92rem; background:var(--paper); color:var(--ink);
}
.modal-card input:focus, .modal-card select:focus, .modal-card textarea:focus{border-color:var(--red-700);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; min-width:0;}
.form-row > div{min-width:0;}
.form-row input, .form-row select{width:100%; min-width:0;}
input[type="time"], input[type="datetime-local"]{
  min-width:0;
  -webkit-min-logical-width:0;
}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:22px;}

.quick-add-card{max-width:360px; gap:10px;}
.quick-choice{
  display:flex; align-items:center; gap:14px;
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius-m);
  padding:16px; text-align:left; margin-top:10px;
}
.quick-choice:hover{border-color:var(--red-700); background:var(--red-100);}
.quick-choice .nav-icon{font-size:1.3rem; color:var(--red-800);}
.quick-choice small{color:var(--ink-soft); display:block; font-size:.78rem; margin-top:2px;}

/* ============ TOAST ============ */
.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%);
  background:var(--red-950); color:#fff; padding:12px 22px;
  border-radius:30px; font-size:.88rem; box-shadow:var(--shadow-2);
  z-index:200; animation:fadeIn .2s ease;
}

/* ============ BOTTOM NAV (mobile) ============ */
.bottom-nav{display:none;}

/* ============ RESPONSIVE ============ */
@media (max-width:980px){
  .dashboard-grid{grid-template-columns:1fr;}
  .stat-row{grid-template-columns:1fr 1fr;}
}

@media (max-width:760px){
  .auth-screen{grid-template-columns:1fr;}
  .auth-side{display:none;}
  .auth-forms{padding:24px 16px;}

  .app-screen{flex-direction:column;}
  .sidebar{display:none;}
  .main-content{padding:20px 16px 90px; max-width:none;}
  .stat-row{grid-template-columns:1fr 1fr; gap:10px;}
  .form-row{grid-template-columns:1fr;}

  .bottom-nav{
    display:flex; justify-content:space-around;
    position:fixed; bottom:0; left:0; right:0;
    background:linear-gradient(180deg,var(--red-900),var(--red-950));
    padding:8px 4px 10px;
    box-shadow:0 -4px 18px rgba(61,15,20,.25);
    z-index:50;
  }
  .bnav-item{
    background:none; border:none; color:var(--red-100); opacity:.75;
    display:flex; flex-direction:column; align-items:center; gap:3px;
    font-size:.68rem; padding:4px 10px; border-radius:10px;
  }
  .bnav-item.active{opacity:1; background:rgba(255,255,255,.12); color:#fff; font-weight:700;}
}

@media (max-width:420px){
  .stat-card{padding:14px;}
  .stat-number{font-size:1.4rem;}
}