/* Staff console. Same design system as the customer panel, but red instead of blue, with a dark
   sidebar, so staff always know which side of Centrx they're on. */

/* ---------- Red accent (staff console only) ---------- */
body.staff {
  --accent: #DC2626;
  --accent-hover: #B91C1C;
  --accent-press: #991B1B;
  --accent-tint: #FEF2F2;
  --accent-tint-2: #FEE2E2;
  --accent-ring: rgba(220, 38, 38, .25);
  --rail-bg: #1A0B0E;
  /* The Centrx mark in the staff console's red (from the admin panel logo) */
  --mark-hi: #FB1D4E;
  --mark-lo: #BC1A03;
  --mark-lo2: #9B1604;
  /* The rebrand's blue palette and logo colors (tokens.css, layout.css), in red */
  --blue-900: #7A0E12;
  --blue-700: #B91C1C;
  --blue-500: #DC2626;
  --blue-400: #FB1D4E;
  --blue-300: #FCA5A5;
  --brand-gradient: linear-gradient(135deg, #FB1D4E 0%, #DC2626 45%, #7A0E12 100%);
  --brand-text: linear-gradient(90deg, #FB1D4E 0%, #DC2626 55%, #B91C1C 100%);
  --logo-hi: #FB1D4E;
  --logo-lo: #BC1A03;
  --logo-gradient: linear-gradient(140deg, #FB1D4E 0%, #DC2626 48%, #BC1A03 100%);
  --logo-soft: linear-gradient(140deg, #FEF2F2 0%, #FEE2E2 100%);
  /* Plain grays: the customer panel's are tinted blue */
  --surface: #F7F7F8;
  --surface-2: #F0F0F2;
  --border: #E5E5E8;
  --border-strong: #D1D1D6;
  --ink: #18181B;
  --ink-2: #3F3F46;
  --muted: #5F5F68;
  --faint: #73737C;
}
.ap-logo { display: block; width: auto; height: 30px; }
.staff-auth .auth-top { justify-content: flex-end; }
.staff-auth .auth-center { flex-direction: column; align-items: center; justify-content: flex-start; }
.ap-logo-lg { width: 100%; max-width: 360px; height: auto; margin: 0 auto 28px; }
.staff .toast svg, .staff .toast .link-btn { color: #FCA5A5; }
.staff .cenbot-design { box-shadow: 0 8px 20px -12px rgba(188, 26, 3, .7); }
.staff .pro-card { background: linear-gradient(140deg, #FFF7F7, #FEF2F2); }
.staff .btn-primary { box-shadow: 0 1px 2px var(--accent-ring); }
.staff .chart linearGradient stop { stop-color: var(--accent); }

/* ---------- Menu: dark icon rail + light page column ---------- */
.staff .app { grid-template-columns: auto minmax(0, 1fr); }
.staff .sidebar { flex-direction: row; align-items: stretch; padding: 0; border-right: 1px solid var(--border); background: var(--bg); }
.rail { width: 64px; flex: none; display: flex; flex-direction: column; align-items: center; padding: 14px 0 12px; background: var(--rail-bg); }
.rail-brand { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 10px; }
.rail-brand .brand-mark { width: 24px; height: 24px; }
.rail-nav { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rail-item, .rail-me { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 10px; background: transparent; color: #7E889C; text-decoration: none !important; transition: background var(--t), color var(--t); }
.rail-item:hover, .rail-me:hover { background: rgba(255,255,255,.07); color: #E8ECF3; }
.rail-item.active { background: rgba(239,68,68,.18); color: #fff; }
.rail-item.active svg { color: #FCA5A5; }
.rail-item.active::before { content: ""; position: absolute; left: -11px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: #EF4444; }
.rail-badge { position: absolute; top: 3px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--rail-bg); }
.rail-dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: #F79009; box-shadow: 0 0 0 2px var(--rail-bg); }
.rail-me { margin-top: 8px; }
.rail-me .avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.12); }
/* Name tooltip on hover or keyboard focus */
.rail-tip { position: absolute; left: calc(100% + 10px); top: 50%; transform: translate(-4px, -50%); z-index: 60; padding: 5px 9px; border-radius: 6px; background: #111827; color: #fff; font-size: 12.5px; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 120ms, transform 120ms; box-shadow: var(--shadow-pop); }
.rail-item:hover .rail-tip, .rail-item:focus-visible .rail-tip, .rail-me:hover .rail-tip { opacity: 1; transform: translate(0, -50%); }
.subnav { width: 216px; flex: none; display: flex; flex-direction: column; padding: 18px 12px; background: var(--surface); border-left: 1px solid var(--border); }
.subnav-head { padding: 0 8px 14px; }
.subnav-title { display: block; font-size: 15px; font-weight: 650; color: var(--ink); letter-spacing: -0.01em; }
.subnav-sub { display: block; margin-top: 1px; font-size: 12px; color: var(--faint); }
.subnav-list { display: flex; flex-direction: column; gap: 2px; }
.staff .subnav .nav-item { flex-direction: row; width: auto; height: 34px; gap: 10px; padding: 0 10px; justify-content: flex-start; border-radius: 8px; color: var(--ink-2); font-size: 13.5px; font-weight: 500; }
.staff .subnav .nav-item svg { color: var(--faint); }
.staff .subnav .nav-item:hover { background: rgba(16,24,40,.05); color: var(--ink); }
.staff .subnav .nav-item.active { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 0 0 1px rgba(16,24,40,.05); }
.staff .subnav .nav-item.active svg { color: var(--accent); }
.staff .subnav .nav-label { display: inline; font-size: inherit; line-height: inherit; text-align: left; }
.staff .subnav .nav-count { display: inline-block; margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; background: rgba(16,24,40,.07); color: var(--ink-2); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
@media (max-width: 1023px) and (min-width: 768px) { .subnav { width: 188px; } }
@media (max-width: 767px) {
  .staff .sidebar { width: auto; max-width: 300px; padding: 0; }
  .rail-tip { display: none; }
}
.me-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 10px; background: none; text-align: left; }

/* ---------- Top bar ---------- */
.bell-count { position: absolute; top: 4px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center; }
.appbar.urgent { background: var(--danger-tint); border-bottom-color: #FECDCA; color: var(--ink); }
.appbar.urgent svg { color: var(--danger); }
.notif-item.unread span:first-child { font-weight: 600; }

/* ---------- Shared bits ---------- */
.staff [hidden] { display: none !important; } /* components like .field set display, which would beat the attribute */
.avatar.xs { width: 20px; height: 20px; font-size: 9px; }
.av-wrap { position: relative; display: inline-flex; flex: none; }
.presence { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--bg); background: var(--faint); }
.presence.online { background: #12B76A; }
.presence.away { background: #F79009; }
.presence.deactivated { background: var(--border-strong); }
.avatar.lg + .presence { width: 13px; height: 13px; }
.sla { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.sla.soon { background: var(--warn-tint); color: var(--warn); }
.sla.late { background: var(--danger-tint); color: var(--danger); }
.kbd-hint { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.kbd-hint kbd { min-width: 18px; text-align: center; }
.check-mark { color: var(--accent); }

/* ---------- Overview ---------- */
.kpis.k6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1280px) {
  .kpis.k6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis.k6 .kpi:nth-child(4) { border-left: 0; }
  .kpis.k6 .kpi:nth-child(n+4) { border-top: 1px solid var(--border); }
}
@media (max-width: 900px) {
  .kpis.k6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis.k6 .kpi:nth-child(4) { border-left: 1px solid var(--border); }
  .kpis.k6 .kpi:nth-child(odd) { border-left: 0; }
}
.kpi-link { color: inherit; text-decoration: none !important; transition: background var(--t); }
.kpi-link:hover { background: var(--surface); }
.kpi-link .kpi-delta span { color: var(--muted); }
.attn-list { padding: 14px 20px 16px; }
.attn-list .attn .sla, .attn-list .attn .badge { flex: none; }
.team-mini { padding: 6px 8px 8px; }
.team-mini-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r); color: inherit; text-decoration: none !important; font-size: 13.5px; }
.team-mini-row:hover { background: var(--surface); }

/* ---------- Inbox ---------- */
.inbox-feed { display: flex; flex-direction: column; }
.note { display: flex; align-items: flex-start; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--border); color: inherit; text-decoration: none !important; }
.note:first-child { border-top: 0; }
.note:hover { background: var(--surface); }
.note-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--surface-2); color: var(--muted); }
.note.ticket .note-icon, .note.mention .note-icon { background: var(--accent-tint); color: var(--accent); }
.note.alert .note-icon { background: var(--warn-tint); color: var(--warn); }
.note.alert.urgent .note-icon { background: var(--danger-tint); color: var(--danger); }
.note.payroll .note-icon { background: var(--success-tint); color: var(--success); }
.note-title { display: block; font-size: 14px; color: var(--ink); }
.note.unread .note-title { font-weight: 600; }
.note-body { display: block; margin: 2px 0 4px; font-size: 13.5px; color: var(--ink-2); }
.note .nav-dot { margin-top: 8px; flex: none; }

/* ---------- Tickets: a full-height desk (queue · conversation · details) ---------- */
.view.desk { flex: 1 1 0; min-height: 560px; display: flex; flex-direction: column; max-width: none; padding: 18px 24px 20px; }
.view.desk > .page-head { margin-bottom: 14px; align-items: center; }
.view.desk > .page-head h1 { font-size: 22px; }
.tk { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr) 288px; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--bg); }

/* Queue */
.tk-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); background: var(--surface); }
.tk-tools { padding: 12px; border-bottom: 1px solid var(--border); background: var(--bg); }
.tk-views { display: flex; gap: 2px; padding: 2px; border-radius: var(--r); background: var(--surface-2); }
.tk-views button { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 28px; padding: 0 5px; border: 0; border-radius: 5px; background: transparent; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.tk-views button:hover { color: var(--ink); }
.tk-views button.on { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 0 0 1px rgba(16,24,40,.04); }
.tk-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: rgba(16,24,40,.07); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tk-views button.on .tk-count { background: var(--accent-tint); color: var(--accent); }
.tk-rows { flex: 1; min-height: 0; overflow-y: auto; }
.tk-row { position: relative; display: flex; gap: 10px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none !important; background: var(--bg); }
.tk-row:hover { background: #FAFBFC; }
.tk-row.on { background: var(--accent-tint); }
.tk-prio { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.tk-row.p-urgent .tk-prio { background: var(--danger); }
.tk-row.p-high .tk-prio { background: #F79009; }
.tk-top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.tk-biz { flex: 1; min-width: 0; color: var(--ink-2); font-weight: 500; }
.tk-subj { display: block; margin-top: 3px; font-size: 14px; font-weight: 600; color: var(--ink); }
.tk-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 7px; font-size: 12.5px; color: var(--ink-2); }
.tk-un { color: var(--warn); font-weight: 500; }
.tk-pres { display: inline-flex; flex: none; }
.tk-pres:empty { display: none; }
.tk-pres-av { display: inline-flex; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg); }
.tk-pres-av + .tk-pres-av { margin-left: -5px; }
.tk-pres-av.typing { box-shadow: 0 0 0 2px #12B76A; }

/* Conversation */
.tk-detail { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.tk-detail > .empty { margin: auto; }
.tk-head { flex: none; padding: 12px 20px; border-bottom: 1px solid var(--border); }
.tk-head-top { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.tk-head h2 { margin-top: 2px; font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.tk-bizline { align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.tk-bizline a { color: var(--ink-2); font-weight: 500; }
.tk-controls { align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tk-controls .select-sm { width: auto; }
.select.p-urgent { color: var(--danger); font-weight: 600; }
.select.p-high { color: var(--warn); font-weight: 600; }
.btn.assignee { gap: 8px; max-width: 100%; }
.tk-only-narrow { display: none !important; }
.tk-back { display: none; }
[data-live] { display: contents; }
.tk-live { display: inline-flex; align-items: center; gap: 7px; max-width: 46%; min-width: 0; height: 26px; padding: 0 10px 0 8px; border-radius: 999px; background: var(--success-tint); color: var(--success); font-size: 12px; font-weight: 500; white-space: nowrap; }
.tk-live.typing { background: var(--warn-tint); color: var(--warn); }
.tk-live-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: tk-pulse 1.6s ease-in-out infinite; }
@keyframes tk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.tk-thread { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 18px 20px 12px; display: flex; flex-direction: column; gap: 14px; background: #FCFCFD; }
.tk-day { display: flex; align-items: center; gap: 12px; font-size: 11.5px; font-weight: 500; color: var(--faint); }
.tk-day::before, .tk-day::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.tk-day span { display: inline-flex; align-items: center; gap: 6px; }
.msg-row { display: flex; align-items: flex-end; gap: 10px; max-width: min(86%, 720px); }
.msg-row.out, .msg-row.note { align-self: flex-end; }
.msg-bubble { min-width: 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.msg-row.in .msg-bubble { border-bottom-left-radius: 4px; }
.msg-row.out .msg-bubble { border-bottom-right-radius: 4px; background: var(--accent-tint); border-color: var(--accent-tint-2); }
.msg-row.note .msg-bubble { border-bottom-right-radius: 4px; background: var(--warn-tint); border-color: #FEDF89; }
.msg-row.fresh .msg-bubble { animation: tk-fresh 1.6s ease; }
@keyframes tk-fresh { 0% { box-shadow: 0 0 0 3px rgba(220,38,38,.35); transform: translateY(4px); } 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); transform: none; } }
.msg-meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.msg-meta strong { color: var(--ink-2); font-weight: 600; }
.msg-text { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.tk-newpill { position: sticky; bottom: 4px; align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 500; box-shadow: var(--shadow-pop); cursor: pointer; }

/* Reply box: one rounded field with its tools inside, like a chat composer */
.tk-compose { flex: none; padding: 12px 16px 14px; border-top: 1px solid var(--border); background: var(--bg); }
.tk-box { border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--bg); transition: border-color var(--t), box-shadow var(--t); }
.tk-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.tk-box textarea { display: block; width: 100%; min-height: 48px; max-height: 220px; padding: 10px 12px 2px; border: 0; outline: 0; resize: none; background: transparent; font: inherit; font-size: 14px; line-height: 1.5; color: var(--ink); }
.tk-box textarea::placeholder { color: var(--faint); }
.tk-box-foot { display: flex; align-items: center; gap: 6px; padding: 6px 8px 8px; }
.tk-box-foot .segmented button { height: 26px; padding: 0 10px; display: inline-flex; align-items: center; gap: 5px; }
.tk-compose.note .tk-box { background: var(--warn-tint); border-color: #FEDF89; }
.tk-compose.note .tk-box:focus-within { border-color: #F79009; box-shadow: 0 0 0 3px rgba(247,144,9,.15); }
.tk-handoff, .tk-readonly { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface); font-size: 13.5px; color: var(--ink-2); }
.tk-handoff > .grow { flex: 1 1 180px; min-width: 0; }
.tk-readonly svg { color: var(--muted); }

/* Details */
.tk-side { min-height: 0; overflow-y: auto; border-left: 1px solid var(--border); padding: 16px; display: flex; flex-direction: column; gap: 22px; }
.tk-sec h3 { margin-bottom: 10px; font-size: 12px; font-weight: 600; color: var(--muted); }
.tk-props { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: center; margin: 0; font-size: 13px; }
.tk-props dt { color: var(--muted); }
.tk-props dd { margin: 0; min-width: 0; }
.tk-props .select { width: 100%; }
.tk-others { display: flex; flex-direction: column; margin: 0 -8px; }
.tk-other { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--r); color: inherit; text-decoration: none !important; }
.tk-other:hover { background: var(--surface); }

@media (max-width: 1439px) {
  .tk { grid-template-columns: 320px minmax(0, 1fr); }
  .tk-side { display: none; }
  .tk-bizline.tk-only-narrow, .tk-controls.tk-only-narrow { display: flex !important; }
  .btn.tk-only-narrow { display: inline-flex !important; }
}
@media (max-width: 1023px) { .tk { grid-template-columns: 280px minmax(0, 1fr); } }
@media (max-width: 859px) {
  .view.desk { min-height: 0; padding: 12px; }
  .view.desk > .page-head { margin-bottom: 10px; }
  .tk { grid-template-columns: minmax(0, 1fr); }
  .tk-list { border-right: 0; }
  .tk-detail { display: none; }
  .tk.show-detail .tk-list { display: none; }
  .tk.show-detail .tk-detail { display: flex; }
  .tk-back { display: inline-flex; margin-left: -6px; }
  .view.desk:has(.tk.show-detail) > .page-head { display: none; } /* the open ticket gets the whole screen */
  .tk-head, .tk-thread { padding-left: 14px; padding-right: 14px; }
  .msg-row { max-width: 100%; }
}

/* ---------- Employees ---------- */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.person { display: flex; flex-direction: column; align-items: center; padding: 20px 16px 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg); text-align: center; transition: border-color var(--t), box-shadow var(--t); }
.person:hover { border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.person.inactive { opacity: .55; }
.person-name { margin-top: 12px; font-weight: 600; color: var(--ink); }
.person .center { justify-content: center; }
.person-foot { display: flex; justify-content: space-between; gap: 8px; width: calc(100% + 32px); margin-top: 16px; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.person-foot .ok { display: inline-flex; align-items: center; gap: 4px; color: var(--success); }
.person-foot .warn { color: var(--warn); }
.role-row .tag { width: 86px; justify-content: center; }

/* ---------- Payroll ---------- */
.run-next { border-color: var(--accent-tint-2); background: var(--accent-tint); }
.stub { grid-template-columns: 140px minmax(0, 1fr); }
.table tfoot td { padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface); }

/* ---------- Search palette ---------- */
.pal-list { display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow-y: auto; }
.pal-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r); color: var(--ink); text-decoration: none !important; font-size: 14px; }
.pal-item svg { color: var(--muted); }
.pal-item:hover, .pal-item.on { background: var(--accent-tint); }

/* ---------- Staff sign-in ---------- */
.demo-staff { width: 100%; border: 0; border-bottom: 1px solid var(--border); background: none; text-align: left; cursor: pointer; }
.demo-staff:hover { background: var(--surface); }

/* ---------- Businesses ---------- */
.biz-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1099px) { .biz-grid { grid-template-columns: minmax(0, 1fr); } }
.meters-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; }
@media (max-width: 640px) { .meters-2 { grid-template-columns: minmax(0, 1fr); } }
.callout.success { background: var(--success-tint); border-color: #ABEFC6; }
.callout.success svg { color: var(--success); }
.callout > .btn { flex: none; margin: -4px 0; }
.mb-24 { margin-bottom: 24px; }
.biz-list { padding: 0 20px; }
a.list-item { color: inherit; text-decoration: none !important; }
a.list-item:hover .grow { color: var(--accent); }
.note-row { align-items: flex-start; }
.plan-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.plan-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--border-strong); border-radius: var(--r-lg); cursor: pointer; min-width: 0; }
.plan-opt input { margin-top: 3px; accent-color: var(--accent); flex: none; }
.plan-opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* ---------- Custom plan applications ---------- */
.checks { display: flex; flex-direction: column; gap: 8px; }
.check-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); cursor: pointer; transition: background var(--t), border-color var(--t); }
.check-row:hover { border-color: var(--border-strong); }
.check-row input { margin-top: 3px; accent-color: var(--accent); flex: none; }
.check-row.on { background: var(--surface); }
.check-row:has(input:disabled) { cursor: default; }
.biz-sub { max-width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- Plans & limits ---------- */
.limits-grid th:first-child, .limits-grid td:first-child { width: 30%; }
.limits-grid th { vertical-align: bottom; }
.limits-grid td { vertical-align: middle; padding-top: 5px; padding-bottom: 5px; }
.lim-cell { display: inline-flex; align-items: center; gap: 4px; }
.lim-cell .input { width: 118px; text-align: right; }
.lim-cell.changed .input { border-color: var(--accent); background: var(--accent-tint); }
.lim-pre { color: var(--muted); font-size: 13px; }
.lim-group td { padding-top: 10px; padding-bottom: 6px; background: var(--surface); font-size: 12px; font-weight: 600; color: var(--muted); }
.lim-foot td { background: var(--bg); }
.save-bar { position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 12px 10px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg); box-shadow: var(--shadow-pop); font-size: 14px; font-weight: 500; }
.save-bar[hidden] { display: none; }

/* ---------- Pickers shared by announcements and flags ---------- */
.pick-list { display: flex; flex-direction: column; margin-top: 6px; border: 1px solid var(--border); border-radius: var(--r); max-height: 220px; overflow-y: auto; }
.pick-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--border); background: var(--bg); text-align: left; font-size: 13.5px; color: var(--ink); }
.pick-item:last-child { border-bottom: 0; }
.pick-item:hover { background: var(--surface); }
.pick-item.on { background: var(--accent-tint); }
.section-title { font-size: 16px; font-weight: 600; }

/* ---------- Announcements ---------- */
.ann-list { display: flex; flex-direction: column; gap: 12px; }
.ann { overflow: hidden; }
.ann-preview .appbar { border-radius: 0; }
.ann-preview.framed { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.ann-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 10px 12px 10px 16px; font-size: 13px; color: var(--ink-2); }

/* ---------- Feature flags ---------- */
.flag-head { display: flex; align-items: center; gap: 16px; padding: 16px 20px; }
.flag-body { padding: 0 20px 14px; display: flex; flex-direction: column; gap: 10px; }
.flag-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.flag-label { width: 84px; flex: none; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.flag.off .flag-head .medium { color: var(--muted); }
.chip[disabled] { opacity: .5; cursor: not-allowed; }
.tag.tag-on { border-color: var(--accent-tint-2); background: var(--accent-tint); color: var(--accent); }
.tag.tag-off { border-color: #FECDCA; background: var(--danger-tint); color: var(--danger); }

/* ---------- System status ---------- */
.svc-list { display: flex; flex-direction: column; }
.svc { display: grid; grid-template-columns: 10px minmax(160px, 1.1fr) minmax(0, 2fr) 64px 56px 96px; align-items: center; gap: 14px; padding: 11px 20px; border-top: 1px solid var(--border); }
.svc:first-child { border-top: 0; }
.svc > .badge { justify-self: end; }
.svc-dot { width: 10px; height: 10px; border-radius: 50%; background: #12B76A; flex: none; }
.svc-dot.degraded { background: #F79009; }
.svc-dot.down { background: var(--danger); }
.svc-strip { display: flex; gap: 2px; height: 22px; min-width: 0; }
.svc-strip i { flex: 1; min-width: 1px; border-radius: 1px; background: #A6E3C4; }
.svc-strip i.dip { background: #FEC84B; }
.svc-strip i.down { background: #F97066; }
.svc-up { text-align: right; }
.svc-ms { text-align: right; }
@media (max-width: 900px) { .svc { grid-template-columns: 10px minmax(0, 1fr) 64px 96px; } .svc-strip, .svc-ms { display: none; } }
.err-lvl { flex: none; width: 64px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--warn); }
.err-lvl.error { color: var(--danger); }
.err.acknowledged { opacity: .6; }
.err-msg { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.inc-updates { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--border); }

/* ---------- Audit log ---------- */
.table tr.audit-flag td:first-child { box-shadow: inset 3px 0 0 #F79009; }

/* ---------- Settings ---------- */
.sla-grid { display: grid; grid-template-columns: auto auto; align-items: center; gap: 8px 12px; }
.danger-zone { border-color: #FECDCA; }
.flag .chip { color: var(--muted); }
.flag .chip.on { background: var(--accent-tint); border-color: var(--accent-tint-2); color: var(--accent); }
.flag .chip:not(.on):not([disabled]) { text-decoration: line-through; text-decoration-color: var(--faint); }
@media (max-width: 640px) { .staff .settings-row { flex-wrap: wrap; gap: 12px; } .flag-head { flex-wrap: wrap; } }

/* ---------- Overview: system health strip, shown first to everyone ---------- */
.sys-strip { display: flex; flex-direction: column; margin-bottom: 20px; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.sys-strip.ok { flex-direction: row; align-items: center; gap: 10px; padding: 10px 16px; font-size: 13.5px; background: var(--success-tint); border-color: #ABEFC6; }
.sys-strip.ok > span:nth-child(2) { flex: 1; }
.sys-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; font-size: 13.5px; border-top: 1px solid var(--border); }
.sys-row:first-child { border-top: 0; }
.sys-row .btn { flex: none; }
.sys-row.down { background: var(--danger-tint); }
.sys-row.degraded { background: var(--warn-tint); }
.sys-row.maint { background: var(--surface); }
.sys-dot { flex: none; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: #12B76A; }
.sys-strip.ok .sys-dot { margin-top: 0; }
.sys-row.down .sys-dot { background: var(--danger); animation: tk-pulse 1.4s ease-in-out infinite; }
.sys-row.degraded .sys-dot { background: #F79009; }
.sys-row.maint .sys-dot { background: var(--accent); }

/* ---------- Inbox: staff messenger (conversations · chat) ---------- */
.ib { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--bg); }
.ib-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); background: var(--surface); }
.ib-tools { padding: 12px; border-bottom: 1px solid var(--border); background: var(--bg); }
.ib-items { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }
.ib-label { padding: 12px 10px 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.ib-none { padding: 16px 10px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.ib-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--r); background: none; text-align: left; color: var(--ink); font-size: 13.5px; }
.ib-item:hover { background: rgba(16,24,40,.04); }
.ib-item.on { background: var(--accent-tint); }
.ib-item.unread .ib-name { font-weight: 700; }
.ib-item.unread .ib-sub { color: var(--ink); }
.ib-name { display: flex; align-items: baseline; gap: 8px; font-weight: 500; }
.ib-time { margin-left: auto; font-size: 11.5px; font-weight: 400; color: var(--faint); white-space: nowrap; }
.ib-sub { display: block; margin-top: 1px; font-size: 12.5px; color: var(--muted); }
.ib-hit { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ib-item mark { background: #FEF0C7; color: inherit; border-radius: 2px; padding: 0 1px; }
.ib-badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 600; line-height: 20px; text-align: center; }
.ib-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); color: var(--muted); }
.ib-pin { margin-bottom: 2px; }
.ib-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ib-main > .empty { margin: auto; }
.ib-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.ib-back { display: none; }
.ib-thread { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 18px 20px 8px; display: flex; flex-direction: column; gap: 2px; background: #FCFCFD; }
.ib-thread .tk-day { margin: 12px 0 8px; }
.dm { display: flex; align-items: flex-start; gap: 10px; max-width: min(78%, 640px); margin-top: 10px; }
.dm.grouped { margin-top: 2px; }
.dm.mine { align-self: flex-end; flex-direction: row-reverse; }
.dm-av { width: 28px; flex: none; }
.dm-col { min-width: 0; display: flex; flex-direction: column; }
.dm.mine .dm-col { align-items: flex-end; }
.dm-meta { margin-bottom: 3px; font-size: 12px; color: var(--muted); }
.dm-bubble { padding: 8px 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); font-size: 14px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.dm.theirs .dm-bubble { border-top-left-radius: 4px; }
.dm.mine .dm-bubble { background: var(--accent); border-color: var(--accent); color: #fff; border-top-right-radius: 4px; }
.dm.grouped.theirs .dm-bubble { border-top-left-radius: 14px; }
.dm.grouped.mine .dm-bubble { border-top-right-radius: 14px; }
.dm.fresh .dm-bubble { animation: tk-fresh 1.6s ease; }
.ib-start { margin: auto; padding: 24px; text-align: center; max-width: 340px; display: flex; flex-direction: column; align-items: center; }
.ib-typing { flex: none; display: flex; align-items: center; gap: 7px; min-height: 22px; padding: 0 20px; font-size: 12px; color: var(--muted); background: #FCFCFD; }
.ib-typing .tk-live-dot { color: var(--accent); }
.ib-typing:empty { min-height: 8px; }
.ib-compose { flex: none; padding: 10px 16px 12px; border-top: 1px solid var(--border); }
.ib-box { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--border-strong); border-radius: 22px; background: var(--bg); transition: border-color var(--t), box-shadow var(--t); }
.ib-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.ib-box textarea { flex: 1; min-height: 24px; max-height: 160px; padding: 5px 0; border: 0; outline: 0; resize: none; background: transparent; font: inherit; font-size: 14px; line-height: 1.5; color: var(--ink); }
.ib-box .btn-icon { border-radius: 50%; flex: none; }
.ib-hint { margin-top: 6px; padding-left: 14px; }
.ib-notetabs { flex: none; padding: 0 18px; }
.ib-notes { flex: 1 1 0; min-height: 0; overflow-y: auto; }
@media (max-width: 1023px) { .ib { grid-template-columns: 280px minmax(0, 1fr); } }
@media (max-width: 859px) {
  .ib { grid-template-columns: minmax(0, 1fr); }
  .ib-main { display: none; }
  .ib.show-main .ib-list { display: none; }
  .ib.show-main .ib-main { display: flex; }
  .ib-back { display: inline-flex; margin-left: -6px; }
  .view.desk:has(.ib.show-main) > .page-head { display: none; }
  .dm { max-width: 92%; }
}
.chans { display: flex; flex-direction: column; gap: 8px; }
.chan { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); cursor: pointer; }
.chan:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.chan input { margin-top: 3px; accent-color: var(--accent); flex: none; }
.chan > span { display: flex; flex-direction: column; gap: 2px; }
.chan .medium svg { vertical-align: -2px; color: var(--muted); }

/* Tickets, simplified: subject-first rows and a two-line header */
.tk-top .tk-subj { flex: 1; min-width: 0; margin-top: 0; }
.tk-meta { margin-top: 4px; gap: 6px; flex-wrap: nowrap; color: var(--muted); }
.tk-meta > .truncate { min-width: 0; }
.tk-row { padding-top: 11px; padding-bottom: 11px; }
.tk-head-top h2 { margin: 0; min-width: 0; font-size: 17px; line-height: 1.35; }
.tk-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.tk-sub a { color: var(--ink-2); font-weight: 500; }
.tk-side [data-call] { display: inline-flex; align-items: center; gap: 6px; }
/* Priority colors: urgent red, high orange, normal green, low gray (queue bar and the Priority menu) */
.tk-row.p-normal .tk-prio { background: #17B26A; }
.tk-row.p-low .tk-prio { background: #A1A1AA; }
.select.p-normal { color: var(--success); font-weight: 600; }
.select.p-low { color: var(--muted); font-weight: 600; }

/* ---------- Live console (admin/live/*) ---------- */
.act-row { border-top: 1px solid var(--border); }
.act-row:first-child { border-top: 0; }
.act-row > summary { display: flex; align-items: center; gap: 10px; padding: 9px 0; list-style: none; cursor: pointer; font-size: 13.5px; }
.act-row > summary::-webkit-details-marker { display: none; }
.act-row > summary:hover .medium { color: var(--accent); }
.act-row[open] > summary { padding-bottom: 4px; }
.act-detail { padding: 0 0 12px 34px; color: var(--ink-2); }
.act-json { margin: 8px 0 0; max-height: 240px; overflow: auto; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); font-family: var(--mono); font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.totp-qr { display: grid; place-items: center; width: 208px; height: 208px; margin: 4px auto 12px; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-lg); background: #fff; }
.totp-qr svg { width: 100%; height: 100%; }
.totp-key summary { cursor: pointer; color: var(--muted); text-align: center; }
.totp-key .mono { padding: 10px 12px; border-radius: var(--r); background: var(--surface); text-align: center; letter-spacing: .04em; word-break: break-all; }
.backup-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); font-size: 14px; }
.email-body { white-space: pre-wrap; color: var(--ink-2); }
.recips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Team workspace (Marketing Manager, Support Team, Developer, Marketing Team) ----------
   A different look from the CEO / Administration console: light top bar, pages as tabs, the
   page centred under it. Same red accent. */
body.ws-body { background: var(--surface); height: auto; min-height: 100%; }
.ws { min-height: 100vh; }
.ws-top { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--border); }
.ws-bar { display: flex; align-items: center; gap: 18px; max-width: 1180px; height: 60px; margin: 0 auto; padding: 0 24px; }
.ws-brand { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--ink); text-decoration: none !important; }
.ws-role { padding: 2px 8px; border-radius: 999px; background: var(--accent-tint); color: var(--accent-press); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.ws-nav { display: flex; align-self: stretch; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ws-nav::-webkit-scrollbar { display: none; }
.ws-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none !important; transition: color var(--t), border-color var(--t); }
.ws-tab:hover { color: var(--ink); }
.ws-tab.on { color: var(--ink); border-bottom-color: var(--accent); }
.ws-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.ws-spacer { flex: 1 1 auto; }
.ws-view { max-width: 1180px; padding: 28px 24px 72px; }
@media (max-width: 767px) {
  .ws-bar { flex-wrap: wrap; height: auto; gap: 0 12px; padding: 0 16px; }
  .ws-brand { height: 52px; }
  .ws-nav { order: 3; flex: 1 0 100%; height: 44px; margin: 0 -16px; padding: 0 8px; border-top: 1px solid var(--border); }
  .ws-view { padding: 20px 16px 56px; }
}

/* Today */
.today-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1023px) { .today-grid { grid-template-columns: minmax(0, 1fr); } }
.alert-bar { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; padding: 12px 16px; border: 1px solid #FECACA; border-radius: var(--r-lg); background: var(--accent-tint); color: var(--ink); }
.alert-bar svg { flex: none; margin-top: 2px; color: var(--accent); }
.task-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); }
.task-row:first-child { border-top: 0; }
.task-row.done .task-title { color: var(--muted); text-decoration: line-through; }
.task-check { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--accent); cursor: pointer; }
.task-title { font-weight: 500; }
.pay-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--success-tint); color: var(--success); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.stat-row { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.stat-row .num { font-size: 20px; font-weight: 600; color: var(--ink); display: block; }

/* Messages */
.msg-shell { display: grid; grid-template-columns: 300px minmax(0, 1fr); height: calc(100vh - 200px); min-height: 460px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg); }
.msg-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); }
.msg-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.msg-convs { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.msg-conv { display: flex; gap: 10px; width: 100%; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--border); background: none; text-align: left; cursor: pointer; }
.msg-conv:hover { background: var(--surface); }
.msg-conv.on { background: var(--accent-tint); }
.msg-conv .unread-dot { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.chan-icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2); color: var(--ink-2); font-weight: 700; }
.msg-thread { display: flex; flex-direction: column; min-height: 0; }
.msg-thread-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.msg-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg-item { display: flex; gap: 10px; max-width: 78%; }
.msg-item.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg-bubble2 { padding: 8px 12px; border-radius: 12px; background: var(--surface-2); white-space: pre-wrap; word-break: break-word; }
.msg-item.mine .msg-bubble2 { background: var(--accent); color: #fff; }
.msg-meta { margin-bottom: 2px; font-size: 11.5px; color: var(--muted); }
.msg-item.mine .msg-meta { text-align: right; }
.msg-compose { display: flex; gap: 8px; align-items: flex-end; padding: 12px 16px; border-top: 1px solid var(--border); }
.msg-compose textarea { flex: 1 1 auto; min-height: 40px; max-height: 160px; resize: none; }
@media (max-width: 767px) {
  .msg-shell { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 170px); }
  .msg-shell.open .msg-list, .msg-shell:not(.open) .msg-thread { display: none; }
}

/* Content */
.drop { display: grid; place-items: center; gap: 6px; padding: 28px 16px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface); text-align: center; cursor: pointer; transition: border-color var(--t), background var(--t); }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-tint); }
.up-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.up-row:first-child { border-top: 0; }
.up-bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.up-bar i { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.up-row.done .up-bar i { background: var(--success); }
.media { display: block; width: 100%; max-height: 520px; border-radius: var(--r-lg); background: #111113; }
img.media { object-fit: contain; }
.agreement { max-height: 360px; overflow-y: auto; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); white-space: pre-wrap; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.decide-box { padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.thumb { display: grid; place-items: center; flex: none; width: 48px; height: 36px; overflow: hidden; border-radius: 6px; background: var(--surface-2); color: var(--muted); }
.thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 768px) { .hide-md-up { display: none !important; } }

/* ---------- Search on the home pages, business page tabs ---------- */
.home-search { display: flex; align-items: center; gap: 12px; width: 100%; height: 54px; margin: -4px 0 24px; padding: 0 18px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg); color: var(--muted); font-size: 17px; text-align: left; cursor: text; box-shadow: 0 1px 2px rgba(16,24,40,.05); transition: border-color var(--t), box-shadow var(--t); }
.home-search:hover { border-color: var(--accent); }
.home-search:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.home-search svg { flex: none; color: var(--accent); }
.home-search span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.biz-tabs { margin-bottom: 24px; }
.rec-find { padding-top: 14px; padding-bottom: 14px; }
.rec-find .input-group { max-width: 440px; }

/* ---------- Phone: bottom bar, page row, cards, Actions sheet (shell.js) ---------- */
.pa-only-sheet, .pa-sheet, .m-tabs, .m-pages, .m-brand { display: none !important; }
.sheet-list { display: flex; flex-direction: column; gap: 4px; margin: -8px -10px; }
.sheet-item { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 54px; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: 17px; font-weight: 500; text-align: left; cursor: pointer; }
.sheet-item:hover, .sheet-item:focus-visible { background: var(--surface); outline: none; }
.sheet-item svg { flex: none; color: var(--muted); }
.sheet-item.danger, .sheet-item.danger svg { color: var(--danger); }

@media (max-width: 767px) {
  .staff .frame .sidebar, .staff .frame .scrim, .staff .frame .topbar .menu-btn, .staff .frame .topbar .topbar-spacer { display: none !important; }
  .staff .frame .topbar { gap: 6px; padding: 0 10px 0 12px; }
  .staff .m-brand { display: grid !important; place-items: center; flex: none; width: 34px; height: 34px; }
  .staff .m-brand .brand-mark { width: 26px; height: 26px; }
  .staff .frame .search-trigger { flex: 1 1 auto; width: auto; min-width: 0; height: 42px; }
  .staff .frame .home-search { display: none; } /* the top bar has search */
  .staff .m-pages:not([hidden]) { display: flex !important; flex: none; position: sticky; top: var(--topbar); z-index: 29; gap: 8px; padding: 10px 12px; overflow-x: auto; scrollbar-width: none; background: var(--bg); border-bottom: 1px solid var(--border); }
  .staff .m-pages::-webkit-scrollbar { display: none; }
  .m-page { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 15px; font-weight: 500; white-space: nowrap; text-decoration: none !important; }
  .m-page.on { background: var(--accent); color: #fff; }
  .m-page.on .ws-count { background: rgba(255,255,255,.25); color: #fff; }
  .staff .m-tabs { display: flex !important; flex: none; justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--rail-bg); }
  .m-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1 1 0; min-width: 0; height: 56px; border-radius: 12px; color: #9AA3B5; font-size: 12px; font-weight: 600; text-decoration: none !important; }
  .m-tab span:not(.m-badge) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-tab.on { color: #fff; background: rgba(239,68,68,.2); }
  .m-tab.on svg { color: #FCA5A5; }
  .m-badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--rail-bg); }
  .staff .frame .view { padding-bottom: 32px; }

  /* A page's buttons fold into one Actions button */
  .staff .page-actions.has-sheet > .btn:not(.pa-sheet) { display: none !important; }
  .staff .page-actions.has-sheet > .pa-sheet { display: inline-flex !important; }
  .staff .page-actions { width: 100%; }
  .staff .page-actions > .btn:not(.btn-icon) { flex: 1 1 auto; justify-content: center; }

  /* Pop-ups rise from the bottom like a phone sheet */
  .staff .overlay .modal { width: 100%; max-width: none; margin: auto 0 0; max-height: 92dvh; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .staff .modal-foot { flex-wrap: wrap; }
  .staff .modal-foot .btn { flex: 1 1 auto; justify-content: center; min-height: 46px; }

  /* Tap targets */
  .staff .btn-sm { min-height: 40px; }
  .staff .table-toolbar .select, .staff .table-toolbar .input { min-height: 44px; }
  .staff .table-toolbar > .select { flex: 1 1 140px; width: auto !important; }
  .staff .table-toolbar .segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .staff .table-toolbar .segmented > * { flex: none; }
  .staff .page-head > .row { max-width: 100%; }
  .staff .page-head > .row > div { min-width: 0; }
  .staff .page-head .row.gap-8 { flex-wrap: wrap; }
  .staff .page-head h1, .staff .page-sub { overflow-wrap: anywhere; }
  .staff .biz-tabs .tab, .staff .tabs .tab { padding-top: 12px; padding-bottom: 14px; }
}

/* Tables read as cards: the first column is the title, the rest are labelled pairs */
@media (max-width: 639px) {
  .staff .table.cards, .staff .table.cards tbody { display: block; }
  .staff .table.cards thead { display: none; }
  .staff .table.cards tr { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
  .staff .table.cards tbody tr:last-child { border-bottom: 0; }
  .staff .table.cards td { display: block; height: auto; min-width: 0; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; text-align: left !important; }
  .staff .table.cards td.hide-sm { display: none !important; }
  .staff .table.cards td.cell-title { grid-column: 1 / -1; font-size: 16px; }
  .staff .table.cards td.cell-check { position: absolute; top: 12px; right: 12px; }
  .staff .table.cards tr:has(.cell-check) td.cell-title { padding-right: 40px; }
  .staff .table.cards td[data-label]:not(.cell-title):not(.cell-check)::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
  .staff .table.cards td:empty { display: none; }
  .staff .table.cards .badge, .staff .table.cards .tag { max-width: 100%; height: auto; min-height: 22px; white-space: normal; }
  .staff .table.cards td.w-act { grid-column: 1 / -1; text-align: left !important; }
  .staff .table-wrap:has(> .table.cards) { overflow-x: visible; }
}