/* Support (sup-): tickets, the client's requests, the agents, the phone layouts, the email view.
   Moved out of app.css as they were (design system wave 0.4, Source\Docs\Design system\Design system.md section 14): one
   file per area, so that the app waves never edit the same file. Linked by Components\App.razor right after app.css,
   in the order the rules had there (home, admin, monitoring, management, account, messaging, support, training,
   azurecosts, tools), so every rule keeps its place in the cascade. Tokens only: light and dark both work. */

/* Printing always uses the light colours (white paper): tokens.css, section 8 */

/* ---- Support (V1.15): tickets (Apps\Support), the client's requests ---- */
.sup-primary { background: var(--os-accent-fill); border-color: var(--os-accent-fill); color: var(--os-on-accent-fill); }
.sup-primary:hover:not(:disabled) { background: var(--os-accent-fill-hover); }
.sup-input { padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--field); color: var(--text); font: inherit; font-size: 0.88rem; }
.sup-input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.sup-text { width: 100%; box-sizing: border-box; resize: vertical; line-height: 1.45; }
.sup-search { flex: 1 1 260px; }
.sup-grow { flex: 1 1 200px; }
.sup-full { width: 100%; }
.sup-field { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.sup-field .sup-input { font-weight: 400; }
.sup-field-inline { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--muted); }
.sup-check { display: flex; align-items: center; gap: 6px; margin: 8px 0; font-size: 0.85rem; }
.sup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.sup-actions .spacer { flex: 1; }
/* Settings > Who is told of new tickets: one row per person, a remove button (V1.17) */
.sup-people { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sup-people li { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--field); font-size: 0.85rem; max-width: 100%; }
.sup-people li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-remove { border: 0; background: transparent; color: var(--muted); font-size: 1.05rem; line-height: 1; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; }
.sup-remove:hover, .sup-remove:focus-visible { background: var(--accent-soft); color: var(--text); }
.sup-views, .sup-filters { margin-bottom: 10px; }
.sup-new { margin-bottom: 12px; border-left: 4px solid var(--accent); }
.sup-pages { justify-content: center; margin-top: 10px; }
.sup-table td { vertical-align: top; }
/* V1.21, the list on a phone: each ticket a card (no sideways scroll): the key, its status and priority; the subject; the
   client and when; who has it. The columns of SupportPage.razor: ticket, subject, client, status, priority, assignee, updated */
.sup-filters .sup-input { min-width: 0; max-width: 100%; }
@media (max-width: 700px) {
  .sup-filters .sup-input { flex: 1 1 140px; }
  .table-wrap:has(> .sup-table) { overflow-x: visible; }
  .sup-table, .sup-table tbody { display: block; width: 100%; }
  .sup-table thead { display: none; }
  .sup-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas:
      "key status prio" "subject subject subject" "client client updated" "assignee assignee assignee";
    gap: 3px 8px; padding: 10px 4px; border-bottom: 1px solid var(--rule); }
  .sup-table td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; text-align: left; }
  .sup-table td:nth-child(1) { grid-area: key; }
  .sup-table td:nth-child(2) { grid-area: subject; }
  .sup-table td:nth-child(3) { grid-area: client; font-size: 0.85rem; }
  .sup-table td:nth-child(4) { grid-area: status; }
  .sup-table td:nth-child(5) { grid-area: prio; }
  .sup-table td:nth-child(6) { grid-area: assignee; font-size: 0.82rem; color: var(--muted); }
  .sup-table td:nth-child(7) { grid-area: updated; font-size: 0.82rem; color: var(--muted); }
  .sup-table td:nth-child(6):empty { display: none; }
}
.sup-subject { font-weight: 700; }
.sup-back { color: var(--muted); text-decoration: none; font-weight: 700; }
.sup-title { margin: 0 0 4px; font-size: 1.25rem; font-weight: 900; cursor: text; overflow-wrap: anywhere; }

.sup-st, .sup-pr, .sup-review { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 800; white-space: nowrap; }
.sup-st.new { background: var(--info-soft); color: var(--info); }
.sup-st.open { background: var(--note-soft); color: var(--gold-text); }
.sup-st.progress { background: var(--accent-soft); color: var(--accent-strong); }
.sup-st.waiting { background: var(--chip); color: var(--chip-text); }
.sup-st.resolved { background: var(--good-soft); color: var(--good-text); }
.sup-st.closed { background: var(--chip); color: var(--muted); }
.sup-pr { background: transparent; color: var(--muted); padding-left: 0; }
.sup-pr.high { color: var(--warn); }
.sup-pr.urgent { background: var(--bad-soft); color: var(--bad); padding-left: 9px; }
.sup-pr.low { color: var(--faint); }
.sup-review { background: var(--warn-soft); color: var(--warn); }

.sup-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.sup-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sup-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sup-side .panel h3 { margin-top: 0; }
/* V1.21, the ticket on a phone (the owner: "everything shows without having to scroll horizontally"): one column that never
   grows past the screen (minmax(0, ...)); a long word (a subject without spaces, an address, a link) breaks; the fields and
   their long choices (the epics) keep to the width; the lines of a message wrap */
@media (max-width: 960px) { .sup-layout { grid-template-columns: minmax(0, 1fr); } }
.sup-layout .panel, .sup-layout .sup-msg { min-width: 0; }
.sup-layout .hint, .sup-layout dd, .sup-related li { overflow-wrap: anywhere; }
.sup-layout .sup-input { max-width: 100%; min-width: 0; box-sizing: border-box; }
.sup-layout .sup-field .sup-input, .sup-layout select.sup-input { width: 100%; }
.sup-layout .sup-actions select.sup-input, .sup-layout .sup-tabs select.sup-input { width: auto; }

.sup-thread { display: flex; flex-direction: column; gap: 10px; }
.sup-msg { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.sup-msg header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 6px; }
.sup-msg header .strong { overflow-wrap: anywhere; min-width: 0; }
.sup-msg header .spacer { flex: 1; }
.sup-msg.client { border-left: 4px solid var(--info); }
.sup-msg.reply { border-left: 4px solid var(--accent); background: var(--panel-2); }
.sup-msg.note { border-left: 4px solid var(--brand-gold); background: var(--note-soft); }
.sup-kind { font-size: 0.72rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.sup-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
/* V1.23: the email view of a message (a sandboxed frame, white like an email; it scrolls inside) and its switch */
.sup-email { display: block; width: 100%; height: 480px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.sup-view { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.sup-view button { border: 0; background: none; padding: 1px 10px; font: inherit; font-size: 0.78rem; color: var(--muted); cursor: pointer; }
.sup-view button.on { background: var(--accent-soft); color: var(--text); font-weight: 700; }
.sup-pre { white-space: pre-wrap; max-width: 520px; }
.sup-event { display: flex; flex-wrap: wrap; gap: 0 8px; justify-content: center; text-align: center; font-size: 0.8rem; color: var(--muted); overflow-wrap: anywhere; }
.sup-failed { padding: 1px 8px; border-radius: 999px; background: var(--bad-soft); color: var(--bad); font-size: 0.75rem; font-weight: 800; }
.sup-deleted { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; background: var(--bad-soft); }
.sup-deleted .spacer { flex: 1; }
.sup-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sup-file { display: flex; flex-direction: column; gap: 4px; max-width: min(240px, 100%); padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); text-decoration: none; font-size: 0.82rem; overflow-wrap: anywhere; box-sizing: border-box; }
.sup-file img { max-width: 100%; max-height: 160px; border-radius: 6px; object-fit: cover; }
.sup-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; background: var(--chip); color: var(--chip-text); font-size: 0.8rem; max-width: 100%; overflow-wrap: anywhere; }
.sup-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; }
/* V1.52: the requests waiting for the client (RequestsPage), the questions of Help me write this */
.sup-chip.sup-waiting { background: var(--warn-soft); color: var(--warn); font-weight: 700; }
.sup-missing { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.sup-attach { cursor: pointer; }

.sup-composer { border-top: 3px solid var(--accent); }
.sup-composer.note { border-top-color: var(--brand-gold); background: var(--note-soft); }
.sup-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.sup-tabs .spacer { flex: 1; }
.sup-ai { border-color: var(--info); color: var(--info); }
.sup-ai-note { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; background: var(--info-soft); color: var(--info); font-size: 0.82rem; }
.sup-ai-note a { color: inherit; }
.sup-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 12px 0 0; font-size: 0.82rem; }
.sup-facts dt { color: var(--muted); }
.sup-facts dd { margin: 0; }
.sup-related { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }

/* ---- Support V1.18: the agents, the escalation, the requester ---- */
.sup-agent-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 12px; }
.sup-subhead { margin: 14px 0 4px; font-size: 0.9rem; font-weight: 800; }
.sup-hour { width: 70px; }
.btn.sup-link { margin-top: 6px; padding: 2px 8px; font-size: 0.8rem; }
.sup-agents td .strong { font-weight: 700; }