/* Techmate Design System — shared across all screens */
:root {
  --bg:         #1a1c24;
  --surface:    #20222e;
  --border:     #2c2f3d;
  --text:       #f4f4f5;
  --text-muted: #9090a0;
  --text-dim:   #70707c;
  --accent:     #22c55e;
  --accent-dk:  #16a34a;
  --font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  --r-card: 14px;
  --r-btn:  8px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  min-height: 100vh;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── Shared Header ── */
.tm-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 60px;
  background: rgba(26,28,36,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 20px; gap: 12px;
}
.header-left  { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-center { flex: 1; display: flex; align-items: center; gap: 10px; max-width: 560px; margin: 0 auto; }
.header-right  { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; }

.location-select {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-btn);
  color: var(--text); font-size: 13px; font-family: var(--font);
  padding: 7px 12px; cursor: pointer; outline: none; transition: border-color .15s; flex-shrink: 0;
}
.location-select:focus { border-color: var(--accent-dk); }

.search-wrap { flex: 1; position: relative; }
.search-input {
  width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-btn);
  color: var(--text); font-size: 13px; font-family: var(--font);
  padding: 7px 12px 7px 36px; outline: none; transition: border-color .15s;
}
.search-input::placeholder { color: var(--text-dim); }
.search-input:focus { border-color: #27272a; }
.search-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--text-dim); pointer-events: none; display: flex;
}

/* ── Price Guide ── */
.pg-wrap { position: relative; }
.pg-btn {
  display: flex; align-items: center; gap: 6px;
  background: rgba(148,163,184,0.07); border: 1px solid rgba(148,163,184,0.18);
  border-radius: var(--r-btn); padding: 6px 12px;
  font-size: 12px; font-weight: 600; color: #b4b4c0;
  cursor: pointer; transition: background .15s, color .15s; font-family: var(--font);
}
.pg-btn:hover, .pg-btn.open { background: rgba(148,163,184,0.14); color: var(--text); }
.pg-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 560px; height: 460px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: 0 8px 24px rgba(0,0,0,.55);
  display: none; flex-direction: column; z-index: 400; overflow: hidden;
}
.pg-dropdown.show { display: flex; }
.pg-mobile-close { display: none; } /* hidden on desktop; revealed in the 767px block */
.pg-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.pg-tab-btn {
  flex: 1; padding: 9px 6px; background: none; border: none;
  border-bottom: 2px solid transparent; color: var(--text-muted);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  cursor: pointer; font-family: var(--font); transition: color .15s;
}
.pg-tab-btn:hover { color: var(--text); }
.pg-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.pg-body { flex: 1; display: flex; overflow: hidden; min-height: 0; }
.pg-layout { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.pg-models {
  width: 160px; flex-shrink: 0; overflow-y: auto;
  border-right: 1px solid var(--border);
}
.pg-model-item {
  padding: 9px 11px; font-size: 12px; color: var(--text-muted);
  cursor: pointer; border-bottom: 1px solid rgba(44,47,61,0.4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background .1s, color .1s; line-height: 1.3;
}
.pg-model-item:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.pg-model-item.active { background: rgba(34,197,94,0.08); color: var(--accent); }
.pg-repairs { flex: 1; overflow-y: auto; }
.pg-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; font-size: 12px;
  border-bottom: 1px solid rgba(44,47,61,0.5);
}
.pg-row:last-child { border-bottom: none; }
.pg-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.pg-row-price { font-weight: 700; color: var(--accent); white-space: nowrap; margin-left: 12px; }
.pg-empty, .pg-loading { padding: 24px 14px; font-size: 13px; color: var(--text-muted); text-align: center; }

/* ── Price Guide Search ── */
.pg-search-bar   { padding: 10px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.pg-search-box   { display: flex; align-items: center; background: var(--bg);
                   border: 1px solid var(--border); border-radius: var(--r-btn);
                   overflow: hidden; transition: border-color .15s; }
.pg-search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(34,197,94,0.12); }
.pg-search-icon  { flex-shrink: 0; margin: 0 10px; color: var(--text-muted); display: flex; align-items: center; }
.pg-search-input { flex: 1; background: none; border: none; outline: none;
                   color: var(--text); font: 13px var(--font); padding: 9px 0; }
.pg-search-input::placeholder { color: var(--text-dim); }
.pg-search-clear { background: none; border: none; color: var(--text-muted);
                   font-size: 18px; line-height: 1; padding: 0 11px;
                   cursor: pointer; display: flex; align-items: center; }
.pg-search-clear:hover { color: var(--text); }
.pg-dropdown.searching .pg-tabs,
.pg-dropdown.searching .pg-body  { display: none; }
.pg-dropdown.searching .pg-search-bar { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#pgSearchResults { flex: 1; overflow-y: auto; min-height: 0; margin-top: 6px;
                   border: 1px solid var(--border); border-radius: var(--r-btn); }
.pg-result-row   { display: flex; align-items: center; justify-content: space-between;
                   padding: 9px 14px; gap: 12px; border-bottom: 1px solid var(--border); }
.pg-result-row:last-child { border-bottom: none; }
.pg-result-main  { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pg-result-label { font-size: 12px; font-weight: 600; color: var(--text);
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-result-crumb { font-size: 11px; color: var(--text-muted); }
.pg-result-price { font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; flex-shrink: 0; }
.pg-result-empty { padding: 20px 14px; font-size: 13px; color: var(--text-muted); text-align: center; }

.inbox-badge {
  display: flex; align-items: center; gap: 7px;
  background: rgba(22,163,74,0.1); border: 1px solid rgba(22,163,74,0.22);
  border-radius: var(--r-btn); padding: 6px 12px;
  font-size: 12px; font-weight: 600; color: #b4b4c0; cursor: pointer; transition: background .15s;
}
.inbox-badge:hover { background: rgba(22,163,74,0.16); }
.inbox-count { background: var(--accent-dk); color: #fff; border-radius: 100px; padding: 1px 7px; font-size: 11px; font-weight: 700; }

.inbox-wrap { position: relative; }
.inbox-panel {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  width: 960px; max-width: calc(100vw - 20px); max-height: 520px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.55); z-index: 200;
}
.inbox-panel-header {
  padding: 11px 16px; border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 700; color: var(--text);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
}
.inbox-mobile-close {
  display: none; background: none; border: none; color: var(--text-dim);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0;
  min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
}
.inbox-mobile-close:hover { color: var(--text); }
.inbox-table-head {
  display: grid;
  grid-template-columns: 68px 148px 90px 130px 120px 1fr 68px 36px;
  padding: 6px 16px; border-bottom: 2px solid var(--border);
  font-size: 10px; font-weight: 700; color: #b4b4c0; text-transform: uppercase; letter-spacing: .05em;
  position: sticky; top: 40px; background: #1c1e2a; z-index: 1;
}
.inbox-item {
  display: grid;
  grid-template-columns: 68px 148px 90px 130px 120px 1fr 68px 36px;
  padding: 9px 16px; border-bottom: 1px solid var(--border);
  align-items: center; cursor: pointer; transition: background .1s;
}
.inbox-item:last-child { border-bottom: none; }
.inbox-item:hover { background: rgba(255,255,255,.04); }
.inbox-item.unread { background: rgba(22,163,74,.06); }
.inbox-col { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; }
.inbox-col-wo { font-size: 11px; font-weight: 700; color: var(--accent); }
.inbox-col-store { font-size: 12px; color: #c0c0cc; }
.inbox-col-name { font-weight: 600; }
.inbox-col-device { font-size: 12px; color: #c0c0cc; }
.inbox-col-msg { color: var(--text); font-size: 11px; white-space: normal; overflow: visible; text-overflow: unset; line-height: 1.5; }
.inbox-col-time { font-size: 12px; color: #c0c0cc; line-height: 1.5; text-align: right; padding-right: 8px; }
.inbox-empty { padding: 32px; text-align: center; font-size: 13px; color: var(--text-muted); }
.inbox-delete-btn { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; background:#dc2626; border:none; color:#fff; cursor:pointer; font-size:11px; font-weight:700; border-radius:4px; line-height:1; flex-shrink:0; transition:background .15s; }
.inbox-delete-btn:hover { background:#b91c1c; }

.user-avatar {
  width: 34px; height: 34px; border-radius: 100px;
  background: rgba(22,163,74,0.15); border: 1px solid rgba(22,163,74,0.3);
  color: var(--accent); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}

/* ── Shared Buttons ── */
.btn-p {
  background: var(--accent-dk); color: #fff; border: none; border-radius: var(--r-btn);
  padding: 10px 20px; font-size: 13px; font-weight: 600; font-family: var(--font);
  cursor: pointer; transition: background .15s, transform .1s;
}
.btn-p:hover { background: #15803d; transform: translateY(-1px); }
.btn-p:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-s {
  background: transparent; color: #b4b4c0; border: 1px solid var(--border); border-radius: var(--r-btn);
  padding: 10px 14px; font-size: 13px; font-weight: 500; font-family: var(--font);
  cursor: pointer; transition: border-color .15s, color .15s; white-space: nowrap;
}
.btn-s:hover { border-color: #3e4150; color: var(--text); }
.btn-s:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-d {
  background: transparent; color: #f87171; border: 1px solid rgba(239,68,68,0.2); border-radius: var(--r-btn);
  padding: 10px 14px; font-size: 13px; font-weight: 500; font-family: var(--font);
  cursor: pointer; transition: border-color .15s, background .15s; white-space: nowrap; margin-left: auto;
}
.btn-d:hover { border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.06); }

/* ── Shared Form Input ── */
.tm-input {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-btn);
  color: var(--text); font-size: 13px; font-family: var(--font);
  padding: 8px 10px; outline: none; transition: border-color .15s;
  width: 100%; box-sizing: border-box;
}
.tm-input::placeholder { color: var(--text-dim); }
.tm-input:focus { border-color: var(--accent-dk); }
select.tm-input { cursor: pointer; }

/* ── Age Chips ── */
.age-chip  { font-size:10px;font-weight:500;padding:1px 6px;border-radius:100px;background:rgba(144,144,160,0.12);color:#9090a0; }
.age-warn  { font-size:10px;font-weight:500;padding:1px 6px;border-radius:100px;background:rgba(245,158,11,0.12);color:#fbbf24; }
.age-alert { font-size:10px;font-weight:500;padding:1px 6px;border-radius:100px;background:rgba(239,68,68,0.1);color:#f87171; }

/* ── Customer Profile ───────────────────────────────────────── */
.cp-wrap  { display:flex;flex-direction:column;height:100%; }

.cp-topbar {
  display:flex;align-items:center;gap:8px;padding:10px 16px 9px;
  border-bottom:1px solid var(--border);border-top:3px solid var(--accent);
  background:rgba(34,197,94,.05);flex-shrink:0;
}
.cp-back-btn {
  font-size:11px;color:var(--accent);font-weight:600;cursor:pointer;
  background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.22);
  border-radius:5px;padding:3px 9px;flex-shrink:0;
}
.cp-name { font-size:17px;font-weight:700;flex:1; }
.cp-body { flex:1;overflow-y:auto; }

.cp-section { padding:12px 16px;border-bottom:1px solid var(--border); }
.cp-section-hd {
  display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
}
.cp-section-title {
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#b4b4c0;
}
.cp-edit-btn {
  font-size:10px;font-weight:600;color:var(--accent);cursor:pointer;
  background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);
  border-radius:5px;padding:3px 10px;
}
.cp-checkin-new-btn {
  font-size:10px;font-weight:600;color:var(--text-muted);cursor:pointer;
  background:transparent;border:1px solid var(--border);
  border-radius:5px;padding:3px 10px;white-space:nowrap;
}
.cp-checkin-new-btn:hover { border-color:var(--accent);color:var(--accent); }
.cp-checkin-device-btn {
  font-size:10px;font-weight:600;color:var(--text-muted);cursor:pointer;
  background:transparent;border:1px solid var(--border);
  border-radius:5px;padding:3px 10px;white-space:nowrap;
}
.cp-checkin-device-btn:hover { border-color:var(--accent);color:var(--accent); }

/* Device accordion */
.device-accordion {
  border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:8px;
}
.device-toggle {
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  background:var(--surface);cursor:pointer;user-select:none;transition:background .12s;
}
.device-toggle:hover { background:#252733; }
.device-toggle.open  { background:#20222e;border-bottom:1px solid var(--border); }
.dev-chevron {
  font-size:10px;color:var(--text-muted);transition:transform .15s;flex-shrink:0;
}
.device-toggle.open .dev-chevron { transform:rotate(90deg); }
.dev-icon-emoji    { font-size:16px;flex-shrink:0; }
.dev-toggle-info   { flex:1; }
.dev-toggle-name   { font-size:13px;font-weight:600; }
.dev-toggle-sub    { font-size:10px;color:var(--text-muted);margin-top:1px; }
.dev-meta          { display:flex;flex-direction:column;align-items:flex-end;gap:3px; }
.dev-asset-badge   {
  font-size:9px;font-weight:700;color:#ef4444;
  background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);
  border-radius:4px;padding:1px 5px;
}
.dev-wo-count { font-size:10px;color:var(--text-muted); }

/* Ticket rows inside accordion */
.device-tickets         { background:#14161f; }
.device-tickets.hidden  { display:none; }

/* Returned device badge + toggle section */
.dev-returned-badge{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#fca5a5;background:#3a1f24;border:1px solid #5a2a30;border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:middle}
.cp-returned-wrap{margin-top:12px}
.cp-show-returned-btn{background:none;border:none;color:#9090a0;font-size:12px;font-weight:600;cursor:pointer;padding:4px 0}
.cp-show-returned-btn:hover{color:#f4f4f5}
.cp-returned-list.hidden{display:none}
.cp-return-device-btn,.cp-restore-device-btn,.cp-merge-device-btn{
  font-size:10px;font-weight:600;color:var(--text-muted);cursor:pointer;
  background:transparent;border:1px solid var(--border);
  border-radius:5px;padding:3px 10px;white-space:nowrap;
}
.cp-return-device-btn:hover,.cp-restore-device-btn:hover,.cp-merge-device-btn:hover{border-color:var(--accent);color:var(--accent);}

.cp-ticket-row {
  display:flex;align-items:center;gap:8px;padding:8px 14px 8px 38px;
  border-bottom:1px solid rgba(44,47,61,.8);cursor:pointer;transition:background .1s;
}
.cp-ticket-row:last-child { border-bottom:none; }
.cp-ticket-row:hover      { background:#20222e; }
.ct-wo     { font-size:10px;font-weight:700;color:var(--accent);width:56px;flex-shrink:0; }
.ct-dot    { width:7px;height:7px;border-radius:50%;flex-shrink:0; }
.ct-status { font-size:11px;color:var(--text-muted);flex:1; }
.ct-loc    { font-size:10px;color:var(--text-dim);flex-shrink:0; }
.ct-age    { font-size:10px;color:#f97316;flex-shrink:0; }
.ct-age.red { color:#ef4444; }
.ct-closed {
  font-size:9px;font-weight:700;color:#565663;
  background:rgba(86,86,99,.1);border:1px solid rgba(86,86,99,.3);
  border-radius:4px;padding:1px 6px;
}

/* Breadcrumb bar (shown above ticket detail when navigated from profile) */
.cp-breadcrumb {
  display:flex;align-items:center;gap:10px;padding:7px 16px;
  background:rgba(34,197,94,.04);border-bottom:1px solid var(--border);flex-shrink:0;
}
.cp-breadcrumb-btn {
  font-size:11px;color:var(--accent);font-weight:600;
  background:none;border:none;cursor:pointer;padding:0;
}
.cp-breadcrumb-btn:hover { text-decoration:underline; }
.cp-breadcrumb-text { font-size:11px;color:var(--text-muted); }

/* ── Photo Notes ──────────────────────────────────────────── */
.note-photo-thumb {
  display: block;
  max-width: 240px;
  max-height: 180px;
  border-radius: 6px;
  cursor: pointer;
  object-fit: cover;
  margin-bottom: 6px;
  border: 1px solid var(--border);
}
.note-photo-thumb:hover { opacity: .85; }
#photoVideo { background: #000; }

/* ── Status Admin (Settings panel) ─────────────────────── */
.sa-list-header {
  display: grid;
  /* Must match .sa-row: 7 columns (swatch · label · 3 toggles · reorder · delete). */
  grid-template-columns: 26px 1fr 60px 60px 60px 44px auto;
  gap: 10px;
  padding: 7px 16px;
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid var(--border);
}
.sa-list-header span {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-dim);
}
.sa-row {
  display: grid;
  /* 7 columns: swatch · label · 3 toggles · reorder · delete.
     Was 6 — the Delete button had no column, so it overflowed its cell and the
     hover highlight only covered part of it. */
  grid-template-columns: 26px 1fr 60px 60px 60px 44px auto;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.sa-row:hover { background: rgba(255,255,255,0.02); }
.sa-swatch {
  width: 20px; height: 20px; border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.12); cursor: pointer; flex-shrink: 0;
}
.sa-label-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sa-label {
  font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px dashed transparent; transition: border-color 0.12s;
}
.sa-label:hover { border-bottom-color: var(--text-dim); }
.sa-label-input {
  background: #252836; border: 1px solid var(--green);
  border-radius: 5px; color: var(--text);
  font-size: 13px; font-weight: 600; font-family: inherit;
  padding: 2px 7px; width: 100%; outline: none;
}
.sa-slug {
  font-size: 11px; color: var(--text-dim);
  font-family: 'Courier New', monospace;
}
.sa-toggle-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sa-toggle-lbl { font-size: 10px; color: var(--text-dim); text-align: center; line-height: 1.2; }
.sa-reorder { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.sa-reorder-btn {
  background: none; border: 1px solid #363a4d; color: #9090a0;
  border-radius: 3px; width: 20px; height: 16px; cursor: pointer;
  font-size: 8px; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.12s, color 0.12s; padding: 0;
}
.sa-reorder-btn:hover:not(:disabled) { border-color: var(--green); color: var(--green); }
.sa-reorder-btn:disabled { opacity: 0.2; cursor: default; }
.sa-delete-btn {
  background: none; border: 1px solid transparent; color: var(--text-dim);
  border-radius: 6px; padding: 4px 8px; cursor: pointer;
  font-size: 11px; font-weight: 600; font-family: inherit;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.sa-delete-btn:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,0.07); }
.sa-sms-row {
  display: none; padding: 0 16px 12px 52px;
  background: rgba(0,0,0,0.12); border-bottom: 1px solid var(--border);
  gap: 10px; align-items: flex-start;
}
.sa-sms-row.open { display: flex; }
.sa-sms-textarea {
  flex: 1; background: #252836; border: 1px solid #363a4d;
  border-radius: 7px; color: var(--text);
  font-size: 13px; font-family: inherit;
  padding: 8px 10px; resize: vertical; min-height: 60px; outline: none;
  transition: border-color 0.12s; line-height: 1.5; margin-top: 10px;
}
.sa-sms-textarea:focus { border-color: var(--green); }
.sa-sms-meta {
  margin-top: 10px; display: flex; flex-direction: column; gap: 5px; flex-shrink: 0;
}
.sa-sms-hint { font-size: 11px; color: var(--text-dim); line-height: 1.5; }
.sa-sms-hint strong { color: #9090a0; }
.sa-sms-char { font-size: 11px; color: var(--text-dim); text-align: right; }
.sa-add-section {
  padding: 14px 16px 16px;
  background: rgba(0,0,0,0.1);
  border-top: 1px solid var(--border);
}
.sa-add-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #b4b4c0; margin-bottom: 10px;
}
.sa-add-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.sa-color-wrap {
  display: flex; align-items: center; gap: 7px;
  background: #252836; border: 1px solid #363a4d;
  border-radius: 7px; padding: 6px 9px; cursor: pointer;
  transition: border-color 0.12s;
}
.sa-color-wrap:focus-within { border-color: var(--green); }
.sa-color-swatch { width: 20px; height: 20px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.12); }
.sa-color-hex {
  background: none; border: none; color: var(--text);
  font-size: 12px; font-family: 'Courier New', monospace; width: 64px; outline: none;
}
.sa-slug-preview {
  color: var(--text-dim); font-family: 'Courier New', monospace;
  font-size: 12px; background: rgba(0,0,0,0.2); border-style: dashed; cursor: default;
}
/* ── Checkout Category Admin ──────────────────────────────── */
.cc-group-block {
  background: var(--surface2, #262836);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
}
.cc-group-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
}
.cc-group-hd:hover { background: rgba(255,255,255,.02); }
.cc-group-hd.open  { border-bottom: 1px solid var(--border); }
.cc-group-caret { color: var(--text-dim); font-size: 11px; transition: transform .2s; min-width: 12px; }
.cc-group-hd.open .cc-group-caret { transform: rotate(90deg); }
.cc-group-label { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); background: transparent; border: none; outline: none; font-family: var(--font); cursor: pointer; }
.cc-group-label:focus { background: var(--border); border-radius: 5px; padding: 2px 6px; cursor: text; }
.cc-warranty-btn {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  background: transparent; border: 1px solid var(--border2, #363848);
  border-radius: 6px; padding: 4px 8px; cursor: pointer;
  font-family: var(--font); white-space: nowrap; transition: all .15s;
}
.cc-warranty-btn .cc-wdot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); transition: background .15s; }
.cc-warranty-btn.on { color: var(--accent); border-color: var(--accent-dk, #16a34a); background: rgba(34,197,94,.08); }
.cc-warranty-btn.on .cc-wdot { background: var(--accent); }
.cc-options-area { display: none; padding: 10px 14px 14px 32px; }
.cc-options-area.open { display: block; }
.cc-option-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 7px; margin-bottom: 5px;
}
.cc-option-label { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-family: var(--font); font-size: 13px; cursor: text; min-width: 0; }
.cc-option-label:focus { background: var(--border); border-radius: 4px; padding: 1px 5px; }
.cc-stored-val { font-size: 11px; color: var(--text-dim); font-family: 'SF Mono','Fira Code',monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.cc-ticket-count { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.cc-add-opt-row { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.cc-add-opt-input {
  flex: 1; background: var(--surface); border: 1px dashed var(--border2, #363848);
  border-radius: 7px; padding: 7px 10px; color: var(--text); font-family: var(--font);
  font-size: 13px; outline: none;
}
.cc-add-opt-input::placeholder { color: var(--text-dim); }
.cc-add-opt-input:focus { border-color: var(--accent); border-style: solid; }
.cc-add-group-row {
  display: flex; gap: 10px; align-items: center; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.cc-add-group-input {
  flex: 1; background: var(--surface2, #262836); border: 1px dashed var(--border2, #363848);
  border-radius: 8px; padding: 8px 12px; color: var(--text); font-family: var(--font);
  font-size: 13px; outline: none;
}
.cc-add-group-input::placeholder { color: var(--text-dim); }
.cc-add-group-input:focus { border-color: var(--accent); border-style: solid; }
/* Orphaned categories */
.cc-orphaned-section {
  margin-top: 16px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid #f59e0b44; background: #f59e0b08;
}
.cc-orphaned-hd {
  font-size: 11px; font-weight: 700; color: #f59e0b; margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: .05em;
}
.cc-orphaned-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--border); font-size: 13px;
}
.cc-orphaned-row:last-child { border-bottom: none; }
.cc-orphaned-name { font-weight: 600; color: var(--text); }
.cc-orphaned-grp  { font-size: 11px; color: var(--text-dim); margin-left: 4px; }
.cc-orphaned-count{ color: #f59e0b; font-size: 12px; margin-left: auto; white-space: nowrap; padding-right: 8px; }
/* Merge modal */
.cc-merge-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 999; align-items: center; justify-content: center;
}
.cc-merge-overlay.open { display: flex; }
.cc-merge-dialog {
  background: var(--surface); border: 1px solid var(--border2, #363848);
  border-radius: 14px; padding: 28px; max-width: 400px; width: 100%;
}
.cc-merge-dialog h4 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.cc-merge-dialog p  { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.5; }
.cc-merge-select {
  width: 100%; background: var(--surface2, #262836); border: 1px solid var(--border2, #363848);
  border-radius: 8px; color: var(--text); font-family: var(--font); font-size: 13px;
  padding: 8px 10px; margin-bottom: 16px; outline: none;
}
.cc-merge-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ── Call Required — Sidebar chip ─────────────────────────────────────────── */
.chip-call {
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:800;letter-spacing:.04em;
  padding:2px 7px;border-radius:4px;
  background:rgba(249,115,22,.2);color:#fb923c;border:1px solid rgba(249,115,22,.4);
}
.chip-call svg { width:10px;height:10px;flex-shrink:0; }

/* ── Call Required — Detail panel banner ─────────────────────────────────── */
.call-banner {
  background:rgba(249,115,22,.12);
  border-bottom:2px solid rgba(249,115,22,.45);
  padding:13px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.call-banner-left { display:flex;align-items:center;gap:11px; }
.call-banner-icon {
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:rgba(249,115,22,.22);color:#fb923c;
  display:flex;align-items:center;justify-content:center;
}
.call-banner-icon svg { width:17px;height:17px; }
.call-banner-title { font-size:12px;font-weight:800;color:#fb923c;text-transform:uppercase;letter-spacing:.05em; }
.call-banner-sub { font-size:12px;color:var(--text-muted);margin-top:1px; }
.btn-log-call {
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(249,115,22,.18);border:1px solid rgba(249,115,22,.45);color:#fb923c;
  padding:7px 14px;border-radius:var(--r-btn);font-size:12px;font-weight:700;
  cursor:pointer;white-space:nowrap;flex-shrink:0;
}
.btn-log-call:hover { background:rgba(249,115,22,.28); }
.btn-log-call svg { width:13px;height:13px; }
.btn-log-call:disabled { opacity:.45;cursor:default; }

/* ── Call Required — Inline log form ─────────────────────────────────────── */
.call-log-form {
  background:rgba(249,115,22,.06);
  border-bottom:1px solid rgba(249,115,22,.25);
  padding:15px 18px;
}
.clf-title { font-size:11px;font-weight:700;color:var(--label);text-transform:uppercase;letter-spacing:.06em;margin-bottom:11px; }
.clf-label { font-size:11px;font-weight:700;color:var(--label);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px; }
.clf-outcomes { display:flex;gap:7px;margin-bottom:11px; }
.clf-outcome {
  flex:1;padding:8px 6px;border-radius:var(--r-btn);border:1px solid var(--border);
  background:var(--surface);color:var(--text-muted);font-size:12px;font-weight:600;
  cursor:pointer;text-align:center;line-height:1.4;
}
.clf-outcome:hover { border-color:var(--border-hover);color:var(--text); }
.clf-outcome.selected { border-color:#fb923c;background:rgba(249,115,22,.14);color:#fb923c; }
.clf-outcome-icon { font-size:15px;display:block;margin-bottom:2px; }
.clf-textarea {
  width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-btn);
  color:var(--text);font-size:13px;font-family:var(--font);padding:8px 11px;
  resize:vertical;min-height:68px;
}
.clf-textarea:focus { outline:none;border-color:#fb923c; }
.clf-textarea::placeholder { color:var(--text-dim); }
.clf-actions { display:flex;justify-content:flex-end;gap:8px;margin-top:9px; }
.clf-cancel { background:transparent;border:1px solid var(--border);color:var(--text-muted);padding:6px 13px;border-radius:var(--r-btn);font-size:12px;cursor:pointer; }
.clf-cancel:hover { color:var(--text); }
.clf-save { background:#fb923c;border:none;color:#fff;padding:6px 15px;border-radius:var(--r-btn);font-size:12px;font-weight:700;cursor:pointer; }
.clf-save:hover { background:#f97316; }
.clf-save:disabled { opacity:.5;cursor:default; }
.clf-error { font-size:12px;color:#f87171;margin-top:6px;display:none; }

/* ── Call Required — Call log note entries ───────────────────────────────── */
.note-entry.call-log {
  background:rgba(249,115,22,.06);
  border:1px solid rgba(249,115,22,.2);
  border-radius:8px;padding:10px 13px;margin-bottom:8px;
}
.call-outcome-chip {
  font-size:10px;font-weight:800;padding:2px 7px;border-radius:4px;letter-spacing:.03em;
}
.chip-spoke    { background:rgba(34,197,94,.15);color:#4ade80; }
.chip-voicemail{ background:rgba(96,165,250,.15);color:#93c5fd; }
.chip-no-answer{ background:rgba(239,68,68,.15);color:#f87171; }

/* ── Call Required — Inbox call-reminder rows ────────────────────────────── */
.inbox-item.call-reminder-24 { border-left:3px solid #fb923c;background:rgba(249,115,22,.05); }
.inbox-item.call-reminder-48 { border-left:3px solid #ef4444;background:rgba(239,68,68,.06); }
.inbox-call-tag    { color:#fb923c;font-weight:800; }
.inbox-call-urgent { color:#f87171;font-weight:800; }

/* ── Outreach Reminders settings section ─────────────────────────────── */
.or-subsect { padding:16px 0; border-bottom:1px solid var(--border); }
.or-subsect:last-child { border-bottom:none; }
.or-subsect-title { font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px; }
.or-subsect-desc { font-size:12px;color:var(--text-dim);margin-bottom:12px;line-height:1.5; }
.or-inputs { display:flex;gap:24px;margin-bottom:12px;flex-wrap:wrap; }
.or-input-group { display:flex;flex-direction:column;gap:6px; }
.or-label { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text); }
.or-input { width:80px;text-align:center; }
.or-input::-webkit-outer-spin-button,
.or-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.or-input[type=number] { -moz-appearance:textfield; }
.or-unit { font-size:12px;color:var(--text-muted); }
.or-save-btn { font-size:12px;padding:5px 14px; }
.or-status { font-size:12px;margin-left:10px; }

/* ── Outreach reminder inbox rows ────────────────────────────────────── */
.inbox-item.waiting-on-us-warn     { border-left:3px solid #f59e0b; background:rgba(245,158,11,.07); }
.inbox-item.waiting-on-us-esc      { border-left:5px solid #ef4444; background:rgba(239,68,68,.13); }
.inbox-item.waiting-on-cust-warn   { border-left:3px solid #f59e0b; background:rgba(245,158,11,.07); }
.inbox-item.waiting-on-cust-esc    { border-left:5px solid #ef4444; background:rgba(239,68,68,.13); }
.inbox-wou-tag    { color:#f59e0b; font-weight:700; }
.inbox-wou-urgent { color:#ef4444; font-weight:700; }
.inbox-woc-tag    { color:#f59e0b; font-weight:700; }
.inbox-woc-urgent { color:#ef4444; font-weight:700; }

/* ============================================================
   MOBILE FOUNDATION (Phase 0) — shared across all pages
   Everything here is scoped to phones; desktop is untouched.
   ============================================================ */

/* Right-side drawer — hidden on desktop, no footprint */
.tm-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 300px; max-width: 85vw;
  background: var(--surface); border-left: 1px solid var(--border);
  z-index: 610; display: none; flex-direction: column;
  transform: translateX(100%); transition: transform .22s ease;
  box-shadow: -8px 0 32px rgba(0,0,0,.45);
}
.tm-drawer.open { transform: translateX(0); }
.tm-drawer-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 600; display: none; opacity: 0; transition: opacity .2s;
  pointer-events: none; /* closed scrim must not intercept taps (opacity:0 still does) */
}
.tm-drawer-scrim.open { opacity: 1; pointer-events: auto; }
.tm-drawer-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.tm-drawer-hd .tm-drawer-close {
  background: none; border: none; color: var(--text-dim);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.tm-drawer-hd .tm-drawer-close:hover { color: var(--text); }
.tm-drawer-body { flex: 1; overflow-y: auto; padding: 12px; }
.tm-drawer-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim); margin: 14px 6px 6px;
}
.tm-drawer-label:first-child { margin-top: 2px; }
.tm-drawer-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; min-height: 44px; padding: 11px 12px;
  background: none; border: none; border-radius: 9px;
  font-size: 14px; font-family: var(--font); color: var(--text);
  text-align: left; cursor: pointer; text-decoration: none;
}
.tm-drawer-item:hover { background: rgba(255,255,255,.05); }
.tm-drawer-item .tm-drawer-ico { width: 20px; text-align: center; flex-shrink: 0; }
.tm-drawer-item .tm-drawer-ct {
  margin-left: auto; background: var(--accent); color: #06210f;
  font-size: 11px; font-weight: 800; border-radius: 100px; padding: 1px 7px;
}
.tm-drawer-item.logout { color: #f87171; }
.tm-drawer-select {
  width: 100%; min-height: 44px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 9px; color: var(--text);
  font-size: 14px; font-family: var(--font); padding: 10px 12px;
}

/* Hamburger button — hidden on desktop */
.tm-mobile-menu-btn {
  display: none; width: 44px; height: 44px; flex-shrink: 0;
  align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-btn); color: var(--text); cursor: pointer;
}

@media (max-width: 767px) {
  /* Reveal mobile-only controls */
  .tm-drawer       { display: flex; }
  .tm-drawer-scrim { display: block; }
  .tm-mobile-menu-btn { display: flex; }

  /* Hygiene: kill horizontal scroll, enforce finger targets */
  html, body { max-width: 100%; overflow-x: hidden; }
  .tm-modal-box { width: 100%; max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
  .tm-modal { padding: 0; }

  /* The header's backdrop-filter makes it a containing block for position:fixed
     descendants, which would trap the full-screen overlays below (pg-dropdown,
     inbox-panel live inside the header) inside its 60px box. Drop it on mobile
     so those overlays resolve against the viewport. Header bg is 92% opaque, so
     losing the blur is imperceptible. */
  .tm-header { backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* Price Guide + Inbox — full-screen overlays on mobile */
  .pg-dropdown { position: fixed; inset: 0; width: 100%; height: 100%; border-radius: 0; z-index: 620; }
  .pg-mobile-close { display: flex; }
  .inbox-panel { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; z-index: 620; overflow: auto; }
  /* Inbox on phones: show WO / Message / Time / dismiss only; tap row for full detail */
  .inbox-table-head, .inbox-item { grid-template-columns: 52px 1fr auto 34px; min-width: 0; }
  .inbox-table-head > :nth-child(2), .inbox-table-head > :nth-child(3),
  .inbox-table-head > :nth-child(4), .inbox-table-head > :nth-child(5),
  .inbox-col-status, .inbox-col-store, .inbox-col-name, .inbox-col-device { display: none; }
  .inbox-mobile-close { display: inline-flex; }
}