/* ============================================================================
 * rep.css — MEGA/REDESIGN-REPAIRS: Tekmetric-style retheme of the repair
 * workflow surfaces (the Service overlay: Repair Orders, Estimates, Invoices).
 *
 * Matches Tekmetric's LAYOUT PATTERNS + COLOR PALETTE only (dark navy nav,
 * status-tab list views, document hero headers, sectioned line tables, sticky
 * totals rail). No Tekmetric logos, brand names, or artwork are used — the
 * shop keeps Donny's Automotive branding.
 *
 * MERGE POINT for the SHELL track: the --rep-* variables below can be
 * remapped to the app theme variables when the global retheme lands. Every
 * rule is scoped to #serviceOverlay so nothing leaks onto other surfaces.
 * Dark-theme composition (service overlay currently renders Tekmetric-light)
 * is an open item — see tracks/redesign/FINDINGS-repairs.md.
 * ========================================================================== */

#serviceOverlay {
  --rep-navy: #16324f;
  --rep-navy-2: #1f4468;
  --rep-blue: #1e7fc4;
  --rep-blue-dark: #1668a3;
  --rep-sky: #eaf3fa;
  --rep-orange: #f26622;
  --rep-ink: #1c2b3a;
  --rep-muted: #5b6b7c;
  --rep-line: #d9e2ec;
  --rep-bg: #eef0f3; /* MGMT-COLORS-20261024 */ match mgmt page bg so Service stops reading as a different app
  --rep-card: #ffffff;
  --rep-green: #2e9e5b;
  --rep-amber: #b97a0c;
  --rep-red: #c0392b;
  --rep-radius: 8px;
}

/* --- Body + shell ------------------------------------------------------- */
#serviceOverlay #svcBody {
  background: var(--rep-bg);
  border-radius: var(--rep-radius);
  padding: 14px;
  color: var(--rep-ink);
}
#serviceOverlay .svc-shell { gap: 0; align-items: stretch; }

/* Dark navy left nav (Tekmetric-style) */
#serviceOverlay .svc-side {
  background: var(--rep-navy);
  border-radius: var(--rep-radius) 0 0 var(--rep-radius);
  padding: 12px 8px;
  min-width: 190px;
  border: none;
}
#serviceOverlay .svc-sidebtn {
  display: block; width: 100%; text-align: left;
  color: #c8d6e4; background: transparent;
  border: none; border-left: 3px solid transparent; border-radius: 0 6px 6px 0;
  padding: 10px 12px; margin: 2px 0; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
#serviceOverlay .svc-sidebtn:hover { color: #fff; background: var(--rep-navy-2); }
#serviceOverlay .svc-sidebtn.is-active {
  color: #fff; background: var(--rep-navy-2);
  border-left-color: var(--rep-orange);
}
#serviceOverlay .svc-main {
  background: var(--rep-bg);
  border-radius: 0 var(--rep-radius) var(--rep-radius) 0;
  padding: 14px 16px;
}

/* --- Section heads + toolbars ------------------------------------------- */
#serviceOverlay .svc-sectionhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
#serviceOverlay .svc-sectionhead h3 {
  margin: 0; font-size: 20px; letter-spacing: -0.01em; color: var(--rep-navy);
}
#serviceOverlay .svc-toolbar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px;
}
#serviceOverlay .svc-search {
  flex: 1 1 220px; max-width: 340px;
  border: 1px solid var(--rep-line); border-radius: 6px;
  padding: 8px 10px; font-size: 14px; background: #fff; color: var(--rep-ink);
}

/* --- Status tabs (Tekmetric-style filter chips with counts) -------------- */
#serviceOverlay .svc-filters, #serviceOverlay .rep-tabs {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
}
#serviceOverlay .svc-fbtn {
  border: 1px solid var(--rep-line); background: #fff; color: var(--rep-ink);
  border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
#serviceOverlay .svc-fbtn:hover { border-color: var(--rep-blue); color: var(--rep-blue); }
#serviceOverlay .svc-fbtn.is-active {
  background: var(--rep-navy); border-color: var(--rep-navy); color: #fff;
}

/* --- Tekmetric-style document table -------------------------------------- */
#serviceOverlay .rep-tablewrap {
  background: var(--rep-card); border: 1px solid var(--rep-line);
  border-radius: var(--rep-radius); overflow: hidden; margin-bottom: 12px;
}
#serviceOverlay table.rep-table { width: 100%; border-collapse: collapse; font-size: 14px; }
#serviceOverlay .rep-table thead th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--rep-muted); font-weight: 700;
  padding: 10px 12px; border-bottom: 2px solid var(--rep-line); background: #f8fafc;
  white-space: nowrap;
}
#serviceOverlay .rep-table tbody td {
  padding: 10px 12px; border-bottom: 1px solid var(--rep-line); vertical-align: middle;
}
#serviceOverlay .rep-table tbody tr:last-child td { border-bottom: none; }
#serviceOverlay .rep-table tbody tr[data-action] { cursor: pointer; }
#serviceOverlay .rep-table tbody tr[data-action]:hover { background: var(--rep-sky); }
#serviceOverlay .rep-num { font-weight: 800; color: var(--rep-blue-dark); white-space: nowrap; }
#serviceOverlay .rep-cust { font-weight: 700; }
#serviceOverlay .rep-veh { color: var(--rep-muted); }
#serviceOverlay .rep-total { font-weight: 700; text-align: right; white-space: nowrap; }
#serviceOverlay .rep-when { color: var(--rep-muted); font-size: 12px; white-space: nowrap; }

/* --- Document hero header (customer / vehicle banner) -------------------- */
#serviceOverlay .rep-hero {
  background: linear-gradient(135deg, var(--rep-navy) 0%, var(--rep-navy-2) 100%);
  color: #fff; border-radius: var(--rep-radius);
  padding: 16px 18px; margin-bottom: 14px;
}
#serviceOverlay .rep-hero-top {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
#serviceOverlay .rep-hero-num { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }
#serviceOverlay .rep-hero-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 18px;
}
#serviceOverlay .rep-hero-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: #9fb3c8; font-weight: 700; margin-bottom: 2px;
}
#serviceOverlay .rep-hero-val { font-size: 15px; font-weight: 600; }
#serviceOverlay .rep-hero-val a { color: #fff; }
#serviceOverlay .rep-hero-sub { font-size: 12px; color: #b9cbde; margin-top: 2px; }
#serviceOverlay .rep-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* --- Panels: Tekmetric section headers ----------------------------------- */
#serviceOverlay .svc-panel {
  background: var(--rep-card); border: 1px solid var(--rep-line);
  border-radius: var(--rep-radius); padding: 14px 16px; margin-bottom: 14px;
}
#serviceOverlay .svc-panel-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 800; color: var(--rep-navy);
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
#serviceOverlay .svc-panel-title::after { background: var(--rep-line); }
#serviceOverlay .svc-priv {
  font-size: 10px; text-transform: none; letter-spacing: 0; font-weight: 600;
  color: var(--rep-muted); background: var(--rep-sky);
  border-radius: 4px; padding: 2px 6px;
}

/* --- Line tables ---------------------------------------------------------- */
#serviceOverlay .svc-line-group { margin-bottom: 6px; }
#serviceOverlay .svc-line-group-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--rep-line); padding-bottom: 4px; margin: 10px 0 4px;
}
#serviceOverlay .svc-line-group-head .svc-section-title {
  font-size: 13px; font-weight: 800; color: var(--rep-navy);
  text-transform: uppercase; letter-spacing: 0.05em;
}
#serviceOverlay .svc-line-group-sub { font-weight: 700; font-size: 13px; }
#serviceOverlay .svc-line {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 4px; border-bottom: 1px dashed var(--rep-line);
}
#serviceOverlay .svc-line:last-child { border-bottom: none; }
#serviceOverlay .svc-line-desc { flex: 1; min-width: 0; font-weight: 600; }
#serviceOverlay .svc-line-meta { font-weight: 400; color: var(--rep-muted); font-size: 12px; margin-top: 2px; }
#serviceOverlay .svc-line-amt { font-weight: 700; white-space: nowrap; }
#serviceOverlay .svc-neg, #serviceOverlay .svc-totals-row .neg { color: var(--rep-red); }

/* --- Totals card ---------------------------------------------------------- */
#serviceOverlay .svc-totals-card { border-top: 3px solid var(--rep-blue); }
#serviceOverlay .svc-totals-row.svc-grand { font-size: 19px; }
#serviceOverlay .svc-totals-row.svc-grand span:last-child { color: var(--rep-navy); }

/* --- Status chips ---------------------------------------------------------- */
#serviceOverlay .svc-chip {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
#serviceOverlay .svc-chip-draft     { background: #e8edf3; color: #5b6b7c; }
#serviceOverlay .svc-chip-active    { background: #dbeefe; color: #1668a3; }
#serviceOverlay .svc-chip-sent      { background: #dbeefe; color: #1668a3; }
#serviceOverlay .svc-chip-approved  { background: #dcf5e5; color: #1e7a44; }
#serviceOverlay .svc-chip-completed { background: #dcf5e5; color: #1e7a44; }
#serviceOverlay .svc-chip-paid,
#serviceOverlay .svc-chip-invoiced  { background: #16324f; color: #fff; }
#serviceOverlay .svc-chip-partial   { background: #fdf0dc; color: #7c5206; } /* MGMT-COLORS-20261024 */ was #b97a0c (3.19:1)
#serviceOverlay .svc-chip-declined,
#serviceOverlay .svc-chip-cancelled,
#serviceOverlay .svc-chip-void      { background: #fbe3e0; color: #a93226; }
#serviceOverlay .svc-chip-expired   { background: #f0e8d8; color: #8a6d1a; }
#serviceOverlay .svc-chip-converted { background: #e6e0f5; color: #5b3fa8; }
/* hero chips sit on navy — keep them readable */
#serviceOverlay .rep-hero .svc-chip { box-shadow: 0 0 0 1px rgba(255,255,255,0.25); }

/* --- Status / action line on doc pages ------------------------------------ */
#serviceOverlay .svc-status-line {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: var(--rep-sky); border: 1px solid var(--rep-line);
  border-radius: 6px; padding: 10px 12px;
}

/* --- Notice banners (honest "no data / no processor" states) -------------- */
#serviceOverlay .rep-notice {
  border: 1px solid #f0c36d; background: #fff8e8; color: #7a5a12;
  border-radius: var(--rep-radius); padding: 10px 14px; margin-bottom: 12px;
  font-size: 13px; line-height: 1.45;
}
#serviceOverlay .rep-notice strong { color: #5c430c; }
#serviceOverlay .rep-empty {
  background: var(--rep-card); border: 1px dashed var(--rep-line);
  border-radius: var(--rep-radius); padding: 22px; text-align: center;
  color: var(--rep-muted); font-size: 14px;
}

/* --- Activity timeline on doc pages --------------------------------------- */
#serviceOverlay .rep-activity { display: flex; flex-direction: column; gap: 0; }
#serviceOverlay .rep-act-row {
  display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--rep-line);
  font-size: 13px;
}
#serviceOverlay .rep-act-row:last-child { border-bottom: none; }
#serviceOverlay .rep-act-when { color: var(--rep-muted); white-space: nowrap; min-width: 130px; font-size: 12px; }
#serviceOverlay .rep-act-text { flex: 1; }
#serviceOverlay .rep-act-who { color: var(--rep-muted); font-size: 12px; }

/* --- Cards (estimates / invoices) ----------------------------------------- */
#serviceOverlay .svc-card {
  background: var(--rep-card); border: 1px solid var(--rep-line);
  border-radius: var(--rep-radius); padding: 12px 14px; text-align: left;
  cursor: pointer; display: block; width: 100%; color: var(--rep-ink);
}
#serviceOverlay .svc-card:hover { border-color: var(--rep-blue); box-shadow: 0 2px 8px rgba(22,50,79,0.08); }
#serviceOverlay .svc-card-num { font-weight: 800; color: var(--rep-blue-dark); font-size: 16px; }
#serviceOverlay .svc-card-total { font-weight: 800; font-size: 15px; }

/* --- Doc header row -------------------------------------------------------- */
#serviceOverlay .svc-doc-head { margin-bottom: 0; }
#serviceOverlay .svc-doc { max-width: 1200px; }
#serviceOverlay .svc-doc-grid { margin-top: 0; }

/* --- Buttons on the rethemed surfaces -------------------------------------- */
#serviceOverlay .btn-primary, #serviceOverlay .btn.btn-primary {
  background: var(--rep-blue); border-color: var(--rep-blue); color: #fff;
}
#serviceOverlay .btn-primary:hover, #serviceOverlay .btn.btn-primary:hover {
  background: var(--rep-blue-dark); border-color: var(--rep-blue-dark);
}

/* --- Balance banner on invoices -------------------------------------------- */
#serviceOverlay .svc-balance {
  background: var(--rep-navy); color: #fff; border-radius: var(--rep-radius);
  padding: 10px 16px; margin-bottom: 14px; font-size: 16px; font-weight: 800;
}
#serviceOverlay .rep-hero .svc-overdue { color: #ffd9d2; font-weight: 700; } /* MGMT-COLORS-20261024 */ hero-only pink was leaking onto every light surface (1.21:1); elsewhere staff.css #b91c1c now applies

/* --- Narrow screens --------------------------------------------------------- */
@media (max-width: 860px) {
  #serviceOverlay .svc-shell { flex-direction: column; }
  #serviceOverlay .svc-side {
    min-width: 0; border-radius: var(--rep-radius); display: flex;
    overflow-x: auto; padding: 8px;
  }
  #serviceOverlay .svc-sidebtn {
    border-left: none; border-bottom: 3px solid transparent; border-radius: 6px;
    white-space: nowrap; width: auto;
  }
  #serviceOverlay .svc-sidebtn.is-active { border-bottom-color: var(--rep-orange); }
  #serviceOverlay .svc-main { border-radius: var(--rep-radius); }
  #serviceOverlay .rep-tablewrap { overflow-x: auto; }
}