/*
 * VosCast staff panel, on top of the Daylight Glass tokens and components in css/daylight/.
 *
 * The shell (navigation, account menu, section links, notices) shows on every page. Pages rebuilt in
 * Daylight Glass (all of the staff panel now) have body.vc-ui; any other page gets body.staff-ui and
 * css/modern.css, so shell selectors carry two classes to win over modern.css's body.staff-ui rules.
 */

.vc-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

body a.vc-skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--ink); color: var(--onink); font: 600 14px/20px var(--font-sans); text-decoration: none; }
body a.vc-skip:focus { top: 12px; color: var(--onink); text-decoration: none; }

/* Shell */
.vc-nav.vc-shell { position: sticky; top: 0; z-index: 50; flex-wrap: wrap; gap: 10px 20px; color: var(--ink); font-family: var(--font-sans); font-stretch: 96%; font-size: 14px; line-height: 20px; text-align: left; }
.vc-shell .vc-nav__brand img { display: block; width: auto; max-width: none; height: 24px; }
.vc-shell .vc-nav__links { flex-wrap: wrap; }
.vc-shell .vc-nav__link { color: var(--ink2); text-decoration: none; }
.vc-shell .vc-nav__link:hover { color: var(--acc-strong); text-decoration: none; }
.vc-shell .vc-nav__link[aria-current="page"] { color: var(--ink); }
.vc-shell .vc-nav__end { flex-wrap: wrap; }
/* A page's one search shows "/", which jumps to it (panel.js); phones have no key for it */
.vc-search > .vc-kbd { margin-right: 6px; }
@media (max-width: 859px) {
    .vc-search > .vc-kbd { display: none; }
}
body .vc-shell a:focus-visible, body .vc-shell summary:focus-visible, body .vc-shell input:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.vc-account { position: relative; }
.vc-account > summary { list-style: none; cursor: pointer; user-select: none; }
.vc-account > summary::-webkit-details-marker { display: none; }
.vc-account__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; display: flex; flex-direction: column; min-width: 220px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); box-shadow: var(--shadow-glass); }
.vc-shell .vc-account__who { display: flex; flex-direction: column; margin: 0 0 4px; padding: 8px 10px 10px; border-bottom: 1px solid var(--rule); color: var(--ink); font-size: 14px; line-height: 20px; }
.vc-shell .vc-account__who span { color: var(--mut2); font-family: var(--font-mono); font-size: 12px; }
.vc-shell .vc-account__menu a { padding: 8px 10px; border-radius: 10px; color: var(--ink2); text-decoration: none; }
.vc-shell .vc-account__menu a:hover { background: var(--panel); color: var(--ink); text-decoration: none; }

.vc-alert.vc-shell__notice { box-sizing: border-box; width: calc(100% - 48px); max-width: 1392px; margin: 12px auto 0; font-family: var(--font-sans); text-align: left; }

/* Pages opened in place (js/nav.js): the bar along the top while one loads, and the page fades a little when a
   load takes a while. The page's heading takes focus after a load, without an outline: it isn't a control. */
.vc-progress { position: fixed; top: 0; left: 0; z-index: 70; width: 100%; height: 3px; pointer-events: none; opacity: 0; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--lime), var(--acc)); box-shadow: 0 0 8px var(--lime-line); transition: transform .2s ease-out, opacity .3s ease; }
.vc-progress.is-active { opacity: 1; }
#content[aria-busy="true"] { opacity: .6; transition: opacity .15s ease .35s; }
#content h1[tabindex="-1"]:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
    .vc-progress, #content[aria-busy="true"] { transition: none; }
}

/* Section links on pages that haven't been rebuilt yet (the older sub-menu), inside their card */
.vc-subnav { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 1.5rem; border-bottom: 1px solid var(--rule); background: var(--bg); font-family: var(--font-sans); font-size: 14px; line-height: 20px; }
.vc-subnav .vc-subnav__link { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--radius-pill); color: var(--mut); font-weight: 600; text-decoration: none; white-space: nowrap; }
.vc-subnav .vc-subnav__link:hover { color: var(--ink); text-decoration: none; }
.vc-subnav .vc-subnav__link[aria-current="page"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-card); }

/* Rebuilt pages. The old main.css styles bare elements (td, p, select…); :where() keeps these resets
   as weak as those rules so component classes still win. */
body.vc-ui { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-stretch: 96%; font-size: 14px; line-height: 20px; text-align: left; }
:where(.vc-ui) td, :where(.vc-ui) th { font-family: inherit; font-size: inherit; color: inherit; }
:where(.vc-ui) p, :where(.vc-ui) ul, :where(.vc-ui) ol, :where(.vc-ui) dl { margin: 0; font-size: inherit; }
:where(.vc-ui) select { border: 1px solid var(--line-control); }
.vc-ui #container { width: auto; margin: 0; padding: 0; border: 0; background: none; }
.vc-ui #content.vc-main { display: block; box-sizing: border-box; max-width: 1392px; margin: 0 auto; padding: 20px 24px 96px; }
.vc-ui #footer { box-sizing: border-box; width: auto; max-width: 1392px; margin: 0 auto; padding: 0 24px 24px; border: 0; background: none; color: var(--mut2); font-size: 12px; text-align: center; }
.vc-ui .staff-footer-cron { width: 1px; height: 1px; overflow: hidden; }
.vc-ui .staff-footer-spacer { display: none; }
.vc-ui .vc-alert { margin-bottom: 12px; }
.vc-ui input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--lime); }

.vc-updated { color: var(--mut2); font-family: var(--font-mono); font-size: 12px; }
.vc-ui a.vc-btn { text-decoration: none; }
.vc-ui a.vc-tab { text-decoration: none; }

/* Ticket queue */

.vc-advanced { margin-top: 12px; }
.vc-advanced__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.vc-advanced__wide { grid-column: span 2; }
.vc-advanced__dates { display: flex; align-items: center; gap: 8px; }
.vc-advanced__dates .vc-input { width: 120px; }
.vc-advanced__actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }

.vc-queue { margin-top: 12px; }
.vc-queue .vc-table { table-layout: fixed; min-width: 1460px; font-size: .875rem; line-height: 1.5; }
.vc-queue .vc-table th { font-size: .8125rem; line-height: 1.4; letter-spacing: .04em; }
.vc-queue .vc-table th, .vc-queue .vc-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-queue .vc-col-select { width: 44px; }
.vc-queue .vc-col-id { width: 92px; }
.vc-queue .vc-col-from { width: 168px; }
.vc-queue .vc-col-dept { width: 112px; }
.vc-queue .vc-col-pri { width: 116px; }
.vc-queue .vc-col-opened { width: 84px; }
.vc-queue .vc-col-due { width: 116px; }
.vc-queue .vc-col-who { width: 132px; }
.vc-queue .vc-col-activity { width: 132px; }
.vc-queue .vc-table th a { display: inline-block; }
.vc-queue .vc-table th a:hover { color: var(--ink); }
.vc-queue .vc-table tbody tr.is-current td { background: var(--panel); }
.vc-queue .vc-table tbody tr.is-current td:first-child { box-shadow: inset 3px 0 0 var(--ink); }
.vc-queue .vc-table tbody tr[aria-selected="true"] td { background: var(--lime-soft); }
.vc-subject { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vc-subject .vc-row-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-subject .vc-row-link:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 2px; }
.vc-queue .vc-table tbody tr:focus-within td { background: var(--panel); }
.vc-subject__meta { flex: none; color: var(--mut2); font-size: .8125rem; }
.vc-subject__files { flex: none; color: var(--mut2); font-family: var(--font-mono); font-size: .75rem; }
.vc-pri { display: inline-flex; align-items: center; gap: 8px; }
.vc-queue .vc-pager a { color: var(--ink2); }
.vc-pager__keys { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.vc-pager__pages { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vc-pager__pages .vc-select { width: auto; height: 30px; padding: 0 8px; font-size: 13px; }
.vc-empty { padding: 48px 24px; color: var(--mut); text-align: center; }
.vc-empty strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 16px; }

.vc-bulk { position: fixed; bottom: 24px; left: 50%; z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); }
.vc-bulk[hidden] { display: none; }
.vc-bulk .vc-bulkbar { flex-wrap: wrap; justify-content: center; }
.vc-bulk .vc-btn[aria-expanded="true"] { background: var(--inv-line); }
.vc-bulkpanel { box-sizing: border-box; width: 420px; max-width: calc(100vw - 32px); padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--card); box-shadow: var(--shadow-glass); }
.vc-bulkpanel[hidden] { display: none; }
.vc-bulkpanel .vc-field + .vc-field { margin-top: 12px; }
.vc-bulkpanel .vc-textarea { min-height: 72px; }
.vc-bulkpanel__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* Shared bits for rebuilt pages */
.vc-inline-form { display: inline-flex; margin: 0; }
.vc-ui button.vc-tab { border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.vc-ui button.vc-tab[aria-selected="true"] { background: var(--card); }
.vc-ui .vc-select--sm { width: auto; height: 30px; padding: 0 8px; font-size: 13px; }
.vc-ui [hidden] { display: none !important; }

/* Forms on rebuilt pages: the main column holds the content, the side column the settings and actions */
.vc-formgrid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; margin: 16px 0 0; }
.vc-formgrid__main { display: flex; flex: 999 1 560px; flex-direction: column; gap: 12px; min-width: 0; }
.vc-formgrid__side { display: flex; flex: 1 1 340px; flex-direction: column; gap: 12px; min-width: 0; max-width: 420px; }
.vc-formcard { display: flex; flex-direction: column; gap: 14px; }
.vc-formcard .vc-t-section-title { margin: 0; color: var(--ink); }
.vc-formcard__labelrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.vc-formcard__canned { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-left: auto; }
.vc-ui .vc-formcard__canned .vc-select { min-width: 240px; }
.vc-formcard__choices { margin: 0; padding: 0; border: 0; }
.vc-formcard__choices legend { padding: 0; margin-bottom: 6px; }
.vc-fieldrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.vc-fieldrow--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vc-req { color: var(--danger); }
.vc-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.vc-inline--nowrap { flex-wrap: nowrap; gap: 8px; }
.vc-ui .vc-input--ext { flex: none; width: 76px; }
.vc-ui .vc-input--date { flex: 1 1 auto; min-width: 0; }
.vc-ui .vc-select--time { flex: none; width: auto; }
.vc-ui .vc-check input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.vc-formactions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vc-formactions__reset { margin-left: auto; font-size: 13px; }
.vc-ui .vc-ticketform__issue { min-height: 180px; }
.vc-ticketform > .vc-alert { margin: 0 0 12px; }

/* The way back from a page (the frame's top row, the ticket page's bar) */
.vc-ui a.vc-back { color: var(--mut); font-size: 13px; text-decoration: none; }
.vc-ui a.vc-back:hover { color: var(--ink); }
.vc-tickethead__id { color: var(--mut2); font-size: 15px; font-weight: 500; }
.vc-file { position: relative; cursor: pointer; }
.vc-file:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.vc-file__name { color: var(--mut2); font-family: var(--font-mono); font-size: 12px; }
.vc-file__name:empty { display: none; }

/* Ticket workspace (include/staff/workspace.inc.php, ticketlist.inc.php, viewticket.inc.php; js/workspace.js and
   js/ticket.js). From 860px wide the workspace fills the window below the navigation (workspace.js sets
   --ws-height) and each column scrolls on its own. The queue rail is icons, named on hover; below 1360px Details
   slides over the conversation. Phones show one thing at a time: the list, the conversation, or the details. A
   table-view ticket (.ws--page) is the same conversation and details without the list. */
/* From 860px wide the workspace fills the window under the navigation: no footer, and
   no page heading row, since the list carries the title and switch (ticketlist.inc.php). Up to 1880px wide it runs
   edge to edge. */
.vc-ui #content.vc-main--wide { max-width: none; padding: 0; }
.ws { position: relative; font-size: .875rem; line-height: 1.5; }
.ws .vc-chip--sm { font-size: .75rem; line-height: 1.4; }
.ws-svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ws-label { display: block; margin: 0; color: var(--mut2); font-family: var(--font-mono); font-size: .875rem; line-height: 1.4; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.ws-num { color: var(--mut2); font-family: var(--font-mono); font-size: .8125rem; line-height: 1.4; white-space: nowrap; }
.ws-pri { display: inline-flex; align-items: center; gap: 6px; color: var(--ink2); white-space: nowrap; }
.ws-none { margin: 0; color: var(--mut2); font-size: .8125rem; }
.vc-ui .ws-mini { min-width: 0; width: auto; max-width: 100%; height: auto; min-height: 2.15em; padding: .25em .7em; border: 1px solid var(--line-control); border-radius: var(--radius-pill); background: var(--card); color: var(--ink2); font: inherit; font-size: .875rem; line-height: 1.4; }
.ws-mini:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.vc-ui [data-vc-focus]:focus { outline: none; }

.ws-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.vc-ui .ws-head__title { margin: 0; color: var(--ink); }
.ws-switch .vc-tab { height: 30px; padding: 0 14px; }
.ws-head__end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.vc-ui .ws-alert { margin: 0 0 12px; }
.ws-bar { display: none; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 30px; margin-bottom: 10px; }
.ws--page .ws-bar { display: flex; }
.ws-bar__nav { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.ws-bar__nav .vc-mono { color: var(--mut2); font-size: .8125rem; }
.ws-bar__reply { display: none; }
.ws-convo > .ws-bar { flex: none; min-height: 48px; margin: 0; padding: 8px 24px; border-bottom: 1px solid var(--rule); }
.ws-bar .ws-switch .vc-tab { height: 28px; padding: 0 12px; font-size: .875rem; }

.ws-body { position: relative; display: flex; min-height: 0; overflow: hidden; overflow: clip; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--card); box-shadow: var(--shadow-card); }
/* Each column holds its own absolutely placed bits (the visually hidden labels), so none can make the frame
   scrollable and slide it when a field takes focus. */
.ws-rail, .ws-list, .ws-list__items, .ws-convo, .ws-thread, .ws-details { position: relative; }

/* Queues: a rail of icons with their counts, each naming itself beside the rail on hover or focus */
.ws-rail { z-index: 3; display: flex; flex: none; flex-direction: column; align-items: center; gap: 2px; width: 60px; min-height: 0; padding: 8px 0; border-right: 1px solid var(--rule); background: var(--panel); }
.vc-ui a.ws-queue { position: relative; display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 44px; min-height: 44px; padding: 3px 0; border-radius: var(--radius-md); color: var(--mut); text-decoration: none; }
.vc-ui a.ws-queue:hover { background: var(--neutral-soft); color: var(--ink); }
.vc-ui a.ws-queue:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.vc-ui a.ws-queue[aria-current="page"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-card); }
.ws-queue__icon { width: 20px; height: 20px; }
.ws-queue__count { color: var(--mut2); font-family: var(--font-mono); font-size: .75rem; line-height: 1.25; font-weight: 700; }
.ws-queue[aria-current="page"] .ws-queue__count { color: var(--acc-strong); }
.ws-queue .ws-queue__count--alert { color: var(--danger); }
.vc-ui a.ws-queue--new { width: 44px; min-height: 44px; margin: 0 0 4px; padding: 0; border-radius: 50%; background: var(--ink); color: var(--onink); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.vc-ui a.ws-queue--new:hover { background: var(--ink2); color: var(--onink); }
.vc-ui a.ws-queue--new:focus-visible { outline-offset: 2px; }
.ws-queue--new .ws-queue__icon { width: 20px; height: 20px; stroke-width: 1.7; }
.ws-queue__label, .ws-rail__keys { position: absolute; left: calc(100% + 10px); z-index: 20; padding: 6px 10px; border-radius: 10px; background: var(--inv-bg); color: var(--inv-ink); box-shadow: var(--shadow-glass); font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(-4px); transition: opacity .12s ease, transform .12s ease; }
.ws-queue__label { top: 50%; transform: translate(-4px, -50%); }
.vc-ui a.ws-queue:hover .ws-queue__label, .vc-ui a.ws-queue:focus-visible .ws-queue__label { opacity: 1; transform: translate(0, -50%); transition-delay: .15s; }
.ws-rail__help { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; min-height: 44px; margin-top: auto; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--mut2); cursor: help; }
.ws-rail__help:hover, .ws-rail__help:focus { background: var(--neutral-soft); color: var(--ink); }
.ws-rail__help:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ws-rail__help .ws-svg { width: 20px; height: 20px; }
.ws-rail__keys { bottom: 10px; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; font-weight: 500; }
.ws-rail__keys > span { display: flex; align-items: center; gap: 6px; }
.ws-rail__help:hover + .ws-rail__keys, .ws-rail__help:focus + .ws-rail__keys { opacity: 1; transform: none; transition-delay: .15s; }

/* Ticket list */
.ws-list { display: flex; flex: none; flex-direction: column; width: 340px; min-height: 0; border-right: 1px solid var(--rule); }
.ws-list__head { display: flex; flex: none; flex-direction: column; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid var(--rule); }
.ws-list__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 32px; }
.vc-ui .ws-list__title h2 { min-width: 0; margin: 0; overflow: hidden; color: var(--ink); font-size: 16px; line-height: 22px; font-weight: 700; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; }
.ws-list__top { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--rule); }
.vc-ui .ws-list__page { min-width: 0; margin: 0; overflow: hidden; color: var(--ink); font-size: 20px; line-height: 26px; font-weight: 800; letter-spacing: -0.02em; text-overflow: ellipsis; white-space: nowrap; }
.ws-list__top .ws-switch { flex: none; }
.ws-list__top .ws-switch .vc-tab, .ws-tablehead .ws-switch .vc-tab { height: 28px; padding: 0 12px; font-size: .875rem; }
.ws-tablehead .ws-switch { flex: none; }
.vc-ui .ws-pickall { flex: none; width: 15px; height: 15px; margin: 0 2px; cursor: pointer; }
.vc-ui .ws-sort { flex: 0 1 auto; min-width: 0; max-width: min(100%, 11em); height: auto; min-height: 2em; margin-left: auto; padding: .2em .3em; border: 0; background: transparent; color: var(--mut2); font: inherit; font-size: .875rem; line-height: 1.4; font-weight: 600; text-align: right; cursor: pointer; }
.ws-sort:hover { color: var(--ink); }
.ws-find { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.ws-find .vc-search input { margin: 0; padding: 0; }
.ws-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.vc-ui .ws-filter { flex: 1; min-width: 0; width: auto; height: auto; min-height: 2.15em; padding: .25em .6em; border: 1px solid var(--line-control); border-radius: var(--radius-pill); background: var(--card); color: var(--ink2); font: inherit; font-size: .875rem; line-height: 1.4; }
/* Font-relative bases let controls move to another row before enlarged labels are squeezed. */
.vc-ui .ws-filters > .ws-filter { flex: 1 1 8.5em; min-width: min(100%, 8.5em); max-width: 100%; }
.ws-searching { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--mut); font-size: .8125rem; }
.ws-searching strong { color: var(--ink); }
.vc-ui .ws-searching a { color: var(--acc-strong); }
/* Advanced search: its toggle ends the search field (tinted while in use), its fields open under the filters */
.vc-ui .ws-find__more { display: inline-grid; flex: none; place-items: center; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--mut2); cursor: pointer; }
.vc-ui .ws-find__more:hover, .vc-ui .ws-find__more[aria-expanded="true"] { background: var(--panel); color: var(--ink); }
.vc-ui .ws-find__more.is-on { background: var(--lime-soft); color: var(--acc-strong); }
.ws-find__more:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ws-find__more .ws-svg { width: 17px; height: 17px; }
.ws-advanced { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5em), 1fr)); gap: 10px 8px; min-width: 0; margin: 0; padding: 10px 0 2px; border: 0; border-top: 1px solid var(--rule); }
.ws-advanced[hidden] { display: none; }
.ws-advanced__field { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin: 0; }
.ws-advanced__wide { grid-column: 1 / -1; }
.vc-ui .ws-advanced .ws-filter { flex: none; width: 100%; }
.ws-advanced__dates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--mut2); }
.vc-ui .ws-advanced__dates .ws-filter { flex: 1 1 10em; min-width: min(100%, 10em); width: auto; max-width: 100%; }
.ws-advanced__actions { display: flex; gap: 8px; }
.ws-list__items { display: flex; flex: 1; flex-direction: column; gap: 2px; min-height: 0; padding: 6px; overflow: auto; }
.ws-row { position: relative; }
.vc-ui a.ws-item { display: block; padding: 10px 12px 11px; border: 1px solid transparent; border-radius: var(--radius-md); color: inherit; text-decoration: none; }
.vc-ui .ws-row:hover > a.ws-item { background: var(--panel-strong); color: inherit; }
.vc-ui a.ws-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.vc-ui a.ws-item[aria-current="true"] { border-color: var(--lime-line); background: var(--lime-tint); }
/* The box that picks a ticket sits over the left edge of its row, and the whole edge is the target */
.ws-pick { position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; display: flex; justify-content: center; width: 34px; padding-top: 12px; cursor: pointer; -webkit-user-select: none; user-select: none; }
.vc-ui .ws-pick input { width: 15px; height: 15px; margin: 0; cursor: pointer; }
.vc-ui .ws-row--pick > a.ws-item { padding-left: 34px; }
.vc-ui .ws-row--picked > a.ws-item, .vc-ui .ws-row--picked:hover > a.ws-item { background: var(--lime-soft); }
/* A ticket or chat in the Support list (js/support.js) and a ticket in the queues (ticketlist.inc.php) */
.support-item__title, .support-item__meta, .support-item__footer { display: flex; align-items: center; gap: 6px; min-width: 0; }
.support-item__title { position: relative; }
.support-item__title strong { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .9375rem; font-weight: 600; line-height: 1.4; }
:is(.support-item--replied, .ws-item--replied) .support-item__title strong { font-weight: 750; }
.support-item__time { flex: none; margin-left: auto; color: var(--mut2); font: .8125rem/1.4 var(--font-mono); white-space: nowrap; }
.support-item__preview { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 2px 0 5px; color: var(--ink2); font-size: .875rem; line-height: 1.4; }
.support-item__meta, .support-item__footer { color: var(--mut2); font: .8125rem/1.4 var(--font-sans); }
.support-item__meta { justify-content: space-between; }
.support-item__source { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.support-item__footer { margin-top: 3px; }
.support-item__attention { position: absolute; left: -11px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--lime); pointer-events: none; }
.support-item__draft { flex: none; color: var(--acc-strong); font-weight: 600; white-space: nowrap; }
.support-item__state { flex: none; color: var(--mut); white-space: nowrap; }
.support-item__details { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--mut2); font-size: .8125rem; line-height: 1.4; }
.ws-item__end { display: inline-flex; align-items: center; gap: 6px; min-width: 0; margin-left: auto; white-space: nowrap; }
.ws-item__end .ws-svg { width: 13px; height: 13px; }
.ws-item__lock { display: inline-flex; color: var(--staff-warning-ink, #835500); }
/* Overdue is a word like Draft, so the ticket number keeps its room */
.ws-item__overdue { flex: none; color: var(--danger); font-weight: 600; white-space: nowrap; }
.ws-empty { margin: 28px 16px; color: var(--mut2); font-size: .875rem; text-align: center; }
.ws-empty strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 15px; }
.ws-list__foot { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 5px 10px 5px 14px; border-top: 1px solid var(--rule); color: var(--mut2); font-size: .8125rem; }
.ws-list__pages { display: inline-flex; align-items: center; gap: 6px; }
.ws-list__pages .vc-mono { font-size: .8125rem; }
.ws-list__fresh { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
.ws-list__updated { white-space: nowrap; }
.vc-ui a.ws-refresh { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: var(--mut); }
.vc-ui a.ws-refresh:hover { background: var(--neutral-soft); color: var(--ink); }
.vc-ui a.ws-refresh:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* Picked tickets: a bar across the foot of the list in place of the pages, with Assign and Transfer opening above it */
.ws-bulk { position: relative; z-index: 7; flex: none; margin: 0; }
.ws-bulk[hidden], .ws-list--picking .ws-list__foot { display: none; }
.ws-bulk__bar { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 7px 8px 7px 14px; background: var(--inv-bg); color: var(--inv-ink); font-size: .875rem; }
.ws-bulk__count { margin-right: auto; white-space: nowrap; }
.ws-bulk__count b { color: var(--inv-acc); font-family: var(--font-mono); font-weight: 700; }
.vc-ui .ws-bulk__main, .vc-ui .ws-bulk__main:hover { border-color: var(--inv-ink); background: var(--inv-ink); color: var(--inv-bg); }
.ws-bulk__main:hover { filter: brightness(.94); }
.ws-bulk .ws-menu[open] > summary { background: var(--inv-line); }
.ws-bulk .ws-menu > summary::after { color: inherit; }
.ws-menu--up .ws-menu__list { top: auto; bottom: calc(100% + 8px); }
.ws-bulk__clear { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--inv-ink); cursor: pointer; }
.ws-bulk__clear:hover { background: var(--inv-line); }
.ws-bulk__clear:focus-visible { outline: 2px solid var(--inv-acc); outline-offset: 1px; }
.ws-bulk__panel { position: absolute; right: 8px; bottom: calc(100% + 8px); left: 8px; display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-panel); background: var(--card); box-shadow: var(--shadow-glass); }
.ws-bulk__panel[hidden] { display: none; }
.vc-ui .ws-bulk__panel .vc-textarea { min-height: 56px; }

/* Conversation */
.ws-convo { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; }
.ws-convo__head { flex: none; padding: 12px 24px; border-bottom: 1px solid var(--rule); }
.ws-convo__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ws-convo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.vc-ui .ws-convo__title { display: -webkit-box; margin: 6px 0 2px; overflow: hidden; color: var(--ink); font-size: 21px; line-height: 26px; font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.vc-ui .ws-convo__sub { margin: 0; overflow: hidden; color: var(--mut2); font-size: .8125rem; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.ws-convo__sub b { color: var(--ink2); font-weight: 600; }
.ws-chip--closed { color: var(--ink2); }
.ws-toggle[aria-expanded="true"] { background: var(--neutral-soft); }
.vc-ui .ws-alerts > .vc-alert { flex: none; margin: 12px 24px 0; }
.ws-lock b { font-weight: 700; }
.vc-ui .ws-lock a, .vc-ui .ws-alerts a { color: var(--acc-strong); }
.ws-thread { display: flex; flex: 1; flex-direction: column; gap: 12px; min-height: 0; padding: 18px 24px 20px; overflow: auto; }
.ws-thread:focus { outline: none; }
.vc-ui .ws-thread-update { flex: none; align-self: center; max-width: calc(100% - 32px); min-height: 36px; margin: 8px 16px 0; padding: 7px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--glass); color: var(--ink); box-shadow: var(--shadow-field); font: inherit; font-size: .875rem; font-weight: 600; line-height: 1.4; cursor: pointer; -webkit-backdrop-filter: var(--nav-blur); backdrop-filter: var(--nav-blur); }
.vc-ui .ws-thread-update[hidden] { display: none; }
.vc-ui .ws-thread-update:hover { background: var(--card); }
.vc-ui .ws-thread-update:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ws-thread .vc-message__who { font-size: .875rem; line-height: 1.5; }
.ws-thread .vc-message__role { font-size: .75rem; line-height: 1.4; letter-spacing: .04em; }
.ws-thread .vc-message__meta { font-size: .8125rem; line-height: 1.4; }
.ws-thread .vc-message__title { margin: 0 0 4px; color: var(--ink); font-weight: 700; }
.ws-thread .vc-message__body { max-width: 72ch; font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }
.ws-thread .vc-message__body--html { white-space: normal; overflow-x: auto; }
.ws-thread .vc-message__body pre { max-width: 100%; overflow-x: auto; }
.ws-thread .vc-message__body--html a { color: var(--acc-strong); }
.ws-day { display: flex; align-items: center; gap: 12px; color: var(--mut2); font-family: var(--font-mono); font-size: .8125rem; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; }
.ws-day::before, .ws-day::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.vc-ui .ws-event { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; color: var(--mut2); font-size: .8125rem; line-height: 1.4; text-align: center; }
.ws-event::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--mut3); }
.ws-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ws-files--col { flex-direction: column; align-items: flex-start; margin-top: 0; }
.vc-ui a.ws-file { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 12px; border: 1px solid var(--line-tag); border-radius: var(--radius-pill); background: var(--card); color: var(--ink2); font-size: .875rem; line-height: 1.4; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.vc-ui a.ws-file:hover { border-color: var(--line-control); color: var(--acc-strong); }
.ws-file__size { flex: none; color: var(--mut2); font-family: var(--font-mono); font-size: .8125rem; font-weight: 400; }
.vc-fold > summary { list-style: none; }
.vc-fold > summary::-webkit-details-marker { display: none; }
.vc-fold[open] > summary { display: none; }
.vc-fold__line { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border: 1px dashed var(--line-control); border-radius: var(--radius-panel); color: var(--mut); font-size: .875rem; cursor: pointer; }
.vc-fold__line:hover { border-color: var(--mut3); color: var(--ink2); }
.vc-fold__line:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.vc-fold__who { flex: none; color: var(--ink); font-weight: 700; }
.vc-fold__line .vc-message__role { flex: none; }
.vc-fold__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-fold__when { flex: none; color: var(--mut2); font-family: var(--font-mono); font-size: .8125rem; }
.vc-fold__show { flex: none; color: var(--acc-strong); font-size: .875rem; font-weight: 600; }
.ws-convo--none .ws-state { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 420px; margin: auto; padding: 32px 28px; text-align: center; }
.vc-ui .ws-state h2 { margin: 0; color: var(--ink); font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -0.015em; }
.vc-ui .ws-state p { margin: 0; color: var(--mut); font-size: .875rem; line-height: 1.5; }
.ws-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 4px; }
.vc-ui .ws-keys { color: var(--mut2); font-size: .8125rem; }

/* More menu */
.ws-menu { position: relative; }
.ws-menu > summary { list-style: none; }
.ws-menu > summary::-webkit-details-marker { display: none; }
.ws-menu > summary::after { content: "▾"; color: var(--mut2); font-size: 11px; }
.ws-menu__list { position: absolute; top: calc(100% + 6px); right: 0; z-index: 8; display: flex; flex-direction: column; width: 220px; padding: 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--card); box-shadow: var(--shadow-glass); }
.ws-menu__list form { display: flex; flex-direction: column; margin: 0; }
.vc-ui .ws-menu__list a, .ws-menu__list button { display: flex; align-items: center; min-height: 34px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink2); font: inherit; font-size: .875rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.vc-ui .ws-menu__list a:hover, .ws-menu__list button:hover { background: var(--neutral-soft); color: var(--ink); }
.ws-menu__list .ws-menu__danger, .ws-menu__list .ws-menu__danger:hover { color: var(--danger); }
.ws-menu__sep { height: 1px; margin: 4px 6px; background: var(--rule); }

/* Response box: Email reply is ink, Private note amber, so the mode shows at a glance */
.ws-composer { flex: none; margin: 0 16px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-panel); background: var(--card); box-shadow: var(--shadow-field); scroll-margin: 96px 0 16px; }
.ws-composer:focus-within { border-color: var(--line-control); }
.ws-composer--note { border-color: var(--amber-line); background-image: linear-gradient(var(--amber-soft), var(--amber-soft)); }
.vc-ui .ws-composer__alert { margin: 10px 10px 0; }
.ws-composer__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 9px 10px; border-bottom: 1px solid var(--rule); }
.ws-mode { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--neutral-soft); }
.ws-mode__btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 30px; padding: 0 14px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--mut); font: inherit; font-size: .875rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.ws-mode__btn:hover { color: var(--ink); }
.ws-mode__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ws-mode__btn--reply[aria-selected="true"] { background: var(--ink); color: var(--onink); }
.ws-mode__btn--note[aria-selected="true"] { background: var(--amber); color: var(--on-lime); }
.ws-composer__premade { display: flex; flex: 1 1 10em; justify-content: flex-end; min-width: 0; max-width: min(100%, 18em); margin-left: auto; }
.vc-ui .ws-composer__premade .ws-mini { width: 100%; }
.ws-composer__panel form { margin: 0; }
.vc-ui .ws-composer__to { display: flex; align-items: center; gap: 8px; min-height: 36px; margin: 0; padding: 0 14px; border-bottom: 1px solid var(--rule); color: var(--ink2); font-size: .875rem; line-height: 1.4; }
.ws-composer__to > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.vc-ui .ws-composer__to--note { color: var(--ink); font-weight: 600; }
.ws-composer__to .ws-label { flex: none; width: 34px; }
.vc-ui .ws-composer__title { display: block; width: 100%; min-height: 42px; padding: 6px 14px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.6; font-weight: 600; }
.vc-ui .ws-composer__text { display: block; width: 100%; min-height: 84px; max-height: 40vh; padding: 10px 14px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.6; resize: vertical; }
.vc-ui .ws-composer__title:focus-visible, .vc-ui .ws-composer__text:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ws-composer__text::placeholder, .ws-composer__title::placeholder { color: var(--mut3); }
.vc-ui .ws-composer__error { margin: 0; padding: 0 14px 8px; }
.ws-composer__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 10px 10px; border-top: 1px solid var(--rule); }
.ws-composer__foot .vc-check { font-size: .875rem; white-space: nowrap; }
.ws-composer__foot .vc-file { gap: 6px; }
.ws-attach { width: 30px; padding: 0; }
.ws-composer__foot { gap: 8px; }
.vc-ui .ws-composer__foot .ws-mini { max-width: min(100%, 17em); }
.ws-saved:empty { display: none; }
.ws-composer__send { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.ws-saved { color: var(--mut2); font-family: var(--font-mono); font-size: .8125rem; white-space: nowrap; }
.ws-btn--note, .ws-btn--note:hover { border-color: var(--amber); background: var(--amber); color: var(--on-lime); }
.ws-btn--note:hover { filter: brightness(.96); }
.ws-btn--note .vc-btn__glyph { color: inherit; }

/* Details */
.ws-details { display: flex; flex: none; flex-direction: column; gap: 22px; width: 340px; min-height: 0; padding: 14px 18px 22px; overflow: auto; border-left: 1px solid var(--rule); background: var(--card); }
.ws-details:focus { outline: none; }
.ws-details__head { display: flex; align-items: center; gap: 8px; }
.vc-ui .ws-details__head h2 { margin: 0; color: var(--ink); font-size: 16px; line-height: 22px; font-weight: 700; }
.ws-details__head .vc-btn { margin-left: auto; }
.ws-details__back { display: none; }
.ws-sec { display: flex; flex-direction: column; gap: 10px; }
.ws-sec__head { display: flex; align-items: center; gap: 8px; }
.ws-sec__count { margin-left: auto; color: var(--mut2); font-family: var(--font-mono); font-size: .75rem; }
/* Facts sit under their labels, the ticket's in pairs, so values keep the column's width */
.ws-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0; }
.ws-facts--list { grid-template-columns: minmax(0, 1fr); }
.ws-fact { min-width: 0; }
.ws-fact--wide { grid-column: 1 / -1; }
.ws-fact[hidden] { display: none; }
.vc-ui .ws-fact dt { margin: 0 0 3px; color: var(--mut2); font-family: var(--font-mono); font-size: .875rem; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; }
.vc-ui .ws-fact dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; margin: 0; color: var(--ink); font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
.vc-ui .ws-fact dd.vc-mono { font-size: .8125rem; }
.ws-fact dd a { color: var(--acc-strong); }
.vc-ui .ws-details__form dd { display: block; }
.ws-value { min-width: 0; overflow-wrap: anywhere; }
.ws-priority { display: flex; flex: 1; align-items: center; gap: 8px; margin: 0; }
.ws-cust { display: flex; align-items: flex-start; gap: 8px; }
.ws-cust > div { min-width: 0; }
.vc-ui .ws-cust__name { margin: 0; color: var(--ink); font-size: 15px; line-height: 20px; font-weight: 700; overflow-wrap: anywhere; }
.vc-ui .ws-cust__org { margin: 0; color: var(--mut2); font-size: .8125rem; line-height: 1.4; }
.ws-cust .vc-chip { flex: none; margin-left: auto; }
.ws-btnrow { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.vc-ui .ws-btnrow a.vc-btn--dark { color: var(--onink); }
.vc-ui a.ws-related { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 1px 10px; padding: 8px 0; border-top: 1px solid var(--rule); color: inherit; text-decoration: none; }
.ws-related__list a.ws-related:first-child { border-top: 0; padding-top: 0; }
.vc-ui a.ws-related:hover .ws-related__subj { color: var(--acc-strong); }
.ws-related__subj { overflow: hidden; color: var(--ink); font-size: .875rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ws-related__meta { grid-column: 2; color: var(--mut2); font-size: .8125rem; line-height: 1.4; }
.vc-ui a.ws-sec__more { color: var(--acc-strong); font-size: .875rem; text-decoration: none; }
.ws-inline { display: flex; flex-direction: column; gap: 10px; margin: 2px 0 4px; padding: 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--panel-strong); }
.vc-ui .ws-inline .vc-textarea { min-height: 72px; }
.ws-inline__actions { display: flex; justify-content: flex-end; gap: 8px; }

/* A list as a table in the workspace's frame (the ticket table, the Info Panel): beside the rail, edge to edge, its
   head and pages staying above and below it as it scrolls. Groups of rows are tables under labels. */
.ws-tablehead { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-height: 56px; padding: 10px 24px; border-bottom: 1px solid var(--rule); }
.vc-ui .ws-tablehead__title { margin: 0; color: var(--ink); font-size: 20px; line-height: 26px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.ws-tablefind { display: flex; flex: 1 1 360px; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; margin: 0; }
.ws-tablefind .vc-search { flex: 1 1 240px; max-width: 420px; }
.ws-tablefind .vc-search input { margin: 0; padding: 0; }
.vc-ui .ws-tablefind .ws-filter { flex: 1 1 8.5em; height: auto; min-height: max(32px, 2.15em); padding: .25em .7em; font-size: .875rem; }
.vc-ui a.ws-tableclear { font-size: .875rem; text-decoration: none; white-space: nowrap; }
.ws-tablescroll { flex: 1; min-height: 0; overflow: auto; }
.ws-tablescroll .vc-table-wrap { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ws-tableview .vc-table tr > :first-child { padding-left: 24px; }
.ws-tableview .vc-table tr > :last-child { padding-right: 24px; }
/* A row opens from anywhere in it (.vc-row-link); its other links sit above that */
.ws-tableview .vc-table td a:not(.vc-row-link) { position: relative; z-index: 1; }
.ws-tableview .vc-table th { z-index: 2; }
.ws-tableview .ws-empty { margin: 56px 24px; }
.ws-tableview .vc-pager { flex: none; flex-wrap: wrap; min-height: 48px; padding: 7px 24px; }
.ws-tablefoot { display: flex; flex: none; align-items: center; min-height: 40px; padding: 5px 24px; border-top: 1px solid var(--rule); color: var(--mut2); font-size: .8125rem; }
.ws-tgroup + .ws-tgroup { border-top: 1px solid var(--rule); }
.ws-tgroup__head { display: flex; align-items: center; gap: 8px; padding: 18px 24px 8px; }
.ws-tgroup__head .ws-sec__count { margin-left: 0; }
.vc-ui .ws-tgroup__head a { margin-left: auto; font-size: .875rem; text-decoration: none; }
.ws-tgroup .vc-table-wrap { border-top: 1px solid var(--rule); }
.vc-table-wrap.ws-tablescroll { border: 0; border-radius: 0; box-shadow: none; }
/* The ticket table (tickets.inc.php): its form holds the table, the pages and the bulk bar; advanced search opens
   as a band under the head */
.ws-tableform { display: flex; flex: 1; flex-direction: column; min-height: 0; margin: 0; }
.ws-tableview .vc-queue { margin-top: 0; }
.ws-tableview .vc-queue .vc-col-select, .ws-tableview .vc-table th.vc-cell-select { width: 56px; }
.ws-tableview .vc-queue .vc-col-activity { width: 148px; }
.vc-ui .ws-tableview .vc-advanced { flex: none; margin: 0; padding: 16px 24px; border-bottom: 1px solid var(--rule); background: var(--panel); }
.ws-tableview .vc-pager .ws-list__fresh { margin-left: 4px; }
@media (max-width: 859px) {
    /* The head stacks, and the table scrolls sideways in the page's own scroll */
    .ws-tablehead .ws-switch { display: none; }
    .ws-tableview .vc-queue .vc-col-select, .ws-tableview .vc-table th.vc-cell-select { width: 44px; }
    .vc-ui .ws-tableview .vc-advanced { padding: 14px 16px; }
    .ws-tablehead { padding: 12px 16px; }
    .ws-tablefind { flex-basis: 100%; }
    .ws-tablefind .vc-search { flex-basis: 100%; max-width: none; }
    .ws-tablefind .vc-search input { height: 36px; font-size: 1rem; }
    .ws-tablefind .ws-filters { flex: 1 1 100%; min-width: 0; }
    .vc-ui .ws-tablefind .ws-filter { flex: 1 1 8.5em; height: auto; min-height: max(40px, 2.15em); font-size: .875rem; }
    .ws-tableview .vc-table tr > :first-child { padding-left: 16px; }
    .ws-tableview .vc-table tr > :last-child { padding-right: 16px; }
    .ws-tableview .vc-pager { padding: 8px 16px; }
    .ws-tablefoot { padding: 8px 16px; }
    .ws-tgroup__head { padding: 16px 16px 8px; }
    /* A table title that only repeats the page's (shown above it here) */
    .ws-tablehead__title--page { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Wide screens: everything side by side, and Details can be hidden */
@media (min-width: 860px) {
    .ws-body { height: var(--ws-height, calc(100vh - 200px)); min-height: 0; }
    /* Short windows use the document for the conversation so its composer cannot fall below a clipped frame.
       Queue and table scrolling stay bounded, preserving their controls and remembered scroll positions. */
    .ws--short .ws-body { height: auto; min-height: 0; overflow: visible; }
    .ws--short .ws-thread, .ws--short .vc-ip-body { flex: none; overflow: visible; }
    .ws--short .ws-list__items { flex: 0 1 auto; max-height: 32rem; }
    .ws--short .ws-tablescroll { flex: 0 1 auto; max-height: 32rem; }
    .ws--short .ws-rail { max-height: 40rem; overflow-y: auto; }
    .vc-ui:has(.vc-main--wide) .staff-footer { display: none; }
    /* The heading row keeps only the page's heading, for screen readers and for js/nav.js to put focus on */
    .vc-main--wide .ws-head { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .vc-main--wide .ws-head > :not(.ws-head__title) { display: none; }
    .vc-ui .vc-main--wide .ws-alert { margin: 0; padding-right: 24px; padding-left: 24px; border-width: 0 0 1px; border-radius: 0; }
    .vc-main--wide .ws-body { border: 0; border-radius: 0; box-shadow: none; }
    .ws--table .vc-bulk { bottom: 64px; }
}
/* On a window wider than that, it stops at 1840px, centred */
@media (min-width: 1880px) {
    .vc-ui #content.vc-main--wide { max-width: 1840px; }
    .vc-ui .vc-main--wide .ws-alert, .vc-main--wide .ws-body { border-width: 0 1px; border-style: solid; border-color: var(--line); }
    .vc-ui .vc-main--wide .ws-alert { border-bottom-width: 1px; }
}
@media (min-width: 1360px) {
    .ws--nodetails .ws-details { display: none; }
}
@media (max-width: 1599px) {
    .ws-list { width: 310px; }
    .ws-list__foot:has(.ws-list__pages) .ws-list__updated { display: none; }
}
/* Laptops: Details slides over the conversation */
@media (max-width: 1359px) {
    .ws-details { position: absolute; top: 0; right: 0; bottom: 0; z-index: 6; display: none; width: 360px; max-width: 100%; border-left-color: var(--line-strong); box-shadow: var(--shadow-glass); }
    .ws--slide .ws-details { display: flex; }
}
@media (max-width: 1099px) {
    .ws-list { width: 284px; }
    .ws-list__updated { display: none; }
    .vc-ui .ws-list__page { font-size: 18px; }
    .ws-list__top .ws-switch .vc-tab { padding: 0 10px; }
}
/* Phones and small tablets: one thing at a time, in the page's own scroll */
@media (max-width: 859px) {
    .vc-ui #content.vc-main--wide { padding: 12px 12px 40px; }
    .vc-main--wide .ws-head { margin-bottom: 12px; padding: 0; }
    .ws-body { display: block; overflow: visible; border: 0; background: none; box-shadow: none; }
    .ws--queue .ws-convo { display: none; }
    /* The queues are a row of named chips */
    .ws-rail { z-index: auto; flex-direction: row; gap: 6px; width: auto; margin: 0 -12px 12px; padding: 0 12px; overflow-x: auto; border: 0; background: none; scrollbar-width: none; }
    .ws-rail::-webkit-scrollbar { display: none; }
    .ws-queue__icon, .ws-rail__help, .ws-rail__keys, .vc-ui a.ws-queue--new, .ws-list__top, .ws-list__fresh { display: none; }
    .vc-ui a.ws-queue { flex: none; flex-direction: row; gap: 8px; width: auto; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-tag); border-radius: var(--radius-pill); background: var(--card); color: var(--ink2); font-size: .875rem; font-weight: 600; white-space: nowrap; }
    .vc-ui a.ws-queue[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--onink); box-shadow: none; }
    .ws-queue__label, .vc-ui a.ws-queue:hover .ws-queue__label, .vc-ui a.ws-queue:focus-visible .ws-queue__label { position: static; padding: 0; border-radius: 0; background: none; color: inherit; box-shadow: none; font-size: inherit; line-height: inherit; font-weight: inherit; opacity: 1; transform: none; transition: none; }
    .ws-queue__count { font-size: .75rem; }
    .ws-queue[aria-current="page"] .ws-queue__count { color: var(--inv-acc); }
    /* The list is the page, the bar for picked tickets staying at the bottom of the screen */
    .ws-list { width: auto; overflow: hidden; overflow: clip; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--card); box-shadow: var(--shadow-card); }
    .ws-list__items { padding: 0; gap: 0; overflow: visible; }
    .vc-ui a.ws-item { padding: 14px 16px 13px; border: 0; border-radius: 0; }
    .ws-pick { width: 48px; padding-top: 15px; }
    .vc-ui .ws-pick input, .vc-ui .ws-pickall { width: 20px; height: 20px; }
    .vc-ui .ws-row--pick > a.ws-item { padding-left: 48px; }
    .vc-ui .ws-pickall { margin: 0; }
    .ws-bulk { position: sticky; bottom: 0; }
    .ws-bulk__bar { min-height: 56px; padding: 8px 8px 8px 16px; font-size: .875rem; }
    .ws-bulk__bar .vc-btn { height: 40px; }
    .ws-bulk__clear { width: 40px; height: 40px; }
    .ws-menu__list button { min-height: 44px; }
    .vc-ui .ws-filter { height: auto; min-height: max(40px, 2.15em); font-size: .875rem; }
    .ws-find .vc-search input { height: 36px; font-size: 1rem; }
    .vc-ui .ws-sort { height: auto; min-height: max(36px, 2em); max-width: min(100%, 12em); font-size: .875rem; }
    .ws-list__foot { min-height: 48px; }
    .ws-list__pages .vc-btn { height: 40px; min-width: 44px; }

    /* A ticket: the bar back to the list, the conversation, the response box. The panel's header, a third of a
       phone screen once it wraps, scrolls away here so that bar can stay at the top. */
    .vc-ui:has(.ws[data-ws]) .vc-nav.vc-shell { position: static; }
    .vc-ticket .ws-head, .vc-ticket .ws-rail, .ws--list.vc-ticket .ws-list { display: none; }
    .ws-bar { display: flex; position: sticky; top: 0; z-index: 7; margin: -12px -12px 12px; padding: 6px 12px; border-bottom: 1px solid var(--rule); background: var(--glass); -webkit-backdrop-filter: var(--nav-blur); backdrop-filter: var(--nav-blur); }
    .ws-bar .vc-back { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 15px; font-weight: 700; }
    .ws-bar__reply { display: inline-flex; height: 40px; margin-left: auto; padding: 0 14px; font-size: .875rem; }
    .ws--page .ws-bar__nav, .ws--page .ws-bar .ws-switch { display: none; }
    .ws-convo > .ws-bar { margin: 0; border-radius: var(--radius-panel) var(--radius-panel) 0 0; }
    .ws-convo { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--card); box-shadow: var(--shadow-card); }
    /* Clipped without being a scroll box, so the table's ticket bar inside it can stay at the top of the screen */
    .ws--page .ws-convo { overflow: clip; }
    .ws-convo__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 14px 16px; }
    .ws-convo__top { display: contents; }
    .vc-ui .ws-convo__title, .vc-ui .ws-convo__sub { order: 1; width: 100%; }
    .vc-ui .ws-convo__sub { white-space: normal; }
    .ws-convo__actions { order: 2; width: 100%; margin: 8px 0 0; }
    .ws-convo__actions .vc-btn { height: 40px; padding: 0 14px; font-size: .875rem; }
    .ws-menu__list { right: auto; left: 0; }
    .ws-menu__list a, .ws-menu__list button { min-height: 44px; }
    .vc-ui .ws-alerts > .vc-alert { margin: 12px 12px 0; }
    .ws-thread { padding: 14px 12px 16px; overflow: visible; }
    .ws-thread .vc-message { padding: 14px 16px; }
    .ws-thread .vc-message__meta { width: 100%; margin-left: 0; }
    .vc-fold__line { flex-wrap: wrap; padding: 12px 16px; }
    .vc-fold__text { flex-basis: 100%; order: 5; }
    .ws-composer { margin: 0 8px 8px; }
    .ws-composer__head .ws-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .ws-mode__btn { height: 40px; font-size: .875rem; }
    .ws-composer__premade { width: 100%; margin-left: 0; }
    .ws-composer__premade .ws-mini { flex: 1; max-width: none; }
    .vc-ui .ws-mini { height: auto; min-height: max(40px, 2.15em); font-size: .875rem; }
    .vc-ui .ws-composer__text, .vc-ui .ws-composer__title { font-size: 1rem; }
    .ws-composer__foot .vc-btn { height: 44px; }
    .ws-composer__send { width: 100%; }
    .ws-composer__send .vc-btn { flex: 1; }

    /* Details is a screen of its own (#details), reached from the conversation's Details button */
    .ws-details { position: static; display: none; width: auto; padding: 16px; overflow: visible; border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); }
    .ws--details-screen .ws-convo, .ws--details-screen .ws-bar { display: none; }
    .ws--details-screen .ws-details { display: flex; }
    .ws-details__back { display: inline-flex; align-items: center; min-height: 44px; }
    .vc-ui a.ws-details__back { color: var(--ink); font-size: 15px; font-weight: 700; }
    .ws-details__head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .ws-details__head .vc-btn { display: none; }
    .vc-ui .ws-fact dd { font-size: .875rem; }
    .ws-btnrow .vc-btn, .ws-inline__actions .vc-btn { flex: 1 1 auto; height: 44px; }
    .ws-details .vc-copy { min-height: 32px; padding: 0 12px; }

    /* The table scrolls sideways inside its box, the select and number columns staying put */
    .vc-queue .vc-table tr > :first-child { position: sticky; left: 0; background: var(--card); }
    .vc-queue .vc-table thead tr > :first-child { z-index: 3; background: var(--bg2); }
    .vc-queue .vc-table tr > .vc-cell-select + *, .vc-queue .vc-table tr > .vc-col-select + * { position: sticky; left: 44px; background: var(--card); box-shadow: 1px 0 0 var(--rule); }
    .vc-queue .vc-table thead tr > .vc-col-select + * { z-index: 3; background: var(--bg2); }
    .vc-queue .vc-table tbody tr[aria-selected="true"] > td { background: var(--lime-soft); }
    .vc-queue .vc-table tbody tr[aria-selected="true"] > :first-child, .vc-queue .vc-table tbody tr[aria-selected="true"] > .vc-cell-select + * { background: var(--lime-tint); }
    .vc-queue .vc-cell-select input[type="checkbox"] { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: no-preference) {
    .ws-details { transition: box-shadow .15s ease; }
}

/* Info Panel (include/staff/infopanel.inc.php): the ticket workspace's frame (.ws), with tables and an account of
   its own. The rail, Details and phones follow the workspace's rules above. */
.vc-ip a { color: var(--acc-strong); }
.vc-ip a.vc-btn, .vc-ip a.vc-tab, .vc-ip a.vc-row-link { color: inherit; }
.vc-ip a.vc-btn--dark { color: var(--onink); }
.vc-ip mark { padding: 0 2px; border-radius: 3px; background: var(--lime-soft); color: var(--ink); }
.vc-ip-none { color: var(--mut2); font-family: var(--font-sans); }
.vc-ui .vc-ip-help { margin: 0; color: var(--mut2); font-size: 13px; }
.vc-ip-empty { padding: 32px 24px; border: 1px dashed var(--line-control); border-radius: var(--radius-panel); color: var(--mut); text-align: center; }
.vc-ip-empty strong { color: var(--ink); }

/* The row whose account was opened last (js/infopanel.js) */
.vc-ip .vc-table tbody tr.is-current td { background: var(--lime-tint); }
.vc-ip .vc-table tbody tr.is-current td:first-child { box-shadow: inset 3px 0 0 var(--ink); }

/* The account opened from a list */
.vc-ip-main { min-width: 0; }
.vc-ui a.vc-ip-back { margin-right: 4px; font-weight: 600; }
.vc-ip-tabs { margin-top: 10px; }
.vc-ip-tabs .vc-tab { height: 30px; padding: 0 12px; font-size: 13px; }
.vc-ip-body { display: flex; flex: 1; flex-direction: column; gap: 16px; min-height: 0; padding: 18px 24px 24px; overflow: auto; }
.vc-ui .vc-ip-body > .vc-alert { margin: 0; }
.vc-ip-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.vc-ip-stats .vc-stat__value { font-size: 26px; overflow-wrap: anywhere; white-space: nowrap; }
.vc-ip-stats .vc-stat__unit { display: block; margin: 6px 0 0; overflow: hidden; font-size: 12px; line-height: 16px; text-overflow: ellipsis; }
.vc-ip-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; }
.vc-ip-card__head { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.vc-ip-card__head .vc-chip, .vc-ip-card__head .vc-ip-more { margin-left: auto; }
.vc-ui a.vc-ip-more { font-size: 12px; text-decoration: none; }
.vc-ip-card--server .ws-facts { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.vc-ip-recent { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; gap: 12px; }
.vc-ui div.ws-related { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 1px 10px; padding: 8px 0; border-top: 1px solid var(--rule); }
.vc-ip-card__head + .ws-related { padding-top: 0; border-top: 0; }
.vc-ip .ws-related .ws-num { min-width: 44px; }
.vc-ui .ws-fact dd.vc-ip-lines { flex-direction: column; align-items: flex-start; gap: 4px; }
.vc-ip-value { min-width: 0; overflow-wrap: anywhere; }
.vc-ui .vc-ip-input { flex: 1 1 180px; min-width: 0; height: 32px; }
.vc-ip-note { color: var(--mut2); font-size: 12px; line-height: 16px; }
.vc-ip-note--attention { color: var(--ink2); font-weight: 600; }
.vc-ip-note--danger { color: var(--danger); }
.vc-ui .vc-ip-cardnote { margin: 0; color: var(--mut); }
.vc-ip-savebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 12px; border-top: 1px solid var(--rule); }
.vc-ip-savebar .vc-check { font-size: 13px; }
.vc-ip-savebar__note { margin-left: auto; color: var(--mut2); font-size: 13px; }
.vc-ip-section__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.vc-ip-section__head a { margin-left: auto; font-size: 13px; text-decoration: none; }

/* Tables: the lists, and an account's invoices, payments, songs and tickets. Denser than the ticket table, with
   values that wrap rather than run off. */
.vc-ip .vc-table-wrap { margin-top: 0; }
.vc-ip-table { font-size: 13px; line-height: 18px; }
.vc-ip-table th { padding: 8px 12px; white-space: nowrap; }
.vc-ip-table td { padding: 8px 12px; }
.vc-ip-table .vc-ip-col-id, .vc-ip-table .vc-ip-col-short { width: 84px; }
.vc-ip-table .vc-ip-col-num { text-align: right; }
.vc-ip-table .vc-ip-col-status { width: 120px; }
.vc-ip-table .vc-ip-col-date { width: 116px; }
.vc-ip-table td.vc-cell-muted { white-space: nowrap; }
.vc-ip-table td.vc-ip-wrap { min-width: 160px; overflow-wrap: break-word; }
.vc-ip-strong { display: block; color: var(--ink); font-weight: 600; }
.vc-ip-sub { display: block; color: var(--mut2); font-size: 12px; line-height: 16px; }
.vc-ui .vc-ip-pager { margin-top: 0; }
.vc-ip-pager .vc-ip-jump { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.vc-ip-pager .vc-ip-jump .vc-input { width: 72px; height: 30px; padding: 0 8px; font-size: 13px; }

@media (max-width: 859px) {
    .vc-ip--account .ws-head, .vc-ip--account .ws-rail { display: none; }
    .vc-ip-main .ws-convo__head { padding: 14px 16px; }
    .vc-ip-tabs { order: 3; flex-wrap: nowrap; width: 100%; overflow-x: auto; scrollbar-width: none; }
    .vc-ip-tabs .vc-tab { height: 36px; font-size: 14px; }
    .vc-ip-body { padding: 14px 12px 16px; overflow: visible; }
    .vc-ip-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vc-ip-savebar__note { margin-left: 0; }
    .vc-ip-savebar .vc-btn, .ws-details .vc-ip-input + .vc-btn { height: 44px; }
    .vc-ui .vc-ip-input { height: 44px; font-size: 16px; }
    .vc-ui a.vc-ip-back { display: inline-flex; align-items: center; min-height: 40px; margin-right: 6px; }
}

/* Pages in the full-window frame (.vc-page): Premade replies' and the tickets' forms, My account, PayPal payment,
   the Server Monitor and Admin. The top row holds the way back, the title, section tabs and actions. From 860px
   wide, as the ticket workspace, the page is one white surface under the navigation down to the window's foot, that
   row across its top; forms lose their cards for sections between rules, and a form's side column runs down the
   right as Details does. Phones keep the cards. */
.vc-page__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; }
.vc-ui .vc-page__title { margin: 0; color: var(--ink); font-size: 28px; line-height: 32px; font-weight: 800; letter-spacing: -0.03em; }
.vc-page__top .vc-subtabs { margin: 0; }
.vc-page__end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
@media (max-width: 859px) {
    .vc-page__top > .vc-back:first-child { flex-basis: 100%; }
    /* The admin pages' older tables can be wider than a phone: they scroll sideways in the page, not the window */
    .vc-legacy .vc-page__body { overflow-x: auto; }
}
@media (min-width: 860px) {
    .vc-ui:has(.vc-page) { display: flex; flex-direction: column; min-height: 100vh; }
    .vc-ui:has(.vc-page) #container, .vc-ui:has(.vc-page) #content.vc-main--wide { display: flex; flex: 1 0 auto; flex-direction: column; width: 100%; }
    .vc-main--wide .vc-page { display: flex; flex: 1 0 auto; flex-direction: column; background: var(--card); }
    .vc-main--wide .vc-page__top { flex: none; min-height: 56px; margin: 0; padding: 10px 24px; border-bottom: 1px solid var(--rule); }
    .vc-ui .vc-main--wide .vc-page__title { font-size: 20px; line-height: 26px; letter-spacing: -0.02em; }
    .vc-main--wide .vc-page__top .vc-subtabs .vc-tab { height: 30px; padding: 0 12px; font-size: 13px; }
    .vc-ui .vc-main--wide .vc-page > .vc-alert { margin: 0; padding-right: 24px; padding-left: 24px; border-width: 0 0 1px; border-radius: 0; }
    .vc-main--wide .vc-page__body { flex: 1 0 auto; padding: 20px 24px 40px; }
    .vc-main--wide .vc-page__body > .vc-formcard { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
    .vc-main--wide .vc-page .vc-formgrid { flex: 1 0 auto; flex-wrap: nowrap; align-items: stretch; gap: 0; margin: 0; }
    .vc-main--wide .vc-page .vc-formgrid__main { flex: 1 1 auto; gap: 0; }
    .vc-main--wide .vc-page .vc-formgrid__side { flex: none; gap: 0; width: 360px; max-width: none; border-left: 1px solid var(--rule); }
    .vc-main--wide .vc-page .vc-formgrid .vc-formcard { margin: 0; padding: 20px 24px 22px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent; box-shadow: none; }
    .vc-main--wide .vc-page .vc-formgrid__side .vc-formactions { padding: 16px 24px 24px; }
    /* Admin's older pages: titles as section headings, and their tables edge to edge, as the Server Monitor's */
    .vc-ui .vc-main--wide .vc-page.vc-legacy div.msg { font-size: 17px; line-height: 24px; }
    .vc-main--wide .vc-page.vc-legacy table.dtable, .vc-main--wide .vc-page.vc-legacy table.logs, .vc-main--wide .vc-page.vc-legacy table.tform { width: calc(100% + 48px); margin: 0 -24px 16px; border-width: 1px 0; border-radius: 0; box-shadow: none; }
    .vc-main--wide .vc-page.vc-legacy table.dtable tr > :first-child, .vc-main--wide .vc-page.vc-legacy table.logs tr > :first-child, .vc-main--wide .vc-page.vc-legacy table.tform tr > :first-child { padding-left: 24px; }
    .vc-main--wide .vc-page.vc-legacy table.dtable tr > :last-child, .vc-main--wide .vc-page.vc-legacy table.logs tr > :last-child { padding-right: 24px; }
}
@media (min-width: 1880px) {
    .vc-main--wide .vc-page { border-width: 0 1px; border-style: solid; border-color: var(--line); }
}

/* Login */
body.vc-login { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 100vh; padding: 48px 16px; }
.vc-login__main { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; max-width: 400px; }
.vc-login__main > img { display: block; width: auto; height: 32px; }
.vc-login__card { display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; width: 100%; padding: 32px; }
.vc-login__card .vc-t-page-title { margin: 8px 0 0; color: var(--ink); }
.vc-login__card form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.vc-ui .vc-login__card .vc-alert { margin: 0; }
.vc-login__submit { width: 100%; margin-top: 4px; }
.vc-ui .vc-login__help { color: var(--mut2); font-size: 13px; text-align: center; }
.vc-ui .vc-login__text { margin: 0; color: var(--mut); font-size: 14px; line-height: 22px; }
.vc-login__card .vc-formactions { margin: 0; }

/* Server Monitor */
.vc-monitor__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.vc-monitor__section { margin-top: 20px; }
.vc-monitor__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 4px 8px; }
.vc-monitor__head .vc-t-section-title { margin: 0; color: var(--ink); }
.vc-monitor__sub { color: var(--mut2); font-size: 13px; }
.vc-monitor__all { align-self: center; margin-left: auto; }
.vc-monitor__table .vc-monitor__col-host { width: 220px; }
.vc-monitor__table .vc-monitor__col-ip { width: 150px; }
.vc-monitor__table .vc-monitor__col-status { width: 130px; }
.vc-monitor__table .vc-monitor__col-num { width: 110px; text-align: right; }
.vc-monitor__table .vc-monitor__col-rate { width: 190px; text-align: right; }
.vc-monitor__table .vc-monitor__col-stats { width: 110px; }
.vc-monitor__name { margin-left: 4px; color: var(--mut2); font-family: var(--font-mono); font-size: 12px; font-weight: 400; }
.vc-monitor__kbps { display: block; color: var(--mut2); font-size: 11px; }
.vc-monitor__share { display: flex; align-items: center; gap: 10px; }
.vc-monitor__bar { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--neutral-soft); }
.vc-monitor__bar > span { display: block; max-width: 100%; height: 100%; border-radius: var(--radius-pill); background: var(--lime); }
.vc-monitor__share .vc-mono { width: 36px; color: var(--mut2); font-size: 12px; text-align: right; }
.vc-monitor__table tbody tr.vc-monitor__raw td { padding-top: 0; border-top: 0; background: var(--card); }
.vc-monitor__rawtext { max-height: 420px; overflow: auto; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--inv-bg); color: var(--inv-ink2); font-family: var(--font-mono); font-size: 12px; line-height: 18px; }
.vc-monitor__rawtext pre { margin: 0; font: inherit; white-space: pre-wrap; }
.vc-monitor__rawtext a { color: var(--lime); }

@media (max-width: 900px) {
    .vc-monitor__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* From 860px wide, in the page frame (.vc-page): the totals a band across it and the tables edge to edge */
@media (min-width: 860px) {
    .vc-main--wide .vc-monitor__stats { gap: 0; margin: 0; border-bottom: 1px solid var(--rule); }
    .vc-main--wide .vc-monitor__stats .vc-stat { padding: 16px 24px; border: 0; border-right: 1px solid var(--rule); border-radius: 0; background: transparent; }
    .vc-main--wide .vc-monitor__stats .vc-stat:last-child { border-right: 0; }
    .vc-main--wide .vc-monitor__stats .vc-stat--lime { background: var(--lime-wash); }
    .vc-main--wide .vc-monitor__section { margin: 0; }
    .vc-main--wide .vc-monitor__head { margin: 0; padding: 20px 24px 10px; }
    .vc-ui .vc-main--wide .vc-monitor__head .vc-t-section-title { color: var(--mut2); font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
    .vc-main--wide .vc-monitor .vc-table-wrap { margin: 0; border-width: 1px 0; border-radius: 0; box-shadow: none; }
    .vc-main--wide .vc-monitor__table tr > :first-child { padding-left: 24px; }
    .vc-main--wide .vc-monitor__table tr > :last-child { padding-right: 24px; }
    .vc-main--wide .vc-monitor .vc-empty { margin: 0 24px; }
}


/* Older pages (admin settings, staff, departments, email…) keep osTicket's markup: a .msg title, form
   tables (table.tform with tr.header/tr.subheader rows and th labels) and list tables (table.dtable).
   .vc-legacy restyles that markup; it has to beat style.css, so most rules carry a table or tag too. */
.vc-legacy { color: var(--ink2); }
.vc-legacy > .vc-alert { margin: 0 0 12px; }
.vc-legacy a { color: var(--acc-strong); text-decoration: none; }
.vc-legacy a:hover { color: var(--ink); text-decoration: underline; }
.vc-legacy a.vc-btn, .vc-legacy a.vc-tab { color: var(--ink); text-decoration: none; }
.vc-legacy div.msg { margin: 0 0 12px; color: var(--ink); font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -0.02em; text-align: left; }
.vc-legacy div.msg a { font-size: 14px; font-weight: 600; letter-spacing: 0; }
.vc-legacy .error, .vc-legacy font.error { color: var(--danger); font-family: var(--font-sans); font-size: 13px; font-weight: 600; }
.vc-legacy b, .vc-legacy strong { color: var(--ink); font-weight: 700; }
.vc-legacy i, .vc-legacy em { color: var(--mut2); }
.vc-legacy br + br { display: none; }
.vc-legacy hr { margin: 12px 0; border: 0; border-top: 1px solid var(--rule); }
.vc-legacy img { vertical-align: middle; }
/* A System Logs entry: closed, out of the layout (main.css only hides it); open, its logged SQL wraps */
.vc-legacy div.hide { display: none; }
.vc-legacy div.show { overflow-wrap: anywhere; }

/* Outer layout tables only hold the real ones */
.vc-legacy table { border-collapse: separate; border-spacing: 0; }
.vc-legacy table:not(.dtable):not(.tform):not(.logs) { width: 100%; margin: 0; }
.vc-legacy table:not(.dtable):not(.tform):not(.logs) > tbody > tr > td { padding: 0; vertical-align: top; text-align: left; }
.vc-legacy table:not(.dtable):not(.tform):not(.logs) > tbody > tr > td[align="center"] { text-align: left; }

/* Messages printed by the page templates themselves */
.vc-legacy #errormessage, .vc-legacy #infomessage, .vc-legacy #warnmessage { display: block; margin: 0 0 12px; padding: 12px 16px; border: 1px solid; border-radius: var(--radius-md); color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 500; text-align: left; }
.vc-legacy #errormessage { border-color: var(--danger-line); background: var(--danger-soft); }
.vc-legacy #infomessage { border-color: var(--lime-line); background: var(--lime-soft); }
.vc-legacy #warnmessage { border-color: var(--amber-line); background: var(--amber-soft); }

/* Form tables become cards: header row = title, subheader row = help, th = label column */
.vc-legacy table.tform { width: 100%; margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--card); box-shadow: var(--shadow-card); overflow: hidden; }
.vc-legacy table.tform td, .vc-legacy table.tform th { padding: 10px 20px 10px 0; border: 0; border-top: 1px solid var(--rule); background: var(--card); color: var(--ink2); font-size: 14px; line-height: 20px; vertical-align: top; text-align: left; }
.vc-legacy table.tform tr > :first-child { padding-left: 20px; }
.vc-legacy table.tform th { width: 220px; padding-top: 18px; color: var(--mut2); font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.vc-legacy table.tform.tpl th { width: 160px; }
.vc-legacy table.tform tr.header td { padding-top: 16px; padding-bottom: 2px; border-top: 0; background: var(--card); color: var(--ink); font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -0.015em; }
.vc-legacy table.tform tr.header td * { color: inherit; }
.vc-legacy table.tform tr.subheader td { padding-top: 0; padding-bottom: 14px; border-top: 0; background: var(--card); color: var(--mut2); font-size: 13px; font-weight: 400; }
.vc-legacy table.tform tr.header + tr:not(.subheader) > * { border-top: 0; }
.vc-legacy table.tform tr.subheader + tr > * { border-top: 1px solid var(--rule); }
.vc-legacy table.tform td > b:first-child, .vc-legacy table.tform td > label { color: var(--ink); }
.vc-legacy table.tform td input[type="radio"], .vc-legacy table.tform td input[type="checkbox"] { margin: 0 4px 0 0; vertical-align: -3px; }

/* List tables, like .vc-table */
.vc-legacy table.dtable, .vc-legacy table.logs { width: 100%; margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--card); box-shadow: var(--shadow-card); overflow: hidden; }
.vc-legacy table.dtable th, .vc-legacy table.logs th { padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line); background: var(--bg2); color: var(--mut2); font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.vc-legacy table.dtable th a, .vc-legacy table.dtable th a:hover, .vc-legacy table.logs th a { color: inherit; text-decoration: none; }
.vc-legacy table.dtable th a:hover { color: var(--ink); }
.vc-legacy table.dtable td, .vc-legacy table.logs td { padding: 10px 14px; border: 0; border-top: 1px solid var(--rule); background: var(--card); color: var(--ink2); font-size: 14px; line-height: 20px; vertical-align: middle; }
.vc-legacy table.dtable tr:nth-child(2) td, .vc-legacy table.logs tr:nth-child(2) td { border-top: 0; }
.vc-legacy table.dtable tr:hover td, .vc-legacy table.logs tr:hover td { background: var(--bg); }
.vc-legacy table.dtable tr.highlight td { background: var(--lime-soft); }
.vc-legacy table.dtable td a { font-weight: 600; }
.vc-legacy table.dtable td:first-child input[type="checkbox"] { display: block; }

/* Controls */
.vc-legacy input[type="text"], .vc-legacy input[type="password"], .vc-legacy input[type="email"], .vc-legacy input[type="number"], .vc-legacy input:not([type]), .vc-legacy select, .vc-legacy textarea { box-sizing: border-box; max-width: 100%; min-height: 34px; padding: 6px 10px; border: 1px solid var(--line-control); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font: inherit; font-size: 14px; line-height: 20px; vertical-align: middle; }
.vc-legacy select { padding-right: 28px; }
.vc-legacy textarea { padding: 8px 10px; resize: vertical; }
.vc-legacy table.tform textarea { width: 100%; }
.vc-legacy input:focus-visible, .vc-legacy select:focus-visible, .vc-legacy textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.vc-legacy input[type="checkbox"], .vc-legacy input[type="radio"] { width: 16px; height: 16px; accent-color: var(--ink); }
.vc-legacy input.button, .vc-legacy input[type="submit"], .vc-legacy input[type="reset"], .vc-legacy input[type="button"], .vc-legacy button:not(.vc-btn):not(.vc-tab) { display: inline-flex; align-items: center; height: 36px; margin: 4px 6px 4px 0; padding: 0 16px; border: 1px solid var(--line-control); border-radius: var(--radius-pill); background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; text-shadow: none; cursor: pointer; }
.vc-legacy input.button:hover, .vc-legacy input[type="submit"]:hover, .vc-legacy input[type="reset"]:hover, .vc-legacy input[type="button"]:hover { background: var(--bg2); }
.vc-legacy input[type="submit"][name="submit"] { border-color: var(--ink); background: var(--ink); color: var(--onink); }
.vc-legacy input[type="submit"][name="submit"]:hover { border-color: var(--ink2); background: var(--ink2); }
.vc-legacy input[type="submit"][name="delete"] { border-color: var(--danger-line); color: var(--danger); }
.vc-legacy input[type="submit"][name="delete"]:hover { background: var(--danger-soft); }
.vc-legacy input[type="submit"]:focus-visible, .vc-legacy input[type="button"]:focus-visible, .vc-legacy input[type="reset"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.vc-legacy table.tform td input[type="radio"]:not(:first-child) { margin-left: 12px; }

/* Directory */
.vc-directory .vc-table td a { color: var(--acc-strong); text-decoration: none; }
.vc-directory .vc-table td a:hover { text-decoration: underline; }

/* Premade replies */
.vc-premade .vc-table { table-layout: fixed; }
.vc-premade .vc-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-premade .vc-table th:last-child { width: 180px; }
.vc-premade__col-status { width: 120px; }
.vc-premade__col-dept { width: 200px; }
.vc-premade .vc-table tbody tr.is-current td { background: var(--panel); }
@media (max-width: 859px) {
    /* The fixed columns would leave the title no room; the table scrolls sideways instead */
    .vc-premade .vc-table { min-width: 720px; }
}
.vc-premade__bulk { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vc-premade__bulk .vc-mono { min-width: 96px; }
.vc-ui .vc-premadeform__text { min-height: 280px; }

/* My account */
.vc-profile > .vc-alert { max-width: 720px; margin: 0 0 12px; }
.vc-profile__card { box-sizing: border-box; max-width: 720px; margin: 0; }
.vc-profile__card .vc-formactions { padding-top: 4px; }

/* Apply a PayPal payment */
.vc-paypal__card { box-sizing: border-box; max-width: 720px; margin: 16px 0 0; }
.vc-ui .vc-paypal__intro { color: var(--ink2); }
.vc-ui .vc-paypal__notes { margin: -6px 0 0; padding-left: 20px; color: var(--mut); font-size: 13px; line-height: 20px; list-style: disc; }
.vc-ui .vc-paypal__txn { flex: 1 1 auto; text-transform: uppercase; letter-spacing: .04em; }
.vc-ui .vc-paypal__txn::placeholder { text-transform: none; letter-spacing: 0; }
.vc-paypal .vc-inline .vc-btn { flex: none; height: 38px; padding: 0 18px; font-size: 14px; }

/* The older due-date picker (js/calendar.js), which sets its colours inline */
.vc-ui #fc { z-index: 70; padding: 6px; border: 1px solid var(--line) !important; border-collapse: separate !important; border-spacing: 2px; border-radius: var(--radius-md); background: var(--card) !important; box-shadow: var(--shadow-glass); }
.vc-ui #fc td { width: 28px; height: 26px; padding: 0; border: 0 !important; border-radius: 8px; background: transparent !important; color: var(--ink) !important; font: 500 12px/26px var(--font-sans) !important; text-align: center; }
.vc-ui #fc tr:nth-child(2) td { color: var(--mut2) !important; font: 500 10px/20px var(--font-mono) !important; }
.vc-ui #fc #mns { font: 700 13px/26px var(--font-sans) !important; }
.vc-ui #fc td[style*="cursor: pointer"]:hover { background: var(--lime-soft) !important; }
.vc-ui #fc td[style*="171, 171, 171"] { color: var(--mut3) !important; }
.vc-ui #fc img { vertical-align: middle; }