:root {
  --primary: #cb7c05;      /* oranye-emas khas logo Wedang Juara */
  --primary-dark: #9c5e03;
  --primary-light: #fbeed4;
  --accent: #4c7a51;       /* hijau daun (aksen dari daun di logo) */
  --danger: #c0392b;
  --warning: #d9a441;
  --success: #4c7a51;
  --sidebar-w: 250px;
  --text-dark: #241c14;
  --bg: #fbf8f3;
}

* { box-sizing: border-box; }

body {
  font-family: 'Poppins', 'Segoe UI', Tahoma, sans-serif;
  background: var(--bg);
  color: var(--text-dark);
  margin: 0;
}

a { text-decoration: none; }

/* ===== LAYOUT ===== */
.wrapper { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #221a10 0%, #14100a 100%);
  color: #f3e9dc;
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  overflow-y: auto;
  transition: left .25s ease;
  z-index: 1000;
}
.sidebar .brand {
  padding: 22px 20px;
  font-size: 19px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; gap: 10px;
}
.sidebar .brand span.sub { display:block; font-size:11px; font-weight:400; opacity:.65; }
.sidebar nav { padding: 14px 0; }
.sidebar .nav-section-title {
  padding: 14px 20px 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .6px; opacity: .5; font-weight:600;
}
.sidebar a.nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 20px; color: #e9dfd2; font-size: 14.5px;
  border-left: 3px solid transparent;
}
.sidebar a.nav-link:hover, .sidebar a.nav-link.active {
  background: rgba(255,255,255,.08);
  border-left-color: var(--warning);
  color: #fff;
}
.sidebar a.nav-link .icon { width: 20px; text-align:center; }

.content {
  margin-left: var(--sidebar-w);
  flex-grow: 1;
  min-height: 100vh;
  display: flex; flex-direction: column;
}

.topbar {
  background: #fff;
  padding: 14px 26px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
  position: sticky; top: 0; z-index: 900;
}
.topbar h1 { font-size: 18px; margin: 0; font-weight: 600; }
.topbar .user-box { display:flex; align-items:center; gap:12px; }
.topbar .user-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--primary); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:600;
}
.role-badge {
  font-size: 11px; padding: 2px 10px; border-radius: 20px; font-weight:600;
  text-transform: capitalize;
}
.role-badge.owner { background:#fdecec; color:#c0392b; }
.role-badge.manager { background:#eaf2fb; color:#2563eb; }
.role-badge.kasir { background:#eaf7ec; color:#2e7d32; }

.page-body { padding: 24px; flex-grow: 1; }

.menu-toggle { display:none; font-size:22px; background:none;border:none;cursor:pointer; }

@media (max-width: 900px) {
  .sidebar { left: -260px; }
  .sidebar.open { left: 0; }
  .content { margin-left: 0; }
  .menu-toggle { display:block; }
}

/* ===== CARDS ===== */
.card-box {
  background: #fff; border-radius: 14px; padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.stat-card {
  border-radius: 16px; padding: 20px; color:#fff; position:relative; overflow:hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.stat-card .stat-icon {
  position:absolute; right:14px; top:14px; font-size:38px; opacity:.35;
}
.stat-card .stat-label { font-size:13px; opacity:.9; margin-bottom:6px; }
.stat-card .stat-value { font-size:24px; font-weight:700; }
.stat-card .stat-sub { font-size:12px; opacity:.85; margin-top:6px; }

.bg-brown { background: linear-gradient(135deg,#cb7c05,#9c5e03); }
.bg-green { background: linear-gradient(135deg,#4c7a51,#365c3a); }
.bg-blue  { background: linear-gradient(135deg,#3d7ab5,#2a5d8f); }
.bg-red   { background: linear-gradient(135deg,#c0392b,#96271c); }

/* ===== TABLE ===== */
.table-custom { width:100%; border-collapse: collapse; }
.table-custom th {
  background: var(--primary-light); text-align:left; padding:11px 14px;
  font-size:12.5px; text-transform:uppercase; letter-spacing:.4px; color: var(--primary-dark);
}
.table-custom td { padding: 11px 14px; border-bottom: 1px solid #f0ebe3; font-size: 14px; }
.table-custom tr:hover td { background: #fbf7f1; }

.badge { padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:600; }
.badge-success { background:#eaf7ec; color:#2e7d32; }
.badge-danger { background:#fdecec; color:#c0392b; }
.badge-warning { background:#fdf3e0; color:#a5720b; }
.badge-info { background:#eaf2fb; color:#2563eb; }

/* ===== BUTTON / FORM ===== */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding: 9px 18px; border-radius: 8px; border:none; cursor:pointer;
  font-size: 14px; font-weight:600; text-decoration:none;
}
.btn-primary { background: var(--primary); color:#fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-success { background: var(--accent); color:#fff; }
.btn-danger { background: var(--danger); color:#fff; }
.btn-secondary { background:#eee; color:#333; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-outline { background:transparent; border:1px solid var(--primary); color:var(--primary); }

.form-group { margin-bottom: 16px; }
.form-group label { display:block; margin-bottom:6px; font-size:13.5px; font-weight:600; color:#5a4a3a; }
.form-control {
  width:100%; padding: 10px 12px; border:1px solid #e2d9cb; border-radius:8px;
  font-size: 14px; background:#fff;
}
.form-control:focus { outline:none; border-color: var(--primary); }
.form-row { display:flex; gap:16px; flex-wrap:wrap; }
.form-row .form-group { flex:1; min-width:200px; }

.alert { padding: 13px 18px; border-radius:10px; margin-bottom:18px; font-size:14px; }
.alert-success { background:#eaf7ec; color:#2e7d32; border:1px solid #cdeacf; }
.alert-danger { background:#fdecec; color:#c0392b; border:1px solid #f6cfc9; }
.alert-warning { background:#fdf3e0; color:#a5720b; border:1px solid #f3e0b4; }

.card-title-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.card-title-row h2 { font-size:17px; margin:0; }

.pos-grid { display:grid; grid-template-columns: 2fr 1fr; gap:20px; }
@media (max-width: 1000px) { .pos-grid { grid-template-columns: 1fr; } }

.product-tile {
  background:#fff; border-radius:12px; padding:14px; cursor:pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.05); transition: transform .12s;
  border: 2px solid transparent;
}
.product-tile:hover { transform: translateY(-3px); border-color: var(--primary); }
.product-tile .p-name { font-weight:600; font-size:13.5px; margin: 8px 0 4px; }
.product-tile .p-price { color: var(--primary); font-weight:700; font-size:14px; }
.product-tile .p-stock { font-size:11.5px; color:#888; }

.cart-item { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid #f0ebe3; }
.qty-box { display:flex; align-items:center; gap:6px; }
.qty-box button { width:26px; height:26px; border-radius:6px; border:1px solid #ddd; background:#fff; cursor:pointer; }

.login-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #14100a, #cb7c05);
}
.login-box {
  background:#fff; border-radius: 18px; padding: 40px; width: 380px; box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.login-box h1 { font-size:22px; text-align:center; margin-bottom:4px; }
.login-box p.sub { text-align:center; color:#888; margin-bottom:24px; font-size:13.5px; }

.badge-role-select { display:flex; gap:10px; margin-bottom:20px; }
.badge-role-select div { flex:1; text-align:center; padding:8px; border-radius:8px; background:#f7ecdf; font-size:11.5px; color:#8a4d15; font-weight:600; }

table.tbl-plain td, table.tbl-plain th { padding: 6px 10px; }
.text-right { text-align:right; }
.text-center { text-align:center; }
.text-muted { color:#888; }
.w-full { width:100%; }
.mb-0{margin-bottom:0}.mb-10{margin-bottom:10px}.mb-20{margin-bottom:20px}
.d-flex{display:flex}.align-center{align-items:center}.justify-between{justify-content:space-between}.gap-10{gap:10px}

/* ===== MODE CETAK (window.print) ===== */
.print-header { display: none; }
@media print {
  .sidebar, .topbar, .menu-toggle, .no-print { display: none !important; }
  .content { margin-left: 0 !important; }
  .page-body { padding: 0 !important; }
  body { background: #fff !important; }
  .card-box { box-shadow: none !important; border: 1px solid #e2d9cb !important; }
  .stat-card { box-shadow: none !important; border: 1px solid rgba(255,255,255,.4); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  a[href]:after { content: none !important; }

  .print-header {
    display: flex; align-items: center; gap: 14px;
    padding-bottom: 14px; margin-bottom: 20px; border-bottom: 2px solid #cb7c05;
  }
  .print-header img { width: 55px; height: auto; }
  .print-header .print-title { font-size: 18px; font-weight: 700; margin: 0; }
  .print-header .print-sub { font-size: 12px; color: #666; margin: 2px 0 0; }
}