:root {
  color-scheme: light;
  --navy-950: #031b2a;
  --navy-900: #06283d;
  --navy-800: #0a3a56;
  --navy-700: #12516e;
  --blue-50: #f2f8fb;
  --blue-100: #e4f0f5;
  --orange: #ff6a3d;
  --orange-soft: #fff0e9;
  --teal: #119c8b;
  --teal-soft: #e8f7f4;
  --amber: #c97910;
  --amber-soft: #fff4d9;
  --red: #c2414a;
  --red-soft: #fff0f1;
  --ink: #102a3a;
  --muted: #667a87;
  --line: #dbe5ea;
  --surface: #ffffff;
  --canvas: #f4f7f9;
  --shadow: 0 12px 36px rgba(3, 27, 42, .09);
  --radius: 16px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.security-banner { display:block; padding:12px 24px; font-weight:650; border-bottom:1px solid var(--line); }
.security-banner[hidden] { display:none; }
.security-banner.warning,.security-notice.warning { background:#fff4d9;color:#734600; }
.security-banner.critical,.security-notice.critical { background:#ffe4e7;color:#991b2b; }
.security-notice.ok { background:#e8f7f0;color:#14643f; }
.security-notice { padding:20px;border-radius:12px;margin-bottom:20px; }
.security-notice p { margin:8px 0; }
.security-metrics { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px; }
.security-panel { padding:22px;margin-bottom:20px; }
.security-metrics strong { display:block;font-size:2rem;margin:10px 0; }
.security-checks { display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:4px 18px; }
.security-table-wrap { overflow-x:auto;margin-top:18px; }
.security-table { width:100%;border-collapse:collapse;text-align:left;font-size:14px; }
.security-table th,.security-table td { padding:12px;border-bottom:1px solid var(--line);vertical-align:top; }
.security-table td small { display:block;color:var(--muted);margin-top:5px; }
@media(max-width:700px){.security-metrics {grid-template-columns:repeat(2,minmax(0,1fr));}.security-panel {padding:16px;}}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body { margin: 0; color: var(--ink); background: var(--canvas); font-size: 16px; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 24px 14px 16px; color: #dceaf0; background: linear-gradient(180deg, var(--navy-950), var(--navy-900)); }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 26px; color: white; }
.brand-mark { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; border: 3px solid var(--orange); border-radius: 50%; }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; background: var(--orange); border-radius: 3px; }
.brand-mark::before { width: 5px; height: 12px; top: -7px; }
.brand-mark::after { width: 12px; height: 5px; right: -7px; }
.brand-mark i { width: 9px; height: 9px; background: white; border-radius: 50%; }
.brand b { font-size: 1.2rem; letter-spacing: -.02em; }
.brand small { display: block; margin-top: 2px; color: #93afbd; font-size: .7rem; font-weight: 700; letter-spacing: .16em; }
.main-nav { display: grid; gap: 5px; }
.main-nav a { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; min-height: 46px; padding: 0 13px; border-radius: 11px; color: #afc4cf; font-size: .94rem; font-weight: 650; transition: .15s ease; }
.main-nav a:hover { background: rgba(255,255,255,.06); color: white; }
.main-nav a.active { color: white; background: rgba(255,255,255,.11); box-shadow: inset 3px 0 var(--orange); }
.nav-icon { font-size: 1.25rem; }
.main-nav em, .bottom-nav em { min-width: 22px; padding: 3px 7px; color: white; background: var(--orange); border-radius: 999px; font-size: .7rem; font-style: normal; text-align: center; }
.sidebar-bottom { margin-top: auto; }
.sync-state { margin: 0 10px 14px; color: #89a4b1; font-size: .78rem; }
.sync-state span { display: inline-block; width: 7px; height: 7px; margin-right: 6px; background: #3bd1ad; border-radius: 50%; box-shadow: 0 0 0 4px rgba(59,209,173,.12); }
.user-button { width: 100%; display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; padding: 11px 10px; border: 0; border-top: 1px solid rgba(255,255,255,.1); background: transparent; color: white; text-align: left; cursor: pointer; }
.user-button small { display: block; color: #89a4b1; margin-top: 2px; }
.avatar { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; color: white; background: var(--navy-700); font-size: .76rem; font-weight: 800; }
.avatar-orange { background: var(--orange); }

.main-area { min-width: 0; }
.topbar { position: sticky; z-index: 10; top: 0; height: 68px; display: flex; align-items: center; gap: 12px; padding: 0 clamp(20px, 4vw, 52px); background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line);  }
.version-link { flex: 0 0 auto; min-height: 32px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--navy-700); background: var(--blue-50); font-size: .75rem; font-weight: 850; cursor: pointer; }
.version-link:hover { border-color: var(--navy-700); }
.mobile-brand, .mobile-avatar { display: none; }
.search-launch { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); color: var(--muted); text-align: left; cursor: pointer; }
.search-launch .search-label { overflow: hidden; flex: 1; white-space: nowrap; text-overflow: ellipsis; }
kbd { padding: 2px 7px; border: 1px solid #c9d5db; border-radius: 5px; background: white; color: #768894; font-size: .72rem; }
.icon-button { width: 40px; height: 40px; margin-left: auto; border: 1px solid var(--line); border-radius: 11px; background: white; cursor: pointer; }
.notification-button { position: relative; }
.notification-button span { position: absolute; top: 7px; right: 7px; color: var(--orange); font-size: .65rem; }
.page { width: 100%; margin: 0 auto; padding: 34px clamp(20px, 4vw, 52px) 80px; }
.page-heading { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; margin-bottom: 26px; }
.eyebrow { margin: 0 0 6px; color: var(--orange); font-size: .76rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 6px; font-size: clamp(1.75rem, 3vw, 2.35rem); line-height: 1.1; letter-spacing: -.035em; }
h2 { font-size: 1.1rem; letter-spacing: -.015em; }
h3 { font-size: 1rem; }
.subtitle { margin: 0; color: var(--muted); }
.primary-button, .secondary-button, .text-button, .chip, .segmented button { min-height: 40px; border-radius: 10px; cursor: pointer; }
.primary-button { display: inline-flex; gap: 8px; align-items: center; justify-content: center; padding: 0 17px; border: 1px solid var(--orange); color: white; background: var(--orange); font-weight: 750; box-shadow: 0 5px 16px rgba(255,106,61,.2); }
.secondary-button { display: inline-flex; gap: 8px; align-items: center; justify-content: center; padding: 0 15px; border: 1px solid var(--line); background: white; font-weight: 700; }
.text-button { padding: 0; border: 0; background: transparent; color: var(--navy-700); font-weight: 750; }

.today-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: 20px; }
.today-work { display: grid; gap: 14px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 3px 12px rgba(3,27,42,.035); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 14px; }
.card-header > div { display: flex; align-items: center; gap: 10px; }
.card-header h2 { margin: 0; }
.work-group .card-header { padding-block: 15px 11px; }
.work-kind { display: inline-grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; font-weight: 850; }
.conversation-kind { color: var(--navy-700); background: var(--blue-100); }
.wa-image-link { display: block; margin-top: 8px; }
.wa-image { display: block; max-width: min(100%, 420px); max-height: 420px; border-radius: 10px; border: 1px solid var(--line); }
.ticket-kind { color: #9d3e22; background: var(--orange-soft); }
.task-kind { color: #087767; background: var(--teal-soft); }
.count-label { color: var(--muted); font-size: .84rem; }
.work-list { display: grid; }
.work-item { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 12px; align-items: start; padding: 16px 20px; border-top: 1px solid #edf2f4; cursor: pointer; }
.work-item:hover { background: #f9fbfc; }
.work-item.unread { box-shadow: inset 3px 0 var(--orange); }
.channel-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--navy-800); background: var(--blue-100); font-size: .88rem; font-weight: 850; }
.channel-icon.whatsapp { color: #087f6e; background: var(--teal-soft); }
.channel-icon.task { color: var(--amber); background: var(--amber-soft); }
.channel-icon.ticket { color: #ad4323; background: var(--orange-soft); }
.work-copy { min-width: 0; }
.work-title-row { display: flex; gap: 8px; align-items: center; min-width: 0; }
.work-copy b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.work-copy p { overflow: hidden; margin: 5px 0 0; color: var(--muted); font-size: .89rem; white-space: nowrap; text-overflow: ellipsis; }
.work-meta { display: grid; justify-items: end; gap: 8px; color: var(--muted); font-size: .75rem; }
.priority-dot { width: 8px; height: 8px; background: var(--orange); border-radius: 50%; }
.tag, .status { display: inline-flex; align-items: center; min-height: 25px; padding: 3px 9px; border-radius: 999px; background: var(--blue-100); color: var(--navy-700); font-size: .72rem; font-weight: 750; white-space: nowrap; }
.status.active { background: var(--teal-soft); color: #087767; }
.status.watch { background: var(--amber-soft); color: #8e590d; }
.status.former { background: #eef1f3; color: #61717a; }
.status.new { background: var(--orange-soft); color: #b64a29; }
.tag.urgent { color: white; background: var(--red); }
.tag.high { color: #97411e; background: var(--orange-soft); }
.tag.normal { color: var(--navy-700); background: var(--blue-100); }
.urgent-line { box-shadow: inset 3px 0 var(--red); }
.side-stack { display: grid; gap: 20px; }
.metric-card { padding: 20px; overflow: hidden; position: relative; }
.metric-card::after { content: ""; position: absolute; right: -42px; top: -45px; width: 130px; height: 130px; border: 18px solid var(--blue-100); border-radius: 50%; opacity: .8; }
.metric-card strong { display: block; margin: 8px 0 3px; font-size: 2rem; letter-spacing: -.04em; }
.metric-card p { margin: 0; color: var(--muted); font-size: .88rem; }
.progress { height: 7px; margin-top: 17px; overflow: hidden; background: var(--blue-100); border-radius: 10px; }
.progress i { display: block; width: 72%; height: 100%; background: var(--teal); border-radius: inherit; }
.quick-card { padding: 20px; color: white; background: var(--navy-900); border: 0; }
.quick-card p { color: #b8ced8; font-size: .9rem; }
.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.quick-actions button { min-height: 46px; padding: 8px; border: 1px solid rgba(255,255,255,.15); border-radius: 11px; background: rgba(255,255,255,.08); color: white; cursor: pointer; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.filter-input { min-width: 220px; flex: 1; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 11px; background: white; outline: none; }
.filter-input:focus { border-color: var(--navy-700); box-shadow: 0 0 0 3px rgba(18,81,110,.1); }
.chip { padding: 0 13px; border: 1px solid var(--line); background: white; color: var(--muted); font-size: .86rem; font-weight: 700; }
.chip.active { border-color: var(--navy-800); color: white; background: var(--navy-800); }
.contact-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.3fr); gap: 20px; }
.contact-table { overflow: hidden; }
.contact-row { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 15px 18px; border-top: 1px solid #edf2f4; cursor: pointer; }
.contact-row:first-child { border-top: 0; }
.contact-row:hover, .contact-row.selected { background: var(--blue-50); }
.contact-row.selected { box-shadow: inset 3px 0 var(--orange); }
.contact-row p { margin: 4px 0 0; color: var(--muted); font-size: .82rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.contact-detail { min-height: 600px; overflow: hidden; }
.detail-hero { padding: 24px; color: white; background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); }
.detail-name { display: flex; align-items: center; gap: 15px; }
.detail-name .avatar { width: 54px; height: 54px; border-radius: 16px; background: var(--orange); }
.detail-name h2 { margin: 0 0 5px; font-size: 1.35rem; }
.detail-name p { margin: 0; color: #bdd3dc; font-size: .86rem; }
.detail-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 9px; margin-top: 20px; }
.detail-actions button { min-height: 43px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; background: rgba(255,255,255,.1); color: white; cursor: pointer; }
.detail-body { padding: 22px; }
.info-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
.info-box { padding: 12px; border: 1px solid var(--line); border-radius: 11px; }
.info-box small { display: block; color: var(--muted); font-size: .72rem; }
.info-box b { display: block; margin-top: 4px; font-size: .88rem; }
.detail-section { padding-top: 20px; border-top: 1px solid var(--line); }
.timeline { position: relative; display: grid; gap: 18px; padding-left: 23px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 7px; bottom: 12px; width: 2px; background: var(--line); }
.timeline-item { position: relative; }
.timeline-item::before { content: ""; position: absolute; left: -22px; top: 5px; width: 10px; height: 10px; border: 3px solid white; background: var(--teal); border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
.timeline-item p { margin: 4px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.timeline-item time { color: var(--muted); font-size: .73rem; }
.clickable-timeline { cursor: pointer; }
.clickable-timeline:hover b { color: var(--navy-700); text-decoration: underline; }
.detail-tabs { display: none; }
.detail-timeline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; margin-top: 22px; }
.detail-timeline-grid .detail-section { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 13px; }
.support-hero { background: linear-gradient(135deg, #173b4d, #276a73); }
.support-facts { display: grid; gap: 10px; }
.support-facts > div { padding: 14px; border: 1px solid var(--line); border-radius: 11px; }
.support-facts small, .ticket-outcome small { display: block; margin-bottom: 5px; color: var(--muted); font-size: .72rem; }
.support-facts p { margin: 5px 0 0; color: var(--muted); font-size: .84rem; }
.support-contact-fields { display: grid !important; grid-template-columns: 1fr 1fr; align-items: start !important; }
.support-contact-fields label { display: grid !important; gap: 7px !important; }
.deployment-list { display: grid; }
.deployment-list > div { display: flex; gap: 11px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.deployment-list > div:first-child { border-top: 0; }

.ticket-layout { display: grid; grid-template-columns: minmax(340px, .9fr) minmax(440px, 1.25fr); gap: 20px; }
.ticket-list { overflow: hidden; align-self: start; }
.ticket-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: start; padding: 17px 18px; border-top: 1px solid #edf2f4; cursor: pointer; }
.ticket-row:first-child { border-top: 0; }
.ticket-row:hover, .ticket-row.selected { background: var(--blue-50); }
.ticket-row.selected { box-shadow: inset 3px 0 var(--orange); }
.ticket-number { display: inline-flex; width: fit-content; padding: 4px 8px; border: 1px solid #ccdce3; border-radius: 7px; color: var(--navy-700); background: white; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.ticket-row-title { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.ticket-row p { margin: 5px 0 4px; color: var(--muted); font-size: .82rem; }
.ticket-row small { color: var(--muted); font-size: .75rem; }
.ticket-row-meta { display: grid; justify-items: end; gap: 8px; }
.ticket-row-meta time { color: var(--muted); font-size: .72rem; }
.ticket-detail { align-self: start; overflow: hidden; }
.ticket-detail-head { padding: 24px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, white, #f8fbfc); }
.ticket-title-line { display: flex; gap: 9px; align-items: center; margin-bottom: 13px; }
.ticket-detail-head h2 { margin-bottom: 7px; font-size: 1.4rem; }
.ticket-detail-head > p { color: var(--muted); }
.ticket-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.ticket-detail-body { padding: 22px; }
.ticket-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.ticket-facts > div { padding: 13px; border: 1px solid var(--line); border-radius: 11px; }
.ticket-facts small { display: block; margin-bottom: 4px; color: var(--muted); font-size: .72rem; }
.ticket-facts b { font-size: .86rem; }
.ticket-outcome { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ticket-outcome > div { padding: 13px; border-radius: 11px; background: var(--blue-50); }
.ticket-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.ticket-metrics .card { padding: 15px; }
.ticket-metrics small { display: block; color: var(--muted); font-size: .75rem; }
.ticket-metrics b { display: block; margin-top: 5px; font-size: 1.2rem; }
.ticket-advanced-filters { margin-top: -6px; }
.ticket-advanced-filters select { min-height: 39px; padding: 8px 30px 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--ink); }

.inbox-page { padding-bottom: 16px; }
.inbox-layout { display: grid; grid-template-columns: minmax(310px, .78fr) minmax(0, 1.45fr); grid-template-rows: minmax(0, 1fr); height: calc(100dvh - 310px); min-height: 0; overflow: hidden; }
.thread-list { border-right: 1px solid var(--line); min-height: 0; overflow-y: auto; }
.thread-item { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 11px; padding: 17px; border-bottom: 1px solid var(--line); cursor: pointer; }
.thread-item.selected { background: var(--blue-50); box-shadow: inset 3px 0 var(--orange); }
.thread-item p { margin: 5px 0 0; color: var(--muted); font-size: .84rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.thread-head { display: flex; justify-content: space-between; gap: 8px; }
.thread-head time { color: var(--muted); font-size: .72rem; }
.conversation { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.conversation > :not(.message-area) { flex-shrink: 0; }
.conversation .message-area { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.message-area > * { flex-shrink: 0; }
.conversation .email-feedback:empty { display: none; }
.conversation-head { display: flex; align-items: center; gap: 12px; padding: 17px 20px; border-bottom: 1px solid var(--line); }
.conversation-head > div:nth-child(2) { min-width: 0; flex: 1; }
.conversation-head h2 { margin: 0; }
.conversation-head p { margin: 3px 0 0; color: var(--muted); font-size: .82rem; }
.conversation-actions { display: flex; justify-content: flex-end; gap: 15px; align-items: center; min-height: 44px; padding: 7px 20px; border-bottom: 1px solid var(--line); background: #fbfcfd; }
.conversation-actions span { margin-right: auto; color: var(--muted); font-size: .78rem; }
.message-area { display: flex; flex: 1; flex-direction: column; gap: 15px; padding: 24px; background: #f8fafb; }
.message { width: fit-content; max-width: 75%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 4px 15px 15px 15px; background: white; line-height: 1.45; box-shadow: 0 2px 7px rgba(3,27,42,.035); }
.message.out { align-self: flex-end; color: white; background: var(--navy-800); border-color: var(--navy-800); border-radius: 15px 4px 15px 15px; }
.message time { display: block; margin-top: 7px; color: inherit; opacity: .65; font-size: .7rem; }
.composer { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 16px; border-top: 1px solid var(--line); }
.composer textarea { min-height: 46px; max-height: 120px; resize: vertical; padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; outline: none; }
.composer textarea:focus { border-color: var(--navy-700); }

.task-list { overflow: hidden; }
.task-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 17px 20px; border-top: 1px solid var(--line); }
.task-row:first-child { border-top: 0; }
.task-check { width: 23px; height: 23px; border: 2px solid #b9c8d0; border-radius: 7px; background: white; cursor: pointer; }
.task-row.done { opacity: .6; }
.task-row.done .task-check { background: var(--teal); border-color: var(--teal); }
.task-row.done .task-check::after { content: "✓"; color: white; }
.task-row.done b { text-decoration: line-through; }
.task-row p { margin: 4px 0 0; color: var(--muted); font-size: .84rem; }
.task-row-actions { display: grid; justify-items: end; gap: 5px; }
.due { color: var(--muted); font-size: .8rem; }
.due.late { color: var(--red); font-weight: 750; }
.compact-empty { padding: 22px; }
.call-summary { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: white; }
.call-summary p { margin: 5px 0; color: var(--muted); }
.call-summary time { color: var(--muted); font-size: .75rem; }
.subscription-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 18px; }
.subscription-metrics .card { padding: 18px; }
.subscription-metrics small { color: var(--muted); }
.subscription-metrics strong { display: block; margin: 8px 0 4px; font-size: 1.5rem; color: var(--navy-900); }
.subscription-metrics p { margin: 0; color: var(--muted); font-size: .8rem; }
.subscription-list { overflow: hidden; }
.subscription-list-head, .subscription-row { display: grid; grid-template-columns: 1.3fr .8fr .85fr .8fr auto; gap: 15px; align-items: center; padding: 15px 18px; }
.subscription-list-head { color: var(--muted); background: var(--canvas); font-size: .76rem; }
.subscription-row { border-top: 1px solid var(--line); cursor: pointer; }
.subscription-row:hover { background: var(--blue-50); }
.subscription-row p { margin: 4px 0 0; color: var(--muted); font-size: .8rem; }
.subscription-row small { display: block; margin-bottom: 4px; color: var(--muted); font-size: .72rem; }
.narrow-page { max-width: 980px; }
.release-list { display: grid; gap: 13px; }
.release-card { display: grid; grid-template-columns: 105px 1fr; gap: 20px; padding: 20px; }
.release-version { display: grid; align-content: start; justify-items: start; gap: 7px; }
.release-version span { color: var(--navy-900); font-size: 1.15rem; font-weight: 900; }
.release-version em { padding: 4px 7px; border-radius: 7px; color: #126b5e; background: var(--teal-soft); font-size: .7rem; font-style: normal; font-weight: 800; }
.release-heading { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.release-heading h2 { margin: 0; font-size: 1.05rem; }
.release-heading time { color: var(--muted); font-size: .76rem; }
.release-card ul { margin: 10px 0 0; padding-left: 20px; color: var(--muted); line-height: 1.65; }

.empty-state { padding: 54px 24px; text-align: center; }
.empty-state .empty-icon { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 15px; border-radius: 16px; background: var(--blue-100); color: var(--navy-700); font-size: 1.4rem; }
.empty-state p { color: var(--muted); }
.search-dialog { width: min(1200px, calc(100vw - 24px)); max-height: min(680px, 85vh); margin-top: 10vh; padding: 0; border: 0; border-radius: 17px; box-shadow: 0 28px 80px rgba(3,27,42,.28); }
.search-dialog::backdrop { background: rgba(3,27,42,.48);  }
.search-box { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.search-box input { min-width: 0; height: 42px; border: 0; outline: 0; font-size: 1rem; }
.search-box button { width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--canvas); cursor: pointer; }
.global-results { max-height: 500px; overflow: auto; }
.global-results .contact-row { padding-inline: 20px; }
.result-section-title { padding: 13px 20px 7px; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.recent-row { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 13px 20px; border-top: 1px solid #edf2f4; cursor: pointer; }
.recent-row:hover { background: var(--blue-50); }
.recent-row small { display: block; margin-top: 3px; color: var(--muted); font-size: .78rem; }
.recent-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--navy-700); background: var(--blue-100); font-weight: 850; }

.form-dialog { width: min(820px, calc(100vw - 24px)); max-height: min(880px, 92vh); padding: 0; border: 0; border-radius: 18px; box-shadow: 0 28px 80px rgba(3,27,42,.28); }
.form-dialog::backdrop { background: rgba(3,27,42,.52);  }
.form-dialog form { display: flex; flex-direction: column; max-height: 92vh; }
.form-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 19px 22px; border-bottom: 1px solid var(--line); }
.form-dialog-head h2, .form-dialog-head p { margin-bottom: 0; }
.form-dialog-body { overflow: auto; padding: 20px 22px 26px; }
.customer-picker > label { display: flex; justify-content: space-between; margin-bottom: 8px; font-weight: 800; }
.customer-picker > label strong { color: var(--red); font-size: .72rem; text-transform: uppercase; }
.customer-picker .filter-input { width: 100%; }
.picker-caption { margin: 13px 0 5px; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.picker-results { display: grid; }
.picker-customer, .selected-customer { width: 100%; display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: white; text-align: left; }
.picker-customer { margin-top: 7px; cursor: pointer; }
.picker-customer:hover { border-color: var(--navy-700); background: var(--blue-50); }
.picker-customer small, .selected-customer small { display: block; margin-top: 3px; color: var(--muted); }
.selected-customer { margin-top: 10px; border-color: var(--teal); background: var(--teal-soft); }
.selected-customer button { border: 0; background: transparent; color: var(--navy-700); font-weight: 800; cursor: pointer; }
.picker-empty { padding: 16px; color: var(--muted); background: var(--canvas); border-radius: 10px; }
.ticket-form-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.ticket-form-fields.is-disabled { display: none; }
.ticket-form-fields > label { display: grid; gap: 7px; color: var(--ink); font-size: .82rem; font-weight: 750; }
.ticket-form-fields input:not([type="checkbox"]):not([type="radio"]), .ticket-form-fields select, .ticket-form-fields textarea { width: 100%; min-height: 43px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--ink); outline: none; }
.ticket-form-fields input:focus, .ticket-form-fields select:focus, .ticket-form-fields textarea:focus { border-color: var(--navy-700); box-shadow: 0 0 0 3px rgba(18,81,110,.1); }
.ticket-form-fields label small { color: var(--muted); font-size: .71rem; font-weight: 500; line-height: 1.4; }
.ticket-form-fields .wide { grid-column: 1 / -1; }
.ticket-form-fields fieldset { display: flex; gap: 16px; align-items: center; min-height: 68px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; }
.ticket-form-fields fieldset.wide { grid-column: 1/-1; }
.ticket-form-fields legend { padding: 0 5px; color: var(--muted); font-size: .76rem; font-weight: 750; }
.ticket-form-fields fieldset label, .check-line { display: flex !important; gap: 7px !important; align-items: center; }
.form-dialog-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 15px 22px; border-top: 1px solid var(--line); background: white; }
.dialog-field { display: grid; gap: 8px; font-size: .86rem; font-weight: 750; }
.dialog-field textarea { width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); font: inherit; resize: vertical; }
.toast { position: fixed; z-index: 50; right: 22px; bottom: 22px; padding: 13px 17px; color: white; background: var(--navy-950); border-radius: 11px; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.bottom-nav { display: none; }
.login-screen { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: linear-gradient(145deg, var(--navy-950), var(--navy-700)); }
.login-screen[hidden] { display: none; }
.login-card { width: min(430px, 100%); padding: 34px; border-radius: 20px; background: white; box-shadow: 0 30px 90px rgba(0,0,0,.3); }
.login-card .brand-mark { margin-bottom: 26px; }
.login-card h1 { margin: 5px 0 8px; font-size: 1.7rem; }
.login-card > p:not(.eyebrow):not(.form-error) { margin: 0 0 24px; color: var(--muted); }
.login-card label, .contact-form-fields label { display: grid; gap: 7px; margin-top: 14px; font-size: .82rem; font-weight: 750; }
.login-card input, .contact-form-fields input:not([type="checkbox"]) { min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font: inherit; }
.login-card .primary-button { width: 100%; margin-top: 20px; }
.form-error { min-height: 20px; margin: 10px 0 0; color: var(--red); font-size: .82rem; }
.compact-dialog { width: min(600px, calc(100vw - 24px)); }
.contact-form-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.contact-form-fields .wide { grid-column: 1/-1; }
.identifier-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.identifier-section .card-header { padding: 0 0 9px; }
.identifier-section h3 { margin: 0; font-size: .95rem; }
.identifier-list { display: grid; gap: 8px; }
.identifier-row { display: grid; grid-template-columns: 1.15fr .85fr auto; gap: 8px; align-items: center; }
.identifier-row input { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; font: inherit; }
.identifier-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.identifier-summary > div:last-child { grid-column: 1/-1; }
.identifier-summary small, .identifier-summary b { display: block; }
.identifier-summary small { margin-bottom: 6px; color: var(--muted); }
.identifier-summary b { margin-top: 5px; }
.identifier-summary em { color: var(--muted); font-size: .72rem; font-style: normal; font-weight: 600; }
.duplicate-alert { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 18px; padding: 14px 16px; border: 1px solid #e6b761; border-radius: 12px; background: #fff7e8; }
.duplicate-alert p { margin: 4px 0 0; color: var(--muted); font-size: .82rem; }
.page-alert { margin-bottom: 14px; }
.admin-only { display: none; width: 100%; }
body[data-role="admin"] .admin-only { display: inline-flex; }
.users-list { display: grid; gap: 8px; margin-bottom: 18px; }
.user-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.user-row small { display: block; margin-top: 3px; color: var(--muted); }
.user-row span { color: var(--navy-700); font-size: .78rem; font-weight: 800; }
.user-create-fields { padding-top: 14px; border-top: 1px solid var(--line); }
.user-create-fields select { min-height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: white; }

@media (max-width: 920px) {
  .app-shell { grid-template-columns: 82px minmax(0,1fr); }
  .sidebar { align-items: center; padding-inline: 10px; }
  .brand > span:last-child, .main-nav a span:nth-child(2), .sidebar-bottom .sync-state, .user-button > span:not(.avatar) { display: none; }
  .brand { padding-inline: 0; }
  .main-nav a { grid-template-columns: 1fr; width: 52px; justify-items: center; padding: 0; }
  .main-nav em { position: absolute; margin: -29px 0 0 34px; }
  .user-button { display: block; border: 0; }
  .today-grid { grid-template-columns: 1fr; }
  .side-stack { grid-template-columns: 1fr 1fr; }
  .contact-layout, .ticket-layout { grid-template-columns: minmax(270px,.8fr) minmax(380px,1.2fr); }
  .ticket-metrics { grid-template-columns: 1fr 1fr; }
  .detail-timeline-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px), (max-height: 500px) and (max-width: 1000px) {
  body { background: white; }
  .app-shell { display: block; }
  .sidebar { display: none; }
  .topbar { height: 62px; padding: 0 15px; }
  .mobile-brand { display: flex; align-items: center; gap: 8px; }
  .mobile-brand .brand-mark { width: 28px; height: 28px; border-width: 2px; }
  .mobile-brand .brand-mark::before { width: 4px; height: 9px; top: -5px; }
  .mobile-brand .brand-mark::after { width: 9px; height: 4px; right: -5px; }
  .mobile-brand .brand-mark i { background: var(--navy-900); }
  .search-launch { width: 40px; min-height: 40px; margin-left: auto; justify-content: center; padding: 0; }
  .search-label, kbd { display: none; }
  .icon-button { margin-left: 0; }
  .mobile-avatar { display: inline-grid; width: 36px; height: 36px; }
  .page { padding: 24px 15px 96px; }
  .page-heading { align-items: center; margin-bottom: 20px; }
  .page-heading .primary-button { width: 42px; padding: 0; font-size: 0; }
  .page-heading .primary-button::first-letter { font-size: 1rem; }
  .today-grid { display: block; }
  .today-grid > .card { border-inline: 0; border-radius: 0; margin-inline: -15px; }
  .side-stack { grid-template-columns: 1fr 1fr; margin-top: 16px; gap: 10px; }
  .side-stack .card { padding: 16px; }
  .quick-card { grid-column: 1/-1; }
  .work-item { padding-inline: 15px; }
  .work-copy p { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
	.bottom-nav { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(6,1fr); padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255,255,255,.96); box-shadow: 0 -8px 25px rgba(3,27,42,.06); backdrop-filter: blur(15px); }
  .bottom-nav a { position: relative; display: grid; justify-items: center; gap: 2px; color: #71828c; }
  .bottom-nav a > span { font-size: 1.25rem; line-height: 1; }
  .bottom-nav a small { font-size: .69rem; font-weight: 700; }
  .bottom-nav a.active { color: var(--navy-900); }
  .bottom-nav a.active::before { content: ""; position: absolute; top: -8px; width: 32px; height: 3px; background: var(--orange); border-radius: 0 0 4px 4px; }
  .bottom-nav em { position: absolute; top: -4px; left: calc(50% + 8px); min-width: 17px; padding: 2px 5px; }
  .contact-layout, .ticket-layout { display: block; }
  .contact-detail, .ticket-detail, #support-point-detail { display: none; }
  .contact-detail.mobile-open, .ticket-detail.mobile-open, #support-point-detail.mobile-open { position: fixed; z-index: 30; inset: 0; display: block; overflow: auto; min-height: 100%; border: 0; border-radius: 0; background: white; }
  .detail-tabs { position: sticky; z-index: 2; top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 20px 0 0; padding: 4px; border-radius: 11px; background: var(--blue-100); }
  .detail-tabs button { min-height: 40px; padding: 7px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: .8rem; font-weight: 750; }
  .detail-tabs button.active { color: var(--navy-900); background: white; box-shadow: 0 2px 7px rgba(3,27,42,.08); }
  .detail-timeline-grid { display: block; margin-top: 12px; }
  .detail-timeline-grid .detail-section { border: 0; padding-inline: 0; }
  .timeline-panel.tab-hidden { display: none; }
  .financial-panel { display: none; }
  .financial-panel:not(.tab-hidden) { display: block; }
  .mobile-back { display: inline-flex !important; }
  .inbox-layout { display: block; height: auto !important; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
  .thread-list { border: 0; }
  .conversation { display: none; }
  .conversation.mobile-open { position: fixed; z-index: 30; inset: 0; display: flex; background: white; }
  .conversation.mobile-open .message-area { overflow: auto; }
  .conversation-actions { gap: 12px; padding-inline: 15px; }
  .conversation-actions span { display: none; }
  .ticket-row { grid-template-columns: minmax(0,1fr) auto; }
  .ticket-row > .ticket-number { grid-column: 1 / -1; }
  .ticket-outcome { grid-template-columns: 1fr; }
  .ticket-metrics { grid-template-columns: 1fr 1fr; }
  .ticket-metrics b { font-size: 1.05rem; }
  .form-dialog { width: 100vw; max-height: 100vh; height: 100vh; margin: 0; border-radius: 0; }
  .form-dialog form { max-height: 100vh; height: 100vh; }
	.contact-form-fields { grid-template-columns: 1fr; }
	.contact-form-fields .wide { grid-column: auto; }
	.identifier-row { grid-template-columns: 1fr auto; }
	.identifier-row [data-identifier-label] { grid-column: 1; }
	.identifier-summary { grid-template-columns: 1fr; }
	.identifier-summary > div:last-child { grid-column: auto; }
  .form-dialog-head, .form-dialog-body, .form-dialog-foot { padding-inline: 15px; }
  .ticket-form-fields { grid-template-columns: 1fr; }
  .support-contact-fields { grid-template-columns: 1fr; }
  .ticket-form-fields .wide, .ticket-form-fields fieldset.wide { grid-column: auto; }
  .message { max-width: 88%; }
  .toolbar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
  .filter-input { position: sticky; left: 0; min-width: 210px; }
  .task-row { grid-template-columns: auto minmax(0,1fr); }
  .task-row .due { grid-column: 2; }
	.subscription-metrics { grid-template-columns: 1fr; }
	.subscription-list-head { display: none; }
	.subscription-row { grid-template-columns: 1fr auto; }
	.subscription-row > div:not(:first-child) { grid-column: 1; }
	.release-card { grid-template-columns: 1fr; gap: 10px; }
	.release-heading { display: block; }
  .search-dialog { margin-top: 7vh; }
  .toast { left: 15px; right: 15px; bottom: 82px; text-align: center; }
}

@media (min-width: 701px) { .mobile-back { display: none !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }
[hidden] { display: none !important; }
.access-user { display: grid; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.access-user small { display: block; }
.role-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.permission-grid { display: grid; gap: 12px; border: 0; padding: 0; }
.permission-grid label, .access-user label { font-size: 1rem; }
.preserve-lines { white-space: pre-wrap; }
button:disabled { opacity: .55; cursor: not-allowed; }
[hidden] { display: none !important; }
.admin-page { max-width: 1100px; }
.admin-card { padding: 24px; margin-bottom: 20px; }
.admin-card h2 { margin: 0 0 10px; }
.admin-card p { line-height: 1.6; }
.admin-card .card-header { padding: 0; gap: 20px; flex-wrap: wrap; }
.admin-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 24px 0 14px; }
.admin-fields label:first-child { grid-column: 1 / -1; }
.admin-fields label { display: grid; gap: 8px; font-size: 14px; font-weight: 600; }
.admin-fields input { width: 100%; min-width: 0; padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; }
.admin-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 18px 0; }
.admin-import { border-top: 1px solid #e2e8f0; margin-top: 24px; padding-top: 16px; }
.import-number { display: grid; gap: 8px; max-width: 360px; font-size: 14px; font-weight: 600; }
.import-number input { padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; }
.woo-addresses { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 18px; }
.woo-order { border-top: 1px solid #e2e8f0; padding: 16px 0; }
.woo-order summary { cursor: pointer; }
.woo-order summary span { display: block; margin-top: 6px; font-size: 14px; }
#import-status { padding: 16px; background: #f1f5f9; border-radius: 10px; overflow-wrap: anywhere; }
@media(max-width:650px) { .admin-fields { grid-template-columns: 1fr; } .admin-card { padding: 18px; } }

.status.danger { background: var(--red-soft); color: #a82732; }
.primary-button[data-action="close-ticket-now"] { background: #168348; border-color: #168348; box-shadow: none; }
.info-strip { grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); }
.inline-field { display: block; width: 100%; padding: 6px 0; border: 0; border-bottom: 1px dashed var(--line); background: transparent; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.inline-field:hover, .inline-field:focus-visible { background: var(--blue-50); }
.inline-editor { display: grid; gap: 8px; }
.signature-field { display: grid; gap: 8px; margin: 20px 0; }
.signature-field textarea { width: 100%; padding: 12px; font: inherit; border: 1px solid var(--line); border-radius: 8px; }
.admin-mobile-nav { display: none; }
.admin-nav-heading { padding: 0 13px 15px; margin: 0 0 7px; border-bottom: 1px solid rgba(255,255,255,.12); }
.admin-nav-heading h2 { margin: 0 0 6px; color: white; font-size: 1.05rem; font-weight: 700; line-height: 1.4; }
#admin-nav > a { display: flex; }
#admin-nav .admin-nav-back { display: flex; gap: 7px; min-height: 34px; padding: 4px 0; font-size: .78rem; font-weight: 500; line-height: 1.5; }
#admin-nav .admin-nav-back:hover { background: none; color: white; }
#admin-nav .admin-nav-back:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.message { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .admin-mobile-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
}
.inline-editor input, .inline-editor select, .inline-editor textarea { width: 100%; min-width: 0; padding: 8px; }
.inline-editor select[multiple] { min-height: 110px; }
.inline-error { color: #a82732; }
.access-user input[data-user-name] { width: 100%; min-width: 100px; }
@media(min-width:1100px) { .contact-layout, .ticket-layout { grid-template-columns: minmax(320px,.7fr) minmax(0,1.6fr); } }
/* Release 0.6.4: role matrix, prominent subscription status and appointments. */
.role-matrix-scroll { overflow-x: auto; max-width: 100%; }
.role-matrix { border-collapse: collapse; min-width: 650px; width: 100%; }
.role-matrix caption { text-align: left; padding: 12px 0; color: #52616b; }
.role-matrix th, .role-matrix td { padding: 12px; border-bottom: 1px solid #dce5e7; }
.role-matrix td { text-align: center; }
.role-matrix tbody th { text-align: left; font-weight: 500; }
.role-matrix input { width: 20px; height: 20px; accent-color: #087b50; }
#users-dialog { width: min(1200px, calc(100vw - 32px)); max-width: calc(100vw - 32px); }
.subscription-status strong { display: block; font-size: clamp(22px, 2vw, 30px); line-height: 1.2; }
.info-box.subscription-status.active { background: #087b50; color: white; border-color: #087b50; }
.info-box.subscription-status.active small { color: #e5fff1; }
.info-box.subscription-status.watch { background: #fff0b3; color: #684500; border-color: #e6bb36; }
.info-box.subscription-status.danger, .info-box.subscription-status.former { background: #ffe0e0; color: #8b1717; border-color: #eeb3b3; }
.maintenance-badge { display: inline-block; padding: 5px 9px; border-radius: 6px; background: #e9e5ff; color: #493887; font-size: 12px; font-weight: 700; }
.boat-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 16px 0; }
.boat-fields div { min-width: 0; }
.boat-fields dt { color: var(--muted, #657080); font-size: 12px; margin-bottom: 4px; }
.boat-fields dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* Compact counts belong to their entity page, above filters. */
.page-statistics{display:flex;flex-wrap:wrap;gap:12px 30px;padding:15px 20px;margin:0 0 18px;background:var(--surface,#fff);border:1px solid var(--border,#e3e8ed);border-radius:12px}
.page-statistics>div{display:flex;flex-direction:column;gap:4px;min-width:115px}
.page-statistics small{color:var(--muted,#637080);font-size:12px}
.page-statistics strong{font-size:23px;line-height:1.15;font-variant-numeric:tabular-nums}
@media(max-width:600px){.page-statistics{gap:14px 20px;padding:14px}.page-statistics>div{min-width:100px;flex:1}}

.hub-ticket-row{display:flex;width:100%;justify-content:space-between;gap:20px;padding:16px 0;text-align:left;background:none;border:0;border-bottom:1px solid #e3e8ed;cursor:pointer;color:inherit}.hub-ticket-row small{display:block;margin-top:5px;color:#637080}.hub-source-data{white-space:pre-wrap;overflow-wrap:anywhere;max-height:450px;overflow:auto;background:#f5f7fa;padding:12px;font-size:12px}.hub-field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}#hub-ticket-dialog{width:min(1100px,95vw)}#hub-ticket-dialog details{margin:14px 0}#hub-ticket-dialog summary{cursor:pointer}#hub-admin form{margin:18px 0}#hub-admin input[type=checkbox]{width:auto}#hub-admin details{margin-bottom:18px}

.support-portal{display:block;overflow:auto;background:#f3f6f8}.support-shell{max-width:800px;margin:0 auto;padding:28px 18px}.support-shell .card{margin:20px 0}.support-shell form{display:grid;gap:16px}.support-shell label{display:grid;gap:8px}.share-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}.share-fields dt{font-size:13px;color:#566575}.share-fields dd{margin:6px 0;font-weight:600}.share-checks{display:grid;grid-template-columns:1fr 1fr;gap:12px}.share-checks label{display:flex;gap:8px}.share-checks input{width:auto}.shared-photo{max-width:100%;height:auto}.closure-proposal{border-left:4px solid #e1a220;background:#fffae9;padding:16px}.support-shell textarea{width:100%}
/* Issues and deliberate customer comparison. */
.issues-section { padding:24px; margin-bottom:24px; }
.issue-row { display:flex; justify-content:space-between; align-items:center; gap:24px; width:100%; padding:18px 4px; text-align:left; background:transparent; color:inherit; border:0; border-bottom:1px solid #dbe5eb; cursor:pointer; }
.issue-row:hover,.issue-row:focus-visible { background:#edf5f8; }
.issue-row small { display:block; margin-top:6px; color:#537082; overflow-wrap:anywhere; }
.issue-row>span:last-child { flex-shrink:0; font-weight:700; }
.merge-dialog { width:min(1180px,96vw); max-width:1180px; }
.merge-dialog form { max-height:min(880px,92vh); }
.merge-dialog .form-dialog-head,.merge-dialog .form-dialog-foot {flex-shrink:0;}
.merge-dialog .form-dialog-body {min-height:0;}
.merge-selectors label {display:grid;gap:8px;font-weight:700;min-width:0;}
.merge-selectors select {width:100%;min-width:0;padding:10px;border:1px solid var(--line);border-radius:8px;background:white;color:var(--ink);font:inherit;}
#issue-dialog[open] {display:flex;flex-direction:column;}
#issue-dialog .form-dialog-body {min-height:0;}
#issue-dialog .form-dialog-head,#issue-dialog .form-dialog-foot {flex-shrink:0;}
.merge-selectors,.merge-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.merge-selectors { margin-bottom:20px; }
.merge-card { border:1px solid #dbe5eb; border-radius:12px; padding:20px; overflow-wrap:anywhere; }
.merge-card:has(input:checked) { border-color:#147493; background:#f2f8fa; }
.merge-card h3 { font-size:24px; }
.merge-card h4 { margin:22px 0 8px; }
.merge-card .detail-section { padding:16px 0; }
.merge-card dd { margin:4px 0 14px; }
.merge-card dt { color:#537082; }
.merge-choice { display:flex; align-items:center; gap:10px; margin:20px 0 8px; font-weight:700; }
.merge-choice input { width:20px; height:20px; flex:none; }
@media(max-width:650px) { .merge-comparison,.merge-selectors { gap:8px; } .merge-card {padding:10px;} .merge-card h3{font-size:18px;} .merge-dialog .form-dialog-body{padding:12px;} .issue-row{gap:10px;} }
/* Shared ticket workspace */
.ticket-workspace .toolbar{flex-wrap:wrap;overflow:visible;gap:10px}.ticket-workspace .toolbar select{border:1px solid #cbd9e2;padding:10px;border-radius:8px;background:white;color:#143445;max-width:100%}
.location-search-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.location-suggestion{display:block;width:100%;padding:12px;text-align:left;border:1px solid #cbd9e2;background:#f4f8fa;border-radius:8px;margin-top:6px}.location-suggestion small{display:block;color:#537084}
.source-badge{font-size:11px;border:1px solid #cbd9e2;border-radius:5px;padding:2px 6px;font-weight:600;color:#426173;white-space:nowrap}
.ticket-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:44rem;white-space:normal}
.crm-map{height:420px;width:100%;border-radius:10px;background:#eaf0f3;z-index:0}
.map-legend,#ticket-map-caption{padding:12px 16px;margin:0}.assistance-forecast{margin-top:20px;padding:24px}
.workspace-dialog{width:min(800px,94vw);max-height:92vh;padding:24px;border:1px solid #cbd9e2;border-radius:14px;color:#143445;overflow:auto}
.workspace-dialog::backdrop{background:#102e4266}.workspace-dialog label{display:block;margin:12px 0}
.workspace-dialog input:not([type=checkbox]),.workspace-dialog select{display:block;width:100%;border:1px solid #bacfdc;border-radius:7px;padding:10px;margin-top:5px}
.workspace-dialog .dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}
.operation-row{display:grid;grid-template-columns:1fr 1fr 1.5fr auto;gap:8px;align-items:center;margin-top:12px}
.coordinate-fields{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:650px){.operation-row{grid-template-columns:1fr 1fr}.crm-map{height:320px}.workspace-dialog{padding:16px}}
@media(max-width:650px){.ticket-workspace .page-heading>.primary-button{font-size:0;min-width:42px}.ticket-workspace .page-heading>.primary-button:before{content:'+';font-size:24px}.ticket-workspace .toolbar .filter-input{min-width:100%;width:100%}}
.subscription-row .subscription-customer{font-size:19px;line-height:1.35;font-weight:750;color:#12374b}.subscription-row .subscription-name{font-size:14px;line-height:1.5;margin:5px 0 0;color:#537084}.subscription-identity{min-width:0;overflow-wrap:anywhere}
:root { --voip-highlight: #edf7f4; }
.voip-pinned { width:100%; text-align:left; background:var(--voip-highlight); border:1px solid #b5d8cb; border-radius:10px; }
.voip-pinned small { display:block; margin-top:4px; }
.voip-call { display:flex; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid #dce5ea; }
.voip-call p { margin:5px 0; }
#voip-settings-form .check-row, #voip-link-form .check-row { display:flex; align-items:flex-start; gap:8px; margin:12px 0; }
.voip-call > div:last-child { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
@media(max-width:640px) { .voip-call { flex-direction:column; } }

#voip-live-banner{position:sticky;top:0;z-index:1200;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 24px;background:#e0f2ec;border-bottom:2px solid #168567;color:#103d32;box-shadow:0 2px 8px #0001}#voip-live-banner button{flex-shrink:0}@media(max-width:600px){#voip-live-banner{padding:8px 12px;flex-wrap:wrap}}
#system-health-banner { padding: 12px 20px; background: #fff0d0; color: #643d00; border-bottom: 2px solid #c47700; position: relative; z-index: 1300; }
body #voip-live-banner{padding:0;gap:0;flex-wrap:nowrap}
#voip-live-banner .voip-banner-main{flex:1;min-width:0;align-self:stretch;padding:14px 24px;background:transparent;border:0;border-radius:0;color:inherit;text-align:left;font:inherit;white-space:normal}
#voip-live-banner button.voip-banner-main{cursor:pointer}
#voip-live-banner button.voip-banner-main:hover{background:#00000008}
#voip-live-banner [data-voip-dismiss]{margin:6px 12px;flex-shrink:0}
.wa-reply { padding: 16px; border-top: 1px solid var(--border); display: grid; gap: 10px; }
.wa-reply label, .wa-template-fields label { display: grid; gap: 6px; }
.wa-reply textarea { width: 100%; min-height: 90px; resize: vertical; }
.wa-actions { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.wa-template-fields { display: grid; gap: 12px; }
.wa-template-preview { white-space: pre-wrap; overflow-wrap: anywhere; padding: 16px; border: 1px solid #d5dde2; border-radius: 10px; background: #f4f8f6; }
.wa-template-row { padding: 10px 0; border-bottom: 1px solid #d5dde2; overflow-wrap: anywhere; }

/* Desktop workspace: grouped navigation, readable counts and persistent detail. */
.sidebar .main-nav { overflow-y: auto; min-height: 0; }
.admin-connections summary { padding: 13px 16px; cursor: pointer; font-weight: 750; border-radius: 9px; }
.admin-connections summary:hover { background: rgba(255,255,255,.08); color: white; }
#admin-nav a { display: block; width: auto; }
.sidebar-bottom .secondary-button { color: #123b50; }
.admin-subnav { margin: 0 0 12px 18px; padding-left: 10px; border-left: 2px solid #d6e3eb; }
.main-nav .admin-subnav a { padding: 10px 12px; font-size: .88rem; }
.integration-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 18px; }
.integration-link { display: block; padding: 24px; text-decoration: none; color: inherit; }
.integration-link:hover { border-color: #2583ad; background: #f6fbff; }
.integration-link p { color: var(--muted); min-height: 42px; line-height: 1.5; }
.integration-link span { color: #12648b; font-weight: 650; }
.workspace-tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.workspace-tabs a { padding: 12px 18px; color: #526775; text-decoration: none; border-bottom: 3px solid transparent; }
.workspace-tabs a[aria-current] { color: #12648b; border-color: #12648b; font-weight: 750; }
.users-page .form-dialog-body { max-height: none; overflow: visible; }
.list-pagination { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); background:var(--canvas); font-size:.82rem; }
.list-pagination:last-child { border-top:1px solid var(--line); border-bottom:0; }
.pagination-size,.pagination-pages { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.pagination-size label { display:flex; align-items:center; gap:8px; font-weight:650; }
.pagination-size select { padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:white; color:var(--ink); font:inherit; }
.pagination-pages .secondary-button { padding:6px 13px; min-height:34px; font-size:1.1rem; }
.pagination-pages button:disabled { opacity:.4; cursor:default; }
#contact-list,#ticket-list,#subscription-list { scroll-margin-top:24px; }
.membership-table-wrap { overflow-x:auto; margin:16px 0; }
.membership-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.membership-table th,.membership-table td { padding:12px 10px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
.membership-table th:first-child { text-align:left; }
.membership-table thead { background:var(--canvas); color:var(--muted); }
.users-page .admin-card { margin-bottom: 20px; }
.users-page #role-editor { scroll-margin-top: 85px; }
.main-nav em[data-level], .bottom-nav em[data-level], #today-count[data-level] { min-width: 28px; padding: 3px 7px; border: 1px solid transparent; font-weight: 800; font-variant-numeric: tabular-nums; }
.main-nav em[data-level=zero], .bottom-nav em[data-level=zero], #today-count[data-level=zero] { color: #657480; background: transparent; border-color: #ccd5db; }
.sidebar .main-nav em[data-level=zero] { color: #afc4cf; border-color: #718a98; }
.main-nav em[data-level=low], .bottom-nav em[data-level=low], #today-count[data-level=low] { color: #624b00; background: #ffe17b; border-color: #e7c548; }
.main-nav em[data-level=medium], .bottom-nav em[data-level=medium], #today-count[data-level=medium] { color: #6d2e00; background: #ffb768; border-color: #eb8f35; }
.main-nav em[data-level=high], .bottom-nav em[data-level=high], #today-count[data-level=high] { color: white; background: #c93737; border-color: #b02b2b; }
.inbox-update-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -6px 0 14px; color: var(--muted); font-size: .82rem; }
.thread-item.unread { border-left: 4px solid #e7a528; }
@media (min-width: 901px) {
 .contact-layout > .contact-detail { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 100px); min-height: 0; overflow: auto; scrollbar-gutter: stable; }
 .ticket-layout > .ticket-detail { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 100px); overflow: auto; scrollbar-gutter: stable; }
}
.ticket-customer-card { padding: 16px; margin: 16px 0; border: 1px solid #d2e1e9; border-radius: 10px; background: #f2f8fb; }
.ticket-customer-card > small { display: block; color: #526d7b; margin-bottom: 5px; }
.ticket-customer-link { display: block; width: 100%; border: 0; padding: 0; background: none; text-align: left; color: #095575; font-size: 1.2rem; font-weight: 750; cursor: pointer; }
.ticket-customer-link span { display: block; font-size: .84rem; font-weight: 600; margin-top: 7px; }
.ticket-customer-link:hover { text-decoration: underline; }
#share-settings-form { display: grid; gap: 18px; }
#share-settings-form > label { display: grid; gap: 8px; }
.wa-reply [role=status] { margin: 0; font-size: 13px; }
#wa-template-dialog { max-width: min(680px, calc(100vw - 24px)); }
#wa-template-dialog select { max-width: 100%; }
#wa-template-dialog select { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid #d5dde2; border-radius: 8px; background: white; font: inherit; }
#wa-template-dialog .check-row { display: flex; align-items: flex-start; gap: 10px; }
#wa-template-dialog .check-row input { width: auto; min-height: 0; margin: 3px 0 0; flex: none; }
.wa-reply textarea { padding: 12px; border: 1px solid #d5dde2; border-radius: 8px; font: inherit; }

.geo-input-wrap{display:flex;flex-direction:column;gap:8px}.geo-results:empty{display:none}.geo-results{max-height:230px;overflow:auto;border:1px solid var(--border,#d7e1e9);border-radius:8px}.geo-results button{display:block;width:100%;text-align:left;padding:10px;background:white;border:0;border-bottom:1px solid #e8edf2}.geo-results button:hover,.geo-results button:focus{background:#edf5fa}.geo-editor-map,.geo-mini-map{height:240px;min-height:240px;border-radius:10px;overflow:hidden}.geo-picked,.geo-credits{color:#597188;font-size:12px}.geo-overview{padding:20px;margin:14px 0}.geo-cluster{background:#085b8f;color:white;border:2px solid white;border-radius:50%;text-align:center;line-height:30px;font-weight:bold;box-shadow:0 1px 5px #0004}.geo-mini-map[hidden],.geo-editor-map[hidden],.geo-overview[hidden]{display:none}#geo-dialog{max-width:760px;width:90vw}#geo-form{display:flex;flex-direction:column;gap:14px}

.geo-pin{background:#d85c14;border:3px solid white;border-radius:50%;box-shadow:0 1px 6px #0008;cursor:grab}

.payment-row{padding:12px 0;border-bottom:1px solid var(--border,#ddd)}.payment-row p{margin:6px 0}.payment-row small{display:block}.payment-row .admin-actions{flex-wrap:wrap}#payment-dialog label,#payment-share-dialog label{display:grid;gap:6px;margin:12px 0}#payment-dialog input,#payment-share-dialog input,#payment-share-dialog textarea{width:100%;padding:10px}#payment-share-dialog .check-row{display:flex}#payment-share-dialog .check-row input{width:auto}

#payment-share-dialog button,#payment-dialog [data-payment-close],.payment-row button{border:1px solid #bdced9;border-radius:8px;background:#fff;padding:9px 12px;font:inherit;cursor:pointer}#payment-share-dialog textarea{border:1px solid #bdced9;border-radius:8px;font:inherit}#payment-share-dialog .form-dialog-foot{flex-wrap:wrap}

/* Shared email inbox */
.email-message-area{overflow:auto}.email-message{max-width:95%;margin:12px 0;padding:16px;background:#f4f7fa;border-radius:12px}.email-message.email-outbound{margin-left:auto;background:#e7f2fc}.email-message header{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between}.email-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}.email-warning{color:#904300;background:#fff3de;padding:10px;border-radius:6px}.email-feedback{padding:0 18px}.email-attachments{padding-left:20px}
#subscription-cancel-form { display: grid; gap: 16px; height: auto; max-height: none; align-content: start; }
#subscription-cancel-form > label { display: grid; gap: 7px; font-size: .9rem; font-weight: 650; }
#subscription-cancel-form > label[hidden] { display: none; }
#subscription-cancel-form select, #subscription-cancel-form textarea, #subscription-cancel-form input[type="date"] { width: 100%; min-width: 0; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: white; color: inherit; font: inherit; }
#subscription-cancel-form select, #subscription-cancel-form input[type="date"] { min-height: 44px; }
#subscription-cancel-form textarea { resize: vertical; }
#subscription-cancel-form > label:has(input[type="checkbox"]) { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; }
#subscription-cancel-form input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; }
#subscription-cancel-form small { font-weight: 400; }
#subscription-cancel-form p, #subscription-cancel-form .form-error:empty { margin: 0; }
#subscription-cancel-form .form-error:empty { display: none; }
#subscription-cancel-form .form-dialog-foot { padding: 16px 0 0; }

.email-reply-recipients { grid-column: 1 / -1; font-size: .8rem; }
.email-reply-recipients summary { cursor: pointer; color: var(--navy-700); }
.email-reply-recipients label { display: grid; gap: 4px; margin-top: 8px; }
.email-reply-recipients input { width: 100%; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.email-reply-recipients small { display: block; margin-top: 4px; }
#email-archive-dialog .thread-item { display: block; width: 100%; text-align: left; background: white; color: var(--navy-900); }
#email-archive-dialog .thread-item small { display: block; overflow-wrap: anywhere; margin: 6px 0; }
#email-archive-dialog .thread-item time { display: block; color: var(--muted); font-size: .8rem; margin-top: 6px; }
.email-recipient-suggestions { position: fixed; z-index: 100; overflow-y: auto; overscroll-behavior: contain; background: white; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px #001e3030; }
.email-recipient-suggestions button { display: block; width: 100%; min-height: 48px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); text-align: left; background: white; color: var(--navy-900); cursor: pointer; }
.email-recipient-suggestions button:hover, .email-recipient-suggestions button[aria-selected=true] { background: var(--blue-50); }
.email-recipient-suggestions strong, .email-recipient-suggestions small { display: block; overflow-wrap: anywhere; }
.email-recipient-suggestions small { margin-top: 3px; color: var(--muted); }
.task-link-field { min-width: 0; }
.task-link-suggestions { max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; margin-top: 5px; }
.task-link-suggestions button { display: block; width: 100%; min-height: 44px; padding: 10px; border: 0; border-bottom: 1px solid var(--line); background: white; text-align: left; color: var(--navy-900); overflow-wrap: anywhere; cursor: pointer; }
.task-link-suggestions button:hover, .task-link-suggestions button[aria-selected="true"] { background: var(--blue-50); }
.task-link-suggestions p { padding: 10px; }

.item-more-options { margin-left: auto; font-size: .85rem; color: var(--muted); }
.item-more-options summary { cursor: pointer; padding: 8px 0; }
.inbox-layout.with-customer { grid-template-columns: minmax(170px,.55fr) minmax(0,1.25fr) minmax(230px,.72fr); }
.inbox-layout.with-customer > .thread-list { display: block; }
.inbox-customer-pane { min-width: 0; min-height: 0; overflow: auto; border-left: 1px solid var(--line); }
.inbox-customer-toolbar { position: sticky; top: 0; z-index: 2; background: white; display: flex; align-items: center; justify-content: space-between; padding: 10px 15px; border-bottom: 1px solid var(--line); }
.inbox-customer-pane .contact-detail { border: 0; border-radius: 0; box-shadow: none; }
.inbox-customer-pane .detail-actions { flex-wrap: wrap; }
.inbox-customer-pane .info-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
.inbox-customer-pane .identifier-summary { grid-template-columns: 1fr; overflow-wrap: anywhere; }
.wa-image-picker { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.wa-image-picker input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.wa-image-picker:focus-within { outline: 2px solid var(--navy-700); outline-offset: 2px; }
.wa-image-picker:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.wa-image-draft { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wa-image-draft img { width: 64px; height: 56px; object-fit: contain; border-radius: 6px; }
.wa-image-draft span { overflow-wrap: anywhere; min-width: 0; flex: 1; }
.wa-reply .wa-actions { flex-wrap: wrap; }
.ticket-customer-phones { display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 10px; overflow-wrap: anywhere; }
.composer-resize-handle { grid-column: 1/-1; height: 16px; flex: 0 0 16px; width: 100%; cursor: ns-resize; touch-action: none; display: flex; justify-content: center; align-items: center; }
.composer-resize-handle::after { content: ''; width: 48px; height: 4px; background: #b9c8d0; border-radius: 4px; }
.composer-resize-handle:focus-visible { outline: 2px solid var(--teal); }
#email-reply-form textarea { grid-column: 1/-1; width: 100%; }
.email-signature-preview { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 90px; overflow: auto; font-size: .85rem; color: var(--muted); min-width: 0; }
#email-reply-form > [type=submit] { align-self: end; }
.inbox-compact .composer { padding: 8px; gap: 4px; }
.inbox-compact .composer textarea { height: 46px; min-height: 46px; }
.inbox-compact .composer-resize-handle { height: 8px; }
.inbox-compact .conversation-head { padding: 8px; }
.inbox-compact .message-area { padding: 8px; }
.inbox-compact .email-signature-preview { max-height: 44px; }