/* ─────────────────────────────────────────────────────────────────────────────
   Shared list + detail styling — GLOBAL baseline.
   Extracted from the per-page scoped CSS (IncidentsView / ClientDetail) so every
   list/detail page gets the same look without copying scoped CSS into each one.
   Pages that keep their own *.razor.css win on specificity (scoped [b-*] selector),
   so this only fills in pages that have no scoped stylesheet.
   ───────────────────────────────────────────────────────────────────────────── */

/* View shell + heading */
.view { display: block; }

.view__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.view__title { font-size: 2rem; font-weight: 700; }
.view__desc { color: var(--hv-grey-100); margin: 2px 0 0; }

/* Legacy heading aliases (some pages use .head/.title/.desc) */
.head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.title { font-size: 2rem; font-weight: 700; }
.desc { color: var(--hv-grey-100); margin: 2px 0 0; }

.head__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* inline label+control (used by some heads) */
.fl { display: flex; flex-direction: column; gap: 4px; }
.fl > span { font-size: .833rem; font-weight: 700; color: var(--hv-grey-100); text-transform: uppercase; letter-spacing: .04em; }
.fl--grow { flex: 1 1 240px; }
.fl input, .fl select {
    height: 38px; border: 1px solid var(--hv-grey-200); border-radius: 8px;
    padding: 0 10px; font: inherit; font-size: 1rem; background: #fff; outline: none;
}
.fl input:focus, .fl select:focus { border-color: var(--hv-grey-100); }

/* Funnel filter control (toggle + optional clear-X) */
.filter-control {
    display: inline-flex; align-items: stretch; height: 38px; border-radius: 8px;
    background: #fff; border: 1px solid var(--hv-grey-200); overflow: hidden;
}
.filter-control__toggle {
    display: inline-flex; align-items: center; gap: 7px; padding: 0 14px;
    border: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--hv-black); cursor: pointer;
}
.filter-control__toggle:hover { color: var(--hv-red-100); }
.filter-control__clear {
    display: grid; place-items: center; width: 34px; border: 0;
    border-left: 1px solid var(--hv-grey-200); background: transparent; color: var(--hv-grey-100); cursor: pointer;
}
.filter-control__clear:hover { color: var(--hv-red-100); background: rgba(225, 6, 0, .06); }
.filter-control svg { width: 16px; height: 16px; fill: currentColor; }
.filter-control--on { border-color: var(--hv-red-100); }
.filter-control--on .filter-control__toggle,
.filter-control--active .filter-control__toggle { color: var(--hv-red-100); }
.filter-control--active { border-color: var(--hv-red-100); background: rgba(225, 6, 0, .05); }
.filter-control--active .filter-control__clear { border-left-color: rgba(225, 6, 0, .3); }

/* count badge on the filter toggle */
.badge {
    display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--hv-red-100); color: #fff; font-size: .75rem; font-weight: 700;
}

/* Collapsible filter panel */
.filters {
    position: relative; /* hosts the FilterPin in its top-right corner */
    background: #fff; border: 1px solid var(--hv-grey-200); border-radius: 8px;
    padding: 18px 44px 18px 18px; margin-bottom: 14px; animation: filters-in .18s ease;
}
.filters__grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 16px;
}
.filters__field { display: flex; flex-direction: column; gap: 4px; }
.filters__field > span, .filters__label {
    font-size: .833rem; font-weight: 700; color: var(--hv-grey-100); text-transform: uppercase; letter-spacing: .04em;
}
.filters__field input, .filters__field select {
    height: 36px; border: 1px solid var(--hv-grey-200); border-radius: 6px; padding: 0 10px;
    font: inherit; font-size: 1rem; background: #fff; color: var(--hv-black); outline: none;
}
.filters__field input:focus, .filters__field select:focus { border-color: var(--hv-grey-100); }

@keyframes filters-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* Data table */
.table-shell {
    border: 1px solid var(--hv-grey-200); border-radius: 10px; overflow: hidden;
    background: #fff; box-shadow: 0 1px 4px rgba(44, 44, 44, .06);
}
.scrollx { overflow-x: auto; }

.dtable { border-collapse: collapse; width: 100%; font-size: 1rem; min-width: 680px; }
.dtable thead th {
    text-align: left; padding: 0 14px; height: 44px; background: var(--hv-white-grey);
    border-bottom: 2px solid var(--hv-grey-200); font-size: .833rem; font-weight: 700;
    color: var(--hv-grey-100); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.dtable td { padding: 0 14px; height: 46px; border-bottom: 1px solid #F0F0F0; vertical-align: middle; }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody tr { cursor: pointer; transition: background .12s; }
.dtable tbody tr:hover { background: rgba(3, 93, 177, .07); }
.dtable .num, .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }

.cell-state { height: 120px !important; text-align: center; color: var(--hv-grey-100); cursor: default; }
.dtable tbody tr:has(.cell-state):hover { background: transparent; }

.dfoot {
    display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding: 10px 14px;
    font-size: .917rem; color: var(--hv-grey-100); background: var(--hv-white-grey); border-top: 1px solid var(--hv-grey-200);
}
.pager { display: flex; align-items: center; gap: 8px; }
.pager__pos { font-variant-numeric: tabular-nums; }
.pgbtn {
    border: 1px solid var(--hv-grey-200); background: #fff; border-radius: 8px; width: 30px; height: 30px;
    font-size: 1.2rem; line-height: 1; color: var(--hv-grey-100); cursor: pointer;
}
.pgbtn:hover:not(:disabled) { color: var(--hv-red-100); border-color: var(--hv-red-100); }
.pgbtn:disabled { opacity: .4; cursor: default; }

/* Tag chips. Status chips are the StatusChip component and live nowhere else — the --ok / --bad
   / --pending variants that used to sit here carried raw hex and are gone with them. */
.chip { display: inline-flex; align-items: center; border-radius: 10px; padding: 2px 10px; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.chip--tag, .tag { color: var(--hv-grey-100); background: var(--hv-white-grey); border: 1px solid var(--hv-grey-200); font-weight: 600; margin-right: 4px; }

/* ── Detail pages ── */
.top { margin-bottom: 12px; }
.state { padding: 40px 0; text-align: center; color: var(--hv-grey-100); }
.muted { color: var(--hv-grey-100); }

.detail {
    background: #fff; border: 1px solid var(--hv-grey-200); border-radius: 10px;
    padding: 24px; box-shadow: 0 1px 4px rgba(44, 44, 44, .06); max-width: 960px;
}
.detail__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.detail__title { font-size: 1.666rem; font-weight: 700; }
.detail__num { color: var(--hv-grey-100); }
.detail__total { font-size: 1.5rem; font-weight: 700; color: var(--hv-red-100); }
.detail__subtitle { font-size: 1.166rem; font-weight: 700; margin: 24px 0 10px; }
.detail__text { white-space: pre-wrap; line-height: 1.55; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin: 0; }
.grid .row { min-width: 0; }
.grid dt { font-size: .833rem; font-weight: 700; color: var(--hv-grey-100); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.grid dd { margin: 0; font-size: 1rem; color: var(--hv-black); white-space: pre-wrap; word-break: break-word; }

/* Compact inner table (detail children) */
.ptable { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 560px; }
.ptable th, .ptable td { padding: 9px 12px; border-bottom: 1px solid var(--hv-white-grey); text-align: left; white-space: nowrap; }
.ptable thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--hv-grey-100); background: var(--hv-white-grey); }
.ptable .num { text-align: right; font-variant-numeric: tabular-nums; }
.ptable__total td { font-weight: 700; border-top: 2px solid var(--hv-grey-200); border-bottom: 0; }
/* Child rows that open in place, replacing the legacy per-child detail pages. */
.ptable__row { cursor: pointer; }
.ptable__row:hover { background: var(--hv-white-grey); }
.ptable__detail > td { background: var(--hv-white-grey); white-space: normal; padding: 12px 16px; }
.grid--tight { gap: 2px 18px; }

/* Text button (back links etc.) */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 8px; padding: 9px 16px; font: inherit; font-size: 1rem; cursor: pointer; }
.btn--text { background: transparent; color: var(--hv-grey-100); padding: 6px 4px; }
.btn--text:hover { color: var(--hv-red-100); }

@media (max-width: 640px) {
    .grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .dtable tbody tr, .filters { transition: none; animation: none; }
}