:root {
  --ink: #101828;
  --slate: #1e293b;
  --slate-light: #475569;
  --paper: #f1f5f9;
  --panel: #ffffff;
  --line: #dbe2ea;
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --blue-light: #eaf1ff;
  --blue-soft: #dbe8fe;
  --good: #22916a;
  --warn: #d6483a;
  --muted: #64748b;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.14);
  --radius: 10px;
  --radius-sm: 6px;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-size: 15px; }
button { cursor: pointer; font-family: inherit; }

/* ---- Login ---- */
#login-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0f1f3d 0%, #14294f 45%, #1d4ed8 130%);
}
.login-card { background: var(--panel); padding: 48px 40px; border-radius: 16px; width: 320px; text-align: center; box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,0.4); }
.login-card h1 { font-size: 22px; margin: 0 0 4px; color: var(--slate); font-weight: 700; }
.login-card h1 span { display: block; font-size: 13px; font-weight: 500; color: var(--blue-dark); letter-spacing: 0.02em; margin-top: 2px; }
.login-sub { color: var(--muted); font-size: 13px; margin: 0 0 20px; }
#pin-input { width: 100%; padding: 12px; font-size: 22px; text-align: center; letter-spacing: 6px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px; }
#pin-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); }
#login-btn { width: 100%; padding: 12px; background: var(--blue); color: #fff; border: none; border-radius: var(--radius-sm); font-weight: 600; box-shadow: var(--shadow-sm); transition: background .15s, box-shadow .15s; }
#login-btn:hover { background: var(--blue-dark); box-shadow: var(--shadow-md); }
.error-text { color: var(--warn); font-size: 13px; min-height: 18px; margin: 8px 0 0; }

/* ---- App shell ---- */
.topbar { display: flex; align-items: center; gap: 24px; background: var(--slate); color: #fff; padding: 0 24px; height: 56px; box-shadow: var(--shadow-md); position: relative; z-index: 40; }
.brand { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.brand-logo { height: 30px; width: auto; display: block; }
.brand span { color: #cdd3da; font-weight: 500; font-size: 14px; }
.topbar nav { display: flex; gap: 6px; flex: 1; }
.nav-btn { background: none; border: none; color: #cdd3da; padding: 8px 14px; border-radius: var(--radius-sm); font-size: 14px; transition: background .15s, color .15s; }
.nav-btn.active, .nav-btn:hover { background: var(--blue); color: #fff; }
.who { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #cdd3da; }
#logout-btn { background: none; border: 1px solid rgba(255,255,255,0.25); color: #fff; padding: 5px 10px; border-radius: var(--radius-sm); font-size: 12px; }
#logout-btn:hover { border-color: #fff; }

.view { padding: 28px 32px; max-width: 1100px; margin: 0 auto; }
.view h2 { margin-top: 0; }
.view-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.filters { display: flex; gap: 8px; }

/* ---- Quick date-range filter pills (Today / Yesterday / Last 7 Days / …) ---- */
.quick-date-filters-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.quick-date-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.qd-btn { background: #fff; border: 1.5px solid var(--line); color: var(--slate-light); padding: 7px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.qd-btn:hover { border-color: var(--blue); color: var(--blue-dark); }
.qd-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.result-count { font-size: 13px; color: var(--muted); font-weight: 600; white-space: nowrap; }

input, select, textarea {
  padding: 9px 11px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; background: #fff; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); }
textarea { width: 100%; min-height: 70px; margin: 10px 0; resize: vertical; }

/* The table itself stays a real <table> (so the header row and body rows
   share one column-width calculation and always line up); the rounded
   "card" look and the horizontal scrolling for wide tables both live on
   this wrapper instead. Scrolling used to be done by forcing the <table>
   itself to display:block, which broke column alignment between thead and
   tbody — the browser no longer had a single table layout to size both
   against, so a header cell (like the blank Action column) could end up a
   different width than the body cells under it. */
.table-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; background: var(--panel); border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.data-table { width: 100%; border-collapse: collapse; table-layout: auto; }
.data-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #f8fafc; }
.data-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
/* Only short, atomic fields stay on one line; longer text (client, device, etc.) wraps normally so the table doesn't overflow the screen. */
.data-table th.nowrap-col, .data-table td.nowrap-col { white-space: nowrap; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--blue-light); cursor: pointer; }

.status-pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.status-open { background: var(--blue-soft); color: var(--blue-dark); }
.status-closed { background: #e2e2e2; color: #555; }

/* Priority pills are colored per-row from ticket_priorities.color (see
   PRIORITY_COLORS/priorityPillStyle in app.js) since priority levels are now
   admin-editable, so there's no fixed low/normal/high/urgent class list here
   anymore — this just sets the pill's shape. */
/* Priority names are admin-editable free text (Settings > Ticket
   Priorities), so a long one like "Normal (Within 5 Days Diagnose)"
   shouldn't be able to blow up the tickets table's layout and push the
   Technician/Action columns off past the visible row. Capped to a narrow
   fixed width with an ellipsis — kept deliberately narrow (not widened) so
   it can never again squeeze the columns after it; the full name is still
   available on hover via the title attribute set in app.js. The day count
   used to live only inside this truncatable name text (which is why a long
   name could silently swallow it) — it's now shown separately, reliably,
   via .priority-days-chip below instead of by widening this pill. */
.priority-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
/* Small fixed-size "Nd" badge (see priorityDaysBadge() in app.js) sourced
   from the priority's actual sla_days column, not from truncatable name
   text — it's at most 3-4 characters, so unlike the pill name it can never
   itself get cut off and never meaningfully widens the row. */
.priority-days-chip {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  background: var(--line);
  color: var(--slate);
  vertical-align: middle;
}
.priority-select {
  border: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath fill='%23555' d='M2.5 4.5l3.5 3.5 3.5-3.5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 6px center;
  padding-right: 22px;
}
.priority-select:disabled { opacity: 0.6; cursor: wait; }
.priority-select:focus { outline: 2px solid var(--blue); outline-offset: 1px; }

/* ---- Wizard ---- */
.wizard-steps { display: flex; gap: 4px; margin-bottom: 20px; }
.step-btn { flex: 1; padding: 10px; border: 1.5px solid var(--line); background: #fff; border-radius: var(--radius-sm); font-size: 13px; color: var(--muted); }
.step-btn.active { background: var(--slate); color: #fff; border-color: var(--slate); }
.ticket-type-toggle { display: flex; align-items: center; gap: 10px; margin: 10px 0 18px; }
.ticket-type-toggle .ticket-type-btn { flex: none; padding: 8px 18px; }
.ticket-type-toggle .ticket-type-btn[data-ticket-type="direct_sale"].active { background: #d97706; border-color: #d97706; }
.ticket-form { display: flex; flex-direction: column; gap: 20px; }
.form-section { background: var(--panel); padding: 22px; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
/* Left accent border per intake-form step, echoing the device-breadcrumb
   colors so the whole form reads as one consistent, distinguishable system. */
.form-section[data-step="1"] { border-left: 4px solid #2563eb; }
.form-section[data-step="2"] { border-left: 4px solid #7c3aed; }
.form-section[data-step="3"] { border-left: 4px solid #0d9488; }
.form-section[data-step="4"] { border-left: 4px solid #d97706; }
.form-section h3 { margin: 0 0 16px; font-size: 15px; color: var(--slate); border-bottom: 2px solid var(--blue-light); padding-bottom: 10px; }
.form-section h4 { font-size: 13px; color: var(--muted); margin: 16px 0 8px; text-transform: none; }
.form-section h4:first-of-type { margin-top: 0; }
.submit-ticket-btn { background: var(--blue); color: #fff; border: none; padding: 14px; border-radius: var(--radius-sm); font-weight: 700; font-size: 15px; box-shadow: var(--shadow-sm); transition: background .15s, box-shadow .15s; }
.submit-ticket-btn:hover { background: var(--blue-dark); box-shadow: var(--shadow-md); }
.form-row { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.form-row select, .form-row input { flex: 1; min-width: 140px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.or-divider { color: var(--muted); font-size: 12px; margin: 14px 0 8px; text-transform: none; }
.result-list { max-height: 220px; overflow-y: auto; margin: 8px 0; }
.result-list.wide { max-height: none; }
.result-item { padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 6px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.result-item:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); cursor: pointer; }
.selected-box { background: var(--blue-light); border: 1px solid var(--blue-soft); border-radius: var(--radius-sm); padding: 12px; margin-top: 12px; font-size: 13px; }

/* ---- Device picker: breadcrumb + icon tiles (matches the old system's flow) ---- */
.device-breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 13px; flex-wrap: wrap; }
.crumb {
  color: var(--muted); cursor: default; padding: 3px 10px; border-radius: 999px;
  border: 1.5px solid transparent; /* colored per-stage below; only shows once active or done */
}
.crumb.active { color: var(--slate); font-weight: 700; border-color: var(--stage-color, var(--blue)); background: var(--stage-color-soft, transparent); }
.crumb.done { color: var(--stage-color, var(--blue-dark)); cursor: pointer; border-color: var(--stage-color, var(--blue-dark)); }
.crumb.done:hover { text-decoration: underline; }
.crumb-sep { color: var(--line); }
/* One color per step, so which stage you're on/have completed reads at a
   glance instead of everything being the same blue. Purely visual — doesn't
   change any selection/click behavior. */
.crumb[data-stage="category"]    { --stage-color: #2563eb; --stage-color-soft: #eaf1ff; } /* blue */
.crumb[data-stage="brand"]       { --stage-color: #7c3aed; --stage-color-soft: #f2ebfe; } /* purple */
.crumb[data-stage="subcategory"] { --stage-color: #0d9488; --stage-color-soft: #e6f7f5; } /* teal */
.crumb[data-stage="model"]       { --stage-color: #d97706; --stage-color-soft: #fef2e2; } /* amber */
.crumb[data-stage="details"]     { --stage-color: #22916a; --stage-color-soft: #e6f5ee; } /* green */
.tile-search { width: 100%; margin-bottom: 14px; }
.tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* Matching top accent bar on each stage's panel, same color as its crumb. */
.tile-stage { border-top: 3px solid var(--stage-color, transparent); padding-top: 16px; }
.link-btn { background: none; border: none; padding: 0; color: #0d9488; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; }
.link-btn:hover { color: #0f766e; }
#stage-category    { --stage-color: #2563eb; }
#stage-brand        { --stage-color: #7c3aed; }
#stage-subcategory  { --stage-color: #0d9488; }
#stage-model         { --stage-color: #d97706; }
#stage-details       { --stage-color: #22916a; }
.tile {
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 22px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s;
  box-shadow: var(--shadow-sm); position: relative;
}
.tile:hover { border-color: var(--blue); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.tile-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--slate-light); }
.tile-icon svg { width: 32px; height: 32px; }
.tile-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.tile-add { border: 1.5px dashed var(--blue); color: var(--blue-dark); box-shadow: none; }
.tile-add .tile-icon { color: var(--blue); }
.tile-custom { border-style: dashed; color: var(--muted); box-shadow: none; }
/* Small rename/delete controls shown on hover in the corner of a catalog
   tile (Category/Brand/Sub-Category/Item). Hidden by default so the wizard
   grid looks exactly as before at a glance; cursor: default + stopPropagation
   on click keep them from triggering the tile's own select action. */
.tile-manage { position: absolute; top: 6px; right: 6px; display: none; gap: 4px; cursor: default; }
.tile:hover .tile-manage { display: flex; }
.tile-manage button {
  background: rgba(255,255,255,.95); border: 1px solid var(--line); border-radius: 5px;
  width: 22px; height: 22px; font-size: 12px; line-height: 1; cursor: pointer; padding: 0;
}
.tile-manage-edit:hover { background: var(--blue-light); border-color: var(--blue); }
.tile-manage-delete:hover { background: #fee2e2; border-color: #fca5a5; }
.add-form { background: var(--blue-light); border: 1px solid var(--blue-soft); border-radius: 12px; padding: 16px; margin-top: 14px; }
.add-form .form-row { margin-bottom: 8px; }
/* Model Number step — searchable dropdown + optional manage list, replacing
   the old tile grid for picking/adding an item under a brand. */
#stage-model .form-row { display: flex; gap: 10px; }
#model-manage-list { border: 1px solid var(--line); border-radius: 10px; padding: 4px 12px; max-height: 260px; overflow-y: auto; }
.model-manage-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.model-manage-row:last-child { border-bottom: none; }
@media (max-width: 700px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
.check-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.check-chip { border: 1.5px solid var(--line); padding: 7px 12px; border-radius: 20px; font-size: 13px; background: #fff; }
.check-chip.selected { background: var(--blue); color: #fff; border-color: var(--blue); }

/* Multi-select checkbox dropdown (e.g. Accessories brought in) */
.ms-dropdown-wrap { position: relative; margin: 10px 0 14px; max-width: 420px; }
.ms-dropdown-toggle {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
  padding: 9px 12px; font-size: 14px; text-align: left; color: var(--ink);
}
.ms-dropdown-toggle:hover { border-color: var(--blue); }
#accessories-dropdown-label.placeholder { color: var(--muted); }
.ms-dropdown-caret { color: var(--muted); margin-left: 8px; }
.ms-dropdown-panel {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  z-index: 30; padding: 8px 12px; max-height: 260px; overflow-y: auto;
}
.ms-dropdown-option { display: flex; align-items: center; gap: 8px; padding: 7px 2px; font-size: 14px; cursor: pointer; }
.ms-dropdown-option:hover { background: var(--blue-light); }
.ms-dropdown-option input[type="checkbox"] { width: 16px; height: 16px; }
.ms-dropdown-add-row { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
.ms-dropdown-add-row input { width: 100%; }

button.primary, #save-device-btn, #create-client-btn, #problems-next-btn, #submit-ticket-btn, #add-staff-btn {
  background: var(--blue); color: #fff; border: none; padding: 10px 18px; border-radius: var(--radius-sm); font-weight: 600; margin-top: 10px;
  box-shadow: var(--shadow-sm); transition: background .15s, box-shadow .15s;
}
button.primary:hover, #save-device-btn:hover, #create-client-btn:hover, #problems-next-btn:hover, #submit-ticket-btn:hover, #add-staff-btn:hover { background: var(--blue-dark); box-shadow: var(--shadow-md); }
.back-btn { background: none; border: none; color: var(--slate-light); font-size: 13px; margin-bottom: 14px; padding: 0; }

.btn-amber {
  background: var(--blue); color: #fff; border: none; padding: 10px 18px; border-radius: var(--radius-sm); font-weight: 600;
  box-shadow: var(--shadow-sm); transition: background .15s, box-shadow .15s;
}
.btn-amber:hover { background: var(--blue-dark); box-shadow: var(--shadow-md); }

/* ---- Ticket detail ---- */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.detail-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.detail-card h3 { margin-top: 0; font-size: 14px; color: var(--muted); text-transform: none; }
.kv { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f0eee9; font-size: 14px; }
.kv span:first-child { color: var(--muted); }
.log-entry { border-left: 2px solid var(--blue-soft); padding: 6px 0 6px 14px; margin-bottom: 4px; font-size: 13px; }
.log-entry .log-time { color: var(--muted); font-size: 11px; }
.chip-remove { margin-left: 6px; cursor: pointer; color: var(--warn); font-weight: 700; }

/* ---- Required Parts tracker (Labor / Service Details) ---- */
.form-row .required-part-status, #new-required-part-status {
  flex: 0 0 150px;
  min-width: 0;
  padding: 3px 6px;
  border-width: 1px;
}

/* ---- Ticket detail v2 (matches the reference layout) ---- */
.ticket-head-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ticket-head-row h2 { margin: 0; }
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.service-table th, .service-table td { vertical-align: top; }
.service-table select, .service-table input { width: 100%; }
.activity-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; flex-wrap: wrap; }
.atab { background: none; border: none; padding: 8px 12px; font-size: 13px; color: var(--muted); border-bottom: 2px solid transparent; }
.atab small { font-size: 10px; display: block; }
.atab.active { color: var(--slate); border-bottom-color: var(--blue); font-weight: 600; }
.comment-box { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.comment-box textarea { flex: 1; min-height: 44px; margin: 0; }
.comment-box button { margin: 0; white-space: nowrap; }
.upload-box { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.upload-box button { margin: 0; white-space: nowrap; }
.email-compose-box { margin-bottom: 18px; padding: 14px; background: #f8fafc; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.email-compose-box h4 { font-size: 14px; margin: 0 0 10px; }
.activity-entry { border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 8px; font-size: 14px; border: 1px solid transparent; }
.activity-entry .activity-time { font-size: 11px; color: var(--muted); margin-top: 3px; }
.activity-entry a { color: var(--blue-dark); font-weight: 600; }
.activity-activity { background: #e6f2ea; }
.activity-internal { background: var(--blue-light); }
.activity-diagnostic { background: #fbf1d6; }
.activity-attachment { background: #ece6f5; }

/* ---- Create New Customer modal ---- */
.modal-overlay { position: fixed; inset: 0; background: rgba(16,24,40,0.6); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; backdrop-filter: blur(2px); }
.modal-card { background: #fff; border-radius: 16px; padding: 32px 36px; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.modal-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--blue-light); color: var(--blue-dark); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.modal-icon svg { width: 28px; height: 28px; }
.modal-title { text-align: center; margin: 0 0 20px; font-size: 19px; }
.modal-tabs { display: flex; background: #f1f5f9; border-radius: var(--radius-sm); padding: 3px; margin-bottom: 20px; }
.mtab { flex: 1; background: none; border: none; padding: 9px; border-radius: 5px; font-size: 13px; color: var(--muted); }
.mtab.active { background: #fff; color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.modal-tab-panel label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--slate); }
.modal-tab-panel .form-grid > div { display: flex; flex-direction: column; }
.modal-tab-panel input, .modal-tab-panel select, .modal-tab-panel textarea { width: 100%; }
.tag-primary { background: #e1f0e6; color: var(--good); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; margin-left: 4px; vertical-align: middle; }
.notifications-box { background: var(--paper); border-radius: var(--radius-sm); padding: 14px 16px; margin-top: 6px; }
.notif-header { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 10px; }
.notif-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 14px; }
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background: #d5d5d5; border-radius: 22px; transition: .15s; }
.slider:before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .15s; }
.switch input:checked + .slider { background: var(--blue); }
.switch input:checked + .slider:before { transform: translateX(18px); }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.btn-secondary { background: #fff; border: 1.5px solid var(--line); color: var(--ink); padding: 10px 18px; border-radius: var(--radius-sm); font-weight: 600; }
.btn-secondary:hover { border-color: var(--slate-light); }
#open-new-customer-modal { background: #fff; border: 1.5px solid var(--blue); color: var(--blue-dark); padding: 10px 18px; border-radius: var(--radius-sm); font-weight: 600; width: 100%; margin-top: 4px; }
#open-new-customer-modal:hover { background: var(--blue-light); }

/* ---- Ticket row Action dropdown ---- */
/* The last column of every data table is an actions column (View/Edit,
   Edit/Delete, etc.) — pinning it to the right edge of the scrollable area
   means it's always reachable without scrolling all the way over, however
   wide the rest of the row gets (e.g. "All statuses" pulling in tickets
   with longer client/device/technician text than a single filtered status
   would). `position: sticky` still lets .action-cell anchor its dropdown
   menu, the same as `relative` did. */
.data-table th:last-child, .data-table td:last-child { position: sticky; right: 0; z-index: 2; }
.data-table th:last-child { background: #f8fafc; }
.data-table td:last-child { background: var(--panel); }
.data-table tr:hover td:last-child { background: var(--blue-light); }
.action-cell { text-align: right; }
.action-btn { background: #fff; border: 1.5px solid var(--line); padding: 6px 12px; border-radius: var(--radius-sm); font-size: 13px; color: var(--slate); }
.action-btn:hover { border-color: var(--blue); }
.action-menu { position: absolute; right: 0; top: 100%; margin-top: 4px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 180px; width: max-content; z-index: 20; padding: 6px 0; text-align: left; }
.action-menu button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 9px 16px; font-size: 13px; color: var(--ink); white-space: nowrap; }
.action-menu button:hover { background: var(--blue-light); }
.action-menu button.danger { color: var(--warn); }
.action-menu hr { border: none; border-top: 1px solid var(--line); margin: 4px 0; }
.ticket-label-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; margin-left: 6px; vertical-align: middle; background: var(--blue-soft); color: var(--blue-dark); }

/* ---- Printable thermal receipt ---- */
#receipt-print-area { display: none; }
@media print {
  #login-screen, #app-screen { display: none !important; }
  body * { visibility: hidden; }
  #receipt-print-area, #receipt-print-area * { visibility: visible; }
  #receipt-print-area { display: block; position: fixed; top: 0; left: 0; width: 300px; font-family: monospace; font-size: 12px; padding: 10px; }
  #receipt-print-area h3 { text-align: center; margin: 4px 0; }
  #receipt-print-area .line { border-top: 1px dashed #000; margin: 6px 0; }
  #receipt-print-area .row { display: flex; justify-content: space-between; }
}

/* ---- Printable tickets list ---- */
#tickets-list-print-area { display: none; }
@media print {
  #login-screen, #app-screen { display: none !important; }
  body * { visibility: hidden; }
  #tickets-list-print-area, #tickets-list-print-area * { visibility: visible; }
  #tickets-list-print-area { display: block; position: fixed; top: 0; left: 0; width: 100%; padding: 24px 32px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000; }
  #tickets-list-print-area h2 { margin: 0 0 2px; }
  #tickets-list-print-area .list-print-meta { color: #444; margin-bottom: 16px; font-size: 11px; }
  #tickets-list-print-area table { width: 100%; border-collapse: collapse; }
  #tickets-list-print-area th, #tickets-list-print-area td { border: 1px solid #999; padding: 5px 7px; text-align: left; font-size: 11px; }
  #tickets-list-print-area th { background: #eee; }
}

/* ---- Condition checklist ---- */
.condition-checklist { display: flex; flex-direction: column; gap: 6px; }
.condition-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.condition-item .ci-name { font-size: 14px; }
.condition-item .ci-options { display: flex; gap: 4px; }
.ci-btn { border: 1.5px solid var(--line); background: #fff; padding: 5px 10px; font-size: 12px; border-radius: var(--radius-sm); color: var(--muted); }
.ci-btn.selected-pass { background: #e1f0e6; color: var(--good); border-color: var(--good); }
.ci-btn.selected-fail { background: #f5e0dc; color: var(--warn); border-color: var(--warn); }
.ci-btn.selected-na { background: #eceef0; color: var(--slate-light); border-color: var(--slate-light); }
.ci-remove { color: var(--warn); cursor: pointer; margin-left: 6px; font-weight: 700; }

/* ---- Ticket detail top action bar ---- */
.ticket-action-bar { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
.tab-btn { background: var(--slate); color: #fff; border: none; padding: 9px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; box-shadow: var(--shadow-sm); }
.tab-btn:hover { background: var(--slate-light); }
.tab-btn.rush-active { background: var(--warn); }
.tab-btn.outline { background: #fff; color: var(--slate); border: 1.5px solid var(--line); box-shadow: none; }
.tab-btn.outline.danger { color: var(--warn); border-color: var(--warn); }
.btn-icon-danger { background: #fff; color: var(--warn); border: 1.5px solid var(--warn); padding: 5px 10px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; }
.btn-icon-danger:hover { background: var(--warn); color: #fff; }
.tab-spacer { flex: 1; }
.print-dropdown-wrap { position: relative; display: inline-block; }
.flash-highlight { animation: flashHighlight 1.2s ease; }
@keyframes flashHighlight { 0% { box-shadow: 0 0 0 3px var(--blue); } 100% { box-shadow: none; } }

/* ---- Payments ---- */
.payment-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; border-bottom: 1px solid #f0eee9; }

/* ---- Printable full invoice ---- */
/* Note: the URL/date/page-number line at the very bottom of a printed page
   is added by the BROWSER's own print dialog ("Headers and footers" option),
   not by this app — this @page rule just keeps our own margins consistent,
   it can't remove that browser-added line. To turn it off: in the print
   preview, open "More settings" and switch "Headers and footers" off. */
@page { margin: 12mm; }
#invoice-print-area { display: none; }
@media print {
  #login-screen, #app-screen { display: none !important; }
  body * { visibility: hidden; }
  #invoice-print-area, #invoice-print-area * { visibility: visible; }
  #invoice-print-area { display: block; position: fixed; top: 0; left: 0; width: 100%; padding: 24px 32px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000; }
  .inv-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
  .inv-shop-name { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
  .inv-logo { height: 44px; width: auto; margin: 0 0 6px; display: block; }
  .inv-title { font-size: 26px; font-weight: 800; text-align: right; }
  .inv-qr-block { text-align: center; margin-top: 6px; }
  .inv-qr-block .inv-ticket-num { font-size: 11px; margin-top: 2px; }
  .invoice-header-right { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
  .invoice-header-right .inv-title { font-size: 20px; white-space: nowrap; }
  .invoice-header-right .inv-qr-block { margin-top: 0; }
  .invoice-header-right .inv-qr-block svg { width: 55px; height: 55px; }
  .inv-two-col { display: flex; gap: 24px; margin-bottom: 16px; }
  .inv-two-col > div { flex: 1; }
  .inv-box-table { width: 100%; border-collapse: collapse; }
  .inv-box-table td { border: 1px solid #999; padding: 6px 10px; }
  .inv-items-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
  .inv-items-table th, .inv-items-table td { border: 1px solid #999; padding: 8px; text-align: left; vertical-align: top; font-size: 11px; }
  .inv-items-table th { background: #f0f0f0; }
  .inv-summary-wrap { display: flex; justify-content: flex-end; margin-bottom: 20px; }
  .inv-summary-table { border-collapse: collapse; min-width: 260px; }
  .inv-summary-table td { padding: 3px 8px; font-size: 12px; }
  .inv-summary-table .inv-total-row td { border-top: 2px solid #000; font-weight: 700; }
  .inv-summary-table .inv-due-row td { font-weight: 700; }
  .inv-terms { font-size: 12px; color: #333; border-top: 1px solid #999; padding-top: 10px; }
  .inv-terms h4 { font-size: 13px; margin: 8px 0 3px; }
  .inv-terms p { margin: 0 0 6px; }
  .inv-terms ol { margin: 4px 0 8px; padding-left: 18px; }
  .inv-terms ol li { margin: 0 0 4px; }
  .inv-signatures { display: flex; gap: 40px; margin-top: 30px; }
  .inv-sig-block { flex: 1; }
  .inv-sig-line { border-bottom: 1px solid #000; height: 30px; }
  .inv-sig-label { font-size: 9px; color: #333; margin-top: 4px; }
  .inv-footer { margin-top: 14px; font-size: 9px; color: #666; }
}

/* ---- Printable device intake slip (Terms & Conditions + signature) ---- */
#intake-print-area { display: none; }
@media print {
  #login-screen, #app-screen { display: none !important; }
  body * { visibility: hidden; }
  #intake-print-area, #intake-print-area * { visibility: visible; }
  /* No `position: fixed` here on purpose — fixed-position content is
     clipped to a single page by Chrome's print engine, which was cutting
     off the Terms & Conditions whenever they ran long. Left in normal
     document flow, the browser paginates it onto a second page instead.
     (#login-screen/#app-screen are display:none above, and the other
     print areas are emptied by clearOtherPrintAreas(), so this still
     starts flush at the top of page 1.) */
  #intake-print-area { display: block; width: 100%; padding: 24px 32px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000; }
  .intake-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; border-bottom: 2px solid #000; padding-bottom: 10px; }
  .intake-logo { height: 40px; width: auto; }
  .intake-title { margin-left: auto; font-size: 18px; font-weight: 800; text-align: right; }
  .intake-meta { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: 12px; }
  .intake-two-col { display: flex; gap: 24px; margin-bottom: 14px; }
  .intake-two-col > div { flex: 1; }
  .intake-problems { margin-bottom: 10px; font-size: 12px; }
  .intake-terms { font-size: 10px; color: #333; border-top: 1px solid #999; padding-top: 10px; margin-top: 10px; }
  .intake-terms h4 { font-size: 12px; margin: 0 0 6px; }
  .intake-terms p { margin: 0 0 4px; }
  .intake-signatures { display: flex; gap: 40px; margin-top: 40px; }
  .intake-sig-block { flex: 1; }
  .intake-sig-line { border-bottom: 1px solid #000; height: 36px; }
  .intake-sig-label { font-size: 11px; margin-top: 4px; color: #333; }
  .intake-header-right { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
  .intake-header-right .inv-title { font-size: 19px; white-space: nowrap; }
  .intake-qr-block { text-align: center; }
  .intake-qr-block svg { width: 60px; height: 60px; }
  .intake-check-section { margin-bottom: 10px; }
  .intake-check-title { font-size: 12px; font-weight: 700; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.02em; }
  .intake-check-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .intake-check-item { border: 1px solid #ccc; border-radius: 3px; padding: 3px 6px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; line-height: 1.3; }
  .intake-check-name { font-size: 11px; }
  .intake-check-status { font-size: 11px; font-weight: 700; }
  .intake-check-note { flex-basis: 100%; font-size: 10px; color: #555; }
  .intake-issue-box { border: 1px solid #999; border-radius: 4px; padding: 10px 12px; margin-bottom: 12px; min-height: 50px; }
  .intake-issue-title { font-size: 13px; font-weight: 700; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.02em; }
  .intake-issue-body { font-size: 16px; }
}

/* ---- Printable device delivery receipt (Outgoing QC + final cost + pickup signature) ---- */
#delivery-print-area { display: none; }
@media print {
  #login-screen, #app-screen { display: none !important; }
  body * { visibility: hidden; }
  #delivery-print-area, #delivery-print-area * { visibility: visible; }
  /* No `position: fixed` here either, for the same reason as the intake slip
     above — normal document flow lets a long Terms/warranty section paginate
     onto a second page instead of being clipped to one. */
  #delivery-print-area { display: block; width: 100%; padding: 24px 32px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000; }
  .delivery-header-right { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
  .delivery-header-right .inv-title { font-size: 19px; white-space: nowrap; }
}

/* ---- Inventory ---- */
.add-part-btn { background: var(--blue); color: #fff; border: none; padding: 9px 16px; border-radius: var(--radius-sm); font-weight: 600; font-size: 13px; box-shadow: var(--shadow-sm); }
.add-part-btn:hover { background: var(--blue-dark); box-shadow: var(--shadow-md); }
.stock-low { color: var(--warn); font-weight: 700; }
.stock-ok { color: var(--good); font-weight: 600; }
.result-item.out-of-stock { opacity: 0.6; }
.qty-input { width: 44px; border: 1.5px solid var(--line); border-radius: 3px; padding: 2px 4px; margin: 0 4px; }

/* Items added to the wizard's cart (repair Parts or Direct Sale Inventory) —
   a full-width row so a long product name/SKU never collides with the
   qty/price/remove controls, unlike a chip which has to fit everything on
   one line. */
.part-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 8px; background: #fff; }
.part-row-main { min-width: 0; }
.part-row-name { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.part-row-sku { font-size: 12px; color: var(--muted); margin-top: 2px; }
.part-row-controls { display: flex; align-items: center; gap: 14px; flex-shrink: 0; font-size: 12px; color: var(--muted); }
.part-row-controls label { display: flex; align-items: center; gap: 4px; }
.part-row-controls .qty-input { width: 48px; margin: 0; }
.part-row-controls .price-input { width: 70px; border: 1.5px solid var(--line); border-radius: 3px; padding: 2px 4px; }
.part-row-price { font-weight: 600; color: var(--ink); }
.part-row-controls .chip-remove { font-size: 16px; }
.history-entry { padding: 8px 0; border-bottom: 1px solid #f0eee9; font-size: 13px; }
.history-entry .h-time { font-size: 11px; color: var(--muted); }

/* ---- Tickets nav dropdown ---- */
.nav-dropdown-wrap { position: relative; }
.nav-dropdown-menu { position: absolute; top: 100%; left: 0; margin-top: 4px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 160px; z-index: 30; padding: 6px 0; }
.nav-dropdown-item { display: block; width: 100%; text-align: left; background: none; border: none; padding: 9px 16px; font-size: 14px; color: var(--ink) !important; }
.nav-dropdown-item:hover { background: var(--blue-light); }

/* ---- Invoices ---- */
.invoice-filters { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.invoice-filters label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.invoice-filters .form-grid > div { display: flex; flex-direction: column; }
.invoice-filters .form-row { align-items: center; gap: 8px; }
.invoice-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.invoice-stat-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); border-top: 3px solid var(--blue); }
.invoice-stat-card .stat-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.invoice-stat-card .stat-value { font-size: 22px; font-weight: 700; color: var(--slate); }
.invoice-stat-card .stat-value.warn { color: var(--warn); }
.invoice-stat-card .stat-value.good { color: var(--good); }
@media (max-width: 900px) { .invoice-stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Multi-select checkbox filters (Tickets list: Status, Technician) ---- */
.mf-wrap { position: relative; }
.mf-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-width: 190px; max-width: 260px; height: 100%;
  padding: 9px 11px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink); font-size: 14px; text-align: left;
}
.mf-toggle:hover { border-color: var(--blue); }
.mf-wrap.open .mf-toggle { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); }
.mf-wrap.has-selection .mf-toggle { border-color: var(--blue); background: var(--blue-light); color: var(--blue-dark); font-weight: 600; }
.mf-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-caret { color: var(--muted); flex: none; font-size: 11px; }
.mf-panel {
  position: absolute; top: 100%; left: 0; margin-top: 4px; min-width: 100%; width: max-content; max-width: 340px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  z-index: 35; padding: 8px 0 6px;
}
.mf-presets { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 12px 8px; }
.mf-preset { background: #fff; border: 1.5px solid var(--line); color: var(--slate-light); padding: 4px 11px; border-radius: 14px; font-size: 12px; font-weight: 600; }
.mf-preset:hover { border-color: var(--blue); color: var(--blue-dark); }
.mf-preset.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.mf-tools { display: flex; justify-content: space-between; padding: 6px 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12px; }
.mf-tools button { background: none; border: none; color: var(--blue-dark); font-size: 12px; font-weight: 600; padding: 2px 0; }
.mf-tools button:hover { text-decoration: underline; }
.mf-options { max-height: 340px; overflow-y: auto; padding: 4px 0; }
.mf-option { display: flex; align-items: center; gap: 9px; padding: 6px 14px; font-size: 14px; cursor: pointer; white-space: nowrap; }
.mf-option:hover { background: var(--blue-light); }
.mf-option input[type="checkbox"] { width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--blue); flex: none; }
.mf-option.closed-status span { color: var(--muted); }

/* ---- Intake Disclaimer (New Ticket, end of Pre-Repair Condition Checklist) ---- */
.intake-disclaimer { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fbfcfe; font-size: 13px; color: var(--ink); cursor: pointer; }
.intake-disclaimer input { margin-top: 3px; flex: none; width: 16px; height: 16px; }
.intake-disclaimer:has(input:checked) { border-color: var(--good); background: #f1faf5; }

/* ---- Store WTY: Warranty Claim card ---- */
.wty-card { border-color: #c9d8f5; }
.wty-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.wty-decision { display: flex; align-items: center; gap: 6px; }
.wty-decision-label { font-size: 12px; color: var(--muted); margin-right: 4px; }
.wty-decision-btn { background: #fff; border: 1.5px solid var(--line); color: var(--slate-light); padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.wty-decision-btn:hover:not(:disabled) { border-color: var(--blue); color: var(--blue-dark); }
.wty-decision-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.wty-hint { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.wty-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 6px 0 12px; }
.wty-step { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.wty-dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: #fff; }
.wty-step.done { color: var(--ink); }
.wty-step.done .wty-dot { background: var(--good); border-color: var(--good); color: #fff; }
.wty-step.current { color: var(--blue-dark); font-weight: 600; }
.wty-step.current .wty-dot { border-color: var(--blue); color: var(--blue-dark); box-shadow: 0 0 0 3px var(--blue-light); }
.wty-step.rejected.done .wty-dot, .wty-step.rejected.current .wty-dot { background: var(--warn); border-color: var(--warn); color: #fff; }
.wty-step-line { flex: 0 0 14px; height: 1.5px; background: var(--line); }
.wty-next { font-size: 13px; padding: 8px 12px; border-radius: var(--radius-sm); background: #fff7e6; color: #8a5a00; margin-bottom: 12px; }
.wty-next.ready { background: #e8f6ef; color: #17694b; }
.wty-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.wty-box { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px 12px; margin: 0; min-width: 0; }
.wty-box legend { font-size: 12px; font-weight: 700; color: var(--slate-light); padding: 0 4px; }
.wty-box label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.wty-box input, .wty-box select { width: 100%; padding: 7px 9px; font-size: 13px; }
.wty-box .req { color: var(--warn); }
.wty-docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wty-doc { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 10px; }
.wty-doc.ok { background: #e8f6ef; color: #17694b; }
.wty-doc.missing { background: #fde2e1; color: #b3261e; }
.wty-docs-hint { display: block; font-size: 11px; color: var(--muted); margin-top: 6px; }
.wty-cn-amount { font-size: 13px; margin-top: 10px; color: var(--ink); }
.wty-cn-amount small { color: var(--muted); }
#attachment-doc-type { width: 160px; flex: none; }

/* SKU step (New Ticket wizard, Store WTY only) */
.sku-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sku-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13px; text-align: left; }
.sku-chip:hover { border-color: var(--blue); background: var(--blue-light); }
.sku-chip span { font-size: 12px; color: var(--muted); }

/* ---- Technician Stars ---- */
.stars-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stars-toolbar .action-btn:disabled { opacity: .4; cursor: default; }
.stars-month-label { font-weight: 700; min-width: 130px; text-align: center; }
.stars-rules { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.stars-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 20px; }
.star-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.star-card.leader { border-color: #e7c35a; box-shadow: 0 0 0 3px #fbf1d3; }
.star-card-top { display: flex; align-items: center; gap: 8px; }
.star-rank { font-size: 12px; font-weight: 700; color: var(--muted); }
.star-name { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.star-tier { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 10px; background: var(--blue-soft); color: var(--blue-dark); }
.star-tier.tier-bronze { background: #f6e3d3; color: #8a4b1f; }
.star-tier.tier-silver { background: #e8ecf1; color: #4a5568; }
.star-tier.tier-gold { background: #fbefc4; color: #8a6400; }
.star-count { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 6px; }
.star-big { font-size: 28px; font-weight: 800; color: #c99400; letter-spacing: -0.5px; }
.star-of { font-size: 12px; color: var(--muted); }
.star-progress { height: 6px; background: #eef1f5; border-radius: 4px; overflow: hidden; }
.star-progress span { display: block; height: 100%; background: linear-gradient(90deg, #e7b928, #f2cf55); border-radius: 4px; }
.star-next { font-size: 12px; color: var(--slate-light); margin-top: 5px; min-height: 16px; }
.star-stats { display: flex; gap: 12px; font-size: 12px; color: var(--muted); margin-top: 8px; border-top: 1px solid #f0eee9; padding-top: 8px; }
.star-stats .warn { color: var(--warn); font-weight: 600; }
.stars-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.stars-legend span { display: inline-flex; align-items: center; gap: 5px; }
.stars-legend .sc { font-style: normal; display: inline-flex; width: 20px; height: 20px; border-radius: 5px; align-items: center; justify-content: center; font-size: 12px; }
.stars-grid-wrap { overflow-x: auto; }
.stars-grid { border-collapse: separate; border-spacing: 2px; font-size: 12px; }
.stars-grid th { font-weight: 600; color: var(--muted); font-size: 11px; padding: 2px 0; min-width: 26px; text-align: center; }
.stars-grid th span { display: block; font-size: 9px; color: #a0a9b5; }
.stars-grid th.sg-today { color: var(--blue-dark); }
.stars-grid th.sg-sun span { color: var(--warn); }
.stars-grid .sg-name { text-align: left; white-space: nowrap; padding-right: 10px; font-weight: 600; color: var(--ink); font-size: 13px; position: sticky; left: 0; background: var(--panel); z-index: 1; }
.stars-grid .sg-total { font-weight: 800; color: #c99400; padding-left: 8px; font-size: 13px; text-align: center; }
.sg-cell { width: 26px; height: 30px; text-align: center; border-radius: 5px; cursor: pointer; line-height: 1; padding: 2px 0; }
.sg-cell i { font-style: normal; display: block; font-size: 14px; }
.sg-cell small { display: block; font-size: 8px; color: var(--muted); margin-top: 1px; }
.sg-cell:hover, .sg-cell:focus { outline: 2px solid var(--blue); outline-offset: -1px; }
.sg-cell.sg-selected { outline: 2px solid var(--blue-dark); outline-offset: -1px; }
.sc-star { background: #fdf3cf; color: #d29b00; }
.sc-granted { background: #ece4fb; color: #6d3fc7; }
.sc-lost { background: #fde2e1; color: #e3867f; }
.sc-lost i { text-decoration: line-through; }
.sc-missed { background: #f3f5f8; color: #a0a9b5; }
.sc-off { background: #eef1f5; color: #6b7685; }
.sc-off i { font-size: 9px !important; font-weight: 700; }
.sc-pending { background: #eaf1ff; color: var(--blue-dark); }
.sc-nonworking { background: repeating-linear-gradient(135deg, #f6f7f9, #f6f7f9 3px, #fff 3px, #fff 6px); cursor: pointer; }
.sc-future { background: transparent; cursor: default; }
.sc-future:hover { outline: none; }
.stars-day-detail { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.sdd-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.sdd-status { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 12px; }
.sdd-status i { font-style: normal; }
.sdd-override { font-size: 13px; color: #6d3fc7; margin: 8px 0 0; }
.sdd-table { margin-top: 10px; }
.sdd-flag { display: inline-block; font-size: 11px; font-weight: 700; background: #fde2e1; color: #b3261e; padding: 2px 7px; border-radius: 10px; margin: 1px 0; }
.sdd-okflag { font-size: 12px; color: var(--good); font-weight: 600; }
.sdd-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.sdd-actions input { flex: 1 1 260px; }
.sdd-result { font-size: 13px; color: var(--warn); }
.stars-settings h3 { margin-bottom: 12px; }
.ss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ss-box { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px 12px; margin: 0; min-width: 0; }
.ss-box legend { font-size: 12px; font-weight: 700; color: var(--slate-light); padding: 0 4px; }
.ss-box > label:not(.ss-check) { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.ss-row { flex-direction: row !important; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink) !important; font-size: 13px !important; }
.ss-row input { width: 80px; }
.ss-check { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 6px; }
.ss-days { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.ss-sub { font-size: 12px; color: var(--muted); margin-top: 10px; }
.ss-tier { display: grid; grid-template-columns: 1fr 64px 1.6fr auto; gap: 6px; margin-top: 6px; }
.ss-tier input { min-width: 0; padding: 7px 8px; font-size: 13px; }
.sdd-table-wrap { overflow-x: auto; margin-top: 10px; }
.sdd-table-wrap .sdd-table { margin-top: 0; }

/* Step 3 — per-category Problems dropdown */
.problem-pick-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.problem-pick-row select { flex: 1; min-width: 220px; }
.problem-pick-row .btn-secondary { white-space: nowrap; padding: 9px 14px; }
#problems-selected:empty { display: none !important; }
#problems-selected .chip-remove { color: #fff; }
#problem-manage-list { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 12px; background: #fafbfc; }
.problem-manage-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.problem-manage-row:last-child { border-bottom: none; }
.problem-manage-row .link-btn + .link-btn { margin-left: 12px; }

/* Non-admin tried to use a model/SKU that isn't in the catalog */
.catalog-pick-msg { margin-top: 8px; padding: 8px 12px; border-radius: var(--radius-sm); background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: 13px; }

/* Inventory has 11 columns (Branch ID, Product ID, SKU, Name, Brand, Category, ...), so it gets a wider page than other views */
#view-inventory { max-width: 1500px; }
#parts-table td:nth-child(4) { min-width: 220px; }
#parts-table td:nth-child(6) { white-space: nowrap; }
#parts-table td:last-child .action-btn { padding: 4px 8px; }
#parts-table th, #parts-table td { padding: 10px 8px; font-size: 13px; }
#parts-table td:nth-child(4) { min-width: 200px; }
#inventory-search { min-width: 280px; }

/* Very light, distinct background per block (ticket page cards and New Ticket steps) */
:root {
  --tint-blue:    #eaf3ff;
  --tint-green:   #eaf8ef;
  --tint-yellow:  #fff8e1;
  --tint-lavender:#f3ecfb;
  --tint-teal:    #e6f6f5;
  --tint-peach:   #fdeee6;
  --tint-pink:    #fdecf3;
  --tint-slate:   #eef2f6;
  --tint-sand:    #f7f1e6;
}
.detail-card.tint-customer { background: var(--tint-blue); }
.detail-card.tint-summary  { background: var(--tint-green); }
.detail-card.tint-device   { background: var(--tint-yellow); }
.detail-card.tint-outgoing { background: var(--tint-lavender); }
.detail-card.tint-service  { background: var(--tint-teal); }
.detail-card.tint-parts    { background: var(--tint-peach); }
.detail-card.tint-billing  { background: var(--tint-pink); }
.detail-card.tint-private  { background: var(--tint-sand); }
.detail-card.tint-activity { background: var(--tint-slate); }
.form-section.tint-step1 { background: var(--tint-blue); }
.form-section.tint-step2 { background: var(--tint-green); }
.form-section.tint-step3 { background: var(--tint-yellow); }
.form-section.tint-step4 { background: var(--tint-lavender); }