/* ═══════════════════════════════════════════════════════════════════
   POS.my — Design System
   Nada: profesional, terkawal, jelas. Rujukan: Notion, Google Workspace,
   Linear. Warna digunakan untuk MAKNA, bukan hiasan.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* Neutral — kelabu sejuk sedikit, mengelak "kelabu kotor" */
  --bg:#FFFFFF;
  --bg-subtle:#FAFAFA;
  --bg-sunken:#F4F4F5;
  --bg-raised:#FFFFFF;
  --bg-hover:#F4F4F5;
  --bg-active:#EBEBED;

  --text:#18181B;
  --text-secondary:#52525B;
  --text-muted:#71717A;
  --text-subtle:#A1A1AA;
  --text-inverse:#FFFFFF;

  --border:#E4E4E7;
  --border-subtle:#F0F0F1;
  --border-strong:#D4D4D8;

  /* Aksen — biru yang tenang, bukan biru tepu SaaS */
  --accent:#2563EB;
  --accent-hover:#1D4ED8;
  --accent-soft:#EFF4FF;
  --accent-border:#BFD4FE;
  --accent-text:#1E40AF;

  /* Semantik */
  --success:#15803D;  --success-soft:#F0FDF4;  --success-border:#BBF7D0;
  --warning:#B45309;  --warning-soft:#FFFBEB;  --warning-border:#FDE68A;
  --danger:#B91C1C;   --danger-soft:#FEF2F2;   --danger-border:#FECACA;
  --info:#6D28D9;     --info-soft:#F5F3FF;     --info-border:#DDD6FE;

  --radius-xs:4px; --radius-sm:6px; --radius:8px; --radius-md:10px;
  --radius-lg:12px; --radius-xl:16px; --radius-2xl:20px;

  --shadow-xs:0 1px 2px rgba(24,24,27,.05);
  --shadow-sm:0 1px 3px rgba(24,24,27,.08), 0 1px 2px rgba(24,24,27,.04);
  --shadow:0 4px 12px -2px rgba(24,24,27,.08), 0 2px 6px -2px rgba(24,24,27,.05);
  --shadow-lg:0 12px 32px -8px rgba(24,24,27,.14), 0 4px 12px -4px rgba(24,24,27,.08);
  --shadow-xl:0 24px 56px -12px rgba(24,24,27,.2);

  --ease:cubic-bezier(.2,0,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:160ms;
}

[data-theme="dark"]{
  --bg:#0F0F11;
  --bg-subtle:#161618;
  --bg-sunken:#0A0A0C;
  --bg-raised:#1A1A1D;
  --bg-hover:#1F1F23;
  --bg-active:#27272B;

  --text:#F4F4F5;
  --text-secondary:#C4C4CC;
  --text-muted:#A1A1AA;
  --text-subtle:#71717A;
  --text-inverse:#18181B;

  --border:#27272B;
  --border-subtle:#1F1F23;
  --border-strong:#3F3F46;

  --accent:#5B8DEF;  --accent-hover:#7BA4F5;
  --accent-soft:#12203C; --accent-border:#1E3A6E; --accent-text:#93B4F8;

  --success:#4ADE80;  --success-soft:#0C2417;  --success-border:#14532D;
  --warning:#FBBF24;  --warning-soft:#2A1D06;  --warning-border:#78350F;
  --danger:#F87171;   --danger-soft:#2B1113;   --danger-border:#7F1D1D;
  --info:#A78BFA;     --info-soft:#1C1533;     --info-border:#4C1D95;

  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 1px 3px rgba(0,0,0,.5);
  --shadow:0 4px 12px -2px rgba(0,0,0,.5);
  --shadow-lg:0 12px 32px -8px rgba(0,0,0,.6);
  --shadow-xl:0 24px 56px -12px rgba(0,0,0,.7);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; margin:0; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:14px; line-height:1.55;
  font-feature-settings:'cv02','cv03','cv04','cv11';
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* Aksara Cina perlu fallback yang betul, jika tidak jadi tidak sekata */
:lang(zh) body, body[data-lang="zh"]{
  font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei',
              'Noto Sans SC',system-ui,sans-serif;
}

h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.018em; line-height:1.25; }
h1{ font-size:30px; letter-spacing:-.026em; }
h2{ font-size:22px; letter-spacing:-.022em; }
h3{ font-size:16px; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }

.mono{ font-family:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace; font-size:.92em; }
.tnum{ font-variant-numeric:tabular-nums; }
.trunc{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

::selection{ background:var(--accent-soft); color:var(--accent-text); }

::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:99px;
  border:4px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--text-subtle); background-clip:content-box; }

/* ─── Susun atur ────────────────────────────────────────────────── */
.card{ background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--radius-lg); }
.card-flat{ background:var(--bg-subtle); border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); }
.divider{ height:1px; background:var(--border); border:0; }
.vdivider{ width:1px; background:var(--border); }

.label{ font-size:11px; font-weight:600; letter-spacing:.045em; text-transform:uppercase;
  color:var(--text-subtle); }
.muted{ color:var(--text-muted); }
.secondary{ color:var(--text-secondary); }

/* ─── Butang ────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:36px; padding:0 14px; border-radius:var(--radius);
  font-size:13.5px; font-weight:500; line-height:1; white-space:nowrap;
  border:1px solid transparent; cursor:pointer; background:none; color:inherit;
  font-family:inherit;
  /* Label panjang MESTI dipotong, bukan melimpah keluar butang.
     Tanpa min-width:0 dan overflow:hidden, teks nowrap dalam bekas
     flex akan terkeluar dan bertindih dengan butang di sebelahnya.
     Ini kelihatan seperti kerosakan, bukan sekadar hodoh. */
  min-width:0; overflow:hidden; text-overflow:ellipsis;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             transform 80ms var(--ease);
}
/* Untuk label yang memang panjang dan perlu dibaca penuh — biarkan
   ia membalut dan tinggi butang menyesuaikan diri. */
.btn-wrap{ white-space:normal; height:auto; min-height:36px;
  padding-top:9px; padding-bottom:9px; line-height:1.35; text-overflow:clip; }
/* Butang teks sekunder — untuk tindakan "langkau" yang tidak sepatutnya
   bersaing dengan tindakan utama. */
.btn-link{ height:auto; padding:6px 4px; background:none; border:0;
  color:var(--text-muted); font-weight:450; text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:var(--border-strong); }
.btn-link:hover{ color:var(--text); text-decoration-color:var(--text-subtle); }
.btn:active:not(:disabled){ transform:scale(.985); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.btn-primary{ background:var(--text); color:var(--text-inverse); box-shadow:var(--shadow-xs); }
.btn-primary:hover:not(:disabled){ background:#000; }
[data-theme="dark"] .btn-primary:hover:not(:disabled){ background:#FFF; }

.btn-accent{ background:var(--accent); color:#fff; box-shadow:var(--shadow-xs); }
.btn-accent:hover:not(:disabled){ background:var(--accent-hover); }

.btn-default{ background:var(--bg-raised); border-color:var(--border); color:var(--text);
  box-shadow:var(--shadow-xs); }
.btn-default:hover:not(:disabled){ background:var(--bg-hover); border-color:var(--border-strong); }

.btn-subtle{ background:transparent; color:var(--text-secondary); }
.btn-subtle:hover:not(:disabled){ background:var(--bg-hover); color:var(--text); }

.btn-danger{ background:var(--bg-raised); border-color:var(--danger-border); color:var(--danger); }
.btn-danger:hover:not(:disabled){ background:var(--danger-soft); }

.btn-warning{ background:var(--bg-raised); border-color:var(--warning-border); color:var(--warning); }
.btn-warning:hover:not(:disabled){ background:var(--warning-soft); }

.btn-sm{ height:30px; padding:0 10px; font-size:12.5px; border-radius:var(--radius-sm); }
.btn-lg{ height:44px; padding:0 20px; font-size:15px; border-radius:var(--radius-md); }
.btn-xl{ height:52px; padding:0 26px; font-size:16px; border-radius:var(--radius-md); }
.btn-icon{ width:36px; padding:0; }
.btn-block{ width:100%; }

/* ─── Lencana ───────────────────────────────────────────────────── */
.badge{ display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px;
  border-radius:var(--radius-sm); font-size:11.5px; font-weight:500; white-space:nowrap;
  border:1px solid transparent; }
.badge-neutral{ background:var(--bg-sunken); color:var(--text-secondary); border-color:var(--border); }
.badge-accent{ background:var(--accent-soft); color:var(--accent-text); border-color:var(--accent-border); }
.badge-success{ background:var(--success-soft); color:var(--success); border-color:var(--success-border); }
.badge-warning{ background:var(--warning-soft); color:var(--warning); border-color:var(--warning-border); }
.badge-danger{ background:var(--danger-soft); color:var(--danger); border-color:var(--danger-border); }
.badge-info{ background:var(--info-soft); color:var(--info); border-color:var(--info-border); }
.dot{ width:6px; height:6px; border-radius:99px; background:currentColor; flex:none; }

/* ─── Medan input ───────────────────────────────────────────────── */
.input,.select,.textarea{
  width:100%; height:38px; padding:0 12px; font-size:14px; font-family:inherit;
  color:var(--text); background:var(--bg-raised);
  border:1px solid var(--border); border-radius:var(--radius);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  outline:none;
}
.textarea{ height:auto; padding:10px 12px; resize:vertical; line-height:1.55; }
.input::placeholder,.textarea::placeholder{ color:var(--text-subtle); }
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.input[aria-invalid="true"]{ border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-soft); }
.select{ appearance:none; padding-right:32px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; }
.field-label{ display:block; font-size:13px; font-weight:500; margin-bottom:6px; color:var(--text-secondary); }
.field-error{ font-size:12.5px; color:var(--danger); margin-top:6px; }
.field-hint{ font-size:12.5px; color:var(--text-muted); margin-top:6px; }

/* ─── Suis (toggle) ─────────────────────────────────────────────── */
.switch{ position:relative; width:38px; height:22px; border-radius:99px;
  background:var(--border-strong); cursor:pointer; flex:none;
  transition:background var(--dur) var(--ease); border:0; padding:0; }
.switch[aria-checked="true"]{ background:var(--accent); }
.switch::after{ content:''; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:99px; background:#fff; box-shadow:var(--shadow-xs);
  transition:transform 200ms var(--ease-out); }
.switch[aria-checked="true"]::after{ transform:translateX(16px); }

/* ─── Segmented control ─────────────────────────────────────────── */
.segmented{ display:inline-flex; padding:3px; gap:2px;
  background:var(--bg-sunken); border:1px solid var(--border); border-radius:var(--radius-md); }
.segmented button{ height:30px; padding:0 14px; border:0; background:transparent; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:500; color:var(--text-muted);
  border-radius:var(--radius-sm);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur); }
.segmented button:hover{ color:var(--text); }
.segmented button[aria-selected="true"]{ background:var(--bg-raised); color:var(--text);
  box-shadow:var(--shadow-xs); }

/* ─── Tab ───────────────────────────────────────────────────────── */
.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--border); }
.tabs button{ position:relative; height:38px; padding:0 12px; border:0; background:none;
  cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:500;
  color:var(--text-muted); transition:color var(--dur) var(--ease); }
.tabs button:hover{ color:var(--text); }
.tabs button[aria-selected="true"]{ color:var(--text); }
.tabs button[aria-selected="true"]::after{ content:''; position:absolute; left:8px; right:8px;
  bottom:-1px; height:2px; background:var(--text); border-radius:2px 2px 0 0;
  animation:tabIn 220ms var(--ease-out); }

/* ─── Jadual ────────────────────────────────────────────────────── */
.table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.table thead th{ text-align:left; font-weight:500; font-size:11.5px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-subtle); padding:0 12px 10px;
  border-bottom:1px solid var(--border); white-space:nowrap; }
.table tbody td{ padding:11px 12px; border-bottom:1px solid var(--border-subtle);
  vertical-align:middle; }
.table tbody tr{ transition:background 120ms var(--ease); }
.table tbody tr:hover{ background:var(--bg-hover); }
.table tbody tr:last-child td{ border-bottom:0; }
.num{ text-align:right; font-variant-numeric:tabular-nums; }

/* ─── Navigasi sisi ─────────────────────────────────────────────── */
.navitem{ display:flex; align-items:center; gap:9px; width:100%; height:34px;
  padding:0 10px; border:0; border-radius:var(--radius); background:none; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:450; color:var(--text-secondary);
  text-align:left; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.navitem:hover{ background:var(--bg-hover); color:var(--text); }
.navitem[aria-current="page"]{ background:var(--bg-active); color:var(--text); font-weight:500; }

/* ─── Kad statistik ─────────────────────────────────────────────── */
.stat-value{ font-size:26px; font-weight:600; letter-spacing:-.024em;
  font-variant-numeric:tabular-nums; line-height:1.15; }
.delta{ display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:500; }
.delta-up{ color:var(--success); } .delta-down{ color:var(--danger); }
.delta-flat{ color:var(--text-subtle); }

/* ─── Carta CSS ─────────────────────────────────────────────────── */
.bars{ display:flex; align-items:flex-end; gap:4px; height:56px; }
.bars i{ flex:1; background:var(--accent-soft); border:1px solid var(--accent-border);
  border-radius:3px 3px 0 0; transform-origin:bottom;
  animation:barGrow 520ms var(--ease-out) both; }
.bars i.hi{ background:var(--accent); border-color:var(--accent); }
.meter{ height:6px; background:var(--bg-sunken); border-radius:99px; overflow:hidden; }
.meter > i{ display:block; height:100%; border-radius:99px;
  animation:meterGrow 620ms var(--ease-out) both; transform-origin:left; }

/* ─── Kertas resit ──────────────────────────────────────────────── */
.paper{ background:#FDFCF9; color:#1A1A1A; border-radius:2px;
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px; line-height:1.55;
  white-space:pre; box-shadow:var(--shadow-xl); position:relative; }
.paper::before,.paper::after{ content:''; position:absolute; left:0; right:0; height:6px;
  background:radial-gradient(circle at 4px 0, transparent 4px, #FDFCF9 4px) 0 0/8px 6px repeat-x; }
.paper::before{ top:-6px; transform:scaleY(-1); }
.paper::after{ bottom:-6px; }

/* ─── Lapisan atas ──────────────────────────────────────────────── */
.overlay{ position:fixed; inset:0; z-index:50; background:rgba(24,24,27,.32);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  animation:fadeIn 160ms var(--ease) both; }
[data-theme="dark"] .overlay{ background:rgba(0,0,0,.6); }
.sheet{ background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-xl);
  animation:sheetIn 220ms var(--ease-out) both; }

.toast{ position:fixed; bottom:22px; left:50%; z-index:60; display:flex; align-items:center; gap:9px;
  padding:11px 15px; background:var(--text); color:var(--text-inverse);
  border-radius:var(--radius-md); box-shadow:var(--shadow-lg); font-size:13.5px;
  animation:toastIn 260ms var(--ease-out) both; }

.tip{ position:relative; }
.tip::after{ content:attr(data-tip); position:absolute; bottom:calc(100% + 7px); left:50%;
  transform:translateX(-50%) translateY(3px); padding:5px 9px; border-radius:var(--radius-sm);
  background:var(--text); color:var(--text-inverse); font-size:12px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity 140ms, transform 140ms var(--ease-out); }
.tip:hover::after{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ─── Animasi ───────────────────────────────────────────────────── */
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes fadeUp{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
@keyframes sheetIn{ from{opacity:0; transform:translateY(10px) scale(.985)} to{opacity:1; transform:none} }
@keyframes toastIn{ from{opacity:0; transform:translate(-50%,10px)} to{opacity:1; transform:translate(-50%,0)} }
@keyframes tabIn{ from{transform:scaleX(.4); opacity:0} to{transform:none; opacity:1} }
@keyframes barGrow{ from{transform:scaleY(0)} to{transform:scaleY(1)} }
@keyframes meterGrow{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes rowIn{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.45} }
@keyframes spin{ to{transform:rotate(360deg)} }
@keyframes shimmer{ 100%{background-position:200% 0} }

.a-fade{ animation:fadeIn 200ms var(--ease) both; }
.a-up{ animation:fadeUp 280ms var(--ease-out) both; }
.a-row{ animation:rowIn 240ms var(--ease-out) both; }
.a-pulse{ animation:pulse 1.9s ease-in-out infinite; }
.spinner{ width:14px; height:14px; border:2px solid var(--border-strong);
  border-top-color:var(--accent); border-radius:99px; animation:spin .7s linear infinite; }

.stagger > *{ animation:rowIn 260ms var(--ease-out) both; }
.stagger > *:nth-child(1){animation-delay:20ms}  .stagger > *:nth-child(2){animation-delay:45ms}
.stagger > *:nth-child(3){animation-delay:70ms}  .stagger > *:nth-child(4){animation-delay:95ms}
.stagger > *:nth-child(5){animation-delay:120ms} .stagger > *:nth-child(6){animation-delay:145ms}
.stagger > *:nth-child(7){animation-delay:170ms} .stagger > *:nth-child(n+8){animation-delay:190ms}

.hover-raise{ transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
  transform var(--dur) var(--ease); }
.hover-raise:hover{ box-shadow:var(--shadow); border-color:var(--border-strong); }

.press{ transition:transform 90ms var(--ease), background var(--dur) var(--ease),
  border-color var(--dur) var(--ease); }
.press:active{ transform:scale(.97); }

.reveal{ opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }

.skeleton{ background:linear-gradient(90deg,var(--bg-sunken) 25%,var(--bg-hover) 50%,var(--bg-sunken) 75%);
  background-size:200% 100%; animation:shimmer 1.4s linear infinite; border-radius:var(--radius-sm); }

/* ─── Utiliti ───────────────────────────────────────────────────── */
.row{ display:flex; align-items:center; }
.col{ display:flex; flex-direction:column; }
.grow{ flex:1; min-width:0; }
.gap-1{gap:4px} .gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px} .gap-6{gap:24px}
.hide{ display:none!important; }
@media(max-width:900px){ .hide-md{ display:none!important; } }
@media(max-width:640px){ .hide-sm{ display:none!important; } }

kbd{ display:inline-block; min-width:18px; padding:1px 5px; font-size:11px; text-align:center;
  font-family:'IBM Plex Mono',monospace; color:var(--text-secondary);
  background:var(--bg-sunken); border:1px solid var(--border);
  border-bottom-width:2px; border-radius:var(--radius-xs); }

/* Fokus kelihatan untuk navigasi papan kekunci — bukan pilihan */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-xs); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important; }
  .reveal{ opacity:1; transform:none; }
}


/* ─── Susun atur Tetapan ──────────────────────────────────────────────
   Dua lajur pada desktop, satu pada mudah alih. `align-items:start`
   penting: tanpanya setiap kad akan diregangkan ke ketinggian kad
   tertinggi dalam baris yang sama, meninggalkan ruang kosong besar. */
.settings-grid{
  display:grid;
  /* 380px, bukan 340px: kad Tetapan mengandungi label dan medan
     bersebelahan, dan pada 340px label mula terpotong. Lebar lajur
     ditetapkan oleh kandungan yang paling ketat, bukan yang paling
     longgar. */
  grid-template-columns:repeat(auto-fit,minmax(380px,1fr));
  gap:18px;
  align-items:start;
  max-width:1240px;
}
/* Kad yang panjang (Peranti, Kaedah bayaran, Pengguna) merentangi dua
   lajur pada skrin lebar supaya ia tidak menjadi lajur sempit yang
   panjang di sebelah ruang kosong. */
@media(min-width:1100px){
  .settings-grid > .card.wide{ grid-column:span 2; }
}
/* Kad dalam grid tidak perlu jidar bawah sendiri — grid gap yang uruskan.
   Kalau tidak, jarak menegak jadi dua kali ganda jarak mendatar. */
.settings-grid > .card{ margin-bottom:0 !important; }
@media(max-width:760px){
  .settings-grid{ grid-template-columns:1fr; }
}


/* ═══ TABLET & SKRIN KECIL ════════════════════════════════════════════
   iPad ialah peranti utama untuk POS dan Skrin Dapur, dan pemilik kedai
   selalunya menyemak Store Management dari telefon. Titik putus di bawah
   dipilih dari saiz peranti sebenar, bukan nombor bulat:

     1180px  iPad Pro melintang
     1024px  iPad melintang / iPad Pro menegak
      834px  iPad menegak
      768px  iPad mini menegak
      480px  telefon

   Prinsip: kurangkan lajur sebelum mengecilkan teks. Teks kecil pada
   skrin sentuh yang berminyak di dapur tidak boleh dibaca, dan kasyer
   tidak boleh berhenti untuk memicit-besarkan semasa ada barisan. */

/* Sasaran sentuh. 44px ialah minimum yang boleh ditekan dengan yakin
   oleh ibu jari — di bawah itu, kesilapan tekan menjadi kerap. */
@media (hover:none) and (pointer:coarse){
  .btn{ min-height:40px; }
  .btn-sm{ min-height:36px; }
  .btn-icon{ min-width:40px; }
  .input, .select, .textarea{ min-height:42px; font-size:16px; }
  /* 16px menghalang iOS daripada mengezum masuk secara automatik apabila
     medan difokus — zum itu memecahkan susun atur dan pengguna terpaksa
     mengezum keluar secara manual setiap kali. */
  .catrow{ padding:11px 10px; }
  .table td, .table th{ padding-top:12px; padding-bottom:12px; }
}

/* Grid statistik: kurangkan lajur, jangan mampatkan */
@media (max-width:1180px){
  .statgrid{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
}
@media (max-width:834px){
  .statgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .settings-grid{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .statgrid{ grid-template-columns:1fr; }
}

/* Jadual lebar: benarkan skrol mendatar dan bukan memampatkan lajur
   sehingga nombor bertindih. Nombor yang bertindih ialah nombor yang
   salah dibaca. */
@media (max-width:1024px){
  .table{ min-width:640px; }
}

/* Bar sisi jadi bar atas mendatar pada tablet menegak ke bawah. */
@media (max-width:900px){
  .sidebar{
    display:flex !important;
    width:auto; flex:none; flex-direction:row; overflow-x:auto;
    border-right:0; border-bottom:1px solid var(--border);
    padding:8px 10px; gap:4px; -webkit-overflow-scrolling:touch;
  }
  .sidebar > .col, .sidebar > .grow{ display:none; }
  .sidebar .navitem{ flex:none; white-space:nowrap; }
  #app{ flex-direction:column; }
}

/* POS: troli menjadi panel bawah pada skrin sempit dan bukan hilang. */
@media (max-width:1000px){
  .split{ grid-template-columns:1fr !important; }
  .cartpane{
    display:flex !important;
    position:sticky; bottom:0; max-height:46vh;
    border-top:1px solid var(--border); background:var(--bg-raised);
    box-shadow:0 -8px 24px rgba(0,0,0,.08);
  }
}

/* Skrin Dapur: tiga lajur → dua → satu. Kad tiket tidak pernah
   dimampatkan lebih sempit daripada yang boleh dibaca dari dua meter,
   iaitu jarak sebenar tukang masak berdiri dari skrin. */
@media (max-width:1100px){ .lanes{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (max-width:700px){  .lanes{ grid-template-columns:1fr !important; } }

/* ─── Bar atas ────────────────────────────────────────────────────────
   Dulu ini hanya wujud di dalam pos.html. Pengurusan Kedai dan Admin
   Console merujuk kelas yang sama pada skrin log masuk mereka, jadi
   jenama dan penukar bahasa jatuh ke penjuru kiri atas tanpa jarak —
   kelas yang tiada CSS tidak memberi amaran, ia hanya kelihatan rosak.
   Ia berada di sini sekarang kerana keempat-empat aplikasi memuatkannya. */
.topbar{ height:52px; display:flex; align-items:center; gap:10px; padding:0 14px;
  border-bottom:1px solid var(--border); background:var(--bg-raised); flex:none; }
.brand{ font-weight:600; letter-spacing:-.02em; }
.brand span{ color:var(--accent); }
/* Skrin log masuk memberi bar itu lebih ruang bernafas — tiada bar sisi
   di sana, jadi tepi 14px kelihatan tersepit pada paparan penuh. */
.topbar.topbar-auth{ height:60px; padding:0 clamp(14px,4vw,28px); }
@media(max-width:520px){ .topbar{ gap:8px; padding:0 12px; } }