/* KOPI Go prototype styles. Structure and component names follow the contoh
   (OMBE) prototype so both products read as one family; the palette stays
   KOPI Go (coffee/cream, gold accent, leaf/brick for status only). */

:root {
  --kg-coffee: #1c1310;
  --kg-coffee-800: #3b2a21;
  --kg-gold: #96681f;
  --kg-gold-soft: #f8ecd2;
  --kg-leaf: #1e6b4e;
  --kg-brick: #a33a2a;
  --kg-amber: #b4801d;
  --kg-line: #e6dccb;
  --kg-page: #f7f3ec;
}

html, body { height: 100%; }
body { -webkit-font-smoothing: antialiased; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d7c9b4; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #bda98c; background-clip: content-box; }

:focus-visible { outline: 2px solid var(--kg-gold); outline-offset: 2px; border-radius: 6px; }

/* ---- Sidebar ---- */
.sidebar-link { display:flex; align-items:center; gap:.65rem; padding:.5rem .7rem; border-radius:.55rem; font-size:.845rem; font-weight:500; color:#d9cbb8; min-width:0; overflow:hidden; transition:background .15s,color .15s; }
.sidebar-link > span { min-width:0; flex:1 1 auto; }
.sidebar-link:hover { background: rgba(255,255,255,.08); color:#fff; }
.sidebar-link.active { background: var(--kg-gold); color:#fff; font-weight:600; }
.sidebar-link svg { width:17px; height:17px; flex:none; }
.sidebar-section { display:flex; align-items:center; gap:.4rem; width:100%; margin-top:.35rem; padding:.5rem .6rem; border-radius:.5rem; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:#a08b74; font-weight:700; text-align:left; transition:background .15s,color .15s; }
.sidebar-section:hover { background: rgba(255,255,255,.06); color:#f0e6d8; }
.sidebar-section.active { color:#ffffff; background: rgba(255,255,255,.07); }
.sidebar-section.active .si-chevron { color:#e4c274; }
.sidebar-section > span { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.si-icon { flex:none; width:14px; height:14px; }
.si-chevron { flex:none; width:14px; height:14px; color:#8a7660; transition: transform .18s ease; }
.si-chevron.open { transform: rotate(180deg); }
.si-flat { margin-bottom:.4rem; }
.si-items { margin-left:.55rem; padding-left:.35rem; border-left:1px solid rgba(255,255,255,.08); }
.si-group.is-active .si-items { border-left-color: rgba(228,194,116,.45); }
.sidebar-scroll { scrollbar-width: thin; overflow-x:hidden; }
.sidebar-scroll::-webkit-scrollbar-thumb { background:#4a3527; background-clip: content-box; }

/* ---- Layout ---- */
.app-shell { display:flex; min-height:100vh; }
.main-col { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.content { flex:1 1 auto; padding:1rem 1.15rem 2.5rem; }
@media (max-width: 767px) { .content { padding:.85rem .8rem 4.5rem; } }

/* ---- Cards ---- */
.card { background:#fff; border:1px solid var(--kg-line); border-radius:.85rem; box-shadow: 0 1px 2px rgba(44,31,24,.04); }
.card-pad { padding:.85rem .9rem; }
.kpi-value { font-family:"Fira Code", ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; letter-spacing:-.02em; }

/* ---- Table ---- */
.tbl { width:100%; border-collapse:separate; border-spacing:0; font-size:.8rem; }
.tbl thead th { position:sticky; top:0; z-index:1; background:#faf6f1; text-align:left; font-weight:600; color:#6f5640; font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; padding:.5rem .7rem; border-bottom:1px solid var(--kg-line); white-space:nowrap; }
.tbl tbody td { padding:.45rem .7rem; border-bottom:1px solid #f1e9db; vertical-align:middle; }
.tbl tbody tr:hover { background:#fdfbf7; }
.tbl-wrap { overflow:auto; max-height: var(--tbl-max, none); }

/* ---- Timeline ---- */
.tl { position:relative; padding-left:1.55rem; }
.tl::before { content:''; position:absolute; left:.42rem; top:.35rem; bottom:.35rem; width:2px; background:var(--kg-line); }
.tl-item { position:relative; padding-bottom:1rem; }
.tl-dot { position:absolute; left:-1.32rem; top:.2rem; width:.72rem; height:.72rem; border-radius:99px; background:#fff; border:2px solid #cbb59a; }
.tl-dot.ok { border-color:var(--kg-leaf); background:var(--kg-leaf); }
.tl-dot.warn { border-color:var(--kg-amber); background:var(--kg-amber); }
.tl-dot.bad { border-color:var(--kg-brick); background:var(--kg-brick); }
.tl-dot.info { border-color:var(--kg-gold); background:var(--kg-gold); }

/* ---- Motion: hanya untuk memandu perhatian (modal, drawer, toast, login) ---- */
@keyframes slideIn { from { transform: translateX(24px); opacity:.4 } to { transform:none; opacity:1 } }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes popIn { from { transform: translateY(10px) scale(.98); opacity:0 } to { transform:none; opacity:1 } }
@keyframes toastIn { from { transform: translateX(20px); opacity:0 } to { transform:none; opacity:1 } }
@keyframes fadeUp { from { opacity:0; transform:translateY(16px) } to { opacity:1; transform:none } }
.anim-slide { animation: slideIn .18s ease-out; }
.anim-fade { animation: fadeIn .15s ease-out; }
.anim-pop { animation: popIn .16s ease-out; }
.anim-toast { animation: toastIn .18s ease-out; }
.anim-fadeup { animation: fadeUp .55s ease-out both; }

/* ---- Doc flow ---- */
.flow { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.flow-node { border:1px solid var(--kg-line); background:#fff; border-radius:.6rem; padding:.45rem .7rem; font-size:.78rem; font-weight:600; color:var(--kg-coffee-800); }
.flow-node.current { border-color:var(--kg-gold); box-shadow:0 0 0 3px rgba(150,104,31,.14); }
.flow-arrow { color:#cbb59a; font-weight:700; }

/* ---- Badge / progress ---- */
.badge { display:inline-flex; align-items:center; gap:.3rem; padding:.14rem .5rem; border-radius:999px; font-size:.68rem; font-weight:700; letter-spacing:.02em; white-space:nowrap; }
.bar { height:.42rem; border-radius:999px; background:#efe7db; overflow:hidden; }
.bar > span { display:block; height:100%; background:var(--kg-gold); border-radius:999px; transition:width .3s ease; }

/* ---- Misc ---- */
.link { color:var(--kg-gold); font-weight:600; cursor:pointer; }
.link:hover { text-decoration:underline; }
.stat-divider { height:1px; background:#f1e9db; }
.tabbtn { padding:.45rem .75rem; font-size:.8rem; font-weight:600; color:#6f6155; border-bottom:2px solid transparent; }
.tabbtn.active { color:var(--kg-gold); border-color:var(--kg-gold); }
.no-scrollbar::-webkit-scrollbar { display:none; }
.mono-num { font-family:"Fira Code", ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
.skip-link { position:absolute; left:-9999px; top:0; background:var(--kg-coffee-800); color:#fff; padding:10px 14px; z-index:120; }
.skip-link:focus { left:8px; top:8px; }

/* ---- Login (split-screen, mengikuti contoh) ---- */
.login-hero { background: linear-gradient(160deg, #2a1d16 0%, #3b2a21 55%, #1c1310 100%); }
.hero-wave-a,
.hero-wave-b { position:absolute; border-radius:999px; pointer-events:none; }
.hero-wave-a { right:-18%; top:-22%; width:640px; height:640px; border:1.5px solid rgba(228,194,116,.09); transform:rotate(-12deg); box-shadow:0 0 0 44px rgba(228,194,116,.02), 0 0 0 128px rgba(228,194,116,.012); }
.hero-wave-b { left:-14%; bottom:-16%; width:520px; height:520px; border:1px solid rgba(150,104,31,.14); transform:rotate(18deg); box-shadow:0 0 0 40px rgba(150,104,31,.03); }

.cap-card { display:flex; align-items:center; gap:.65rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:.75rem; padding:.6rem .75rem; min-width:0; }
.cap-icon { flex:none; display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:999px; color:#e4c274; background:rgba(228,194,116,.1); border:1px solid rgba(228,194,116,.2); }
.cap-icon svg { width:14px; height:14px; }

.login-input { width:100%; height:48px; padding:.65rem .9rem; font-size:.9rem; border:1px solid #ddcfb9; border-radius:.7rem; color:#2c1f18; background:#fff; transition:border-color .15s, box-shadow .15s; }
.login-input:focus { outline:none; border-color:var(--kg-gold); box-shadow:0 0 0 3px rgba(150,104,31,.15); }
.login-btn { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; width:100%; height:50px; border-radius:.7rem; font-weight:600; font-size:.925rem; transition:background .15s, border-color .15s, transform .05s, box-shadow .15s; }
.login-btn:active { transform:translateY(1px); }

.role-row { display:flex; gap:.85rem; align-items:flex-start; border:1px solid var(--kg-line); border-radius:.7rem; background:#fff; padding:.85rem .9rem; transition:border-color .15s, background .15s; }
.role-row:hover { border-color:#d3a244; background:#fdfbf7; }
.role-icon { flex:none; display:flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:.55rem; color:var(--kg-gold); background:rgba(150,104,31,.09); border:1px solid rgba(150,104,31,.16); }

@media (max-width: 767px) {
  .login-hero { display:none; }
}

/* ---- Mobile bottom nav (hanya untuk role sales di layar kecil) ---- */
.bottom-nav { position:fixed; bottom:0; left:0; right:0; z-index:60; background:#fff; border-top:1px solid var(--kg-line); padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav a { flex:1; min-height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:11px; font-weight:600; color:#6f6155; text-decoration:none; }
.bottom-nav a[aria-current="page"] { color:var(--kg-coffee-800); }
.bottom-nav a svg { width:20px; height:20px; }
.bottom-nav a[aria-current="page"] .bn-dot { background:var(--kg-gold); }
.bn-dot { width:14px; height:2px; border-radius:2px; background:transparent; }

/* Pointer kasar (jari): semua tombol naik ke 44px agar area sentuh aman.
   Pointer presisi (mouse) tetap rapat untuk tabel padat. */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .role-row { padding: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}