/* Pioneer Supplies — shared portal chrome (login, staff & admin pages) */

:root{
  --ink:#1B1F1D; --paper:#F6F4EE; --paper-dim:#ECE8DC; --panel:#FFFFFF;
  --red:#C21E1E; --red-dark:#8F1616; --green:#1C7A3E; --amber:#B9800F; --steel:#5B6360; --line:#DCD8CA;
  --font-display:'Oswald', sans-serif; --font-body:'IBM Plex Sans', sans-serif; --font-mono:'IBM Plex Mono', monospace;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); line-height:1.45; }
h1,h2,h3{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em; margin:0; }
.mono{ font-family:var(--font-mono); }
a{ color:var(--red-dark); }
p{ margin:0 0 10px; }

.top-bar{
  background:var(--ink); color:#C7C3B4; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.05em;
  padding:9px 16px; border-bottom:2px solid var(--red);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.top-bar .who{ display:flex; align-items:center; gap:14px; }
.top-bar a{ color:#C7C3B4; text-decoration:none; }
.top-bar a:hover, .top-bar a:focus-visible{ color:#fff; text-decoration:underline; }

.brand{ background:var(--ink); color:#fff; }
.brand-inner{ max-width:1000px; margin:0 auto; padding:22px 20px 18px; display:flex; align-items:center; gap:16px; }
.brand-mark{ flex:none; height:52px; width:auto; display:block; }
.brand-copy h1{ font-size:clamp(22px,5vw,30px); color:#fff; }
.brand-copy h1 span{ color:#D8D4C4; font-weight:500; }
.brand-services{ margin:4px 0 0; color:#C7C3B4; font-size:12.5px; letter-spacing:.03em; }

.admin-nav{ background:var(--paper-dim); border-bottom:1px solid var(--line); }
.admin-nav-inner{ max-width:1000px; margin:0 auto; padding:0 20px; display:flex; gap:2px; flex-wrap:wrap; }
.admin-nav a{
  display:inline-block; padding:12px 14px; font-family:var(--font-mono); font-size:12px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--steel); text-decoration:none; border-bottom:3px solid transparent;
}
.admin-nav a:hover, .admin-nav a:focus-visible{ color:var(--ink); }
.admin-nav a.is-active{ color:var(--ink); border-bottom-color:var(--red); font-weight:600; }

.container{ max-width:1000px; margin:0 auto; padding:30px 16px 60px; }
.container.narrow{ max-width:480px; }

.eyebrow{ font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel); margin:0 0 6px; }
.page-title{ font-size:clamp(24px,5vw,32px); margin-bottom:6px; }
.page-lede{ margin:0 0 24px; font-size:14px; color:var(--steel); max-width:60ch; }

.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }

.card{ background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:22px; }
.card + .card{ margin-top:16px; }

.form-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:640px){ .form-grid{ grid-template-columns:1fr 1fr; } }
.form-card{
  display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit;
  background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:22px;
  transition:border-color .15s ease, transform .15s ease;
}
a.form-card:hover, a.form-card:focus-visible{ border-color:var(--red); transform:translateY(-2px); outline:none; }
.form-card .badge{ width:34px; height:34px; border-radius:3px; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:13px; }
.form-card h3{ font-size:19px; }
.form-card p{ margin:0; font-size:13.5px; color:var(--steel); }
.form-card .cta{ margin-top:auto; padding-top:6px; font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; color:var(--red-dark); text-transform:uppercase; }

/* Forms / inputs */
.field{ margin-bottom:16px; }
.field label{ display:block; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--steel); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:3px; background:var(--panel);
  font-family:var(--font-body); font-size:14.5px; color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber); }
.field .hint{ font-size:12px; color:var(--steel); margin-top:5px; }
.checkbox-field{ display:flex; align-items:center; gap:8px; font-size:14px; }
.checkbox-field input{ width:auto; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  padding:11px 18px; border-radius:3px; border:1px solid var(--ink); background:var(--ink); color:#fff;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; text-decoration:none;
}
.btn:hover, .btn:focus-visible{ background:#000; }
.btn-primary{ background:var(--red); border-color:var(--red); }
.btn-primary:hover, .btn-primary:focus-visible{ background:var(--red-dark); border-color:var(--red-dark); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover, .btn-ghost:focus-visible{ background:var(--paper-dim); }
.btn-danger{ background:#fff; color:var(--red-dark); border-color:var(--red-dark); }
.btn-danger:hover, .btn-danger:focus-visible{ background:var(--red-dark); color:#fff; }
.btn-sm{ padding:7px 12px; font-size:11px; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

/* Tables */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:4px; }
table.data{ width:100%; border-collapse:collapse; background:var(--panel); font-size:13.5px; }
table.data th, table.data td{ padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
table.data th{ font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--steel); background:var(--paper-dim); white-space:nowrap; }
table.data tr:last-child td{ border-bottom:none; }
table.data tr:hover td{ background:var(--paper-dim); }

/* Pills / badges */
.pill{ display:inline-block; padding:3px 9px; border-radius:20px; font-family:var(--font-mono); font-size:11px; letter-spacing:.03em; text-transform:uppercase; }
.pill-green{ background:#E3F3E8; color:var(--green); }
.pill-red{ background:#FBE4E4; color:var(--red-dark); }
.pill-steel{ background:var(--paper-dim); color:var(--steel); }
.pill-amber{ background:#FBEEDA; color:var(--amber); }

/* Alerts */
.alert{ padding:12px 14px; border-radius:3px; font-size:13.5px; margin-bottom:18px; border:1px solid transparent; }
.alert-ok{ background:#E3F3E8; color:#155C2E; border-color:#BEE0C9; }
.alert-error{ background:#FBE4E4; color:#8F1616; border-color:#F3C2C2; }

.stat-grid{ display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:26px; }
@media (min-width:640px){ .stat-grid{ grid-template-columns:repeat(3,1fr); } }
.stat-card{ background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:18px 20px; }
.stat-card .num{ font-family:var(--font-display); font-size:32px; }
.stat-card .label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--steel); margin-top:4px; }

.filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; align-items:flex-end; }
.filter-bar .field{ margin-bottom:0; min-width:150px; flex:1; }
.filter-bar .field.grow{ flex:2; }

.empty-state{ text-align:center; padding:40px 20px; color:var(--steel); font-size:14px; }

.site-footer{ text-align:center; padding:26px 16px 40px; font-size:12px; color:var(--steel); }

.login-wrap{ min-height:calc(100vh - 60px); display:flex; align-items:center; justify-content:center; padding:30px 16px; }
.login-card{ width:100%; max-width:400px; background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:32px; }
.login-card h2{ font-size:24px; margin-bottom:6px; }
.login-card .sub{ font-size:13.5px; color:var(--steel); margin-bottom:22px; }