/*
 * BSBC — Ticketing feature styles.
 *
 * Loaded SECOND, after /styles.css — see that file's own header comment for
 * why the load order matters. Everything ticketing shares with the rest of
 * the site (tokens, base, logo, lock screen shell, top bar, tables, notes,
 * footer, banners, loading) already lives in /styles.css and is reused as-is
 * here, not restyled. This file holds ONLY what ticketing needs that the site
 * file does not already have.
 *
 * Phase 1 (2026-09-21) was identity only — the lock screen, "who am I", and
 * the ticketing administrator's Logins table; sections 1–7 below are that
 * work, unchanged. Phase 2 (2026-09-22, PHASE2-CONTRACT.md) adds the queue,
 * the new-ticket form and the ticket page itself — sections 9–14 — plus the
 * Categories admin section, which needed no new CSS of its own: it reuses
 * .tablewrap/table, .pill, .smallbtn, .renameinput, .rowerr and .formrow
 * wholesale from sections 3–5. Section 8 was retired when phase 2's
 * responsive rules absorbed it into section 15 rather than leaving two
 * separate `@media (max-width: 640px)` blocks in one file.
 *
 *   1. Gate — multi-field lock screen (the select on /tickets/)
 *   2. Placeholder panel — the honest "being built" panel on /tickets/ (phase 1 only)
 *   3. Pills — role / status (Logins table)
 *   4. Logins table — muted inactive rows, action buttons, inline edit inputs
 *   5. Forms — field rows and field-level errors, shared by every form here
 *      (also: the new-ticket form's fixed Location text, `.fixedvalue`)
 *   6. Checkbox grid — a DM's covered stores, grouped by market
 *   7. Reveal / edit panels — the one-time passcode panel, the locations panel
 *   9. Filter bar — tabs, location chips, category/assignee/search
 *  10. Queue table — status pills, priority markers, overdue, pagination
 *  11. Ticket page — header, in-place edit, action bar
 *  12. Ticket page — two-column layout and side panel
 *  13. Thread
 *  14. Comment box
 *  15. Responsive
 */

/* ── 1. Gate ────────────────────────────────────────────────────────────── */
/* /styles.css's .lockbox was built for a single passphrase field, so a label
   only carries space BELOW itself (before its own input) — fine for one
   field, not enough between one field and the next. /tickets/'s gate has two
   (principal, passcode), so each label+input pair is wrapped in a .field div
   and the gap goes between THOSE instead. */
.lockbox .field + .field {
	margin-top: 18px;
}

/* Same look as .lockbox input, since <select> is not styled by the browser
   the same way a text input is. */
.lockbox select {
	width: 100%;
	padding: 11px 12px;
	font-family: var(--mono);
	font-size: 14px;
	border: 1px solid var(--rule);
	background: #fafaf9;
	color: var(--ink);
	border-radius: 0;
}
.lockbox select:focus {
	outline: 2px solid var(--slate);
	outline-offset: -1px;
	background: #fff;
}
.lockbox select:invalid {
	color: var(--muted);
}

/* ── 2. Placeholder panel ──────────────────────────────────────────────── */
/* /tickets/'s signed-in landing, until the queue itself exists — see
   queue.js. Plain prose in a bordered panel, not a warning (.notes is used
   instead for the "no logins yet" gate message, which IS worth flagging). */
.placeholderpanel {
	margin-top: 14px;
	padding: 22px 24px;
	background: var(--panel);
	border: 1px solid var(--rule);
}
.placeholderpanel p {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.6;
}
.placeholderpanel p:last-child {
	margin-bottom: 0;
}

/* ── 3. Pills ───────────────────────────────────────────────────────────── */
.pill {
	display: inline-block;
	padding: 2px 9px;
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.pill-good {
	color: var(--good);
	background: var(--good-bg);
}
.pill-bad {
	color: var(--bad);
	background: var(--bad-bg);
}

/* ── 4. Logins table ────────────────────────────────────────────────────── */
/* An inactive login stays in the table (nothing is ever deleted) but should
   read as retired at a glance. */
#loginstable tr.inactive td {
	color: var(--faint);
}
#loginstable tr.inactive td.name {
	color: var(--muted);
}

/* Location(s) and Actions carry more than a single short value — left-align
   and let them wrap instead of the site table default (centered, nowrap). */
#loginstable td.loc,
#loginstable td.actions {
	text-align: left;
	white-space: normal;
}

.smallbtn {
	display: inline-block;
	margin: 2px 4px 2px 0;
	padding: 5px 10px;
	background: var(--ink);
	color: #fff;
	border: 0;
	font-family: var(--sans);
	font-size: 11.5px;
	font-weight: 600;
	cursor: pointer;
}
.smallbtn:hover:not(:disabled) {
	background: var(--slate);
}
.smallbtn:disabled {
	background: var(--faint);
	cursor: wait;
}
.smallbtn.ghost {
	background: none;
	color: var(--muted);
	border: 1px solid var(--rule);
}
.smallbtn.ghost:hover:not(:disabled) {
	color: var(--ink);
	border-color: var(--ink);
	background: none;
}
.smallbtn.warn {
	background: var(--bad);
}
.smallbtn.warn:hover:not(:disabled) {
	background: var(--bad);
	opacity: 0.85;
}
/* The per-row actions on the Logins table are all ghosts: twelve rows of four
   solid buttons read as a wall of ink and bury the names they act on. A
   destructive ghost keeps the red, as text and border rather than as fill.
   Compound selector so it beats both single-modifier rules above whatever
   their order (see the .rangebar-inline note in dashboard.css). */
.smallbtn.ghost.warn {
	background: none;
	color: var(--bad);
	border: 1px solid var(--bad-bg);
}
.smallbtn.ghost.warn:hover:not(:disabled) {
	background: var(--bad-bg);
	border-color: var(--bad);
	color: var(--bad);
	opacity: 1;
}

/* Inline rename / set-passcode inputs, replacing a cell's usual text.
   Smaller than the gate's fields — the table row is where the size budget is
   tightest, the same trade dashboard.css's #storegoalstable inputs make. */
.renameinput,
.passinput {
	width: 170px;
	padding: 5px 7px;
	font-family: var(--mono);
	font-size: 12px;
	border: 1px solid var(--rule);
	background: #fafaf9;
	color: var(--ink);
	border-radius: 0;
}
.renameinput:focus,
.passinput:focus {
	outline: 2px solid var(--slate);
	outline-offset: -1px;
	background: #fff;
}
.fielderr {
	border-color: var(--bad) !important;
}
.rowerr {
	display: block;
	margin-top: 4px;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--bad);
	min-height: 14px;
}

/* ── 5. Forms ───────────────────────────────────────────────────────────── */
/* The Add-a-login form (phase 1) and, since phase 2, the new-ticket and
   category forms and the ticket page's title/description edit box — same
   field look as the gate's .lockbox input/select, just not centred in a
   lockbox: plain rows in the page flow. */
.formrow {
	max-width: 420px;
	margin-bottom: 16px;
}
/* The new-ticket form (.ticketform) and the ticket page's edit box run wider
   fields (a description textarea in particular reads badly at 420px) —
   opted in per form rather than widening every .formrow site-wide. */
.ticketform .formrow,
.editbox .formrow {
	max-width: 640px;
}
.formrow > label,
.formrow > .eyebrow {
	display: block;
	margin-bottom: 7px;
}
.formrow select,
.formrow input[type="text"],
.formrow input[type="password"],
.formrow input[type="date"],
.formrow input[type="search"],
.formrow textarea {
	width: 100%;
	padding: 9px 10px;
	font-family: var(--mono);
	font-size: 13px;
	border: 1px solid var(--rule);
	background: #fafaf9;
	color: var(--ink);
	border-radius: 0;
}
/* Free text (a ticket's description) reads better in the body face than the
   mono one every other field here uses for its short, structured values. */
.formrow textarea {
	font-family: var(--sans);
	font-size: 13.5px;
	line-height: 1.5;
	resize: vertical;
	min-height: 90px;
}
.formrow select:focus,
.formrow input:focus,
.formrow textarea:focus {
	outline: 2px solid var(--slate);
	outline-offset: -1px;
	background: #fff;
}
.formrow select option:disabled {
	color: var(--faint);
}
.formrow input:disabled {
	color: var(--faint);
	background: var(--rule-soft);
}
/* The new-ticket form's fixed Location text for a store principal — reads
   like a disabled input (same padding/border) without being one, since there
   is nothing here to focus or tab to. */
.fixedvalue {
	margin: 0;
	padding: 9px 10px;
	font-family: var(--mono);
	font-size: 13px;
	color: var(--muted);
	background: var(--rule-soft);
	border: 1px solid var(--rule);
}

/* ── 6. Checkbox grid ───────────────────────────────────────────────────── */
/* A DM's covered stores, grouped by market — used both on the Add-a-login
   form (role dm) and the Locations… editor for an existing DM row. */
.checkgrid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 8px;
}
.checkgroup {
	min-width: 170px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--rule);
}
.checkgroup legend {
	padding: 0 4px;
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--slate);
}
.checkitem {
	display: block;
	padding: 3px 0;
	font-size: 13px;
	cursor: pointer;
}
.checkitem input {
	margin-right: 8px;
}

/* ── 7. Reveal / edit panels ────────────────────────────────────────────── */
/* Shared look for the two panels that interrupt the normal page flow: the
   one-time passcode reveal (opened after a create/reset/set-passcode/seed)
   and a DM's Locations… editor. Same accent-bordered panel the site uses for
   .pickbar, just left-accented in --brand rather than --warn so it reads as
   "look here" rather than "careful". */
.revealpanel,
.editpanel {
	margin-top: 18px;
	padding: 20px 22px;
	background: var(--panel);
	border: 1px solid var(--rule);
	border-left: 4px solid var(--brand);
}
/* Focused programmatically when the panel opens (see admin.js) — no visible
   focus ring wanted on the panel itself, only on the controls inside it. */
.revealpanel:focus,
.editpanel:focus {
	outline: none;
}
.warnnote {
	margin: 8px 0 14px;
	padding: 10px 12px;
	background: var(--warn-bg);
	color: var(--warn);
	font-size: 13px;
	line-height: 1.5;
}
/* A small faint aside — the clipboard-unavailable fallback here, and an empty
   checkbox grid's "no stores configured" line (admin.js's renderCheckGrid).
   /styles.css only has this look scoped to `h2.sec .hint`; both call sites
   here sit outside a section heading. */
.hint {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--faint);
}
/* A plaintext passcode on screen: in the one-time panel, and in a Logins
   row's Passcode cell after "Show" (admin.js's drawRevealedPasscodeCell).
   Mono and slightly spread out because these get read aloud character by
   character, and the alphabet already drops the pairs that look alike. */
.passcodevalue {
	font-family: var(--mono);
	font-size: 14px;
	letter-spacing: 0.03em;
}
/* The Passcode column is the narrowest thing on the row that must not wrap
   mid-value — the table already scrolls sideways inside .tablewrap at 375px,
   so let it take the width it needs instead of breaking the passcode in two. */
#loginstable .passcodecell {
	white-space: nowrap;
}
.paneactions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 14px;
}

/* ── 9. Filter bar ──────────────────────────────────────────────────────── */
/* The queue's status tabs, location chips (dm/asm only) and the
   category/assignee/search row — all filter state, so all grouped under one
   heading even though they are three visually separate rows. */
.filterbar {
	margin-top: 14px;
}
.tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--rule);
}
.tab {
	padding: 9px 16px;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	font-family: var(--mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	cursor: pointer;
}
.tab:hover {
	color: var(--ink);
}
.tab.active {
	color: var(--ink);
	border-bottom-color: var(--brand);
}
.tab:focus-visible {
	outline: 2px solid var(--slate);
	outline-offset: -2px;
}

/* Location chips — a small, single-select re-creation of the dashboard's
   chip selector (dashboard.css §5c / dashboard/js/chips.js), which this page
   may not import (this feature owns only public/tickets/**). Unlike that
   multi-select toggle, only one chip is ever pressed at a time — the
   contract's `location=<storeId>|na` filter takes exactly one value — so
   there is no per-item swatch colour standing in for a chart legend here;
   pressed state alone carries the whole story. */
.pickbar {
	margin-top: 14px;
	margin-bottom: 16px;
	padding: 12px 16px 14px;
	background: var(--panel);
	border: 1px solid var(--rule);
	border-left: 4px solid var(--brand);
}
.pickhead {
	margin-bottom: 10px;
}
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.chip {
	padding: 6px 11px;
	background: var(--panel);
	border: 1px solid var(--rule);
	cursor: pointer;
	font-family: var(--mono);
	font-size: 11.5px;
	font-weight: 600;
	color: var(--muted);
	white-space: nowrap;
}
.chip:hover {
	border-color: var(--slate);
	color: var(--ink);
}
.chip:focus-visible {
	outline: 2px solid var(--slate);
	outline-offset: 1px;
}
.chip[aria-pressed="true"] {
	color: var(--ink);
	border-color: var(--ink);
	background: var(--rule-soft);
}

.filterrow {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: flex-end;
}
.filterrow .field {
	min-width: 160px;
}
.filterrow .field > label,
.filterrow .field > .eyebrow {
	display: block;
	margin-bottom: 7px;
}
.filterrow select,
.filterrow input[type="search"] {
	width: 100%;
	padding: 8px 10px;
	font-family: var(--mono);
	font-size: 12.5px;
	border: 1px solid var(--rule);
	background: #fafaf9;
	color: var(--ink);
	border-radius: 0;
}
.filterrow select:focus,
.filterrow input:focus {
	outline: 2px solid var(--slate);
	outline-offset: -1px;
	background: #fff;
}
.filterrow .checkfield {
	display: flex;
	align-items: center;
	min-width: auto;
}
.filterrow .checkfield label {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	color: var(--muted);
	cursor: pointer;
	white-space: nowrap;
}
.filterrow .searchfield {
	flex: 1 1 220px;
}

/* ── 10. Queue table ────────────────────────────────────────────────────── */
/* Status pills: open/in_progress read as an outline (border only, no fill —
   "active but not yet a verdict"); waiting/resolved/closed carry a tinted
   fill from the site's semantic tokens, same convention as .pill above. */
.statuspill {
	display: inline-block;
	padding: 2px 9px;
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: 1px solid currentColor;
}
.status-open {
	color: var(--ink);
}
.status-in_progress {
	color: var(--brand);
}
.status-waiting {
	color: var(--warn);
	background: var(--warn-bg);
	border-color: transparent;
}
.status-resolved {
	color: var(--good);
	background: var(--good-bg);
	border-color: transparent;
}
.status-closed {
	color: var(--muted);
	background: var(--rule-soft);
	border-color: transparent;
}

/* Priority: low/normal stay plain text (the common case should not shout);
   high and urgent borrow the same --warn/--bad tokens the rest of the site
   uses for "needs attention" / "needs attention now". */
.prio {
	font-size: 12.5px;
}
.prio-high {
	color: var(--warn);
	font-weight: 600;
}
.prio-urgent {
	color: var(--bad);
	font-weight: 700;
}
.prioflag {
	color: var(--bad);
	font-size: 9px;
}

#queuetable td.overdue {
	color: var(--bad);
	font-weight: 600;
}

.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 16px;
}
/* `hidden` and `.pagination` are equal specificity (0,0,1,0 each) — an
   author rule that sets `display` on a `[hidden]` element must say so
   explicitly, or the cascade's last-rule-wins tiebreak can leave `display:
   flex` in charge over the UA's `[hidden] { display: none }` and the element
   stays visible with `hidden` set. Same fix as `.fieldedit[hidden]` below. */
.pagination[hidden] {
	display: none;
}
.pagination #pageinfo {
	font-family: var(--mono);
	font-size: 11.5px;
	color: var(--muted);
}

/* ── 11. Ticket page — header, edit box, action bar ─────────────────────── */
.tickethead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px 16px;
	margin-top: 8px;
}
.ticketnum {
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 700;
	color: var(--muted);
}
.tickettitle {
	flex: 1 1 auto;
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.015em;
}
.ticketpills {
	display: flex;
	align-items: center;
	gap: 8px;
}
.tickethead #editbtn {
	margin-left: auto;
}

/* The title/description in-place edit box — same accent-bordered panel look
   as .revealpanel/.editpanel (§7), just its own class: those two are modal
   interrupts with a fixed focus target, this sits inline in normal flow. */
.editbox {
	margin-top: 16px;
	padding: 18px 20px;
	background: var(--panel);
	border: 1px solid var(--rule);
	border-left: 4px solid var(--brand);
}

.descriptionview {
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-word;
}

.actionbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 20px 0;
}

/* ── 12. Ticket page — layout and side panel ─────────────────────────────── */
.ticketlayout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 32px;
	margin-top: 10px;
	align-items: start;
}
.sidepanel {
	background: var(--panel);
	border: 1px solid var(--rule);
	padding: 16px 18px;
}
.fieldrow {
	padding: 10px 0;
	border-bottom: 1px solid var(--rule-soft);
}
.fieldrow:last-child {
	border-bottom: 0;
}
.fieldlabel {
	display: block;
	margin-bottom: 5px;
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--faint);
}
.fieldval {
	font-size: 13.5px;
}
.fieldrow select {
	width: 100%;
	padding: 7px 9px;
	font-family: var(--mono);
	font-size: 12.5px;
	border: 1px solid var(--rule);
	background: #fafaf9;
	color: var(--ink);
	border-radius: 0;
}
.fieldrow select:focus {
	outline: 2px solid var(--slate);
	outline-offset: -1px;
	background: #fff;
}
.fieldedit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
/* See the `.pagination[hidden]` note above — `#due-edit` is toggled via
   `.hidden` in ticket.js and needs the same explicit override. */
.fieldedit[hidden] {
	display: none;
}
.fieldedit input[type="date"] {
	padding: 6px 8px;
	font-family: var(--mono);
	font-size: 12.5px;
	border: 1px solid var(--rule);
	background: #fafaf9;
	color: var(--ink);
	border-radius: 0;
}

/* ── 13. Thread ─────────────────────────────────────────────────────────── */
.thread {
	margin-top: 10px;
}
.threaditem {
	padding: 12px 0;
	border-bottom: 1px solid var(--rule-soft);
}
.threaditem:last-child {
	border-bottom: 0;
}
/* A system event (status/assignee/priority/due date/category change, an
   edit, ticket creation) — one muted line, deliberately smaller than a
   comment so the thread reads as "comments, with quiet context between
   them" rather than every line competing for attention. */
.threaditem.system {
	padding: 7px 0;
	font-family: var(--mono);
	font-size: 11.5px;
	color: var(--faint);
}
.threadmeta {
	margin-bottom: 5px;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--muted);
}
.threadbody {
	font-size: 13.5px;
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-word;
}

/* ── 14. Comment box ────────────────────────────────────────────────────── */
.commentbox {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--rule);
}
.commentbox textarea {
	width: 100%;
	margin-top: 7px;
	padding: 10px 12px;
	font-family: var(--sans);
	font-size: 13.5px;
	line-height: 1.5;
	border: 1px solid var(--rule);
	background: #fafaf9;
	color: var(--ink);
	border-radius: 0;
	resize: vertical;
	min-height: 80px;
}
.commentbox textarea:focus {
	outline: 2px solid var(--slate);
	outline-offset: -1px;
	background: #fff;
}
.commentbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 8px;
}
.charcount {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--faint);
}

/* ── 15. Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.checkgroup {
		min-width: 140px;
	}
	.renameinput,
	.passinput {
		width: 100%;
	}
	.filterrow {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	.filterrow .field {
		min-width: 0;
	}
	.filterrow .searchfield {
		flex: none;
	}
	.ticketlayout {
		grid-template-columns: 1fr;
	}
	.tickethead {
		flex-direction: column;
		align-items: flex-start;
	}
	.tickethead #editbtn {
		margin-left: 0;
	}
}