:root{
  --metiska-primary:#0B5ED7;
  --metiska-primary-2:#0A58CA;
  --metiska-accent:#14B8A6;
  --metiska-bg:#F4F7FB;
  --metiska-card:#FFFFFF;
  --metiska-text:#0F172A;
  --metiska-muted:#64748B;
  --metiska-border:#E6ECF5;
  --metiska-radius:16px;
}

html,body{height:100%}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--metiska-bg);
  color: var(--metiska-text);
}

a{ text-decoration:none; }
.text-muted{ color: var(--metiska-muted)!important; }

/* =====================================================
   LAYOUT WRAPPER (biar sidebar nggak “ketarik”)
   ===================================================== */
.app-wrapper{
  min-height:100vh;
}

/* =====================================================
   SIDEBAR (FINAL, SINGLE SOURCE OF TRUTH)
   ===================================================== */
.metiska-sidebar{
  width: 280px;              /* ubah ke 300 kalau mau lebih lebar */
  min-width: 280px;
  background: #0B1220;
  color: #E5E7EB;
  border-right: 1px solid rgba(255,255,255,.06);
}



/* NAV */
.metiska-nav{
  padding: 12px 10px 18px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.metiska-nav a{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(229,231,235,.86);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metiska-nav a:hover{
  background: rgba(255,255,255,.07);
  color: #fff;
}
.metiska-nav a.active{
  background: rgba(11,94,215,.18);
  border: 1px solid rgba(11,94,215,.35);
  color: #fff;
}
.metiska-nav a i{
  width: 18px;
  text-align:center;
}

/* =====================================================
   CONTENT + TOPBAR
   ===================================================== */
.metiska-content{
  flex:1;
  min-width:0;
}

.metiska-topbar{
  background: rgba(244,247,251,.8);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--metiska-border);
}

.metiska-topbar .btn.btn-light{
  border-radius:12px;
  border: 1px solid var(--metiska-border);
}

/* Logo untuk area selain sidebar (topbar/login) */
.metiska-topbar .brand-logo,
.auth-page .brand-logo,
.login-page .brand-logo{
  height: 40px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
}

/* =====================================================
   CARD / BUTTON / BADGE
   ===================================================== */
.metiska-card{
  background: var(--metiska-card);
  border: 1px solid var(--metiska-border);
  border-radius: var(--metiska-radius);
  box-shadow: 0 12px 35px rgba(15,23,42,.06);
}

.btn-metiska{
  background: linear-gradient(135deg, var(--metiska-primary), var(--metiska-primary-2));
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
}
.btn-metiska:hover{ filter: brightness(.98); }

.badge-soft{
  border-radius:999px;
  padding: 6px 10px;
  font-weight:600;
  font-size:12px;
  border: 1px solid var(--metiska-border);
  background:#fff;
}
.badge-pending{ color:#B45309; background:#FFFBEB; border-color:#FDE68A; }
.badge-approved{ color:#047857; background:#ECFDF5; border-color:#6EE7B7; }
.badge-rejected{ color:#B91C1C; background:#FEF2F2; border-color:#FCA5A5; }
.badge { font-weight:600; }

/* =====================================================
   TABLE / FORM
   ===================================================== */
.table thead th{
  color: var(--metiska-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--metiska-border);
}
.table td{ vertical-align: middle; }
.table th{ font-weight:600; }

.form-control, .form-select{
  border-radius: 12px;
  border-color: var(--metiska-border);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(11,94,215,.45);
  box-shadow: 0 0 0 .2rem rgba(11,94,215,.12);
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 991.98px){
  .metiska-sidebar{ display:none; }
}

/* =====================================================
   FullCalendar event color
   ===================================================== */
.evt-approved {
  background: rgba(22,163,74,.15) !important;
  color:#14532d !important;
  border:1px solid rgba(22,163,74,.35) !important;
}
.evt-pending  {
  background: rgba(245,158,11,.18) !important;
  color:#7c2d12 !important;
  border:1px solid rgba(245,158,11,.35) !important;
}

/* =====================================================
   ANTI WATERMARK / BACKGROUND NYASAR
   ===================================================== */
body, .app-wrapper, .app-main, main.container-fluid{
  background-image:none !important;
  background: var(--metiska-bg) !important;
}
.app-main::before,
.app-main::after,
main.container-fluid::before,
main.container-fluid::after{
  content:none !important;
  background:none !important;
}

/* cegah img konten meledak */
.app-main main.container-fluid img{
  max-width:100%;
  height:auto;
}

.metiska-sidebar .brand{
  padding: 20px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.metiska-sidebar .brand-mark{
  max-width: 220px;
  display: flex;
  justify-content: center;
}

.metiska-sidebar .brand-mark img.brand-logo-sidebar{
  max-width: 190px;   /* 🔥 UBAH ANGKA INI SAJA */
  height: auto;
  object-fit: contain;
  display: block;
}

/* =====================================================
   BADGE - COMPLETED / SELESAI
   ===================================================== */
.badge-completed{
  color:#334155;
  background:#F1F5F9;
  border-color:#CBD5E1;
}

.badge-completed{
  color:#334155;
  background: linear-gradient(180deg, #F8FAFC, #F1F5F9);
  border-color:#CBD5E1;
  box-shadow: 0 1px 0 rgba(15,23,42,.04);
}

.modal-content.metiska-card{
  border-radius: 18px;
}

.modal-footer .btn{
  border-radius: 12px;
}