/* Detroit Perk Warehouse — portal styles (plain CSS, no build step).
   Brand: cream / espresso / gold, Fraunces + Inter (matches detroitperk.com). */

:root{
  --cream:#F7F2EA; --paper:#FFFFFF; --ink:#1C1B1B; --mocha:#6B5B4D;
  --gold:#C9A063; --gold-deep:#A9823F; --line:#E7DFD2; --muted:#8A8078;
  --ok:#3F7D4E; --ok-bg:#E7F0E7; --warn:#B45309; --warn-bg:#FBEEDD;
  --danger:#9F1D1D; --danger-bg:#F7E4E1; --info:#2C5578; --info-bg:#E6EEF4;
  --radius:14px; --shadow:0 1px 2px rgba(28,27,27,.05),0 8px 24px rgba(28,27,27,.06);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--cream); color:var(--ink); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Fraunces','Georgia',serif; font-weight:600; margin:0; letter-spacing:-.01em}
a{color:inherit}
.muted{color:var(--muted)}
.small{font-size:.82rem}

/* ---- Top bar ---- */
.topbar{
  background:var(--ink); color:#F3ECE0; display:flex; align-items:center; gap:1.25rem;
  padding:.7rem 1.25rem; position:sticky; top:0; z-index:20;
}
.topbar .brand{font-family:'Fraunces',serif; font-weight:600; font-size:1.05rem; letter-spacing:.02em}
.topbar .brand b{color:var(--gold)}
.topbar nav{display:flex; gap:.35rem; flex-wrap:wrap; margin-left:.5rem}
.topbar nav a{
  color:#D9D0C4; text-decoration:none; padding:.4rem .7rem; border-radius:9px;
  font-size:.9rem; font-weight:500;
}
.topbar nav a:hover{background:rgba(255,255,255,.08); color:#fff}
.topbar nav a.active{background:var(--gold); color:var(--ink); font-weight:600}
.topbar .spacer{flex:1}
.topbar .who{font-size:.82rem; color:#B7ADA0; text-align:right; line-height:1.2}
.topbar .who b{color:#F3ECE0; display:block; font-weight:600}
.topbar form{margin:0}
.btn-logout{background:transparent;border:1px solid rgba(255,255,255,.25);color:#E9E1D5;
  padding:.35rem .7rem;border-radius:9px;font-size:.82rem;cursor:pointer}
.btn-logout:hover{background:rgba(255,255,255,.1)}

/* ---- Layout ---- */
.wrap{max-width:1120px; margin:0 auto; padding:1.6rem 1.25rem 4rem}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap}
.page-head h1{font-size:1.7rem}
.page-head p{margin:.25rem 0 0; color:var(--muted)}

/* ---- Cards ---- */
.grid{display:grid; gap:1rem}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.card.pad{padding:1.1rem 1.2rem}
.card h3{font-size:1.05rem; margin-bottom:.2rem}
.stat{padding:1.1rem 1.2rem}
.stat .n{font-family:'Fraunces',serif; font-size:2rem; font-weight:600; line-height:1}
.stat .l{color:var(--muted); font-size:.82rem; margin-top:.35rem; text-transform:uppercase; letter-spacing:.04em}
.stat.accent .n{color:var(--gold-deep)}

/* ---- Tables ---- */
table{width:100%; border-collapse:collapse; font-size:.9rem}
thead th{text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); padding:.6rem .75rem; border-bottom:1px solid var(--line); font-weight:600}
tbody td{padding:.65rem .75rem; border-bottom:1px solid var(--line); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#FBF8F2}
.num{text-align:right; font-variant-numeric:tabular-nums}
.cat-row td{background:#F3ECE0; font-family:'Fraunces',serif; font-weight:600; font-size:.9rem}

/* ---- Badges / pills ---- */
.badge{display:inline-block; padding:.18rem .55rem; border-radius:999px; font-size:.74rem; font-weight:600; white-space:nowrap}
.badge.pending{background:var(--warn-bg); color:var(--warn)}
.badge.packing{background:var(--info-bg); color:var(--info)}
.badge.in_transit{background:#EDE7F6; color:#5B3E9B}
.badge.delivered{background:var(--ok-bg); color:var(--ok)}
.badge.cancelled{background:var(--danger-bg); color:var(--danger)}
.badge.role{background:#F0E7D6; color:var(--gold-deep)}
.badge.low{background:var(--danger-bg); color:var(--danger)}
.badge.ok{background:var(--ok-bg); color:var(--ok)}

/* ---- Stock gauge ---- */
.gauge{height:7px; border-radius:999px; background:var(--line); overflow:hidden; min-width:70px}
.gauge>span{display:block; height:100%; background:var(--gold)}
.gauge.low>span{background:var(--danger)}

/* ---- Buttons ---- */
.btn{display:inline-flex; align-items:center; gap:.4rem; border:1px solid transparent; cursor:pointer;
  font-family:inherit; font-size:.88rem; font-weight:600; padding:.5rem .9rem; border-radius:10px; text-decoration:none}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn-primary{background:var(--gold); color:var(--ink)}
.btn-primary:hover{background:var(--gold-deep); color:#fff}
.btn-dark{background:var(--ink); color:#fff}
.btn-dark:hover{background:#000}
.btn-ghost{background:var(--paper); border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold-deep)}
.btn-sm{padding:.32rem .6rem; font-size:.8rem; border-radius:8px}
.btn-danger{background:var(--danger-bg); color:var(--danger)}
.btn-danger:hover{background:#F0D2CE}

/* ---- Stepper ---- */
.stepper{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.stepper button{width:30px; height:32px; border:0; background:var(--paper); font-size:1.1rem; cursor:pointer; color:var(--mocha)}
.stepper button:hover{background:#F3ECE0}
.stepper input{width:44px; height:32px; border:0; border-left:1px solid var(--line); border-right:1px solid var(--line);
  text-align:center; font-family:inherit; font-size:.9rem}

/* ---- Forms ---- */
.field{margin-bottom:1rem}
.field label{display:block; font-size:.82rem; font-weight:600; margin-bottom:.3rem; color:var(--mocha)}
.field input,.field select,.field textarea{
  width:100%; padding:.6rem .7rem; border:1px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:.92rem; background:var(--paper); color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,160,99,.18)}
.form-row{display:flex; gap:1rem; flex-wrap:wrap}
.form-row>*{flex:1; min-width:180px}

/* ---- Alerts ---- */
.alert{padding:.7rem .9rem; border-radius:10px; font-size:.88rem; margin-bottom:1rem}
.alert.success{background:var(--ok-bg); color:var(--ok)}
.alert.error{background:var(--danger-bg); color:var(--danger)}
.alert ul{margin:.3rem 0 0; padding-left:1.1rem}

/* ---- Progress nodes (order flow) ---- */
.flow{display:flex; align-items:center; gap:.35rem}
.flow .node{width:9px; height:9px; border-radius:50%; background:var(--line)}
.flow .node.done{background:var(--gold)}
.flow .bar{flex:1; height:2px; background:var(--line); min-width:16px}
.flow .bar.done{background:var(--gold)}

/* ---- Login ---- */
.login-page{min-height:100vh; display:grid; place-items:center; padding:1.5rem;
  background:linear-gradient(160deg,#211A15,#3A2E23)}
.login-card{background:var(--cream); border-radius:20px; padding:2.4rem 2.2rem; width:100%; max-width:390px; box-shadow:0 20px 60px rgba(0,0,0,.35)}
.login-card .logo{font-family:'Fraunces',serif; font-size:1.5rem; text-align:center; margin-bottom:.15rem}
.login-card .logo b{color:var(--gold-deep)}
.login-card .sub{text-align:center; color:var(--muted); font-size:.85rem; margin-bottom:1.6rem}
.login-card .btn-primary{width:100%; justify-content:center; padding:.7rem; margin-top:.4rem}

.empty{text-align:center; padding:2.5rem 1rem; color:var(--muted)}
.right{text-align:right}
.flex{display:flex; align-items:center; gap:.6rem}
.between{display:flex; align-items:center; justify-content:space-between; gap:.6rem}

/* Cross-portal links (Users lives in HQ now) */
.topbar nav a.jump { border: 1px dashed rgba(255,255,255,.35); }
.topbar nav a.jump:hover { background: var(--gold); color: var(--ink); border-style: solid; }