/* KolegaOps — Modernist system (flat, 0 radius, 2px rules, Archivo) retuned to Warkop Kolega navy. */
:root {
  --navy: #0f2260;
  --blue: #1a3a8f;
  --blue-light: #8fb0ff;
  --blue-soft: #9fb6ea;
  --blue-tint: #dbe5fb;
  --side-muted: #9fb3e6;
  --side-text: #c4d2f5;
  --side-mark: #5b76c2;

  --bg: #f3f5fa;
  --surface: #fff;
  --line: #c9d3ea;
  --line-soft: #dde3f0;
  --row-rule: #e2e7f3;
  --stripe-a: #eef1f8;
  --stripe-b: #e2e7f3;

  --text: #1a1d29;
  --muted: #5a6378;
  --faint: #8a93a8;

  --danger: #c0291a;
  --danger-tint: #fdecea;
  --danger-line: #f0c4bd;
  --warn: #8a6a00;
  --warn-tint: #fff6d6;
  --warn-line: #e0b200;
  --success: #1a7a3c;

  --font-heading: 'Archivo', system-ui, sans-serif;
  --font-body: 'Archivo', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
}
button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--navy); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--blue) 30%, transparent); }

/* ── shell ─────────────────────────────────────────── */
.app { display: flex; height: 100vh; min-width: 1100px; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }

.sidebar {
  width: 220px; flex: none; background: var(--navy); color: #fff;
  display: flex; flex-direction: column; padding: 24px 0; gap: 20px;
}
.brand { padding: 0 20px; display: flex; flex-direction: column; gap: 4px; }
.brand-logo { font: 800 24px/1 var(--font-heading); letter-spacing: -.02em; }
.brand-logo span { color: var(--blue-light); }
.brand-sub { font-size: 11px; color: var(--side-muted); text-transform: uppercase; letter-spacing: .1em; }
.sidebar-rule { height: 2px; background: var(--blue); }
.nav { display: flex; flex-direction: column; }
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 20px;
  font-size: 14px; color: var(--side-text); text-decoration: none;
}
.nav-item:hover { color: #fff; background: color-mix(in srgb, var(--blue) 50%, transparent); }
.nav-mark { width: 14px; height: 14px; flex: none; border: 2px solid var(--side-mark); }
.nav-item.active { background: var(--blue); color: #fff; font-weight: 700; }
.nav-item.active .nav-mark { background: var(--blue-light); border: 0; }
.sidebar-user {
  margin-top: auto; padding: 16px 20px 0; border-top: 2px solid var(--blue);
  display: flex; gap: 10px; align-items: center;
}
.avatar { width: 32px; height: 32px; flex: none; background: var(--blue); }
.sidebar-user-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.sidebar-user-name { font-size: 13px; font-weight: 700; }
.sidebar-user-role { font-size: 11px; color: var(--side-muted); }

/* ── page header ───────────────────────────────────── */
.page-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; border-bottom: 2px solid var(--navy); background: var(--surface);
}
.page-heading { display: flex; flex-direction: column; gap: 4px; }
.page-title { margin: 0; font: 800 22px/1.2 var(--font-heading); color: var(--navy); }
.meta { font-size: 12px; color: var(--muted); }

/* ── buttons ───────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px; text-align: left;
  font: 700 14px var(--font-body); border: 0; padding: 0 18px; height: 42px;
}
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:not(:disabled):hover { background: var(--navy); }
.btn-primary:not(:disabled):active { background: #0a1847; }
.btn-outline { background: #fff; color: var(--blue); border: 2px solid var(--blue); }
.btn-outline:hover { background: var(--blue-tint); }
.btn-plain { background: #fff; color: var(--text); border: 2px solid var(--line); }
.btn-plain:hover { border-color: var(--blue); }
.btn-sm { height: 30px; padding: 0 12px; font-size: 12px; }
.btn-md { height: 40px; padding: 0 16px; font-size: 13px; }
.btn-danger { background: #fff; color: var(--danger); border: 2px solid var(--danger-line); }
.btn-danger:hover { background: var(--danger-tint); }

.chip {
  padding: 8px 14px; background: #fff; color: var(--blue);
  border: 2px solid var(--line); font: 600 13px var(--font-body);
}
.chip:hover { border-color: var(--blue); }
.chip.is-active { background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 700; }

/* ── form controls ─────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: 12px; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: .06em; }
.input {
  height: 38px; border: 2px solid var(--line); background: #fff; padding: 0 12px;
  font-size: 13px; border-radius: 0;
}
.input::placeholder { color: var(--faint); }
.input:hover { border-color: color-mix(in srgb, var(--blue) 55%, var(--line)); }
.input:focus-visible { border-color: var(--blue); outline-offset: 0; }
.input-strong { height: 42px; border-color: var(--blue); font: 700 18px var(--font-body); }
select.input {
  appearance: none; padding-right: 36px; color: var(--text); cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%231a1d29'/%3E%3C/svg%3E") no-repeat right 12px center;
}
textarea.input { height: 60px; padding: 10px; border-style: dashed; resize: vertical; }

.seg { display: flex; border: 2px solid var(--blue); }
.seg-opt { height: 34px; padding: 0 16px; background: #fff; color: var(--blue); border: 0; font: 600 13px var(--font-body); }
.seg-opt:hover { background: var(--blue-tint); }
.seg-opt.is-active { background: var(--blue); color: #fff; font-weight: 700; }

.toolbar { display: flex; gap: 10px; padding: 16px 24px; }

/* ── panels, tables ────────────────────────────────── */
.panel { background: #fff; border: 2px solid var(--navy); }
.table-wrap { margin: 0 24px 24px; overflow: auto; flex: 1; min-height: 0; }
.trow {
  display: grid; gap: 12px; padding: 12px 16px; align-items: center;
  border-bottom: 1px solid var(--row-rule); font-size: 14px;
}
.thead {
  position: sticky; top: 0; z-index: 1; border-bottom: 0;
  background: var(--navy); color: #fff; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.strong { font-weight: 700; }
.name { font-weight: 700; color: var(--text); }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--muted); }
.empty { padding: 40px 20px; font-size: 13px; color: var(--faint); }

.photo {
  background: repeating-linear-gradient(45deg, var(--stripe-a) 0 8px, var(--stripe-b) 8px 16px);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .08em;
}

/* ── badges ────────────────────────────────────────── */
.badge { display: inline-block; padding: 3px 10px; font-size: 12px; font-weight: 700; line-height: 1.55; }
.badge-ok { background: var(--blue-tint); color: var(--blue); }
.badge-bad { background: var(--danger-tint); color: var(--danger); }
.badge-status { padding: 4px 10px; border: 2px solid; }
.badge-kritis { background: var(--danger-tint); color: var(--danger); border-color: var(--danger); }
.badge-menipis { background: var(--warn-tint); color: var(--warn); border-color: var(--warn-line); }
.badge-aman { background: var(--blue-tint); color: var(--blue); border-color: var(--blue-tint); }

/* ── stat cards ────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 16px 24px 0; }
.stat { background: #fff; border: 2px solid var(--navy); padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.stat-value { font: 800 30px/1.2 var(--font-heading); color: var(--navy); }
.stat-note { font-size: 12px; color: var(--muted); }
.stat-primary { background: var(--blue); border: 0; padding: 18px 20px; color: #fff; }
.stat-primary .stat-label, .stat-primary .stat-note { color: var(--side-text); }
.stat-primary .stat-value { color: #fff; }
.stat-danger { border-color: var(--danger); }
.stat-danger .stat-label, .stat-danger .stat-value, .stat-danger a { color: var(--danger); }
.stat-danger a { font-size: 12px; font-weight: 700; }

/* ── dialog ────────────────────────────────────────── */
.dialog-backdrop {
  position: fixed; inset: 0; z-index: 10; background: rgba(15, 34, 96, .45);
  display: flex; align-items: center; justify-content: center;
}
.dialog { width: 420px; background: #fff; border: 2px solid var(--navy); display: flex; flex-direction: column; }
.dialog-head { padding: 18px 20px; border-bottom: 2px solid var(--navy); display: flex; flex-direction: column; gap: 4px; }
.dialog-title { margin: 0; font: 800 18px/1.3 var(--font-heading); color: var(--navy); }
.dialog-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.dialog-actions { padding: 14px 20px; border-top: 2px solid var(--navy); display: flex; gap: 8px; justify-content: flex-end; }

/* ── Kasir ─────────────────────────────────────────── */
.kasir { flex: 1; min-height: 0; display: flex; }
.kasir-menu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kasir-header-right { display: flex; gap: 10px; align-items: center; }
.kasir-search { width: 260px; }
.kasir-cats { display: flex; gap: 8px; padding: 16px 24px 0; }
.kasir-grid {
  flex: 1; overflow: auto; padding: 16px 24px 24px; display: grid; gap: 12px; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.kasir-grid .empty { grid-column: 1 / -1; padding: 24px 0; }
.menu-card {
  display: flex; flex-direction: column; gap: 8px; padding: 10px; text-align: left;
  background: #fff; border: 2px solid var(--line-soft); font-family: var(--font-body);
}
.menu-card:hover { border-color: var(--blue); }
.menu-card:active { background: var(--blue-tint); }
.menu-card-photo { height: 84px; }
.menu-card-name { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; }
.menu-card-foot { display: flex; justify-content: space-between; align-items: center; }
.menu-card-price { font-size: 13px; color: var(--blue); font-weight: 700; }
.menu-card-plus {
  width: 24px; height: 24px; background: var(--blue); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.order { width: 380px; flex: none; background: #fff; border-left: 2px solid var(--navy); display: flex; flex-direction: column; }
.order-head {
  padding: 20px 20px 14px; border-bottom: 2px solid var(--navy);
  display: flex; justify-content: space-between; align-items: baseline;
}
.order-title { margin: 0; font: 800 18px/1.3 var(--font-heading); color: var(--navy); }
.order-lines { flex: 1; overflow: auto; display: flex; flex-direction: column; }
.order-line { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--row-rule); }
.order-line-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 14px; line-height: 1.3; }
.stepper { display: flex; align-items: center; border: 2px solid var(--line); }
.stepper button { width: 26px; height: 26px; border: 0; background: #fff; font-weight: 700; padding: 0; }
.stepper button:hover { background: var(--blue-tint); }
.stepper span { width: 26px; text-align: center; font-size: 13px; font-weight: 700; }
.order-line-sub { width: 76px; text-align: right; font-size: 13px; font-weight: 700; }
.order-line-remove {
  width: 28px; height: 28px; padding: 0; border: 2px solid var(--danger-line);
  background: #fff; color: var(--danger); font-weight: 700;
}
.order-line-remove:hover { background: var(--danger-tint); }
.order-foot {
  border-top: 2px solid var(--navy); padding: 16px 20px 20px; background: var(--bg);
  display: flex; flex-direction: column; gap: 12px;
}
.order-subtotal { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.order-total { display: flex; justify-content: space-between; align-items: baseline; color: var(--navy); }
.order-total-label { font: 800 16px var(--font-heading); }
.order-total-value { font: 800 26px var(--font-heading); }
.quick-cash { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.quick-cash button { height: 32px; border: 2px solid var(--line); background: #fff; font: 600 12px var(--font-body); color: var(--blue); }
.quick-cash button:hover { border-color: var(--blue); }
.kembalian {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 12px; background: var(--blue-tint); color: var(--navy);
}
.kembalian-label { font-size: 13px; font-weight: 700; }
.kembalian-value { font: 800 20px var(--font-heading); }
.pay-btn { height: 52px; font-size: 16px; font-weight: 800; justify-content: space-between; }
.paid-msg { font-size: 13px; font-weight: 700; color: var(--success); }

/* ── Manajemen Menu ────────────────────────────────── */
.thumb { width: 40px; height: 40px; background: repeating-linear-gradient(45deg, var(--stripe-a) 0 6px, var(--stripe-b) 6px 12px); }
.switch {
  display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0;
  font: 700 12px var(--font-body); color: var(--faint);
}
.switch-track { width: 34px; height: 18px; padding: 2px; display: flex; justify-content: flex-start; background: var(--line); }
.switch-knob { width: 14px; height: 14px; background: #fff; }
.switch.is-on { color: var(--blue); }
.switch.is-on .switch-track { background: var(--blue); justify-content: flex-end; }
.row-actions { display: flex; gap: 6px; }

/* ── Manajemen Stok ────────────────────────────────── */
.stok-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 2px solid var(--navy); background: #fff; }
.stok-summary > div { padding: 14px 24px; display: flex; flex-direction: column; gap: 4px; }
.stok-summary > div + div { border-left: 2px solid var(--navy); }
.stok-summary-value { font: 800 24px/1.2 var(--font-heading); color: var(--navy); }
.stok-summary .is-warn .stat-label, .stok-summary .is-warn .stok-summary-value { color: var(--warn); }
.stok-summary .is-danger .stat-label, .stok-summary .is-danger .stok-summary-value { color: var(--danger); }
.stok-level { display: flex; align-items: center; gap: 10px; }
.stok-qty { width: 44px; flex: none; }
.stok-bar { flex: 1; height: 8px; background: var(--row-rule); display: flex; }
.stok-bar > span { height: 8px; }
.mode-picker { display: flex; gap: 6px; }
.mode-picker .chip { flex: 1; height: 34px; padding: 0; font-size: 12px; text-align: center; }

/* ── Laporan ───────────────────────────────────────── */
.filters {
  display: flex; gap: 16px; padding: 16px 24px; align-items: flex-end;
  border-bottom: 2px solid var(--navy); background: #fff;
}

/* ── Dashboard ─────────────────────────────────────── */
.dash-grid {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px;
  padding: 16px 24px 24px; flex: 1; min-height: 0;
}
.dash-card { display: flex; flex-direction: column; min-height: 0; }
.dash-card-head {
  padding: 14px 18px; border-bottom: 2px solid var(--navy);
  display: flex; justify-content: space-between; align-items: baseline;
}
.dash-card-title { margin: 0; font: 800 16px/1.3 var(--font-heading); color: var(--navy); }
.chart {
  flex: 1; min-height: 160px; display: flex; gap: 14px; padding: 20px 18px 12px;
  border-bottom: 1px solid var(--row-rule);
  background: repeating-linear-gradient(to top, #fff 0 59px, var(--stripe-a) 59px 60px);
}
.chart-col { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.chart-value { font-size: 11px; font-weight: 700; color: var(--blue); line-height: 1.3; }
.chart-bar-area { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.chart-bar { background: var(--blue-soft); }
.chart-bar.is-today { background: var(--blue); }
.chart-days { display: flex; gap: 14px; padding: 8px 18px 14px; }
.chart-days span { flex: 1; font-size: 12px; color: var(--muted); }
.dash-thead { padding: 10px 18px; gap: 10px; font-size: 11px; }
.dash-rows { overflow: auto; flex: 1; }
.dash-row { padding: 10px 18px; gap: 10px; font-size: 13px; }
.badge-xs { padding: 2px 8px; font-size: 11px; }

/* ── PHP: elemen aksi yang memakai <a> (tanpa JavaScript) ── */
a.menu-card { text-decoration: none; color: inherit; }
a.chip { text-decoration: none; }
a.nav-item { text-decoration: none; }
a.switch { text-decoration: none; }
a.btn { text-decoration: none; }
.stat-danger a { text-decoration: none; }
.dash-card-head a { text-decoration: none; }
.stepper a {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  text-decoration: none; color: var(--text); font-weight: 700; background: #fff;
}
.stepper a:hover { background: var(--blue-tint); }
.quick-cash a {
  height: 32px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--line); background: #fff; font: 600 12px var(--font-body);
  color: var(--blue); text-decoration: none;
}
.quick-cash a:hover { border-color: var(--blue); }
.order-line-remove { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.seg-opt { display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* ── Pemilih kasir & shift (tanpa login) ── */
.kasir-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 4px}
.kasir-bar .input{height:38px;padding:6px 10px}
.kasir-bar select.input{min-width:120px}
.kasir-bar-lbl{font-size:12px;font-weight:600;color:#64708a;text-transform:uppercase;letter-spacing:.04em}
.kasir-bar-add{margin-bottom:10px}
.kasir-bar-add .input{flex:1;min-width:180px}

/* ── Tab metode bayar ── */
.pay-tabs{display:flex;gap:6px;margin:12px 0 10px}
.pay-tab{flex:1;text-align:center;padding:9px 0;border-radius:10px;border:1px solid #d7deea;
  background:#f4f6fb;color:#3b455c;font-weight:700;text-decoration:none;font-size:14px}
.pay-tab.is-active{background:#25317a;border-color:#25317a;color:#fff}

/* ── Kotak QRIS ── */
.qris-box{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:16px;border:1px solid #d7deea;border-radius:12px;background:#fff;margin-bottom:10px}
.qris-img{width:190px;height:190px;border-radius:8px}
.qris-cap{text-align:center;font-size:13px;color:#3b455c;line-height:1.5}

/* ── Badge metode di laporan ── */
.badge-metode{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;
  font-size:11px;font-weight:700;background:#eef1f8;color:#3b455c;letter-spacing:.03em}

/* ── Filter dashboard (bulan / tanggal) ── */
.dash-filter{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.dash-filter form{display:flex;gap:6px;align-items:center}
.dash-filter .input{height:38px;padding:6px 10px}
.dash-filter-lbl{font-size:12px;font-weight:700;color:#64708a;text-transform:uppercase;letter-spacing:.04em}
.dash-filter-reset{font-size:12px;color:#25317a;font-weight:700;text-decoration:none}
.dash-filter-reset:hover{text-decoration:underline}

/* Grafik dengan banyak batang (mode bulan) */
.chart.compact{gap:2px}
.chart.compact .chart-value{display:none}
.chart.compact .chart-col{min-width:0;flex:1}
.chart-days.compact{gap:2px}
.chart-days.compact span{font-size:9px;min-width:0;flex:1;text-align:center}