/* Resolv: dark navy with a purple accent. One stylesheet for the app and the sign-in pages. */
:root {
  --bg: #0b1020; --bg2: #141a33; --card: #1a2140; --card2: #222a4d; --line: #2c3563;
  --text: #e8ebf7; --muted: #9aa3c7; --accent: #7c5cf0; --accent2: #6a4ad8; --ok: #3fbf8f; --warn: #e0a84a; --note: #d98a9a;
  --radius: 12px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; }
body { font-family: 'Outfit', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; background: radial-gradient(1200px 700px at 20% -10%, #1a2250 0%, var(--bg) 60%); color: var(--text); min-height: 100vh; line-height: 1.55; }
a { color: #a99bff; }
a:hover { color: #c9c0ff; }
h1, h2, h3 { font-weight: 600; line-height: 1.25; }
.muted { color: var(--muted); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem 1.2rem; border: 0; border-radius: 9px; font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; text-decoration: none; color: #fff; transition: background .15s, transform .1s; }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); }
.btn-primary:hover { background: linear-gradient(135deg, #8a6cf5, #7656e6); color: #fff; }
.btn-primary:disabled { opacity: .45; cursor: default; }
.btn-secondary { background: var(--card2); color: var(--text); border: 1px solid var(--line); }
.btn-secondary:hover { background: #2d376a; color: var(--text); }
.btn-full { width: 100%; }
.inline-form { display: inline; }

/* Forms */
.form-group, .filter-group { margin-bottom: 1.1rem; }
label { display: block; margin-bottom: .35rem; font-weight: 500; color: var(--text); font-size: .92rem; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], select, textarea { width: 100%; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 9px; background: var(--bg2); color: var(--text); font: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
small { display: block; margin-top: .3rem; color: var(--muted); font-size: .82rem; }
.check { display: flex; align-items: flex-start; gap: .55rem; font-weight: 400; }
.check input { margin-top: .3rem; }
.form-error { background: #3a2230; color: #f0c4cd; border: 1px solid #5a3342; border-radius: 9px; padding: .7rem 1rem; margin-bottom: 1rem; font-size: .92rem; }

/* Sign-in pages */
.container { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; gap: 2rem; }
.welcome-section .logo { display: flex; align-items: center; gap: 1rem; }
.logo-image { height: 3.2rem; width: auto; }
.wordmark { font-size: 1.9rem; letter-spacing: .12em; font-weight: 700; }
.tagline { font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.login-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 2rem; width: 100%; max-width: 420px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.login-card h2 { margin-bottom: .8rem; }
.login-card p { color: var(--muted); margin-bottom: 1rem; }
.login-note { margin: 1.1rem 0 0; font-size: .86rem; text-align: center; }

/* App header */
.admin-header { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: space-between; max-width: 1100px; margin: 1rem auto 0; padding: .7rem 1.2rem; background: rgba(26,33,64,.85); border: 1px solid var(--line); border-radius: 16px; backdrop-filter: blur(6px); }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--text); }
.brand .wordmark { font-size: 1.15rem; }
.brand .tagline { font-size: .55rem; display: block; }
.brand img { height: 2.1rem; }
.main-nav { display: flex; gap: .3rem; flex-wrap: wrap; }
.main-nav a { color: var(--muted); text-decoration: none; padding: .45rem .6rem; border-radius: 8px; font-size: .92rem; }
.main-nav a:hover, .main-nav a[aria-current] { color: var(--text); background: var(--card2); }
.who { display: flex; white-space: nowrap; margin-left: auto; align-items: center; gap: .8rem; font-size: .9rem; }
.who a { text-decoration: none; }
.env-badge { background: #4a3a14; color: #f2c56b; border-radius: 6px; padding: .1rem .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; }
.app-version { color: var(--muted); font-size: .75rem; text-decoration: none; }
main { max-width: 1100px; margin: 1.5rem auto 3rem; padding: 0 1.2rem; }
.page-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.6rem; margin-bottom: 1.2rem; }
.panel h3 { margin: 1.2rem 0 .6rem; }
.panel h3:first-child { margin-top: 0; }
.acct-form { max-width: 440px; }
.view-only-note { background: #2b2a1d; color: #e6d9a2; border-bottom: 1px solid #4a4526; padding: .5rem 1.5rem; font-size: .9rem; text-align: center; }
body:has(#view-only-marker) .edit-only { display: none !important; }

/* Banners and dialogs: success is silent, failures stay until dismissed */
.alerts { position: fixed; top: .8rem; left: 50%; transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; gap: .5rem; width: min(560px, 92vw); }
.alert { display: flex; flex-direction: row-reverse; justify-content: space-between; gap: 1rem; background: #3a2230; color: #f0c4cd; border: 1px solid #5a3342; border-radius: 10px; padding: .7rem 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.alert-close { background: none; border: 0; color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; }
dialog.modal { margin: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--text); padding: 1.5rem; max-width: min(440px, 92vw); }
dialog.modal::backdrop { background: rgba(5,8,20,.65); backdrop-filter: blur(3px); }
.modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.2rem; }

/* Guide */
.guide h1 { font-size: 1.6rem; margin-bottom: .8rem; }
.guide h2 { font-size: 1.25rem; margin: 1.6rem 0 .6rem; }
.guide h3 { font-size: 1.05rem; margin: 1.2rem 0 .4rem; }
.guide p, .guide ul, .guide ol { margin-bottom: .8rem; }
.guide ul, .guide ol { padding-left: 1.4rem; }
.guide code { background: var(--bg2); padding: .1rem .35rem; border-radius: 5px; }
.guide table { border-collapse: collapse; margin-bottom: 1rem; }
.guide th, .guide td { border: 1px solid var(--line); padding: .4rem .7rem; text-align: left; }
.guide-changelog { margin-bottom: 1rem; }
.guide-search { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.guide-search input { flex: 1; }
.guide-search-btn { background: var(--card2); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: .35rem .6rem; cursor: pointer; }
.guide-search-count { color: var(--muted); font-size: .85rem; min-width: 5rem; }
mark.gs-hit, .gs-hit { background: #5b4a14; color: #fff; border-radius: 3px; }
.gs-current { background: #8a6d12; }
.cl-filter { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.cl-btn { background: var(--card2); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .9rem; cursor: pointer; font: inherit; font-size: .88rem; }
.cl-btn.on { background: var(--accent); border-color: transparent; }
@media (max-width: 640px) { .admin-header { border-radius: 12px; } .panel { padding: 1.1rem; } }

/* Users */
.page-head h2 { margin-right: .3rem; }
.user-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .7rem .2rem; border-top: 1px solid var(--line); }
.user-main { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.user-meta { display: flex; flex-wrap: wrap; gap: .4rem; }
.user-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.user-actions .btn { padding: .4rem .8rem; font-size: .85rem; }
.chip { background: var(--card2); border: 1px solid var(--line); border-radius: 999px; padding: .15rem .7rem; font-size: .8rem; }
.chip-quiet { color: var(--muted); }
.chip-warn { background: #3b3320; border-color: #5a4d2a; color: #e6d09a; }
.user-form { max-width: 620px; }
.access-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.access-table td { padding: .5rem .3rem; border-top: 1px solid var(--line); vertical-align: top; }
.access-table td:last-child { width: 11rem; }
.reach { border: 1px solid var(--line); border-radius: 9px; padding: .8rem 1rem; margin: 1rem 0; }
.reach legend { padding: 0 .4rem; font-weight: 500; }
.reach .check { margin: .3rem 0; }
.reach-pick { margin: .2rem 0 .5rem 1.6rem; max-height: 12rem; overflow-y: auto; }
[hidden] { display: none !important; }

/* Companies */
.co-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: .4rem; }
.co-actions .btn { padding: .4rem .8rem; font-size: .85rem; }

/* System: backups and logs */
.backup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .4rem 1.2rem; margin: .5rem 0; }
.check small { margin-top: 0; }
.restore-log { background: var(--bg2); border-radius: 9px; padding: .8rem 1rem; overflow-x: auto; max-height: 18rem; font-size: .82rem; white-space: pre-wrap; }
.log-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; margin: 1rem 0; }
.log-filter .filter-group { margin-bottom: 0; min-width: 9rem; }
.log-list { margin: .5rem 0; }
.log-item { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: .65rem .2rem; border-top: 1px solid var(--line); align-items: flex-start; }
.log-when { width: 5.5rem; font-size: .88rem; }
.log-main { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.log-side { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; font-size: .85rem; }
.log-anchor { background: rgba(124,92,240,.12); }
.trail-switch { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; margin: 1rem 0; }
.trail-switch p { margin-bottom: .6rem; }

/* Collapsible sections (Users, Companies) */
.list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1rem; }
.list-tools input[type=search] { flex: 1 1 240px; width: auto; }
.list-tools select { width: auto; }
.tool-check { white-space: nowrap; align-items: center; }
.tool-check input { margin-top: 0; }
.tool-buttons { display: flex; gap: .4rem; margin-left: auto; }
.tool-buttons .btn { padding: .4rem .8rem; font-size: .85rem; }
details.section { border-top: 1px solid var(--line); }
details.section.panel { border: 1px solid var(--line); padding: 0; margin-bottom: .8rem; }
details.section > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding: .85rem .3rem; cursor: pointer; list-style: none; user-select: none; }
details.section.panel > summary { padding: 1rem 1.3rem; }
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary::before { content: ""; width: .55rem; height: .55rem; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); transition: transform .15s; flex: none; margin-right: .2rem; }
details.section[open] > summary::before { transform: rotate(45deg); }
details.section > summary:hover { background: rgba(124,92,240,.08); }
.section-title { font-size: 1.15rem; font-weight: 600; }
.section-count { margin-left: auto; color: var(--muted); font-size: .88rem; }
details.section[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: .3rem; }
details.section > .user-row:first-of-type { border-top: 0; }
.co-body { padding: .2rem 1.3rem 1rem; }
.co-body .co-actions { margin: .2rem 0 .6rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.co-actions { margin-left: 0; }

/* Tickets */
.small { font-size: .82rem; }
.co-actions [aria-current] { background: var(--accent); border-color: transparent; }
.ticket-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .4rem 1rem; align-items: end; }
.ticket-filters .filter-group { margin-bottom: .4rem; }
.ticket-filters .filter-group:first-of-type { grid-column: span 2; }
.ticket-filters .filter-actions { align-self: end; margin-bottom: .4rem; }
.ticket-list { padding: 0; overflow: hidden; }
.ticket-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .75rem 1rem; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.ticket-row:first-child { border-top: 0; }
.ticket-row:hover, .ticket-card:hover { background: var(--card2); }
.ticket-num { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .85rem; white-space: nowrap; }
.ticket-title { flex: 1 1 18rem; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.ticket-when { text-align: right; min-width: 9rem; }
.ticket-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .8rem; }
.ticket-card { display: flex; flex-direction: column; gap: .4rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .9rem; margin: 1rem 0; }
.pager-step { color: var(--text); text-decoration: none; font-weight: 500; }
.pager-step.off { color: var(--muted); opacity: .6; }
.pager-numbers { display: flex; gap: .3rem; }
.pager-num { min-width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 6px; color: var(--text); text-decoration: none; }
.pager-num:hover { background: var(--card2); }
.pager-num.on { background: var(--accent); border-color: transparent; color: #fff; font-weight: 700; }
.pager-gap { padding: 0 .3rem; color: var(--muted); align-self: center; }
.pager strong { color: var(--text); }
.ticket-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.ticket-facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; margin: .8rem 0; }
.ticket-facts dt { color: var(--muted); }
.ticket-facts dd { overflow-wrap: anywhere; }
.ticket-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.comment { border-top: 1px solid var(--line); padding: .7rem 0; }
.comment:first-of-type { border-top: 0; }
.attachments { list-style: none; padding: 0; }
.attachments li { margin: .5rem 0; }
.thumb { display: block; max-width: 14rem; max-height: 10rem; border-radius: 8px; border: 1px solid var(--line); margin-bottom: .3rem; }
.c-green { background: #1f3a2c; border-color: #2f5a44; color: #b9e4cb; }
.c-amber { background: #3b3320; border-color: #5a4d2a; color: #e8d59a; }
.c-orange { background: #3d2c1d; border-color: #5e422b; color: #eac39b; }
.c-rose { background: #3a2530; border-color: #5a3646; color: #eab9c9; }
.c-blue { background: #1f2f4a; border-color: #304a74; color: #b9d0f0; }
.c-grey { color: var(--muted); }
@media print {
  .admin-header, .page-head, .no-print, .app-version, .alerts { display: none !important; }
  body { background: #fff; color: #000; }
  .panel { background: #fff; border: 0; box-shadow: none; color: #000; }
  .ticket-facts dt, .muted { color: #444; }
  .chip { background: #fff !important; color: #000 !important; border-color: #888 !important; }
}
.tree-branch { background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin-bottom: .7rem; }
.tree-branch > summary { cursor: pointer; padding: .8rem 1rem; display: flex; align-items: center; gap: .8rem; font-size: 1.05rem; border-left: 3px solid var(--accent); border-radius: 12px; }
.tree-group { padding: 0 1rem .6rem 1.6rem; }
.tree-group-name { margin: .4rem 0; font-weight: 500; }
.tree-group .ticket-row { border-radius: 8px; background: var(--bg2); margin-bottom: .35rem; border-top: 0; }
.view-btn { gap: .4rem; }
.view-btn .ico { flex: none; }

/* Ticket wizard */
.wizard h3 { margin: .2rem 0 .8rem; font-weight: 400; font-size: 1.3rem; }
.wizard h4 { margin: 1.2rem 0 .5rem; color: var(--muted); font-weight: 500; }
.wizard-narrow { max-width: 52rem; }
.wizard-narrow textarea, .wizard-narrow input, .wizard-narrow select, .question input[type=text], .question input[type=number], .question textarea { width: 100%; }
.wizard-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.wizard-crumbs { margin-bottom: .6rem; }
.wizard-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .7rem; max-width: 60rem; }
.option-btn { background: var(--card2); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 1rem; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.option-btn:hover, .option-btn:focus-visible { border-color: var(--accent); background: #2d376a; }
.question { border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem 1rem; margin: .8rem 0; max-width: 52rem; }
.question legend { padding: 0 .4rem; font-weight: 500; }
.req { color: var(--muted); }
.review { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: .3rem 1.2rem; margin-bottom: .4rem; }
.review-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--line); }
.review-row:first-child { border-top: 0; }
.review-label { display: block; color: var(--muted); font-size: .82rem; margin-bottom: .2rem; }
.review-value { overflow-wrap: anywhere; line-height: 1.45; }
.review-row .btn-small { margin: 0; flex: none; }
.btn-small { padding: .3rem .8rem; font-size: .85rem; }
.prio-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.prio-opt { cursor: pointer; padding: .45rem .9rem; font-size: .95rem; opacity: .7; }
.prio-opt input { position: absolute; opacity: 0; pointer-events: none; }
.prio-opt:has(input:checked) { opacity: 1; outline: 2px solid var(--text); outline-offset: 1px; }
.prio-opt:has(input:focus-visible) { outline: 2px solid var(--accent); }
.wizard-credit { margin-top: 1rem; }

/* @mentions and comments */
.mention-box { position: relative; }
.mention-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin: .2rem 0 0; padding: .25rem; list-style: none; background: var(--card2); border: 1px solid var(--line); border-radius: 10px; max-height: 14rem; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.mention-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem .6rem; border-radius: 7px; cursor: pointer; }
.mention-list li.on, .mention-list li:hover { background: var(--accent); color: #fff; }
.mention-list small { color: inherit; opacity: .7; overflow-wrap: anywhere; }
.mention { background: #2d2a52; color: #cfc3ff; border-radius: 4px; padding: 0 .25rem; }
.comment-form { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.comment-form textarea { width: 100%; }
@media print { .mention { background: none; color: #000; font-weight: 600; } }

/* Who will be emailed: a wide dialog, since each person has a name, a role and reasons to show */
dialog.modal.advisory { width: min(54rem, calc(100vw - 2rem)); max-width: none; padding: 1.8rem 2rem; }
.advisory h3 { margin-bottom: 1rem; font-size: 1.4rem; font-weight: 500; }
.advisory-note { background: #3b3320; border: 1px solid #5a4d2a; color: #e8d59a; border-radius: 8px; padding: .8rem 1rem; margin-bottom: 1.2rem; }
.advisory-list { max-height: 55vh; overflow-y: auto; margin-top: .6rem; }
.advisory-table { width: 100%; border-collapse: collapse; }
.advisory-table th { text-align: left; font-weight: 500; font-size: .82rem; color: var(--muted); padding: 0 1rem .5rem 0; }
.advisory-table td { padding: .85rem 1rem .85rem 0; border-top: 1px solid var(--line); vertical-align: top; line-height: 1.4; }
.advisory-table td:first-child { width: 42%; overflow-wrap: anywhere; }
.advisory-name { font-weight: 600; }
.advisory .modal-actions { margin-top: 1.6rem; }
@media (max-width: 640px) {
  dialog.modal.advisory { padding: 1.2rem; }
  .advisory-table thead { display: none; }
  .advisory-table, .advisory-table tbody, .advisory-table tr, .advisory-table td { display: block; width: 100%; }
  .advisory-table tr { border-top: 1px solid var(--line); padding: .7rem 0; }
  .advisory-table td { border: 0; padding: .1rem 0; }
  .advisory-table td:first-child { width: 100%; }
}
.option-none { font-weight: 400; color: var(--muted); }
.ai-badge { background: var(--card2); color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: .1rem .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; }
.ai-servers { width: 100%; border-collapse: collapse; }
.ai-servers th, .ai-servers td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.ai-servers th { color: var(--muted); font-weight: 600; font-size: .85rem; }
.ai-servers small { display: block; color: var(--muted); }
.ai-result { margin-top: .4rem; font-size: .9rem; }
.ai-ok { color: var(--ok); }
@media (max-width: 720px) {
  .ai-servers thead { display: none; }
  .ai-servers tr { display: block; border-bottom: 1px solid var(--line); padding: .5rem 0; }
  .ai-servers td { display: block; border: 0; padding: .25rem 0; }
}
.chip-ok   { background: #12342a; border-color: var(--ok); color: #c4f5e1; box-shadow: 0 0 9px 1px rgba(63, 191, 143, .65); }
.chip-slow { background: #3b3320; border-color: var(--warn); color: #f0dba5; box-shadow: 0 0 9px 1px rgba(224, 168, 74, .5); }
.chip-bad  { background: #3a1a22; border-color: #d4606e; color: #ffd0d5; box-shadow: 0 0 9px 1px rgba(212, 96, 110, .65); }
.ai-address { max-width: 36rem; }
.ai-address input { width: 100%; }
.ai-address small { display: block; margin-top: .25rem; }
.queue-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0; }
.queue-filter .chip { text-decoration: none; color: var(--text); }
.chip-on { border-color: var(--accent); background: #2d2766; }
.queue-quiet td { color: var(--muted); }

/* AI assessment: a framed box on the ticket, a large dialog to read it in, and print styles that print only the assessment. */
.ai-box { border: 1px solid var(--accent); background: rgba(124, 92, 240, .06); }
.ai-open { display: inline-flex; align-items: center; gap: .55rem; background: none; border: 0; padding: 0; margin: 0 0 .3rem; font: inherit; font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #b9a6ff; cursor: pointer; }
.ai-open:hover, .ai-open:focus-visible { color: #fff; }
.ai-open .ico { flex: none; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; background: var(--card2); color: var(--text); cursor: pointer; }
.icon-btn:hover, .icon-btn:focus-visible { background: var(--accent2); }
dialog.ai-modal { margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--text); width: min(64rem, calc(100vw - 2rem)); max-width: none; height: min(52rem, calc(100vh - 2rem)); max-height: none; overflow: hidden; }
dialog.ai-modal[open] { display: flex; flex-direction: column; }
dialog.ai-modal::backdrop { background: rgba(5, 8, 20, .75); backdrop-filter: blur(3px); }
.ai-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.6rem; border-bottom: 1px solid var(--line); }
.ai-modal-head h2 { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: 1.5rem; color: #d7ccff; }
.ai-modal-tools { display: flex; gap: .6rem; }
.ai-doc { flex: 1; overflow-y: auto; padding: 1.6rem 2rem; line-height: 1.75; font-size: 1.05rem; }
.ai-doc p { margin: 0 0 1rem; }
.ai-doc ul, .ai-doc ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.ai-doc li { margin-bottom: .35rem; }
.ai-doc h1, .ai-doc h2, .ai-doc h3 { margin: 1.4rem 0 .7rem; }
.ai-doc table { border-collapse: collapse; width: 100%; margin: .8rem 0; }
.ai-doc th, .ai-doc td { padding: .6rem .8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ai-doc th { color: #d7ccff; border-bottom: 2px solid var(--line); }
.ai-modal-foot { margin: 0; padding: .7rem 1.6rem; border-top: 1px solid var(--line); text-align: center; font-style: italic; font-size: .85rem; color: var(--muted); }

/* Ticket rows line up in columns on wide screens: number, title, priority, status, credit, who and when. */
.ticket-row .cell { display: flex; }
@media (min-width: 900px) {
  .ticket-row { display: grid; grid-template-columns: 10rem minmax(0, 1fr) 8.5rem 6rem 1.6rem 12rem; gap: 0 1rem; }
  .ticket-row .ticket-when { min-width: 0; }
  .ticket-row .cell { justify-content: flex-start; }
}
.ticket-counts { white-space: nowrap; }
.credit-icon { color: #e0b44c; vertical-align: middle; }
.cell-icon { align-items: center; justify-content: center; }
.clip-count { display: inline-flex; align-items: center; gap: .15rem; color: var(--muted); font-size: .82rem; white-space: nowrap; vertical-align: middle; }
.user-meta { align-items: center; }
.loc { color: var(--text); font-weight: 600; }
.clip-count { color: var(--text); font-weight: 600; }
.clip-count svg { color: var(--muted); }
.phone-link { white-space: nowrap; }
.phone-link svg { vertical-align: -2px; }
a.person { color: inherit; text-decoration: none; }
a.person:hover { text-decoration: underline; }
a.mention { text-decoration: none; }
a.mention:hover { text-decoration: underline; }
.ticket-credit .credit-icon { width: 26px; height: 26px; }
.ai-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 6px rgba(61, 220, 132, .7); flex: none; }

/* Analytics. Series colours are used in this fixed order (checked for colour-blind separation on the dark surface). */
:root { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --heat-rgb: 57, 135, 229; }
.an-filters { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: center; padding: 1rem 1.2rem; }
.an-filters .presets { display: flex; flex-wrap: wrap; gap: .5rem; }
.an-filters .btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.an-filters .custom { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.an-filters label { margin: 0; color: var(--muted); }
.an-filters input[type=date] { width: auto; }
.an-note { margin: -.4rem 0 1rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem; margin-bottom: 1.2rem; }
a.tile { display: block; text-decoration: none; color: inherit; transition: border-color .12s, background .12s; }
a.tile:hover { border-color: var(--accent); background: var(--card2); color: inherit; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; }
.tile b { display: block; font-size: 1.9rem; font-weight: 600; line-height: 1.15; color: var(--text); }
.tile span { color: var(--muted); font-size: .9rem; }
.an-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.an-grid .panel { margin-bottom: 0; }
.an-grid .an-wide { grid-column: 1 / -1; }
@media (max-width: 800px) { .an-grid { grid-template-columns: minmax(0, 1fr); } }
.hbars { list-style: none; display: grid; gap: .55rem; }
.hbars li { list-style: none; }
.hb-row { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) 3rem; gap: .7rem; align-items: center; color: inherit; text-decoration: none; border-radius: 6px; cursor: pointer; }
.hb-row:hover, .hb-row:focus-visible { background: rgba(255, 255, 255, .05); color: inherit; }
.hb-row:focus-visible, .tile:focus-visible, .legend a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hb-label { overflow-wrap: anywhere; line-height: 1.25; }
.hb-label small { display: block; color: var(--muted); font-size: .78rem; }
.hb-track { display: block; height: .8rem; border-radius: 0 4px 4px 0; }
.hb-fill { display: block; height: 100%; background: var(--s1); border-radius: 0 4px 4px 0; min-width: 2px; transition: filter .12s; }
.hb-row:hover .hb-fill { filter: brightness(1.25); }
.hb-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.hb-wide { white-space: nowrap; }
.hb-time { grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr) 5.5rem; }
.donut { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; }
.donut svg { width: 11rem; flex: none; }
.donut .mark { transition: stroke-width .12s; cursor: pointer; }
.donut .mark:hover { stroke-width: 30; }
.donut-n { fill: var(--text); font-size: 28px; font-weight: 600; }
.donut-l { fill: var(--muted); font-size: 11px; }
.legend { list-style: none; display: grid; gap: .35rem; }
.legend li, .legend a { display: flex; align-items: center; gap: .5rem; }
.legend a { color: inherit; text-decoration: none; }
.legend a:hover { text-decoration: underline; }
.legend i { width: .8rem; height: .8rem; border-radius: 3px; flex: none; }
.legend i.key { height: 3px; width: 1.1rem; border-radius: 2px; }
.legend b { margin-left: .3rem; font-variant-numeric: tabular-nums; }
.trend .legend { display: flex; gap: 1.2rem; margin-top: .4rem; }
.trend svg { width: 100%; height: auto; display: block; }
.trend .grid { stroke: var(--line); stroke-width: 1; }
.trend .axis { fill: var(--muted); font-size: 11px; }
.trend .line-a, .trend .line-b { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend .line-a { stroke: var(--s1); }
.trend .line-b { stroke: var(--s2); }
.trend .dot-a, .trend .dot-b { stroke: var(--card); stroke-width: 2; }
.trend .dot-a { fill: var(--s1); }
.trend .dot-b { fill: var(--s2); }
.trend .cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.trend .hit { fill: transparent; }
.trend .pt { fill: transparent; cursor: pointer; }
.heat { display: grid; gap: 3px; overflow-x: auto; }
.heat-row { display: grid; grid-template-columns: 2.4rem repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
.heat-head span, .heat-day { color: var(--muted); font-size: .72rem; white-space: nowrap; }
.heat-head span { overflow: visible; }
.hcell { display: block; aspect-ratio: 1.6; min-height: 14px; border-radius: 3px; background: rgba(var(--heat-rgb), var(--heat, .08)); }
.hcell-0 { background: rgba(255, 255, 255, .05); }
.hcell:hover { outline: 2px solid var(--text); outline-offset: 0; }
.an-tip { position: fixed; z-index: 50; pointer-events: none; background: #0b1020; border: 1px solid var(--line); border-radius: 8px; padding: .45rem .7rem; font-size: .88rem; box-shadow: 0 6px 20px rgba(0, 0, 0, .45); max-width: 18rem; }
.an-tip b { display: block; font-size: 1rem; }
.an-tip .row { display: flex; align-items: center; gap: .45rem; }
.an-tip .hint { display: block; color: var(--muted); margin-top: .25rem; }
.an-tip .row i { width: .9rem; height: 3px; border-radius: 2px; display: inline-block; }