/* DistroSentry — Red Raider theme (red / black / white) */
:root{
  --red:#cc0000;
  --red-d:#a30000;
  --black:#1a1a1a;
  --ink:#222;
  --muted:#6b7280;
  --line:#e5e7eb;
  --bg:#f4f5f7;
  --card:#ffffff;
  --good:#15803d;
  --good-bg:#dcfce7;
  --warn:#b45309;
  --warn-bg:#fef3c7;
  --bad:#b91c1c;
  --bad-bg:#fee2e2;
}
*{box-sizing:border-box}
body{
  margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink);
  font-size:15px;line-height:1.5;
}
a{color:var(--red-d);text-decoration:none}
a:hover{text-decoration:underline}

/* ===== sidebar layout ===== */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:215px;flex-shrink:0;background:var(--black);color:#fff;
  display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;
  border-right:3px solid var(--red);overflow-y:auto;z-index:40;
}
.side-brand{display:flex;align-items:center;gap:11px;padding:18px 18px 16px}
.logo{
  width:34px;height:34px;border-radius:7px;background:var(--red);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:19px;flex-shrink:0;
}
.bname{font-weight:800;letter-spacing:.02em;line-height:1.1}
.btenant{font-size:11.5px;color:#c9c9c9}

.sidenav{display:flex;flex-direction:column;padding:6px 12px 24px}
.sidenav a{
  color:#d2d2d2;padding:9px 13px;border-radius:7px;font-size:14px;font-weight:600;
  display:flex;align-items:center;gap:8px;margin-bottom:2px;
}
.sidenav a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.sidenav a.active{background:var(--red);color:#fff}
.side-group{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:#7a7a7a;
  font-weight:700;padding:14px 13px 5px;
}
.badge{
  background:var(--red);color:#fff;border-radius:999px;font-size:11px;font-weight:800;
  padding:1px 7px;min-width:18px;text-align:center;margin-left:auto;
}
.sidenav a.active .badge{background:#fff;color:var(--red)}

/* main area to the right of sidebar */
.main-area{flex:1;margin-left:215px;display:flex;flex-direction:column;min-height:100vh}
.topbar{
  display:flex;align-items:center;gap:16px;background:#fff;border-bottom:1px solid var(--line);
  padding:0 26px;height:58px;position:sticky;top:0;z-index:30;
}
.topbar-title{font-weight:700;font-size:16px;color:var(--black)}
.hamburger{display:none;background:none;border:none;font-size:22px;color:var(--black);cursor:pointer;padding:4px}
.userbox{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--muted)}
.uname{color:var(--ink);font-weight:600}
.rolechip{background:var(--black);color:#fff;border-radius:5px;padding:2px 8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.logout{color:var(--ink);border:1px solid var(--line);padding:5px 11px;border-radius:6px;font-size:13px}
.logout:hover{background:#f4f5f7;text-decoration:none}

/* content */
.wrap{max-width:1080px;width:100%;margin:0 auto;padding:26px 26px 0;flex:1}
.foot{text-align:center;color:var(--muted);font-size:12.5px;padding:30px 0 40px}

h1{font-size:23px;margin:0 0 4px;color:var(--black)}
h2{font-size:17px;margin:0 0 12px;color:var(--black)}
.sub{color:var(--muted);margin:0 0 22px;font-size:14px}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:20px;margin-bottom:18px}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.card-head h2{margin:0}

/* stat row */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:16px 18px}
.stat .v{font-size:28px;font-weight:800;color:var(--black);line-height:1}
.stat .l{font-size:12.5px;color:var(--muted);margin-top:6px;text-transform:uppercase;letter-spacing:.04em}
.stat.alert .v{color:var(--red)}

/* tables */
table.grid{width:100%;border-collapse:collapse}
table.grid th{
  text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  padding:9px 10px;border-bottom:2px solid var(--line);
}
table.grid td{padding:11px 10px;border-bottom:1px solid #f1f2f4;font-size:14px;vertical-align:top}
table.grid tr:last-child td{border-bottom:none}
table.grid td.r,table.grid th.r{text-align:right}
.muted{color:var(--muted)}
.sku{font-size:12px;color:var(--muted)}

/* pills */
.pill{display:inline-block;padding:3px 10px;border-radius:6px;font-size:12px;font-weight:700}
.pill.open{background:#eef2ff;color:#4338ca}
.pill.partial{background:var(--warn-bg);color:var(--warn)}
.pill.shipped{background:var(--good-bg);color:var(--good)}
.pill.closed{background:#eef2f5;color:#475569}
.pill.received{background:var(--good-bg);color:var(--good)}
.pill.low{background:var(--bad-bg);color:var(--bad)}
.pill.ok{background:var(--good-bg);color:var(--good)}
.pill.private{background:#ede9fe;color:#6d28d9;margin-left:6px}
.pill.back{background:var(--warn-bg);color:var(--warn)}
.pill.pending{background:#eef2f5;color:#475569}
.pill.synced{background:var(--good-bg);color:var(--good)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:7px;background:var(--red);color:#fff;border:none;
  border-radius:7px;padding:9px 16px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;
}
.btn:hover{background:var(--red-d);text-decoration:none;color:#fff}
.btn.ghost{background:#fff;color:var(--black);border:1px solid var(--line)}
.btn.ghost:hover{background:#f8f8f8}
.btn.dark{background:var(--black)}
.btn.dark:hover{background:#000}
.btn.sm{padding:6px 12px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* forms */
label{display:block;font-size:13px;font-weight:600;margin:0 0 5px;color:#374151}
input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{
  width:100%;padding:9px 11px;border:1px solid #cfd4dc;border-radius:7px;font-size:14px;font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--red);outline-offset:0;border-color:var(--red)}
.field{margin-bottom:14px}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row .field{flex:1;min-width:160px}

/* flash */
.flash{padding:12px 16px;border-radius:9px;margin-bottom:18px;font-size:14px;font-weight:600;border:1px solid}
.flash-success{background:var(--good-bg);color:var(--good);border-color:#bbf7d0}
.flash-error{background:var(--bad-bg);color:var(--bad);border-color:#fecaca}
.flash-info{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}

/* callouts */
.note{display:flex;gap:11px;padding:13px 15px;border-radius:9px;font-size:13.5px;margin-top:14px;border:1px solid}
.note.warn{background:var(--warn-bg);color:#92400e;border-color:#fde68a}
.note.info{background:#eff6ff;color:#1e40af;border-color:#bfdbfe}
.note.good{background:var(--good-bg);color:#166534;border-color:#bbf7d0}

.empty{text-align:center;color:var(--muted);padding:40px 20px}
.right{margin-left:auto}
.inline-form{display:inline}
hr.sep{border:none;border-top:1px solid var(--line);margin:18px 0}

@media(max-width:820px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .sidebar{transform:translateX(-100%);transition:transform .2s ease}
  .sidebar.open{transform:translateX(0)}
  .main-area{margin-left:0}
  .hamburger{display:block}
}