/* J.P. Textiles portal: shared styles for the buyer account and admin panel.
   Clean white ground, deep maroon brand colour, gold details (matches the website). */
:root{
  --bg:#FAF7F3; --surface:#FFFFFF; --ink:#22181A; --muted:#6A5C5F; --line:#ECE3D8;
  --brand:#7A1430; --brand-ink:#FFFFFF; --gold:#B8862B; --soft:#FAF3EA;
  --ok:#1E7A46; --ok-bg:#E5F4EA; --warn:#9A6200; --warn-bg:#FFF2D9; --bad:#B42318; --bad-bg:#FDE8E6; --info:#1F5FA8; --info-bg:#E6EFFA;
  --display:"Rozha One", Georgia, serif; --body:"Mukta", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5}
a{color:var(--brand)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:1.15;text-wrap:balance}
h1{font-size:1.8rem} h2{font-size:1.4rem} h3{font-size:1.15rem}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.7rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--brand);font-family:var(--display);font-size:1.3rem}
.brand svg{width:30px;height:20px;color:var(--gold)}
.brand small{display:block;font-family:var(--body);font-size:.7rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.toran{height:4px;background:linear-gradient(90deg,var(--brand),var(--gold),var(--brand))}
nav.tabs{display:flex;gap:.3rem;flex-wrap:wrap}
nav.tabs a{padding:.35rem .8rem;border-radius:6px;text-decoration:none;color:var(--ink);font-weight:500}
nav.tabs a.on{background:var(--soft);color:var(--brand)}
main{padding-block:1.5rem 3rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font:inherit;font-weight:700;padding:.6rem 1.1rem;border-radius:6px;border:1px solid var(--brand);background:var(--brand);color:var(--brand-ink);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:var(--surface);color:var(--brand)}
.btn.small{padding:.3rem .7rem;font-size:.9rem}
.btn.danger{background:var(--surface);color:var(--bad);border-color:var(--bad)}
.btn[disabled]{opacity:.55;cursor:wait}
.row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.spread{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:1rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.2rem}
.muted{color:var(--muted)}
.lab{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.8rem}
.stat{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:8px;padding:.8rem 1rem}
.stat b{display:block;font-family:var(--display);font-weight:400;font-size:1.6rem;color:var(--brand);font-variant-numeric:tabular-nums}
.stat.due b{color:var(--bad)}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:.6rem .75rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--soft);white-space:nowrap}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
tr.click{cursor:pointer} tr.click:hover td{background:var(--soft)}
.pill{display:inline-block;padding:.1rem .6rem;border-radius:20px;font-size:.8rem;font-weight:700;white-space:nowrap}
.s-new{background:var(--info-bg);color:var(--info)}
.s-confirmed{background:var(--warn-bg);color:var(--warn)}
.s-packed{background:#F1E6FA;color:#6B2FA0}
.s-dispatched{background:#E3F3F6;color:#11667A}
.s-delivered{background:var(--ok-bg);color:var(--ok)}
.s-cancelled{background:#EEE;color:#666}
.due-pos{color:var(--bad);font-weight:700} .due-zero{color:var(--ok);font-weight:700}
form .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem}
label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;font-weight:500;color:var(--muted)}
input,select,textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:.55rem .7rem;width:100%;min-width:0}
textarea{min-height:70px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
.items{display:flex;flex-direction:column;gap:.6rem}
.item{display:grid;gap:.5rem;align-items:end;border:1px solid var(--line);border-radius:8px;padding:.7rem;background:var(--soft)}
.item.buyer{grid-template-columns:2fr 1.6fr 1.2fr .8fr .9fr auto}
.item.admin{grid-template-columns:1.8fr 1.4fr 1.1fr .8fr .8fr .8fr .9fr auto}
@media (max-width:820px){.item.buyer,.item.admin{grid-template-columns:1fr 1fr}.item .x{grid-column:1/-1}}
.msg{padding:.7rem 1rem;border-radius:6px;font-weight:500}
.msg.err{background:var(--bad-bg);color:var(--bad)}
.msg.ok{background:var(--ok-bg);color:var(--ok)}
.login{max-width:420px;margin:3rem auto}
.login .card{padding:1.6rem}
.timeline{display:flex;gap:0;flex-wrap:wrap;margin:.5rem 0}
.timeline .step{flex:1;min-width:110px;position:relative;padding-top:1.4rem;font-size:.85rem;color:var(--muted)}
.timeline .step::before{content:"";position:absolute;top:.45rem;left:0;right:0;height:3px;background:var(--line)}
.timeline .step::after{content:"";position:absolute;top:0;left:0;width:14px;height:14px;border-radius:50%;background:var(--surface);border:3px solid var(--line)}
.timeline .step.done{color:var(--ink)}
.timeline .step.done::before{background:var(--gold)}
.timeline .step.done::after{background:var(--gold);border-color:var(--gold)}
.timeline .step b{display:block}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.8rem}
.kv div b{display:block}
.empty{text-align:center;padding:2.5rem 1rem;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:#fff;padding:.6rem 1.1rem;border-radius:8px;z-index:20;font-weight:500}
.hide-sm{display:revert}
@media (max-width:640px){.hide-sm{display:none}h1{font-size:1.5rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}