/* =====================================================================
   SIAKAD FKIP UNSA — Tema Utama
   Identitas warna: navy akademik + aksen merah UNSA + biru langit
   ===================================================================== */
:root{
  --navy:#0e3a5c; --navy-700:#0a2c46; --navy-900:#071d30;
  --red:#c1121f; --red-dark:#9c0d18;
  --sky:#2e97b7; --sky-soft:#e6f3f7;
  --gold:#e0a80d;
  --bg:#eef2f6; --surface:#ffffff; --line:#e3e9f0;
  --ink:#17293a; --muted:#6b7c8f; --muted-2:#9aa8b6;
  --ok:#1f9d55; --warn:#e0a80d; --danger:#c1121f; --info:#2e97b7;
  --radius:14px; --radius-sm:9px;
  --shadow-sm:0 1px 2px rgba(14,58,92,.06),0 1px 3px rgba(14,58,92,.05);
  --shadow:0 4px 16px rgba(14,58,92,.08);
  --shadow-lg:0 12px 40px rgba(14,58,92,.16);
  --sidebar-w:264px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:14.5px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--navy);text-decoration:none}
a:hover{color:var(--red)}
.text-navy{color:var(--navy)!important}
.text-red{color:var(--red)!important}
.text-muted-2{color:var(--muted-2)!important}
.fw-800{font-weight:800}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ---------- LAYOUT ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar-w); flex-shrink:0;
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-900) 100%);
  color:#cdd9e5; position:fixed;inset:0 auto 0 0; z-index:1040;
  display:flex;flex-direction:column; box-shadow:2px 0 20px rgba(7,29,48,.18);
  transition:transform .28s ease;
}
.sidebar-brand{
  display:flex;align-items:center;gap:12px;padding:18px 18px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-brand img{width:44px;height:44px;object-fit:contain;
  background:#fff;border-radius:11px;padding:4px;box-shadow:var(--shadow-sm)}
.sidebar-brand .bt{line-height:1.1}
.sidebar-brand .bt b{color:#fff;font-size:16px;font-weight:800;letter-spacing:.2px}
.sidebar-brand .bt span{font-size:11px;color:#8fb0c9;text-transform:uppercase;letter-spacing:.6px}
.sidebar-scroll{overflow-y:auto;flex:1;padding:10px 12px 24px}
.sidebar-scroll::-webkit-scrollbar{width:6px}
.sidebar-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}
.nav-label{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:#6f90aa;padding:16px 12px 6px;font-weight:700}
.nav-item-x{
  display:flex;align-items:center;gap:12px;padding:10px 12px;margin:2px 0;
  border-radius:10px;color:#c2d2df;font-weight:600;font-size:13.6px;
  position:relative;transition:.15s;
}
.nav-item-x i{font-size:17px;width:22px;text-align:center;color:#8fb0c9}
.nav-item-x:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item-x:hover i{color:#fff}
.nav-item-x.active{background:rgba(193,18,31,.16);color:#fff}
.nav-item-x.active i{color:#ff8a93}
.nav-item-x.active::before{
  content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:4px;
  background:var(--red);border-radius:0 4px 4px 0;
}
.nav-item-x .badge{margin-left:auto;font-size:10px}

/* ---------- MAIN ---------- */
.main{flex:1;margin-left:var(--sidebar-w);min-width:0;display:flex;flex-direction:column}
.topbar{
  height:64px;background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:0 22px;position:sticky;top:0;z-index:1030;
}
.topbar>.flex-grow-1{min-width:0;overflow:hidden}
.topbar .page-title{font-weight:800;font-size:17px;color:var(--navy);margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .page-sub{font-size:12px;color:var(--muted);margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn-burger{display:none;border:0;background:transparent;font-size:22px;color:var(--navy)}
.content{padding:24px 22px 40px;flex:1;width:100%;max-width:1520px;margin:0 auto}
.ta-chip{
  background:var(--sky-soft);color:var(--sky);font-weight:700;font-size:12px;
  padding:6px 12px;border-radius:20px;border:1px solid #cfe6ee;white-space:nowrap;
}

/* topbar user */
.user-chip{display:flex;align-items:center;gap:10px;cursor:pointer;flex-shrink:0}
.user-chip img{width:38px;height:38px;border-radius:10px;object-fit:cover;border:2px solid var(--line)}
.user-chip .un{line-height:1.15;max-width:200px}
.user-chip .un b{font-size:13.5px;color:var(--ink);display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-chip .un small{font-size:11px;color:var(--muted);text-transform:capitalize;white-space:nowrap}

/* ---------- CARDS ---------- */
.card{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);background:var(--surface)}
.card-header{background:transparent;border-bottom:1px solid var(--line);
  font-weight:700;color:var(--navy);padding:15px 18px;display:flex;align-items:center;gap:8px}
.card-body{padding:18px}
.card-title{color:var(--navy);font-weight:800}

/* stat cards */
.stat{display:flex;align-items:center;gap:16px;padding:18px 20px}
.stat .ic{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;
  font-size:24px;color:#fff;flex-shrink:0}
.stat .val{font-size:26px;font-weight:800;color:var(--navy);line-height:1}
.stat .lbl{font-size:12.5px;color:var(--muted);font-weight:600}
.ic-navy{background:linear-gradient(135deg,#12466e,#0e3a5c)}
.ic-red{background:linear-gradient(135deg,#d51e2b,#c1121f)}
.ic-sky{background:linear-gradient(135deg,#38a8ca,#2e97b7)}
.ic-gold{background:linear-gradient(135deg,#f0bd1e,#e0a80d)}
.ic-green{background:linear-gradient(135deg,#27b567,#1f9d55)}
.ic-purple{background:linear-gradient(135deg,#7a5cff,#5b3fe0)}

/* ---------- BUTTONS ---------- */
.btn{font-weight:600;border-radius:var(--radius-sm);font-size:14px}
.btn-primary{background:var(--navy);border-color:var(--navy)}
.btn-primary:hover{background:var(--navy-700);border-color:var(--navy-700)}
.btn-danger{background:var(--red);border-color:var(--red)}
.btn-danger:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn-outline-primary{color:var(--navy);border-color:#c3d3e0}
.btn-outline-primary:hover{background:var(--navy);border-color:var(--navy)}
.btn-sky{background:var(--sky);border-color:var(--sky);color:#fff}
.btn-sky:hover{background:#26839f;color:#fff}
.btn-sm{font-size:12.5px;padding:.32rem .6rem}
.btn-icon{width:32px;height:32px;padding:0;display:inline-grid;place-items:center}

/* ---------- TABLES ---------- */
.table{--bs-table-hover-bg:#f4f8fb;margin:0}
.table thead th{background:#f7fafc;color:var(--navy);font-weight:700;
  font-size:12px;text-transform:uppercase;letter-spacing:.4px;
  border-bottom:2px solid var(--line);white-space:nowrap;padding:11px 14px}
.table tbody td{padding:11px 14px;vertical-align:middle;border-color:#eef2f6}
.table tbody tr:last-child td{border-bottom:0}
.table-wrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.table-responsive{border-radius:var(--radius)}

/* ---------- FORMS ---------- */
.form-label{font-weight:600;font-size:13px;color:var(--navy);margin-bottom:5px}
.form-control,.form-select{border-radius:var(--radius-sm);border-color:#d5dfe8;font-size:14px;padding:.5rem .8rem}
.form-control:focus,.form-select:focus{border-color:var(--sky);box-shadow:0 0 0 .18rem rgba(46,151,183,.16)}
.input-group-text{background:#f4f8fb;border-color:#d5dfe8;color:var(--muted)}

/* ---------- BADGES / MISC ---------- */
.badge{font-weight:600;letter-spacing:.2px;padding:.4em .6em}
.badge.rounded-pill{padding:.42em .8em}
.chip-status{font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:20px;display:inline-flex;gap:5px;align-items:center}
.st-aktif{background:#e6f7ee;color:#1f9d55}
.st-draft{background:#eef2f6;color:#6b7c8f}
.st-diajukan{background:#fff4e0;color:#b8860b}
.st-disetujui{background:#e6f7ee;color:#1f9d55}
.st-ditolak{background:#fdeaec;color:#c1121f}
.divider{height:1px;background:var(--line);margin:16px 0}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.page-head h4{font-weight:800;color:var(--navy);margin:0}
.page-head .crumb{font-size:12.5px;color:var(--muted)}
.empty{padding:48px 20px;text-align:center;color:var(--muted)}
.empty i{font-size:44px;color:var(--muted-2);display:block;margin-bottom:10px}

/* profile header */
.profile-hero{background:linear-gradient(120deg,var(--navy),#12466e);border-radius:var(--radius);
  padding:26px;color:#fff;display:flex;gap:22px;align-items:center;flex-wrap:wrap;box-shadow:var(--shadow)}
.profile-hero img{width:92px;height:92px;border-radius:18px;object-fit:cover;border:3px solid rgba(255,255,255,.25)}
.profile-hero h4{margin:0;font-weight:800}
.profile-hero .meta{color:#c5d8e6;font-size:13px}

/* KRS component */
.krs-course{border:1px solid var(--line);border-radius:11px;padding:12px 14px;margin-bottom:10px;
  display:flex;align-items:center;gap:12px;transition:.15s;background:#fff}
.krs-course:hover{border-color:var(--sky);box-shadow:var(--shadow-sm)}
.krs-course.picked{border-color:var(--ok);background:#f4fbf7}

/* login */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.login-left{background:linear-gradient(150deg,var(--navy) 0%,var(--navy-900) 70%,#05131f 100%);
  color:#fff;padding:52px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.login-left::after{content:"";position:absolute;right:-120px;bottom:-120px;width:380px;height:380px;
  background:radial-gradient(circle,rgba(193,18,31,.35),transparent 68%);border-radius:50%}
.login-left::before{content:"";position:absolute;left:-80px;top:-80px;width:280px;height:280px;
  background:radial-gradient(circle,rgba(46,151,183,.32),transparent 68%);border-radius:50%}
.login-left .brand{display:flex;align-items:center;gap:14px;position:relative;z-index:2}
.login-left .brand img{width:66px;height:66px;background:#fff;border-radius:16px;padding:6px}
.login-hero{position:relative;z-index:2}
.login-hero h1{font-size:34px;font-weight:800;line-height:1.15;margin:0 0 14px}
.login-hero p{color:#b9cddd;max-width:440px}
.login-feats{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;position:relative;z-index:2}
.login-feats span{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);
  padding:7px 13px;border-radius:20px;font-size:12.5px;color:#dbe8f2}
.login-right{display:flex;align-items:center;justify-content:center;padding:40px;background:var(--surface)}
.login-card{width:100%;max-width:400px}
.login-card h3{font-weight:800;color:var(--navy)}
.role-hint{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.role-hint .rh{flex:1;min-width:100px;border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:11.5px}
.role-hint .rh b{color:var(--navy);display:block;font-size:12px}
.role-hint .rh code{color:var(--red);font-size:11px}

/* section title */
.sec-title{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--navy);font-size:15px;margin:0 0 14px}
.sec-title .bar{width:4px;height:18px;background:var(--red);border-radius:3px}

/* announcement */
.ann{border-left:3px solid var(--sky);background:#fff;border:1px solid var(--line);border-left-width:3px;
  border-radius:0 11px 11px 0;padding:13px 16px;margin-bottom:11px}
.ann h6{margin:0 0 3px;font-weight:700;color:var(--navy)}
.ann .m{font-size:11.5px;color:var(--muted-2)}
.ann.dosen{border-left-color:var(--red)}
.ann.mahasiswa{border-left-color:var(--gold)}

/* schedule cell */
.jadwal-slot{background:var(--sky-soft);border:1px solid #cfe6ee;border-radius:9px;padding:8px 10px;margin-bottom:6px}
.jadwal-slot b{color:var(--navy);font-size:13px;display:block}
.jadwal-slot small{color:var(--sky);font-size:11px}

.overlay-bg{display:none;position:fixed;inset:0;background:rgba(7,29,48,.45);z-index:1035}

/* print */
@media print{
  .sidebar,.topbar,.no-print,.btn{display:none!important}
  .main{margin-left:0}
  .content{padding:0}
  .card{box-shadow:none;border:1px solid #ccc}
  body{background:#fff}
}

/* responsive */
@media (max-width:991px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .btn-burger{display:block}
  .overlay-bg.show{display:block}
  .login-wrap{grid-template-columns:1fr}
  .login-left{display:none}
}
@media (max-width:575px){
  .content{padding:16px 13px 34px}
  .stat .val{font-size:22px}
  .topbar .page-sub{display:none}
}

/* ---------- Welcome banner (dashboard mahasiswa) ---------- */
.welcome-banner{
  background:linear-gradient(120deg,var(--navy) 0%,var(--navy-700) 60%,var(--sky) 160%);
  color:#fff;border-radius:16px;padding:22px 26px;box-shadow:0 8px 24px rgba(14,58,92,.18)}
.welcome-banner h4{color:#fff;font-weight:800}
.welcome-banner p{color:rgba(255,255,255,.88);font-size:14px}

/* ---------- Dokumen cetak (transkrip) ---------- */
.print-doc .table-bordered td,.print-doc .table-bordered th{border-color:#cbd5e1}

/* ---------- Print ---------- */
@media print{
  .sidebar,.topbar,.d-print-none,.btn{display:none!important}
  .content{padding:0!important;margin:0!important}
  .app,body{background:#fff!important}
  .card{box-shadow:none!important;border:1px solid #d7dee6!important;break-inside:avoid}
  .card-header{background:#f1f5f9!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .badge,.chip-status,.ic,.progress-bar,.welcome-banner{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a[href]:after{content:""}
}