@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --bg: #ffffff; --panel:#ffffff; --panel-2:#f5efe4; --border:#f9f8f6; --border-strong:#ddd0b8;
  --text:hsl(30, 16%, 12%); --text-dim:#6b6257; --text-faint:#9a9184;

  /* Palet hangat & lebih hidup (dari coklat kopi -> jingga keemasan) */
  --copper:#e6893b; --copper-2:#e6893b; --copper-3:#e6893b; --copper-soft:#fdecd8;
  --mint:#e6893b; --mint-2:#e6893b; --mint-dark:#fdeae7;
  --red:#e3423a; --red-2:#ff7a68; --red-dark:#fdeae7;
  --violet:#7c5cff; --violet-2:#a78bfa;
  --ink:#221f2b; --ink-2:#3a3550;

  /* Gradient siap pakai buat tombol, badge, & aksen kartu */
  --grad-primary: linear-gradient(135deg, #ff9d4d 0%, #ff9d4d 45%, #ff9d4d 100%);
  --grad-primary-hover: linear-gradient(135deg, #ff9d4d 0%, #ff9d4d 45%, #ff9d4d 100%);
  --grad-mint: linear-gradient(135deg, #ff9d4d 0%, #ff9d4d 100%);
  --grad-mint-hover: linear-gradient(135deg, #ff9d4d 0%, #ff9d4d 100%);
  --grad-red: linear-gradient(135deg, #ff8a7a 0%, #d93f34 100%);
  --grad-ink: linear-gradient(135deg, #3a3550 0%, #1c1a24 100%);
  --grad-violet: linear-gradient(135deg, #1c1a24 0%, #1c1a24 100%);
  --grad-sheen: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));

  --r-sm:10px; --r-md:14px; --r-lg:20px;
  --shadow-xs:0 1px 3px rgba(36,31,26,.06); 
  --shadow-sm:0 3px 10px -4px rgba(36,31,26,.10);
  --shadow-md:0 12px 30px -12px rgba(36,31,26,.20);
  --shadow-glow-copper:0 8px 18px -7px rgba(217,114,47,.5);
  --shadow-glow-mint:0 8px 18px -7px rgba(15,161,114,.45);
  --shadow-glow-red:0 8px 18px -7px rgba(217,63,52,.4);
  --focus-ring:0 0 0 3px rgba(217,114,47,.25);
}
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; max-width:100%; overflow-x:hidden;
  min-height:100vh;
  background-color:var(--bg);
}
body{
  font-family:'Manrope',system-ui,sans-serif; color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}
a{ color:inherit; }
::selection{ background:var(--copper-2); color:#fff; }

/* Scrollbar tipis bertema kopi, thumb-nya gradasi biar hidup */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--copper-2),var(--copper-3)); border-radius:99px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,var(--copper),var(--copper-3)); }

/* Fokus keyboard selalu kelihatan jelas, tanpa outline norak di klik mouse */
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--copper-2); outline-offset:2px; border-radius:4px; }
.f-input:focus-visible, .f-input:focus{ outline:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------- Auth (login) ---------- */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:13px;
  position:relative; overflow:hidden;
  background: var(--bg);
}
.auth-card{
  position:relative; width:100%; max-width:360px; background:#ffffff;
  border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, var(--shadow-md), 0 0 0 1px rgba(217,114,47,.04);
  padding:18px 16px 16px;
}
.auth-mark{
  width:44px; height:44px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center;
  color:#fff; background:var(--grad-primary); border-radius:14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), var(--shadow-glow-copper);
}
.auth-mark svg{ width:60%; height:60%; overflow:visible; }
.auth-mark .steam{ transform-origin:center bottom; animation:steam 4.5s ease-in-out infinite; opacity:.85; }
.auth-mark .steam.s2{ animation-delay:.9s; }
@keyframes steam{
  0%{ transform:translateY(0) scaleY(1); opacity:0; }
  20%{ opacity:.8; }
  100%{ transform:translateY(-7px) scaleY(1.15); opacity:0; }
}
.auth-brand{ font-family:'Sora',sans-serif; font-weight:800; font-size:21px; text-align:center; margin-bottom:2px; letter-spacing:-.3px; }
.auth-sub{ text-align:center; font-size:10.5px; font-weight:800; background:var(--grad-primary); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:2px; text-transform:uppercase; margin-bottom:12px; min-height:11px; }

/* ---------- App shell ---------- */
.app{ display:flex; min-height:100vh; }
.side{
  width:212px; flex-shrink:0; background:#ffffff;
  border-right:1px solid var(--border); padding:9px 7px 7px; display:flex; flex-direction:column;
  box-shadow: 1px 0 0 rgba(217,114,47,.04);
}

.brand-row{ display:flex; align-items:center; gap:7px; padding:0 6px; margin-bottom:9px; }
.brand-icon{
  flex-shrink:0; width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  color:#fff; background:var(--grad-primary); border-radius:9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), var(--shadow-glow-copper);
}
.brand-icon svg{ width:17px; height:17px; }
.brand{ font-family:'Sora',sans-serif; font-weight:800; font-size:16px; letter-spacing:-0.3px; line-height:1.2; }
.brand-sub{
  font-size:9px; font-weight:800; background:var(--grad-primary); -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:1.4px; text-transform:uppercase; margin-top:1px;
}

.nav{ display:flex; flex-direction:column; gap:1px; }
.nav-btn{
  position:relative; display:flex; align-items:center; gap:7px; text-decoration:none; color:var(--text-dim);
  font-size:13px; font-weight:700; padding:5px 7px; border-radius:var(--r-sm);
  transition:background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.nav-btn:hover{ background:var(--copper-soft); color:var(--copper-3); transform:translateX(2px); }
.nav-btn.active{
  background:var(--grad-primary); color:#fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), var(--shadow-glow-copper);
}
.nav-icon{ display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; flex-shrink:0; color:var(--copper); }
.nav-icon svg{ width:100%; height:100%; display:block; }
.nav-btn.active .nav-icon{ color:#fff; }
.nav-label-short{ display:none; }
.nav-badge{
  margin-left:auto; flex-shrink:0; font-size:10px; font-weight:800; line-height:1;
  background:var(--grad-red); color:#fff; padding:2.5px 6px; border-radius:99px; min-width:9px; text-align:center;
  box-shadow:var(--shadow-glow-red);
}
.nav-btn.active .nav-badge{ background:#fff; color:var(--copper-3); box-shadow:none; }

.side-foot{ margin-top:auto; padding-top:6px; border-top:1px solid var(--border); }
.user-box{ padding:0 4px; }
.user-name{ font-weight:800; color:var(--text); font-size:12.5px; }
.user-role{ font-size:10.5px; color:var(--text-faint); margin-top:1px; }
.side-logout{
  margin-top:5px; display:flex; align-items:center; gap:5px; text-decoration:none; padding:5px 5px;
  font-size:12px; font-weight:700; color:var(--text-faint); border-radius:var(--r-sm); transition:background-color .15s ease, color .15s ease;
}
.side-logout:hover{ background:var(--red-dark); color:var(--red); }

.main{ flex:1; min-width:0; }
.topbar{ padding:7px 11px 5px; background:transparent; border-bottom:none; display:flex; align-items:center; justify-content:space-between; gap:9px; flex-wrap:wrap; }
.title{ font-family:'Sora',sans-serif; font-size:17px; font-weight:700; letter-spacing:-0.5px; }
.topbar-actions{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.stat{
  font-size:12px; font-weight:700; color:var(--text-dim);
  background:linear-gradient(180deg,#ffffff,var(--panel-2)); border:1px solid var(--border-strong);
  padding:4px 8px; border-radius:999px; white-space:nowrap; box-shadow:var(--shadow-xs);
}
.stat b{ background:var(--grad-mint); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:13px; }
.icon-btn{
  display:flex; align-items:center; justify-content:center; width:28px; height:28px; flex-shrink:0;
  border-radius:999px; color:var(--copper); border:1px solid var(--border-strong);
  background:linear-gradient(180deg,#ffffff,var(--panel-2));
  text-decoration:none; position:relative; transform:translateY(0);
  box-shadow:inset 0 1px 0 #fff, 0 2px 0 #c9b48c, 0 5px 12px -5px rgba(217,114,47,.35);
  transition:color .15s ease, border-color .15s ease, background .2s ease, transform .08s ease, box-shadow .15s ease;
}
.icon-btn svg{ width:14px; height:14px; }
.icon-btn:hover{
  color:#fff; border-color:transparent; background:var(--grad-primary); transform:translateY(-1.5px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 #7a3e1d, var(--shadow-glow-copper);
}
.icon-btn:active{ transform:translateY(2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0.5px 0 #7a3e1d, 0 2px 6px -2px rgba(217,114,47,.3); }

.body{ padding:7px 11px 16px; max-width:1200px; }

/* ---------- Flash messages ---------- */
.flash{
  padding:6px 9px; border-radius:var(--r-sm); font-size:13px; font-weight:700; margin-bottom:6px;
  border:1px solid transparent; border-left-width:4px; box-shadow:var(--shadow-xs);
}
.flash-error{ background:var(--red-dark); color:var(--red); border-color:var(--red-2); }
.flash-success{ background:var(--mint-dark); color:var(--mint); border-color:var(--mint-2); }

/* ---------- Form ---------- */
label.f-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.9px; color:var(--text-faint); margin-bottom:3px; display:block; font-weight:800; }
.f-input, select.f-input, textarea.f-input{
  width:100%; background:var(--panel); border:1.5px solid var(--border-strong); color:var(--text);
  padding:5px 7px; border-radius:var(--r-sm); font-family:'Manrope',sans-serif; font-size:13.5px; font-weight:600;
  outline:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.f-input:focus{ border-color:var(--copper-2); box-shadow:var(--focus-ring); }
.f-input::placeholder{ color:var(--text-faint); font-weight:500; }
.f-row{ display:flex; gap:5px; flex-wrap:wrap; align-items:end; }
.f-field{ flex:1; min-width:140px; margin-bottom:3px; }
.f-check{ display:flex; align-items:center; gap:5px; font-size:13px; font-weight:600; }
.f-check input[type="checkbox"]{ accent-color:var(--copper-2); width:14px; height:14px; }

/* ---------- Buttons (efek 3D + gradasi hangat, ukuran ringkas) ---------- */
.btn{
  font-family:'Manrope',sans-serif; font-size:12.5px; font-weight:800; border-radius:var(--r-sm); padding:5px 9px;
  cursor:pointer; border:1px solid transparent; display:inline-block; text-decoration:none;
  position:relative; transform:translateY(0); letter-spacing:.1px;
  transition:background .2s ease, border-color .15s ease, color .15s ease, opacity .15s ease, transform .08s ease, box-shadow .15s ease;
}
.btn-primary{ background:var(--grad-primary); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 2px 0 #7a3e1d, var(--shadow-glow-copper); }
.btn-primary:hover{ background:var(--grad-primary-hover); transform:translateY(-1.5px); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 #7a3e1d, 0 11px 22px -8px rgba(217,114,47,.6); }
.btn-primary:active{ transform:translateY(1.5px); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 0 #7a3e1d, 0 3px 8px -3px rgba(217,114,47,.4); }

.btn-ghost{ background:linear-gradient(180deg,#ffffff,var(--panel-2)); color:var(--copper-3); border-color:var(--border-strong); box-shadow:inset 0 1px 0 #fff, 0 2px 0 #d9cbaa, var(--shadow-sm); }
.btn-ghost:hover{ color:#fff; background:var(--grad-primary); border-color:transparent; transform:translateY(-1.5px); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 #7a3e1d, var(--shadow-glow-copper); }
.btn-ghost:active{ transform:translateY(1.5px); box-shadow:inset 0 1px 0 #fff, 0 1px 0 #d9cbaa, 0 2px 4px -2px rgba(36,31,26,.2); }

.btn-danger{ background:linear-gradient(180deg,#ffffff,#fdf0ee); color:var(--red); border-color:#f6d2ca; box-shadow:inset 0 1px 0 #fff, 0 2px 0 #e8b8ac, var(--shadow-sm); }
.btn-danger:hover{ background:var(--grad-red); color:#fff; border-color:transparent; transform:translateY(-1.5px); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 #a32a22, var(--shadow-glow-red); }
.btn-danger:active{ transform:translateY(1.5px); box-shadow:inset 0 1px 0 #fff, 0 1px 0 #e8b8ac, 0 2px 4px -2px rgba(36,31,26,.2); }

.btn-mint{ background:var(--grad-mint); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 2px 0 #fff, var(--shadow-glow-mint); }
.btn-mint:hover{ background:var(--grad-mint-hover); transform:translateY(-1.5px); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 #fff, 0 11px 22px -8px rgba(245, 245, 245, 0.55); }
.btn-mint:active{ transform:translateY(1.5px); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 0 #fff, 0 3px 8px -3px rgba(255, 255, 255, 0.4); }

.btn-sm{ padding:4px 7px; font-size:11px; border-radius:8px; }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

/* ---------- Surfaces ---------- */
.card{
  background:#ffffff; border:1px solid var(--border); border-radius:var(--r-md);
  padding:8px 9px; box-shadow:var(--shadow-sm); margin-bottom:6px;
  position:relative; overflow:hidden;
}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad-primary); opacity:.85;
}
.section-title{ font-family:'Sora',sans-serif; font-size:14px; font-weight:700; letter-spacing:-0.3px; margin:0 0 6px; }

table.tbl{ width:100%; border-collapse:collapse; font-size:13px; }
table.tbl th{ text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:var(--text-faint); font-weight:800; padding:0 6px 5px; border-bottom:1px solid var(--border); }
table.tbl td{ padding:5px 6px; border-bottom:1px solid var(--border); vertical-align:middle; font-weight:600; }
table.tbl tr:last-child td{ border-bottom:none; }
table.tbl tbody tr:hover td, table.tbl tr:hover td{ background:var(--copper-soft); }
.mono{ font-variant-numeric:tabular-nums; font-weight:700; }

.badge{ font-size:10px; padding:3.5px 9px; border-radius:999px; font-weight:800; letter-spacing:.4px; display:inline-block; text-transform:uppercase; }
.badge-low{ background:var(--grad-red); color:#fff; box-shadow:var(--shadow-glow-red); }
.badge-ok{ background:linear-gradient(180deg,#ffffff,var(--panel-2)); color:var(--text-dim); border:1px solid var(--border-strong); }
.badge-pending{ background:var(--grad-primary); color:#fff; box-shadow:var(--shadow-glow-copper); }
.badge-paid{ background:var(--grad-mint); color:#fff; box-shadow:var(--shadow-glow-mint); }

/* ---------- Menu grid ---------- */
.menu-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:6px; align-items:stretch; }
.menu-card{
  background:#ffffff; border:1px solid var(--border); border-radius:var(--r-md);
  padding:7px 7px; box-shadow:var(--shadow-xs); display:flex; flex-direction:column; height:100%;
  position:relative; overflow:hidden; transition:transform .18s ease, box-shadow .18s ease;
}
.menu-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad-primary); opacity:.8; }
.menu-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.menu-card.inactive{ opacity:.5; }
.menu-card.inactive:hover{ transform:none; box-shadow:var(--shadow-xs); }
.menu-cat{ font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:1.1px; color:var(--copper-2); }
.menu-name{ font-family:'Sora',sans-serif; font-size:14px; font-weight:700; letter-spacing:-0.3px; margin:2px 0 3px; }
.menu-price{ font-size:13px; font-weight:800; background:var(--grad-primary); -webkit-background-clip:text; background-clip:text; color:transparent; }
.menu-actions{ display:grid; grid-template-columns:repeat(2,1fr); gap:4px; margin-top:auto; padding-top:5px; }
.menu-actions form{ display:contents; }
.menu-actions .btn{ width:100%; text-align:center; padding:4px 4px; font-size:10px; }
.recipe-list{ font-size:11px; color:var(--text-faint); margin-top:3px; line-height:1.35; }

.btn-toggle-on{ background:var(--grad-mint); color:#fff; border-color:transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 2px 0 #fff, var(--shadow-glow-mint); }
.btn-toggle-on:hover{ background:var(--grad-mint-hover); transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 #fff, 0 10px 20px -8px rgba(15,161,114,.55); }
.btn-toggle-on:active{ transform:translateY(1.5px); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 0 #fff, 0 2px 4px -2px rgba(15,161,114,.35); }
.btn-toggle-off{ background:linear-gradient(180deg,#ffffff,var(--panel-2)); color:var(--text-faint); border-color:var(--border-strong); box-shadow:inset 0 1px 0 #fff, 0 2px 0 #d9cbaa, var(--shadow-xs); }
.btn-toggle-off:hover{ color:var(--red); border-color:#f6d2ca; background:var(--red-dark); transform:translateY(-1px); box-shadow:inset 0 1px 0 #fff, 0 3px 0 #e8b8ac, var(--shadow-sm); }
.btn-toggle-off:active{ transform:translateY(1.5px); box-shadow:inset 0 1px 0 #fff, 0 1px 0 #d9cbaa, 0 2px 4px -2px rgba(36,31,26,.16); }

/* ---------- POS ---------- */
.pos-grid{ display:grid; grid-template-columns:1fr 300px; gap:7px; align-items:start; }
.pos-item{
  background:#ffffff; border:1px solid var(--border); border-radius:var(--r-md);
  padding:6px 8px; box-shadow:var(--shadow-xs); margin-bottom:4px; display:flex; align-items:center;
  justify-content:space-between; gap:6px; transition:transform .15s ease, box-shadow .15s ease;
}
.pos-item:hover{ transform:translateX(2px); box-shadow:var(--shadow-sm); }
.pos-item-name{ font-size:13.5px; font-weight:800; letter-spacing:-0.2px; display:inline; }
.pos-item-cat{ font-size:10.5px; color:var(--text-faint); }
.pos-item-price{ font-size:12.5px; font-weight:800; color:var(--copper-2); margin-top:0; margin-left:6px; display:inline; }
.cart-line{ display:flex; justify-content:space-between; align-items:center; font-size:12.5px; font-weight:700; padding:4px 0; border-bottom:1px solid var(--border); gap:6px; }
.cart-total{ display:flex; justify-content:space-between; font-size:15px; font-weight:800; padding-top:6px; }
.qty-inline{ width:52px; }

.empty{ color:var(--text-faint); font-size:13px; padding:9px 0; text-align:center; }

@media print{ .no-print{ display:none !important; } }

/* =====================================================================
   RESPONSIVE / MOBILE
   ===================================================================== */

/* Tablet ke bawah: sidebar berubah jadi bottom navigation bar (nempel di
   bawah layar, ala aplikasi mobile) — brand & profil disembunyikan karena
   sudah terwakili topbar & tidak muat di ruang sempit. */
@media (max-width: 880px){
  .app{ flex-direction:column; }
  .side{
    position:fixed; left:0; right:0; bottom:0; top:auto; width:100%;
    flex-direction:row; align-items:stretch; padding:0; gap:0;
    border-right:none; border-top:1px solid var(--border); border-bottom:none;
    background:#ffffff;
    box-shadow:0 -8px 22px -10px rgba(217,114,47,.18);
    z-index:80;
  }
  .brand-row, .side-foot{ display:none; }
  .nav{ flex-direction:row; width:100%; gap:0; margin-left:0; }
  .nav-btn{
    flex:1 1 0; min-width:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:2px;
    padding:5px 1px 5px; border-radius:0; font-size:9px; font-weight:800;
    text-align:center; color:var(--text-faint);
    position:relative; overflow:hidden;
  }
  .nav-label-full{ display:none; }
  .nav-label-short{
    display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; letter-spacing:-0.3px;
  }
  .nav-btn:hover{ background:transparent; transform:none; }
  .nav-btn .nav-icon{ width:19px; height:19px; }
  .nav-btn.active{ background:transparent; color:var(--copper-3); box-shadow:none; }
  .nav-btn.active .nav-icon{ color:var(--copper-2); }
  .nav-btn.active::before{
    content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:26px; height:3px; border-radius:0 0 5px 5px; background:var(--grad-primary);
    box-shadow:0 2px 8px -1px rgba(217,114,47,.6);
  }
  .nav-badge{
    margin-left:0; position:absolute; top:3px; right:calc(50% - 19px);
    font-size:8.5px; padding:1px 3px;
  }
  .nav-btn.active .nav-badge{ background:var(--grad-red); color:#fff; }
  /* Kasih jarak bawah supaya konten terakhir tidak ketutup bottom nav */
  .body{ padding-bottom:46px; }
  .pos-grid{ grid-template-columns:1fr; }
}

/* HP: penyesuaian lebih agresif supaya nyaman disentuh & tidak sempit */
@media (max-width: 600px){
  .body{ padding:6px 7px 49px; }
  .topbar{ padding:6px 9px 5px; gap:5px; }
  .title{ font-size:16px; }
  .stat{ display:none; }
  .icon-btn{ width:27px; height:27px; }

  /* Cegah browser mobile auto-zoom saat fokus ke input (butuh font-size >=16px) */
  .f-input, select.f-input, textarea.f-input{ font-size:16px; padding:5px 7px; }
  .f-row{ gap:5px; }
  .f-field{ min-width:0; flex:1 1 100%; margin-bottom:3px; }
  .f-row .f-field[style]{ max-width:100% !important; }

  /* Tombol tetap enak disentuh tapi nggak makan banyak ruang */
  .btn{ padding:5px 9px; }
  .btn-sm{ padding:5px 7px; }

  .card{ padding:7px 7px; margin-bottom:5px; border-radius:var(--r-sm); }
  .section-title{ font-size:13px; margin-bottom:4px; }

  /* Tabel: dibiarkan scroll horizontal daripada gepeng/hancur */
  table.tbl{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }
  table.tbl th, table.tbl td{ padding:5px 5px; }

  /* Kartu POS & item menu susun rapi di layar sempit */
  .pos-item{ flex-wrap:wrap; padding:5px 7px; margin-bottom:3px; }
  .pos-item form{ width:100%; }
  .pos-item form .f-input.qty-inline{ flex:0 0 64px; width:64px; }
  .pos-item form button{ flex:1 1 auto; }

  /* Cart sticky bikin ribet di HP (ruang kecil) -> biarkan mengalir biasa */
  .pos-grid > .card[style*="sticky"]{ position:static !important; top:auto !important; }

  .menu-grid{ grid-template-columns:repeat(auto-fill,minmax(138px,1fr)); gap:5px; }
  .menu-card{ padding:5px 6px; }

  .kpi-grid{ grid-template-columns:repeat(2,1fr); gap:5px; }
  .kpi-card{ padding:6px; }
  .kpi-value{ font-size:16px; }

  .qr-print-grid{ grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:5px; }

  .auth-card{ padding:15px 11px 12px; }
}

@media (max-width: 380px){
  .kpi-grid{ grid-template-columns:1fr 1fr; }
  .nav-btn{ font-size:8.3px; padding:4px 1px 5px; }
  .nav-btn .nav-icon{ width:18px; height:18px; }
}