/* =====================================================================
   E-LEARNING FKIP UNSA — Design System
   Palet warna diambil dari logo FKIP Universitas Samawa
   ===================================================================== */
:root{
  --fkip-blue:      #0d3b9e;   /* biru royal (teks logo)  */
  --fkip-blue-dark: #082b74;
  --fkip-blue-600:  #1747c0;
  --fkip-sky:       #8ecae6;   /* biru langit (latar logo) */
  --fkip-sky-soft:  #e7f4fb;
  --fkip-red:       #d32f2f;   /* merah sayap */
  --fkip-red-dark:  #a3161b;   /* merah garis pentagon */
  --fkip-red-soft:  #fdecec;

  --ink:      #1b2333;
  --muted:    #6b7385;
  --line:     #e7eaf0;
  --bg:       #f4f6fb;
  --card:     #ffffff;
  --radius:   14px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow:   0 6px 24px rgba(13,59,158,.08);
  --shadow-lg:0 18px 48px rgba(13,59,158,.16);
  --sidebar-w:264px;
  --topbar-h:64px;
  --font: 'Inter','Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

*{box-sizing:border-box}
body{
  font-family:var(--font); background:var(--bg); color:var(--ink);
  margin:0; font-size:.94rem; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--fkip-blue); text-decoration:none}
a:hover{color:var(--fkip-blue-600)}
.text-fkip{color:var(--fkip-blue)!important}
.bg-fkip{background:var(--fkip-blue)!important}
.bg-fkip-grad{background:linear-gradient(135deg,var(--fkip-blue) 0%,var(--fkip-blue-dark) 100%)!important}

/* ---------- Tombol brand ---------- */
.btn-fkip{background:var(--fkip-blue); border-color:var(--fkip-blue); color:#fff}
.btn-fkip:hover{background:var(--fkip-blue-dark); border-color:var(--fkip-blue-dark); color:#fff}
.btn-outline-fkip{color:var(--fkip-blue); border-color:var(--fkip-blue)}
.btn-outline-fkip:hover{background:var(--fkip-blue); color:#fff}
.btn-fkip-red{background:var(--fkip-red); border-color:var(--fkip-red); color:#fff}
.btn-fkip-red:hover{background:var(--fkip-red-dark); border-color:var(--fkip-red-dark); color:#fff}
.btn{border-radius:9px; font-weight:500}
.btn-sm{border-radius:7px}

/* =====================================================================
   LAYOUT: sidebar + topbar
   ===================================================================== */
.app{display:flex; min-height:100vh}
.sidebar{
  width:var(--sidebar-w); flex-shrink:0; background:#fff; border-right:1px solid var(--line);
  position:fixed; inset:0 auto 0 0; z-index:1040; display:flex; flex-direction:column;
  transition:transform .25s ease;
}
.sidebar__brand{
  height:var(--topbar-h); display:flex; align-items:center; gap:.65rem; padding:0 1.1rem;
  border-bottom:1px solid var(--line);
}
.sidebar__brand img{width:38px; height:38px; object-fit:contain}
.sidebar__brand b{color:var(--fkip-blue); font-weight:700; font-size:1rem; line-height:1.05}
.sidebar__brand span{display:block; font-size:.66rem; color:var(--muted); font-weight:500}
.sidebar__scroll{overflow-y:auto; padding:.75rem .7rem 1.5rem; flex:1}
.sidebar__label{font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; padding:.9rem .8rem .35rem}
.nav-link-side{
  display:flex; align-items:center; gap:.7rem; padding:.6rem .8rem; border-radius:10px;
  color:#495066; font-weight:500; margin-bottom:2px; transition:.15s;
}
.nav-link-side i{font-size:1.05rem; width:20px; text-align:center; color:#8b93a7}
.nav-link-side:hover{background:var(--fkip-sky-soft); color:var(--fkip-blue)}
.nav-link-side:hover i{color:var(--fkip-blue)}
.nav-link-side.active{background:var(--fkip-blue); color:#fff; box-shadow:0 4px 12px rgba(13,59,158,.25)}
.nav-link-side.active i{color:#fff}
.nav-link-side .badge{margin-left:auto}

.main{flex:1; margin-left:var(--sidebar-w); min-width:0; display:flex; flex-direction:column}
.topbar{
  height:var(--topbar-h); background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:1rem; padding:0 1.4rem; position:sticky; top:0; z-index:1030;
}
.topbar__title{font-weight:600; font-size:1.02rem; margin:0}
.topbar__sub{font-size:.75rem; color:var(--muted)}
.content{padding:1.6rem 1.4rem 3rem; flex:1}
.hamburger{display:none; border:0; background:transparent; font-size:1.4rem; color:var(--ink)}

.avatar{
  width:38px; height:38px; border-radius:50%; background:var(--fkip-sky);
  color:var(--fkip-blue-dark); display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.82rem; flex-shrink:0; overflow:hidden;
}
.avatar img{width:100%; height:100%; object-fit:cover}
.avatar-lg{width:76px; height:76px; font-size:1.5rem}

/* =====================================================================
   KARTU & KOMPONEN
   ===================================================================== */
.card{border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); background:var(--card)}
.card-header{background:transparent; border-bottom:1px solid var(--line); font-weight:600; padding:.9rem 1.15rem}
.card-body{padding:1.15rem}

.stat{position:relative; overflow:hidden; border-radius:var(--radius); padding:1.15rem 1.25rem; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm)}
.stat__ico{width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.35rem}
.stat__num{font-size:1.75rem; font-weight:700; line-height:1; color:var(--ink)}
.stat__lbl{color:var(--muted); font-size:.82rem; font-weight:500}
.i-blue{background:var(--fkip-sky-soft); color:var(--fkip-blue)}
.i-red{background:var(--fkip-red-soft); color:var(--fkip-red)}
.i-green{background:#e6f7ef; color:#12915b}
.i-amber{background:#fff4e0; color:#c77700}

.page-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.3rem; flex-wrap:wrap}
.page-head h1{font-size:1.35rem; font-weight:700; margin:0}
.page-head p{margin:.15rem 0 0; color:var(--muted); font-size:.85rem}

/* Kartu kelas */
.kelas-card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; transition:.2s; box-shadow:var(--shadow-sm); height:100%}
.kelas-card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.kelas-card__cover{height:96px; background:linear-gradient(135deg,var(--fkip-blue),var(--fkip-blue-600)); position:relative; display:flex; align-items:flex-end; padding:.8rem 1rem}
.kelas-card__cover.red{background:linear-gradient(135deg,var(--fkip-red),var(--fkip-red-dark))}
.kelas-card__cover.sky{background:linear-gradient(135deg,#1c9bd6,var(--fkip-blue))}
.kelas-card__cover .kode{position:absolute; top:.6rem; right:.7rem; background:rgba(255,255,255,.2); color:#fff; font-size:.68rem; padding:.15rem .5rem; border-radius:20px; backdrop-filter:blur(4px)}
.kelas-card__cover h5{color:#fff; margin:0; font-size:.98rem; font-weight:600; text-shadow:0 1px 3px rgba(0,0,0,.25)}
.kelas-card__body{padding:.9rem 1rem}

.table{--bs-table-hover-bg:var(--fkip-sky-soft)}
.table>thead{background:#f7f9fd}
.table>thead th{font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; border-bottom:1px solid var(--line)}
.table>tbody td{vertical-align:middle}

.form-label{font-weight:500; font-size:.85rem; margin-bottom:.3rem}
.form-control,.form-select{border-radius:9px; border-color:var(--line); font-size:.9rem}
.form-control:focus,.form-select:focus{border-color:var(--fkip-blue); box-shadow:0 0 0 3px rgba(13,59,158,.12)}
.input-group-text{background:var(--fkip-sky-soft); border-color:var(--line); color:var(--fkip-blue)}

.empty{text-align:center; padding:3rem 1rem; color:var(--muted)}
.empty i{font-size:2.6rem; color:#c9d2e3; display:block; margin-bottom:.6rem}

/* Timeline pertemuan */
.pertemuan{border-left:3px solid var(--line); padding:.2rem 0 .2rem 1.1rem; margin-left:.4rem; position:relative}
.pertemuan::before{content:''; position:absolute; left:-7px; top:.35rem; width:11px; height:11px; border-radius:50%; background:var(--fkip-blue); border:2px solid #fff; box-shadow:0 0 0 2px var(--fkip-sky)}

/* Login */
.auth-wrap{min-height:100vh; display:flex}
.auth-visual{flex:1; background:linear-gradient(140deg,var(--fkip-blue-dark),var(--fkip-blue) 55%,var(--fkip-blue-600)); color:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:3rem; position:relative; overflow:hidden}
.auth-visual::after{content:''; position:absolute; width:520px; height:520px; border-radius:50%; background:rgba(255,255,255,.06); top:-160px; right:-160px}
.auth-visual::before{content:''; position:absolute; width:380px; height:380px; border-radius:50%; background:rgba(211,47,47,.18); bottom:-140px; left:-120px}
.auth-visual img{width:120px; margin-bottom:1.4rem; filter:drop-shadow(0 8px 20px rgba(0,0,0,.3)); position:relative; z-index:2}
.auth-visual .z{position:relative; z-index:2; text-align:center; max-width:420px}
.auth-form{width:min(440px,100%); padding:2.5rem; display:flex; flex-direction:column; justify-content:center; margin:auto}

.badge.bg-primary-subtle{background:var(--fkip-sky-soft)!important; color:var(--fkip-blue)!important}

/* Scrollbar halus */
.sidebar__scroll::-webkit-scrollbar{width:6px}
.sidebar__scroll::-webkit-scrollbar-thumb{background:#d5dbe8; border-radius:3px}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
.backdrop{display:none; position:fixed; inset:0; background:rgba(16,24,40,.4); z-index:1035}
@media (max-width:991.98px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.show{transform:translateX(0); box-shadow:var(--shadow-lg)}
  .main{margin-left:0}
  .hamburger{display:block}
  .backdrop.show{display:block}
  .auth-visual{display:none}
}
@media print{
  .sidebar,.topbar,.no-print{display:none!important}
  .main{margin-left:0}
  .content{padding:0}
}