/* =====================================================================
   Tema gelap "glass" - mengikuti gaya visual itomjie.com
   Plus Jakarta Sans, latar #0b0b16, panel kaca, aksen violet-indigo.
   ===================================================================*/

:root {
  --bg:          #0b0b16;
  --violet:      #7c3aed;
  --violet-2:    #8b5cf6;
  --indigo:      #4f46e5;
  --blue:        #3b82f6;
  --sky:         #38bdf8;
  --pink:        #ec4899;
  --accent:      #a78bfa;
  --green:       #4ade80;
  --amber:       #fbbf24;
  --red:         #f87171;

  --text:        #ffffff;
  --muted:       rgba(255,255,255,0.64);
  --muted-2:     rgba(255,255,255,0.40);

  --glass:       rgba(255,255,255,0.055);
  --glass-2:     rgba(255,255,255,0.09);
  --glass-3:     rgba(255,255,255,0.13);
  --stroke:      rgba(255,255,255,0.12);
  --stroke-soft: rgba(255,255,255,0.06);
  --panel:       rgba(15,15,26,0.55);

  --radius:      20px;
  --radius-lg:   26px;
  --radius-pill: 50px;
  --shadow:      0 30px 80px rgba(0,0,0,0.55);
  --shadow-soft: 0 14px 34px rgba(0,0,0,0.45);
  --ease:        cubic-bezier(0.22,1,0.36,1);
  --grad:        linear-gradient(135deg, var(--violet), var(--indigo));
  --grad-text:   linear-gradient(135deg, #c4b5fd, #818cf8);

  --sidebar-w:   248px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Orb latar - bola cahaya kabur seperti pada situs acuan */
body::before,
body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
body::before {
  width: 620px; height: 620px;
  top: -220px; left: -160px;
  background: radial-gradient(circle, var(--violet), transparent 70%);
  opacity: .5;
}
body::after {
  width: 560px; height: 560px;
  right: -180px; bottom: -240px;
  background: radial-gradient(circle, var(--blue), transparent 70%);
  opacity: .38;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: #c4b5fd; }

h1, h2, h3, h4 { margin: 0 0 8px; font-weight: 800; letter-spacing: -0.4px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; letter-spacing: -0.2px; }
p  { margin: 0 0 10px; }

::selection { background: rgba(139,92,246,.45); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--glass-2); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: var(--glass-3); }

/* --------------------------- utilitas ---------------------------- */
.muted   { color: var(--muted); }
.small   { font-size: 12.5px; }
.right   { text-align: right; }
.center  { text-align: center; }
.nowrap  { white-space: nowrap; }
.mt-0 { margin-top: 0; }   .mt-1 { margin-top: 6px; }
.mt-2 { margin-top: 14px; } .mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 14px; } .mb-3 { margin-bottom: 20px; }
.flex { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.flex-wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; }
.req  { color: var(--pink); }

/* ---------------------------- layout ----------------------------- */
.layout { display: flex; min-height: 100vh; position: relative; z-index: 1; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--panel);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border-right: 1px solid var(--stroke-soft);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand { display: flex; align-items: center; gap: 11px; padding: 20px 18px 16px; }
.brand-mark {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 13px;
  background: var(--grad);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; letter-spacing: -0.5px;
  box-shadow: 0 8px 22px rgba(124,58,237,.45);
}
.brand-logo { max-width: 118px; max-height: 40px; object-fit: contain; border-radius: 10px; }
.brand-name { font-weight: 800; font-size: 14.5px; letter-spacing: -0.3px; line-height: 1.25; }
.brand-sub  { font-size: 11.5px; color: var(--muted-2); line-height: 1.3; }

.nav { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 6px 12px 16px; }
.nav-section {
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--muted-2); padding: 16px 10px 7px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 3px;
  border-radius: 13px;
  color: var(--muted); font-size: 13.5px; font-weight: 600;
  border: 1px solid transparent;
  transition: all .18s var(--ease);
}
.nav-item:hover { background: var(--glass); color: var(--text); border-color: var(--stroke-soft); }
.nav-item.active {
  background: linear-gradient(135deg, rgba(124,58,237,.30), rgba(79,70,229,.18));
  color: #fff;
  border-color: rgba(167,139,250,.35);
}
.nav-ico { width: 18px; text-align: center; opacity: .9; font-size: 12px; }
.nav-badge {
  margin-left: auto;
  background: var(--pink); color: #fff;
  font-size: 10.5px; font-weight: 800;
  padding: 2px 7px; border-radius: 20px;
}

.sidebar-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--stroke-soft);
  background: rgba(255,255,255,0.03);
}
.avatar {
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 50%;
  background: var(--grad-text);
  color: #1e1b4b;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12.5px;
}
.who { min-width: 0; }
.who-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-role { font-size: 11px; color: var(--muted-2); }
.logout {
  margin-left: auto;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--glass); border: 1px solid var(--stroke);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: all .18s var(--ease);
}
.logout:hover { background: rgba(248,113,113,.16); border-color: rgba(248,113,113,.4); color: #fecaca; }

.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 26px;
  border-bottom: 1px solid var(--stroke-soft);
  background: rgba(11,11,22,0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  position: sticky; top: 0; z-index: 20;
}
.page-title { font-size: 21px; font-weight: 800; letter-spacing: -0.7px; margin: 0; }
.page-sub   { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; }
.topbar-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.hamburger {
  display: none;
  background: var(--glass); border: 1px solid var(--stroke); color: var(--text);
  width: 38px; height: 38px; border-radius: 12px; font-size: 16px; cursor: pointer;
}

.content { padding: 22px 26px 40px; flex: 1 1 auto; }
.foot { padding: 16px 26px 26px; color: var(--muted-2); font-size: 12px; }

/* ----------------------------- kartu ----------------------------- */
.card {
  background: var(--glass);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  margin-bottom: 18px;
  overflow: hidden;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--stroke-soft);
  flex-wrap: wrap;
}
.card-head h3 { margin: 0; font-size: 15px; }
.card-body { padding: 18px 20px; }
.card-body.tight { padding: 0; }

.grid { display: grid; gap: 16px; }
.grid-2   { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-5   { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }

/* Cegah kolom grid melar mengikuti isi terpanjang (mis. nama berkas) */
.grid > *, .grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-5 > *, .grid-2-1 > * { min-width: 0; }
.card, .stat, .card-body, .table-wrap { min-width: 0; max-width: 100%; }

/* --------------------------- kartu stat -------------------------- */
.stat {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius);
  padding: 16px 18px;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.stat:hover { transform: translateY(-2px); border-color: var(--stroke); }
.stat-label { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted-2); }
.stat-value { font-size: 25px; font-weight: 800; letter-spacing: -1px; margin-top: 5px; line-height: 1.15; }
.stat-note  { font-size: 12px; color: var(--muted); margin-top: 4px; }
.stat-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px; }

/* ----------------------------- tabel ----------------------------- */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.table th {
  text-align: left;
  padding: 12px 14px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted-2);
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--stroke-soft);
  white-space: nowrap;
}
table.table td { padding: 12px 14px; border-bottom: 1px solid var(--stroke-soft); vertical-align: middle; }
table.table tbody tr { transition: background .15s var(--ease); }
table.table tbody tr:hover { background: rgba(255,255,255,0.035); }
table.table tbody tr:last-child td { border-bottom: none; }
table.table tfoot td {
  padding: 12px 14px;
  border-top: 1px solid var(--stroke);
  font-weight: 800;
  background: rgba(255,255,255,0.04);
}
.empty { padding: 34px 16px; text-align: center; color: var(--muted-2); font-size: 13px; }

/* ----------------------------- badge ----------------------------- */
.badge {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge-primary { background: rgba(139,92,246,.18); color: #c4b5fd; border-color: rgba(139,92,246,.35); }
.badge-success { background: rgba(74,222,128,.14);  color: #86efac; border-color: rgba(74,222,128,.32); }
.badge-warning { background: rgba(251,191,36,.14);  color: #fcd34d; border-color: rgba(251,191,36,.32); }
.badge-danger  { background: rgba(248,113,113,.15); color: #fca5a5; border-color: rgba(248,113,113,.34); }
.badge-info    { background: rgba(56,189,248,.14);  color: #7dd3fc; border-color: rgba(56,189,248,.32); }
.badge-muted   { background: var(--glass-2); color: var(--muted); border-color: var(--stroke); }
.badge-stage   { background: rgba(167,139,250,.15); color: #ddd6fe; border-color: rgba(167,139,250,.3); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }

/* ---------------------------- tombol ----------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--glass);
  border: 1px solid var(--stroke);
  color: var(--text);
  font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: all .18s var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--glass-2); border-color: rgba(255,255,255,.22); color: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 26px rgba(124,58,237,.4);
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 12px 30px rgba(124,58,237,.5); }

.btn-success { background: linear-gradient(135deg, #22c55e, #16a34a); border-color: transparent; color: #fff; box-shadow: 0 8px 22px rgba(34,197,94,.32); }
.btn-success:hover { filter: brightness(1.08); }

.btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626); border-color: transparent; color: #fff; box-shadow: 0 8px 22px rgba(239,68,68,.32); }
.btn-danger:hover { filter: brightness(1.08); }

.btn-ghost { background: transparent; border-color: var(--stroke); color: var(--muted); }
.btn-ghost:hover { color: var(--text); }

.btn-sm { padding: 6px 13px; font-size: 12px; }
.btn-group { display: inline-flex; gap: 6px; }

/* ----------------------------- form ------------------------------ */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .2px; }
.hint { font-size: 11.5px; color: var(--muted-2); }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], input[type=search], input[type=file],
select, textarea {
  width: 100%;
  padding: 10px 13px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--stroke);
  border-radius: 13px;
  color: var(--text);
  font-size: 13.5px; font-family: inherit;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
input::placeholder, textarea::placeholder { color: rgba(255,255,255,.3); }
input:focus, select:focus, textarea:focus {
  outline: none;
  background: rgba(255,255,255,0.075);
  border-color: rgba(167,139,250,.6);
  box-shadow: 0 0 0 3px rgba(139,92,246,.2);
}
textarea { min-height: 86px; resize: vertical; }
input[readonly], input[disabled], select[disabled] { background: rgba(255,255,255,0.03); color: var(--muted-2); cursor: not-allowed; }
input[type=color] { padding: 3px; height: 40px; cursor: pointer; }
input[type=file] { padding: 8px 12px; color: var(--muted); }
select option { background: #14142a; color: #fff; }

.form-actions { display: flex; gap: 9px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.checkline { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.checkline input { width: auto; accent-color: var(--violet-2); width: 16px; height: 16px; }

.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.filters .field { min-width: 130px; }

/* ----------------------------- alert ----------------------------- */
.alert {
  padding: 13px 17px;
  border-radius: 16px;
  margin-bottom: 16px;
  font-size: 13px;
  border: 1px solid transparent;
  backdrop-filter: blur(10px);
}
.alert-success { background: rgba(74,222,128,.12);  border-color: rgba(74,222,128,.3);  color: #bbf7d0; }
.alert-error   { background: rgba(248,113,113,.13); border-color: rgba(248,113,113,.32); color: #fecaca; }
.alert-warning { background: rgba(251,191,36,.12);  border-color: rgba(251,191,36,.3);  color: #fde68a; }
.alert-info    { background: rgba(56,189,248,.12);  border-color: rgba(56,189,248,.3);  color: #bae6fd; }
.alert a { color: inherit; text-decoration: underline; }

/* -------------------------- bar & funnel ------------------------- */
.bars { display: flex; flex-direction: column; gap: 14px; }
.bar-row { display: grid; grid-template-columns: 150px 1fr 130px; gap: 12px; align-items: center; font-size: 13px; }
.bar-track { background: rgba(255,255,255,0.07); border-radius: 20px; height: 22px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 20px; min-width: 3px; transition: width .4s var(--ease); }
.bar-val { text-align: right; font-weight: 800; font-size: 12.5px; }

.funnel { display: flex; flex-direction: column; gap: 8px; }
.funnel-step { display: flex; align-items: center; gap: 12px; }
.funnel-bar {
  height: 36px; border-radius: 12px;
  display: flex; align-items: center; padding: 0 14px;
  color: #fff; font-weight: 700; font-size: 12.5px; min-width: 70px;
}

.progress { background: rgba(255,255,255,0.08); border-radius: 20px; height: 7px; overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 20px; transition: width .4s var(--ease); }

/* ---------------------------- kanban ----------------------------- */
.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; }
.kcol {
  flex: 0 0 268px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
}
.kcol-head { padding: 13px 14px; border-bottom: 1px solid var(--stroke-soft); }
.kcol-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 800; font-size: 13px; }
.kcol-sum { font-size: 11.5px; color: var(--muted-2); margin-top: 3px; }
.kcol-body { padding: 11px; display: flex; flex-direction: column; gap: 10px; max-height: 68vh; overflow-y: auto; }
.kcard {
  background: var(--glass);
  border: 1px solid var(--stroke-soft);
  border-radius: 16px;
  padding: 12px 13px;
  transition: all .18s var(--ease);
}
.kcard:hover { background: var(--glass-2); border-color: var(--stroke); transform: translateY(-2px); }
.kcard a { color: var(--text); font-weight: 700; font-size: 13px; display: block; line-height: 1.35; }
.kcard a:hover { color: #c4b5fd; }
.kcard-meta { font-size: 11.5px; color: var(--muted-2); margin-top: 4px; }
.kcard-amount { font-weight: 800; font-size: 13.5px; margin-top: 6px; color: #ddd6fe; }
.kcard select { font-size: 12px; padding: 6px 9px; border-radius: 10px; }

/* --------------------------- timeline ---------------------------- */
.timeline { position: relative; padding-left: 30px; }
.timeline:before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: var(--stroke); }
.tl-item { position: relative; padding-bottom: 20px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute; left: -30px; top: 1px;
  width: 23px; height: 23px; border-radius: 50%;
  color: #fff; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg);
}
.tl-title { font-weight: 700; font-size: 13.5px; }
.tl-meta  { font-size: 11.5px; color: var(--muted-2); margin-top: 2px; }
.tl-notes {
  font-size: 12.5px; color: var(--muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--stroke-soft);
  border-radius: 12px;
  padding: 9px 12px; margin-top: 7px;
}

/* ------------------------------ tab ------------------------------ */
.tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.tab {
  padding: 9px 17px;
  border-radius: var(--radius-pill);
  background: var(--glass);
  border: 1px solid var(--stroke-soft);
  color: var(--muted);
  font-size: 13px; font-weight: 600;
  transition: all .18s var(--ease);
}
.tab:hover { background: var(--glass-2); color: var(--text); }
.tab.active { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 8px 22px rgba(124,58,237,.35); }

/* ----------------------------- login ----------------------------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; z-index: 1; }
.login-card {
  width: 100%; max-width: 396px;
  background: rgba(20,20,36,.72);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
}
.login-brand { text-align: center; margin-bottom: 22px; }
.login-brand .brand-mark { margin: 0 auto 12px; width: 50px; height: 50px; font-size: 15px; border-radius: 16px; }
.login-brand h2 { font-size: 19px; letter-spacing: -0.5px; }

/* --------------------------- daftar dl --------------------------- */
.dl { display: grid; grid-template-columns: 165px 1fr; gap: 9px 14px; font-size: 13.5px; margin: 0; }
.dl dt { color: var(--muted-2); font-weight: 600; font-size: 12.5px; }
.dl dd { margin: 0; }

.pill-row { display: flex; gap: 7px; flex-wrap: wrap; }

/* -------------------------- paginasi ----------------------------- */
.pagination { display: flex; align-items: center; gap: 6px; padding: 14px 18px; flex-wrap: wrap; border-top: 1px solid var(--stroke-soft); }
.pagination a, .pagination span.on {
  min-width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 10px;
  border-radius: 11px;
  border: 1px solid var(--stroke-soft);
  background: var(--glass);
  color: var(--muted);
  font-size: 12.5px; font-weight: 700;
  transition: all .18s var(--ease);
}
.pagination a:hover { background: var(--glass-2); color: var(--text); }
.pagination .on { background: var(--grad); border-color: transparent; color: #fff; }

/* ------------------------ grafik batang -------------------------- */
.chart-bars { display: flex; align-items: flex-end; gap: 10px; min-height: 210px; padding-top: 6px; overflow-x: auto; }
.chart-col { flex: 1 1 0; min-width: 62px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 210px; text-align: center; }
.chart-val { font-size: 11.5px; font-weight: 800; color: var(--muted); margin-bottom: 4px; white-space: nowrap; }
.chart-bar { width: 100%; max-width: 46px; background: var(--grad); border-radius: 10px 10px 0 0; min-height: 4px; transition: height .4s var(--ease); }
.chart-x { font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 6px; }

/* ---------------------- utilitas responsif ----------------------- */
/* .show-sm  : tampil hanya di tablet ke bawah (<= 900px)
   .hide-sm  : sembunyi di tablet ke bawah (<= 900px)
   .hide-xs  : sembunyi di ponsel (<= 600px)
   .only-sm  : hanya tampil di ponsel                                 */
.only-sm { display: none; }

/* Latar gelap saat sidebar dibuka di layar kecil */
.sidebar-backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;   /* inset: 0 tidak didukung browser lama */
  background: rgba(3, 3, 10, 0.62);
  /* TANPA backdrop-filter: efek blur di sini membuat menu di atasnya ikut
     terlihat buram pada sebagian browser HP, sekaligus memberatkan render. */
  z-index: 55;
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease);
}
.sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
body.nav-open { overflow: hidden; }

/* Petunjuk geser pada tabel lebar */
.table-wrap { position: relative; -webkit-overflow-scrolling: touch; }
.scroll-hint { display: none; }

/* --------------------------- responsif --------------------------- */
@media (max-width: 1240px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1100px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-2-1 { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 130px 1fr 110px; }
}

/* Tablet: sidebar jadi laci geser */
@media (max-width: 900px) {
  .sidebar {
    position: fixed; top: 0; left: 0;
    height: 100vh;
    height: 100dvh;                    /* ikut tinggi layar ponsel yang sebenarnya */
    width: 84vw; max-width: 292px; flex-basis: auto;
    transform: translateX(-100%);
    /* Latar PEKAT, bukan kaca transparan: di ponsel isi halaman tidak
       menembus menu sehingga tidak terlihat kabur/bertumpuk. */
    background: #14141f;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-right: 1px solid var(--stroke);
    /* Saat tertutup: tanpa bayangan (bayangan 80px sebelumnya merembes ke
       tepi layar dan terlihat seperti noda kabur) dan benar-benar disembunyikan
       agar tidak bisa disentuh maupun dijangkau pembaca layar. */
    box-shadow: none;
    visibility: hidden;
    transition: transform .28s var(--ease), visibility 0s linear .28s;
    z-index: 60;
  }
  .sidebar.open {
    transform: translateX(0);
    visibility: visible;
    box-shadow: 8px 0 44px rgba(0, 0, 0, .55);
    transition: transform .28s var(--ease), visibility 0s linear 0s;
  }
  /* topbar ikut pekat supaya isi halaman tidak tembus saat digulir */
  .topbar { background: #0d0d19; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hamburger { display: flex; align-items: center; justify-content: center; flex: 0 0 38px; }
  .main { width: 100%; }
  .content { padding: 18px 16px 34px; }
  .topbar { padding: 14px 16px; gap: 10px; }
  .page-title { font-size: 18px; letter-spacing: -0.5px; }
  .page-sub { font-size: 12px; }
  .hide-sm { display: none !important; }
  .show-sm { display: block !important; }
  .grid-2 { grid-template-columns: 1fr; }
  .card { border-radius: var(--radius); }
  .card-head { padding: 14px 16px; }
  .card-body { padding: 16px; }
  .kcol { flex: 0 0 82vw; max-width: 300px; }
  .kanban { scroll-snap-type: x mandatory; }
  .kcol { scroll-snap-align: start; }
  /* tabel: geser mendatar, jangan gepeng */
  table.table { min-width: 620px; }
  .scroll-hint { display: block; font-size: 11.5px; color: var(--muted-2); padding: 8px 16px 0; }
}

/* Ponsel */
@media (max-width: 600px) {
  .topbar {
    flex-wrap: wrap;
    padding: 12px 14px;
    position: static;                 /* hemat tinggi layar saat menggulir */
  }
  .topbar-actions {
    margin-left: 0;
    width: 100%;
    gap: 7px;
  }
  .topbar-actions .btn { flex: 1 1 auto; justify-content: center; }
  .content { padding: 14px 14px 30px; }
  .hide-xs { display: none !important; }
  .only-sm { display: block; }
  .grid, .grid-2, .grid-3, .grid-4, .grid-5, .grid-2-1 { grid-template-columns: 1fr; gap: 12px; }
  .form-grid { grid-template-columns: 1fr; gap: 12px; }
  .card { margin-bottom: 14px; }
  .card-head { flex-wrap: wrap; gap: 8px; }
  .card-head h3 { font-size: 14.5px; }

  /* target sentuh lebih nyaman */
  .btn { padding: 11px 17px; font-size: 13px; }
  .btn-sm { padding: 8px 13px; font-size: 12px; }
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=date], input[type=datetime-local], input[type=search], select, textarea {
    font-size: 16px;                  /* cegah zoom otomatis iOS */
    padding: 11px 13px;
  }
  .form-actions { flex-direction: column-reverse; gap: 8px; }
  .form-actions .btn, .form-actions form, .form-actions form .btn { width: 100%; justify-content: center; }

  /* filter jadi satu kolom penuh */
  .filters { flex-direction: column; align-items: stretch; gap: 10px; }
  .filters .field { min-width: 0; width: 100%; }
  .filters .field label:empty, .filters .field label { min-height: 0; }

  .stat { padding: 14px 15px; }
  .stat-value { font-size: 21px; }
  .stat-label { font-size: 10px; }

  .tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; }
  .tab { flex: 0 0 auto; }

  .bar-row { grid-template-columns: 1fr auto; gap: 6px 10px; }
  .bar-track { grid-column: 1 / -1; order: 3; }
  .bar-val { text-align: right; }

  .dl { grid-template-columns: 1fr; gap: 2px 0; }
  .dl dt { margin-top: 8px; }
  .dl dd { margin-bottom: 6px; }

  .timeline { padding-left: 26px; }
  .tl-dot { left: -26px; width: 20px; height: 20px; font-size: 9px; }

  .kcol { flex: 0 0 86vw; }
  .chart-col { min-width: 56px; }
  .pagination { padding: 12px 14px; }
  .login-card { padding: 26px 20px; }
  /* kolom sekunder sudah disembunyikan, biarkan tabel menyesuaikan lebar layar;
     tabel yang tetap lebar akan menggulir sendiri di dalam .table-wrap */
  table.table { min-width: 0; font-size: 12.5px; }
  table.table th, table.table td { padding: 10px 10px; word-break: break-word; }
}

@media (max-width: 380px) {
  .content { padding: 12px 11px 26px; }
  .topbar { padding: 11px 12px; }
  .page-title { font-size: 16.5px; }
  .stat-value { font-size: 19px; }
  .brand-name { font-size: 13.5px; }
}

@media print {
  body { background: #fff; color: #111; }
  body::before, body::after { display: none; }
  .sidebar, .topbar-actions, .hamburger, .btn { display: none !important; }
  .card, .stat { background: #fff; border: 1px solid #ddd; box-shadow: none; backdrop-filter: none; }
  .card-head, table.table th, table.table tfoot td { background: #f5f5f5; }
  .muted, .stat-label, .stat-note, table.table th { color: #555; }
  table.table td, table.table th { border-color: #ddd; }
  .page-title, .stat-value, h1, h2, h3 { color: #111; }
}

/* ---------------------------------------------------------------
   Tabel item penawaran.
   Angka pada kolom Qty sempat terpotong karena tombol panah bawaan
   input number memakan hampir sepertiga lebar kolom. Tombol panah
   disembunyikan khusus pada tabel ini (tetap ada pada formulir lain),
   kolom dilebarkan, dan angka dirata-kanan agar mudah dibandingkan.
   ---------------------------------------------------------------*/
.item-row input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-left: 10px;
  padding-right: 10px;
}
.item-row input[type=number]::-webkit-outer-spin-button,
.item-row input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.item-row .it-qty,
.item-row .it-months,
.item-row .it-disc { min-width: 88px; }
.item-row .it-price { min-width: 142px; }
.item-row .it-sub   { font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
  .item-row .it-qty,
  .item-row .it-months,
  .item-row .it-disc { min-width: 80px; }
  .item-row .it-price { min-width: 128px; }
}

/* Judul dokumen kontrak: nama berkas panjang tanpa spasi harus tetap
   terpotong pada batas yang wajar, bukan per huruf. */
.doc-judul { font-weight: 650; overflow-wrap: anywhere; word-break: break-word; }

/* Bilah kemajuan tipis untuk kolom periode kontrak pada tabel */
.progress-xs { height: 4px; }

/* Batang proyeksi pada grafik tren: bergaris agar jelas bukan angka
   yang sudah terjadi, melainkan perkiraan dari kontrak berjalan. */
.chart-bar-proyeksi {
  background: repeating-linear-gradient(
    135deg,
    rgba(139,92,246,.55) 0 6px,
    rgba(139,92,246,.18) 6px 12px
  );
  border: 1px dashed rgba(167,139,250,.5);
  border-bottom: 0;
}

/* Grafik tren sewa memuat 15 bulan sekaligus, jadi kolomnya sedikit
   lebih rapat daripada grafik lain agar muat tanpa perlu digeser. */
.chart-bars-tren { gap: 6px; }
.chart-bars-tren .chart-col { min-width: 54px; }
.chart-bars-tren .chart-val { font-size: 11px; }
.chart-bars-tren .chart-x   { font-size: 11.5px; }
@media (max-width: 900px) {
  .chart-bars-tren .chart-col { min-width: 58px; }
}

/* Ringkasan pengganti kolom yang disembunyikan pada layar kecil. */
.show-sm { display: none; }

/* Angka kecil pada tab modul Kontrak (jumlah dokumen, deal menunggu). */
.tab-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 20px;
  background: rgba(255,255,255,.12);
  font-size: 11px; font-weight: 700;
}
.tab.active .tab-count { background: rgba(255,255,255,.22); }

/* --- Pilihan yang bisa diketik (select[data-cari]) ----------------------- */
.combo { position: relative; }
.combo .combo-asli { display: none; }
.combo-input { width: 100%; }
.combo-list {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 280px; overflow-y: auto;
  background: #141427; border: 1px solid var(--stroke);
  border-radius: 10px; box-shadow: 0 18px 40px rgba(0,0,0,.45); padding: 4px;
}
.combo-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-radius: 7px;
  padding: 8px 10px; font: inherit; font-size: 13px; line-height: 1.4;
  color: var(--text);
}
.combo-item:hover, .combo-item.aktif { background: rgba(139,92,246,.18); }
.combo-kosong { padding: 10px; font-size: 13px; color: var(--muted); }

/* --- Popup sederhana ----------------------------------------------------- */
body.modal-terbuka { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal-latar { position: absolute; inset: 0; background: rgba(5,5,12,.72); backdrop-filter: blur(3px); }
.modal-kotak {
  position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: #141427; border: 1px solid var(--stroke); border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.modal-kepala {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--stroke-soft);
}
.modal-kepala h3 { margin: 0; font-size: 16px; }
.modal-isi { padding: 16px 18px; display: grid; gap: 14px; }
.modal-kaki {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 18px; border-top: 1px solid var(--stroke-soft);
}
@media (max-width: 480px) { .modal-kaki { flex-direction: column-reverse; } .modal-kaki .btn { width: 100%; } }