/* ============================================
   Rainier Rock & Dirt — Owner Portal (demo)
   ============================================ */
:root {
  --p-bg: #f1f0ec;
  --p-surface: #ffffff;
  --p-ink: #1c1917;
  --p-gray: #78716c;
  --p-line: #e5e2da;
  --p-navy: #0c1a12;
  --p-green: #1a3a26;
  --p-green-mid: #2e6b42;
  --p-amber: #f59e0b;
  --p-amber-soft: #fef3c7;
  --p-radius: 14px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  background: var(--p-bg); color: var(--p-ink);
  line-height: 1.5; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1,h2,h3 { font-family:'Barlow Condensed','Arial Narrow',sans-serif; text-transform:uppercase; letter-spacing:.02em; }

.portal-shell { display:flex; min-height:100vh; }

/* ---- Sidebar ---- */
.sidebar {
  width: 248px; flex-shrink:0; background: var(--p-navy); color:#e7e0d3;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.sidebar-brand { display:flex; align-items:center; gap:11px; padding:20px 18px; border-bottom:1px solid rgba(255,255,255,.1); }
.sidebar-brand img { width:42px; height:42px; border-radius:8px; }
.sidebar-brand b { font-family:'Barlow Condensed',sans-serif; font-size:17px; text-transform:uppercase; line-height:1.1; display:block; color:#fff; }
.sidebar-brand small { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--p-amber); }
.sidebar-nav { padding:14px 10px; flex:1; }
.sidebar-nav .grp { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#8a9a8f; padding:14px 10px 6px; }
.sidebar-nav a {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:9px; font-size:14px; font-weight:500;
  color:#cfd8d1; transition:all .15s; margin-bottom:2px;
}
.sidebar-nav a:hover { background:rgba(245,158,11,.1); color:#fbbf24; }
.sidebar-nav a.active { background:var(--p-amber); color:var(--p-navy); font-weight:700; }
.sidebar-foot { padding:16px 18px; border-top:1px solid rgba(255,255,255,.1); font-size:11.5px; color:#8a9a8f; }
.sidebar-foot a { color:#fbbf24; }

/* ---- Main ---- */
.portal-main { flex:1; min-width:0; }
.topbar {
  background:var(--p-surface); border-bottom:1px solid var(--p-line);
  padding:14px 28px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  position:sticky; top:0; z-index:50;
}
.topbar h1 { font-size:24px; }
.topbar .crumb { font-size:12px; color:var(--p-gray); }
.topbar-right { display:flex; align-items:center; gap:14px; }
.user-chip { display:flex; align-items:center; gap:9px; background:var(--p-bg); border-radius:999px; padding:6px 14px 6px 6px; font-size:13px; font-weight:600; }
.user-chip .avatar { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--p-green-mid),var(--p-green)); color:#fbbf24; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
.demo-pill { background:var(--p-amber-soft); color:#b45309; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; border-radius:999px; }

.content { padding:26px 28px 60px; max-width:1280px; }

/* ---- KPI cards ---- */
.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:24px; }
.kpi {
  background:var(--p-surface); border-radius:var(--p-radius); padding:20px 22px;
  border:1px solid var(--p-line); position:relative; overflow:hidden;
}
.kpi::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--p-amber); }
.kpi.k-green::before { background:#15803d; }
.kpi.k-blue::before { background:#2563eb; }
.kpi.k-red::before { background:#dc2626; }
.kpi .lbl { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--p-gray); }
.kpi .val { font-family:'Barlow Condensed',sans-serif; font-size:36px; font-weight:700; line-height:1.1; margin:4px 0 2px; }
.kpi .sub { font-size:12.5px; color:var(--p-gray); }
.kpi .sub b.up { color:#15803d; } .kpi .sub b.down { color:#dc2626; }

/* ---- Panels ---- */
.panel { background:var(--p-surface); border:1px solid var(--p-line); border-radius:var(--p-radius); margin-bottom:24px; overflow:hidden; }
.panel-head { padding:16px 22px; border-bottom:1px solid var(--p-line); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.panel-head h2 { font-size:19px; }
.panel-head .hint { font-size:12px; color:var(--p-gray); }
.panel-body { padding:22px; }
.panel-body.flush { padding:0; }

.two-col { display:grid; grid-template-columns:1.4fr 1fr; gap:24px; align-items:start; }
.three-col { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

/* ---- Tables ---- */
.ptable { width:100%; border-collapse:collapse; font-size:13.5px; }
.ptable th {
  text-align:left; padding:11px 18px; background:#faf9f6;
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--p-gray);
  border-bottom:1px solid var(--p-line);
}
.ptable td { padding:12px 18px; border-bottom:1px solid var(--p-line); vertical-align:middle; }
.ptable tr:last-child td { border-bottom:0; }
.ptable tr:hover td { background:#fbf7ee; }
.ptable .num { text-align:right; font-variant-numeric:tabular-nums; }
.ptable .neg { color:#dc2626; } .ptable .pos { color:#15803d; }

.badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; }
.badge-green { background:#dcfce7; color:#15803d; }
.badge-amber { background:#fef3c7; color:#b45309; }
.badge-red { background:#fee2e2; color:#b91c1c; }
.badge-blue { background:#dbeafe; color:#1d4ed8; }
.badge-gray { background:#e7e5e4; color:#57534e; }
.badge.clickable { cursor:pointer; user-select:none; }
.badge.clickable:hover { filter:brightness(.95); }

/* ---- Dispatch board ---- */
.board { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.lane { background:#faf9f6; border:1px solid var(--p-line); border-radius:12px; padding:12px; min-height:200px; }
.lane h3 { font-size:14px; letter-spacing:.08em; color:var(--p-gray); padding:2px 6px 10px; display:flex; justify-content:space-between; }
.lane h3 .cnt { background:var(--p-line); border-radius:999px; padding:0 8px; font-size:12px; }
.job-card {
  background:var(--p-surface); border:1px solid var(--p-line); border-left:4px solid var(--p-amber);
  border-radius:10px; padding:12px 14px; margin-bottom:10px; cursor:pointer;
  transition:transform .15s, box-shadow .15s; font-size:13px;
}
.job-card:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(12,26,18,.12); }
.job-card b { display:block; font-size:13.5px; }
.job-card .meta { color:var(--p-gray); font-size:12px; margin-top:3px; }
.job-card .truck-tag { display:inline-block; margin-top:7px; background:var(--p-navy); color:#fbbf24; font-size:11px; font-weight:700; border-radius:6px; padding:2px 8px; }
.job-card.c-green { border-left-color:#15803d; }
.job-card.c-blue { border-left-color:#2563eb; }
.job-card.c-gray { border-left-color:#a8a29e; opacity:.75; }

/* ---- Progress bars ---- */
.bar-row { margin-bottom:14px; }
.bar-row .bar-lbl { display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:5px; }
.bar { height:9px; background:#ece9e1; border-radius:999px; overflow:hidden; }
.bar > i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--p-green-mid),#15803d); }
.bar > i.warn { background:linear-gradient(90deg,#f59e0b,#d97706); }
.bar > i.danger { background:linear-gradient(90deg,#ef4444,#dc2626); }

/* ---- Buttons ---- */
.pbtn {
  display:inline-flex; align-items:center; gap:7px;
  font:600 13px 'Inter',sans-serif; padding:9px 16px; border-radius:8px;
  border:1px solid var(--p-line); background:var(--p-surface); cursor:pointer; transition:all .15s;
}
.pbtn:hover { border-color:var(--p-amber); color:#b45309; }
.pbtn-primary { background:var(--p-amber); border-color:var(--p-amber); color:var(--p-navy); font-weight:700; }
.pbtn-primary:hover { background:#fbbf24; color:var(--p-navy); }

/* ---- Staff cards ---- */
.staff-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.staff-card { background:var(--p-surface); border:1px solid var(--p-line); border-radius:var(--p-radius); padding:22px; }
.staff-card .top { display:flex; gap:14px; align-items:center; margin-bottom:14px; }
.staff-card .avatar {
  width:52px; height:52px; border-radius:14px; flex-shrink:0;
  background:linear-gradient(135deg,var(--p-green-mid),var(--p-green));
  color:#fbbf24; font-weight:800; font-size:18px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Barlow Condensed',sans-serif;
}
.staff-card h3 { font-size:19px; }
.staff-card .role { font-size:12.5px; color:var(--p-gray); }
.staff-card dl { font-size:12.5px; }
.staff-card dl div { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed var(--p-line); }
.staff-card dl div:last-child { border-bottom:0; }
.staff-card dt { color:var(--p-gray); }
.staff-card dd { font-weight:600; }

/* ---- Toast ---- */
.toast {
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(90px);
  background:var(--p-navy); color:#fff; padding:13px 22px; border-radius:10px;
  border-left:4px solid var(--p-amber); box-shadow:0 10px 30px rgba(0,0,0,.25);
  font-size:13.5px; z-index:1000; transition:transform .3s cubic-bezier(.2,.9,.3,1.2); max-width:92vw;
}
.toast.show { transform:translateX(-50%) translateY(0); }

/* ---- Chart canvas sizing ---- */
.chart-wrap { position:relative; height:280px; }

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .kpi-row { grid-template-columns:repeat(2,1fr); }
  .board { grid-template-columns:repeat(2,1fr); }
  .two-col, .three-col, .staff-grid { grid-template-columns:1fr; }
}
@media (max-width: 720px) {
  .sidebar { display:none; }
  .board { grid-template-columns:1fr; }
  .kpi-row { grid-template-columns:1fr; }
  .content { padding:18px 14px 50px; }
}