/* ---------------------------------------------------------------------------------------------
   The Helpdesk (0.2.0, docs/design/helpdesk.md). Its own file so the module's styling sits apart from the rest;
   it uses the design system's tokens (app.css) and adds only what the job list, board, form, thread and reports need.
   --------------------------------------------------------------------------------------------- */

/* A target against the clock, and the words that say it. */
.hd-ok{color:#147a41;font-weight:600}
.hd-warn{color:#9a6500;font-weight:600}
.hd-bad{color:#b3322b;font-weight:600}
.hd-muted{color:var(--muted)}

.hd-table td,.hd-table th{vertical-align:top}
.hd-table tr.disposed td{color:var(--muted)}
.hd-table tr.disposed td a{color:var(--muted)}

/* The board: a column for each status. */
.hd-board{display:grid;grid-template-columns:repeat(5,minmax(240px,1fr));gap:12px;overflow-x:auto;padding-bottom:10px;align-items:start}
.hd-col{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:10px;min-height:120px}
.hd-col-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:13px}
.hd-col-h .n{background:var(--faint);color:var(--muted);border-radius:20px;padding:1px 8px;font-size:12px;font-weight:600}
.hd-card{background:#fff;border:1px solid var(--border);border-left:4px solid var(--border-strong);border-radius:var(--r-sm);padding:9px 10px;margin-bottom:8px;box-shadow:var(--sh-xs);display:flex;flex-direction:column;gap:3px}
.hd-card.hd-u-safety{border-left-color:var(--bad)}
.hd-card.hd-u-urgent{border-left-color:var(--warn)}
.hd-card.hd-u-standard{border-left-color:var(--brand)}
.hd-card.hd-u-routine{border-left-color:var(--muted-2)}
.hd-card-top{display:flex;justify-content:space-between;gap:6px;align-items:center}
.hd-card-title{font-weight:600;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.hd-card-title:hover{text-decoration:underline}
.hd-empty{margin:6px 2px}

/* The report form: the urgency choice in the organisation's own words. */
.hd-urgency{display:flex;flex-direction:column;gap:8px}
.field .hd-urg{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:10px 12px;cursor:pointer;background:#fff;font-weight:400;font-size:13.5px;margin-bottom:0;color:var(--ink)}
.hd-urg input{margin-top:4px;width:auto;flex:0 0 auto}
.field .hd-urg.on{border-color:var(--brand);background:var(--brand-softer);box-shadow:0 0 0 3px var(--brand-ring)}
.field .hd-urg.hd-u-safety.on{border-color:var(--bad);background:var(--bad-soft);box-shadow:0 0 0 3px var(--bad-ring)}
.hd-urg-d{display:block;color:var(--ink-2);margin-top:2px}
.hd-asset-chip{display:flex;gap:12px;align-items:center;border:1px solid var(--border);background:var(--surface-2);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:14px}
.hd-asset-chip svg{width:22px;height:22px;flex:0 0 auto;color:var(--muted)}
.hd-asset-chip .btn{margin-left:auto}
.hd-files{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.hd-files li{display:flex;align-items:center;gap:8px;font-size:13px}
.hd-files li svg{width:15px;height:15px;color:var(--muted)}
.hd-files .btn{margin-left:auto}

/* "Is it one of these?" */
.hd-dup{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:8px}
.hd-dup-main{min-width:0}
.hd-dup-main > div{overflow-wrap:anywhere}

/* The short form, and what it says when it is done. */
.hd-report .hd-done{display:flex;flex-direction:column;gap:6px;align-items:stretch;text-align:center}
.hd-report .hd-done > svg{width:44px;height:44px;margin:0 auto;color:var(--ok)}
.hd-report .hd-done h2{margin:4px 0 0;font-size:20px}
.hd-report .hd-done .btn,.hd-report .hd-done .m-btn{justify-content:center}

/* A button with its help marker, kept together when the row of actions wraps. */
.hd-act{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}

/* The conversation. */
.hd-thread{display:flex;flex-direction:column;gap:10px}
.hd-msg{border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;background:#fff}
.hd-msg.system{background:var(--surface-2);color:var(--ink-2)}
.hd-msg.team{background:var(--warn-soft);border-color:#ecd49a}
.hd-msg-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.hd-msg-b{white-space:pre-wrap;font-size:13.5px;overflow-wrap:anywhere}
.hd-details{white-space:pre-wrap;text-align:right;overflow-wrap:anywhere;font-weight:500}

/* The reports page. */
.hd-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.hd-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh-xs)}
.hd-tile .k{font-size:12px;color:var(--muted);font-weight:600}
.hd-tile .v{font-size:24px;font-weight:700;letter-spacing:-.4px;margin-top:2px}
.hd-tile .v.t{font-size:19px;line-height:1.25;letter-spacing:-.2px}
.hd-tile .s{font-size:12px;color:var(--muted);margin-top:2px}
.hd-tile.bad .v{color:#b3322b}
.hd-report-filters .field{min-width:160px}

/* Settings, Helpdesk. */
.hd-ladder td,.hd-ladder th{vertical-align:middle}
.hd-ladder .input{max-width:110px;text-align:right}
.hd-hours .input{max-width:130px}
.hd-members{max-height:260px;overflow:auto;border:1px solid var(--border);border-radius:var(--r-sm);padding:6px 10px}
.hd-members label.check{padding:5px 0}

@media (max-width:640px){
  .hd-board{grid-template-columns:repeat(5,82vw)}
  .hd-dup{flex-direction:column}
  .hd-asset-chip{flex-wrap:wrap}
  .hd-asset-chip .btn{margin-left:0}
}