/* ============================================================
   SIM Kerjasama Unud — modern academic design system
   Palette: institutional navy + academic gold
   ============================================================ */
:root {
  --navy-950:#0a1830; --navy-900:#0f2342; --navy-800:#16315c; --navy-700:#1d3f76;
  --primary:#1e3a8a; --primary-600:#2a4ea8; --primary-050:#eef2fb;
  --gold:#c2992e; --gold-600:#a87f1f; --gold-050:#faf4e4;
  --bg:#f5f6fa; --surface:#ffffff; --surface-2:#fbfcfe;
  --text:#19233a; --muted:#697488; --border:#e7eaf1;
  --success:#15803d; --success-050:#e9f6ee;
  --danger:#dc2626;  --danger-050:#fdecec;
  --warning:#b45309; --warning-050:#fbf1e0;
  --info:#0e7490;    --info-050:#e6f4f7;
  --r:16px; --r-sm:11px; --r-xs:8px;
  --shadow-sm:0 1px 2px rgba(16,35,66,.06), 0 1px 3px rgba(16,35,66,.05);
  --shadow:0 4px 16px -4px rgba(16,35,66,.12), 0 2px 6px -2px rgba(16,35,66,.07);
  --shadow-lg:0 18px 40px -12px rgba(16,35,66,.22);
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --serif:'Fraunces','Source Serif 4',Georgia,serif;
  --sidebar-w:268px;
}

* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:14.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* Sticky-footer page shell */
.page-shell { display:flex; flex-direction:column; min-height:100vh; }
.page-shell > main { flex:1 0 auto; }
.stat-strip { margin-top:-2.75rem; position:relative; z-index:2; }
h1,h2,h3,h4,h5,.serif { font-family:var(--serif); letter-spacing:-.01em; }
a { color:var(--primary-600); text-decoration:none; }
a:hover { color:var(--primary); }

/* ---------- App shell ---------- */
.app { display:flex; min-height:100vh; }
.app-sidebar {
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:linear-gradient(185deg,var(--navy-900),var(--navy-950));
  color:#cdd6e6; position:sticky; top:0; height:100vh; overflow-y:auto;
  display:flex; flex-direction:column; border-right:1px solid rgba(255,255,255,.04);
}
.app-brand {
  display:flex; align-items:center; gap:.7rem; padding:1.25rem 1.35rem 1.1rem;
  color:#fff; font-family:var(--serif); font-weight:600; font-size:1.18rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.app-brand .crest {
  width:38px; height:38px; border-radius:11px; flex:0 0 38px;
  background:linear-gradient(135deg,var(--gold),var(--gold-600));
  display:grid; place-items:center; color:#23170a; box-shadow:0 6px 16px -6px rgba(194,153,46,.7);
}
.app-brand small { display:block; font-family:var(--sans); font-weight:400; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:#8fa0bd; }
.nav-section { padding:1.1rem 1.35rem .4rem; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:#6c7d9c; font-weight:600; }
.app-nav { padding:.4rem .75rem 1rem; display:flex; flex-direction:column; gap:2px; }
.app-nav a {
  display:flex; align-items:center; gap:.8rem; padding:.62rem .8rem; border-radius:10px;
  color:#bcc6da; font-weight:500; position:relative; transition:.16s;
}
.app-nav a i { width:18px; text-align:center; font-size:.95rem; color:#8b9abb; transition:.16s; }
.app-nav a:hover { background:rgba(255,255,255,.06); color:#fff; }
.app-nav a:hover i { color:#cdd6e6; }
.app-nav a.active { background:linear-gradient(90deg,rgba(194,153,46,.16),rgba(194,153,46,.02)); color:#fff; }
.app-nav a.active i { color:var(--gold); }
.app-nav a.active::before { content:""; position:absolute; left:-.75rem; top:50%; transform:translateY(-50%); width:4px; height:60%; border-radius:0 4px 4px 0; background:var(--gold); }
.sidebar-foot { margin-top:auto; padding:1rem 1.35rem; font-size:.72rem; color:#6c7d9c; border-top:1px solid rgba(255,255,255,.06); }

.app-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.app-topbar {
  height:66px; background:rgba(255,255,255,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border); display:flex; align-items:center;
  padding:0 1.6rem; gap:1rem; position:sticky; top:0; z-index:20;
}
.app-topbar .page-title { font-family:var(--serif); font-weight:600; font-size:1.25rem; margin:0; }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:1rem; }
.role-switch { display:flex; align-items:center; gap:.5rem; }
.role-switch label { font-size:.78rem; color:var(--muted); margin:0; font-weight:500; }
.role-switch select { border:1px solid var(--border); border-radius:9px; padding:.32rem .6rem; font-size:.82rem; background:var(--surface-2); font-weight:500; }
.user-chip { display:flex; align-items:center; gap:.6rem; }
.avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--navy-700)); color:#fff; display:grid; place-items:center; font-weight:600; font-size:.82rem; }
.user-chip .uname { font-weight:600; font-size:.85rem; line-height:1.1; }
.user-chip .urole { font-size:.7rem; color:var(--muted); }
.btn-logout { width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2); color:var(--danger); display:grid; place-items:center; transition:.15s; }
.btn-logout:hover { background:var(--danger-050); color:var(--danger); border-color:var(--danger); }

.app-content { padding:1.7rem 1.8rem 2.5rem; }

/* ---------- Cards ---------- */
.card { border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-sm); background:var(--surface); }
.card .card-header { background:transparent; border-bottom:1px solid var(--border); font-family:var(--serif); font-weight:600; padding:1rem 1.25rem; }
.card .card-body { padding:1.25rem; }
.section-title { font-size:1.15rem; font-weight:600; margin:0; }

/* ---------- Stat tiles ---------- */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.stat-tile {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:1.25rem 1.3rem; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  display:flex; align-items:center; gap:1rem; transition:.18s;
}
.stat-tile:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.stat-tile::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:currentColor; opacity:.85; }
.stat-ic { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-size:1.25rem; flex:0 0 52px; }
.stat-num { font-family:var(--serif); font-size:2rem; font-weight:600; line-height:1; letter-spacing:-.02em; }
.stat-label { color:var(--muted); font-size:.82rem; font-weight:500; margin-top:.2rem; }
.t-primary{color:var(--primary)} .t-info{color:var(--info)} .t-success{color:var(--success)} .t-danger{color:var(--danger)} .t-gold{color:var(--gold-600)}
.bg-soft-primary{background:var(--primary-050)} .bg-soft-info{background:var(--info-050)} .bg-soft-success{background:var(--success-050)} .bg-soft-danger{background:var(--danger-050)} .bg-soft-gold{background:var(--gold-050)}

/* ---------- Buttons ---------- */
.btn { border-radius:10px; font-weight:600; font-size:.83rem; padding:.46rem .9rem; }
.btn-sm { border-radius:8px; font-size:.78rem; padding:.32rem .65rem; }
.btn-primary { background:var(--primary); border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-600); border-color:var(--primary-600); }
.btn-success { background:var(--success); border-color:var(--success); }
.btn-gold { background:var(--gold); border-color:var(--gold); color:#23170a; }
.btn-gold:hover { background:var(--gold-600); color:#fff; }
.btn-outline-primary { color:var(--primary); border-color:#c5cfe6; }
.btn-outline-primary:hover { background:var(--primary); border-color:var(--primary); }

/* ---------- Badges ---------- */
.badge { font-weight:600; padding:.34em .6em; border-radius:7px; font-size:.72rem; }
.badge.bg-success { background:var(--success-050)!important; color:var(--success)!important; }
.badge.bg-secondary { background:#eef1f6!important; color:#5c6678!important; }
.badge.bg-danger { background:var(--danger-050)!important; color:var(--danger)!important; }
.chip { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .55rem; border-radius:20px; font-size:.72rem; font-weight:600; }
.chip-expired { background:var(--danger-050); color:var(--danger); }
.chip-active { background:var(--success-050); color:var(--success); }

/* ---------- Tables / DataTables ---------- */
table.dataTable, .table { border-color:var(--border); }
table.dataTable thead th, .table thead th {
  background:var(--surface-2); border-bottom:1.5px solid var(--border)!important;
  font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
  font-weight:600; padding:.7rem .75rem;
}
table.dataTable tbody td, .table tbody td { padding:.5rem .75rem; vertical-align:middle; border-color:#eef1f6; font-size:.84rem; }
table.dataTable tbody tr:hover, .table-hover tbody tr:hover { background:var(--primary-050); }

/* Compact inline action buttons — no more vertical stacking / ragged edges */
.table-actions { display:inline-flex; gap:.3rem; flex-wrap:nowrap; white-space:nowrap; justify-content:flex-end; }
.btn-icon { width:30px; height:30px; padding:0; display:inline-grid; place-items:center; border-radius:8px; font-size:.78rem; line-height:1; border:1px solid var(--border); background:var(--surface); color:var(--muted); transition:.14s; }
.btn-icon:hover { transform:translateY(-1px); }
.btn-icon.view:hover  { background:var(--primary-050); color:var(--primary); border-color:var(--primary); }
.btn-icon.edit:hover  { background:var(--gold-050); color:var(--gold-600); border-color:var(--gold); }
.btn-icon.del:hover   { background:var(--danger-050); color:var(--danger); border-color:var(--danger); }
.btn-icon.warn:hover  { background:var(--warning-050); color:var(--warning); border-color:var(--warning); }
td.col-actions { width:1%; white-space:nowrap; text-align:right; }
.cell-strong { font-weight:600; color:var(--text); }

/* Chart sizing — keep the donut contained, not page-filling */
.chart-wrap { position:relative; height:230px; }
.chart-wrap canvas { max-width:100%; }
table.dataTable tbody tr.table-danger, .table tbody tr.table-danger { background:var(--danger-050)!important; }
table.dataTable tbody tr.table-danger:hover { background:#fbe2e2!important; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input { border:1px solid var(--border); border-radius:9px; padding:.32rem .55rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background:var(--primary)!important; border-color:var(--primary)!important; color:#fff!important; border-radius:8px; }
.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius:8px; }
.dataTables_wrapper .dataTables_info { color:var(--muted); font-size:.82rem; }

/* ---------- Forms ---------- */
.form-label { font-weight:600; font-size:.82rem; color:#42506b; margin-bottom:.3rem; }
.form-control, .form-select { border:1px solid var(--border); border-radius:10px; padding:.5rem .7rem; font-size:.88rem; }
.form-control:focus, .form-select:focus { border-color:var(--primary-600); box-shadow:0 0 0 .18rem rgba(42,78,168,.14); }
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single { border-color:var(--border)!important; border-radius:10px!important; }

/* ---------- Public ---------- */
.pub-nav { background:var(--navy-950); }
.pub-nav .navbar-brand { font-family:var(--serif); font-weight:600; }
.pub-hero {
  background:radial-gradient(1200px 400px at 70% -20%, rgba(194,153,46,.25), transparent 60%),
             linear-gradient(160deg,var(--navy-900),var(--navy-950));
  color:#fff; position:relative; overflow:hidden;
}
.pub-hero::before { content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px); background-size:22px 22px; opacity:.5; }
.pub-hero .eyebrow { letter-spacing:.22em; text-transform:uppercase; font-size:.72rem; color:var(--gold); font-weight:600; }
.pub-hero h1 { font-size:clamp(1.7rem, 4vw, 2.7rem); font-weight:600; }
.pub-stat {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow); transition:.18s; min-height:172px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.pub-stat:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.pub-stat .ic { width:50px;height:50px;border-radius:14px;display:grid;place-items:center;margin:0 auto .6rem; }
.pub-stat .num { font-family:var(--serif); font-size:2.2rem; font-weight:600; line-height:1.1; }
.reg-card { display:flex; align-items:center; gap:.8rem; padding:.9rem 1.1rem; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface); transition:.15s; }
.reg-card:hover { border-color:var(--gold); box-shadow:var(--shadow-sm); }

@media (max-width:991px){
  .app-sidebar{ position:fixed; left:-300px; z-index:1000; transition:.25s; }
  .app-sidebar.open{ left:0; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:575px){ .stat-grid{ grid-template-columns:1fr; } }