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

:root {
  --s0:#fff;--s1:#f8fafc;--s2:#f1f5f9;--s3:#e2e8f0;
  --ink9:#0f172a;--ink6:#475569;--ink4:#94a3b8;--ink2:#cbd5e1;
  --brand:#2563eb;--brand-h:#1d4ed8;--brand-l:#eff6ff;--brand-b:#bfdbfe;
  --ok:#16a34a;--ok-l:#f0fdf4;--warn:#d97706;--warn-l:#fffbeb;
  --err:#dc2626;--err-l:#fef2f2;
  --nav:#0f172a;--nav-h:#1e293b;--nav-b:#1e293b;
  --r4:4px;--r6:6px;--r10:10px;--r14:14px;--r20:20px;
  --font:'Inter',system-ui,sans-serif;--font-ar:'Cairo',system-ui,sans-serif;
  --sh-xs:0 1px 2px rgba(0,0,0,.05);--sh-sm:0 1px 3px rgba(0,0,0,.08);
  --sh-md:0 4px 12px rgba(0,0,0,.08);--sh-lg:0 10px 32px rgba(0,0,0,.12);
  --ease:cubic-bezier(.16,1,.3,1);
  --bottom-nav-h:56px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;overflow:hidden;margin:0}
body{font-family:var(--font);font-size:14px;line-height:1.5;background:var(--s2);color:var(--ink9);-webkit-font-smoothing:antialiased}
body[dir=rtl]{font-family:var(--font-ar)}

/* ── App shell: exact viewport height, both columns fill it ── */
.app{display:flex;height:100vh;height:100dvh;height:100svh;overflow:hidden}
/* col-nav: fills app height, internal scrollable section handles excess content */
.col-nav{width:210px;background:var(--nav);display:flex;flex-direction:column;flex-shrink:0;height:100%;overflow:hidden}
/* col-main: fills remaining width and full height */
.col-main{flex:1;display:flex;flex-direction:column;overflow:hidden;height:100%}
.nav-logo{display:flex;align-items:center;justify-content:center;padding:16px 12px;border-bottom:1px solid var(--nav-b);min-height:64px;flex-shrink:0}
.nav-logo img{max-width:90%;max-height:46px;object-fit:contain}
/* Links: fixed size, never hidden */
.nav-links{list-style:none;margin:0;padding:6px 10px;flex-shrink:0;display:flex;flex-direction:column;gap:2px}

.nav-wordmark{font-size:16px;font-weight:800;color:#f1f5f9;letter-spacing:-.01em}
.nav-wordmark small{display:block;font-size:10px;font-weight:500;color:#64748b;letter-spacing:.04em;text-transform:uppercase}
.nav-links a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r6);font-size:13px;font-weight:500;color:#94a3b8;text-decoration:none;cursor:pointer;transition:background .12s,color .12s}
.nav-links a:hover{background:var(--nav-h);color:#f1f5f9}
.nav-links a.active{background:var(--brand);color:#fff;font-weight:600}
.nav-icon{font-size:16px;flex-shrink:0}
.nav-label{flex:1}
.nav-badge{background:var(--err);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px}
.nav-footer{padding:12px 10px;border-top:1px solid var(--nav-b);flex-shrink:0;display:flex;flex-direction:column;gap:6px}
.nav-user{font-size:12px;color:#64748b;display:flex;align-items:center;gap:6px;padding:0 4px 4px}
.nav-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex-shrink:0}

/* ── Topbar ─────────────────────────────────────────── */
.topbar{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--s0);border-bottom:1px solid var(--s3);flex-shrink:0;box-shadow:var(--sh-xs)}
.topbar-title{font-size:15px;font-weight:700;flex:1}
.shift-badge{display:inline-flex;align-items:center;gap:6px;background:var(--ok-l);color:var(--ok);border-radius:var(--r6);padding:5px 12px;font-size:12px;font-weight:600}
.shift-badge.closed{background:var(--err-l);color:var(--err)}

/* ── Cards ──────────────────────────────────────────── */
.card{background:var(--s0);border:1px solid var(--s3);border-radius:var(--r10);box-shadow:var(--sh-xs)}
.card-body{padding:18px}
.card-header{padding:14px 18px;border-bottom:1px solid var(--s3);display:flex;align-items:center;justify-content:space-between}
.card-title{font-size:14px;font-weight:700;margin:0}

/* ── Buttons ────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border:none;border-radius:var(--r6);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .12s,transform .08s,opacity .12s;white-space:nowrap}
.btn:active{transform:scale(.97);opacity:.92}
.btn-primary{background:var(--brand);color:#fff}.btn-primary:hover{background:var(--brand-h)}
.btn-success{background:var(--ok);color:#fff}.btn-success:hover{background:#15803d}
.btn-warning{background:var(--warn);color:#fff}.btn-warning:hover{background:#b45309}
.btn-danger{background:var(--err);color:#fff}.btn-danger:hover{background:#b91c1c}
.btn-ghost{background:var(--s1);color:var(--ink6);border:1px solid var(--s3)}.btn-ghost:hover{background:var(--s2)}
.btn-dark{background:var(--ink9);color:#fff}.btn-dark:hover{background:#1e293b}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-lg{padding:13px 20px;font-size:15px;font-weight:700}
.btn-xl{padding:16px;font-size:16px;font-weight:800;width:100%;display:flex}

/* ── Forms ──────────────────────────────────────────── */
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink6);margin-bottom:5px}
.inp{width:100%;padding:9px 12px;border:1px solid var(--s3);border-radius:var(--r6);font-family:inherit;font-size:14px;color:var(--ink9);background:var(--s0);outline:none;transition:border-color .15s;box-sizing:border-box}
.inp:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.inp-lg{padding:12px 14px;font-size:16px;font-weight:600}
select.inp{cursor:pointer}
textarea.inp{resize:vertical;min-height:80px}

/* ── POS scan zone ──────────────────────────────────── */
.scan-zone{padding:10px 14px;background:var(--nav);flex-shrink:0}
.scan-wrap{display:flex;align-items:center;gap:10px;background:#1e293b;border-radius:var(--r6);padding:8px 14px;border:1px solid #334155}
.scan-icon{font-size:22px;color:#60a5fa;flex-shrink:0}
.scan-input{flex:1;background:transparent;border:none;color:#f1f5f9;font-size:17px;font-weight:600;outline:none;font-family:var(--font)}
.scan-input::placeholder{color:#475569;font-weight:400}
.scan-hint{font-size:11px;color:#475569;margin-top:5px;padding:0 2px}

/* ── Category strip ─────────────────────────────────── */
.cat-strip{display:flex;gap:6px;padding:8px 14px 10px;overflow-x:auto;flex-shrink:0;background:var(--s0);border-bottom:1px solid var(--s3);scrollbar-width:thin;scrollbar-color:var(--brand-b) transparent;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
.cat-strip::-webkit-scrollbar{height:6px;display:block}
.cat-strip::-webkit-scrollbar-track{background:var(--s2);border-radius:3px}
.cat-strip::-webkit-scrollbar-thumb{background:var(--brand-b);border-radius:3px}
.cat-strip::-webkit-scrollbar-thumb:hover{background:var(--brand)}
.cat-pill{padding:6px 14px;border-radius:var(--r20);border:1px solid var(--s3);background:var(--s0);font-size:12px;font-weight:600;color:var(--ink6);cursor:pointer;white-space:nowrap;transition:all .15s var(--ease);flex-shrink:0}
.cat-pill:hover{border-color:var(--brand-b);color:var(--brand)}
.cat-pill.active{background:var(--brand);border-color:var(--brand);color:#fff}

/* ── Product grid ───────────────────────────────────── */
.product-area{flex:1;overflow-y:auto;padding:12px}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px;align-content:start}
.prod-card{background:var(--s0);border:1px solid var(--s3);border-radius:var(--r10);padding:12px 8px;text-align:center;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .1s;box-shadow:var(--sh-xs);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100px}
.prod-card:hover{border-color:var(--brand);box-shadow:var(--sh-md);transform:translateY(-1px)}
.prod-card:active{transform:scale(.97)}
.prod-card.low{border-color:var(--warn);background:var(--warn-l)}
.prod-card.out{opacity:.6;border-color:var(--err)}
.prod-card > *{pointer-events:none}
.prod-name{font-size:12px;font-weight:600;color:var(--ink9);line-height:1.3;margin-bottom:5px}
.prod-barcode{font-size:10px;color:var(--ink4);font-family:monospace;margin-bottom:4px}
.prod-price{font-size:14px;font-weight:800;color:var(--brand)}
.prod-stock{font-size:10px;font-weight:600;margin-top:3px}
.prod-stock.ok{color:var(--ok)}.prod-stock.low{color:var(--warn)}.prod-stock.out{color:var(--err)}

/* ── Modals ─────────────────────────────────────────── */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);z-index:1000;align-items:center;justify-content:center;padding:16px}
.modal.open{display:flex}
.mbox{background:var(--s0);border-radius:var(--r14);padding:24px;width:100%;max-width:480px;max-height:92vh;overflow-y:auto;box-shadow:var(--sh-lg);animation:mIn .18s var(--ease)}
.mbox.wide{max-width:720px}
@keyframes mIn{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}}
.mtitle{font-size:17px;font-weight:700;margin:0 0 18px}
.mactions{display:flex;gap:8px;margin-top:20px}

/* ── Numpad ─────────────────────────────────────────── */
.np-disp{font-size:32px;font-weight:800;text-align:center;padding:12px;background:var(--s1);border:1px solid var(--s3);border-radius:var(--r6);margin-bottom:12px;letter-spacing:.02em}
.np-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.np-btn{padding:16px;font-size:20px;font-weight:700;background:var(--s1);border:1px solid var(--s3);border-radius:var(--r6);cursor:pointer;font-family:inherit;transition:background .1s,transform .08s}
.np-btn:hover{background:var(--s2)}.np-btn:active{transform:scale(.93);background:var(--brand-l)}

/* ── Badges ─────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--r20);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.badge-ok{background:var(--ok-l);color:var(--ok)}.badge-warn{background:var(--warn-l);color:var(--warn)}.badge-err{background:var(--err-l);color:var(--err)}.badge-brand{background:var(--brand-l);color:var(--brand)}.badge-muted{background:var(--s2);color:var(--ink4)}

/* ── Tables ─────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;border-radius:var(--r10);border:1px solid var(--s3);background:var(--s0)}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl thead th{padding:10px 14px;background:var(--s1);border-bottom:1px solid var(--s3);font-weight:700;color:var(--ink6);font-size:11px;text-transform:uppercase;letter-spacing:.04em;text-align:start;white-space:nowrap}
.tbl tbody td{padding:10px 14px;border-bottom:1px solid var(--s2)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:var(--s1)}
tr.drag-over td{background:var(--brand-l)!important;outline:2px solid var(--brand)}
.drag-handle:hover{color:var(--brand)!important}

/* ── Stats ──────────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:20px}
.stat-card{background:var(--s0);border:1px solid var(--s3);border-radius:var(--r10);padding:16px;box-shadow:var(--sh-xs)}
.stat-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink4);margin-bottom:6px}
.stat-val{font-size:26px;font-weight:800;color:var(--ink9);line-height:1}
.stat-sub{font-size:12px;color:var(--ink4);margin-top:4px}
.stat-card.brand .stat-val{color:var(--brand)}.stat-card.ok .stat-val{color:var(--ok)}.stat-card.warn .stat-val{color:var(--warn)}.stat-card.err .stat-val{color:var(--err)}

/* ── Tabs ───────────────────────────────────────────── */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--s3);margin-bottom:16px}
.tab-btn{padding:8px 16px;font-size:13px;font-weight:600;color:var(--ink6);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color .12s,border-color .12s}
.tab-btn.active{color:var(--brand);border-bottom-color:var(--brand)}
.tab-btn:hover:not(.active){color:var(--ink9)}
.tab-panel{display:none}.tab-panel.active{display:block}

/* ── Auth ───────────────────────────────────────────── */
.auth-page{min-height:100vh;background:var(--s2);display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{background:var(--s0);border:1px solid var(--s3);border-radius:var(--r14);padding:36px 32px;width:100%;max-width:400px;box-shadow:var(--sh-lg)}
.auth-logo{text-align:center;margin-bottom:28px}
.auth-logo img{max-height:56px;max-width:160px;object-fit:contain}
.auth-title{font-size:20px;font-weight:800;margin:0 0 4px}
.auth-sub{font-size:13px;color:var(--ink4);margin:0 0 24px}
.auth-err{background:var(--err-l);border:1px solid #fecaca;border-radius:var(--r6);padding:10px 14px;color:var(--err);font-size:13px;font-weight:500;margin-bottom:16px;text-align:center}

/* ── Scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--s3);border-radius:4px}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — Tablet 900px
══════════════════════════════════════════════════════ */
@media(max-width:900px){
  .col-nav{width:60px;height:100%;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}
  .nav-label,.nav-wordmark,.nav-wordmark small,.nav-user span{display:none}
  .nav-links a{justify-content:center;padding:12px}
  .nav-logo{padding:12px 8px;min-height:48px}
  .nav-footer{padding:8px 6px}
  /* Hide shift card detail in icon-only mode — just show dot */
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — Mobile 700px
   Layout: sidebar hidden, full-width stacked POS,
   cart becomes bottom sheet triggered by FAB
══════════════════════════════════════════════════════ */
@media(max-width:700px){

  /* ── Shell ──────────────────────────────────────── */
  .col-nav { display:none !important; }
  .app { flex-direction:column; height:100vh; height:100dvh; height:100svh; overflow:hidden; }

  /* ── POS shell: left takes full screen, right hides ─ */
  .pos-shell {
    flex-direction:column;
    height:calc(100dvh - var(--bottom-nav-h));
    overflow:hidden;
  }
  .pos-left {
    flex:1; display:flex; flex-direction:column; overflow:hidden;
    height:100%;
  }
  /* Cart panel becomes a sliding bottom sheet */
  .pos-right {
    position:fixed !important;
    bottom:var(--bottom-nav-h);
    left:0; right:0;
    width:100% !important;
    max-height:82vh;
    height:auto !important;
    border-top:2px solid var(--brand) !important;
    border-inline-start:none !important;
    border-radius:16px 16px 0 0;
    box-shadow:0 -8px 32px rgba(0,0,0,.18);
    z-index:400;
    overflow:hidden;
    /* Hidden by default — shown via .cart-open class */
    transform:translateY(100%);
    transition:transform .32s var(--ease);
    background:var(--s0);
  }
  .pos-right.cart-open { transform:translateY(0); }
  .cart-panel { overflow:hidden; display:flex; flex-direction:column; max-height:82vh; }
  #cartItems  { flex:1; overflow-y:auto; max-height:35vh; }

  /* Overlay when cart sheet is open */
  .cart-sheet-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.35); z-index:399;
  }
  .cart-sheet-overlay.show { display:block; }

  /* ── Cart FAB ─────────────────────────────────── */
  .cart-fab {
    display:flex !important;
    position:fixed;
    bottom:calc(var(--bottom-nav-h) + 14px);
    right:16px;
    width:56px; height:56px;
    z-index:395;
    font-size:22px;
  }
  body[dir=rtl] .cart-fab { right:auto; left:16px; }

  /* ── Topbar ───────────────────────────────────── */
  .topbar {
    flex-wrap:nowrap;
    gap:6px;
    padding:8px 10px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .topbar::-webkit-scrollbar { display:none; }
  .topbar-title { font-size:13px; min-width:60px; }
  .shift-badge  { font-size:10px; padding:4px 8px; white-space:nowrap; }

  /* ── Scan zone ────────────────────────────────── */
  .scan-zone { padding:8px 10px; }
  .scan-input { font-size:15px; }

  /* ── Category strip ───────────────────────────── */
  .cat-strip { padding:6px 10px 8px; gap:5px; }
  .cat-pill  { padding:5px 10px; font-size:11px; }

  /* ── Product grid: 2 cols, compact ───────────── */
  .product-area   { padding:8px; }
  .product-grid   { grid-template-columns:repeat(2,1fr); gap:6px; }
  .prod-card      { min-height:86px; padding:8px 6px; }
  .prod-name      { font-size:11px; }
  .prod-price     { font-size:13px; }
  .prod-stock     { font-size:9px; }
  .prod-barcode   { display:none; }  /* hide barcode on cards — saves space */

  /* ── Modals: full-screen bottom sheet on mobile ─ */
  .modal { align-items:flex-end; padding:0; }
  .mbox {
    border-radius:16px 16px 0 0;
    max-width:100%;
    padding:20px 16px 28px;
    max-height:92dvh;
    animation:mInMobile .25s var(--ease);
  }
  .mbox.wide { max-width:100%; }
  @keyframes mInMobile {
    from { transform:translateY(40px); opacity:0; }
    to   { transform:none; opacity:1; }
  }

  /* ── Numpad on mobile: bigger tap targets ──────── */
  .np-btn { padding:18px 8px; font-size:22px; }

  /* ── Cashier mode on mobile ───────────────────── */
  .pos-shell.cashier-mode .pos-right { flex-direction:column; }
  .cashier-scan-panel {
    width:100% !important; height:auto !important;
    border-inline-end:none; border-bottom:1px solid #1e293b;
    max-height:48vh;
  }
  .cscan-results { max-height:180px; }
  .cscan-input   { font-size:16px; }

  /* ── Bottom navigation bar ────────────────────── */
  #mobileNav {
    display:flex !important;
    position:fixed; bottom:0; left:0; right:0;
    background:var(--nav);
    border-top:1px solid #1e293b;
    height:var(--bottom-nav-h);
    z-index:600;
    padding:0;
  }
  #mobileNav a {
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    color:#64748b; text-decoration:none;
    font-size:18px; gap:2px; transition:color .15s;
    padding:4px 0;
  }
  #mobileNav a span { font-size:9px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; }
  #mobileNav a.active { color:#60a5fa; }

  /* Push page content above bottom nav on all pages */
  .col-main { padding-bottom:var(--bottom-nav-h); }
  /* POS is special — shell handles its own height */
  .pos-shell { padding-bottom:0; }

  /* ── Inventory / Admin: horizontal scroll tables ─ */
  .tbl-wrap { border-radius:0; border-left:none; border-right:none; }
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .stat-val   { font-size:20px; }
  .tabs { overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap; }
  .tabs::-webkit-scrollbar { display:none; }
  .tab-btn { white-space:nowrap; padding:8px 12px; font-size:12px; }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — Small mobile 380px
══════════════════════════════════════════════════════ */
@media(max-width:380px){
  .product-grid { grid-template-columns:repeat(2,1fr); }
  .prod-card    { min-height:76px; }
  .topbar-title { display:none; }
  .mbox { padding:16px 12px 24px; }
}