/* PRESTORM — dark red / gray / black theme. Mobile-first, RTL & LTR safe. */
:root{
  --brand:#8a1c1c; --brand-2:#a82424; --brand-d:#5e1212;
  --ink:#121316; --gray:#3a3d42; --muted:#6b7280;
  --line:#e3e5e9; --bg:#f4f5f7; --card:#ffffff;
  --ok:#1d8a4c; --warn:#b8860b; --bad:#b3261e;
  --radius:12px; --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",Tahoma,system-ui,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6; font-size:15px;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

/* ── Top bar ───────────────────────────────────────────── */
.topbar{
  background:linear-gradient(135deg,var(--ink),var(--brand-d));
  color:#fff; padding:10px 16px; display:flex; align-items:center; gap:12px;
  position:sticky; top:0; z-index:50; box-shadow:var(--shadow);
}
.topbar .brand{font-weight:800;letter-spacing:.5px;font-size:18px;color:#fff;display:flex;align-items:center;gap:8px}
.topbar .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--brand-2);box-shadow:0 0 0 3px rgba(168,36,36,.3)}
.topbar .spacer{flex:1}
.topbar a{color:#fff;opacity:.92}
.topbar .iconbtn{position:relative;background:rgba(255,255,255,.12);border:0;color:#fff;
  width:38px;height:38px;border-radius:10px;cursor:pointer;font-size:18px}
.navToggle{display:none;background:rgba(255,255,255,.14);border:0;color:#fff;width:38px;height:38px;
  border-radius:10px;cursor:pointer;font-size:20px;align-items:center;justify-content:center;flex:0 0 auto}
.topbar .iconbtn .badge{position:absolute;top:-6px;inset-inline-end:-6px;background:var(--brand-2);
  color:#fff;border-radius:10px;font-size:11px;padding:1px 6px;min-width:18px;text-align:center}

/* Dealer horizontal nav (desktop) */
.topnav{display:flex;gap:4px;flex-wrap:wrap;background:#fff;border-bottom:1px solid var(--line);
  padding:8px 16px;position:sticky;top:58px;z-index:40;box-shadow:var(--shadow)}
.topnav a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;
  color:var(--gray);font-weight:700;font-size:14px}
.topnav a.active,.topnav a:hover{background:var(--brand);color:#fff;text-decoration:none}

.layout{display:flex;min-height:calc(100vh - 58px)}
.sidebar{width:230px;background:#fff;border-inline-end:1px solid var(--line);padding:12px}
.sidebar a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  color:var(--gray);font-weight:600;margin-bottom:2px}
.sidebar a.active,.sidebar a:hover{background:var(--brand);color:#fff;text-decoration:none}
.content{flex:1;padding:18px;max-width:1100px;margin:0 auto;width:100%}

/* ── Cards / grid ──────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px;margin-bottom:16px}
.grid{display:grid;gap:14px}
.grid>*{min-width:0}   /* let children shrink so inner tables scroll instead of blowing out */
.grid.kpi{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
/* compact 3-column products grid (order page) */
/* compact single-row search bar (products/order page) */
.card.search-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px}
.search-bar .s-input{flex:1 1 120px;min-width:0;width:auto;padding:7px 10px}
.search-bar .s-cat{flex:0 1 auto;width:auto;padding:7px 10px}
.search-bar .btn{flex:0 0 auto}
.grid.cards.cards-3{grid-template-columns:repeat(3,1fr);gap:10px}
.cards-3 .product{padding:0}                     /* image goes edge-to-edge, no gap */
.cards-3 .product .ph{aspect-ratio:1;height:auto}
.cards-3 .product .body{padding:5px 6px;gap:1px} /* small text margin → more room for text */
.cards-3 .product .nm{font-size:11px;min-height:0;line-height:1.25}
.cards-3 .product .muted{font-size:10px}
.cards-3 .product .pr{font-size:12px}
.cards-3 .product .field label{display:none}
.cards-3 .product form{margin-top:2px!important}
.cards-3 .product form>div{margin:2px 0!important}
.cards-3 .product .field{margin:0!important}
.cards-3 .product select,.cards-3 .product input{font-size:11px;padding:3px 5px}
.cards-3 .product .qty{flex-wrap:nowrap;gap:6px;align-items:center}
.cards-3 .product .qty input{width:34px;flex:0 0 34px;text-align:center;padding:4px 2px}
.cards-3 .product .qty .btn{flex:1 1 auto;min-width:0;justify-content:center;align-items:center;font-size:15px}
.cards-3 .product .btn{font-size:11px;padding:4px 7px}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kpi .card{display:flex;flex-direction:column;gap:6px}
.kpi .v{font-size:24px;font-weight:800;color:var(--brand)}
.kpi .l{color:var(--muted);font-size:13px}
/* compact KPI variant + home action cards (same size) */
.kpi.kpi-sm{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.kpi.kpi-sm .card{padding:10px 12px;margin-bottom:0;gap:2px}
.kpi.kpi-sm .v{font-size:18px}
.kpi.kpi-sm .l{font-size:12px}
.home-actions{display:flex;flex-direction:column;gap:16px;margin:18px 0}
.act-card{display:flex;flex-direction:row;align-items:center;gap:14px;width:100%;padding:24px 22px;
  margin:0;text-decoration:none;color:#fff;background:var(--brand);border-color:transparent;cursor:pointer}
.act-card .ic{font-size:32px;line-height:1}
.act-card .t{font-weight:800;font-size:19px}
.act-card.alt{background:#0a6b3c}
.act-card.blue{background:#12578a}
.act-card:hover{filter:brightness(1.08)}
/* account page: 2-col KPI (due date spans below) + inline pay form */
/* inventory: name column takes most of the width, size/qty compact */
.inv-table th:first-child,.inv-table td:first-child{width:auto}
.inv-table th:nth-child(2),.inv-table td:nth-child(2){width:1%;white-space:nowrap;text-align:center}
.inv-table th:nth-child(3),.inv-table td:nth-child(3){width:1%;white-space:nowrap;text-align:center}
.grid.acc-kpi{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.grid.acc-kpi .span-2{grid-column:1 / -1}
.pay-form{display:flex;flex-wrap:nowrap;align-items:center;gap:8px}
.pay-form .pay-all{display:flex;align-items:center;gap:6px;white-space:nowrap;flex:0 0 auto}
.pay-form .pay-all input{width:auto}
.pay-form .pay-amt{flex:1 1 70px;min-width:50px;width:auto;text-align:center}
.pay-form .btn{flex:0 0 auto}
.page-title{font-size:20px;font-weight:800;margin:0 0 14px;display:flex;align-items:center;gap:10px}
.page-title .actions{margin-inline-start:auto;display:flex;gap:8px}

/* ── Tables ────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden}
th,td{padding:10px 12px;text-align:start;border-bottom:1px solid var(--line);font-size:14px}
th{background:#fafafa;color:var(--gray);font-weight:700;white-space:nowrap}
tr:last-child td{border-bottom:0}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
/* compact table: smaller fonts/rows, first (name) column gets the remaining width */
.compact-table td,.compact-table th{padding:2px 5px;font-size:11px;line-height:1.2}
.compact-table td:first-child,.compact-table th:first-child{width:auto;white-space:normal}
.compact-table td:not(:first-child),.compact-table th:not(:first-child){width:1%;white-space:nowrap;font-size:10px;padding-inline:3px}
/* one-piece order-qty stepper: − and + flank the number box, one line tall */
.qty-cell{width:1%;white-space:nowrap;text-align:center}
.stepper{display:inline-flex;flex-direction:row;align-items:stretch;height:26px;margin:0 auto;border:1px solid var(--line);border-radius:4px;overflow:hidden;vertical-align:middle}
.stepper .st-btn{flex:0 0 auto;width:24px;border:0;padding:0;line-height:1;background:#f2f2f2;color:var(--brand);font-size:15px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center}
.stepper .st-btn:hover{background:var(--brand);color:#fff}
.stepper .st-qty{flex:0 0 auto;width:40px;text-align:center;padding:0;font-size:12px;border:0;border-inline-start:1px solid var(--line);border-inline-end:1px solid var(--line);-moz-appearance:textfield;border-radius:0}
.stepper .st-qty::-webkit-outer-spin-button,.stepper .st-qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ── Buttons / badges ──────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--brand);color:#fff;border:0;
  padding:9px 16px;border-radius:10px;font-weight:700;cursor:pointer;font-size:14px}
.btn:hover{background:var(--brand-2);text-decoration:none;color:#fff}
.btn.sm{padding:6px 10px;font-size:13px}
.btn.ghost{background:#fff;color:var(--brand);border:1px solid var(--brand)}
.btn.gray{background:var(--gray)} .btn.gray:hover{background:#2b2e33}
.btn.ok{background:var(--ok)} .btn.bad{background:var(--bad)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:12px;font-weight:700}
.b-active{background:#e6f4ec;color:var(--ok)}
.b-suspended{background:#fdf3e1;color:var(--warn)}
.b-blocked{background:#fdecea;color:var(--bad)}
.b-info{background:#eef0f4;color:var(--gray)}

/* ── Forms ─────────────────────────────────────────────── */
.field{margin-bottom:12px}
.field label{display:block;font-weight:700;margin-bottom:5px;font-size:13px;color:var(--gray)}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-2);border-color:var(--brand-2)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}

/* ── Alerts ────────────────────────────────────────────── */
.alert{padding:12px 14px;border-radius:10px;margin-bottom:14px;font-weight:600;border:1px solid transparent}
.alert.ok{background:#e6f4ec;color:var(--ok);border-color:#bfe3cd}
.alert.bad{background:#fdecea;color:var(--bad);border-color:#f5c6c2}
.alert.warn{background:#fdf3e1;color:#8a6500;border-color:#f0dcae}
.alert.info{background:#eef2fb;color:#33507e;border-color:#cdd9f1}

/* ── Login ─────────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--ink),var(--brand-d));padding:20px}
.login-card{background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.4);
  width:100%;max-width:380px;padding:28px}
.login-card .logo{text-align:center;font-weight:800;font-size:26px;color:var(--brand);margin-bottom:4px}
.login-card .sub{text-align:center;color:var(--muted);margin-bottom:20px;font-size:13px}

/* ── Product cards / dealer storefront ─────────────────── */
.product{display:flex;flex-direction:column;overflow:hidden}
.product .ph{aspect-ratio:1;background:#f0f1f4;display:flex;align-items:center;justify-content:center}
.product .ph img{width:100%;height:100%;object-fit:cover}
.product .body{padding:12px;display:flex;flex-direction:column;gap:6px;flex:1}
.product .nm{font-weight:700;font-size:14px;min-height:38px}
.product .pr{color:var(--brand);font-weight:800}
.product .old{color:var(--muted);text-decoration:line-through;font-size:12px}
.qty{display:flex;align-items:center;gap:6px}
.qty input{width:64px;text-align:center}

/* ── Mobile bottom nav (dealer) ────────────────────────── */
.bottomnav{position:fixed;inset-inline:0;bottom:0;background:#fff;border-top:1px solid var(--line);
  display:none;justify-content:space-around;padding:6px 0;z-index:40}
.bottomnav a{flex:1;text-align:center;color:var(--muted);font-size:11px;font-weight:600;padding:4px}
.bottomnav a.active{color:var(--brand)}
.bottomnav a .ic{display:block;font-size:18px}

/* ── Notifications dropdown ────────────────────────────── */
.notif-panel{position:absolute;inset-inline-end:12px;top:56px;width:340px;max-width:92vw;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.22);z-index:60;display:none;overflow:hidden}
.notif-panel.open{display:block}
.notif-panel .hd{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;background:#faf7f7}
.notif-panel .notif-list{max-height:60vh;overflow-y:auto}
.notif-panel .it{display:block;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink);text-decoration:none}
.notif-panel a.it:hover{background:#f4f5f7;text-decoration:none}
.notif-panel .it.unread{background:#fbf0f0;border-inline-start:3px solid var(--brand)}
.notif-panel .it .bd{color:var(--gray);margin-top:2px}
.notif-panel .it .tm{color:var(--muted);font-size:11px;margin-top:3px}
/* Override the white .topbar a colour for panel content (panel lives inside topbar) */
.topbar .notif-panel a.it,.topbar .notif-panel a.it b{color:var(--ink);opacity:1}
.topbar .notif-panel .it .bd{color:var(--gray)}
.topbar .notif-panel .hd b{color:var(--ink);opacity:1}
.topbar .notif-panel .hd a{color:var(--muted);opacity:1}

.muted{color:var(--muted)} .right{text-align:end} .center{text-align:center}
.mt{margin-top:14px} .flex{display:flex;gap:10px;align-items:center} .wrap{flex-wrap:wrap}

/* ── Responsive ────────────────────────────────────────── */
@media(max-width:820px){
  .cols-2{grid-template-columns:1fr}
  .topnav{display:none}
  .content{padding:14px 12px 78px;max-width:100%}
  .bottomnav{display:flex}

  /* Admin sidebar becomes a slide-in drawer toggled by the ☰ button */
  .navToggle{display:inline-flex}
  .sidebar{display:block;position:fixed;top:58px;inset-inline-start:0;bottom:0;width:264px;max-width:84vw;
    transform:translateX(-100%);transition:transform .25s ease;z-index:70;overflow-y:auto;
    box-shadow:0 12px 40px rgba(0,0,0,.35)}
  [dir=rtl] .sidebar{transform:translateX(100%)}
  .nav-open .sidebar{transform:translateX(0)}
  .nav-overlay{display:none;position:fixed;inset:58px 0 0 0;background:rgba(0,0,0,.45);z-index:60}
  .nav-open .nav-overlay{display:block}
  .nav-open{overflow:hidden}
}

/* ── Print (PDF) ───────────────────────────────────────── */
@media print{
  .topbar,.sidebar,.bottomnav,.no-print,.btn{display:none!important}
  body{background:#fff}
  .card,.table-wrap{box-shadow:none;border:1px solid #ccc}
  .content{max-width:none;padding:0}
}