/* ============================================================================
 * mgmt-theme.css — Tekmetric-patterned theme for the shop-management surfaces
 * (mega/redesign-shell track).
 *
 * Scope: everything is scoped under #serviceOverlay (the shop-management
 * overlay: dashboard, job board, quotes, invoices, customers, pricing, labor
 * guide). The tool-checkout / board / kiosk side of the app keeps its own
 * theme untouched.
 *
 * The management screens are ALWAYS this light Tekmetric-style scheme,
 * regardless of the app's dark/light theme toggle — this is what kills the
 * old black-and-white steel theme on management screens.
 *
 * IP NOTE: layout patterns, nav structure and a blue/gray palette only.
 * No Tekmetric logo, brand name, or artwork is used anywhere here.
 * ========================================================================== */

#serviceOverlay {
  /* --- Tekmetric-derived palette (sampled from real Tekmetric app
         screenshots, Oct 2026: help-center article attachments) --- */
  --mgmt-topbar: #14161a; /* SLICE1: charcoal-900 (was navy) */        /* dark navy top bar            */
  --mgmt-topbar-2: #262a31; /* SLICE1: charcoal-700 */      /* topbar hover / raised        */
  --mgmt-primary: #1f6fd6;       /* primary blue (buttons, links)*/
  --mgmt-primary-dark: #175cb6;  /* primary hover/active         */
  --mgmt-primary-ink: #ffffff;
  --mgmt-active-bg: #e9f2fd;     /* sidebar active item bg       */
  --mgmt-active-text: #1563c4;  /* sidebar active item text     */
  --mgmt-bg: #eef0f3; /* SLICE1: --bg */            /* page background              */
  --mgmt-card: #ffffff;
  --mgmt-border: #dfe3e8;
  --mgmt-border-strong: #c9d1d9;
  --mgmt-text: #1d2733;
  --mgmt-muted: #5d6b78;
  --mgmt-faint: #626d76; /* MGMT-COLORS-20261024 */ was #8b96a1 (3.0:1 on white)
  --mgmt-section: #5d6b78; /* MGMT-COLORS-20261024 */ was #6e7a86 (4.38:1 on white)       /* sidebar section labels       */
  --mgmt-green: #1f8a4c; /* SLICE1: --green */         /* authorize / success          */
  --mgmt-green-dark: #17703c; /* SLICE1: --green-dark */
  --mgmt-red: #d64545;
  --mgmt-red-dark: #b23333;
  --mgmt-amber: #b97a12; /* SLICE1: --amber */
  --mgmt-amber-bg: #fdf3e3;
  --mgmt-purple: #7a5af8;
  --mgmt-teal: #148f80;
  --mgmt-blue-bg: #e9f2fd;
  --mgmt-red-bg: #fdeeee;
  --mgmt-green-bg: #e9f6ec;
  --mgmt-shadow: 0 1px 2px rgba(16,24,40,.07), 0 1px 3px rgba(16,24,40,.09);
  --mgmt-radius: 8px;
}

/* --- overlay takes over as the management app frame ---------------------- */
#serviceOverlay.page-mode > .modal-box {
  padding: 0 !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  background: var(--mgmt-bg);
  color: var(--mgmt-text);
  font-family: 'Inter', sans-serif;
}
#serviceOverlay .modal-x-close {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
#serviceOverlay .modal-x-close:hover { background: var(--mgmt-red); border-color: var(--mgmt-red); color: #fff; }

/* ==========================================================================
 * TOP BAR — dark navy, Tekmetric pattern: hamburger | brand | search | user
 * ========================================================================== */
#serviceOverlay .mgmt-topbar {
  flex: 0 0 auto;
  height: 52px;
  background: var(--mgmt-topbar);
  color: #eef2f6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 56px 0 8px; /* right clearance for the universal ✕ */
  z-index: 20;
}
#serviceOverlay .mgmt-topbar .mgmt-iconbtn {
  background: transparent;
  border: none;
  color: #cfd8e2;
  width: 38px; height: 38px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
#serviceOverlay .mgmt-topbar .mgmt-iconbtn:hover { background: var(--mgmt-topbar-2); color: #fff; }
#serviceOverlay .mgmt-topbar .mgmt-iconbtn svg { width: 20px; height: 20px; }
#serviceOverlay .mgmt-brand {
  display: flex; align-items: baseline; gap: 8px;
  font-weight: 800; font-size: 16px; letter-spacing: .01em; color: #fff;
  white-space: nowrap;
}
#serviceOverlay .mgmt-brand small {
  font-weight: 500; font-size: 11px; color: #9fb0c0; letter-spacing: .04em;
  text-transform: uppercase;
}
#serviceOverlay .mgmt-search {
  flex: 1 1 auto; max-width: 520px; margin: 0 auto;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  padding: 0 10px; height: 34px;
  color: #cfd8e2; cursor: pointer;
  font-size: 13px;
}
#serviceOverlay .mgmt-search:hover { background: rgba(255,255,255,.16); color: #fff; }
#serviceOverlay .mgmt-search svg { width: 15px; height: 15px; flex: 0 0 auto; }
#serviceOverlay .mgmt-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#serviceOverlay .mgmt-user {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: #cfd8e2; white-space: nowrap;
}
#serviceOverlay .mgmt-user .mgmt-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: #c9a53f; color: #171204; /* MGMT-COLORS-20261024 */ avatar was blue var(--mgmt-primary) #1f6fd6; main board header avatar is gold
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
#serviceOverlay .mgmt-topbar .btn {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color: #eef2f6; font-size: 12.5px; padding: 7px 12px;
}
#serviceOverlay .mgmt-topbar .btn:hover { background: rgba(255,255,255,.18); color: #fff; }

/* ==========================================================================
 * APP LAYOUT — sidebar + content
 * ========================================================================== */
#serviceOverlay .mgmt-layout {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: stretch;
}
#serviceOverlay .mgmt-main {
  flex: 1 1 auto; min-width: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 18px 22px 60px;
}

/* ==========================================================================
 * SIDEBAR — white, Tekmetric pattern: sections, icons + labels, active pill
 * ========================================================================== */
#serviceOverlay .mgmt-side {
  flex: 0 0 216px;
  background: var(--mgmt-card);
  border-right: 1px solid var(--mgmt-border);
  overflow-y: auto; overflow-x: hidden;
  padding: 10px 8px 24px;
  transition: flex-basis .18s ease, width .18s ease, margin .18s ease;
}
#serviceOverlay .mgmt-nav-sec { margin-bottom: 6px; }
#serviceOverlay .mgmt-nav-sec-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: none; cursor: pointer;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  color: var(--mgmt-section); text-transform: uppercase;
  padding: 12px 10px 5px;
}
#serviceOverlay .mgmt-nav-sec-head .mgmt-caret {
  transition: transform .15s ease; font-size: 9px; color: var(--mgmt-faint);
}
#serviceOverlay .mgmt-nav-sec.closed .mgmt-caret { transform: rotate(-90deg); }
#serviceOverlay .mgmt-nav-sec.closed .mgmt-nav-items { display: none; }
#serviceOverlay .mgmt-nav-items { display: flex; flex-direction: column; gap: 1px; }
#serviceOverlay .mgmt-nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  background: none; border: none; border-radius: 7px;
  padding: 8px 10px; cursor: pointer;
  font-size: 13.5px; font-weight: 500; color: #33404d;
}
#serviceOverlay .mgmt-nav-item svg { width: 17px; height: 17px; flex: 0 0 auto; color: #6b7684; }
#serviceOverlay .mgmt-nav-item:hover { background: #f2f5f8; color: var(--mgmt-text); }
#serviceOverlay .mgmt-nav-item.is-active { background: var(--mgmt-active-bg); color: var(--mgmt-active-text); font-weight: 700; }
#serviceOverlay .mgmt-nav-item.is-active svg { color: var(--mgmt-active-text); }
#serviceOverlay .mgmt-nav-item .mgmt-soon {
  margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #8a6d1f; background: #fdf3e3;
  border: 1px solid #f0dfb8; border-radius: 999px; padding: 1px 7px;
}
#serviceOverlay .mgmt-nav-item .mgmt-count {
  margin-left: auto; font-size: 11px; font-weight: 700;
  background: #eef1f4; color: #5d6b78; border-radius: 999px; padding: 1px 8px;
}
#serviceOverlay .mgmt-nav-item.is-active .mgmt-count { background: #d7e7fb; color: var(--mgmt-active-text); }

/* Collapsed rail (desktop): icon-only, like Tekmetric's collapsed nav */
#serviceOverlay.mgmt-collapsed .mgmt-side { flex-basis: 58px; padding: 10px 7px 24px; }
#serviceOverlay.mgmt-collapsed .mgmt-nav-sec-head { display: none; }
#serviceOverlay.mgmt-collapsed .mgmt-nav-item { justify-content: center; padding: 9px 0; }
#serviceOverlay.mgmt-collapsed .mgmt-nav-item .mgmt-label,
#serviceOverlay.mgmt-collapsed .mgmt-nav-item .mgmt-soon,
#serviceOverlay.mgmt-collapsed .mgmt-nav-item .mgmt-count { display: none; }
#serviceOverlay.mgmt-collapsed .mgmt-nav-sec { margin-bottom: 2px; }

/* Drawer backdrop (mobile) */
#serviceOverlay .mgmt-scrim {
  display: none;
}

/* The svc module's own sidebar is superseded by .mgmt-side — hide it so we
   never show two navs. We still click its buttons programmatically. */
#serviceOverlay .svc-side { display: none !important; }
#serviceOverlay .svc-shell { display: block; }

/* ==========================================================================
 * PAGE HEADER — restyled .parts-dash-header as a light page header
 * ========================================================================== */
#serviceOverlay .parts-dash-header {
  background: transparent !important;
  border-bottom: 1px solid var(--mgmt-border) !important;
  padding: 2px 0 12px !important;
  margin-bottom: 14px !important;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
#serviceOverlay .parts-dash-header h1 {
  font-family: 'Inter', sans-serif !important;
  text-transform: none !important; letter-spacing: 0 !important;
  font-size: 20px !important; font-weight: 800 !important;
  color: var(--mgmt-text) !important; margin: 0 !important;
}
#serviceOverlay .parts-dash-header #svcSub {
  color: var(--mgmt-muted) !important; font-size: 12.5px !important;
}

/* ==========================================================================
 * SHARED COMPONENTS (mg-*): cards, stat tiles, tables, buttons, forms,
 * badges/pills, tabs, page headers, empty states, alerts
 * ========================================================================== */
#serviceOverlay .mg-pagehead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
#serviceOverlay .mg-pagehead h2 {
  margin: 0; font-size: 20px; font-weight: 800; color: var(--mgmt-text);
  font-family: 'Inter', sans-serif;
}
#serviceOverlay .mg-pagehead .mg-sub { color: var(--mgmt-muted); font-size: 12.5px; margin-top: 2px; }

#serviceOverlay .mg-card {
  background: var(--mgmt-card);
  border: 1px solid var(--mgmt-border);
  border-radius: var(--mgmt-radius);
  box-shadow: var(--mgmt-shadow);
  padding: 16px;
}
#serviceOverlay .mg-card h3 {
  margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--mgmt-text);
}
#serviceOverlay .mg-grid { display: grid; gap: 14px; }
#serviceOverlay .mg-grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
#serviceOverlay .mg-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
#serviceOverlay .mg-grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
#serviceOverlay .mg-grid.cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }

/* Stat tiles */
#serviceOverlay .mg-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#serviceOverlay .mg-stat .mg-stat-label {
  font-size: 11.5px; font-weight: 600; color: var(--mgmt-muted);
  display: flex; align-items: center; gap: 7px;
}
#serviceOverlay .mg-stat .mg-stat-label .mg-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
#serviceOverlay .mg-stat .mg-stat-value {
  font-size: 24px; font-weight: 800; color: var(--mgmt-text);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
#serviceOverlay .mg-stat .mg-stat-hint { font-size: 11.5px; color: var(--mgmt-faint); }
#serviceOverlay .mg-stat.mg-clickable { cursor: pointer; }
#serviceOverlay .mg-stat.mg-clickable:hover { border-color: var(--mgmt-primary); }

/* Tables */
#serviceOverlay .mg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#serviceOverlay .mg-table th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mgmt-muted);
  padding: 8px 10px; border-bottom: 1px solid var(--mgmt-border);
  white-space: nowrap;
}
#serviceOverlay .mg-table td { padding: 9px 10px; border-bottom: 1px solid #eef1f4; color: var(--mgmt-text); vertical-align: middle; }
#serviceOverlay .mg-table tr:last-child td { border-bottom: none; }
#serviceOverlay .mg-table tbody tr:hover td { background: #f7fafc; }
#serviceOverlay .mg-table tr.mg-rowlink { cursor: pointer; }
#serviceOverlay .mg-table .mg-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Buttons */
#serviceOverlay .mg-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--mgmt-border-strong); background: #fff; color: var(--mgmt-text);
  border-radius: 7px; padding: 8px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
#serviceOverlay .mg-btn:hover { background: #f4f6f8; border-color: #b9c3cd; }
#serviceOverlay .mg-btn-primary { background: var(--mgmt-primary); border-color: var(--mgmt-primary); color: var(--mgmt-primary-ink); }
#serviceOverlay .mg-btn-primary:hover { background: var(--mgmt-primary-dark); border-color: var(--mgmt-primary-dark); color: #fff; }
#serviceOverlay .mg-btn-green { background: #1c7a43; border-color: #1c7a43; color: #fff; } /* MGMT-COLORS-20261024 */ was var(--mgmt-green) #1f8a4c — white on it is 4.38:1
#serviceOverlay .mg-btn-green:hover { background: #166534; border-color: #166534; color: #fff; } /* MGMT-COLORS-20261024 */ was var(--mgmt-green-dark) #2fae62 — white on it is 2.9:1
#serviceOverlay .mg-btn-danger { background: #fff; border-color: #efb4b4; color: var(--mgmt-red-dark); }
#serviceOverlay .mg-btn-danger:hover { background: var(--mgmt-red); border-color: var(--mgmt-red); color: #fff; }
#serviceOverlay .mg-btn-sm { padding: 5px 10px; font-size: 12px; }

/* Forms */
#serviceOverlay .mg-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
#serviceOverlay .mg-field label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mgmt-muted); }
#serviceOverlay .mg-input, #serviceOverlay .mg-select {
  border: 1px solid var(--mgmt-border-strong); border-radius: 7px;
  background: #fff; color: var(--mgmt-text);
  padding: 8px 10px; font-size: 13.5px; min-width: 0;
}
#serviceOverlay .mg-input:focus, #serviceOverlay .mg-select:focus {
  outline: 2px solid rgba(31,111,214,.25); border-color: var(--mgmt-primary);
}

/* Badges / pills */
#serviceOverlay .mg-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 10px;
  white-space: nowrap; line-height: 1.6;
}
#serviceOverlay .mg-badge.blue   { background: var(--mgmt-blue-bg); color: #1663c4; }
#serviceOverlay .mg-badge.green  { background: var(--mgmt-green-bg); color: #237a38; }
#serviceOverlay .mg-badge.red    { background: var(--mgmt-red-bg); color: #b23333; }
#serviceOverlay .mg-badge.amber  { background: var(--mgmt-amber-bg); color: #85600f; } /* MGMT-COLORS-20261024 */ was #9a6712 (4.42:1)
#serviceOverlay .mg-badge.purple { background: #efeafd; color: #5b3df0; }
#serviceOverlay .mg-badge.gray   { background: #eef1f4; color: #5d6b78; }
#serviceOverlay .mg-badge.teal   { background: #e2f4f1; color: #0f7a6d; }

/* Tabs (Tekmetric underline style) */
#serviceOverlay .mg-tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--mgmt-border);
  margin-bottom: 14px; overflow-x: auto;
}
#serviceOverlay .mg-tab {
  background: none; border: none; cursor: pointer;
  padding: 9px 14px; font-size: 13.5px; font-weight: 600; color: var(--mgmt-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
#serviceOverlay .mg-tab:hover { color: var(--mgmt-text); }
#serviceOverlay .mg-tab.is-active { color: var(--mgmt-active-text); border-bottom-color: var(--mgmt-primary); }

/* Empty states + alerts */
#serviceOverlay .mg-empty {
  text-align: center; color: var(--mgmt-muted); padding: 34px 18px;
  font-size: 13.5px; line-height: 1.6;
}
#serviceOverlay .mg-empty .mg-empty-title { font-size: 15px; font-weight: 700; color: var(--mgmt-text); margin-bottom: 4px; }
#serviceOverlay .mg-alert {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: var(--mgmt-radius); padding: 11px 14px; font-size: 13px;
  border: 1px solid; margin-bottom: 10px; line-height: 1.5;
}
#serviceOverlay .mg-alert.red   { background: var(--mgmt-red-bg); border-color: #f3c1c1; color: #8f2b2b; }
#serviceOverlay .mg-alert.amber { background: var(--mgmt-amber-bg); border-color: #eed9ae; color: #7c5410; }
#serviceOverlay .mg-alert.blue  { background: var(--mgmt-blue-bg); border-color: #c3daf8; color: #174f96; }
#serviceOverlay .mg-alert.green { background: var(--mgmt-green-bg); border-color: #bfe6c8; color: #256b35; }

/* Dashboard list rows */
#serviceOverlay .mg-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px; border-bottom: 1px solid #eef1f4; font-size: 13px;
}
#serviceOverlay .mg-row:last-child { border-bottom: none; }
#serviceOverlay .mg-row.mg-rowlink { cursor: pointer; border-radius: 6px; }
#serviceOverlay .mg-row.mg-rowlink:hover { background: #f7fafc; }
#serviceOverlay .mg-row .mg-grow { flex: 1 1 auto; min-width: 0; }
#serviceOverlay .mg-row .mg-strong { font-weight: 700; color: var(--mgmt-text); }
#serviceOverlay .mg-row .mg-dim { color: var(--mgmt-muted); font-size: 12px; }

/* ==========================================================================
 * LIGHT-TOUCH retheme of the svc module's own markup inside the overlay,
 * so sibling tracks' surfaces read as one coherent Tekmetric-style UI.
 * (Structural markup untouched — colors/borders only.)
 * ========================================================================== */
#serviceOverlay .svc-main { color: var(--mgmt-text); }
#serviceOverlay .svc-sectionhead h3 {
  font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 800; color: var(--mgmt-text);
}
#serviceOverlay .svc-card, #serviceOverlay .svc-cardgrid .svc-card {
  background: #fff; border: 1px solid var(--mgmt-border);
  border-radius: var(--mgmt-radius); box-shadow: var(--mgmt-shadow);
  color: var(--mgmt-text);
}
#serviceOverlay .svc-col {
  background: #f7f8fa; border: 1px solid var(--mgmt-border); border-radius: var(--mgmt-radius);
}
#serviceOverlay .svc-colhead { color: var(--mgmt-muted); }
#serviceOverlay .svc-colcount { background: #e4e9ee; color: #42505e; }
#serviceOverlay .svc-toolbar .svc-search, #serviceOverlay .svc-search {
  background: #fff; border: 1px solid var(--mgmt-border-strong); color: var(--mgmt-text);
  border-radius: 7px;
}
#serviceOverlay .svc-fbtn {
  background: #fff; border: 1px solid var(--mgmt-border-strong); color: var(--mgmt-muted);
  border-radius: 999px;
}
#serviceOverlay .svc-fbtn:hover { border-color: var(--mgmt-primary); color: var(--mgmt-primary); }
#serviceOverlay .svc-fbtn.is-active {
  background: var(--mgmt-primary); border-color: var(--mgmt-primary); color: #fff;
}
#serviceOverlay .svc-empty {
  background: #fff; border: 1px dashed var(--mgmt-border-strong); color: var(--mgmt-muted);
  border-radius: var(--mgmt-radius);
}
#serviceOverlay .svc-backrow .btn, #serviceOverlay .svc-sectionhead .btn,
#serviceOverlay .svc-toolbar .btn {
  background: #fff; border: 1px solid var(--mgmt-border-strong); color: var(--mgmt-text);
}
#serviceOverlay .svc-backrow .btn:hover, #serviceOverlay .svc-sectionhead .btn:hover,
#serviceOverlay .svc-toolbar .btn:hover { background: #f4f6f8; }
#serviceOverlay .svc-sectionhead .btn-primary, #serviceOverlay .svc-toolbar .btn-primary {
  background: var(--mgmt-primary); border-color: var(--mgmt-primary); color: #fff;
}
#serviceOverlay .svc-sectionhead .btn-primary:hover, #serviceOverlay .svc-toolbar .btn-primary:hover {
  background: var(--mgmt-primary-dark); border-color: var(--mgmt-primary-dark);
}
#serviceOverlay .svc-line { border-bottom-color: #eef1f4; }
#serviceOverlay .svc-aging { background: var(--mgmt-amber-bg); border: 1px solid #eed9ae; border-radius: 7px; }
#serviceOverlay .svc-hint { color: var(--mgmt-muted); }
#serviceOverlay input, #serviceOverlay select, #serviceOverlay textarea {
  color-scheme: light;
}

/* ==========================================================================
 * RESPONSIVE — mobile drawer behavior
 * ========================================================================== */
@media (max-width: 960px) {
  #serviceOverlay .mgmt-main { padding: 14px 12px 60px; }
  #serviceOverlay .mgmt-grid.cols-4, #serviceOverlay .mgmt-grid.cols-5 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #serviceOverlay .mgmt-grid.cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #serviceOverlay .mgmt-search span { display: none; }
  #serviceOverlay .mgmt-user .mgmt-username { display: none; }
}
@media (max-width: 860px) {
  #serviceOverlay .mgmt-side {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: 250px; flex: 0 0 auto;
    transform: translateX(-105%);
    transition: transform .22s ease;
    box-shadow: 8px 0 24px rgba(0,0,0,.18);
  }
  #serviceOverlay.mgmt-drawer-open .mgmt-side { transform: translateX(0); }
  #serviceOverlay .mgmt-scrim {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(15,22,30,.45); opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  #serviceOverlay.mgmt-drawer-open .mgmt-scrim { opacity: 1; pointer-events: auto; }
  /* collapsed rail makes no sense on mobile — drawer is full nav */
  #serviceOverlay.mgmt-collapsed .mgmt-side { flex-basis: auto; }
  #serviceOverlay.mgmt-collapsed .mgmt-nav-sec-head { display: flex; }
  #serviceOverlay.mgmt-collapsed .mgmt-nav-item { justify-content: flex-start; padding: 8px 10px; }
  #serviceOverlay.mgmt-collapsed .mgmt-nav-item .mgmt-label,
  #serviceOverlay.mgmt-collapsed .mgmt-nav-item .mgmt-soon,
  #serviceOverlay.mgmt-collapsed .mgmt-nav-item .mgmt-count { display: inline; }
  #serviceOverlay .mgmt-grid.cols-2 { grid-template-columns: minmax(0,1fr); }
}
@media (min-width: 861px) {
  /* hamburger becomes the collapse toggle on desktop */
  #serviceOverlay .mgmt-topbar .mgmt-iconbtn { display: inline-flex; }
}

/* ---------- Call Notes view (mega/callnotes) ---------- */
#serviceOverlay .mg-callnotes { max-width: 1180px; margin: 0 auto; padding-bottom: 30px; }
#serviceOverlay .mg-callnotes-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fff8e6; border: 1px solid #ecd9a0; border-radius: 8px;
  padding: 10px 14px; margin-bottom: 14px; font-size: 13px; color: #6b5518;
}
#serviceOverlay .mg-btn-sm { padding: 4px 10px; font-size: 12px; }
#serviceOverlay .mg-callnotes-filters {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
#serviceOverlay .mg-callnotes-pager button[disabled] { opacity: .4; cursor: default; }
#serviceOverlay .mg-callnotes-coverage {
  background: #f2f7ff; border: 1px solid #cfe0f7; border-radius: 8px;
  padding: 9px 12px; font-size: 12.5px; color: #2c5a9e;
}
#serviceOverlay .mg-callnotes-excerpt {
  background: #fafbfc; border: 1px solid var(--mgmt-border); border-radius: 8px;
  padding: 10px 12px; font-size: 13px; color: var(--mgmt-text);
  white-space: pre-wrap; max-height: 180px; overflow-y: auto;
}
#serviceOverlay .mg-callnotes-prior {
  padding: 7px 10px; border: 1px solid var(--mgmt-border); border-radius: 7px;
  margin-bottom: 6px; font-size: 12.5px; background: #fff;
}
#serviceOverlay .mg-callnotes-prior:hover { border-color: var(--mgmt-primary); }
#serviceOverlay .mg-callnotes-form { border-top: 1px solid var(--mgmt-border); padding-top: 12px; }
#serviceOverlay .mg-callnotes-form label { display: block; font-size: 12.5px; font-weight: 600; color: var(--mgmt-muted); margin-bottom: 8px; }
#serviceOverlay .mg-callnotes-form .mg-input { width: 100%; margin-top: 4px; font-weight: 400; }
#serviceOverlay .mg-callnotes-form textarea.mg-input { resize: vertical; }
#serviceOverlay .mg-callnotes-hist {
  border-left: 3px solid var(--mgmt-border); padding: 6px 10px; margin-bottom: 8px;
  font-size: 12.5px; white-space: pre-wrap;
}

/* =============================================================================
   BRASS EVERYWHERE — mgmt-theme.css section (2026-10-13)
   #serviceOverlay is a deliberately LIGHT Tekmetric-style surface and the
   shopmgmt crew's own theme — this section HARMONIZES it into the brass
   language without repainting it: blue primaries become brushed brass,
   secondaries become warm ivory with brass hairlines, the navy topbar
   warms to charcoal with a brass rule, active nav/tab accents go brass.
   mgmt-theme.css loads after rep.css, so same-selector rules here win
   the pair. Light scheme, layout, and the !important page-header rules
   above are untouched.
   Tokens are literal values (this file is self-contained by convention).
   SEMANTIC — deliberately untouched: .mg-btn-green (authorize/success),
   .mg-btn-danger, .mg-badge.* status colors, .mg-alert.* severities,
   .modal-x-close:hover (red), .mgmt-green/red variables.
   ============================================================================= */
#serviceOverlay .mgmt-topbar {
  background: linear-gradient(180deg, #2b251b, #171410);
  border-bottom: 2px solid #c9a53f;
}
#serviceOverlay .mgmt-brand {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  letter-spacing: 0.04em;
}
#serviceOverlay .mgmt-nav-item.is-active {
  background: #f4ecd4;
  color: #7a5f1e;
}
#serviceOverlay .mgmt-nav-item.is-active svg { color: #8a6d1f; }
#serviceOverlay .mgmt-nav-item.is-active .mgmt-count { background: #e8d9ae; color: #66500f; } /* MGMT-COLORS-20261024 */ count text was #7a5f1e (4.3:1)
#serviceOverlay .mg-btn {
  background: linear-gradient(180deg, #fdfbf6, #f1ebdb);
  border-color: #c9b98a;
  color: #241d0e;
}
#serviceOverlay .mg-btn:hover { background: #faf5e6; border-color: #c9a53f; }
#serviceOverlay .mg-btn-primary {
  background: linear-gradient(180deg, #f0d47a 0%, #dbb846 46%, #b98f2e 100%);
  border-color: #8a6d1f;
  color: #1c1707;
  text-shadow: 0 1px 0 rgba(255, 248, 220, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 246, 214, 0.65), 0 2px 6px rgba(90, 66, 10, 0.22);
}
#serviceOverlay .mg-btn-primary:hover {
  background: linear-gradient(180deg, #f0d47a 0%, #dbb846 46%, #b98f2e 100%);
  border-color: #e8cd7a;
  color: #1c1707;
  filter: brightness(1.05);
}
#serviceOverlay .mg-input:focus, #serviceOverlay .mg-select:focus {
  outline: 2px solid rgba(201, 165, 63, 0.30);
  border-color: #c9a53f;
}
#serviceOverlay .mg-tab.is-active { color: #7a5f1e; border-bottom-color: #c9a53f; }
#serviceOverlay .mg-card { border-color: #e0d5b8; }
#serviceOverlay .mg-stat.mg-clickable:hover { border-color: #c9a53f; }
#serviceOverlay .svc-fbtn.is-active {
  background: linear-gradient(180deg, #f0d47a 0%, #dbb846 46%, #b98f2e 100%);
  border-color: #8a6d1f;
  color: #1c1707;
}
#serviceOverlay .svc-fbtn:hover { border-color: #c9a53f; color: #7a5f1e; }
#serviceOverlay .svc-fbtn.is-active:hover { color: #1c1707; }
#serviceOverlay .svc-backrow .btn, #serviceOverlay .svc-sectionhead .btn,
#serviceOverlay .svc-toolbar .btn {
  background: linear-gradient(180deg, #fdfbf6, #f1ebdb);
  border-color: #c9b98a;
  color: #241d0e;
}
#serviceOverlay .svc-backrow .btn:hover, #serviceOverlay .svc-sectionhead .btn:hover,
#serviceOverlay .svc-toolbar .btn:hover { background: #faf5e6; border-color: #c9a53f; }
#serviceOverlay .svc-sectionhead .btn-primary, #serviceOverlay .svc-toolbar .btn-primary {
  background: linear-gradient(180deg, #f0d47a 0%, #dbb846 46%, #b98f2e 100%);
  border-color: #8a6d1f;
  color: #1c1707;
}
#serviceOverlay .svc-sectionhead .btn-primary:hover, #serviceOverlay .svc-toolbar .btn-primary:hover {
  background: linear-gradient(180deg, #f0d47a 0%, #dbb846 46%, #b98f2e 100%);
  border-color: #e8cd7a;
  filter: brightness(1.05);
}
#serviceOverlay .mg-callnotes-prior:hover { border-color: #c9a53f; }
/* ===== END BRASS EVERYWHERE (mgmt-theme.css) ===== */

/* =============================================================================
 * FULL-AUDIT-20261028 (Issue 2) — Shop Management desktop topbar to the
 * pinned light look. The Chambers override block above re-skinned the
 * topbar as a black bar (linear-gradient #2b251b → #171410) with a gold
 * rule and a Playfair brand, sitting on top of the light Tekmetric-style
 * content — the "gold-and-black" clash Donny flagged on 2026-10-28. The
 * topbar is now white like the rest of the surface, with the gold kept
 * only as the 2px accent rule under it (the parts-redesign language:
 * white/black + gold #C9A53F accent). The gold avatar chip stays — dark
 * initials on gold is the pinned accent treatment. The active nav item
 * (#f4ecd4 / #7a5f1e) already matched and is untouched.
 * ========================================================================== */
#serviceOverlay .mgmt-topbar {
  background: #ffffff;
  border-bottom: 2px solid #c9a53f;
  color: var(--mgmt-text);
}
#serviceOverlay .mgmt-brand { font-family: inherit; color: var(--mgmt-text); }
#serviceOverlay .mgmt-brand small { color: var(--mgmt-muted); }
#serviceOverlay .mgmt-topbar .mgmt-iconbtn { color: var(--mgmt-muted); }
#serviceOverlay .mgmt-topbar .mgmt-iconbtn:hover { background: var(--mgmt-active-bg); color: var(--mgmt-text); }
#serviceOverlay .mgmt-search { background: #f6f7f9; border-color: var(--mgmt-border); color: var(--mgmt-muted); }
#serviceOverlay .mgmt-search:hover { background: #eef1f5; color: var(--mgmt-text); }
#serviceOverlay .mgmt-user { color: var(--mgmt-muted); }
#serviceOverlay .mgmt-topbar .btn { background: #ffffff; border-color: var(--mgmt-border-strong); color: var(--mgmt-text); }
#serviceOverlay .mgmt-topbar .btn:hover { background: var(--mgmt-active-bg); color: var(--mgmt-text); }
/* ═══ END FULL-AUDIT-20261028 ═══ */