/* Helpdesk app: overview cards, ticket board cards, stars, status dot, SLA panel. Colours come from the theme variables (light and dark). */
.hd-page { --hd: #2e86c1; }
.hd-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hd-check { min-height: 36px; }
.hd-note { margin: 0 0 12px; }
.hd-stg { align-items: center; gap: 8px; }
/* overview */
.hd-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; margin-top: 16px; }
.hd-team { min-width: 0; border-top: 3px solid var(--team, var(--hd)); }
.hd-team.mine { --team: var(--accent); }
.hd-team-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hd-team-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--team, var(--hd)); }
.hd-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hd-stat { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); color: inherit; text-decoration: none; min-width: 0; }
.hd-stat:hover { border-color: var(--accent); }
.hd-stat-n { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.hd-stat-l { font-size: 12.5px; color: var(--muted); }
.hd-stat.zero .hd-stat-n { color: var(--muted); font-weight: 600; }
.hd-stat.tone-warn .hd-stat-n { color: var(--warn-ink); }
.hd-stat.tone-danger .hd-stat-n { color: var(--danger-ink); }
/* status dot, stars, tags */
.hd-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; background: var(--info); border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--line); }
.hd-dot.st-done { background: var(--ok); }
.hd-dot.st-blocked { background: var(--danger); }
.hd-stars { display: inline-flex; gap: 1px; color: var(--line); vertical-align: middle; }
.hd-star { display: inline-grid; place-items: center; background: transparent; border: 0; padding: 0; color: inherit; }
.hd-star.on { color: var(--warn-ink); }
.hd-star.on svg { fill: currentColor; }
.hd-stars.edit .hd-star { width: 32px; height: 32px; cursor: pointer; border-radius: 8px; }
.hd-stars.edit .hd-star:hover { background: var(--panel-3); }
.hd-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.hd-tag { --tag: var(--muted); display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ink); border: 1px solid var(--tag); background: color-mix(in srgb, var(--tag) 14%, transparent); }
/* board cards */
.hd-card { display: grid; gap: 8px; min-width: 0; }
.hd-card.late { box-shadow: inset 3px 0 0 var(--danger); }
[dir="rtl"] .hd-card.late { box-shadow: inset -3px 0 0 var(--danger); }
.hd-card.closed { opacity: .85; }
.hd-card-top { display: flex; align-items: center; gap: 8px; }
.hd-num { font-variant-numeric: tabular-nums; }
.hd-card-title { line-height: 1.3; overflow-wrap: anywhere; }
.hd-card-who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hd-card-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-card-foot { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.hd-sla { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.hd-sla.late, .hd-late { color: var(--danger-ink); }
/* ticket page side */
.hd-sla-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hd-sla-list li { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.hd-sla-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.hd-sla-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hd-dates { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.hd-dates dd { margin: 0; }
@media (max-width: 720px) { .hd-stat-n { font-size: 20px; } }
/* the card's own stage select moves a ticket by touch (dragging stays for the mouse) */
.hd-stage-sel { display: none; width: 100%; min-height: 44px; padding-inline: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); color: var(--ink); }
@media (max-width: 720px) { .hd-stage-sel { display: block; } }