/* ── Tokens ───────────────────────────────────────────── */
:root {
  --ink: #141a2b;        /* sidebar */
  --ink-2: #1f2740;
  --paper: #f7f8fa;      /* work surface */
  --card: #ffffff;
  --line: #e2e5ec;
  --text: #1b2030;
  --muted: #6b7386;
  --accent: #2f54eb;     /* cobalt */
  --accent-ink: #1d3ac2;

  --s-open: #d98a0b;
  --s-in_progress: #2f54eb;
  --s-on_hold: #8a5cf6;
  --s-resolved: #1f9d55;
  --s-closed: #8d94a5;

  --p-low: #8d94a5; --p-normal: #5b6478; --p-high: #d98a0b; --p-urgent: #d6333a;

  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --r: 6px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--sans); color: var(--text); background: var(--paper); font-size: 14.5px; line-height: 1.5; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 2px; }
h2 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 8px; }
p { margin: 0 0 8px; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: 12.5px; }
.hidden { display: none !important; }
.mt { margin-top: 10px; }
.inline { display: inline; }

/* ── App shell ────────────────────────────────────────── */
body.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.sidebar { background: var(--ink); color: #cfd4e3; display: flex; flex-direction: column; padding: 12px 12px; position: sticky; top: 0; height: 100vh; }
.brand { color: #fff; font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; padding: 2px 10px 10px; }
.brand-mark { color: var(--accent); font-size: 16px; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a { color: #cfd4e3; padding: 6px 10px; border-radius: var(--r); font-weight: 500; }
.sidebar nav a:hover { background: var(--ink-2); text-decoration: none; }
.sidebar nav a.active { background: var(--accent); color: #fff; }
.sidebar-user { margin-top: auto; display: flex; gap: 10px; align-items: center; padding: 10px; border-top: 1px solid var(--ink-2); }
.sidebar-user .who { color: #fff; font-weight: 500; }
.sidebar-user .role { font-size: 12px; color: #8f97ad; }
.sidebar-user .role a { color: #aeb6cb; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex: none; }
.avatar.sm { width: 22px; height: 22px; font-size: 11px; vertical-align: middle; }

.content { padding: 12px 16px 40px; max-width: none; width: 100%; min-width: 0; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 10px; }
.page-head .crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.head-badges { display: flex; gap: 6px; padding-top: 4px; }

/* ── Flash ────────────────────────────────────────────── */
.flash { padding: 10px 14px; border-radius: var(--r); margin-bottom: 16px; font-weight: 500; border-left: 3px solid; }
.flash-ok { background: #e8f6ee; color: #14683a; border-color: var(--s-resolved); }
.flash-error { background: #fdeaea; color: #8f1d22; border-color: var(--p-urgent); }

/* ── Buttons & forms ──────────────────────────────────── */
.btn { font: inherit; font-weight: 500; padding: 8px 14px; border-radius: var(--r); border: 1px solid var(--line); background: #fff; color: var(--text); cursor: pointer; display: inline-block; white-space: nowrap; }
.btn:hover { background: #f0f2f6; text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--accent); }
.btn-ghost:hover { background: #eef1fd; }
.btn-sm { padding: 4px 10px; font-size: 13px; }
.btn.danger { color: var(--p-urgent); }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .check:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

input, select, textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--text); width: 100%; }
input[type=checkbox] { width: auto; }
textarea { resize: vertical; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 500; color: var(--muted); }
label input, label select, label textarea { font-weight: 400; color: var(--text); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.card-head h2 { margin: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.form-grid .span2 { grid-column: span 2; }
.form-grid.hidden { display: none; }
.actions { display: flex; gap: 8px; }
.form-row { display: grid; grid-template-columns: 1.2fr 1.4fr 1.2fr .8fr auto; gap: 8px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.prose { white-space: normal; }

/* ── Status strip & filters ───────────────────────────── */
.status-strip { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.status-strip a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--text); font-size: 13px; font-weight: 500; }
.status-strip a b { font-family: var(--mono); font-weight: 500; color: var(--muted); margin-left: 4px; }
.status-strip a:hover { text-decoration: none; border-color: #c9cfdb; }
.status-strip a.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.status-strip a.on b { color: #b8bfd4; }
.filters { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto auto; gap: 8px; margin-bottom: 10px; }

/* ── Ticket list: status rail is the signature ────────── */
.ticket-list { display: flex; flex-direction: column; gap: 4px; }
.ticket-row { display: grid; grid-template-columns: 74px 1fr 170px 84px 108px 150px; align-items: center; gap: 10px; padding: 8px 12px 8px 10px; background: #fff; border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; color: var(--text); transition: transform .12s, box-shadow .12s; }
.ticket-row:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 3px 12px rgba(20,26,43,.08); }
.ticket-row .ref { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.ticket-row .ttl { display: block; font-weight: 600; }
.ticket-row .sub { display: block; font-size: 12.5px; color: var(--muted); }
.ticket-row .main { min-width: 0; }
.ticket-row .ttl, .ticket-row .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-open { border-left-color: var(--s-open); }
.rail-in_progress { border-left-color: var(--s-in_progress); }
.rail-on_hold { border-left-color: var(--s-on_hold); }
.rail-resolved { border-left-color: var(--s-resolved); }
.rail-closed { border-left-color: var(--s-closed); }
.tasks-cell { display: flex; flex-direction: column; gap: 4px; }
.progress { display: block; height: 5px; background: #e7eaf0; border-radius: 3px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--s-resolved); }
.progress.wide { width: 180px; }
.assignee { font-size: 13px; display: flex; gap: 6px; align-items: center; }
.empty { text-align: center; padding: 60px 20px; color: var(--muted); border: 1px dashed var(--line); border-radius: 8px; }

/* badges */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.status-open { background: #fdf1dc; color: #8a5400; }
.status-in_progress { background: #e6ecfd; color: var(--accent-ink); }
.status-on_hold { background: #efe8fd; color: #5a33b5; }
.status-resolved { background: #e2f5ea; color: #14683a; }
.status-closed { background: #eceef3; color: #5b6478; }
.prio-low { background: #eceef3; color: var(--p-low); }
.prio-normal { background: #eceef3; color: var(--p-normal); }
.prio-high { background: #fdf1dc; color: #8a5400; }
.prio-urgent { background: #fdeaea; color: var(--p-urgent); }

/* ── Ticket page ──────────────────────────────────────── */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 12px; align-items: start; }
.task-list { list-style: none; margin: 0 0 12px; padding: 0; }
.task { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 7px 0; border-top: 1px solid var(--line); }
.task:first-child { border-top: 0; }
.check { width: 22px; height: 22px; border-radius: 6px; border: 2px solid #c9cfdb; background: #fff; cursor: pointer; color: #fff; font-weight: 700; line-height: 1; margin-top: 1px; }
.task.done .check { background: var(--s-resolved); border-color: var(--s-resolved); }
.task.done .task-title { text-decoration: line-through; color: var(--muted); }
.task-title { font-weight: 500; }
.task-meta { color: var(--muted); margin-top: 2px; }
.overdue { color: var(--p-urgent); font-weight: 600; }
.task-edit summary { list-style: none; }
.task-edit summary::-webkit-details-marker { display: none; }
.task-edit-form { grid-column: 1 / -1; display: grid; grid-template-columns: 2fr 1fr 1fr auto auto; gap: 8px; margin-top: 10px; }
.task-edit[open] { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; justify-items: end; }
.task-add { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.comments { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.comment { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.comment-meta { margin-bottom: 2px; }
.comment-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.activity { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.activity li { padding: 6px 0; border-top: 1px solid var(--line); }
.activity li:first-child { border-top: 0; }
.activity .mono { display: inline-block; min-width: 64px; }

/* ── Table (team) ─────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px 8px; border-bottom: 1px solid var(--line); }
.table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr.inactive td { opacity: .55; }

/* ── Auth ─────────────────────────────────────────────── */
body.auth { display: grid; place-items: center; background: var(--ink); }
.auth-card { background: #fff; width: min(400px, 92vw); padding: 32px 30px; border-radius: 10px; }
.auth-card .brand { color: var(--ink); padding: 0 0 14px; }
.auth-card h1 { margin-bottom: 6px; }
.auth-card form { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 14px; }
.auth-card .btn { margin-top: 4px; }

/* ── Responsive ───────────────────────────────────────── */
.nav-burger { display: none; }
@media (max-width: 960px) {
  body.app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; }
  .sidebar .brand img { height: 34px; }
  .nav-burger { display: block; order: 99; margin-left: auto; background: var(--ink-2, #1d2438); color: #fff; border: 1px solid #39415c; border-radius: 10px; font-size: 20px; line-height: 1; padding: 8px 12px; cursor: pointer; }
  /* everything except the brand and the burger hides until opened */
  .sidebar > *:not(.brand):not(.nav-burger) { display: none; }
  .sidebar.nav-open > *:not(.brand):not(.nav-burger) { display: flex; }
  .sidebar.nav-open .nav-burger { order: -1; align-self: flex-end; position: sticky; top: 8px; z-index: 6; }
  /* long call/text lines must never widen the phone layout */
  html, body { max-width: 100%; overflow-x: hidden; }
  .prose, .log-entry, .vlog-line, .tl.log { overflow-wrap: anywhere; word-break: break-word; }
  .sidebar.nav-open > nav { flex-direction: column; width: 100%; }
  .sidebar.nav-open > nav a { padding: 12px 10px; font-size: 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
  .sidebar.nav-open .sidebar-user { margin-left: 0; width: 100%; }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar-user { margin-top: 0; margin-left: auto; border: 0; padding: 0 6px; }
  .content { padding: 10px 10px 32px; }
  .two-col, .form-grid, .filters, .form-row, .task-add, .task-edit-form { grid-template-columns: 1fr; }
  .form-grid .span2 { grid-column: auto; }
  .ticket-row { grid-template-columns: 1fr 1fr; }
  .ticket-row .main { grid-column: 1 / -1; }
  .ticket-row .ttl, .ticket-row .sub { white-space: normal; }
  .table { display: block; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) { .ticket-row { transition: none; } }

/* ── Customers & contacts ─────────────────────────────── */
.filters-4 { grid-template-columns: 2.2fr 1fr 1fr auto; }
.strong { font-weight: 600; color: var(--text); }
.small { font-size: 12.5px; }
.mt-sm { margin-top: 6px; }
.table-card { padding: 4px 8px; }
.table a.strong:hover { color: var(--accent); }
.badge.primary { background: #e6ecfd; color: var(--accent-ink); }
.cust-active { background: #e2f5ea; color: #14683a; }
.cust-prospect { background: #fdf1dc; color: #8a5400; }
.cust-inactive { background: #eceef3; color: #5b6478; }
.two-col-wide { grid-template-columns: minmax(0, 1fr) 400px; }
.dl { display: grid; grid-template-columns: 140px 1fr; gap: 5px 12px; margin: 0; }
.dl dt { color: var(--muted); font-size: 13px; font-weight: 500; }
.dl dd { margin: 0; }
.contact-list { display: flex; flex-direction: column; }
.contact-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.contact-row:first-child { border-top: 0; }
.contact-row.inactive .contact-main { opacity: .55; }
.contact-actions { display: flex; gap: 4px; }
.mini-tickets { list-style: none; margin: 0; padding: 0; }
.mini-tickets li { padding: 8px 0 8px 12px; border-left: 3px solid var(--line); margin-bottom: 6px; }
.mini-tickets li a { color: var(--text); font-weight: 500; }
.mini-tickets li.rail-open { border-left-color: var(--s-open); }
.mini-tickets li.rail-in_progress { border-left-color: var(--s-in_progress); }
.mini-tickets li.rail-on_hold { border-left-color: var(--s-on_hold); }
.mini-tickets li.rail-resolved { border-left-color: var(--s-resolved); }
.mini-tickets li.rail-closed { border-left-color: var(--s-closed); }
@media (max-width: 960px) { .filters-4, .two-col-wide, .dl { grid-template-columns: 1fr; } }

/* v4: import + customer extras */
.filters-5 { grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr auto; }
.form-section { margin: 6px 0 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.dl .dl-section { margin-top: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.steps { display: flex; gap: 6px; margin-bottom: 18px; font-size: 13px; }
.steps span { padding: 4px 10px; border-radius: 999px; background: var(--surface-2, #f1f1ee); color: var(--muted); }
.steps span.on { background: var(--accent, #2b63d9); color: #fff; }
.steps span.done { color: var(--text); }
.map-table td { vertical-align: top; }
.map-table select { width: 100%; }
.map-table .sample { color: var(--muted); font-size: 12px; }
.map-table .auto { font-size: 11px; color: #14683a; }
.map-table .dup { font-size: 11px; color: #8f1d22; }
.import-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 18px; margin: 14px 0; }
.import-opts label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; }
.import-opts label.check { flex-direction: row; align-items: center; gap: 8px; }
.stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 10px 0 16px; }
.stat { background: var(--surface-2, #f6f6f3); border-radius: var(--r); padding: 10px 14px; min-width: 110px; }
.stat b { display: block; font-size: 22px; font-family: var(--mono, monospace); }
.stat span { font-size: 12px; color: var(--muted); }
details.errs summary { cursor: pointer; font-weight: 500; }
@media (max-width: 960px) { .filters-5 { grid-template-columns: 1fr; } }
.seg { display:flex; gap:8px; }
.badge.unlinked { background: #fdf1dc; color: #8a5400; border: 1px dashed #e0b25f; }
.status-strip a.s-unlinked { border-style: dashed; border-color: #e0b25f; }
.flash-info { background: #eef3ff; color: var(--accent-ink); border-color: var(--accent); }

/* ===== Tab strip (build 93) ===== */
.tabstrip { display: flex; gap: 2px; border-bottom: 2px solid var(--line); margin: 0 0 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tabstrip::-webkit-scrollbar { display: none; }
.tabstrip a { position: relative; white-space: nowrap; padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; border-radius: 6px 6px 0 0; }
.tabstrip a:hover { color: var(--ink); background: #f5f6f9; }
.tabstrip a.is-active { color: var(--accent-ink); border-bottom-color: var(--accent); }
.tabstrip a .tab-count { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--muted); background: #eef0f4; border-radius: 10px; padding: 1px 7px; }
.tabstrip a.is-active .tab-count { color: var(--accent-ink); background: #e3e9ff; }

/* member cards (build 93) */
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.member-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #fff; }
.member-card.is-inactive { opacity: .6; }
.member-card .mc-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.member-card .mc-name { font-size: 16px; font-weight: 700; color: var(--ink); }
.member-card .mc-email { font-size: 13px; color: var(--muted); word-break: break-all; margin-bottom: 10px; }
.member-card .mc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.member-card .mc-field { display: flex; flex-direction: column; gap: 3px; }
.member-card .mc-field > label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.member-card .mc-field input, .member-card .mc-field select { width: 100%; }
.member-card .mc-field.mc-wide { grid-column: 1 / -1; }
.member-card .mc-name-input { font-weight: 700; font-size: 15px; }
.member-card .mc-flags { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.member-card .mc-flags label { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink); }
.member-card .mc-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.member-card .mc-chip { font-size: 12px; color: var(--muted); background: #f3f4f7; border-radius: 8px; padding: 3px 9px; }
@media (max-width: 560px) { .member-card .mc-fields { grid-template-columns: 1fr; } }

/* ===== Sparkline rows (build 94) ===== */
.sumtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 14px; }
.sumtiles .stile { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fff; }
.sumtiles .stile .k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sumtiles .stile .v { font-size: 19px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.spark { display: block; width: 100%; height: 34px; }
.srowhead, .srow { display: grid; grid-template-columns: var(--cols); gap: 12px; align-items: center; }
.srowhead { padding: 0 4px 8px; border-bottom: 1px solid var(--line); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.srowhead .r, .srow .r { text-align: right; }
.srows { display: flex; flex-direction: column; }
.srow { padding: 11px 4px; border-bottom: 1px solid #eef0f4; cursor: pointer; }
.srow:hover { background: #f6f7f9; }
.srow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.s-name { font-weight: 650; min-width: 0; }
.s-name a { color: inherit; text-decoration: none; }
.s-name a:hover { color: var(--accent); }
.s-mid { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 1px; }
.s-spark { min-width: 0; }
.s-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.s-num.dim { color: var(--muted); font-weight: 500; }
.s-chev { color: var(--muted); justify-self: end; transition: transform .15s; }
.srow.open .s-chev { transform: rotate(90deg); }
.trend { font-variant-numeric: tabular-nums; font-size: 12px; margin-top: 1px; }
.trend.up { color: #1f6b45; } .trend.down { color: #b42318; } .trend.flat { color: var(--muted); }
.s-mini { display: none; }
.sdetail { display: none; padding: 2px 4px 14px; }
.srow.open + .sdetail { display: block; }
.smonths { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.smo { border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; }
.smo .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.smo .a { font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 2px; }
.smo.now { border-color: var(--accent); background: #eef2ff; }
.smo.pending { border-style: dashed; border-color: #e0b25f; background: #fffaf1; }
.sdetail .hint { color: var(--muted); font-size: 12px; margin: 10px 2px 0; }
@media (prefers-reduced-motion: reduce) { .s-chev { transition: none; } }
@media (max-width: 760px) {
  .sumtiles { grid-template-columns: 1fr 1fr; }
  .srowhead { display: none; }
  .srow { grid-template-columns: 1fr auto; gap: 8px 10px; padding: 12px 4px; }
  .srow .s-name { grid-column: 1; grid-row: 1; }
  .srow .s-chev { grid-column: 2; grid-row: 1; align-self: start; }
  .srow .s-spark { grid-column: 1 / -1; grid-row: 2; }
  .srow .c-hide { display: none; }
  .srow .s-mini { grid-column: 1 / -1; grid-row: 3; display: flex; gap: 16px 18px; flex-wrap: wrap; }
  .s-mini .p { display: flex; flex-direction: column; gap: 1px; }
  .s-mini .p .k { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
}

/* ===== Calendar (build 6) ===== */
.btn-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-dark:hover { background: var(--ink-2); }
.inline-2 { display: flex; gap: 6px; }
.inline-2 > * { flex: 1; min-width: 0; }
.cal-head { align-items: center; }
.cal-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cal-toolbar .seg { display: flex; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.cal-toolbar .seg .btn { border: 0; padding: 6px 12px; }
.cal-toolbar .seg .btn-ghost { background: transparent; }
.cal-title { font-size: 16px; margin: 0; white-space: nowrap; }
.cal-layout { display: grid; grid-template-columns: 230px 1fr; gap: 16px; align-items: start; }
.cal-rail .card { padding: 14px; margin-bottom: 12px; }
.cal-rail h2 { margin-bottom: 8px; }
.flt { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; font-size: 13.5px; font-weight: 500; cursor: pointer; border-left: 3px solid var(--c, transparent); margin-bottom: 3px; background: color-mix(in srgb, var(--c, #fff) 8%, #fff); }
.flt:hover { background: color-mix(in srgb, var(--c, #999) 16%, #fff); }
.flt-all { background: #fdf1dc; border-left-color: #d98a0b; font-weight: 600; }
.flt input { accent-color: var(--c, var(--accent)); margin: 0; }
/* mini month */
.mm-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 13.5px; }
.mm-head a { padding: 0 8px; font-size: 18px; color: var(--muted); }
.mm-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 12px; }
.mm-dow { color: var(--muted); font-weight: 600; font-size: 10.5px; padding: 2px 0; }
.mm-day { position: relative; padding: 4px 0 5px; border-radius: 6px; color: var(--text); }
.mm-day:hover { background: #eef1f7; text-decoration: none; }
.mm-day.other { color: #b8bfd0; }
.mm-day.in-range { background: #fdf1dc; }
.mm-day.today { background: #d98a0b; color: #fff; font-weight: 700; }
.mm-day i { position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.mm-day.today i { background: #fff; }
/* main */
.cal-main { padding: 0; overflow: hidden; min-height: 520px; }
/* time grid */
.tg { display: flex; flex-direction: column; }
.tg-head { display: grid; grid-template-columns: 64px repeat(var(--n, 7), minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: #fafbfd; }
.tg-7 .tg-head, .tg-7 .tg-body { --n: 7; } .tg-1 .tg-head, .tg-1 .tg-body { --n: 1; }
.tg-dayhead { padding: 10px 8px; text-align: center; font-size: 13px; border-left: 1px solid var(--line); color: var(--muted); }
.tg-dayhead b { color: var(--text); font-weight: 600; margin-right: 2px; }
.tg-dayhead i { display: inline-block; font-style: normal; font-size: 11px; background: #eceef3; border-radius: 999px; padding: 0 6px; margin-left: 4px; color: var(--muted); }
.tg-dayhead.is-today { background: #fdf1dc; }
.tg-body { display: grid; grid-template-columns: 64px repeat(var(--n, 7), minmax(0, 1fr)); overflow-y: auto; max-height: calc(100vh - 190px); position: relative; }
.tg-hours { position: relative; }
.tg-hour { position: absolute; right: 8px; transform: translateY(-7px); font-size: 11px; color: var(--muted); font-family: var(--mono); }
.tg-day { position: relative; min-width: 0; border-left: 1px solid var(--line); }
.tg-day.is-today { background: #fffbf2; }
.tg-day.drop { background: #eef3ff; }
.tg-slot { position: absolute; left: 0; right: 0; border-top: 1px solid #edf0f5; cursor: pointer; }
.tg-slot:hover { background: rgba(47,84,235,.05); }
.tg-ev { position: absolute; z-index: 2; }
.tg-now { position: absolute; left: 0; right: 0; border-top: 2px solid var(--p-urgent); z-index: 3; pointer-events: none; }
.tg-now::before { content: ''; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--p-urgent); }
/* event chip */
.ev { display: flex; flex-direction: column; gap: 1px; height: 100%; box-sizing: border-box; overflow: hidden; padding: 4px 7px; border-radius: 6px; border-left: 4px solid var(--c); background: color-mix(in srgb, var(--s) 13%, #fff); color: var(--text); font-size: 12px; line-height: 1.25; cursor: pointer; box-shadow: 0 1px 2px rgba(20,26,43,.06); }
.ev:hover { text-decoration: none; background: color-mix(in srgb, var(--s) 24%, #fff); z-index: 5; box-shadow: 0 3px 10px rgba(20,26,43,.14); }
.ev.dragging { opacity: .5; }
.ev-time { font-family: var(--mono); font-size: 11px; color: color-mix(in srgb, var(--s) 75%, #000); font-weight: 600; white-space: nowrap; }
.ev-time em { font-style: normal; font-weight: 500; color: var(--c); margin-left: 4px; }
.ev-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-sub { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; }
.ev-compact { flex-direction: row; align-items: center; gap: 6px; padding: 2px 6px; }
/* month grid */
.mg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mg-dow { padding: 8px; text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); background: #fafbfd; }
.mg-day { min-width: 0; overflow: hidden; min-height: 112px; border-right: 1px solid #edf0f5; border-bottom: 1px solid #edf0f5; padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.mg-day.other { background: #fafbfd; color: #b8bfd0; }
.mg-day.is-today { background: #fffbf2; }
.mg-day.drop { background: #eef3ff; }
.mg-num { align-self: flex-end; font-size: 12px; font-weight: 600; padding: 2px 6px; border-radius: 999px; color: inherit; }
.mg-day.is-today .mg-num { background: #d98a0b; color: #fff; }
.mg-day .ev { height: auto; min-width: 0; }
.mg-day .ev-compact .ev-time em { display: none; }
.mg-more { font-size: 11px; color: var(--accent); padding: 0 6px; }
/* list */
.cl { padding: 6px 0; }
.cl-day { padding: 10px 16px; }
.cl-day h3 { margin: 0 0 8px; font-size: 13px; color: var(--muted); font-weight: 500; }
.cl-day h3 b { font-size: 18px; color: var(--text); }
.cl-day.is-today h3 b { color: #d98a0b; }
.cl-row { display: grid; grid-template-columns: 120px 1fr 70px 100px 150px; gap: 12px; align-items: center; padding: 9px 12px; border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 8px; margin-bottom: 6px; color: var(--text); background: #fff; }
.cl-row:hover { text-decoration: none; box-shadow: 0 3px 12px rgba(20,26,43,.08); }
.cl-time { font-size: 12px; }
.cl-who { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.cl-who i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
@media (max-width: 1100px) { .cal-layout { grid-template-columns: 1fr; } .cal-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .cl-row { grid-template-columns: 100px 1fr; } .cl-row > :nth-child(n+3) { display: none; } }

/* ===== build 7: logo + permissions ===== */
.brand img { display: block; width: 100%; max-width: 170px; height: auto; margin: 2px auto 6px; }
.sidebar .brand { padding: 6px 8px 16px; justify-content: center; }
.auth-card .brand img { max-width: 220px; margin: 0 auto 10px; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 16px; }
.perm { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.perm:hover { background: #f7f8fb; }
.perm input { margin-top: 3px; }
.perm small { display: block; color: var(--muted); font-weight: 400; margin-top: 2px; }
.perm-grid .span-all { grid-column: 1 / -1; }

/* ===== build 8: tasks, timeline, grid ===== */
.overdue-badge { background: #fdeaea; color: #8f1d22; }
.status-strip a.s-overdue { border-color: #e8a3a6; color: #8f1d22; }
.ticket-row.is-overdue, tr.row.is-overdue td:first-child { box-shadow: inset 3px 0 0 var(--p-urgent); }
.tl { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.tl-entry { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.tl-task { border: 1px dashed #9fb3e8; border-radius: 8px; padding: 10px 12px; background: #f7f9ff; }
.tl-task .task-av { background: var(--s-resolved); color: #fff; }
.tl-activity { font-size: 12.5px; color: var(--muted); padding: 2px 0 2px 40px; }
.card-head label.small input { margin-right: 4px; }
.task.hl { background: #fff8e6; outline: 2px solid #e0b25f; border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.task-done-form { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.task-done-form textarea { width: 100%; }
.task-edit-form { grid-template-columns: 2fr 1fr 1fr auto auto auto auto; }
.task-add { grid-template-columns: 2fr 1fr 1fr auto auto auto; }
/* calendar tasks */
.ev-task { border-left-style: dashed; background: #fff; border: 1px dashed var(--c); border-left-width: 4px; }
.ev-task:hover { background: color-mix(in srgb, var(--c) 8%, #fff); }
.ev-task.ev-done { opacity: .55; text-decoration: line-through; }
.ev-owner { font-style: normal; font-size: 10px; background: var(--ink); color: #fff; border-radius: 999px; padding: 0 5px; margin-left: 4px; }
.tg-dayhead { position: relative; }
.tg-strip { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; text-align: left; }
.tg-head { align-items: start; }
.tg-strip .ev-compact { padding: 3px 6px; }
.tg-strip .ev { height: auto; }
.tg-dayhead.drop { background: #eef3ff; }
.flt-task input { accent-color: var(--c); }
.btn.overdue { color: var(--p-urgent); }
.cl-row.cl-task { border-style: dashed; }
/* grid */
.view-tabs { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.view-tabs > a { padding: 6px 12px; border-radius: 8px 8px 0 0; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.view-tabs > a:hover { background: #f0f2f6; text-decoration: none; }
.view-tabs > a.on { color: var(--text); background: #fff; border: 1px solid var(--line); border-bottom-color: #fff; margin-bottom: -9px; }
.view-tabs > a.saved { color: var(--accent-ink); }
.view-tabs > a.shared::before { content: '⇄ '; color: var(--muted); }
.view-save { margin-left: auto; position: relative; }
.view-save summary { list-style: none; }
.view-save summary::-webkit-details-marker { display: none; }
.view-save-form { position: absolute; right: 0; top: 110%; z-index: 20; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 260px; box-shadow: 0 6px 24px rgba(20,26,43,.12); }
.view-save-form .check { display: flex; gap: 6px; align-items: center; }
.grid-bar { margin-bottom: 12px; }
.grid-bar-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grid-bar-row input[type=search] { flex: 1; min-width: 220px; width: auto; }
.grid-bar-row select, .frow select, .frow input { width: auto; }
.frow input { width: 100%; }
.grid-bar-row .seg { display: inline-flex; gap: 2px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.grid-bar-row .seg .btn { border: 0; padding: 5px 10px; }
.col-chooser { position: relative; }
.col-chooser summary { list-style: none; }
.col-chooser summary::-webkit-details-marker { display: none; }
.col-list { position: absolute; z-index: 20; top: 110%; left: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; min-width: 300px; box-shadow: 0 6px 24px rgba(20,26,43,.12); font-size: 13px; }
.filters-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.frow { display: grid; grid-template-columns: 170px 150px 1fr auto; gap: 6px; align-items: center; }
.f-vals { display: flex; gap: 6px; }
.f-vals > * { flex: 1; }
.f-vals select[multiple] { height: auto; min-height: 34px; }
.grid-card { padding: 0; overflow: auto; }
table.grid { font-size: 13px; }
table.grid td { padding: 3px 8px; vertical-align: middle; line-height: 1.25; }
table.grid th { padding: 5px 8px; }
table.grid td.t-title .ttl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 46vw; }
table.grid td.t-company { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
table.grid .avatar.sm { width: 20px; height: 20px; font-size: 10px; }
table.grid td.t-title { min-width: 260px; }
table.grid td.t-company { min-width: 160px; }
table.grid .badge { font-size: 11px; padding: 1px 7px; }
table.grid th a { color: var(--muted); font-weight: 600; white-space: nowrap; }
table.grid th.sorted a { color: var(--text); }
table.grid tr.row { cursor: pointer; }
table.grid tr.row:hover td { background: #f7f8fb; }
table.grid td.t-ref { font-family: var(--mono); color: var(--muted); white-space: nowrap; }
table.grid td.t-title .ttl { font-weight: 600; }
table.grid td.t-owner, table.grid td.t-due, table.grid td.t-updated, table.grid td.t-created, table.grid td.t-next_task { white-space: nowrap; }
table.grid td.t-owner .avatar { vertical-align: middle; }
.pager { display: flex; gap: 4px; align-items: center; margin-top: 12px; }
.pager .disabled { pointer-events: none; opacity: .4; }

/* ===== build 9: suspended / deactivated staff ===== */
.badge.held { background: #fdf1dc; color: #8a5a00; border: 1px solid #e6c27a; }
.badge.held-deactivated { background: #fdeaea; color: #8f1d22; border-color: #e8a3a6; }
.status-strip a.s-held { border-color: #e6c27a; color: #8a5a00; }
.table tr.held-row td { background: #fffbf2; }
.reassign { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: middle; }
.reassign select { width: auto; padding: 4px 6px; font-size: 13px; }
.status-sel.status-suspended { border-color: #e6c27a; background: #fffbf2; }
.status-sel.status-deactivated { border-color: #e8a3a6; background: #fdf3f3; }
.held-banner { margin: 0 0 10px; font-size: 13px; }
.flt-held { opacity: .7; }
.held-tag { font-size: 10.5px; color: #8a5a00; background: #fdf1dc; border-radius: 999px; padding: 0 6px; margin-left: 4px; }
.table select[name=role] { min-width: 90px; }
.table select[name=status] { min-width: 120px; }
.reassign { margin: 6px 0 0; }

/* ===== build 10: my day, templates, time on task ===== */
.myday { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .myday { grid-template-columns: 1fr; } }
.agenda { list-style: none; margin: 0; padding: 0; }
.agenda li { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center; padding: 9px 10px; border-top: 1px solid var(--line); border-left: 3px solid transparent; }
.agenda li.is-task { border-left: 3px dashed #9fb3e8; }
.agenda li.past { opacity: .6; }
.agenda .when { color: var(--muted); font-size: 12.5px; }
.agenda .when.overdue { color: var(--p-urgent); }
.agenda.compact li { grid-template-columns: 160px 1fr; padding: 6px 10px; }
.card-late { border-color: #e8a3a6; }
.card-late h2 { color: #8f1d22; }
.mini-filter { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 6px; margin-bottom: 10px; }
.mini-filter select, .mini-filter input { width: auto; padding: 5px 8px; font-size: 13px; }
.task-tpl { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.task-tpl select { width: auto; }
.inline-lbl { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.tpl-lines { margin: 0; padding-left: 18px; font-size: 13px; }
.nowrap { white-space: nowrap; }

/* ===== build 11: social lookup ===== */
.social-photo { width: 100%; max-height: 160px; object-fit: cover; border-radius: 8px; margin-bottom: 10px; }
.ratings { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rating { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--text); background: #fff; }
.rating:hover { text-decoration: none; background: #f0f2f6; }
.rating.g b { color: #4285f4; } .rating.y b { color: #d32323; } .rating.fb { color: #1877f2; } .rating.ig { color: #c13584; }
.social-cmp { font-size: 13px; margin-bottom: 8px; }
.social-cmp td { padding: 5px 6px; vertical-align: top; }
.social-cmp tr.differs td { background: #fff8e6; }
.hours { font: 12px var(--mono); white-space: pre-wrap; margin: 6px 0 0; color: var(--muted); }
.int-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.integrations .check { flex-direction: row; align-items: center; gap: 8px; }

/* ===== build 12: no-set-time band, internal tickets ===== */
.tg-band { position: absolute; left: 0; right: 0; z-index: 3; padding: 2px 3px 3px; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; overflow: hidden; background: #fff1f1; border-top: 2px solid var(--p-urgent); border-bottom: 2px solid var(--p-urgent); }
.tg-band.empty { background: #fff7f7; cursor: pointer; }
.tg-band.empty:hover { background: #ffecec; }
.tg-band.drop { background: #ffd9d9; }
.tg-band-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--p-urgent); font-weight: 700; padding: 0 4px; line-height: 14px; }
.tg-hour-band { color: var(--p-urgent); font-weight: 700; }
.ev-line { display: block; line-height: 18px; height: 20px; padding: 0 6px; font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--s) 40%, #fff); border-left: 3px solid var(--c); background: color-mix(in srgb, var(--s) 12%, #fff); color: var(--text); }
.ev-line.ev-task { border-style: dashed; border-left-style: solid; background: #fff; }
.ev-line i { display: none; }
.tg-more { font-size: 11px; color: var(--accent); padding: 0 6px; }
.tg-day .tg-slot[data-min="480"] { pointer-events: none; }
.badge.internal { background: #e9edf5; color: #3b4663; border: 1px solid #c9d0de; }
.check-row { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; }
.mg-day .ev-line { height: 20px; }

/* ===== build 12.1: show-all, purge, tighter grid ===== */
.check-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.check-inline input { width: auto; margin: 0; }
.ticket-row { padding: 5px 12px 5px 10px; }
.ticket-list { gap: 4px; }
.purge { margin-top: 14px; }
.purge-top { margin: -6px 0 12px; }
.purge-top summary { color: var(--p-urgent); }
.purge summary { list-style: none; display: inline-block; }
.purge summary::-webkit-details-marker { display: none; }
.purge-form { margin-top: 8px; padding: 12px 14px; border: 1px solid #e8a3a6; background: #fdf3f3; border-radius: 8px; max-width: 720px; }
.purge-form p { margin: 0 0 8px; }
.purge-row { display: flex; gap: 8px; }
.purge-row input { width: 220px; font-family: var(--mono); }
.btn.danger:not(.btn-ghost) { background: var(--p-urgent); border-color: var(--p-urgent); color: #fff; }

/* ===== build 13: products installed ===== */
.prod-form { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; background: #fafbfd; }
.prod-form .form-grid + .form-grid { margin-top: 6px; }
.prod-list { display: flex; flex-direction: column; gap: 8px; }
.prod-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.prod-row .contact-actions { display: flex; gap: 6px; align-items: flex-start; }
.prod-row .span-all { grid-column: 1 / -1; margin: 0; }
.prod-dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 6px 0 2px; font-size: 13px; }
.prod-dl dt { color: var(--muted); } .prod-dl dd { margin: 0; }
.badge.cat-hardware { background: #e7efff; color: #2747a8; } .badge.cat-software { background: #e9f7ee; color: #1f6b3a; } .badge.cat-service { background: #f3e9fb; color: #6b2ea8; }
.prod-inline { margin-top: 2px; }

/* ===== build 14: quotes & invoices, bundles, install from quote ===== */
.tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.tabs a { padding: 7px 14px; border-radius: 8px 8px 0 0; border: 1px solid var(--line); border-bottom: none; background: #f3f5f9; color: var(--muted); }
.tabs a.on { background: #fff; color: var(--text); font-weight: 600; }
.num { text-align: right; }
table.lines input.num { text-align: right; }
table.lines td, table.lines th { padding: 5px 8px; vertical-align: middle; }
table.lines tfoot td { border-top: 1px solid var(--line); }
table.lines select, table.lines input { width: 100%; padding: 5px 7px; font-size: 13px; }
.doc-view { max-width: 900px; }
.doc-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.doc-company { font-size: 14px; line-height: 1.5; }
.doc-company::first-line { font-weight: 700; font-size: 18px; }
.doc-kind { font-size: 22px; font-weight: 800; letter-spacing: .08em; color: var(--muted); text-align: right; }
.meta td { padding: 1px 8px; font-size: 13px; } .meta td:first-child { color: var(--muted); }
.doc-to { margin-bottom: 14px; }
.doc-notes { margin-top: 14px; font-size: 13px; white-space: pre-wrap; }
.sel-cust { width: 220px; padding: 7px 8px; margin-right: 6px; }
.flags { display: flex; gap: 24px; }
.bundle { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.comp-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin: 6px 0 10px; }
.comp.req { opacity: .85; }
.pending-box { border: 1px dashed #e6c27a; background: #fffbf2; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; font-size: 13px; }
.prod-row.is-part { margin-left: 26px; background: #fafbfd; }
.install-form { border-color: var(--accent); }
.status-strip a.on { font-weight: 600; }
@media print { .sidebar, .page-head, nav, .flash { display: none !important; } .content { padding: 0; } .print-body .doc-view { border: none; box-shadow: none; } }

/* ===== build 14.1: equipment labels ===== */
.badge.label-badge { background: #1f2a44; color: #fff; font-weight: 600; }
.label-head { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.label-head:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.label-head.hl { background: #fffbe6; border-radius: 6px; padding: 6px 8px; }
.label-head summary, details.inline summary { cursor: pointer; list-style: none; display: inline-block; }
details.inline { display: inline-block; }
details.inline summary::-webkit-details-marker { display: none; }
.relabel { display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; }
.relabel input { width: 180px; padding: 4px 6px; font-size: 13px; }

/* ===== build 15: telegram / notification outbox ===== */
.link-code { font: 600 18px var(--mono); background: #eef3ff; color: var(--accent); padding: 3px 10px; border-radius: 6px; letter-spacing: .08em; }
.steps { padding-left: 22px; line-height: 1.8; }

.diag { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; }
.diag li { padding: 6px 10px; border-radius: 6px; font-size: 13px; background: #f6f8fb; }
.diag-ok .diag-ico { color: #1f6b3a; } .diag-warn { background: #fff8e6; } .diag-warn .diag-ico { color: #9a6b00; } .diag-bad { background: #fdeeee; } .diag-bad .diag-ico { color: #b42318; }
.diag-ico { display: inline-block; width: 16px; font-weight: 700; }

.integrations .field { display: flex; flex-direction: column; gap: 4px; }
.integrations .field label { font-weight: 500; }
.check-list { display: flex; flex-direction: column; gap: 6px; }
.check-list .check-row { display: flex; align-items: flex-start; gap: 8px; }
.check-list .check-row input { margin-top: 3px; }

.bell { margin-left: 4px; }
.bell-btn { background: none; border: none; cursor: pointer; font-size: 13px; padding: 0 2px; opacity: .55; }
.bell-btn:hover { opacity: 1; }
.tg-cell { font-size: 12px; white-space: nowrap; }
.tg-cell form { display: inline; }

/* ===== build 16.1: presence IN (green) / OUT (red) ===== */
.presence { display: flex; position: relative; z-index: 2; margin: 8px 14px 4px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; overflow: hidden; }
.presence button { flex: 1; border: none; background: transparent; color: rgba(255,255,255,.55); font: 700 11px var(--sans); letter-spacing: .12em; padding: 6px 0; cursor: pointer; }
.presence button.on { color: #fff; }
body.presence-in  { --accent: #1f9d55; --accent-ink: #167a41; --presence: #1f9d55; --presence-soft: #e6f6ec; }
body.presence-out { --accent: #d6333a; --accent-ink: #b42318; --presence: #d6333a; --presence-soft: #fdeeee; --line: #f0a8ab; }
body.presence-in .presence button.on, body.presence-out .presence button.on { background: var(--presence); }
body.presence-in .sidebar, body.presence-out .sidebar { box-shadow: inset -4px 0 0 var(--presence); }
body.presence-in .sidebar nav a.active, body.presence-out .sidebar nav a.active { background: var(--presence); }
body.presence-out .card, body.presence-out .table, body.presence-out .filters input, body.presence-out .filters select, body.presence-out .btn-ghost { border-color: #f0a8ab; }
/* thick band around every page header */
body.presence-in .page-head, body.presence-out .page-head { border: 3px solid var(--presence); border-radius: 10px; padding: 7px 14px; margin-bottom: 10px; background: var(--presence-soft); position: relative; }
body.presence-in .page-head::before, body.presence-out .page-head::before { position: absolute; top: -12px; right: 14px; padding: 2px 10px; border-radius: 999px; background: var(--presence); color: #fff; font: 700 11px var(--sans); letter-spacing: .15em; }
body.presence-in .page-head::before { content: 'ONLINE'; }
body.presence-out .page-head::before { content: 'OFFLINE'; }
.brief-overlay { position: fixed; inset: 0; background: rgba(20,26,43,.55); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow: auto; }
.brief { background: #fff; border-radius: 12px; width: min(760px, 100%); padding: 22px 26px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.brief-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.brief-head h2 { margin: 0; font-size: 22px; }
.brief-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0; }
.brief-stats div { background: #f6f8fb; border-radius: 8px; padding: 10px 12px; text-align: center; }
.brief-stats b { display: block; font-size: 24px; } .brief-stats span { font-size: 12px; color: var(--muted); }
.brief-stats .hot { background: #fff6e5; } .brief-stats .bad { background: #fdeeee; }
.brief h3 { margin: 14px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.brief-list { list-style: none; padding: 0; margin: 0; } .brief-list li { padding: 5px 0; border-top: 1px solid var(--line); font-size: 13.5px; }

/* ===== build 17: bigger brief, day-end clock, end-of-day page ===== */
.brief.brief-xl { width: min(980px, 100%); padding: 28px 34px; font-size: 15px; }
.brief-xl .brief-head h2 { font-size: 28px; }
.brief-xl .brief-stats b { font-size: 34px; }
.brief-xl .brief-list li { padding: 7px 0; font-size: 15px; }
.day-end-form { margin-top: 22px; padding-top: 16px; border-top: 2px solid var(--line); }
.clock { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 10px; }
.clock-h { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 2px solid var(--line); border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 15px; }
.clock-h input[type=radio] { display: none; }
.clock-h.on { border-color: var(--accent); background: var(--accent); color: #fff; }
.clock-h.other input[type=time] { padding: 4px 6px; font-size: 14px; }
.btn-lg { padding: 12px 26px; font-size: 16px; }
.eod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1100px) { .eod-grid { grid-template-columns: 1fr; } }
.eod-row { padding: 10px 0; border-top: 1px solid var(--line); }
.eod-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.eod-actions input, .eod-actions select { padding: 5px 7px; font-size: 13px; width: auto; }
.eod-actions form { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.eod-actions input[name=note] { width: 150px; }
.eod-signout { margin-top: 16px; text-align: center; font-size: 15px; }
.eod-overdue { border-color: #d6333a; }

/* ===== build 17.1: bold selected calendar view, brief close, telegram help ===== */
.btn-sel { background: #ff7a00 !important; border-color: #ff7a00 !important; color: #fff !important; font-weight: 800; box-shadow: 0 0 0 3px #ffd2ad; }
.cal-now { align-items: center; gap: 6px; padding: 0 12px; border: 2px solid #ff7a00; border-radius: 8px; background: #fff3e8; }
.cal-now-lbl { font-size: 11px; letter-spacing: .12em; color: #b34f00; font-weight: 700; }
.cal-now b { color: #b34f00; }
.brief-close { border: none; background: #eef0f4; width: 36px; height: 36px; border-radius: 999px; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted); }
.brief-close:hover { background: #dfe3ea; color: var(--text); }
.tg-help { background: #f6f8fb; border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin-bottom: 12px; }
.tg-help h3 { margin: 0 0 6px; font-size: 15px; }

/* ===== build 18: call-log timeline ===== */
.tl.log { display: flex; flex-direction: column; gap: 8px; }
.log-entry { border-left: 5px solid var(--c); background: #fafbfd; border-radius: 0 8px 8px 0; padding: 8px 12px; }
.log-head { font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.log-who { color: var(--c); font-weight: 800; font-size: 14px; letter-spacing: .01em; }
.log-sep { color: var(--muted); }
.log-when { color: var(--muted); }
.log-label { color: var(--muted); font-style: italic; }
.log-body { margin-top: 3px; font-size: 14.5px; }
.log-entry.mine { background: #fff; border-left-width: 6px; box-shadow: inset 0 0 0 1px var(--c); }
.log-entry.mine .log-body { font-weight: 700; }
.log-entry.mine .log-when { font-weight: 600; color: var(--text); }
.badge.you { background: var(--c); color: #fff; font-size: 10px; }
.tl-activity { border-left: 3px solid var(--c); padding-left: 8px; }
.task-note, .task-edit { display: inline-block; }
.task-note-form { display: flex; gap: 6px; margin-top: 6px; }
.task-note-form textarea { flex: 1; }

/* ===== build 19: operational clock, attachments, my colour ===== */
.opclock { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: -6px 0 14px; padding: 8px 18px; background: var(--ink); color: #fff; border-radius: 10px; }
.opclock-lbl { font-size: 11px; letter-spacing: .18em; color: rgba(255,255,255,.65); font-weight: 700; }
.opclock-time { font-size: 34px; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; line-height: 1; }
.opclock-time small { font-size: 16px; font-weight: 700; margin-left: 4px; }
.opclock-date { font-size: 14px; color: rgba(255,255,255,.8); }
body.presence-in .opclock { box-shadow: inset 0 -4px 0 var(--presence); } body.presence-out .opclock { box-shadow: inset 0 -4px 0 var(--presence); }
.att-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.att-btn { cursor: pointer; }
.att-queue { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; }
.att-q { display: grid; grid-template-columns: 1fr 220px 220px; gap: 8px; align-items: center; background: #f6f8fb; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 13px; }
.att-q select.err { border-color: #d6333a; box-shadow: 0 0 0 3px #fdd; }
.att-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.att { display: flex; flex-direction: column; gap: 3px; width: 150px; text-decoration: none; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: #fff; }
.att img { width: 100%; height: 100px; object-fit: cover; border-radius: 5px; }
.att-ico { font-size: 40px; text-align: center; height: 100px; line-height: 100px; background: #f3f5f9; border-radius: 5px; }
.att-label { font-weight: 700; font-size: 12.5px; line-height: 1.2; }
.att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-wrap { display: flex; flex-direction: column; gap: 3px; }
.linkish { background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; font-size: inherit; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.swatch { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 14px 6px 8px; cursor: pointer; font-weight: 600; font-size: 13px; }
.swatch i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); display: inline-block; }
.swatch.sel { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, white); }
.swatch.taken { opacity: .45; cursor: not-allowed; } .swatch small { color: var(--muted); font-weight: 400; }
.swatch-now { color: #fff; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }

/* ===== build 20: clock under the logo, task details, away panel ===== */
.sidebar .opclock { margin: 4px 14px 6px; padding: 8px 12px; flex-direction: column; align-items: flex-start; gap: 2px; background: #2a2200; border: 2px solid #ffd400; border-radius: 10px; }
.sidebar .opclock-lbl { color: #ffd400; font-size: 9.5px; letter-spacing: .14em; }
.sidebar .opclock-time { color: #ffe033; font-size: 30px; }
.sidebar .opclock-time small { color: #ffe033; font-size: 13px; }
.sidebar .opclock-date { color: #ffe97a; font-size: 11.5px; }
body.presence-in .opclock, body.presence-out .opclock { box-shadow: none; }
.task-add, .task-edit-form { grid-template-columns: repeat(5, 1fr) auto !important; }
.task-add .task-title-in, .task-edit-form .task-title-in { grid-column: 1 / -1; font-weight: 600; }
.task-add .task-desc-in, .task-edit-form .task-desc-in { grid-column: 1 / -1; width: 100%; resize: vertical; }
.task-desc { font-size: 13.5px; color: var(--text); margin: 2px 0 4px; white-space: pre-wrap; }
.task-link { margin-left: 6px; font-style: normal; font-weight: 600; }
.card.away { border: 2px solid #ffd400; background: #fffdf0; }
.card.away .brief-list li { border-left: 4px solid var(--c); padding-left: 8px; }
/* build 20.1: on short windows the sidebar column was squeezing the IN/OUT buttons to nothing — fixed items keep their size, the menu scrolls */
.sidebar .brand, .sidebar .opclock, .sidebar .presence, .sidebar-user { flex-shrink: 0; }
.sidebar nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.sidebar .presence button { line-height: 1.2; padding: 7px 0; }

/* build 21: half-hour finish slots */
.clock { gap: 6px; }
.clock-h { padding: 8px 12px; font-size: 14px; }
.clock-h.half { font-weight: 500; font-size: 13px; padding: 8px 10px; border-style: dashed; }
.clock-h.half.on { border-style: solid; }

/* ===== build 21.1: tasks in the log colour scheme; tighter ticket page ===== */
.task { border: 1px solid var(--line); border-left: 5px solid var(--c); border-radius: 0 8px 8px 0; background: #fafbfd; padding: 8px 12px; margin-bottom: 8px; grid-template-columns: auto 1fr auto auto; }
.task.mine { background: #fff; border-left-width: 6px; box-shadow: inset 0 0 0 1px var(--c); }
.task.mine .task-title, .task.mine .task-desc { font-weight: 700; }
.task.done { opacity: .7; }
.task .task-meta { margin-top: 2px; font-size: 12.5px; }
.task .log-who { font-size: 13px; }
.task-note, .task-edit { display: inline-block; margin-top: 0; }
.task-note summary, .task-edit summary { padding: 3px 10px; }
.task-note-form { margin-top: 6px; } .task-note-form textarea { min-height: 34px; }
.comment-form { gap: 4px; align-items: stretch; }
.comment-form textarea { margin: 0; }
.note-bar { display: flex; align-items: center; gap: 10px; }
.note-bar .btn-primary { margin-left: auto; }
.att-queue { margin-top: 4px; }
#timeline .tl.log { margin-top: 10px; }
.col-side .card { padding: 12px 16px; margin-bottom: 10px; }
.col-side .card h2, .col-side .card-head { margin-bottom: 6px; }
.col-side .card p, .col-side .card .muted.small { margin: 2px 0; }
.col-side .card label { margin-bottom: 6px; }
.col-side .card label > span, .col-side .card .lbl { margin-bottom: 2px; }
.col-side .card input, .col-side .card select { padding: 6px 9px; }
.col-side .card .btn-primary { margin-top: 4px; }
.card { padding: 14px 18px; margin-bottom: 12px; }

/* ===== build 21.2: customer in the banner; timeline tools on the header row ===== */
.head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.head-customer { text-align: right; }
.hc-name { font-size: 20px; font-weight: 800; color: var(--text); text-decoration: none; line-height: 1.2; }
a.hc-name:hover { text-decoration: underline; }
.hc-contact { font-size: 13px; color: var(--muted); margin-top: 2px; }
.tl-head { margin-bottom: 6px; }
.tl-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl-tools .small { margin-left: 6px; }
#timeline .tl.log { margin-top: 8px; }

/* build 21.3: system activity as one block under the note box */
.tl-sys { border: 1px dashed var(--line); border-radius: 8px; padding: 8px 12px; margin: 4px 0 10px; background: #f8f9fc; max-height: 260px; overflow-y: auto; }
.tl-sys-head { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.tl-sys .tl-activity { padding: 2px 8px; border-left-width: 3px; }
.tl-sys .tl-activity.hidden { display: block; }

/* ===== build 22: RingCentral ===== */
.call-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-left: 5px solid var(--c); border-radius: 0 8px 8px 0; padding: 8px 12px; margin-bottom: 8px; background: #fafbfd; }
.call-head { font-size: 13px; } .call-line { font-weight: 600; margin: 2px 0; }
.call-attach { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.call-attach select, .call-attach input { padding: 5px 7px; font-size: 13px; width: auto; }
.log-entry.log-call { background: #f3faf5; }
.nav-count { background: #ff7a00; color: #fff; border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 700; margin-left: 6px; }
.integrations textarea { width: 100%; font-family: var(--mono); font-size: 12px; }
@media (max-width: 1100px) { .call-row { grid-template-columns: 1fr; } }

/* build 23: browser phone screen pop */
#rc-pop { position: fixed; right: 90px; bottom: 24px; z-index: 9999; max-width: 340px; }
#rc-pop .rc-pop-in { background: #10233c; color: #fff; border-radius: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.5; box-shadow: 0 10px 30px rgba(0,0,0,.35); border-left: 6px solid #ff7a00; animation: rcpop .25s ease; }
#rc-pop a { color: #7fd4a3; font-weight: 700; }
@keyframes rcpop { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ===== build 24: attach flow, texting, gates ===== */
.call-row .span-all { grid-column: 1 / -1; }
.call-pick { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.pick-save { border: 1px solid #ffd48a; background: #fff9ee; border-radius: 8px; padding: 8px 12px; }
.pick-save legend { font-weight: 700; font-size: 13px; padding: 0 6px; }
.pick-save .check-row { margin: 3px 0; }
.pick-ticket { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pick-ticket select { max-width: 380px; }
.call-row.mine { box-shadow: inset 0 0 0 1px var(--c); background: #fff; }
.call-row.is-sms .call-line { font-weight: 500; }
.badge.you-badge { background: var(--accent); color: #fff; }
.rc-wait { border: 2px solid #ff7a00; }
.log-entry.log-sms { background: #f2f7ff; }
.sms-box { margin-top: 6px; }
.sms-box summary { cursor: pointer; color: var(--accent-ink); font-weight: 600; font-size: 13.5px; }
.sms-form { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.sms-form input[name=body] { flex: 1; min-width: 240px; }
.t30-banner { background: #2a2200; color: #ffe033; border: 2px solid #ffd400; border-radius: 10px; padding: 10px 16px; margin-bottom: 14px; font-weight: 600; }
.t30-banner a { color: #ffd400; text-decoration: underline; }
/* pick-save rows: keep the radio and its text together on the left */
.pick-save .check-row { display: flex !important; justify-content: flex-start; align-items: baseline; gap: 8px; text-align: left; }
.pick-save .check-row > span { flex: 1; text-align: left; }
.pick-save .check-row input[type=radio] { flex: 0 0 auto; }
.pick-save .check-row input[type=text], .pick-save .check-row input:not([type]), .pick-save .check-row select { display: inline-block; width: auto; padding: 4px 8px; margin: 0 4px; }
.pick-save .check-row input[type=radio] { width: 16px; height: 16px; align-self: center; }
.pick-save .check-row span { display: inline; }
.pick-save .check-row input[name=line_label], .pick-save .check-row input[name=first_name], .pick-save .check-row input[name=last_name] { width: auto; }

/* ===== build 25: admin activity dashboard ===== */
.adm-filter { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.adm-filter label { min-width: 150px; }
.adm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.adm-tile { display: block; border: 1px solid var(--line); border-left: 5px solid var(--c); border-radius: 10px; padding: 10px 12px; text-decoration: none; color: var(--text); background: #fff; }
.adm-tile:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.adm-tile-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.adm-tile-head b { font-size: 20px; }
.adm-tile-kinds { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.adm-chip { display: inline-block; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: #eef1f6; color: #333; text-decoration: none; white-space: nowrap; }
.adm-chip b { font-weight: 700; }
.adm-created { background: #e2f5e5; } .adm-resolved { background: #d9f2dc; color: #14691f; }
.adm-note { background: #fff3d6; } .adm-text { background: #ddebff; } .adm-call { background: #e8ddff; }
.adm-task { background: #ffe3ef; } .adm-status { background: #e0f4f7; } .adm-assign { background: #f2e6d9; }
.adm-sched { background: #e6ecff; } .adm-edit { background: #ececec; } .adm-attach { background: #f0e8ff; } .adm-alert { background: #ffe0d6; }
.adm-hours { display: flex; align-items: flex-end; gap: 3px; height: 74px; padding-top: 4px; }
.adm-hour { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; }
.adm-hour .adm-bar { width: 100%; max-width: 26px; background: var(--accent); border-radius: 3px 3px 0 0; opacity: .85; }
.adm-hour span { font-size: 10px; color: var(--muted); height: 12px; }
.adm-table td { vertical-align: top; }
.nowrap { white-space: nowrap; }

/* ===== build 26: note + one-entry close on the attach panel ===== */
.pick-note { width: 100%; }
.pick-close { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px; width: auto; }
.pick-close span { color: var(--muted); font-size: 13px; }
.pick-close select { width: auto; }

/* ===== build 27: per-agent app phone, rich pop, file banner, consolidation ===== */
.nav-phone-form { margin: 2px 10px; }
.nav-phone { width: 100%; text-align: left; border-radius: 8px; padding: 7px 10px; font-size: 13px; cursor: pointer; border: 2px solid transparent; }
.nav-phone.is-off { background: #ff7a00; color: #fff; }
.nav-phone.is-on { background: #ffd400; color: #201a00; border-color: #b89a00; }
.nav-phone b { font-weight: 800; }
.rc-tile { display: block !important; border-radius: 12px; padding: 14px 16px; margin: 6px 0 14px; cursor: pointer; background: #ff7a00; color: #fff; font-weight: 600; border: 3px solid transparent; }
.rc-tile input { display: none; }
.rc-tile .rc-tile-yes { display: none; }
.rc-tile.is-on, .rc-tile:has(input:checked) { background: #ffd400; color: #201a00; border-color: #b89a00; }
.rc-tile:has(input:checked) .rc-tile-yes { display: inline; }
.rc-tile:has(input:checked) .rc-tile-no { display: none; }
.rc-tile:not(:has(input:checked)) { background: #ff7a00; color: #fff; }
.rc-tile:not(:has(input:checked)) .rc-tile-yes { display: none; }
.rc-tile:not(:has(input:checked)) .rc-tile-no { display: inline; }
#rc-pop { position: fixed; right: 18px; bottom: 84px; z-index: 260; width: 330px; background: #1d2433; color: #fff; border-radius: 14px; box-shadow: 0 10px 34px rgba(0,0,0,.45); padding: 14px 16px; font-size: 13.5px; }
#rc-pop.hidden { display: none; }
#rc-pop a { color: #7fc4ff; text-decoration: none; }
#rc-pop .muted { color: #9aa3b5; }
.rc-pop-x { position: absolute; top: 6px; right: 10px; background: none; border: 0; color: #9aa3b5; font-size: 18px; cursor: pointer; }
.rc-pop-co { color: #c8d0e0; }
.rc-pop-tix { margin: 8px 0 2px; line-height: 1.5; }
.rc-pop-last { margin-top: 6px; color: #9aa3b5; font-size: 12.5px; border-top: 1px solid #333c50; padding-top: 6px; }
.rc-pop-due { margin-top: 6px; color: #ffd27f; }
.rc-pop-btns { display: flex; gap: 8px; margin-top: 10px; }
.rc-btn { flex: 1; text-align: center; background: #2c3650; border-radius: 8px; padding: 7px 6px; font-weight: 600; }
.rc-btn-new { background: #1f7a3d; color: #fff !important; }
.rc-file-banner { background: #fff9e6; border: 2px solid #ffd400; border-radius: 10px; padding: 10px 14px; margin: 8px 0 4px; font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rc-file-body { font-style: italic; color: #555; }
.log-entry { position: relative; }
.consol-box { position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; }
.consol-bar { display: flex; gap: 10px; align-items: center; background: #eef6ff; border: 1px solid #9ec9f0; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.consol-bar.hidden { display: none; }
.consol-bar input[name=summary] { flex: 1; min-width: 220px; }
.consol-count { font-weight: 700; white-space: nowrap; }

/* ===== build 28: phone tile matches the operational-time box; story-so-far pop ===== */
.nav-phone-form, .nav-phone { display: none; }
.phone-tile-form { margin: 0 14px 6px; }
.phone-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 8px 12px; border-radius: 10px; cursor: pointer; background: #2a2200; text-align: left; }
.phone-tile-lbl { font-size: 9.5px; letter-spacing: .14em; font-weight: 700; }
.phone-tile-state { font-size: 24px; font-weight: 800; line-height: 1.05; }
.phone-tile-sub { font-size: 11px; opacity: .85; }
.phone-tile.is-on { border: 2px solid #ffd400; }
.phone-tile.is-on .phone-tile-lbl, .phone-tile.is-on .phone-tile-state, .phone-tile.is-on .phone-tile-sub { color: #ffe033; }
.phone-tile.is-off { border: 2px solid #ff7a00; background: #241300; }
.phone-tile.is-off .phone-tile-lbl, .phone-tile.is-off .phone-tile-state, .phone-tile.is-off .phone-tile-sub { color: #ff9a40; }
.rc-pop-hist { color: #b9c2d4; font-size: 12px; margin: 1px 0 5px 8px; }
.rc-pop-hist.hidden, .rc-pop-closed.hidden { display: none; }
.rc-pop-closed { margin-top: 8px; border-top: 1px solid #333c50; padding-top: 6px; line-height: 1.5; }
.rc-pop-sec { display: block; font-size: 10.5px; letter-spacing: .12em; color: #9aa3b5; font-weight: 700; margin-bottom: 3px; }
.rc-pop-story { width: 100%; margin-top: 8px; background: none; border: 1px dashed #4a5670; color: #aeb8cc; border-radius: 8px; padding: 5px; cursor: pointer; font-size: 12.5px; }
.rc-pop-story:hover { color: #fff; border-color: #7fc4ff; }

/* ===== build 28.1: clock + phone as one tile ===== */
.phone-tile-form, .phone-tile { display: none; }
.phone-inline-form { width: 100%; margin-top: 6px; }
.phone-inline { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 6px 0 0; background: none; border: 0; border-top: 1.5px dashed rgba(255,212,0,.55); cursor: pointer; text-align: left; }
.phone-inline .phone-tile-state { font-size: 22px; font-weight: 800; line-height: 1.05; }
.phone-inline.is-on .phone-tile-lbl, .phone-inline.is-on .phone-tile-state, .phone-inline.is-on .phone-tile-sub { color: #ffe033; }
.phone-inline.is-off { border-top-color: rgba(255,122,0,.6); }
.phone-inline.is-off .phone-tile-lbl, .phone-inline.is-off .phone-tile-state, .phone-inline.is-off .phone-tile-sub { color: #ff9a40; }
.phone-inline:hover .phone-tile-state { text-decoration: underline; }

/* ===== build 28.2: compact phone row in the tile ===== */
.phone-inline { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding-top: 5px; margin-top: 2px; }
.phone-inline .phone-tile-state { font-size: 16px; }
.phone-inline .phone-tile-lbl { font-size: 9px; }
.phone-tile-sub { display: none; }

/* ===== build 28.3: slimmer clock tile ===== */
.sidebar .opclock { padding: 6px 12px 7px; }
.sidebar .opclock-time { font-size: 26px; }
.sidebar .opclock-date { font-size: 12.5px; }

/* ===== build 29: welcome-back phone question ===== */
.rc-ask-card { max-width: 460px; text-align: center; }
.rc-ask-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.rc-ask-btns button { border: 3px solid transparent; border-radius: 12px; padding: 14px; font-size: 15.5px; font-weight: 700; cursor: pointer; }
.rc-ask-yes { background: #ffd400; color: #201a00; border-color: #b89a00 !important; }
.rc-ask-no { background: #ff7a00; color: #fff; }
.rc-ask-btns button:hover { filter: brightness(1.06); }
/* ===== build 29.1: divider line full-width, thicker, orange when ON ===== */
.phone-inline { width: calc(100% + 24px); margin: 3px -12px 0; padding: 6px 12px 0; border-top-width: 3px; }
.phone-inline.is-on { border-top-color: #ff7a00; }
.phone-inline.is-off { border-top-color: rgba(255,255,255,.25); }

/* ===== build 29.1: thicker tile line, orange outline when the phone is off ===== */
.sidebar .opclock { border-width: 3.5px; }
.sidebar .opclock.phone-off { border-color: #ff7a00; }
.phone-inline { border-top-width: 2.5px; }
.phone-inline { border-top-color: #ffd400; }
.phone-inline.is-off { border-top-color: #ff7a00; }

/* ===== build 29.2: the sidebar/content divider follows the phone state ===== */
body.phone-on .sidebar { box-shadow: inset -4px 0 0 #ffd400 !important; }
body.phone-off .sidebar { box-shadow: inset -4px 0 0 #ff7a00 !important; }

/* ===== build 30: divider green again; persistent phone strip; live status board ===== */
body.phone-on .sidebar, body.phone-off .sidebar { box-shadow: inset -4px 0 0 var(--presence) !important; }
.phone-strip { display: flex; align-items: center; gap: 12px; border-radius: 10px; padding: 8px 16px; margin-bottom: 12px; font-weight: 700; font-size: 13.5px; }
.phone-strip.on { background: #e6f6ec; border: 2px solid #1f9d55; color: #14691f; }
.phone-strip.off { background: #fff1e2; border: 2px solid #ff7a00; color: #a34a00; }
.phone-strip form { margin-left: auto; }
.phone-strip .btn { padding: 3px 12px; }
.status-board { display: flex; flex-wrap: wrap; gap: 8px; }
.status-pill { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-left: 5px solid var(--c); border-radius: 999px; padding: 5px 14px 5px 10px; background: #fff; font-size: 13px; }
.status-pill .log-who { font-weight: 700; }
.sp-in { color: #14691f; font-weight: 700; }
.sp-out { color: #b42318; font-weight: 700; }
.sp-app-yes { background: #e6f6ec; color: #14691f; border-radius: 999px; padding: 1px 9px; font-weight: 700; }
.sp-app-no { background: #fff1e2; color: #a34a00; border-radius: 999px; padding: 1px 9px; font-weight: 700; }
.sp-last { color: var(--muted); font-size: 12px; }

/* ===== build 30.1: one tight status strip ===== */
.phone-strip { padding: 4px 12px; margin-bottom: 10px; font-size: 12.5px; gap: 8px; flex-wrap: wrap; }
.phone-strip .btn { padding: 1px 10px; font-size: 12px; }
.ps-me { white-space: nowrap; }
.ps-toggle { margin-left: 0 !important; }
.ps-sep { flex: 0 0 1px; align-self: stretch; background: currentColor; opacity: .35; }
.ps-team { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-weight: 600; }
.ps-agent { color: var(--c); white-space: nowrap; }
.ps-agent.is-out { opacity: .5; font-weight: 500; }
.ps-yes, .ps-no, .ps-off { font-weight: 700; font-size: 11.5px; }
.ps-off { color: #8d94a5; }
/* admin board: tighter pills */
.status-pill { padding: 2px 10px 2px 7px; font-size: 12px; gap: 6px; }
.status-board { gap: 5px; }

/* ===== build 31: call from ticket + wrap-up ===== */
.call-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.call-btns a { text-decoration: none; }
.rc-wrap { display: flex; flex-direction: column; gap: 7px; margin-top: 9px; }
.rc-wrap select, .rc-wrap input, .rc-wrap textarea { width: 100%; background: #2c3650; border: 1px solid #45516e; color: #fff; border-radius: 8px; padding: 6px 9px; font-size: 12.5px; }
.rc-wrap .hidden { display: none; }
.rc-wrap-done { font-weight: 700; margin-top: 8px; }

/* ===== build 32: bulk attach on the calls page ===== */
.call-row { position: relative; }
.call-row .bulk-box { position: absolute; top: 12px; left: -2px; width: 16px; height: 16px; }
.call-row .call-main { margin-left: 22px; }
.bulk-bar { display: flex; gap: 10px; align-items: center; background: #eef6ff; border: 1px solid #9ec9f0; border-radius: 10px; padding: 7px 12px; margin: 8px 0; }
.bulk-bar.hidden { display: none; }
.bulk-count { font-weight: 700; white-space: nowrap; }
.bulk-include { background: #eef6ff; border: 1px solid #9ec9f0; border-radius: 8px; padding: 6px 10px; }
.bulk-include input { width: 16px !important; height: 16px; }

/* ===== build 32.1: rename the ticket from its heading ===== */
.t-rename-btn { font-size: 15px; opacity: .5; }
h1:hover .t-rename-btn { opacity: 1; }
.t-rename-form { display: flex; gap: 8px; align-items: center; margin: 2px 0 6px; }
.t-rename-form.hidden, #t-title.hidden { display: none; }
.t-rename-form input[name=title] { min-width: 340px; font-size: 17px; font-weight: 700; }

/* ===== build 33: multi-site contacts ===== */
.site-chip { display: inline-block; background: #e6f6ec; border: 1px solid #bfe5cb; color: #14691f; border-radius: 999px; padding: 0 8px; font-size: 11.5px; font-weight: 700; }
.site-btns { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.clone-box { position: relative; }
.clone-box summary { list-style: none; cursor: pointer; }
.clone-panel { position: absolute; right: 0; top: 42px; z-index: 40; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 26px rgba(0,0,0,.14); padding: 12px 14px; width: 380px; }
.clone-form { display: flex; gap: 6px; flex-wrap: wrap; }
.clone-form input[name=customer_name] { flex: 1; min-width: 180px; }

/* ===== build 34: ticket chips + move an entry ===== */
.tk-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-left: 10px; }
.tk-chip { border: 1.5px solid #bfe5cb; background: #f2faf4; color: #14691f; border-radius: 999px; padding: 2px 11px; font-size: 12px; font-weight: 700; cursor: pointer; }
.tk-chip:hover { background: #e6f6ec; }
.tk-chip.active { background: #1f9d55; color: #fff; border-color: #157a40; }
.cm-move { margin-top: 4px; font-size: 12px; }
.cm-move summary { color: var(--muted); cursor: pointer; list-style: none; display: inline; }
.cm-move summary:hover { color: var(--accent-ink); }
.cm-move-form { display: flex; gap: 6px; margin-top: 4px; align-items: center; }

/* ===== build 35: tabs on the calls page ===== */
.calls-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.calls-tabs a { padding: 6px 16px; border-radius: 9px 9px 0 0; border: 1px solid var(--line); border-bottom: 0; background: #f3f5f8; color: var(--muted); font-weight: 700; text-decoration: none; font-size: 13.5px; }
.calls-tabs a.active { background: #fff; color: var(--text); border-color: #1f9d55; box-shadow: inset 0 3px 0 #1f9d55; }
.calls-tabs .mono { font-weight: 600; opacity: .75; }
.call-row .re-box { position: absolute; top: 12px; left: -2px; width: 16px; height: 16px; }

/* ===== build 37: photos on texts ===== */
.sms-photo { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.sms-photo input[type=file] { width: auto; font-size: 12px; padding: 3px; }
.sms-photo select { width: auto; max-width: 220px; }

/* ===== build 38: voice assistant ===== */
#voice-btn { position: fixed; right: 18px; bottom: 18px; z-index: 250; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; font-size: 23px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
#voice-btn.listening { background: #d0342c; animation: vpulse 1s infinite; }
@keyframes vpulse { 50% { transform: scale(1.12); } }
#voice-panel { position: fixed; right: 18px; bottom: 80px; z-index: 251; width: 380px; max-width: calc(100vw - 30px); background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.25); padding: 12px 14px; }
#voice-panel.hidden { display: none; }
.vp-head { display: flex; align-items: center; gap: 10px; font-weight: 800; margin-bottom: 6px; }
.vp-voice { font-size: 11.5px; font-weight: 600; color: var(--muted); display: flex; gap: 4px; align-items: center; margin-left: auto; }
.vp-voice input { width: 14px; height: 14px; }
.vp-x { background: none; border: 0; font-size: 20px; color: var(--muted); cursor: pointer; }
.vp-log { max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.vp-line { border-radius: 10px; padding: 7px 11px; font-size: 13px; line-height: 1.35; }
.vp-you { background: #eef6ff; align-self: flex-end; max-width: 90%; }
.vp-crm { background: #f2faf4; border: 1px solid #cfe9d8; align-self: flex-start; max-width: 95%; }
.vp-crm a { font-weight: 700; }
.vp-confirm { display: flex; gap: 8px; margin-bottom: 8px; }
.vp-confirm.hidden { display: none; }
.vp-form { display: flex; gap: 6px; }
.vp-form input { flex: 1; }
.vp-hint { font-size: 11px; color: var(--muted); margin-top: 7px; line-height: 1.4; }
/* build 38.3: dictate-until-done */
.vp-donebar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.vp-donebar.hidden { display: none; }
.vp-listening { color: #d0342c; font-weight: 700; font-size: 12.5px; animation: vblink 1.2s infinite; }
@keyframes vblink { 50% { opacity: .45; } }

/* ===== build 39: the caller-ID queue ===== */
.rc-queue { border: 2px solid #f0b429; background: #fffdf4; }
.tq-row { padding: 4px 2px; }
.tq-row input { width: 16px !important; height: 16px; }
.tq-actions { margin-top: 8px; display: flex; gap: 12px; align-items: center; }
.tq-pop { position: fixed; right: 18px; bottom: 84px; z-index: 240; background: #1d2434; color: #fff; border: 2px solid #f0b429; border-radius: 12px; padding: 10px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.35); font-size: 13.5px; display: flex; gap: 8px; align-items: center; }
.tq-pop a { color: #ffd400; font-weight: 700; }
.tq-pop .tq-x { background: none; border: 0; color: #8d94a5; font-size: 17px; cursor: pointer; }
.queue-suggest { border: 2px solid #f0b429; background: #fffdf4; border-radius: 10px; padding: 10px 12px; }
.queue-suggest.hidden { display: none; }
.queue-suggest legend { font-weight: 700; padding: 0 6px; }

/* ===== build 40: on-screen alerts ===== */
.toast-stack { position: fixed; top: 14px; right: 16px; z-index: 300; display: flex; flex-direction: column; gap: 8px; width: 360px; max-width: calc(100vw - 28px); }
.toast { background: #1d2434; color: #eef1f7; border: 1px solid #3a466b; border-left: 5px solid #ffd400; border-radius: 12px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); font-size: 13px; }
.toast-new { animation: toastin .35s ease; }
@keyframes toastin { from { transform: translateY(-12px); opacity: 0; } }
.toast-head { display: flex; gap: 8px; align-items: baseline; }
.toast-head b { flex: 1; font-size: 13.5px; }
.toast-at { color: #8d94a5; font-size: 11px; white-space: nowrap; }
.toast-x { background: none; border: 0; color: #8d94a5; font-size: 17px; cursor: pointer; line-height: 1; }
.toast-body { margin-top: 4px; color: #c6cddc; line-height: 1.4; max-height: 110px; overflow: hidden; }
.toast-open { display: inline-block; margin-top: 6px; color: #ffd400; font-weight: 700; }
.toast-clear { align-self: flex-end; background: #2c3650; color: #c6cddc; border: 1px solid #45516e; border-radius: 999px; padding: 3px 12px; font-size: 12px; cursor: pointer; }

/* build 40.1: desktop-alert offer */
.toast-offer { border-left-color: #1f9d55; }

/* ===== build 41: quotes ===== */
.q-lines input, .q-lines select { width: 100%; }
.q-lines .q-num { width: 90px; }
.q-right { text-align: right; }
.q-totals { margin-top: 12px; margin-left: auto; max-width: 320px; display: flex; flex-direction: column; gap: 4px; }
.q-totals div { display: flex; justify-content: space-between; }
.q-totals .q-grand { border-top: 2px solid var(--line); padding-top: 5px; font-size: 16px; }
.q-dep { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.q-dep input[type=number] { width: 140px; }
.badge.q-draft { background: #eef1f5; color: #5b6472; }
.badge.q-sent { background: #eef6ff; color: #1256a0; border: 1px solid #9ec9f0; }
.badge.q-viewed { background: #fff8e0; color: #8a6d00; border: 1px solid #ecd68a; }
.badge.q-accepted { background: #e6f6ec; color: #14691f; border: 1px solid #bfe5cb; }
.badge.q-declined, .badge.q-expired { background: #fdecec; color: #b42318; border: 1px solid #f3b6b0; }
.q-strip { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.q-strip .badge { text-decoration: none; font-size: 12.5px; padding: 4px 12px; }
.q-block { background: #fff1e2; border: 2px solid #ff7a00; color: #a34a00; border-radius: 9px; padding: 5px 12px; font-weight: 700; font-size: 12.5px; }
.rc-blocked { color: #ffb74d; font-size: 11.5px; }
.actions-cell { white-space: nowrap; }

.q-notax { display: block; margin-top: 2px; }
#sendcard textarea { font-size: 13.5px; }

/* build 43: invoices */
.badge.i-unpaid { background: #fff4e0; color: #8a5a00; border: 1px solid #ecd18a; }
.badge.i-partial { background: #eef6ff; color: #1256a0; border: 1px solid #9ec9f0; }
.badge.i-paid { background: #e6f6ec; color: #14691f; border: 1px solid #bfe5cb; }
.badge.i-overdue { background: #fdecec; color: #b42318; border: 1px solid #f3b6b0; }
.i-bal-due b { color: #b42318; }
.i-bal-zero b { color: #14691f; }
.i-due-red { color: #b42318; font-weight: 700; }
.count-badge.cb-red { background: #b42318; }

.badge.q-dismissed { background: #f2eef5; color: #6b5b72; border: 1px solid #d5c8db; }
.q-history { margin-bottom: 14px; }
.q-history td { vertical-align: top; }
.badge.tk-equipment { background: #eef1f5; color: #45506b; }
.badge.tk-labor { background: #e8f2fb; color: #1b5e94; border: 1px solid #b7d7ee; }
.badge.tk-nontax { background: #f0f0ec; color: #6d6d5e; border: 1px dashed #c9c9b8; }

/* build 46: zoho ticket archive tiles */
.ta-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ta-tile { border: 1px solid var(--line, #dde4df); border-radius: 11px; background: #fbfcfb; overflow: hidden; }
.ta-tile summary { list-style: none; cursor: pointer; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.ta-tile summary::-webkit-details-marker { display: none; }
.ta-tile[open] { grid-column: 1 / -1; background: #fff; box-shadow: 0 2px 8px rgba(20, 40, 30, .08); }
.ta-sub { font-weight: 650; font-size: 13.5px; line-height: 1.25; }
.ta-meta { display: flex; gap: 8px; align-items: center; font-size: 11.5px; flex-wrap: wrap; }
.ta-body { padding: 2px 14px 12px; font-size: 13px; border-top: 1px dashed #e4e9e5; }
.badge.ta-closed { background: #eef1f5; color: #5b6472; }
.badge.ta-open { background: #e6f6ec; color: #14691f; }
.badge.ta-onsite { background: #fff4e0; color: #8a5a00; }
.badge.ta-phoneschedule { background: #eef6ff; color: #1256a0; }
.badge.ta-charge { background: #fdecec; color: #b42318; }
.badge.ta-onhold { background: #f2eef5; color: #6b5b72; }

/* build 51: card residuals */
.dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.dash-card { background: #fff; border: 1px solid var(--line, #dde4df); border-radius: 12px; padding: 14px 16px; }
.dash-num { font-size: 21px; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-label { font-size: 12px; color: #67746b; margin-top: 3px; }
.badge.rz-paycreate { background: #e6f6ec; color: #0f6a2f; border: 1px solid #bfe6cd; }
.badge.rz-pcpartner { background: #e9f1fb; color: #1c5aa0; border: 1px solid #c5d9f1; }

/* build 57: calls and texts read as different species */
.log-entry.log-sms { border-left: 5px solid #4f6fd8 !important; background: #f3f6ff; position: relative; }
.log-entry.log-call { border-left: 5px solid #1d8a4a !important; background: #eefaf2; position: relative; }
.log-entry.log-sms::after, .log-entry.log-call::after { position: absolute; top: 8px; right: 34px; font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; }
.log-entry.log-sms::after { content: "💬 TEXT"; background: #dfe7fb; color: #2b4bb3; }
.log-entry.log-call::after { content: "📞 CALL"; background: #d8f2e2; color: #106b38; }
.consol-box { position: absolute; top: 8px; right: 10px; width: 16px; height: 16px; accent-color: #1d8a4a; }
.log-entry.log-sms .consol-box { accent-color: #4f6fd8; }
.consol-bar { display: flex; gap: 8px; align-items: center; background: #fff8e6; border: 1px solid #e5c96b; border-radius: 10px; padding: 8px 10px; margin: 8px 0; flex-wrap: wrap; }
.consol-bar.hidden { display: none; }
.consol-bar input[name=summary] { flex: 1; min-width: 240px; }
.consol-count { font-weight: 700; font-size: 12.5px; }
#consol-all { margin: 4px 0 6px; }

/* build 58: vendor log */
.vlog-row { border-bottom: 1px dashed #e2e8e3; padding: 8px 2px; }
.vlog-row:last-child { border-bottom: 0; }
.vlog-line { font-size: 13.5px; }
.vlog-about { margin-top: 3px; color: #5c6b61; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* build 65: the description leads; open work screams from the side */
.open-now { border: 2px solid #e5a13b; background: linear-gradient(180deg, #fff8ea, #fffdf6); }
.open-now h2 { color: #8a5a00; }
.on-lab { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #8a5a00; margin: 10px 0 4px; }
.on-row { display: flex; gap: 7px; align-items: baseline; padding: 6px 8px; margin: 2px -4px; border-radius: 8px; text-decoration: none; color: inherit; }
.on-row:hover { background: #fdeecb; }
.on-ref { font-weight: 700; font-size: 12px; color: #7a4c00; white-space: nowrap; }
.on-title { font-weight: 600; font-size: 13.5px; flex: 1; }
.on-dot { color: #b8860b; font-weight: 700; }
.open-now .chip { font-size: 10px; }

/* build 68: one-click attach to an open ticket, right from the call log */
.quick-tix { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0 2px; }
.quick-tk { background: #e8f7ee; border: 1.5px solid #1d8a4a; color: #106b38; font-weight: 700; }
.quick-tk:hover { background: #1d8a4a; color: #fff; }

/* build 71: phone affordances */
.ph-acts { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.ph-dial, .ph-copy, .ph-ring { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; border: 1px solid #cfdcd3; background: #f2f7f3; font-size: 12.5px; cursor: pointer; text-decoration: none; color: #1d5b33; padding: 0; }
.ph-dial:hover, .ph-copy:hover, .ph-ring:hover { background: #1d8a4a; color: #fff; border-color: #1d8a4a; }
.ph-copy.copied { background: #1d8a4a; color: #fff; }
@media print { .ph-acts { display: none; } }

/* build 74: the update-waiting pulse + a slimmer ticket header */
.upd-flash { display: inline-block; background: #c62828; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 3px 8px; border-radius: 999px; margin-left: 8px; vertical-align: middle; animation: updpulse 1.15s ease-in-out infinite; }
@keyframes updpulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(198, 40, 40, .55); } 50% { opacity: .78; box-shadow: 0 0 0 6px rgba(198, 40, 40, 0); } }
.ev-unseen { outline: 2px solid #c62828; outline-offset: -2px; animation: updpulse 1.15s ease-in-out infinite; }
.ph-slim { padding-top: 8px; padding-bottom: 8px; }
.ph-slim h1 { font-size: 21px; margin: 2px 0; }
.ph-slim .crumbs { margin-bottom: 0; }
.ph-slim p.muted { margin: 2px 0 0; font-size: 12.5px; }
.ph-slim .head-customer { text-align: right; }
@media (prefers-reduced-motion: reduce) { .upd-flash, .ev-unseen { animation: none; } }

/* build 75: ticket header is exactly two lines — ref + title together on top */
.ph-line1 { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.ph-line1 .crumbs { white-space: nowrap; margin: 0; }
.ph-line1 h1 { margin: 0; font-size: 19px; line-height: 1.25; }
.ph-slim p.muted { margin-top: 3px; }

/* build 74.1: two-line header — customer on the crumb line, meta rides the title line */
.crumb-cust { font-weight: 700; }
.ph-slim .t-line { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ph-slim .t-line h1 { margin: 0; }
.ph-slim .t-meta { margin: 0; white-space: nowrap; }
@media (max-width: 960px) { .ph-slim .t-meta { white-space: normal; } }

.ph-line1 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ph-line1 .crumb-cust { font-size: 14px; }
.ph-line1 h1 { margin: 0; }
.ph-slim .t-meta { margin: 2px 0 0; }

/* build 75: the ticket screen packs tight */
.pg-ticket .card { padding: 10px 14px; margin-bottom: 8px; }
.pg-ticket .card h2 { margin: 0 0 6px; font-size: 13px; }
.pg-ticket .tl.log { gap: 5px; }
.pg-ticket .log-entry { padding: 5px 10px; }
.pg-ticket .log-entry p, .pg-ticket .log-entry .log-body { margin: 2px 0; }
.pg-ticket .log-head { margin-bottom: 1px; }
.pg-ticket textarea { min-height: 44px; }
.pg-ticket .composer textarea, .pg-ticket #note-body { min-height: 46px; }
.pg-ticket details.mini-send { margin: 2px 0; }
.pg-ticket .task-add input, .pg-ticket .task-add textarea { padding: 6px 9px; }
.pg-ticket .task-row { padding: 4px 6px; }
.pg-ticket dl.kv { margin: 4px 0; }
.pg-ticket dl.kv dt { margin-top: 4px; }
.pg-ticket .col-side .card p { margin: 4px 0; }
.pg-ticket .q-strip { margin: 4px 0 8px; }
.pg-ticket .cm-move, .pg-ticket .cm-fix { margin: 0; }
.pg-ticket .log-entry .linkish { padding: 0 2px; }
.pg-ticket .log-actions, .pg-ticket .log-entry form.inline { display: inline-block; margin-right: 8px; }

/* build 75.1: the header is one line, and short */
.ph-slim { padding-top: 6px; padding-bottom: 6px; }
.ph-line1 .crumb-cust { font-size: 13.5px; }
.ph-line1 .ph-acts { transform: scale(.9); }

.pg-ticket .page-head { align-items: center; }
.pg-ticket .head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.pg-ticket .head-right .head-customer, .pg-ticket .head-right .head-badges { display: flex; align-items: center; gap: 8px; margin: 0; }
.pg-ticket .head-right .hc-contact { display: inline-flex; margin: 0; }

/* one thin band, no wrapping */
.pg-ticket .page-head { padding: 6px 14px; }
.pg-ticket .ph-line1 { flex-wrap: nowrap; min-width: 0; }
.pg-ticket .ph-line1 h1 { font-size: 17px; white-space: normal; overflow-wrap: break-word; min-width: 0; flex: 1; }
.pg-ticket .ph-line1 .crumbs { white-space: nowrap; }
.pg-ticket .ph-line1 .crumb-cust { white-space: nowrap; }
.pg-ticket .head-right { flex-wrap: nowrap; }
.pg-ticket .head-badges .btn, .pg-ticket .head-badges .chip, .pg-ticket .head-badges select { padding: 3px 9px; font-size: 12px; }
@media (max-width: 1100px) { .pg-ticket .ph-line1 { flex-wrap: wrap; } .pg-ticket .ph-line1 h1 { white-space: normal; } }

/* build 76: tickets with more than one person on them */
tr.row.multi-crew td { border-top: 2px solid #7c4dbe; border-bottom: 2px solid #7c4dbe; }
tr.row.multi-crew td:first-child { border-left: 2px solid #7c4dbe; border-radius: 8px 0 0 8px; }
tr.row.multi-crew td:last-child { border-right: 2px solid #7c4dbe; border-radius: 0 8px 8px 0; }
.crew-names { font-size: 11px; color: #7c4dbe; font-weight: 700; margin-top: 2px; white-space: nowrap; }

/* build 80: on-site dispatch */
.onsite-chip { display: inline-block; background: #0b63b8; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; vertical-align: middle; }
.onsite-ck { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; white-space: nowrap; color: #0b63b8; font-weight: 700; }
.dispatch-band { border: 2px solid #0b63b8; }
.dispatch-band h2 { color: #0b63b8; }
.dispatch-band tr.row { cursor: pointer; }

/* build 81: on-site visits across the top of the calendar */
.cal-dispatch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 2px solid #0b63b8; background: #eef5fc; border-radius: 10px; padding: 7px 12px; margin-bottom: 10px; }
.disp-label { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: #0b63b8; white-space: nowrap; }
.disp-item { display: inline-block; background: #0b63b8; color: #fff; font-size: 12px; padding: 3px 10px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.disp-item:hover { background: #084b8c; }
.ev-onsite { outline: 2px solid #0b63b8; outline-offset: -2px; }

.disp-item .disp-owner { opacity: .85; font-weight: 400; }

/* build 82.1: calls page — quick-file buttons may never crush the call text */
.call-row { grid-template-columns: minmax(300px, 1fr) auto auto; }
.call-row .call-main { min-width: 0; }
.quick-tix { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; max-width: 520px; min-width: 0; }
.quick-tix .quick-tk { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1300px) { .quick-tix { max-width: 360px; } .quick-tix .quick-tk { max-width: 330px; } }
@media (max-width: 1100px) { .quick-tix { justify-content: flex-start; max-width: none; } }

/* build 83: primary tech + open-ticket notice on the screen pop */
.rc-pop-pt { color: #9fe0bb; font-size: 13px; }
.rc-pop-notice { background: #c62828; color: #fff; font-weight: 800; font-size: 11.5px; letter-spacing: .06em; border-radius: 7px; padding: 4px 9px; margin: 8px 0 4px; text-align: center; }
#tkhist { scroll-margin-top: 14px; }

/* build 83: arriving at the ticket history from a call pop lights it up briefly */
#tkhist:target { animation: tkhistflash 2.2s ease-out 1; }
@keyframes tkhistflash { 0% { box-shadow: 0 0 0 4px #0b63b8; } 100% { box-shadow: 0 0 0 0 rgba(11, 99, 184, 0); } }

/* build 84: scale calls */
.scale-badge { display: inline-block; background: #6d4c00; color: #ffd98a; font-size: 10px; font-weight: 800; letter-spacing: .07em; padding: 3px 8px; border-radius: 999px; vertical-align: middle; margin-left: 6px; }
.scale-card .inline { margin-right: 8px; }
.scale-rules { background: #fff6e8; border: 1px solid #eeda9c; border-radius: 8px; padding: 7px 10px; }

/* build 84.2: unbroken strings (long URLs) wrap inside their box at EVERY width, not just on phones */
.prose, .log-entry, .vlog-line, .tl.log, .task-desc, .task-title, .call-line, .call-main { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.log-entry a, .prose a { overflow-wrap: anywhere; word-break: break-all; }
.col-main, .col-side, .col-main .card, .col-side .card { min-width: 0; }

/* build 85: the pop-out phone */
.phone-popout { background: none; border: 1px dashed #c8893a; color: #ffc46b; border-radius: 7px; padding: 2px 8px; cursor: pointer; font-size: 13px; margin-top: 4px; }
.phone-popout:hover { background: #3a2a12; }

/* build 86.1: a long title wraps instead of being cut off */
.pg-ticket .ph-line1 { flex-wrap: wrap; row-gap: 2px; }

/* build 89: agent program */
.deal-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; margin: 6px 0; }
.deal-form label { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); gap: 2px; }
.linkish { background: none; border: none; color: #1f6b45; cursor: pointer; padding: 0; font: inherit; }
.linkish.danger { color: #a33; }