/* Wholesale portal + admin */
.portal{display:grid; grid-template-columns:220px 1fr; gap:40px; padding:32px 0 80px; align-items:start}
.portal-nav{position:sticky; top:calc(var(--header-h) + 24px)}
.portal-nav .who{padding:0 0 16px; margin-bottom:10px; border-bottom:1px solid var(--line)}
.portal-nav .who b{display:block; font-family:var(--display); font-size:17px}
.portal-nav .who span{font-size:13px; color:var(--steel); display:block}
.portal-nav a{display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:var(--r); font-size:15px; color:var(--ink-2)}
.portal-nav a:hover{background:var(--frost)}
.portal-nav a.active{background:var(--garnet-soft); color:var(--garnet); font-weight:600}
.portal-nav .signout{margin-top:14px; padding-top:14px; border-top:1px solid var(--line); color:var(--steel); font-size:14px}
.portal-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:24px; flex-wrap:wrap}
.portal-head h1{font-size:clamp(28px,3.2vw,40px); margin:0}
.portal-head p{margin:4px 0 0; color:var(--steel)}
@media (max-width:860px){
  .portal{grid-template-columns:1fr; gap:20px}
  .portal-nav{position:static; display:flex; gap:6px; overflow-x:auto; padding-bottom:6px}
  .portal-nav .who,.portal-nav .signout{display:none}
  .portal-nav a{white-space:nowrap; border:1px solid var(--line)}
}

.dash{display:grid; grid-template-columns:2fr 1fr; gap:24px}
.dash .card h3{margin-bottom:12px}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:24px}
.kpi{border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 20px; background:#fff}
.kpi b{font-family:var(--display); font-size:28px; display:block; letter-spacing:-0.02em}
.kpi span{font-size:13px; color:var(--steel)}
@media (max-width:1000px){ .dash{grid-template-columns:1fr} }
@media (max-width:600px){ .kpis{grid-template-columns:1fr} }

.olist{width:100%; border-collapse:collapse; font-size:14px}
.olist th{text-align:left; font-size:13px; color:var(--steel); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--line); background:var(--frost)}
.olist td{padding:13px 12px; border-bottom:1px solid var(--line-2); vertical-align:middle}
.olist tr:hover td{background:#FAFBFC}
.olist .num{text-align:right; font-variant-numeric:tabular-nums}
.olist a.ono{font-weight:600; color:var(--garnet)}
.olist a.ono:hover{text-decoration:underline}
.status{display:inline-block; font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px}
.status.info{background:var(--info-soft); color:var(--info)}
.status.ok{background:var(--ok-soft); color:var(--ok)}
.status.warn{background:var(--warn-soft); color:var(--warn)}
.status.err{background:#FBE9E7; color:#8E1E14}

.quick-add{display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:14px 16px; background:var(--frost); border-radius:var(--r-lg); margin-bottom:20px}
.quick-add input{padding:10px 12px; border:1px solid var(--line); border-radius:var(--r); background:#fff}
.quick-add input[name=sku]{width:150px; text-transform:uppercase}
.quick-add input[name=qty]{width:80px}
.quick-add label{font-size:14px; font-weight:600}

.cart-bar{position:sticky; bottom:0; background:#fff; border-top:1px solid var(--line); padding:14px 0; margin-top:24px; box-shadow:0 -10px 30px rgba(20,25,30,.06); z-index:20}
.cart-bar .container{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.cart-bar b{font-family:var(--display); font-size:20px}

.checkout{display:grid; grid-template-columns:1.6fr 1fr; gap:32px; align-items:start}
.summary{position:sticky; top:calc(var(--header-h) + 24px)}
.summary .line{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line-2); font-size:14px}
.summary .total{display:flex; justify-content:space-between; padding:14px 0 0; font-family:var(--display); font-size:22px; font-weight:700}
.summary .total small{font-family:var(--body); font-size:12px; color:var(--steel); font-weight:400; display:block}
@media (max-width:900px){ .checkout{grid-template-columns:1fr} .summary{position:static} }
.upload{border:1.5px dashed var(--line); border-radius:var(--r-lg); padding:18px; text-align:center; font-size:14px; color:var(--steel); background:#fff}
.upload input{display:none}
.upload.has{border-style:solid; border-color:var(--ok); color:var(--ok); background:var(--ok-soft)}

/* Printable PO */
.po{max-width:860px; margin:0 auto; padding:40px 24px; font-size:14px}
.po .po-head{display:flex; justify-content:space-between; align-items:flex-start; gap:24px; border-bottom:3px solid var(--ink); padding-bottom:20px; margin-bottom:24px}
.po h1{font-size:30px; margin:0 0 4px}
.po .meta{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:24px}
.po .meta b{display:block; font-size:12px; color:var(--steel); font-weight:600; margin-bottom:4px}
.po table{width:100%; border-collapse:collapse}
.po th{text-align:left; border-bottom:2px solid var(--ink); padding:8px 6px; font-size:12px}
.po td{border-bottom:1px solid var(--line); padding:9px 6px}
.po .num{text-align:right; font-variant-numeric:tabular-nums}
.po tfoot td{border:0; font-weight:700; font-size:16px; padding-top:14px}
.po .foot{margin-top:32px; font-size:12px; color:var(--steel); border-top:1px solid var(--line); padding-top:14px}
.po-actions{display:flex; gap:10px; justify-content:center; padding:20px}

/* Login */
.login{min-height:calc(100vh - var(--header-h) - 36px); display:grid; grid-template-columns:1fr 1fr}
.login .pane{padding:clamp(32px,6vw,80px) var(--gutter); display:flex; flex-direction:column; justify-content:center}
.login .pane.photo{background:var(--ink) center/cover no-repeat; color:#fff; position:relative}
.login .pane.photo::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(27,31,36,.2), rgba(27,31,36,.85))}
.login .pane.photo > *{position:relative}
.login .pane.photo h2{color:#fff; font-size:clamp(28px,3vw,40px)}
.login .pane.photo p{color:#D6DCE3; max-width:44ch}
.login form{max-width:420px}
.demo-creds{margin-top:28px; padding:14px 16px; background:var(--frost); border-radius:var(--r); font-size:13px; color:var(--steel)}
.demo-creds code{background:#fff; padding:1px 6px; border-radius:4px; color:var(--ink)}
@media (max-width:860px){ .login{grid-template-columns:1fr; min-height:0} .login .pane.photo{min-height:260px} }

/* Admin */
.admin-tools{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px}
.admin-tools select,.admin-tools input{padding:10px 12px; border:1px solid var(--line); border-radius:var(--r); background:#fff}
.olist select.status-select{padding:6px 8px; border:1px solid var(--line); border-radius:var(--r); font-size:13px; background:#fff}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(560px, 100%); background:#fff; box-shadow:-20px 0 60px rgba(0,0,0,.2); z-index:60; transform:translateX(100%); transition:transform .25s ease; overflow:auto; padding:28px}
.drawer.open{transform:none}
.drawer .close{position:absolute; top:16px; right:16px; background:none; border:1px solid var(--line); border-radius:var(--r); width:36px; height:36px}
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.3); z-index:55; display:none}
.scrim.open{display:block}

/* Mobile: keep grid children from forcing horizontal scroll */
.portal > div{min-width:0}
.dash > *,.checkout > *,.card{min-width:0}
.admin-tools{min-width:0}
.admin-tools input[type=search]{flex:1 1 180px; min-width:0}
.quick-add input{min-width:0}
.quick-add input[name=sku]{width:120px}
@media (max-width:600px){
  .portal-head{flex-direction:column; align-items:stretch}
  .portal-head > div:last-child{display:flex; gap:8px; flex-wrap:wrap}
  .portal-head .btn{flex:1; text-align:center}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi:last-child{grid-column:span 2}
  .olist th,.olist td{padding:10px 8px; font-size:13px}
  .cart-bar .container{flex-direction:column; align-items:stretch}
  .cart-bar .container > div:last-child{display:flex; gap:8px}
  .cart-bar .container > div:last-child .btn{flex:1}
  .drawer{width:100%; padding:20px}
}
@media (max-width:600px){
  .cart-table,.cart-table tbody{display:block}
  .cart-table thead{display:none}
  .cart-table tr{display:grid; grid-template-columns:1fr auto; grid-template-areas:"name total" "pack price" "qty remove"; gap:6px 12px; padding:14px 16px; border-bottom:1px solid var(--line-2); align-items:center}
  .cart-table td{display:block; padding:0; border:0}
  .cart-table td:nth-child(1){grid-area:name}
  .cart-table td:nth-child(2){grid-area:pack; color:var(--steel)}
  .cart-table td:nth-child(3){grid-area:price; text-align:right; color:var(--steel)}
  .cart-table td:nth-child(3)::before{content:"per case "}
  .cart-table td:nth-child(4){grid-area:qty}
  .cart-table td:nth-child(5){grid-area:total; text-align:right; font-size:16px}
  .cart-table td:nth-child(6){grid-area:remove; text-align:right}
}