/* =========================================================
   TEMA "PERPUSTAKAAN TUN TEJA" - maroon / gold / teal
   Import di layouts/head.php SETELAH bootstrap.min.css:
   <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
   <link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/tunteja-theme.css">
   ========================================================= */

:root{
  --maroon:#7A1E2C;
  --maroon-deep:#241019;
  --maroon-deep-2:#33121e;
  --gold:#E8B93A;
  --teal:#17A6A0;
  --magenta:#C23B7A;
  --paper:#FBF7EE;
  --paper-2:#F3ECDC;
  --ink:#241a1d;
  --ink-soft:#847077;
  --line:#eadfce;
}
*{box-sizing:border-box;}
body{
  font-family:'Plus Jakarta Sans', sans-serif;
  color:var(--ink);
  background:var(--paper);
}
.font-display{font-family:'Fraunces', serif;}
.font-mono{font-family:'JetBrains Mono', monospace;}

/* ============ SIDEBAR (menyasar markup PHP yang sudah ada) ============ */
/* FIX: diganti dari position:sticky ke position:fixed.
   sticky tetap memakan ruang di document flow, dan karena
   height:100vh, itu mendorong .main turun sejauh satu layar
   penuh -> makanya halaman blank sampai discroll dulu. */
.sidebar{
  width:260px;
  flex-shrink:0;
  background: linear-gradient(180deg, var(--maroon-deep) 0%, var(--maroon-deep-2) 100%);
  color:#f1e6da;
  position:fixed;
  left:0;
  top:0;
  height:100vh;
  overflow-y:auto;
  z-index:999;
}
.sidebar .logo{
  display:flex; align-items:center; gap:12px;
  padding:1.35rem 1.3rem;
  border-bottom:1px solid rgba(241,230,218,0.1);
}
.sidebar .logo i{font-size:1.6rem; color:var(--gold);}
.sidebar .logo h4{
  font-family:'Fraunces', serif; font-weight:600; font-size:1.1rem;
  color:#fbf7ee; margin:0;
}

.sidebar .menu{list-style:none; padding:0 0.7rem; margin:0.5rem 0;}
.sidebar .menu-title{
  font-family:'JetBrains Mono', monospace;
  font-size:0.64rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#a88c78;
  padding: 1.1rem 0.6rem 0.4rem;
}
.sidebar .menu li{margin-bottom:2px; list-style:none;}
.sidebar .menu li a{
  display:flex; align-items:center; gap:12px;
  padding:0.62rem 0.85rem;
  border-radius:9px;
  color:#e2d2c4;
  text-decoration:none;
  font-size:0.87rem;
  font-weight:500;
  position:relative;
  transition:.15s;
}
.sidebar .menu li a i{font-size:1.02rem; width:18px; text-align:center; opacity:0.85;}
.sidebar .menu li a:hover{background:rgba(241,230,218,0.07); color:#fff;}
.sidebar .menu li a.active{
  background:rgba(241,230,218,0.09);
  color:#fff;
}
.sidebar .menu li a.active::before{
  content:"";
  position:absolute; left:-0.3rem; top:12%; bottom:12%;
  width:3px; border-radius:3px;
  background: linear-gradient(180deg, var(--teal), var(--magenta));
}

/* ============ MAIN / NAVBAR ============ */
/* FIX: tambahkan margin-left sebesar width sidebar (260px),
   karena sidebar sekarang fixed dan tidak lagi ada di document
   flow, .main harus digeser manual supaya tidak ketiban sidebar. */
.main{
  flex:1;
  min-width:0;
  margin-left:260px;
}
.content{padding:1.6rem;}

.navbar, .topbar{
  display:flex; align-items:center; gap:1rem;
  padding:1rem 1.6rem;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.navbar .form-control, .topbar input[type="text"]{
  border:1.5px solid var(--line);
  border-radius:10px;
  background:var(--paper);
}
.navbar .form-control:focus{outline:none; border-color:var(--teal); background:#fff; box-shadow:0 0 0 3px rgba(23,166,160,0.12);}

.content .mb-4 h3, .page-head h1{
  font-family:'Fraunces', serif; font-weight:600; color:var(--ink);
}
.content .text-muted{color:var(--ink-soft) !important;}

/* ============ STAT CARDS ============ */
.stat-card{
  background:#fff !important;
  border-radius:14px;
  border:1px solid var(--line);
  padding:1.1rem 1.2rem;
  position:relative;
  overflow:hidden;
  height:100%;
  color:var(--ink);
}
.stat-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
}
.stat-card.bg-blue::before{background:var(--teal);}
.stat-card.bg-green::before{background:var(--gold);}
.stat-card.bg-orange::before{background:var(--magenta);}
.stat-card.bg-red::before{background:var(--maroon);}

.stat-card.bg-blue,
.stat-card.bg-green,
.stat-card.bg-orange,
.stat-card.bg-red{
  background:#fff; color:var(--ink);
}
.stat-card.bg-blue i{color:var(--teal);}
.stat-card.bg-green i{color:#a3781e;}
.stat-card.bg-orange i{color:var(--magenta);}
.stat-card.bg-red i{color:var(--maroon);}

.stat-card small{font-size:0.8rem; color:var(--ink-soft);}
.stat-card h2{
  font-family:'JetBrains Mono', monospace; font-size:1.9rem; font-weight:600;
  margin-top:0.4rem; color:var(--ink);
}

/* ============ CARD / PANEL ============ */
.card{
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}
.card-header{
  background:#fff;
  font-family:'Fraunces', serif; font-size:1.08rem; font-weight:600;
  border-bottom:1px solid var(--line);
  padding:1.1rem 1.3rem;
  color:var(--ink);
}

/* ============ TABLE ============ */
.table thead th{
  font-family:'JetBrains Mono', monospace;
  font-size:0.68rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  border-bottom:1px solid var(--line);
  font-weight:600;
}
.table td{vertical-align:middle; border-bottom:1px solid #f4eee1; font-size:0.87rem;}
.badge.bg-success{background:rgba(23,166,160,0.12) !important; color:var(--teal) !important; font-weight:700;}
.badge.bg-danger{background:rgba(194,59,122,0.12) !important; color:var(--magenta) !important; font-weight:700;}
.badge.bg-warning{background:rgba(232,185,58,0.18) !important; color:#a3781e !important; font-weight:700;}

/* ============ LIST GROUP / ACTIVITY ============ */
.list-group-item{
  border-color:#f4eee1;
  font-size:0.87rem;
  padding:0.85rem 1.3rem;
}

/* ============ BUTTONS ============ */
.btn-primary{
  background:linear-gradient(90deg, var(--teal), var(--magenta));
  border:none;
}
.btn-primary:hover{opacity:0.9; background:linear-gradient(90deg, var(--teal), var(--magenta));}
.btn-warning{background:var(--gold); border:none; color:#3a2a08;}
.btn-danger{background:var(--maroon); border:none;}
.btn-success{background:var(--teal); border:none;}
.btn-secondary{background:var(--ink-soft); border:none;}

.pagination .page-item.active .page-link{
  background:var(--teal); border-color:var(--teal);
}
.pagination .page-link{color:var(--maroon);}

/* ============ RESPONSIVE ============ */
@media (max-width: 991px){
  .sidebar{position:fixed; z-index:1000; margin-left:-260px; transition:margin-left .2s ease;}
  .sidebar.show{margin-left:0; box-shadow:0 0 40px rgba(0,0,0,0.35);}
  /* FIX: .main juga harus direset ke 0 di layar kecil,
     supaya tidak ada ruang kosong 260px di kiri saat sidebar disembunyikan. */
  .main{margin-left:0;}
}