/* Ticketing owner screen (js/ticketing). Names use .tk-*; the board, panel and dialogs are the Requests engine's
   (css/requests.css); inputs and buttons the Inventory screen's (.inv-*). Logical properties so Arabic flips. */
.tickets-page { min-height: calc(100vh - 64px); box-sizing: border-box; }
.tickets-page[hidden] { display: none; }
.tk-app { display: flex; flex-direction: column; height: calc(100vh - 64px); color: var(--text); font-family: var(--font-ui, system-ui, sans-serif); position: relative; }
.tk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface-1); }
.tk-title { margin: 0; font-size: 17px; font-weight: 700; }
.tk-desk-pick { max-width: 260px; min-height: 34px; }
.tk-pill-off { background: color-mix(in srgb, var(--danger, #dc2626) 18%, transparent); color: var(--text); }
.tk-link { display: inline-flex; align-items: center; gap: 2px; max-width: 320px; }
.tk-link-a { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
.tk-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tk-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tk-screen .rq-app { height: 100%; }
.tk-card-reporter { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12ch; }
.tk-card-files { margin-inline-start: auto; }
.tk-details { display: flex; flex-direction: column; gap: 8px; }
.tk-details h3 { margin-top: 8px; }
.tk-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.tk-file { display: flex; flex-direction: column; gap: 3px; color: inherit; text-decoration: none; font-size: 11.5px; min-width: 0; }
.tk-file-thumb { aspect-ratio: 1; border-radius: 8px; background: var(--surface-2, var(--raised)); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tk-file-thumb img, .tk-file-thumb canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-file-ext { font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.tk-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-file-meta { color: var(--muted); }
.tk-file:focus-visible .tk-file-thumb { outline: 2px solid var(--accent); }
/* the Tools menu badge */
.tk-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-inline-start: 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink, #1a1a1a); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.tk-badge[hidden] { display: none; }
/* settings (js/ticketing/ui/settings.js) */
.tk-settings { flex: 1; min-height: 0; display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.tk-settings-nav { border-inline-end: 1px solid var(--border); padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.tk-settings-nav button { text-align: start; background: none; border: 0; color: inherit; font: inherit; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.tk-settings-nav button[aria-current="true"] { background: var(--surface-2, var(--raised)); font-weight: 600; }
.tk-settings-main { overflow: auto; padding: 16px 18px 28px; display: flex; flex-direction: column; gap: 16px; max-width: 920px; }
.tk-settings-main h2 { margin: 0; font-size: 16px; }
.tk-section { display: flex; flex-direction: column; gap: 10px; }
.tk-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tk-stage { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-1); }
.tk-stage-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c); margin-top: 10px; }
.tk-stage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tk-stage-grid textarea { min-height: 72px; resize: vertical; font-size: 13.5px; }
.tk-stage-tools { display: flex; flex-direction: column; gap: 4px; }
.tk-sev { display: grid; grid-template-columns: 44px 1fr 1fr auto auto; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1); }
.tk-sev input[type="color"] { width: 40px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: none; }
.tk-reason { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
.tk-qr { width: 160px; height: 160px; background: #fff; border-radius: 10px; padding: 6px; }
.tk-qr svg { width: 100%; height: 100%; display: block; }
.tk-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tk-table th, .tk-table td { text-align: start; padding: 8px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tk-table th { color: var(--muted); font-weight: 600; font-size: 12px; }
.tk-table .inv-icon-btn { opacity: .8; }
.tk-mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13px; direction: ltr; unicode-bidi: isolate; }
.tk-secret { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid var(--accent-soft-border, var(--border)); }
.tk-secret code { font-size: 16px; letter-spacing: .04em; }
.tk-import-preview { max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.tk-import-preview td.tk-err { color: var(--danger-text, #dc2626); }
.tk-tree { max-height: 280px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; }
.tk-tree label { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 6px; }
.tk-tree label:hover { background: var(--surface-2, var(--raised)); }
.tk-tree .tk-muted { color: var(--muted); }
@media (max-width: 900px) { .tk-settings { grid-template-columns: 1fr; } .tk-settings-nav { flex-direction: row; flex-wrap: wrap; border: 0; border-bottom: 1px solid var(--border); } .tk-stage-grid, .tk-sev, .tk-reason { grid-template-columns: 1fr; } }