/* Dashboard module: customisable widgets. Loaded on every page by the core layout; everything is dash-* scoped. */
:root { --dash-c1: #1F5FA8; --dash-c2: #CC3400; --dash-warn-edge: #F2A000; }
@media (prefers-color-scheme: dark) { :root { --dash-c1: #4F8FDB; --dash-c2: #F0602A; } }

.dash-widget { min-width: 0; }
.is-customising .dash-widget:target { box-shadow: 0 0 0 2px var(--brand); }
.dash-widget .card-head { gap: .75rem; flex-wrap: wrap; }
.dash-scope { display: inline-block; font-size: .72rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: .05rem .55rem; margin-left: .35rem; vertical-align: middle; }
.dash-body .stat-row { margin-bottom: 0; }
.dash-foot { margin: .6rem 0 0; }

/* stats tiles */
.stat-row.dash-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.widget-half .stat-row.dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-stats .stat { padding: .85rem 1rem; }
.dash-stats .stat strong { font-size: 1.6rem; }
.dash-stat-warn { box-shadow: inset 0 3px 0 var(--dash-warn-edge); }

/* ticket table / list */
.dash-table th, .dash-table td { padding: .55rem .75rem; }
.dash-table .subject a { gap: .1rem; }
.widget-half .dash-col-upd, .widget-half .dash-col-pri { display: none; }
.dash-table td small.dash-half-only { display: none; margin-top: .15rem; }
.widget-half .dash-table td small.dash-half-only { display: block; }
.dash-mini a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .35rem; }
.dash-mini a small { flex-basis: 100%; font-weight: 400; padding-left: calc(8px + .45rem); }
.dash-mini .pri-dot { margin-right: 0; }

/* all engineers */
.dash-periods { margin-bottom: .75rem; }
.dash-sort { color: inherit; text-decoration: none; display: inline-flex; gap: .25rem; align-items: center; }
.dash-sort:hover { color: var(--ink); text-decoration: underline; }
.dash-sort.active { color: var(--ink); }
.dash-arrow { font-size: .65rem; min-width: .7em; }
.dash-engineers tbody th { text-align: left; font-weight: 500; font-size: .9rem; white-space: nowrap; background: transparent; color: var(--ink); }
.dash-engineers tbody th small, .dash-engineers td small { display: block; color: var(--muted); font-weight: 400; text-transform: capitalize; }
.dash-engineers td small { text-transform: none; }
.dash-engineers tfoot th, .dash-engineers tfoot td { font-weight: 600; background: var(--surface-2); border-top: 2px solid var(--line); border-bottom: 0; text-align: left; }
.dash-engineers tfoot td.num { text-align: right; }
.dash-engineers td { font-variant-numeric: tabular-nums; }
.dash-engineers tbody th, .dash-engineers thead th:first-child, .dash-engineers tfoot th { position: sticky; left: 0; z-index: 1; }
.dash-engineers tbody th { background: var(--surface); }
.dash-engineers tbody tr:hover th { background: var(--surface-2); }

/* charts (colours only through classes so the strict CSP is kept and dark mode follows the theme) */
.dash-bars { list-style: none; margin: 0; padding: 0; }
.dash-bars a { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) 2.5rem; gap: .75rem; align-items: center; padding: .3rem 0; color: var(--ink); text-decoration: none; }
.dash-bars a:hover .dash-track { fill: var(--line); }
.dash-bar { display: block; width: 100%; height: 12px; }
.dash-bar-n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-track { fill: var(--surface-2); }
.dash-fill-1 { fill: var(--dash-c1); }
.dash-fill-2 { fill: var(--dash-c2); }
.dash-chart { display: block; width: 100%; height: auto; overflow: visible; }
.dash-axis { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.dash-grid-line { stroke: var(--line); stroke-width: 1; }
.dash-base { stroke: var(--muted); stroke-width: 1; }
.dash-hit { fill: transparent; }
.dash-day:hover .dash-hit { fill: var(--surface-2); }
.dash-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: .82rem; color: var(--muted); margin-bottom: .4rem; }
.dash-legend strong { color: var(--ink); margin-left: .25rem; }
.dash-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .4rem; vertical-align: -1px; }
.dash-key-1 { background: var(--dash-c1); }
.dash-key-2 { background: var(--dash-c2); }

/* customise mode */
.dash-catalog { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
.dash-catalog li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.dash-catalog-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.dash-catalog-text .tag { align-self: flex-start; margin-top: .15rem; }
.dash-add { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: flex-end; flex: none; margin: 0; }
.dash-add select { width: auto; padding: .35rem .5rem; font-size: .82rem; }
.dash-add .btn { padding: .4rem .75rem; font-size: .82rem; }
.head-actions form { margin: 0; }

.dash-tools { display: flex; flex-wrap: wrap; gap: .45rem .6rem; align-items: center; margin: -.25rem 0 .9rem; padding-bottom: .75rem; border-bottom: 1px dashed var(--line); }
.dash-seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.dash-btn { font: inherit; font-size: .8rem; font-weight: 600; padding: .3rem .65rem; background: var(--surface); color: var(--ink); border: 0; cursor: pointer; white-space: nowrap; }
.dash-btn:hover:not(:disabled) { background: var(--surface-2); }
.dash-seg .dash-btn + .dash-btn { border-left: 1px solid var(--line); }
.dash-btn[aria-pressed="true"], .dash-btn[aria-pressed="true"]:hover { background: var(--ink); color: var(--paper); }
.dash-btn:disabled { opacity: .4; cursor: default; }
.dash-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.dash-remove { margin-left: auto; color: var(--bad); border: 1px solid var(--bad); border-radius: var(--radius); background: transparent; }
.dash-handle { cursor: grab; user-select: none; font-size: 1.1rem; line-height: 1; padding: .2rem .35rem; color: var(--muted); border-radius: var(--radius); }
.dash-handle:hover { background: var(--surface-2); color: var(--ink); }
.dash-handle[hidden] { display: none; }
.is-customising .dash-widget { border-style: dashed; }
.is-customising .dash-body { pointer-events: none; opacity: .85; }
.dash-widget.dash-dragging { opacity: .45; }
.dash-dnd .dash-widget[draggable="true"] .dash-handle { cursor: grabbing; }
.dash-missing { background: var(--surface-2); }

/* board picker */
.dash-board-pick { display: flex; gap: .4rem; align-items: center; }
.dash-board-pick select { width: auto; min-width: 13rem; font-weight: 600; }
.dash-board-tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-strong); border: 1px solid currentColor; border-radius: 999px; padding: .05rem .55rem; margin-left: .4rem; vertical-align: middle; }

/* Wall Board (office TV): always dark, larger type, no shell */
body.dash-wall {
  --brand-strong: #FF6A33; --ink: #ECECE8; --paper: #1B201F; --surface: #242928; --surface-2: #2B302F; --line: #3A3F3E; --muted: #A5A59E;
  --ok: #7FCB8A; --ok-bg: #20352A; --warn: #F2C467; --warn-bg: #3A3020; --bad: #FF8A80; --bad-bg: #402424; --blue: #8AB8F0; --blue-bg: #1F2D40;
  --purple: #C2A6EC; --purple-bg: #2E2640; --dash-c1: #4F8FDB; --dash-c2: #F0602A;
  color-scheme: dark; padding: 1rem 1.5rem 1.5rem; min-height: 100vh;
}
/* everything in the app is rem-sized, so the TV page scales from the root */
html.dash-wall-root { font-size: 18px; }
@media (min-width: 1800px) { html.dash-wall-root { font-size: 22px; } }
@media (min-width: 3000px) { html.dash-wall-root { font-size: 34px; } }
.dash-wall-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.dash-wall-brand { font-size: 1.5rem; font-weight: 700; letter-spacing: .35em; display: flex; align-items: center; gap: .6rem; }
.dash-wall-brand span:last-child { letter-spacing: normal; font-weight: 500; color: var(--muted); margin-left: .5rem; }
.dash-wall-mark { display: inline-block; width: .35rem; height: 1.6rem; background: var(--brand); }
.dash-wall-time { text-align: right; line-height: 1.15; }
.dash-wall-time strong { display: block; font-size: 2.6rem; font-variant-numeric: tabular-nums; }
.dash-wall-time small { color: var(--muted); font-size: .9rem; }
main.dash-wall-grid { max-width: none; padding: 0; }
.dash-wall-grid .card-head h2 { font-size: 1.35rem; }
.dash-wall .dash-stats .stat strong { font-size: 2.6rem; }
.dash-wall .dash-stats .stat span { font-size: 1rem; }

@media (max-width: 1100px) { .stat-row.dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1101px) and (max-width: 1300px) { .widget-half .dash-bars a { grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr) 2rem; } }
@media (max-width: 860px) {
  .dash-catalog { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .dash-catalog li { flex-direction: column; align-items: stretch; }
  .dash-add { justify-content: flex-start; }
  .dash-bars a { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) 2rem; gap: .5rem; }
  .dash-col-upd, .dash-col-pri { display: none; }
  /* ticket table becomes stacked rows: subject, then status + SLA */
  .dash-table.tickets thead { display: none; }
  .dash-table.tickets tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--line); border-left: 4px solid transparent; }
  .dash-table.tickets tr:last-child { border-bottom: 0; }
  .dash-table.tickets td { border: 0 !important; padding: .35rem .6rem; }
  .dash-table.tickets td.subject { grid-column: 1 / -1; padding-bottom: 0; }
  .dash-table.tickets tr.pri-red { border-left-color: var(--brand); }
  .dash-table.tickets tr.pri-amber { border-left-color: var(--dash-warn-edge); }
  .dash-table.tickets tr.pri-blue { border-left-color: var(--line); }
  .dash-table td small.dash-half-only { display: block; }
  .dash-remove { margin-left: 0; }
}