/* ============================================================
   OMS – Shared Styles (common.css)
   Brand: AMREP Orange #f45423 · Red #ca1f30 · Navy #14233a
   Fonts: Oswald (headings/labels) + Montserrat (body)
   Matched to Amrep Quote Tool design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Oswald:wght@400;500;600;700&display=swap');

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* AMREP brand palette */
  --orange:       #f45423;
  --orange-hover: #d93e12;
  --orange-light: rgba(244,84,35,0.12);
  --orange-glow:  rgba(244,84,35,0.25);
  --orange-border:#f88d6c;
  --red:          #ca1f30;
  --red-dark:     #9e1624;

  /* Navy + surfaces */
  --navy:         #14233a;
  --navy-deep:    #0f1d31;
  --navy-mid:     #233754;
  --navy-light:   #2d4668;
  --surface:      #ffffff;
  --surface-2:    #f5f7fb;
  --surface-3:    #eaf0f9;
  --card:         #ffffff;
  --card-2:       #f5f7fb;
  --card-3:       #eaf0f9;
  --glass:        rgba(15,22,35,0.88);
  --glass-border: rgba(255,255,255,0.07);

  /* Text */
  --text:         #111827;
  --text-2:       #374151;
  --text-3:       #6b7280;
  --muted:        #6b7280;

  /* Lines */
  --line:         rgba(244,84,35,0.12);
  --line-2:       rgba(55,65,81,0.12);
  --line-strong:  rgba(244,84,35,0.22);

  /* Semantic */
  --brand:        #f45423;
  --brand-2:      #ca1f30;
  --danger:       #f87171;
  --danger-bg:    rgba(248,113,113,0.12);
  --success:      #4ade80;
  --warning:      #fbbf24;

  /* Shadows */
  --shadow-sm:    0 1px 3px rgba(15,23,42,0.08);
  --shadow:       0 4px 16px rgba(15,23,42,0.1), 0 1px 4px rgba(15,23,42,0.06);
  --shadow-lg:    0 12px 40px rgba(15,23,42,0.14), 0 4px 12px rgba(15,23,42,0.08);
  --shadow-brand: 0 4px 18px rgba(244,84,35,0.32);

  /* Table rows */
  --row-odd:      #ffffff;
  --row-even:     #f7f9fc;
  --row-hover:    #fff1eb;

  /* Geometry */
  --r-sm:  5px;
  --r:     8px;
  --r-lg:  12px;
  --r-xl:  18px;
  --r-pill:999px;

  /* Rail / Topbar */
  --rail-w:        230px;
  --topbar-h:      104px;
  --header-rule-h: 2px;
  --mobile-tabbar-h: 72px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  0.15s;

  /* Fonts */
  --font-head: 'Oswald', Impact, sans-serif;
  --font-body: 'Montserrat', Arial, sans-serif;
}

body.dark-mode {
  --surface:    #1a2236;
  --surface-2:  #22304a;
  --surface-3:  #2b3e5e;
  --card:       #1a2236;
  --card-2:     #22304a;
  --card-3:     #2b3e5e;
  --text:       #edf0f7;
  --text-2:     #a8b5cc;
  --text-3:     #6a7f9c;
  --muted:      #6a7f9c;
  --line:       rgba(244,84,35,0.14);
  --line-2:     rgba(168,181,204,0.12);
  --line-strong:rgba(244,84,35,0.28);
  --brand:      #f45423;
  --danger:     #f87171;
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.5);
  --shadow:     0 4px 20px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.35);
  --shadow-lg:  0 16px 60px rgba(0,0,0,0.7), 0 4px 16px rgba(0,0,0,0.45);
  --row-odd:    #101827;
  --row-even:   #192641;
  --row-hover:  #223253;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; }
[hidden], .hidden { display:none !important; }
html { margin:0; padding:0; height:100%; font-size:15px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body {
  margin:0;
  font-family:var(--font-body);
  font-size:0.9rem;
  line-height:1.6;
  color:var(--text);
  background:#1a2236;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  min-height:100dvh;
  height:100%;
  touch-action:manipulation;
}

a {
  color:#1d4ed8;
  text-decoration:none;
}

a:hover {
  color:#1e40af;
  text-decoration:none;
}

body.dark-mode a {
  color:#9cc7ff;
}

body.dark-mode a:hover {
  color:#d7e9ff;
  text-decoration:none;
}

/* Ambient background glow */
body::before {
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(ellipse 80% 50% at 15% 0%,  rgba(244,84,35,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 90% 10%, rgba(202,31,48,0.07)  0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 100%,rgba(74,102,142,0.24) 0%, transparent 60%);
}

/* ── Top Navigation Bar (dark navy, matching Quote Tool) ──── */
.topbar, .wrap { position:relative; z-index:1; }
.topbar {
  position:fixed;
  top:0; left:0; right:0;
  z-index:200;
  height:var(--topbar-h);
  min-height:var(--topbar-h);
  display:flex;
  align-items:center;
  gap:16px;
  padding:6px 24px 16px calc(var(--rail-w) + 24px);
  background:rgba(15, 22, 35, 0.92);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:var(--header-rule-h) solid var(--orange);
  box-shadow:0 2px 0 rgba(244,84,35,0.2), 0 2px 12px rgba(0,0,0,0.35);
  color:#edf0f7;
}
body.dark-mode .topbar {
  background:rgba(15, 22, 35, 0.92);
}

/* ── Brand ── */
.brand-left { display:flex; align-items:center; gap:12px; min-width:0; }
.brand-logo {
  position:fixed;
  left:10px; top:8px;
  width:210px; height:72px;
  object-fit:contain; object-position:left center;
  padding:0; background:transparent; border:none;
  display:block; z-index:201;
  max-width:none; max-height:none;
}
.brand-eyebrow {
  font-family:var(--font-head);
  font-size:0.62rem;
  font-weight:400;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:1px;
  line-height:1;
}
.brand-title {
  font-family:var(--font-head);
  font-size:1.05rem;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  line-height:1.1;
  color:#ffffff;
}
.brand-sub { color:rgba(230,235,248,0.7); font-size:0.78rem; }

/* ── Auth Box (header right) ── */
.auth-box {
  margin-left:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:5px;
  min-width:430px;
  max-height:calc(var(--topbar-h) - 16px);
  flex-shrink:0;
}
.auth-meta-row { display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.auth-name { color:#edf0f7; font-size:12px; font-weight:600; line-height:1.2; }
.auth-title { color:rgba(230,235,248,0.7); font-size:12px; line-height:1.2; }
.auth-email { color:rgba(230,235,248,0.7); font-size:12px; line-height:1.2; }
.auth-state { color:rgba(230,235,248,0.9); font-size:0.73rem; font-weight:500; }
.auth-actions {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:nowrap;
  justify-content:flex-end;
}

/* ── User Badges ── */
.user-badge {
  width:28px; height:28px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); background:var(--surface-2); color:var(--text);
  font-family:var(--font-head); font-size:0.62rem;
  letter-spacing:.04em; text-transform:uppercase;
  box-shadow:var(--shadow-sm);
}
body.dark-mode .user-badge { background:#3a557a; color:#fff; border-color:rgba(255,255,255,0.35); }
.active-users { display:flex; flex-direction:row-reverse; gap:6px; align-items:center; flex-wrap:nowrap; justify-content:flex-start; min-height:26px; max-width:none; overflow:visible; }
.active-users .user-badge { width:26px; height:26px; font-size:10px; opacity:.95; }
.active-users .user-badge.me { outline:2px solid var(--brand); outline-offset:1px; }

/* ── Layout ── */
.wrap {
  max-width:none;
  height:100vh;
  min-height:0;
  margin:0;
  padding:calc(var(--topbar-h) + var(--header-rule-h) + 10px) 0 0;
  display:grid;
  gap:14px;
  overflow:hidden;
}
.card {
  background:var(--card);
  border:1px solid var(--line);
  border-top:3px solid var(--orange);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  padding:20px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ── Form Elements ── */
input, button { font:inherit; padding:9px 12px; border:1px solid var(--line-strong); border-radius:0; }
input, select, textarea {
  background:var(--card-2);
  color:var(--text);
  width:100%;
  min-height:40px;
  border:1px solid var(--line-strong);
  border-bottom:2px solid var(--line-strong);
  border-radius:0;
  outline:none;
  font-size:16px;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
select, textarea { font:inherit; padding:9px 12px; }
input::placeholder, textarea::placeholder { color:var(--text-3); font-size:0.82rem; }
input:focus, select:focus, textarea:focus {
  border-color:var(--orange);
  border-bottom-color:var(--orange);
  box-shadow:0 2px 0 var(--orange), 0 0 0 3px var(--orange-light);
  background:var(--card-3);
}
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) {
  border-color:rgba(244,84,35,0.4);
  border-bottom-color:rgba(244,84,35,0.4);
}
input[type="checkbox"],
input[type="radio"] {
  width:16px;
  height:16px;
  min-height:16px;
  padding:0;
  accent-color:var(--orange);
  cursor:pointer;
}
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background:#243857;
  border-color:rgba(255,255,255,0.2);
  color:#f3f7ff;
}
body:not(.dark-mode) input,
body:not(.dark-mode) select,
body:not(.dark-mode) textarea {
  background:#f9fafb;
  border-color:#d1d5db;
  border-bottom-color:#9ca3af;
  color:var(--text);
}
body:not(.dark-mode) input:focus,
body:not(.dark-mode) select:focus,
body:not(.dark-mode) textarea:focus {
  background:#fff;
  border-color:var(--orange);
  border-bottom-color:var(--orange);
  box-shadow:0 2px 0 var(--orange), 0 0 0 3px var(--orange-light);
}
button {
  background:var(--brand); border-color:var(--brand); color:#fff;
  cursor:pointer; font-family:var(--font-head);
  text-transform:uppercase; letter-spacing:.04em; font-weight:500;
  transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
button:hover { background:var(--orange-hover); }
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid var(--line-strong);
  border-bottom:3px solid transparent;
  border-radius:0;
  padding:8px 18px;
  min-height:38px;
  background:var(--card-2);
  color:var(--text-2);
  cursor:pointer;
  font-family:var(--font-head);
  font-size:0.8rem;
  font-weight:400;
  letter-spacing:0.06em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  transition:all var(--dur) var(--ease);
}
.btn:hover {
  background:var(--orange-light);
  border-color:var(--orange);
  border-bottom-color:var(--orange-border);
  color:var(--orange);
  transform:translateY(-1px);
}
.btn:active { transform:translateY(0); }
.btn.primary {
  background:var(--orange);
  color:#fff;
  border-color:transparent;
  border-bottom-color:var(--orange-border);
  font-weight:500;
  box-shadow:var(--shadow-brand);
  letter-spacing:0.08em;
}
.btn.primary:hover {
  background:var(--orange-hover);
  border-bottom-color:var(--orange);
  color:#fff;
  box-shadow:0 6px 24px rgba(244,84,35,0.5);
}
.btn-alt { background:rgba(255,255,255,0.08); color:#edf0f7; border-color:rgba(255,255,255,0.18); }
.btn-alt:hover { background:rgba(255,255,255,0.14); }
body.dark-mode .btn-alt { background:rgba(255,255,255,0.06); color:#dbe8ff; border-color:rgba(255,255,255,0.12); }
.status { color:var(--muted); font-size:12px; margin-top:8px; }
.muted { color:var(--muted); font-size:12px; }

/* ── Tables ── */
.table-wrap { overflow:auto; max-width:100%; max-height:72vh; border:1px solid var(--line); border-radius:0; background:var(--card); }
.table-wrap { -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
table { width:max-content; min-width:100%; border-collapse:collapse; font-size:0.83rem; }
th, td { text-align:left; border-bottom:1px solid var(--line); padding:9px 10px; }
td { white-space:nowrap; }
th {
  position:sticky; top:0; background:var(--navy-mid);
  cursor:pointer; user-select:none; color:var(--orange);
  white-space:normal; line-height:1.2; max-width:96px; vertical-align:bottom;
  font-family:var(--font-head); letter-spacing:0.12em; text-transform:uppercase; font-size:0.66rem; font-weight:500;
  border-bottom:2px solid var(--orange);
}
body:not(.dark-mode) th { background:var(--navy); color:#ffffff; }
td { color:var(--text-2); }
th .head-txt {
  display:inline-flex;
  align-items:center;
  max-width:88px;
  white-space:normal;
  word-break:normal;
  overflow-wrap:normal;
  vertical-align:middle;
}
th .head-txt.is-abbreviated {
  white-space:nowrap;
}
tr:hover { background:var(--row-hover) !important; cursor:pointer; }
.sort-ind { margin-left:4px; font-size:11px; color:var(--orange); }

/* ── App Shell / Left Rail (hero background + dark overlay) ── */
.app-shell {
  display:flex;
  align-items:stretch;
  width:100vw;
  height:calc(100vh - var(--topbar-h) - var(--header-rule-h) - 10px);
  min-height:0;
  overflow:hidden;
}
.app-rail {
  position:fixed;
  top:calc(var(--topbar-h) + var(--header-rule-h));
  left:0;
  bottom:0;
  width:var(--rail-w);
  z-index:150;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overflow-x:hidden;
  /* Hero background image */
  background-color:#0f1623;
  background-image:
    linear-gradient(180deg, rgba(10,15,30,0.9) 0%, rgba(15,22,40,0.94) 42%, rgba(10,14,28,0.97) 100%),
    url('../assets/home-hero-bg-V3_0.jpg?v=20260612-home-bg-v2');
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  isolation:isolate;
}
/* Dark overlay so text is readable */
.app-rail::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(90deg, rgba(10,15,30,0.08) 0%, rgba(10,15,30,0.24) 100%);
}
/* Everything inside rail sits above the overlay */
.app-rail > * { position:relative; z-index:1; }

body.dark-mode .app-rail {
  background-image:
    linear-gradient(180deg, rgba(10,15,30,0.9) 0%, rgba(15,22,40,0.94) 42%, rgba(10,14,28,0.97) 100%),
    url('../assets/home-hero-bg-V3_0.jpg?v=20260612-home-bg-v2');
}

.rail-section-title {
  font-family:var(--font-head);
  font-size:0.6rem;
  font-weight:400;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--orange);
  padding:18px 16px 6px;
  border-bottom:1px solid rgba(244,84,35,0.18);
  margin-bottom:4px;
}
.rail-section-title:first-child { padding-top:14px; }
.rail-nav { display:flex; flex-direction:column; padding:0 0 8px; }
.rail-group {
  display:flex;
  flex-direction:column;
  min-width:0;
}
.rail-group-label {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.rail-group-label > span:last-child {
  overflow:hidden;
  text-overflow:ellipsis;
}
.rail-caret {
  margin-left:auto;
  color:rgba(230,235,248,0.58);
  font-size:0.72rem;
  line-height:1;
  transition:transform var(--dur) var(--ease);
}
.rail-group.open > .rail-group-btn .rail-caret {
  transform:rotate(90deg);
  color:var(--orange);
}
.rail-group:not(.open) > .rail-group-items {
  display:none;
}
.rail-group.has-active > .rail-group-btn {
  background:rgba(244,84,35,0.12);
  border-left-color:rgba(244,84,35,0.42);
  color:#fff;
}
.rail-subnav {
  display:flex;
  flex-direction:column;
  margin:0 0 6px 0;
  padding:4px 0 0 0;
  border-left:1px solid rgba(244,84,35,0.25);
  margin-left:16px;
}
.rail-btn {
  width:100%;
  text-align:left;
  border:none;
  border-radius:0;
  background:transparent;
  color:rgba(230,235,248,0.75);
  padding:11px 16px 11px 22px;
  font-family:var(--font-head);
  font-size:0.82rem;
  font-weight:400;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-left:3px solid transparent;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  text-decoration:none;
  transition:all var(--dur) var(--ease);
  min-height:40px;
  margin:0;
}
.rail-btn.rail-parent { padding-bottom:10px; }
.rail-btn.rail-child {
  font-size:0.8rem;
  letter-spacing:0.08em;
  padding:10px 16px 10px 18px;
  border-left:3px solid transparent;
  margin-left:0;
  width:calc(100% - 10px);
}
.rail-btn.rail-direct {
  width:100%;
}
.rail-btn.static { cursor:default; pointer-events:none; }
.rail-btn.static:hover { background:transparent; }
.rail-icon { width:18px; min-width:18px; text-align:center; color:var(--orange); font-size:0.85rem; line-height:1; opacity:0.85; }
.rail-btn:hover {
  background:rgba(244,84,35,0.16);
  border-left-color:rgba(244,84,35,0.55);
  color:#fff;
}
.rail-btn:hover .rail-icon { opacity:1; }
/* Selected state: subtle transparent highlight (parent and child) */
.rail-btn.active {
  background:rgba(244,84,35,0.18);
  border-left-color:rgba(244,84,35,0.55);
  color:#fff;
  font-weight:500;
}
.rail-btn.active .rail-icon { color:var(--orange); }
/* Static parent (like OMS label) should have no highlight */
.rail-btn.static.active {
  background:transparent;
  border-left-color:transparent;
}
.app-main {
  flex:1 1 auto;
  min-width:0;
  width:calc(100vw - var(--rail-w));
  max-width:calc(100vw - var(--rail-w));
  margin-left:var(--rail-w);
  padding:16px 24px 16px 24px;
  height:calc(100vh - var(--topbar-h) - var(--header-rule-h) - 10px);
  min-height:0;
  display:flex;
  grid-template-rows:minmax(0, 1fr);
  flex-direction:column;
  overflow:hidden;
}

.app-main > * {
  min-width:0;
  max-width:100%;
}

.app-main .card {
  min-width:0;
  max-width:100%;
}

.app-main > :not(#ordersTab) {
  min-height:0;
  overflow:auto;
}

#adminTab,
#customersTab,
#contactsTab,
#ganttTab,
#bodiesTab,
#usersTab {
  min-width:0;
  max-width:100%;
}

#adminTab .table-wrap,
#customersTab .table-wrap,
#contactsTab .table-wrap,
#ganttTab .table-wrap,
#bodiesTab .table-wrap,
#usersTab .table-wrap {
  width:100%;
  max-width:100%;
}

#ordersTab {
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  overflow:hidden;
}

#ordersTab > .card:last-child {
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}

#ordersTab > .card:last-child .table-wrap {
  flex:1 1 auto;
  min-height:0;
  max-height:none;
}

#ordersTab > .card:last-child .pagination {
  margin-top:auto;
}

/* ── Section Heads ── */
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.section-head > h3,
.section-head > strong {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-head);
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.section-head > h3::before,
.section-head > strong::before {
  content:'';
  width:4px;
  height:16px;
  background:var(--orange);
  border-radius:2px;
  flex-shrink:0;
}

/* ── Mini Buttons ── */
.mini-btn {
  padding:5px 10px; font-size:0.72rem; border-radius:6px;
  font-family:var(--font-head); letter-spacing:.04em; text-transform:uppercase;
  transition:all var(--dur) var(--ease);
}
.mini-btn.alt { background:var(--surface-2); color:var(--navy); border:1px solid var(--line-strong); }
.mini-btn.alt:hover { background:var(--orange-light); color:var(--orange-hover); border-color:var(--orange-border); }
.mini-btn.active { background:var(--orange-light); color:var(--orange); border:1px solid var(--orange); }
.mini-btn.warn { background:var(--danger-bg); color:#f87171; border:1px solid rgba(248,113,113,0.3); }
.mini-btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; filter:saturate(.7); }
.mini-btn:disabled:hover { transform:none; }
body.dark-mode .mini-btn.alt { background:rgba(255,255,255,0.06); color:#dbe8ff; border-color:rgba(255,255,255,0.12); }
body.dark-mode .mini-btn.alt:hover { background:rgba(255,255,255,0.14); color:#fff; }
body.dark-mode .mini-btn.active { background:rgba(244,84,35,0.15); color:#f88d6c; border-color:rgba(244,84,35,0.4); }
.ghost-btn {
  min-height:32px;
  padding:7px 13px;
  background:transparent;
  color:var(--muted);
  border:1px solid var(--line-strong);
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1.1;
}

/* ── Entry Panel (modal-like form) ── */
.entry-panel { border:1px solid var(--line); border-radius:0; padding:10px; background:var(--surface-2); margin-top:10px; }
.entry-grid { display:grid; grid-template-columns:200px 1fr; gap:8px 10px; align-items:center; font-size:12px; }
.entry-grid label { color:var(--muted); font-weight:600; }
.entry-grid input, .entry-grid select, .entry-grid textarea { width:100%; background:var(--surface); color:var(--text); border:1px solid var(--line-strong); border-radius:var(--r); padding:7px 8px; font:inherit; }
.entry-grid textarea { min-height:72px; resize:vertical; }
.entry-actions { display:flex; gap:8px; margin-top:10px; justify-content:flex-end; }


.button-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* ── Inline Help + Guided Walkthroughs ─────────────────────── */
.quote-help-btn {
  min-height:34px;
  padding:7px 12px;
}

.help-inline {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--orange-light);
  color:var(--orange);
  font-family:var(--font-body);
  font-size:0.58rem;
  font-weight:700;
  line-height:1;
  cursor:help;
  white-space:nowrap;
  position:relative;
  vertical-align:middle;
  flex-shrink:0;
  border:1px solid rgba(244,84,35,0.3);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.help-inline:hover,
.help-inline.open {
  background:var(--orange);
  color:#fff;
}
.help-inline::after {
  content:attr(data-help);
  position:absolute;
  left:0;
  top:calc(100% + 7px);
  width:min(280px, 70vw);
  padding:8px 11px;
  border:1px solid var(--line-strong);
  border-top:2px solid var(--orange);
  border-radius:0 0 var(--r) var(--r);
  background:var(--card);
  color:var(--text-2);
  font-family:var(--font-body);
  font-size:11px;
  font-weight:400;
  line-height:1.45;
  letter-spacing:0;
  text-align:left;
  text-transform:none;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
  box-shadow:var(--shadow-lg);
  opacity:0;
  transform:translateY(-4px) scale(0.97);
  pointer-events:none;
  transition:opacity 0.14s var(--ease), transform 0.14s var(--ease);
  z-index:1200;
}
.help-inline:hover::after,
.help-inline:focus-visible::after,
.help-inline.open::after {
  opacity:1;
  transform:translateY(0) scale(1);
}
.kv td:first-child .help-inline,
.detail-grid > div:nth-child(odd) .help-inline,
th .help-inline {
  margin-left:4px;
}
th .help-inline::after {
  left:auto;
  right:0;
}

@media print {
  .help-inline,
  .help-inline::after {
    display:none !important;
    content:none !important;
  }
}

.quote-tour-open {
  scroll-behavior:smooth;
}
.quote-tour-overlay {
  position:fixed;
  inset:0;
  z-index:10000;
  background:
    radial-gradient(circle at var(--tour-x, 50%) var(--tour-y, 45%), rgba(244, 84, 35, 0.16), transparent 18%),
    rgba(5, 10, 22, 0.62);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.quote-tour-spotlight {
  position:fixed;
  z-index:10001;
  border:2px solid var(--orange);
  border-radius:14px;
  box-shadow:0 0 0 9999px rgba(5, 10, 22, 0.44), 0 0 32px rgba(244, 84, 35, 0.52);
  pointer-events:none;
  transition:left 220ms var(--ease), top 220ms var(--ease), width 220ms var(--ease), height 220ms var(--ease);
  animation:quoteTourPulse 1.55s ease-in-out infinite;
}
.quote-tour-card {
  position:fixed;
  z-index:10002;
  width:min(430px, calc(100vw - 28px));
  max-height:calc(100vh - 28px);
  overflow:auto;
  border:1px solid rgba(244, 84, 35, 0.45);
  border-top:3px solid var(--orange);
  border-radius:0 0 18px 18px;
  background:var(--card);
  color:var(--text);
  box-shadow:0 24px 70px rgba(0, 0, 0, 0.38);
  padding:16px;
  transition:left 220ms var(--ease), top 220ms var(--ease);
}
.quote-tour-kicker {
  color:var(--orange);
  font-family:var(--font-head);
  font-size:0.68rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  margin-bottom:7px;
}
.quote-tour-card h3 {
  margin:0 0 8px;
  font-family:var(--font-head);
  font-size:1.18rem;
  letter-spacing:0.07em;
  text-transform:uppercase;
}
.quote-tour-card p {
  margin:0 0 10px;
  color:var(--text-2);
  line-height:1.48;
}
.quote-tour-card ul {
  margin:8px 0 0;
  padding-left:18px;
  color:var(--text-2);
}
.quote-tour-card li + li { margin-top:5px; }
.quote-tour-visual {
  margin:12px 0;
  min-height:84px;
  border:1px solid var(--line);
  border-radius:14px;
  background:
    linear-gradient(135deg, rgba(244, 84, 35, 0.11), transparent 42%),
    rgba(83, 117, 170, 0.12);
  position:relative;
  overflow:hidden;
}
.quote-tour-visual::before,
.quote-tour-visual::after {
  content:'';
  position:absolute;
  border-radius:999px;
  background:rgba(244, 84, 35, 0.8);
  width:9px;
  height:9px;
  top:50%;
  transform:translateY(-50%);
  animation:quoteTourDot 2s ease-in-out infinite;
}
.quote-tour-visual::before { left:16%; }
.quote-tour-visual::after { left:76%; animation-delay:0.4s; }
.quote-tour-visual-bar {
  position:absolute;
  left:12%;
  right:12%;
  top:50%;
  height:3px;
  transform:translateY(-50%);
  background:linear-gradient(90deg, var(--orange), rgba(102, 199, 255, 0.75));
}
.quote-tour-visual-card {
  position:absolute;
  left:14%;
  top:18px;
  width:72%;
  height:18px;
  border-radius:6px;
  background:rgba(255, 255, 255, 0.15);
  border:1px solid rgba(255, 255, 255, 0.16);
}
.quote-tour-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:space-between;
  margin-top:14px;
}
.quote-tour-progress {
  color:var(--text-3);
  font-size:0.8rem;
}
.quote-tour-hidden { display:none !important; }

@keyframes quoteTourPulse {
  0%, 100% { box-shadow:0 0 0 9999px rgba(5, 10, 22, 0.44), 0 0 22px rgba(244, 84, 35, 0.38); }
  50% { box-shadow:0 0 0 9999px rgba(5, 10, 22, 0.44), 0 0 38px rgba(244, 84, 35, 0.72); }
}

@keyframes quoteTourDot {
  0%, 100% { opacity:0.3; transform:translateY(-50%) scale(0.75); }
  50% { opacity:1; transform:translateY(-50%) scale(1.25); }
}
.stack { display:grid; gap:10px; }
.section-head-actions { align-items:center; }
.user-editor-panel { margin-bottom:12px; }
.user-editor-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(220px, 1fr));
  gap:10px 12px;
  align-items:start;
}
.user-editor-grid label {
  display:grid;
  gap:6px;
  color:var(--muted);
  font-size:12px;
}
.user-editor-grid .user-password-stack,
.user-editor-grid .user-editor-actions {
  grid-column:1 / -1;
}
.users-table-lite td:last-child { white-space:nowrap; }
.presence-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:74px;
  padding:2px 8px;
  border-radius:var(--r-pill);
  font-size:0.68rem;
  font-weight:600;
  border:1px solid transparent;
}
.presence-badge.online {
  background:rgba(74, 222, 128, 0.12);
  border-color:rgba(74, 222, 128, 0.4);
  color:#15803d;
}
.presence-badge.offline {
  background:var(--surface-2);
  border-color:var(--line);
  color:var(--text-3);
}
body.dark-mode .presence-badge.online {
  background:rgba(74, 222, 128, 0.12);
  border-color:rgba(74, 222, 128, 0.4);
  color:#86efac;
}
body.dark-mode .presence-badge.offline {
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.12);
  color:#a8b5cc;
}
/* ── Inbox Button ── */
.inbox-btn { position:relative; padding:7px 10px; min-width:36px; }
.inbox-icon { font-size:1rem; line-height:1; }
.inbox-badge {
  position:absolute; top:-3px; right:-3px;
  min-width:17px; height:17px; padding:0 3px;
  border-radius:var(--r-pill);
  background:var(--orange); color:#fff;
  font-size:9px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 2px var(--surface), var(--shadow-brand);
}

/* ── Misc ── */
.subhead { margin-top:12px; margin-bottom:8px; font-weight:700; }
.hint { font-size:11px; color:var(--muted); }
.selected-row { outline:2px solid var(--brand); outline-offset:-2px; }
.pill { display:inline-block; padding:2px 6px; border-radius:999px; font-size:11px; border:1px solid var(--line-strong); }
.subcard {
  border:1px solid var(--line);
  border-left:3px solid rgba(244,84,35,0.4);
  border-radius:0 var(--r) var(--r) 0;
  padding:13px 15px;
  background:var(--card-2);
  transition:border-color var(--dur) var(--ease);
}
.subcard:hover { border-left-color:var(--orange); }
.detail-grid { display:grid; grid-template-columns:180px 1fr; gap:6px 12px; font-size:12px; }
.detail-grid div:nth-child(odd) { color:var(--muted); }
.detail-panel { border:1px solid var(--line); border-radius:0; padding:10px; background:var(--surface-2); }

/* ── Grid Layouts (order pages) ── */
.grid { display:grid; grid-template-columns:repeat(3, minmax(240px, 1fr)); gap:10px; }
.grid-dyn { display:grid; grid-template-columns:1fr; gap:0; }
.field { display:grid; gap:4px; align-content:start; }
.grid-dyn .field {
  grid-template-columns:260px minmax(320px, 1fr);
  gap:6px 10px;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding:6px 0;
}
.grid-dyn .field > label { margin:0; }
.grid-dyn .field > select,
.grid-dyn .field > input,
.grid-dyn .field > textarea { grid-column:2; }
label { font-size:12px; color:var(--muted); }

/* ── Pagination ── */
.pagination {
  display:flex;
  gap:4px;
  align-items:center;
  justify-content:center;
  padding:10px 0 12px;
  min-height:46px;
  overflow:visible;
  line-height:1;
  flex-wrap:wrap;
}
.pagination button {
  min-width:32px;
  min-height:34px;
  height:auto;
  padding:7px 8px;
  font-size:12px;
  border-radius:6px;
  line-height:1;
}
.pagination button.active {
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
  box-shadow:var(--shadow-brand);
}
.pagination button:disabled {
  opacity:0.4;
  cursor:not-allowed;
}
.pagination .page-info {
  font-size:12px;
  color:var(--muted);
  margin:0 8px;
}

/* ── Native tablet shell ── */
@media (min-width:901px) and (max-width:1180px) {
  :root {
    --rail-w: 88px;
    --topbar-h: 86px;
  }
  .topbar {
    gap:10px;
    padding:8px 16px 12px calc(var(--rail-w) + 14px);
  }
  .brand-logo {
    left:8px;
    top:10px;
    width:74px;
    height:48px;
  }
  .brand-left { gap:10px; }
  .brand-title {
    font-size:0.92rem;
    letter-spacing:0.06em;
  }
  .brand-sub { font-size:0.72rem; }
  .auth-box {
    min-width:0;
    max-width:46vw;
  }
  .auth-title,
  .auth-email {
    display:none;
  }
  .auth-actions {
    gap:6px;
    flex-wrap:wrap;
  }
  input,
  select,
  textarea,
  button,
  .ghost-btn,
  .btn,
  .mini-btn,
  .quote-help-btn {
    min-height:44px;
  }
  .ghost-btn {
    padding:8px 10px;
  }
  .app-rail {
    width:var(--rail-w);
    padding-top:8px;
  }
  .rail-section-title {
    padding:10px 0 6px;
    text-align:center;
    font-size:0.54rem;
    letter-spacing:0.09em;
  }
  .rail-subnav {
    margin:0;
    padding:0;
    border-left:none;
  }
  .rail-btn {
    min-height:54px;
    padding:8px 6px;
    justify-content:center;
    text-align:center;
    border-left:none;
    border-right:3px solid transparent;
  }
  .rail-btn:hover,
  .rail-btn.active {
    border-left-color:transparent;
    border-right-color:rgba(244,84,35,0.75);
  }
  .rail-btn span:not(.rail-icon) {
    display:none;
  }
  .rail-btn .rail-group-label {
    display:flex;
  }
  .rail-btn .rail-group-label span:not(.rail-icon),
  .rail-caret {
    display:none;
  }
  .rail-icon {
    width:auto;
    min-width:0;
    font-size:1rem;
  }
  .app-main {
    margin-left:var(--rail-w);
    width:calc(100vw - var(--rail-w));
    max-width:calc(100vw - var(--rail-w));
    padding:14px;
  }
  .card,
  .sheet {
    padding:16px;
  }
  .grid {
    grid-template-columns:repeat(2, minmax(220px, 1fr));
  }
  .grid-dyn .field {
    grid-template-columns:220px minmax(260px, 1fr);
  }
}

/* ── Phone / portrait tablet shell ── */
@media (max-width:900px) {
  body { height:auto; overflow-x:hidden; overflow-y:auto; }
  body::before { opacity:0.72; }
  .topbar {
    position:sticky;
    top:0;
    height:auto;
    min-height:0;
    padding:calc(8px + var(--safe-top)) calc(12px + var(--safe-right)) 10px calc(12px + var(--safe-left));
    gap:8px;
    align-items:center;
    flex-wrap:nowrap;
    border-bottom-width:2px;
  }
  .brand-left {
    gap:8px;
    flex:1 1 auto;
    min-width:0;
  }
  .brand-logo {
    position:static;
    width:96px;
    height:38px;
    flex:0 0 auto;
  }
  .brand-title {
    font-size:0.82rem;
    letter-spacing:0.045em;
    max-width:44vw;
    white-space:normal;
  }
  .brand-eyebrow,
  .brand-sub {
    display:none;
  }
  .auth-box {
    align-items:flex-end;
    text-align:right;
    min-width:0;
    max-width:48vw;
    gap:4px;
  }
  .auth-meta-row {
    max-width:100%;
  }
  .auth-name {
    max-width:44vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .auth-title,
  .auth-email {
    display:none;
  }
  .auth-actions {
    gap:6px;
    flex-wrap:nowrap;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .auth-actions .ghost-btn {
    flex:0 0 auto;
  }
  .ghost-btn,
  .btn,
  .mini-btn,
  button {
    min-height:44px;
  }
  .quote-help-btn {
    min-height:44px;
  }
  .ghost-btn {
    padding:8px 9px;
    font-size:0.68rem;
    white-space:nowrap;
  }
  .grid, .grid-dyn { grid-template-columns:1fr; }
  .entry-grid { grid-template-columns:1fr; }
  .wrap { height:auto; min-height:calc(100dvh - var(--mobile-tabbar-h)); overflow:visible; padding:10px 0 calc(var(--mobile-tabbar-h) + var(--safe-bottom) + 14px); }
  .app-shell { display:block; height:auto; min-height:0; }
  .app-rail {
    position:fixed;
    top:auto;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:calc(var(--mobile-tabbar-h) + var(--safe-bottom));
    z-index:9000;
    padding:6px calc(8px + var(--safe-right)) calc(6px + var(--safe-bottom)) calc(8px + var(--safe-left));
    display:flex;
    flex-direction:row;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    box-shadow:0 -10px 32px rgba(0,0,0,0.34);
    background-color:#101827;
    background-image:linear-gradient(180deg, rgba(18,27,45,0.98), rgba(8,13,26,0.98));
    background-position:center;
  }
  body.dark-mode .app-rail {
    background-color:#101827;
    background-image:linear-gradient(180deg, rgba(18,27,45,0.98), rgba(8,13,26,0.98));
  }
  .app-rail::after {
    background:linear-gradient(180deg, rgba(10,15,30,0.28), rgba(8,13,26,0.46));
  }
  .rail-section-title,
  .rail-btn.rail-parent.static {
    display:none;
  }
  .rail-nav,
  .rail-subnav,
  .rail-group,
  .rail-group-items,
  #adminRailWrap {
    display:flex;
    flex-direction:row;
    align-items:stretch;
    gap:6px;
    margin:0;
    padding:0;
    border-left:none;
    min-width:max-content;
  }
  .rail-group {
    gap:6px;
  }
  .rail-group:not(.open) > .rail-group-items {
    display:none;
  }
  .rail-group.open > .rail-group-items {
    display:flex;
  }
  #adminRailWrap {
    display:flex;
  }
  #adminRailWrap.hidden {
    display:none !important;
  }
  .rail-btn,
  .rail-btn.rail-child {
    width:auto;
    min-width:72px;
    min-height:58px;
    padding:7px 8px;
    margin:0;
    border-left:none;
    border-bottom:3px solid transparent;
    border-radius:10px;
    flex-direction:column;
    justify-content:center;
    text-align:center;
    gap:4px;
    font-size:0.62rem;
    line-height:1.1;
    letter-spacing:0.05em;
    background:linear-gradient(180deg, rgba(27,39,61,0.96), rgba(17,25,43,0.96));
    box-shadow:0 1px 0 rgba(255,255,255,0.05) inset;
  }
  .rail-group-label {
    flex-direction:column;
    gap:4px;
  }
  .rail-caret {
    margin-left:0;
    font-size:0.6rem;
  }
  .rail-btn:hover,
  .rail-btn.active {
    border-left-color:transparent;
    border-bottom-color:var(--orange);
    background:linear-gradient(180deg, rgba(63,50,55,0.98), rgba(26,29,45,0.98));
  }
  .rail-icon {
    width:auto;
    min-width:0;
    font-size:0.95rem;
  }
  .app-main { margin-left:0 !important; padding:0 calc(10px + var(--safe-right)) 16px calc(10px + var(--safe-left)); width:100% !important; max-width:100% !important; height:auto; min-height:0; display:block; overflow:visible; }
  #ordersTab { height:auto; min-height:0; display:block; overflow:visible; }
  #ordersTab > .card:last-child { display:block; }
  #ordersTab > .card:last-child .table-wrap { max-height:72vh; }
  .card,
  .sheet {
    padding:14px;
    border-radius:0 0 var(--r) var(--r);
  }
  .section-head {
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
  .section-head .button-row,
  .button-row,
  .row {
    width:100%;
  }
  input,
  select,
  textarea {
    min-height:44px;
  }
  .detail-grid {
    grid-template-columns:1fr;
    gap:4px;
  }
  .detail-grid div:nth-child(odd) {
    font-weight:700;
    margin-top:6px;
  }
  .entry-panel {
    position:fixed;
    left:10px;
    right:10px;
    bottom:calc(var(--mobile-tabbar-h) + var(--safe-bottom) + 10px);
    z-index:9100;
    max-height:70dvh;
    overflow:auto;
    box-shadow:var(--shadow-lg);
  }
  .quote-tour-card {
    width:calc(100vw - 20px);
    max-height:calc(100dvh - var(--mobile-tabbar-h) - 24px);
  }
  .quote-tour-spotlight {
    display:none;
  }
}
@media (max-width:760px) {
  .grid-dyn .field { grid-template-columns:1fr; }
  .grid-dyn .field > select,
  .grid-dyn .field > input,
  .grid-dyn .field > textarea { grid-column:auto; }
  .grid-dyn .field {
    padding:9px 0;
    gap:5px;
  }
  .table-wrap {
    max-height:none;
  }
  #ordersTab > .card:last-child .table-wrap {
    max-height:none;
    border:0;
    background:transparent;
    overflow:visible;
  }
  #ordersTab table {
    display:block;
    width:100% !important;
    min-width:0 !important;
  }
  #ordersTab thead {
    display:none;
  }
  #ordersBody {
    display:grid;
    gap:10px;
  }
  #ordersBody tr {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px 10px;
    padding:12px;
    border:1px solid var(--line);
    border-top:3px solid var(--orange);
    border-radius:0 0 var(--r) var(--r);
    background:var(--card) !important;
    box-shadow:var(--shadow-sm);
  }
  #ordersBody td {
    display:grid;
    grid-template-columns:minmax(74px, 0.7fr) minmax(0, 1fr);
    gap:6px;
    align-items:start;
    padding:0;
    border-bottom:0;
    white-space:normal;
    overflow-wrap:anywhere;
    color:var(--text);
    font-size:0.82rem;
  }
  #ordersBody td::before {
    color:var(--text-3);
    font-family:var(--font-head);
    font-size:0.62rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    line-height:1.25;
  }
  #ordersBody td:nth-child(1) {
    grid-column:1 / -1;
    display:block;
    font-family:var(--font-head);
    font-size:1.05rem;
    letter-spacing:0.05em;
    color:var(--orange);
  }
  #ordersBody td:nth-child(1)::before { content:''; display:none; }
  #ordersBody td:nth-child(2)::before { content:'Status'; }
  #ordersBody td:nth-child(3)::before { content:'Dist. Ver.'; }
  #ordersBody td:nth-child(4)::before { content:'Type'; }
  #ordersBody td:nth-child(5)::before { content:'PO'; }
  #ordersBody td:nth-child(6)::before { content:'Asset'; }
  #ordersBody td:nth-child(7) {
    grid-column:1 / -1;
  }
  #ordersBody td:nth-child(7)::before { content:'Company'; }
  #ordersBody td:nth-child(8) {
    grid-column:1 / -1;
  }
  #ordersBody td:nth-child(8)::before { content:'Build For'; }
  #ordersBody td:nth-child(9)::before { content:'Chassis'; }
  #ordersBody td:nth-child(10)::before { content:'Sales'; }
  #ordersBody td:nth-child(11)::before { content:'Updated'; }
  #ordersBody td:nth-child(12)::before { content:'Delivery'; }
  #ordersBody td:nth-child(13)::before { content:'Planned Arr.'; }
  #ordersBody td:nth-child(14)::before { content:'Actual Arr.'; }
  .pagination {
    justify-content:flex-start;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:4px;
  }
  .pagination .page-info {
    white-space:nowrap;
  }
}

@media (max-width:520px) {
  html { font-size:14px; }
  .topbar {
    align-items:flex-start;
  }
  .brand-logo {
    width:78px;
    height:32px;
  }
  .brand-title {
    font-size:0.74rem;
    max-width:38vw;
  }
  .auth-box {
    max-width:54vw;
  }
  .auth-name {
    font-size:11px;
    max-width:50vw;
  }
  .auth-actions .ghost-btn:not(.inbox-btn) {
    max-width:86px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .card,
  .sheet {
    padding:12px;
  }
  .row > input,
  .row > select,
  .row > button,
  .row > a,
  .button-row > button,
  .button-row > a {
    flex:1 1 100%;
    width:100%;
  }
  #ordersBody tr {
    grid-template-columns:1fr;
  }
  #ordersBody td {
    grid-template-columns:minmax(86px, 0.65fr) minmax(0, 1fr);
  }
}