:root{
  --brand:#c8102e;          /* overridden per-tenant at runtime */
  --brand-dark:#9b0c23;
  --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb; --bg:#f3f4f6;
  --ok:#16a34a; --warn:#b45309; --danger:#dc2626;
  --radius:10px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}   /* keep the HTML hidden attribute authoritative over flex/grid rules */
body{margin:0;font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:14px}
button{font-family:inherit;cursor:pointer}
a{color:var(--brand)}
.error{color:var(--danger);font-size:13px}

/* ---------- buttons ---------- */
.btn{border:1px solid transparent;border-radius:8px;padding:8px 14px;font-size:14px;font-weight:600;background:#fff;color:var(--ink)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-ghost{background:transparent;border-color:transparent;color:#fff}
.btn-block{width:100%;padding:11px}
.btn-cart{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.35)}
.btn-sm{padding:5px 10px;font-size:13px}
.btn-outline{background:#fff;border-color:var(--line)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1f2937,#111827);gap:16px;padding:20px}
.login-card{background:#fff;border-radius:14px;padding:28px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.brand{margin:0;font-size:30px;font-weight:800;color:var(--ink)}
.brand span{color:var(--brand)}
.login-sub{margin:0 0 6px;color:var(--muted)}
.login-card label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:13px}
.login-card input{padding:10px;border:1px solid var(--line);border-radius:8px;font-size:15px}
.login-demo{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--muted)}
.chip{border:1px solid var(--line);background:#f9fafb;border-radius:20px;padding:6px 12px;font-size:12px;text-align:left}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.login-foot{color:#9ca3af;font-size:12px}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;
  background:var(--brand);color:#fff;padding:0 18px;height:56px}
.tenant-name{font-weight:800;font-size:18px;letter-spacing:.3px}
.topbar-nav{display:flex;gap:4px;flex:1}
.navlink{background:transparent;border:none;color:#fff;opacity:.85;padding:8px 12px;border-radius:7px;font-size:14px;font-weight:600}
.navlink:hover{opacity:1;background:rgba(255,255,255,.12)}
.navlink.active{opacity:1;background:rgba(0,0,0,.18)}
.topbar-right{display:flex;align-items:center;gap:10px}
.user-badge{font-size:13px;opacity:.9}
.cart-count{display:inline-block;min-width:18px;background:#fff;color:var(--brand);border-radius:10px;padding:0 6px;font-size:12px;text-align:center}

/* ---------- layout ---------- */
#main{max-width:1280px;margin:0 auto;padding:18px}
.catalog{display:grid;grid-template-columns:230px 1fr;gap:18px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.panel-pad{padding:16px}
.section-title{font-size:16px;font-weight:700;margin:0 0 12px}

/* ---------- category sidebar (Wolf-style finder) ---------- */
.finder{position:sticky;top:74px}
.finder h3{margin:0;padding:13px 14px;border-bottom:1px solid var(--line);font-size:14px}
.cat-group{border-bottom:1px solid var(--line)}
.cat-head{display:flex;align-items:center;gap:9px;width:100%;border:none;background:#fff;padding:11px 14px;font-weight:700;font-size:13px;text-align:left}
.cat-head:hover{background:#f9fafb}
.cat-ico{width:26px;height:26px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;background:#fef3c7}
.cat-ico.bolt{background:#e0e7ff}.cat-ico.cloth{background:#dcfce7}
.cat-children{display:none;padding:2px 0 8px}
.cat-group.open .cat-children{display:block}
.cat-child{display:block;width:100%;text-align:left;border:none;background:transparent;padding:7px 14px 7px 50px;color:var(--muted);font-size:13px}
.cat-child:hover,.cat-child.active{color:var(--brand);background:#fff5f6;font-weight:600}
.cat-all{padding:10px 14px;font-size:13px;font-weight:700;color:var(--brand);background:#fff;border:none;width:100%;text-align:left;border-bottom:1px solid var(--line)}

/* ---------- catalogue table ---------- */
.cat-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.search{flex:1;display:flex;gap:8px}
.search input{flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.cat-meta{color:var(--muted);font-size:13px;white-space:nowrap}

.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tbl th{background:#f9fafb;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:10px;border-bottom:1px solid var(--line)}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:hover td{background:#fafafa}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.p-thumb{width:38px;height:38px;border-radius:6px;border:1px solid var(--line);object-fit:cover;background:#fff;cursor:pointer}
.p-name{font-weight:600;cursor:pointer}
.p-name:hover{color:var(--brand);text-decoration:underline}
.p-thumb:hover{border-color:var(--brand)}
.p-code{color:var(--muted);font-size:12px}
.price-net{font-weight:700}
.price-gross{color:var(--muted);font-size:12px}
.rabat-tag{display:inline-block;background:#fef3c7;color:var(--warn);border-radius:5px;padding:1px 6px;font-size:11px;font-weight:700}
.stock-ok{color:var(--ok);font-weight:600}
.stock-low{color:var(--warn);font-weight:600}
.qty{width:58px;padding:6px;border:1px solid var(--line);border-radius:7px;text-align:center}

/* ---------- cart drawer ---------- */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40}
.drawer{position:fixed;top:0;right:0;width:420px;max-width:94vw;height:100vh;background:var(--bg);z-index:50;display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(0,0,0,.2)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;background:var(--brand);color:#fff;padding:14px 16px}
.drawer-head h2{margin:0;font-size:17px}
.drawer-head .btn-ghost{font-size:18px}
.drawer-body{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.cart-line{display:grid;grid-template-columns:1fr auto;gap:4px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:10px}
.cart-line .l-name{font-weight:600}
.cart-line .l-meta{color:var(--muted);font-size:12px}
.cart-line .l-controls{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.cart-line .l-total{font-weight:700;text-align:right}
.link-danger{background:none;border:none;color:var(--danger);font-size:12px}

.fin-box{background:#fff7ed;border:1px solid #fed7aa;border-radius:9px;padding:12px}
.fin-box h4{margin:0 0 8px;font-size:13px;color:var(--warn)}
.fin-row{display:flex;justify-content:space-between;font-size:13px;padding:2px 0}
.fin-row.total{border-top:1px dashed #fdba74;margin-top:6px;padding-top:6px;font-weight:700}
.fin-neg{color:var(--danger)} .fin-pos{color:var(--ok)}

.cart-foot{background:#fff;border:1px solid var(--line);border-radius:9px;padding:12px;display:flex;flex-direction:column;gap:10px}
.pay-opts{display:flex;gap:8px}
.pay-opt{flex:1;border:1px solid var(--line);border-radius:8px;padding:9px;text-align:center;font-size:13px;font-weight:600;background:#fff}
.pay-opt.active{border-color:var(--brand);color:var(--brand);background:#fff5f6}
.summary-row{display:flex;justify-content:space-between;font-size:14px}
.summary-row.grand{font-size:17px;font-weight:800}
textarea.note{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px;font-family:inherit;resize:vertical;min-height:46px}

/* ---------- generic tables / cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.stat .k{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.stat .v{font-size:22px;font-weight:800;margin-top:4px}
.badge{display:inline-block;border-radius:20px;padding:2px 10px;font-size:12px;font-weight:700}
.badge.submitted{background:#dbeafe;color:#1d4ed8}
.badge.confirmed{background:#dcfce7;color:#15803d}
.badge.ziralno{background:#ede9fe;color:#6d28d9}
.badge.pouzece{background:#fef3c7;color:#b45309}

/* ---------- product detail modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:70;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:#fff;border-radius:14px;max-width:760px;width:100%;max-height:90vh;overflow:auto;position:relative;box-shadow:0 25px 60px rgba(0,0,0,.4)}
.modal-close{position:absolute;top:12px;right:12px;z-index:2;border:none;background:#f3f4f6;border-radius:50%;width:34px;height:34px;font-size:16px;line-height:1}
.modal-close:hover{background:#e5e7eb}
.modal-grid{display:grid;grid-template-columns:260px 1fr}
.modal-media{background:#f9fafb;display:flex;align-items:center;justify-content:center;padding:24px;border-right:1px solid var(--line)}
.modal-media img{max-width:100%;max-height:240px}
.modal-body{padding:22px 24px}
.modal-cat{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.modal-title{margin:4px 0 6px;font-size:22px}
.modal-code{color:var(--muted);font-size:13px;margin-bottom:14px}
.modal-spec{width:100%;border-collapse:collapse;margin-bottom:14px}
.modal-spec td{padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.modal-spec td:first-child{color:var(--muted);width:120px}
.modal-prices{display:flex;flex-direction:column;gap:6px;background:#f9fafb;border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:14px}
.modal-prices>div{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.modal-prices .hl b{font-size:16px}
.modal-prices .price-net{color:var(--brand)}
.modal-desc{font-size:14px;color:#374151;line-height:1.5}
.modal-actions{display:flex;gap:10px;align-items:center;margin-top:8px}
.modal-actions .qty{width:80px}
.modal-actions .modal-add{flex:1}
@media(max-width:620px){.modal-grid{grid-template-columns:1fr}.modal-media{border-right:none;border-bottom:1px solid var(--line)}}

.muted{color:var(--muted)}
.empty{padding:40px;text-align:center;color:var(--muted)}
.row-actions{display:flex;gap:8px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 18px;border-radius:9px;z-index:80;box-shadow:0 8px 20px rgba(0,0,0,.25)}

@media(max-width:820px){
  .catalog{grid-template-columns:1fr}
  .finder{position:static}
  .topbar-nav{display:none}
}