:root{
  --sidebar-w: 210px;
  --topbar-h: 52px;
  --mainnav-h: 42px;
  --primary: #2a5298;
  --dark: #0d1b3e;
}

*{ box-sizing:border-box; }

body{
  background:#f4f6f9;
  font-family:'Segoe UI',Roboto,Arial,sans-serif;
  font-size:.85rem;
  color:#2b2f38;
}

h1,h2,h3,h4,h5,h6{ font-size:calc(1rem + .1vw); }
.card-header{ font-size:.85rem; }

/* ===== Topbar (logo + user) ===== */
.topbar{
  background:var(--dark);
  height:var(--topbar-h);
  min-height:var(--topbar-h);
  position:sticky; top:0; z-index:1040;
  font-size:.82rem;
}
.topbar .navbar-brand{ font-size:.95rem; font-weight:700; }
.btn-sbu{background:#16265c;color:#fff;border:1px solid #2a3d7a;font-size:.78rem;}
.btn-sbu:hover{background:#1c3272;color:#fff;}
.topbar .btn{ font-size:.78rem; }
.topbar .dropdown-menu{ font-size:.82rem; }
.topbar .badge{ font-size:.68rem; font-weight:500; }

/* ===== Main nav (grup menu utama, horizontal, di bawah topbar) ===== */
.mainnav{
  background:#152352;
  height:var(--mainnav-h);
  min-height:var(--mainnav-h);
  position:sticky; top:var(--topbar-h); z-index:1035;
  border-bottom:1px solid #1e2f66;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  scrollbar-width:thin;
}
.mainnav-inner{ display:flex; height:100%; }
.mainnav-link{
  display:flex; align-items:center; gap:.4rem;
  padding:0 .9rem; height:100%;
  color:#aab6de; text-decoration:none;
  font-size:.78rem; font-weight:600;
  letter-spacing:.01em;
  border-bottom:2px solid transparent;
  white-space:nowrap;
  flex-shrink:0;
}
.mainnav-link i{ font-size:.85rem; }
.mainnav-link:hover{ color:#fff; background:#1c2c60; }
.mainnav-link.active{ color:#fff; border-bottom-color:#4d7cf0; background:#1c2c60; }

/* ===== Layout wrapper ===== */
.wrapper{ display:flex; min-height:calc(100vh - var(--topbar-h) - var(--mainnav-h)); }

.sidebar{
  width:var(--sidebar-w); background:#101d40; color:#c9d3ee; flex-shrink:0;
  padding:.5rem 0; overflow-y:auto;
  position:sticky; top:calc(var(--topbar-h) + var(--mainnav-h));
  height:calc(100vh - var(--topbar-h) - var(--mainnav-h));
}
.sidebar-section{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; color:#7686bb;
  padding:.65rem 1rem .35rem; font-weight:700;
  border-bottom:1px solid #1c2a54; margin-bottom:.25rem;
}
.sidebar-section i{ margin-right:.25rem; }
.sidebar .nav-link{
  color:#c9d3ee; padding:.42rem 1rem; font-size:.8rem; border-left:3px solid transparent;
  display:flex; align-items:center; gap:.5rem;
}
.sidebar .nav-link i{ width:16px; text-align:center; font-size:.85rem; }
.sidebar .nav-link:hover{ background:#182a5c; color:#fff; }
.sidebar .nav-link.active{ background:#1c3272; color:#fff; border-left-color:#4d7cf0; font-weight:600; }

.content{ flex:1; min-width:0; font-size:.85rem; }

.sidebar-backdrop{ display:none; }

/* ===== Cards / KPI ===== */
.card{ border:none; box-shadow:0 1px 3px rgba(0,0,0,.08); border-radius:10px; }
.card-body{ font-size:.85rem; }
.card-kpi{ border-radius:12px; color:#fff; }
.card-kpi .kpi-icon{ font-size:1.7rem; opacity:.5; }
.card-kpi h3{ font-weight:700; margin-bottom:0; font-size:1.4rem; }
.bg-kpi-1{ background:linear-gradient(135deg,#2a5298,#1e3c72); }
.bg-kpi-2{ background:linear-gradient(135deg,#11998e,#38ef7d); }
.bg-kpi-3{ background:linear-gradient(135deg,#f7971e,#ffd200); color:#333!important; }
.bg-kpi-4{ background:linear-gradient(135deg,#ee0979,#ff6a00); }

/* ===== Tabel ===== */
.table{ font-size:.8rem; margin-bottom:0; }
.table thead th{
  background:#f0f2f7; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em;
  color:#556; font-weight:700; border-bottom:2px solid #e2e6ee; white-space:nowrap;
}
.table td, .table th{ vertical-align:middle; padding:.5rem .65rem; }
.table-sm td, .table-sm th{ padding:.4rem .6rem; }
.table-hover tbody tr:hover{ background:#f5f8ff; }
.badge-stage-NEW{background:#6c757d;}
.badge-stage-QUALIFIED{background:#0d6efd;}
.badge-stage-PROPOSAL{background:#fd7e14;}
.badge-stage-WON{background:#198754;}
.badge-stage-LOST{background:#dc3545;}

/* ===== DataTables (samakan gaya dengan tema aplikasi) ===== */
.dataTables_wrapper{ font-size:.8rem; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input{
  font-size:.78rem; border-radius:6px; border:1px solid #d7dce5;
  padding:.25rem .5rem;
}
.dataTables_wrapper .dataTables_filter input{ margin-left:.4rem; }
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{ font-size:.76rem; color:#556; margin-bottom:.5rem; }
.dataTables_wrapper .page-link{ font-size:.76rem; padding:.3rem .6rem; }
table.dataTable thead th{
  background:#f0f2f7!important; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.03em; color:#556;
}
table.dataTable.table-sm > thead > tr > th{ padding-right:1.2rem; }

/* ===== Kanban CRM ===== */
.kanban-board{display:flex;gap:1rem;overflow-x:auto;padding-bottom:1rem;}
.kanban-col{background:#eef1f8;border-radius:10px;min-width:250px;max-width:250px;padding:.65rem;flex-shrink:0;}
.kanban-col-header{font-weight:700;font-size:.78rem;text-transform:uppercase;margin-bottom:.5rem;display:flex;justify-content:space-between;}
.kanban-card{background:#fff;border-radius:8px;padding:.6rem .7rem;margin-bottom:.55rem;box-shadow:0 1px 2px rgba(0,0,0,.1);cursor:grab;font-size:.78rem;}
.kanban-card:hover{box-shadow:0 3px 8px rgba(0,0,0,.15);}
.kanban-card.dragging{opacity:.4;}
.kanban-col.drag-over{background:#dde4f5;}

/* ===== Form ===== */
.form-label{font-size:.78rem;font-weight:600;color:#3a3a3a;}
.form-control, .form-select{ font-size:.83rem; }
.btn{ font-size:.82rem; }
.section-title{font-weight:700;color:var(--dark);border-left:4px solid var(--primary);padding-left:.6rem;margin-bottom:1rem;font-size:.95rem;}

/* ===== Login ===== */
.login-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#0d1b3e,#1e3c72 55%,#2a5298);
  padding:1.5rem;
}
.login-card{
  max-width:380px; width:100%; border:none; border-radius:16px;
  box-shadow:0 25px 60px rgba(0,0,0,.35); overflow:hidden;
}
.login-header{
  background:#0d1b3e; color:#fff; padding:2rem 1.5rem 1.75rem; text-align:center;
}
.login-header .login-icon{
  width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center; margin:0 auto .75rem;
  font-size:1.5rem;
}
.login-header h3{ font-size:1.1rem; font-weight:700; margin-bottom:.15rem; }
.login-header small{ color:#9fb0d8; font-size:.75rem; }
.login-body{ padding:1.75rem 1.75rem 1.5rem; background:#fff; }
.login-body .form-label{ font-size:.78rem; }
.login-body .input-group-text{ background:#f4f6f9; border-right:none; color:#7686bb; }
.login-body .form-control{ border-left:none; font-size:.85rem; }
.login-body .input-group:focus-within .input-group-text,
.login-body .input-group:focus-within .form-control{ border-color:#86b0f5; }
.login-body .input-group{ box-shadow:none; }
.login-body .btn-primary{
  background:var(--primary); border:none; font-weight:600; padding:.55rem;
  border-radius:8px;
}
.login-body .btn-primary:hover{ background:#1e3c72; }
.login-footnote{ font-size:.72rem; color:#8a93a6; text-align:center; margin-top:1rem; }
.login-alert{ font-size:.78rem; padding:.5rem .75rem; }

@media (max-width: 991px){
  .sidebar{
    position:fixed; left:-260px; top:calc(var(--topbar-h) + var(--mainnav-h)); bottom:0;
    z-index:1045; transition:left .25s; height:calc(100vh - var(--topbar-h) - var(--mainnav-h));
  }
  .sidebar.show{ left:0; box-shadow:2px 0 12px rgba(0,0,0,.25); }
  .sidebar-backdrop{
    display:none; position:fixed; inset:0; top:calc(var(--topbar-h) + var(--mainnav-h));
    background:rgba(0,0,0,.35); z-index:1042;
  }
  .sidebar-backdrop.show{ display:block; }
}