/* ============================================================================
   dashboard.css — order-management dashboard (isolated from the public site).
   Mobile-first. Loads on top of the vendor Bootstrap 4 grid/utilities.
   Brand accent #e57632. Verified for no horizontal overflow at 390px.
   ============================================================================ */

:root {
  --orange: #e57632;
  --orange-d: #c75f20;
  --ink: #22292d;
  --muted: #6b7480;
  --line: #e3e7eb;
  --bg: #f5f6f8;
}

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 15px;
}

/* ---- top bar -------------------------------------------------------------- */
.dash-topbar { background: var(--ink); color: #fff; }
.dash-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  flex-wrap: wrap;
}
.dash-brand {
  color: #fff; font-weight: 800; font-size: 1.15rem; text-decoration: none;
  letter-spacing: .3px; white-space: nowrap;
}
.dash-brand span { color: var(--orange); }
.dash-user { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.dash-who { color: #cbd3da; font-size: .85rem; white-space: nowrap; }
.dash-logout { font-weight: 700; }

/* burger — only on small screens */
.dash-burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 4px;
  width: 42px; height: 42px; padding: 0;
  background: transparent; border: 1px solid rgba(255,255,255,.4); border-radius: 6px;
  cursor: pointer;
}
.dash-burger span { display: block; height: 2px; width: 20px; margin: 0 auto; background: #fff; }

/* ---- nav ------------------------------------------------------------------ */
.dash-nav { background: #2c353b; }
.dash-nav-inner { display: flex; flex-wrap: wrap; }
.dash-nav-link {
  display: block; color: #d6dde2; text-decoration: none; font-weight: 600;
  padding: 13px 16px; min-height: 46px; border-bottom: 3px solid transparent;
}
.dash-nav-link:hover { color: #fff; }
.dash-nav-link.active { color: #fff; border-bottom-color: var(--orange); }

/* ---- page shell ----------------------------------------------------------- */
.dash-main { padding: 18px 14px 60px; }
.page-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.page-head h1 { font-size: 1.35rem; font-weight: 800; margin: 0; }
.page-head .spacer { margin-left: auto; }

/* ---- flash ---------------------------------------------------------------- */
.flash { border-radius: 8px; padding: 11px 14px; margin-bottom: 16px; font-size: .92rem; }
.flash-ok { background: #e8f6ee; border: 1px solid #b8e3c8; color: #1c6b3c; }
.flash-err { background: #fdecea; border: 1px solid #f5c6cb; color: #a1271b; }

/* ---- order cards (list) --------------------------------------------------- */
.order-card {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 14px; height: 100%; display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(20,30,40,.04);
}
.order-card .oc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.order-card .oc-num { font-weight: 800; color: var(--orange-d); word-break: break-all; }
.order-card .oc-meta { color: var(--muted); font-size: .85rem; margin: 2px 0; word-break: break-word; }
.order-card .oc-cust { font-weight: 700; margin: 4px 0 2px; word-break: break-word; }
.order-card .oc-actions { margin-top: auto; padding-top: 12px; display: grid; gap: 8px; }

/* ---- status + assignee badges --------------------------------------------- */
.badge-status {
  display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .3px; padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.s-reviewing  { background: #fff3e0; color: #b5650f; }
.s-received   { background: #e7f0fb; color: #1c5fb0; }
.s-testing_inspection { background: #d7f5ec; color: #137a61; }
.s-in_transit { background: #eee6fb; color: #6b3fb3; }
.s-shipped    { background: #e3f3ef; color: #1d7a63; }
.s-delivered  { background: #e8f6ee; color: #1c6b3c; }
.s-cancelled  { background: #f1f2f4; color: #6b7480; }
.badge-pool   { background: var(--orange); color: #fff; }
.badge-mine   { background: #1c6b3c; color: #fff; }
.badge-assigned { background: #54606b; color: #fff; }

/* ---- detail / forms ------------------------------------------------------- */
.card-box { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.card-box h2 { font-size: 1.05rem; font-weight: 800; margin: 0 0 12px; }
.kv { padding: 8px 0; border-bottom: 1px solid #f0f2f4; }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .3px; }
.kv .v { font-weight: 600; word-break: break-word; white-space: pre-wrap; }

.dash-main label { font-weight: 600; font-size: .86rem; margin-bottom: 4px; }
/* 16px inputs stop iOS from zooming the viewport on focus */
.dash-main .form-control, .dash-main .custom-select, .dash-main select.form-control {
  font-size: 16px; min-height: 46px; border-radius: 8px;
}
.dash-main textarea.form-control { min-height: 90px; }

/* tap-friendly buttons everywhere */
.btn { min-height: 44px; border-radius: 8px; font-weight: 700; }
.btn-orange { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn-orange:hover, .btn-orange:focus { background: var(--orange-d); border-color: var(--orange-d); color: #fff; }
.btn-sm { min-height: 38px; }
.btn-group-stack { display: grid; gap: 8px; }

.status-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.status-actions .btn { flex: 1 1 auto; }

/* ---- small screens: collapse nav behind the burger ------------------------ */
@media (max-width: 767.98px) {
  .dash-burger { display: flex; }
  .dash-who { display: none; }
  .dash-nav { max-height: 0; overflow: hidden; transition: max-height .2s ease; }
  .dash-nav.open { max-height: 260px; }
  .dash-nav-inner { flex-direction: column; }
  .dash-nav-link { border-bottom: 1px solid rgba(255,255,255,.08); }
  .dash-nav-link.active { border-bottom-color: var(--orange); }
}

/* ---- login ---------------------------------------------------------------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.login-card { width: 100%; max-width: 380px; margin: 0; }
.login-title { font-size: 1.5rem; font-weight: 800; margin: 0; }
.login-title span { color: var(--orange); }
.login-sub { color: var(--muted); margin: 2px 0 18px; }

/* ---- wider screens -------------------------------------------------------- */
@media (min-width: 768px) {
  body { font-size: 16px; }
  .dash-main { padding: 24px 22px 70px; }
  .page-head h1 { font-size: 1.6rem; }
}

/* ==========================================================================
   PHASE 2 — sidebar/bottom-tab layout, stat cards, tables, performance UI.
   Palette: sidebar #1a1a2e, accent #e57632, success #198754, danger #dc3545.
   ========================================================================== */
:root{
  --sidebar:#1a1a2e; --accent:#e57632; --accent-d:#c75f20;
  --success:#198754; --danger:#dc3545; --pagebg:#f4f6f9; --txt:#212529;
  --card:#fff; --line:#e6e9ee; --muted:#6b7480;
}
body.has-chrome{ background:var(--pagebg); color:var(--txt); }

/* ---- shell ---- */
.layout{ min-height:100vh; }
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:240px; background:var(--sidebar);
  color:#fff; display:flex; flex-direction:column; padding:18px 0; z-index:30;
}
.sb-brand{ display:flex; align-items:center; gap:10px; padding:6px 20px 18px; color:#fff; text-decoration:none; }
.sb-logo{ background:var(--accent); color:#fff; font-weight:800; border-radius:9px; padding:8px 10px; letter-spacing:.5px; }
.sb-name{ font-weight:800; line-height:1.05; display:flex; flex-direction:column; }
.sb-name small{ color:var(--accent); font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:1px; }
.sb-nav{ display:flex; flex-direction:column; margin-top:8px; }
.sb-link{ display:flex; align-items:center; gap:13px; color:#c7ccd6; text-decoration:none; padding:13px 22px; font-weight:600; border-left:3px solid transparent; }
.sb-link i{ width:20px; text-align:center; font-size:1.05rem; }
.sb-link:hover{ color:#fff; background:rgba(255,255,255,.05); }
.sb-link.active{ color:#fff; background:rgba(229,118,50,.16); border-left-color:var(--accent); }
.sb-logout{ margin-top:auto; display:flex; align-items:center; gap:13px; color:#c7ccd6; text-decoration:none; padding:13px 22px; font-weight:600; }
.sb-logout:hover{ color:#fff; }

.main{ margin-left:240px; min-height:100vh; display:flex; flex-direction:column; }
.topbar{ background:var(--card); border-bottom:1px solid var(--line); padding:14px 22px; display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:20; }
.tb-title{ font-size:1.15rem; font-weight:800; }
.tb-user{ margin-left:auto; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.9rem; }
.tb-user .fa-user-circle{ font-size:1.4rem; color:var(--accent); }
.tb-role{ background:#eef1f5; border-radius:999px; padding:2px 9px; font-size:.72rem; font-weight:700; text-transform:uppercase; }
.content{ padding:20px 22px 32px; flex:1; }

.bottomnav{ display:none; }

.sec-title{ font-size:1.05rem; font-weight:800; margin:6px 0 12px; }
.page-sub{ color:var(--muted); margin:-4px 0 16px; }

/* ---- stat cards ---- */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin-bottom:8px; }
.stat-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; display:flex; align-items:center; gap:14px; box-shadow:0 1px 3px rgba(20,30,40,.05); }
.stat-ic{ width:52px; height:52px; border-radius:13px; display:grid; place-items:center; font-size:1.4rem; flex:0 0 auto; }
.stat-num{ font-size:1.7rem; font-weight:800; line-height:1; }
.stat-label{ color:var(--muted); font-size:.84rem; margin-top:3px; }
.stat-sub{ font-size:.78rem; margin-top:4px; font-weight:600; }
.tone-accent .stat-ic{ background:#fdeee3; color:var(--accent); }
.tone-green  .stat-ic{ background:#e3f3ea; color:var(--success); }
.tone-red    .stat-ic{ background:#fde8ea; color:var(--danger); }
.tone-grey   .stat-ic{ background:#eef1f5; color:#6c757d; }
.tone-blue   .stat-ic{ background:#e7f0fd; color:#0d6efd; }

/* ---- status badges ---- */
.badge-status{ display:inline-block; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.3px; padding:4px 10px; border-radius:999px; color:#fff; white-space:nowrap; }
.s-reviewing{ background:#6c757d; color:#fff; }
.s-received{ background:#0d6efd; color:#fff; }
.s-testing_inspection{ background:#20c997; color:#fff; }
.s-in_transit{ background:#fd7e14; color:#fff; }
.s-shipped{ background:#6f42c1; color:#fff; }
.s-delivered{ background:#198754; color:#fff; }
.s-cancelled{ background:#dc3545; color:#fff; }
.badge-pool{ background:var(--accent); color:#fff; }
.badge-soft{ background:#eef1f5; color:#445; }
.badge-on{ background:#198754; color:#fff; }
.badge-off{ background:#adb5bd; color:#fff; }

/* ---- panels / forms ---- */
.panel{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; margin-bottom:16px; box-shadow:0 1px 3px rgba(20,30,40,.04); }
.panel h2{ font-size:1.02rem; font-weight:800; margin:0 0 14px; display:flex; align-items:center; gap:8px; }
.panel h2 .fa{ color:var(--accent); }
.content .form-control, .content .custom-select{ min-height:46px; font-size:16px; border-radius:9px; border:1px solid #cfd6de; }
.content textarea.form-control{ min-height:96px; }
.content .form-control:focus{ border-color:var(--accent); box-shadow:0 0 0 .2rem rgba(229,118,50,.18); }
.content label{ font-weight:600; font-size:.85rem; margin-bottom:4px; }

.btn{ min-height:44px; border-radius:9px; font-weight:700; }
.btn-sm{ min-height:36px; }
.btn-orange{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-orange:hover,.btn-orange:focus{ background:var(--accent-d); border-color:var(--accent-d); color:#fff; }

.filterbar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.filterbar .form-control,.filterbar .custom-select{ max-width:260px; }

/* ---- orders table ---- */
.tbl-wrap{ background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
table.otable{ width:100%; border-collapse:collapse; }
table.otable th, table.otable td{ padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); font-size:.92rem; vertical-align:middle; }
table.otable th{ background:#fafbfc; font-size:.74rem; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); cursor:pointer; white-space:nowrap; user-select:none; }
table.otable th.sort i{ opacity:.4; margin-left:4px; }
table.otable th.sort-asc i, table.otable th.sort-desc i{ opacity:1; color:var(--accent); }
table.otable tr:hover td{ background:#fcfdfe; }
.onum{ font-weight:800; color:var(--accent-d); }
.order-cards{ display:none; }
.ocard{ background:var(--card); border:1px solid var(--line); border-radius:13px; padding:14px; margin-bottom:12px; }
.ocard .oc-top{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }

/* progress bar */
.pbar{ position:relative; background:#eceef2; border-radius:999px; height:20px; overflow:hidden; min-width:120px; }
.pbar-fill{ height:100%; border-radius:999px; }
.pbar-fill.t-green{ background:var(--success); } .pbar-fill.t-orange{ background:var(--accent); } .pbar-fill.t-red{ background:var(--danger); }
.pbar-pct{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; color:#1c1c1c; }
.pbar-lg{ height:28px; }

.stale-row td, .stale{ background:#fff4f4 !important; }
.stale-tag{ color:var(--danger); font-weight:800; font-size:.74rem; }

/* status action buttons */
.status-line{ display:flex; flex-wrap:wrap; gap:8px; }
.status-line .sbtn{ border:1px solid var(--line); background:#fff; color:#333; border-radius:9px; padding:9px 14px; font-weight:700; min-height:44px; cursor:pointer; }
.status-line .sbtn.cur{ color:#fff; }
.status-line .sbtn.cur.s-reviewing{ background:#6c757d;border-color:#6c757d;} .status-line .sbtn.cur.s-received{ background:#0d6efd;border-color:#0d6efd;}
.status-line .sbtn.cur.s-in_transit{ background:#fd7e14;border-color:#fd7e14;} .status-line .sbtn.cur.s-shipped{ background:#6f42c1;border-color:#6f42c1;}
.status-line .sbtn.cur.s-cancelled{ background:#dc3545;border-color:#dc3545;}
.status-line .sbtn.cur.s-dispute{ background:#dc3545;border-color:#dc3545;}
.status-line .sbtn.next{ border-color:var(--accent); color:var(--accent); }
/* dispute badge (problem state — same red as cancelled) */
.s-dispute{ background:#dc3545; color:#fff; }
/* completed steps: greyed out + disabled */
.status-line .sbtn.done{ background:#eef1f5; color:#8a929c; border-color:#e6e9ee; }
.status-line .sbtn[disabled]{ opacity:.6; cursor:default; }
/* cancel / dispute inline reveal via native <details> */
.reveal-box{ margin-top:4px; }
.reveal-box>summary{ display:inline-flex; align-items:center; gap:6px; list-style:none; }
.reveal-box>summary::-webkit-details-marker{ display:none; }
.sbtn.danger{ border-color:#dc3545; color:#dc3545; background:#fff; }
.reveal-box[open]>summary.sbtn.danger{ background:#dc3545; color:#fff; }
.reveal-form{ margin-top:10px; max-width:380px; }
.reason-readonly{ background:#fff4f4; border:1px solid #f3c6c9; border-radius:10px; padding:14px; }
.reason-readonly .k{ color:#a1271b; font-size:.74rem; text-transform:uppercase; letter-spacing:.3px; font-weight:800; }
.reason-readonly .v{ font-weight:600; white-space:pre-wrap; word-break:break-word; }

/* mini table */
.mini{ width:100%; border-collapse:collapse; }
.mini th,.mini td{ padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; font-size:.9rem; }
.mini th{ font-size:.72rem; text-transform:uppercase; color:var(--muted); letter-spacing:.4px; }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* bare (login / forced change) */
.bare-body{ background:var(--pagebg); }
.bare{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px; }
.bare .login-card{ width:100%; max-width:400px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; box-shadow:0 10px 30px rgba(20,30,40,.08); }
.login-title{ font-size:1.5rem; font-weight:800; margin:0; } .login-title span{ color:var(--accent); }
.login-sub{ color:var(--muted); margin:2px 0 18px; }

/* ---- MOBILE ---- */
@media (max-width:991.98px){
  .sidebar{ display:none; }
  .main{ margin-left:0; }
  .content{ padding:16px 14px calc(74px + env(safe-area-inset-bottom)); }
  .topbar{ padding:12px 14px; }
  .tb-name{ display:none; }
  .bottomnav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40;
    background:var(--sidebar); border-top:1px solid rgba(255,255,255,.08);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .bn-link{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 2px; color:#aeb4c2; text-decoration:none; font-size:.66rem; font-weight:700; }
  .bn-link i{ font-size:1.15rem; }
  .bn-link.active{ color:var(--accent); }
  table.otable{ display:none; }
  .order-cards{ display:block; }
  .filterbar .form-control,.filterbar .custom-select{ max-width:none; flex:1 1 100%; }
}
@media (min-width:992px){ .order-cards{ display:none; } }

/* ==========================================================================
   PHASE 4 — premium polish (CSS-only, layered over Phase 1–3; later wins).
   Compact 14px base · 8px cards / 4px controls · tighter order detail ·
   refined sidebar, stat cards, status buttons, orders table.
   ========================================================================== */

/* ---- general: compact base, consistent radii, soft card shadow ---- */
body, body.has-chrome { font-size: 14px; background: #f4f6f9; }
.content { padding: 20px 20px 32px; }
.panel, .stat-card, .tbl-wrap, .reason-readonly, .filterbar { border-radius: 8px; }
.panel { padding: 20px; border: 1px solid #e9ecef; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.stat-card { padding: 18px; border: 1px solid #e9ecef; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.btn, .sbtn { border-radius: 4px; font-weight: 700; }
.content .form-control, .content .custom-select,
.filterbar .form-control, .filterbar .custom-select { border-radius: 4px; }
.content .form-control:focus, .content .custom-select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 2px rgba(229,118,50,.18);
}

/* ---- sidebar: alignment, hover, active, pinned logout ---- */
.sidebar { padding: 16px 0; }
.sb-brand { padding: 4px 18px 16px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.07); }
.sb-logo { padding: 7px 9px; border-radius: 8px; font-size: .9rem; }
.sb-name { font-size: .98rem; }
.sb-nav { margin-top: 8px; gap: 2px; }
.sb-link { padding: 11px 20px; gap: 12px; font-size: .9rem; transition: background .12s ease, color .12s ease; }
.sb-link i { width: 18px; text-align: center; font-size: 1rem; }
.sb-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sb-link.active { background: rgba(229,118,50,.15); color: #fff; border-left: 3px solid var(--accent); }
.sb-logout { margin: 8px 12px 0; padding: 11px 16px; border-radius: 6px; font-size: .9rem; border-top: 1px solid rgba(255,255,255,.07); }
.sb-logout i { width: 18px; text-align: center; }

/* ---- topbar ---- */
.topbar { padding: 12px 20px; }
.tb-title { font-size: 1.05rem; }

/* ---- stat cards ---- */
.stat-grid { gap: 14px; }
.stat-ic { width: 48px; height: 48px; border-radius: 10px; font-size: 1.25rem; }
.stat-num { font-size: 1.7rem; letter-spacing: -.4px; }
.stat-label { font-size: .76rem; text-transform: uppercase; letter-spacing: .4px; }

/* ---- panel header: icon + title + subtle bottom border ---- */
.panel h2 { font-size: .95rem; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #eef1f4; }

/* ---- order detail: compact labels/values (~30% tighter rows) ---- */
.kv { padding: 6px 0; }
.kv .k { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #8a929c; font-weight: 700; }
.kv .v { font-size: 15px; color: #212529; font-weight: 600; margin-top: 2px; }

/* ---- status badge: compact pill ---- */
.badge-status { font-size: .68rem; padding: 4px 9px; }

/* ---- status buttons: next solid orange · done grey pill ✓ · upcoming outlined ---- */
.status-line { gap: 8px; align-items: center; }
.status-line .sbtn { min-height: 38px; padding: 8px 15px; font-size: .85rem; }
.status-line .sbtn.next { background: var(--accent); border-color: var(--accent); color: #fff; }
.status-line .sbtn.next:hover { background: var(--accent-d); border-color: var(--accent-d); color: #fff; }
.status-line .sbtn.done { min-height: 28px; padding: 3px 12px; font-size: .74rem; border-radius: 999px;
  background: #eef1f5; color: #6c757d; border-color: #e6e9ee; opacity: 1; }
.status-line .sbtn:not(.next):not(.done) { background: #fff; color: #9aa2ab; border: 1px solid #dfe3e8; }

/* ---- cancel: small red text link (not a button) ---- */
.cancel-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px;
  color: #dc3545; font-weight: 700; font-size: .82rem; cursor: pointer; list-style: none; }
.cancel-link::-webkit-details-marker { display: none; }
.cancel-link:hover { text-decoration: underline; }

/* ---- tracking link input: monospace, grey bg, orange copy ---- */
#trackUrl { font-family: 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 13px; background: #f4f6f9; color: #334; }

/* ---- orders list: hover row, centered status, right-aligned actions, clean filter bar ---- */
table.otable td, table.otable th { padding: 11px 14px; font-size: .86rem; }
table.otable tbody tr:hover td { background: #f8f9fa; }
table.otable th:nth-child(3), table.otable td:nth-child(3) { text-align: center; }
table.otable th:nth-child(6), table.otable td:nth-child(6) { text-align: right; white-space: nowrap; }
table.otable td:nth-child(6) .btn { min-height: 30px; padding: 4px 12px; font-size: .8rem; }
.filterbar { padding: 12px; background: #fff; border: 1px solid #e9ecef; align-items: center; }
.filterbar .form-control, .filterbar .custom-select { min-height: 38px; font-size: .88rem; }
.filterbar .btn { min-height: 38px; }

/* keep desktop controls compact; mobile inputs stay 16px (avoid iOS zoom) */
@media (min-width: 768px) {
  body, body.has-chrome { font-size: 14px; }
  .page-head h1 { font-size: 1.4rem; }
  .content .form-control, .content .custom-select, .content textarea.form-control { font-size: 14px; }
  .content .form-control, .content .custom-select { min-height: 40px; }
}

/* ---- unified status form (left Customer & Order panel) ----
   The parent .kv .v sets white-space:pre-wrap (for multi-line addresses), which
   preserved the source newlines between the <select>, the hidden conditional
   groups and the Update button as ~235px of blank space. Reset it here and lay
   the form out as a flex column so hidden (display:none) groups take zero space
   and the gap between the dropdown and the button is a tidy 12px. */
#statusForm { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; white-space: normal; }
#statusForm .status-cond { margin-top: 0 !important; width: 100%; }
#statusForm .btn { margin-top: 0 !important; }

/* ---- Customer & Order: 2-column field grid (short fields side by side;
   addresses / additional details / status span full width) ---- */
.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.kv-full { grid-column: 1 / -1; }
@media (max-width: 575px) { .kv-grid { grid-template-columns: 1fr; } }

/* ---- Employees: staff list rows + tighter add-employee form ---- */
.staff-row { display:flex; align-items:center; gap:14px; padding:14px 4px; border-bottom:1px solid #eef1f4; }
.staff-row:last-child { border-bottom:0; }
.staff-row:hover { background:#f8f9fa; }
.staff-avatar { width:42px; height:42px; border-radius:50%; background:#e9ecef; color:#495057;
  display:grid; place-items:center; font-weight:800; font-size:.9rem; flex:0 0 auto; }
.staff-info { flex:1 1 auto; min-width:0; }
.staff-name { font-weight:700; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.staff-meta { color:#8a929c; font-size:.78rem; margin-top:3px; text-transform:uppercase; letter-spacing:.3px; }
.staff-actions { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.staff-actions input { max-width:160px; }
.staff-add .form-group { margin-bottom:14px; }
.staff-add label { margin-bottom:4px; }
@media(max-width:575px){
  .staff-row { flex-wrap:wrap; }
  .staff-actions { flex:1 1 100%; flex-wrap:wrap; margin-top:10px; }
  .staff-actions input { max-width:none; }
  .staff-actions .form-inline { flex:1 1 100%; flex-wrap:nowrap; }
  .staff-actions .form-inline input { flex:1 1 auto; min-width:0; }
}