/* FinDash skin (0.82.0): the look of the FinDash admin template on the agent console and the customer portal.
   Loaded after app.css by the agent console (agentLayout) and the customer portal (portalPage); the agent sign-in page doesn't
   load it. The colour tokens only apply on pages with the console shell or the portal. Remove the skin.css link in views/layout.js to go back
   to the plain look. Template: navy (#1e3d73) on a near-white page, a white side menu with
   square icon tiles (navy when active), a white top bar and white cards with a soft blue-grey shadow,
   grey table headings, 5 px corners. */

/* Text: the computer's own font (Segoe UI on Windows), 14 px. A downloaded font (Manrope) made every
   page wait for it before showing, so it was taken out in 0.82.2. */
:root:has(.shell, .portal) {
  --font: "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-heading: var(--font);
  --topbar-h: 76px; /* the sticky top bar's height: things that stick below it (the editor toolbar) use it */
  font-family: var(--font);
  line-height: 1.6;
  font-synthesis: style;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
:root:has(.shell, .portal) h1, :root:has(.shell, .portal) h2 { letter-spacing: 0; font-weight: 600; color: var(--text); }
:root:has(.shell, .portal) h2 { font-size: var(--fs-md); }

/* Colours (the dark theme keeps its own) */
@media (prefers-color-scheme: light) {
  :root:has(.shell, .portal):not([data-theme="dark"]) {
    --bg: #fbfbfb; --surface: #ffffff; --surface-2: #f7f8fa; --surface-3: #e9ecef; --row-alt: #f7f8fa;
    --border: #e3e6ea; --border-strong: #ced4da;
    --text: #3f414d; --text-2: #656b63; --text-3: #6f746d;
    --accent: #1e3d73; --accent-hover: #1d335a; --accent-soft: #e7ecee; --accent-text: #1e3d73;
    --primary: #1e3d73; --primary-hover: #1d335a; --on-primary: #ffffff; --focus: #1e6fc0;
    --sidebar: #ffffff; --sidebar-border: transparent; --sidebar-text: #1e3d73; --sidebar-muted: #656b63;
    --sidebar-hover: #f3f5f7; --sidebar-hover-text: #1e3d73; --sidebar-active: #e7ecee; --sidebar-active-text: #1e3d73;
    --sidebar-indicator: #1e3d73; --sidebar-count: #e7ecee;
    --shadow: 0 0 20px rgba(44, 101, 144, .1);
    --radius: 5px; --radius-card: 5px;
  }
}
:root[data-theme="light"]:has(.shell, .portal) {
    --bg: #fbfbfb; --surface: #ffffff; --surface-2: #f7f8fa; --surface-3: #e9ecef; --row-alt: #f7f8fa;
    --border: #e3e6ea; --border-strong: #ced4da;
    --text: #3f414d; --text-2: #656b63; --text-3: #6f746d;
    --accent: #1e3d73; --accent-hover: #1d335a; --accent-soft: #e7ecee; --accent-text: #1e3d73;
    --primary: #1e3d73; --primary-hover: #1d335a; --on-primary: #ffffff; --focus: #1e6fc0;
    --sidebar: #ffffff; --sidebar-border: transparent; --sidebar-text: #1e3d73; --sidebar-muted: #656b63;
    --sidebar-hover: #f3f5f7; --sidebar-hover-text: #1e3d73; --sidebar-active: #e7ecee; --sidebar-active-text: #1e3d73;
    --sidebar-indicator: #1e3d73; --sidebar-count: #e7ecee;
    --shadow: 0 0 20px rgba(44, 101, 144, .1);
    --radius: 5px; --radius-card: 5px;
}

/* Side menu: white with a soft shadow; each entry has a square icon tile, navy when active */
.sidebar { border-right: 0; box-shadow: var(--shadow); z-index: 6; }
.brand { border-bottom: 0; }
.nav-heading { text-transform: uppercase; font-weight: 700; letter-spacing: .08em; color: var(--sidebar-muted); }
.nav-heading .icon { display: none; }
.nav-link.is-active::before { display: none; }
.nav-link .icon { color: var(--sidebar-text); }
.nav-count { background: var(--sidebar-count); color: var(--sidebar-text); border-radius: var(--radius); font-weight: 700; }
.nav-foot { border-top: 1px solid var(--border); }
@media (min-width: 761px) {
  .shell { grid-template-columns: 260px minmax(0, 1fr); }
  .sidebar { padding: 0 15px 12px; }
  .sidebar nav { gap: 4px; }
  .brand { height: 76px; margin: 0 -15px; padding: 0 22px; }
  .nav-link, .nav-foot button { box-sizing: border-box; min-height: 40px; padding: 0 12px 0 0; gap: 14px; margin: 0; font-family: var(--font); font-size: var(--fs-base); font-weight: 500; line-height: 1.2; border-radius: var(--radius); }
  .nav-link .icon, .nav-foot .icon { box-sizing: content-box; width: 18px; height: 18px; padding: 11px; border-radius: var(--radius); flex: none; }
  .nav-link:hover { background: var(--sidebar-hover); }
  .nav-link.is-active { background: var(--sidebar-active); color: var(--sidebar-active-text); font-weight: 600; }
  .nav-link.is-active .icon { background: var(--primary); color: var(--on-primary); }
  .theme-label-dark, .theme-label-light { gap: 14px; }
  .nav-heading { margin: 18px 0 4px; padding: 0 12px; font-size: var(--fs-2xs); line-height: 15px; }
  .nav-count { font-size: var(--fs-2xs); line-height: 1; padding: 4px 7px; }
  .new-ticket { min-height: 40px; font-weight: 600; justify-content: center; }
}

/* Top bar: white with the same soft shadow; the sections on the left, then the search, square navy
   icon buttons and the user (rounded avatar, name and role) */
.topbar { background: var(--surface); border-bottom: 0; box-shadow: var(--shadow); padding-top: 14px; padding-bottom: 14px; }
@media (min-width: 761px) { .topbar { min-height: 76px; } }
.area-tab { padding: 0 12px; font-size: var(--fs-base); font-weight: 600; color: var(--text-2); }
.area-tab .icon { display: none; }
.area-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.area-tabs { margin: -14px 0 -14px -12px; }
.search { flex: 1 1 220px; min-width: 200px; max-width: 420px; background: var(--surface-2); border-color: transparent; border-radius: var(--radius); padding: 0 12px; }
.search input { padding: 9px 0; }
.search:focus-within { border-color: var(--accent); background: var(--surface); }
.topbar-actions { gap: 8px; }
.topbar-actions .icon-button { width: 36px; height: 36px; border-radius: var(--radius); background: var(--primary); color: var(--on-primary); border-color: transparent; }
.topbar-actions .icon-button:hover { background: var(--primary-hover); color: var(--on-primary); }
.topbar-actions .icon-button .icon { width: 18px; height: 18px; }
.user-menu { margin-left: 8px; }
.user-menu > summary { padding: 2px 6px; border-radius: var(--radius); list-style: none; gap: 10px; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu .avatar { width: 40px; height: 40px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-sm); font-weight: 700; }
.user-menu .who { white-space: nowrap; line-height: 1.25; }
.user-menu .who strong { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.user-menu .who small { font-size: var(--fs-xs); color: var(--text-2); }
.user-menu > summary::after { width: 6px; height: 6px; margin-left: 2px; color: var(--text-2); }
.user-panel-head { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.user-panel-head strong { font-size: var(--fs-sm); }
.user-panel-signout { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--border); }
.user-panel-signout button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: var(--radius); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; text-align: left; }
.user-panel-signout button:hover, .user-panel-signout button:focus-visible { background: var(--surface-2); }
.user-panel-signout .icon { width: 16px; height: 16px; flex: none; color: var(--text-2); }
@media (max-width: 1180px) { .user-menu .who { display: none; } .search { min-width: 140px; } }
@media (max-width: 760px) { .area-tabs { margin: 0 0 4px; } .user-menu { margin-left: 0; } .user-menu .who, .user-menu > summary::after { display: none; } .area-tab .icon { display: inline-block; } }

/* Cards and tables: white cards with the soft shadow; grey table headings, as in the template */
.card, .table-wrap { border-color: transparent; box-shadow: var(--shadow); }
th:where(:not(.is-rich th)) { background: var(--surface-3); color: var(--table-ink, #495057); text-transform: none; letter-spacing: 0; font-size: var(--fs-base); font-weight: 700; padding-top: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--table-line, #dee2e6); }
td:where(:not(.is-rich td)) { border-bottom-color: var(--table-line, #dee2e6); }
.page-head h1 { font-size: var(--fs-lg); font-weight: 600; }
.badge { border-radius: var(--radius); padding: 2px 8px; }

/* Ticket list: white figure cards above (label, number and a tinted circle, as on the template's
   dashboard), avatars beside names, roomier rows */
.stat-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.stat-tiles .stat-tile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 76px 18px 22px; border-radius: var(--radius-card); background: var(--surface); color: var(--text); box-shadow: var(--shadow); border-bottom: 3px solid transparent; transition: box-shadow .12s, border-color .12s; }
.stat-tiles .stat-tile:hover { text-decoration: none; box-shadow: 0 0 24px rgba(44, 101, 144, .18); }
.stat-tiles .stat-tile.is-current { border-bottom-color: var(--c); }
.stat-tiles .stat-tile strong { font-size: var(--fs-2xl); line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.stat-tiles .tile-label { font-size: var(--fs-base); font-weight: 500; color: var(--text-2); }
.stat-tiles .stat-icon { top: 50%; transform: translateY(-50%); }
.person { display: flex; align-items: center; gap: 10px; min-width: 0; }
table.tickets .person .avatar { flex: none; border-radius: var(--radius); }
table.tickets td { padding-top: 12px; padding-bottom: 12px; }
table.tickets .ticket-number { color: var(--text); font-weight: 700; }
@media (max-width: 1200px) { .stat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { table.tickets .col-agent .avatar { display: none; } .stat-tiles .stat-tile { padding: 14px 68px 14px 16px; } }

/* Buttons, as the template's "Default Buttons": solid, 35 px high, 6 px 12 px padding, 14 px regular
   text, 5 px corners and a 1 px border in the button's own colour. Every button is the navy Primary;
   delete buttons are the template's Danger pink; Cancel-type ("quiet") buttons are its Link style.
   Small buttons keep their size and take the same colours. */
.button { min-height: 35px; padding: 6px 12px; font-size: var(--fs-base); font-weight: 400; line-height: 21px; border: 1px solid var(--primary); background: var(--primary); color: var(--on-primary); border-radius: var(--radius); box-shadow: none; }
.button.button-small { min-height: 0; padding: 2px 10px; font-size: var(--fs-xs); line-height: 1.5; }
.button:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); text-decoration: none; }
.button-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.button-danger { background: #c4224e; border-color: #c4224e; color: #ffffff; }
.button-danger:hover { background: #a81c42; border-color: #a81c42; color: #ffffff; }
.button-quiet, .button-quiet:hover { background: transparent; border-color: transparent; color: var(--accent); }
.button-quiet:hover { text-decoration: underline; }
.button.danger { color: var(--danger); }
.button.is-filtered { background: var(--primary-hover); border-color: var(--primary-hover); }

/* Analytics, in the template's dashboard style: figure cards with a tinted round icon and a coloured
   change label; chart cards with a header bar; navy and green lines with a light area under them;
   bars on a grey track (coloured by status or priority); a navy heatmap; a segmented period picker */
@media (prefers-color-scheme: light) {
  :root:has(.shell, .portal):not([data-theme="dark"]) {
    --series-1: #1e3d73; --series-2: #0a9d5a; --chart-grid: #eef0f3; --chart-axis: #d5dae0; --chart-ink: #666c65;
    --heat-0: #f1f3f6; --heat-1: #dbe3ef; --heat-2: #b7c7df; --heat-3: #8aa3c8; --heat-4: #5a7bab; --heat-5: #345a8f; --heat-6: #1e3d73;
  }
}
:root[data-theme="light"]:has(.shell, .portal) {
  --series-1: #1e3d73; --series-2: #0a9d5a; --chart-grid: #eef0f3; --chart-axis: #d5dae0; --chart-ink: #666c65;
  --heat-0: #f1f3f6; --heat-1: #dbe3ef; --heat-2: #b7c7df; --heat-3: #8aa3c8; --heat-4: #5a7bab; --heat-5: #345a8f; --heat-6: #1e3d73;
}
.colour-navy { --c: var(--navy, #1e3d73); } .colour-green { --c: #0a9d5a; } .colour-blue { --c: #1f7fd1; } .colour-amber { --c: #c98a00; } .colour-red { --c: #e0315f; } .colour-grey { --c: #6c757d; }
.badge.is-overdue { color: var(--danger); background: var(--danger-soft); }
.analytics-head { margin-bottom: 18px; }
.period-picker { border: 0; padding: 4px; gap: 2px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.period-picker a { padding: 6px 14px; border-radius: var(--radius); font-size: var(--fs-sm); font-weight: 500; }
.period-picker a.is-active { background: var(--accent-soft); color: var(--accent-text); box-shadow: none; font-weight: 600; }
.stat-row { gap: 20px; margin: 0 0 20px; }
.stat-row.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-row .stat-tile { position: relative; border-color: transparent; padding: 20px 22px; min-height: 128px; }
.stat-row .stat-tile.has-icon .stat-label, .stat-row .stat-tile.has-icon .stat-value { margin-right: 56px; }
.stat-icon { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 12%, var(--surface)); }
.stat-icon .icon { width: 22px; height: 22px; }
.stat-row .stat-label { font-size: var(--fs-base); font-weight: 500; color: var(--text-2); margin-bottom: 8px; }
.stat-row .stat-value { font-size: var(--fs-2xl); font-weight: 700; }
.stat-row .stat-delta { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 2px 8px; border-radius: var(--radius); font-weight: 600; background: var(--surface-2); }
.stat-row .stat-delta.tone-good { background: color-mix(in srgb, var(--good-text) 10%, var(--surface)); }
.stat-row .stat-delta.tone-bad { background: color-mix(in srgb, var(--bad-text) 10%, var(--surface)); }
.stat-row .stat-sub { margin-top: 8px; }
.chart-grid { gap: 20px; }
.chart-card { padding: 0 0 20px; border-color: transparent; }
.chart-card > .card-head { align-items: center; min-height: 56px; margin: 0 0 18px; padding: 0 20px; border-bottom: 1px solid var(--border); }
.chart-card > .card-head h2 { font-size: var(--fs-md); font-weight: 600; }
.chart-card > :not(.card-head) { margin-left: 20px; margin-right: 20px; }
.chart-line { stroke-width: 2.5; }
.chart-area { stroke: none; }
.chart-area.series-1 { fill: var(--series-1); fill-opacity: .05; }
.chart-area.series-2 { fill: var(--series-2); fill-opacity: .05; }
.legend-line { height: 3px; width: 18px; }
.bar-list { gap: 14px; }
.bar-track { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.bar-fill { border-radius: 999px; }
.bar-fill.tone-green { background: #0a9d5a; } .bar-fill.tone-amber { background: #e5a000; } .bar-fill.tone-red { background: #e0315f; }
.heatmap td { border-radius: 4px; height: 24px; }
.heat-key { border-radius: 3px; }
@media (min-width: 1200px) and (max-width: 1599px) {
  .chart-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* the wider, flatter line chart from 1200 px, so the chart's text doesn't grow on a laptop screen */
@media (min-width: 1200px) {
  .chart-size-normal { display: none; }
  .chart-size-wide { display: block; }
  .chart-size-wide .chart-tick { font-size: var(--fs-xs); }
  .chart-size-wide .chart-end { font-size: var(--fs-sm); }
}
/* below 1600 px the wide chart is shown smaller than drawn, so its text is drawn larger to stay readable */
@media (min-width: 1200px) and (max-width: 1599px) {
  .chart-size-wide .chart-tick { font-size: 16px; }
  .chart-size-wide .chart-end { font-size: 17px; }
  .chart-size-wide .chart-line { stroke-width: 3; }
}
@media (max-width: 1100px) { .stat-row.cols-4, .stat-row.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .stat-row.cols-4, .stat-row.cols-3 { grid-template-columns: minmax(0, 1fr); } }

/* The other analytics pages: five figures across for the knowledge base, list rows and tables in cards */
.stat-row.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1400px) { .stat-row.cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .stat-row.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .stat-row.cols-5 { grid-template-columns: minmax(0, 1fr); } }
.stat-row .stat-value .stat-list { font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; }
.chart-card .rank-list li { padding: 10px 0; }
.chart-card .rank-value { color: var(--accent); }
.chart-card .table-wrap.flat { border: 0; box-shadow: none; }
.chart-card > .card-head .button { min-height: 32px; padding: 4px 12px; }

/* Ticket conversation as the template's timeline: a line down the left; each message has a round
   marker on it (white with a coloured ring and an icon: navy reply, green customer, amber note);
   status changes and other events have a small ring on the line */
.timeline { position: relative; padding-left: 58px; gap: 14px; }
.timeline::before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; border-radius: 1px; background: var(--border); }
.timeline > li { position: relative; }
.timeline .message { --c: #0a9d5a; border-color: transparent; }
.timeline .message.is-agent { --c: var(--navy, #1e3d73); }
.timeline .message.is-internal { --c: #c98a00; border-color: var(--internal-border); }
.tl-dot { position: absolute; left: -58px; top: 8px; box-sizing: border-box; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--c); background: var(--surface); color: var(--c); }
.tl-dot .icon { width: 17px; height: 17px; }
.timeline > li:not(.message)::before { content: ""; position: absolute; left: -45px; top: calc(50% - 7px); box-sizing: border-box; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--dot, var(--border-strong)); background: var(--surface); }
.timeline .event { padding: 0 6px; }
.timeline .event-dot { display: none; }
.timeline .event-merge, .timeline .event-snooze, .timeline .remote-item { --dot: var(--accent); }
.timeline .rating-item { --dot: #0a9d5a; }
.timeline .rating-item.is-bad { --dot: var(--danger); }
.message-head strong { font-weight: 600; color: var(--text); }
.message.is-collapsed > .tl-dot { display: grid; }
@media (max-width: 600px) {
  .timeline { padding-left: 0; }
  .timeline::before, .tl-dot, .timeline > li:not(.message)::before { display: none; }
}

/* Customers: donut chart with legend, people list, ticket counts with a small bar */
.donut-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
.donut { width: 100%; max-width: 190px; height: auto; display: block; margin: 0 auto; }
.donut-track { fill: none; stroke: var(--surface-3); stroke-width: 5.5; }
.donut-seg { fill: none; stroke-width: 5.5; cursor: default; }
.donut-seg:hover { stroke-width: 6.5; }
.donut-value { font-size: 7px; font-weight: 700; fill: var(--text); dominant-baseline: middle; }
.donut-label { font-size: 3px; fill: var(--text-2); text-transform: uppercase; letter-spacing: .1px; }
.seg-0 { stroke: var(--navy, #1e3d73); background: var(--navy, #1e3d73); } .seg-1 { stroke: #0a9d5a; background: #0a9d5a; } .seg-2 { stroke: #1f7fd1; background: #1f7fd1; }
.seg-3 { stroke: #e5a000; background: #e5a000; } .seg-4 { stroke: #7a5cd6; background: #7a5cd6; } .seg-5 { stroke: #b8c0cb; background: #b8c0cb; }
.donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-sm); min-width: 0; }
.donut-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 3.2em; align-items: center; gap: 8px; }
.legend-key { width: 10px; height: 10px; border-radius: 3px; }
.donut-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-num { font-weight: 600; font-variant-numeric: tabular-nums; }
.donut-pct { color: var(--text-2); text-align: right; font-variant-numeric: tabular-nums; }
.person-list { list-style: none; margin: 0; padding: 0; }
.person-list li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.person-list li:last-child { border-bottom: 0; }
.person-list .avatar { width: 36px; height: 36px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); font-weight: 700; flex: none; }
.person-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.35; }
.person-text a { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.count-pill { flex: none; min-width: 2.2em; text-align: center; padding: 2px 8px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-text); font-weight: 700; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.chart-card td .person .avatar { border-radius: var(--radius); flex: none; }
.num-bar { display: inline-flex; align-items: center; gap: 10px; justify-content: flex-end; }
.num-bar .bar-track { width: 80px; height: 6px; }
@media (max-width: 600px) { .num-bar .bar-track { display: none; } }
.person-text strong { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-card tr.is-inactive td { color: var(--text-2); }

/* Lists with an icon tile (searches, articles); count labels coloured by meaning */
.list-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); }
.list-icon .icon { width: 18px; height: 18px; }
.person-list li.tone-amber .list-icon, .person-list li.tone-amber .count-pill { background: color-mix(in srgb, #e5a000 14%, var(--surface)); color: #9a6a00; }
.person-list li.tone-red .list-icon, .person-list li.tone-red .count-pill { background: color-mix(in srgb, #e0315f 12%, var(--surface)); color: #b3264c; }
.list-foot { margin-top: 10px; }
.donut-value.is-long { font-size: 5px; }
.bar-list.wide-values .bar-row { grid-template-columns: minmax(90px, 34%) 1fr 6.5em; }

/* Bar charts: a different colour per row (the same order as the donut charts) */
.bar-fill.tone-c0 { background: var(--navy, #1e3d73); } .bar-fill.tone-c1 { background: #0a9d5a; } .bar-fill.tone-c2 { background: #1f7fd1; } .bar-fill.tone-c3 { background: #e5a000; }
.bar-fill.tone-c4 { background: #7a5cd6; } .bar-fill.tone-c5 { background: #0aa2b5; } .bar-fill.tone-c6 { background: #e0315f; } .bar-fill.tone-c7 { background: #f07f3c; }

.button.remote-inline { background: #ffbf43; border-color: #ffbf43; color: #212529; }
.button.remote-inline:hover { background: #f5ad20; border-color: #f5ad20; color: #212529; }

/* Under the reply box: Attach files, Draft with AI and Insert saved reply as buttons, like the download button */
.composer-foot { gap: 8px; }
.composer-foot .foot-button { gap: 7px; }
.composer-foot .foot-button .icon { width: 16px; height: 16px; color: currentColor; }
.composer-foot .foot-icon { width: 34px; min-height: 34px; height: 34px; padding: 0; }
.composer-foot .foot-icon .icon { width: 18px; height: 18px; }
.file-input.button span { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.file-input.button:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Left side menu: regular weight throughout (links, active link, section headings, counts, footer buttons) */
.sidebar .nav-link, .sidebar .nav-link.is-active, .sidebar .nav-heading, .sidebar .nav-count, .sidebar .nav-foot button { font-weight: 400; }

/* Reply box footer: the three tool icons and the export icon sit together on the left, on the same line as the
   switch and Send buttons on the right (it only wraps when the pane is too narrow) */
.pane-reply .composer-foot > .spacer { flex: 1 1 0; min-width: 0; height: auto; order: 1; }
.pane-reply .composer-foot > .foot-export { order: 0; }
/* Notify customer: a smaller switch with its label underneath, both right-aligned, so the pair is no taller than the buttons */
.pane-reply .composer-foot > .switch { flex-direction: column; align-items: flex-end; gap: 2px; font-size: 10px; line-height: 1.1; text-align: right; }
.pane-reply .composer-foot > .switch .switch-track { margin: 0; width: 28px; height: 16px; }
.pane-reply .composer-foot > .switch > span:not(.switch-track) { margin: 0; font-size: 10px; line-height: 1.1; }
.pane-reply .composer-foot > .switch .switch-track::after { width: 12px; height: 12px; }
.pane-reply .composer-foot > .switch input:checked + .switch-track::after { transform: translateX(12px); }
/* In a narrow reply column the footer takes two lines: the tool icons, then the Notify customer switch with
   Resolve and Send reply on the same line, to the right */
.pane-reply .composer { container-type: inline-size; }
@container (max-width: 400px) {
  .pane-reply .composer-foot::before { content: ""; order: 4; flex: 1 0 100%; height: 0; margin-top: -8px; }
  .pane-reply .composer-foot > .switch { order: 5; margin-left: auto; }
  .pane-reply .composer-foot > .send-resolve { order: 6; }
  .pane-reply .composer-foot > .send-reply { order: 7; }
  .pane-reply .composer.is-internal .composer-foot > .send-reply { margin-left: auto; }
}

/* Resolve button under the reply box: green */
.composer-foot .send-resolve { background: var(--success); border-color: var(--success); color: var(--bg); }
.composer-foot .send-resolve:hover { background: var(--success); border-color: var(--success); color: var(--bg); filter: brightness(0.92); }

/* "Draft saved … · Discard draft" sits between the Reply/Internal note tabs and the editor. Its space is kept
   even while hidden, so the editor doesn't jump down when the first draft is saved. */
.composer .draft-status { margin: -4px 0 -4px; min-height: 1.2em; line-height: 1.2; }
.composer > div[data-reply-only]:has(> .ai-draft[hidden]) { display: none; }
.composer .draft-status[hidden] { display: block; visibility: hidden; }

/* Three-pane ticket page: the reply pane fits the window instead of scrolling. The editor takes the space that is
   left and scrolls inside itself, so the buttons under it (attach, AI, saved reply, Resolve, Send reply) always show. */
@media (min-width: 1180px) {
  .pane-reply > .composer { flex: 1 1 auto; min-height: 0; margin-bottom: 0; }
  .pane-reply .composer > * { flex: none; }
  .pane-reply .composer > .ticket-editor { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .pane-reply .composer > .ticket-editor > .editor-toolbar { flex: none; }
  .pane-reply .composer > .ticket-editor .editor-flow { flex: 1 1 auto; min-height: 120px; overflow-y: auto; }
}

/* Conversation: Expand all / Collapse all as small icon buttons */
.pane-tools .thread-tool { width: 28px; height: 28px; }
.pane-tools .thread-tool[hidden] { display: none; }
.pane-tools .thread-tool .icon { width: 16px; height: 16px; }

/* Ticket page heading: "#15094 - Subject". The number is in the dark blue; hover it for channel, opened date and Zoho number. */
.subject-line h1 .ticket-no { color: var(--accent); font-variant-numeric: tabular-nums; }

input.is-readonly, .form-grid input.is-readonly { background: var(--surface-2); color: var(--text-2); cursor: default; }

/* Knowledge base and Saved replies: two buttons above the Details card, each opening a search popup below them */
.properties .prop-static > span { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); margin-bottom: 4px; }
.properties .customer-trigger { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.properties .customer-trigger:hover { text-decoration: underline; }
.properties .customer-trigger:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.properties .customer-trigger .icon { flex: none; width: 14px; height: 14px; }
.properties .prop-email { margin: 2px 0 0; color: var(--text); font-size: var(--fs-sm); }
.customer-dialog { width: min(420px, calc(100vw - 32px)); padding: 20px; border: 0; border-radius: var(--radius-card); background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.customer-dialog::backdrop { background: rgba(15, 20, 34, .6); }
.customer-dialog h2 { margin: 0 0 4px; }
.customer-dialog .dialog-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.customer-dialog .dialog-link { margin-left: auto; font-size: var(--fs-sm); }
.side-pickers { position: relative; display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
.side-pickers .foot-picker { flex: 1 1 140px; min-width: 0; justify-content: center; gap: 5px; min-height: 36px; padding-left: 6px; padding-right: 6px; font-size: 12px; white-space: nowrap; }
.side-pickers .foot-picker > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.side-pickers .foot-picker .icon { flex: none; width: 14px; height: 14px; color: currentColor; }
.side-pickers .foot-picker[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.side-pickers > .kb-picker.is-popup {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40;
  box-sizing: border-box; padding: 10px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
}
.kb-picker.is-popup .kb-picker-head input[type="search"] { flex: 1 1 auto; min-width: 0; }
.kb-picker.is-popup .kb-picker-results { max-height: min(360px, 50vh); scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.kb-picker.is-popup .kb-picker-results > li + li { border-top: 1px solid var(--border); }
.kb-picker.is-popup .kb-picker-item { padding: 8px 8px; border-radius: 6px; }
.kb-picker.is-popup .kb-picker-meta { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-picker.is-popup .kb-picker-heading { padding: 8px 8px 4px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); list-style: none; border-top: 0 !important; }
.kb-picker.is-popup .kb-picker-note { margin: 8px 0 0; }

/* ---- Dark theme, from the FinDash dark template (html-dark): near-black page (#13131a), cards, side menu and top bar
   in #1c1c24, hover and active rows #292932, 10% white borders, body text #b5b5be with near-white headings (#fafafb),
   and the template's success, danger and warning colours with 20% tinted backgrounds. Links, focus and the active
   highlights use the template's light blue (#309cf3) because navy cannot be read on the dark cards; solid buttons
   stay navy. */
@media (prefers-color-scheme: dark) {
  :root:has(.shell, .portal):not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #13131a; --surface: #1c1c24; --surface-2: #22222b; --surface-3: #292932; --row-alt: #20202a;
    --border: rgba(255, 255, 255, .1); --border-strong: rgba(255, 255, 255, .2);
    --text: #b5b5be; --text-2: #a09e9e; --text-3: #9a9aa6; --title: #fafafb;
    --accent: #309cf3; --accent-hover: #5db4f6; --accent-soft: rgba(48, 156, 243, .16); --accent-text: #309cf3;
    --primary: #1e3d73; --primary-hover: #2a4f91; --on-primary: #ffffff; --focus: #309cf3; --navy: #309cf3;
    --sidebar: #1c1c24; --sidebar-border: transparent; --sidebar-text: #b5b5be; --sidebar-muted: #9a9aa6;
    --sidebar-hover: #292932; --sidebar-hover-text: #ffffff; --sidebar-active: #292932; --sidebar-active-text: #ffffff;
    --sidebar-indicator: #309cf3; --sidebar-count: #292932;
    --internal: rgba(255, 191, 67, .1); --internal-border: rgba(255, 191, 67, .35);
    --customer: #1c1c24; --agent-msg: #20263a;
    --danger: #fe517e; --danger-soft: rgba(254, 81, 126, .2);
    --success: #65f9b3; --success-soft: rgba(101, 249, 179, .2);
    --warning: #ffbf43;
    --shadow: 0 0 20px rgba(28, 28, 36, .1);
    --code-bg: #13131a; --code-border: rgba(255, 255, 255, .2);
    --s-new: #309cf3; --s-new-bg: rgba(48, 156, 243, .2); --s-open: #65f9b3; --s-open-bg: rgba(101, 249, 179, .2);
    --s-pending: #ffbf43; --s-pending-bg: rgba(255, 191, 67, .2); --s-hold: #9267ff; --s-hold-bg: rgba(146, 103, 255, .2);
    --s-resolved: #79a6dc; --s-resolved-bg: rgba(121, 166, 220, .2); --s-closed: #a09e9e; --s-closed-bg: rgba(160, 158, 158, .2);
    --p-low: #ffbf43; --p-low-bg: rgba(255, 191, 67, .2); --p-normal: #65f9b3; --p-normal-bg: rgba(101, 249, 179, .2);
    --p-high: #fe517e; --p-high-bg: rgba(254, 81, 126, .2);
    --table-ink: #b5b5be; --table-line: rgba(255, 255, 255, .1);
    --series-1: #309cf3; --series-2: #65f9b3; --chart-grid: rgba(255, 255, 255, .08); --chart-axis: rgba(255, 255, 255, .2); --chart-ink: #a09e9e;
    --heat-0: #22222b; --heat-1: #1f2a44; --heat-2: #1e3d73; --heat-3: #25579f; --heat-4: #2a7ad0; --heat-5: #309cf3; --heat-6: #7fc4fa;
  }
}
:root[data-theme="dark"]:has(.shell, .portal) {
    color-scheme: dark;
    --bg: #13131a; --surface: #1c1c24; --surface-2: #22222b; --surface-3: #292932; --row-alt: #20202a;
    --border: rgba(255, 255, 255, .1); --border-strong: rgba(255, 255, 255, .2);
    --text: #b5b5be; --text-2: #a09e9e; --text-3: #9a9aa6; --title: #fafafb;
    --accent: #309cf3; --accent-hover: #5db4f6; --accent-soft: rgba(48, 156, 243, .16); --accent-text: #309cf3;
    --primary: #1e3d73; --primary-hover: #2a4f91; --on-primary: #ffffff; --focus: #309cf3; --navy: #309cf3;
    --sidebar: #1c1c24; --sidebar-border: transparent; --sidebar-text: #b5b5be; --sidebar-muted: #9a9aa6;
    --sidebar-hover: #292932; --sidebar-hover-text: #ffffff; --sidebar-active: #292932; --sidebar-active-text: #ffffff;
    --sidebar-indicator: #309cf3; --sidebar-count: #292932;
    --internal: rgba(255, 191, 67, .1); --internal-border: rgba(255, 191, 67, .35);
    --customer: #1c1c24; --agent-msg: #20263a;
    --danger: #fe517e; --danger-soft: rgba(254, 81, 126, .2);
    --success: #65f9b3; --success-soft: rgba(101, 249, 179, .2);
    --warning: #ffbf43;
    --shadow: 0 0 20px rgba(28, 28, 36, .1);
    --code-bg: #13131a; --code-border: rgba(255, 255, 255, .2);
    --s-new: #309cf3; --s-new-bg: rgba(48, 156, 243, .2); --s-open: #65f9b3; --s-open-bg: rgba(101, 249, 179, .2);
    --s-pending: #ffbf43; --s-pending-bg: rgba(255, 191, 67, .2); --s-hold: #9267ff; --s-hold-bg: rgba(146, 103, 255, .2);
    --s-resolved: #79a6dc; --s-resolved-bg: rgba(121, 166, 220, .2); --s-closed: #a09e9e; --s-closed-bg: rgba(160, 158, 158, .2);
    --p-low: #ffbf43; --p-low-bg: rgba(255, 191, 67, .2); --p-normal: #65f9b3; --p-normal-bg: rgba(101, 249, 179, .2);
    --p-high: #fe517e; --p-high-bg: rgba(254, 81, 126, .2);
    --table-ink: #b5b5be; --table-line: rgba(255, 255, 255, .1);
    --series-1: #309cf3; --series-2: #65f9b3; --chart-grid: rgba(255, 255, 255, .08); --chart-axis: rgba(255, 255, 255, .2); --chart-ink: #a09e9e;
    --heat-0: #22222b; --heat-1: #1f2a44; --heat-2: #1e3d73; --heat-3: #25579f; --heat-4: #2a7ad0; --heat-5: #309cf3; --heat-6: #7fc4fa;
}
:root:has(.shell, .portal) :is(h1, h2, h3, h4) { color: var(--title, var(--text)); }
:root:has(.shell, .portal) :is(.user-menu .who strong, .message-head strong) { color: var(--title, var(--text)); }

/* Settings home: all the settings as cards in one grid, no section headings */
.settings-cards { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 18px; }

/* Knowledge base home: the category cards on the left (four to a row; fewer when the window is narrower), Your drafts above Recently updated on the right */
.kb-home { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; margin-top: 18px; }
.kb-home > .category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kb-home > .kb-lists { margin-top: 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kb-home > .kb-lists > .card { margin: 0; }
@media (max-width: 1100px) { .kb-home { grid-template-columns: minmax(0, 1fr); } }
.kb-home > .kb-lists .article-meta { justify-content: flex-start; flex-wrap: wrap; gap: 2px 6px; }
@media (min-width: 1101px) and (max-width: 1399px) { .kb-home > .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1101px) and (max-width: 1220px) { .kb-home > .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .kb-home > .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .kb-home > .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .kb-home > .category-grid { grid-template-columns: minmax(0, 1fr); } }

/* Knowledge base sub-categories: "N sub-categories" on a category card; the sub-category cards at the top of a
   category's page (four to a row, like the home); sub-categories indented under their parent in Categories */
.category-subs { color: var(--accent); font-size: var(--fs-xs); }
.subcategories .category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.subcategories + .section-title { margin-top: 26px; }
@media (max-width: 1100px) { .subcategories .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .subcategories .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kb-category-table tr.is-sub .col-name { padding-left: 34px; }
.kb-category-table .sub-mark { color: var(--text-3); margin-right: 8px; }
.kb-category-table tr.is-top .col-name a { font-weight: 600; }

/* Customer portal, in the same look as the agent console: a white top bar (76 px) with the soft shadow and tabs like
   the console's (accent text and underline when active); the help article search as wide as the page; the category
   cards with a folder icon, four to a row */
.portal-top { height: 76px; background: var(--surface); border-bottom: 0; box-shadow: var(--shadow); }
.portal-link { font-weight: 600; color: var(--text-2); border-bottom-width: 2px; }
.portal-link:hover { background: transparent; color: var(--accent); }
.portal-link.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.portal-who strong { color: var(--title, var(--text)); }
.search.portal-kb-search { max-width: none; background: var(--surface); border: 1px solid var(--border-strong); padding: 0 14px; }
.search.portal-kb-search:focus-within { border-color: var(--accent); }
.search.portal-kb-search input { padding: 11px 0; }
.portal-kb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.portal-kb-cat, .portal-tile { border-color: transparent; }
.portal-kb-cat:hover, .portal-tile:hover { border-color: var(--accent); }
.portal-kb-cat .category-icon { color: var(--accent); margin-bottom: 2px; }
.portal-kb-cat .category-icon .icon { width: 22px; height: 22px; }
@media (max-width: 1100px) { .portal-kb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .portal-top { height: auto; } .portal-kb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .portal-kb-grid { grid-template-columns: minmax(0, 1fr); } }

/* Customer portal top bar laid out like the console's: logo, tabs, a help article search, then on the right New ticket,
   the square navy theme button and the person (initials, name, organisation) with their menu */
.portal-top { gap: 20px; padding: 0 28px; }
.portal-top .portal-nav { flex: none; }
.portal-top .portal-top-search { flex: 1 1 220px; }
.portal-top .topbar-actions { gap: 8px; }
.portal-top .topbar-actions .icon-button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius); background: var(--primary); color: var(--on-primary); border: 0; cursor: pointer; }
.portal-top .topbar-actions .icon-button:hover { background: var(--primary-hover); }
.portal-top .topbar-actions .icon-button .icon { width: 18px; height: 18px; }
.portal-top .portal-signin { font-weight: 600; }
@media (max-width: 760px) {
  /* phones: logo and the buttons on the first line, the tabs across the second */
  .portal-top { padding: 10px 16px 0; }
  .portal-top .portal-top-search { display: none; }
  .portal-top .portal-new span { display: none; }
  .portal-top .topbar-actions { order: 2; margin-left: auto; }
  .portal-top .portal-nav { order: 3; flex: 0 0 100%; }
}
/* the logo on its own, as in the console, in a block as wide as the console's side menu so the tabs start in the
   same place */
.portal-top .portal-brand { flex: none; width: 240px; }
@media (max-width: 760px) { .portal-top .portal-brand { width: auto; } }

/* Portal topic page: the search sits to the right of the heading */
.page-head .search.portal-cat-search { flex: 0 1 380px; margin: 0; }
@media (max-width: 760px) { .page-head:has(.portal-cat-search) { flex-wrap: wrap; } .page-head .search.portal-cat-search { flex: 1 1 100%; } }

/* Phones: the top bar scrolls away, so nothing needs to stick below it */
@media (max-width: 760px) { :root:has(.shell, .portal) { --topbar-h: 0px; } }

/* Ticket page: make the reply box and the side cards (Details, Time spent...) stand out from the page */
.pane-side .card, .ticket-side .card, .card.composer { border: 1px solid var(--border-strong); background: var(--surface-2); box-shadow: 0 1px 4px rgba(44, 101, 144, .12); }
.card.composer { border-width: 1px; }
.pane-side .card input, .pane-side .card select, .pane-side .card textarea, .ticket-side .card input, .ticket-side .card select, .ticket-side .card textarea { background: var(--surface); }
/* Conversation pane: same outline as the reply box and side cards */
.pane-thread { border: 1px solid var(--border-strong); background: var(--surface-2); border-radius: var(--radius-card); box-shadow: 0 1px 4px rgba(44, 101, 144, .12); padding: 14px 12px 14px 16px; }
/* Intro text under a page title runs the full width of the page, as the tables and forms below it do */
.lead { max-width: none; }
/* Lists with a search: the Add button, then the search box, at the top right of the page */
.head-tools { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.head-search { margin: 0; }
.head-search input { width: 300px; max-width: 100%; }
@media (max-width: 760px) { .page-head:has(.head-tools) { flex-wrap: wrap; } .head-tools { width: 100%; flex-wrap: wrap; } .head-search { flex: 1 1 100%; } .head-search input { width: 100%; } }
.head-search.is-wide input { width: 420px; }
.head-tools .kb-search.compact { margin: 0; width: 340px; max-width: 100%; padding-right: 12px; }

/* Tick boxes in lists, as in the template: square with soft corners, filled with the accent colour and a white tick when on */
table input[type="checkbox"]:not([role="switch"]) { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0; padding: 0; vertical-align: middle; border: 1.5px solid var(--border-strong); border-radius: 4px; background: var(--surface) center / 12px 12px no-repeat; cursor: pointer; transition: background-color .12s, border-color .12s, box-shadow .12s; }
table input[type="checkbox"]:not([role="switch"]):hover { border-color: var(--accent); }
table input[type="checkbox"]:not([role="switch"]):focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }
table input[type="checkbox"]:not([role="switch"]):checked { background-color: var(--accent); border-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
table input[type="checkbox"]:not([role="switch"]):indeterminate { background-color: var(--accent); border-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
table input[type="checkbox"]:not([role="switch"]):disabled { opacity: .5; cursor: not-allowed; }
.num.col-center { text-align: center; }

/* Company logo: as wide as the menu items below it, and as tall as that needs (on computers; phones keep the small one) */
@media (min-width: 761px) {
  .brand { height: auto; min-height: 76px; padding: 14px 15px; margin: 0 -15px; }
  .brand-logo { width: 100%; height: auto; }
}

/* Columns of tick boxes are always centred, heading and boxes alike */
th.col-check, td.col-check, th.col-portal, td.col-portal,
td:has(> input[type="checkbox"]:not([role="switch"])), td:has(> .portal-box),
.notify-matrix thead th:not(:first-child) { text-align: center; }
th.col-check, td.col-check { padding-left: 14px !important; padding-right: 0 !important; width: 1%; }
.col-center { text-align: center; }

/* The same tick boxes in forms (organisation, contact, settings…): square, soft corners, accent fill with a white tick */
.check input[type="checkbox"]:not([role="switch"]) { flex: none; margin-top: 1px; -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0; padding: 0; vertical-align: middle; border: 1.5px solid var(--border-strong); border-radius: 4px; background: var(--surface) center / 12px 12px no-repeat; cursor: pointer; transition: background-color .12s, border-color .12s, box-shadow .12s; }
.check input[type="checkbox"]:not([role="switch"]):hover { border-color: var(--accent); }
.check input[type="checkbox"]:not([role="switch"]):focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }
.check input[type="checkbox"]:not([role="switch"]):checked { background-color: var(--accent); border-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.check input[type="checkbox"]:not([role="switch"]):indeterminate { background-color: var(--accent); border-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
.check input[type="checkbox"]:not([role="switch"]):disabled { opacity: .5; cursor: not-allowed; }
.check input[type="checkbox"]:not([role="switch"]) { margin: 1px 0 0; }

/* Organisation page: the cards in a column are the same width and evenly spaced */
.two-col > .stack { min-width: 0; }
.two-col > .stack > * { min-width: 0; max-width: none; width: 100%; box-sizing: border-box; }
.two-col > .stack > .org-contacts { margin-top: 0; }

/* Organisation page: the three tick options side by side (one per row on narrow screens) */
.check-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
@media (max-width: 900px) { .check-cols { grid-template-columns: minmax(0, 1fr); } }

/* Compact ticket tables (organisation and contact pages): the Ticket column lines up with its heading */
table.tickets.compact td.ticket-cell { padding-left: 14px; }

/* The three options are equal-width, equal-height boxes */
.check-cols { align-items: stretch; }
.check-cols > .check { box-sizing: border-box; padding: 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); min-width: 0; }