/* FASTFOOD POS — shared look & feel. Brand red + warm yellow accent, dark sidebar, touch-friendly controls. */
:root { --brand:#d71920; --brand-dark:#a91117; --brand-soft:#fde8e9; --accent:#ffc72c; --ink:#1f2328; --line:#e4e4e7; }
html { -webkit-text-size-adjust:100%; }
body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color:var(--ink); }

/* Form controls inside admin pages */
main input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]),
main select, main textarea {
  border:1px solid #d4d4d8; border-radius:.6rem; background:#fff; min-height:2.5rem; transition:border-color .15s, box-shadow .15s;
}
main input:focus, main select:focus, main textarea:focus, .pos-input:focus {
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(215,25,32,.15);
}
main input[readonly] { background:#f4f4f5; }
main input[type=checkbox], main input[type=radio] { accent-color:var(--brand); width:1.05rem; height:1.05rem; }
main label { color:#52525b; }

/* Buttons */
main button, main a.bg-brand, main a.bg-slate-800, a.btn, button.btn {
  border-radius:.6rem; font-weight:600; transition:filter .15s, transform .05s, box-shadow .15s; cursor:pointer;
}
main button:not(:disabled):active, a.btn:active { transform:translateY(1px); }
main button:disabled, button.btn:disabled { opacity:.5; cursor:not-allowed; }
main .bg-brand:hover, a.bg-brand:hover { filter:brightness(.92); }
main .bg-slate-800:hover { filter:brightness(1.25); }

/* Tables */
main table { border-collapse:separate; border-spacing:0; width:100%; }
main thead th { font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:#71717a; background:#fafafa; border-bottom:1px solid var(--line); white-space:nowrap; position:sticky; top:0; }
main td, main th { padding:.65rem .8rem; }
main tbody tr { transition:background .1s; }
main tbody tr:hover { background:#fafafa; }
main tbody tr + tr td { border-top:1px solid #f1f1f3; }
main td.p-2, main th.p-2 { padding:.65rem .8rem; }
main .overflow-x-auto { border:1px solid var(--line); }

/* Cards */
main .shadow { box-shadow:0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.05); }
main .rounded-xl.shadow { border:1px solid #efeff1; }
main a.text-blue-600, main a.underline { color:var(--brand); }
main a.text-blue-600:hover { text-decoration:underline; }
main h1 { letter-spacing:-.01em; }

/* Sidebar */
.nav-link { display:flex; align-items:center; gap:.65rem; padding:.55rem .8rem; border-radius:.6rem; font-size:.9rem; color:#d4d4d8; transition:background .12s, color .12s; }
.nav-link:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav-link.active { background:var(--brand); color:#fff; font-weight:600; box-shadow:0 4px 14px rgba(215,25,32,.35); }
.nav-ico { width:1.4rem; text-align:center; }
.nav-group { font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:#71717a; padding:.9rem .8rem .3rem; }
#side nav::-webkit-scrollbar, .thin-scroll::-webkit-scrollbar { width:6px; height:6px; }
#side nav::-webkit-scrollbar-thumb, .thin-scroll::-webkit-scrollbar-thumb { background:#52525b55; border-radius:6px; }

/* Flash */
.flash { display:flex; gap:.6rem; align-items:flex-start; border-radius:.75rem; padding:.7rem 1rem; font-size:.9rem; margin-bottom:1rem; border:1px solid transparent; }
.flash-success { background:#ecfdf3; color:#067647; border-color:#abefc6; }
.flash-error { background:#fef3f2; color:#b42318; border-color:#fecdca; }

@media (max-width: 640px) { main { padding:.75rem !important; } main td, main th { padding:.5rem .55rem; } }
@media print { #side, #topbar { display:none !important; } }

/* Login page inputs (outside <main>) */
form input:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(215,25,32,.15); }

/* Sidebar HP: h-screen (=100vh) lebih tinggi dari area yang terlihat di Chrome/Safari mobile (bilah alamat), sehingga
   "Ganti password" & "Keluar" di dasar sidebar tertutup. dvh = tinggi layar yang benar-benar terlihat. */
#side { height:100vh; height:100dvh; max-height:100dvh; }
#side > nav { overscroll-behavior:contain; -webkit-overflow-scrolling:touch; min-height:0; }
#side > div:last-child { flex-shrink:0; padding-bottom:calc(.75rem + env(safe-area-inset-bottom, 0px)); }