/* 17 Oct build: prototype v185-v326 */
/* Violations screens at prototype v326 (proto_vio5.css v185-v326 additions; vio worker, 17 Oct build).
   The oBIX pieces the violation screens reuse (act42, who42 / sec42, the um42 help window) are copied here, scoped where they
   could clash, so the violations screens look right whether or not the shared v326 stylesheet has them. Sam 15 Oct 12:36 (Q207):
   royal blue #1E40AF; --blue42 falls back to it when the shared theme does not set it. */
main.vio42, .swal2-popup, .um42c.v42help { --v42b: var(--blue42, #1E40AF); }
html[data-mode="dark"] main.vio42, html[data-mode="dark"] .swal2-popup, html[data-mode="dark"] .um42c.v42help { --v42b: var(--blue42, #3B63D9); }

/* Sam 15 Oct 18:30 (Q289): no developer notes on violations tabs (they stay in the source for the build) */
main.vio42 .note { display: none; }
main.vio42 .vio42n { flex-wrap: wrap; }

/* Q207 Alerts (oBIX Open alerts): the message line under each alert */
.v5msg { display: block; margin-top: 2px; }
.v5e { cursor: pointer; }
.vio42ah { flex-wrap: wrap; gap: 8px 12px; }
/* Alert history tables (oBIX ahtbl, fixed layout): room for the Record and Details buttons */
main.vio42 table.ahtbl th:first-child { width: 72px; }
main.vio42 table.ahtbl th:last-child { width: 200px; }

/* Q291 record page: title row, building line, certificate of correction, key / value table, status + notes row */
main.vio42 .v42rh { flex-wrap: wrap; gap: 8px; margin-bottom: 2px; }
main.vio42 .v42rh .btn { margin-left: 8px; }
main.vio42 .v42sub { margin: 0 0 12px; }
.v42cure { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; margin: 0 0 12px; border: 1px solid var(--line2); border-radius: 10px; background: var(--surface2); }
.v42cure .lbl { padding: 0; margin: 0; border: 0; }
.kv42 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line2); border-radius: 10px; overflow: hidden; }
.kv42 > div { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); border-bottom: 1px solid var(--line2); }
.kv42 > div:nth-child(odd):not(.w) { border-right: 1px solid var(--line2); }
.kv42 > div.w { grid-column: 1 / -1; grid-template-columns: minmax(120px, 17%) minmax(0, 1fr); border-bottom: 0; }
.kv42 .k { padding: 9px 14px; background: var(--surface2); color: var(--label); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; }
.kv42 .v { padding: 9px 14px; min-width: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
@media (max-width: 760px) { .kv42 { grid-template-columns: 1fr; } .kv42 > div:nth-child(odd):not(.w) { border-right: 0; } .kv42 > div.w { grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); } }
.v42st { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-top: 14px; }
.v42st > .btn { align-self: flex-end; }
.v42st .fld { margin: 0; }
.v42st .v42n { flex: 1; min-width: 260px; }
.v42st .v42n textarea { width: 100%; }
.v42tip { margin: 12px 0 0; }
.v42raw th:first-child { width: 28%; }
.v42raw td:first-child { white-space: nowrap; color: var(--label); }

/* Q292 devices: a disabled device stays in the list, greyed */
tr.v42off td { opacity: .55; }
tr.v42off td.v42acts { opacity: 1; }
.v42acts { white-space: nowrap; text-align: right; }
.v42acts .btn + .btn { margin-left: 6px; }

/* Q293 upload windows: the file they need */
.v42csv th, .v42csv td { white-space: nowrap; }
.v42csvn { margin: 10px 0; padding-left: 18px; line-height: 1.5; }

/* Q224 / Q337 Details pop-up: action row (Close alert, Open Record, Add note) and the history card (oBIX act42 / who42 / sec42) */
.act42 { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 0 0 12px; margin: 0 0 12px; border-bottom: 1px solid var(--line); }
.act42 .n1-acts, .act42 .n1-note { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 !important; }
.act42 .n1-note { flex: 1 1 380px; }
.act42 .n1-note .in { flex: 1; min-width: 200px; }
.who42 { margin: 0 0 14px; }
.swal2-popup .sec42 { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; background: var(--surface); break-inside: avoid; }

/* Q294 page help window (the oBIX um42 help window, wider, one heading per part of the page) */
.um42d.v42d { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: grid; place-items: center; z-index: 500; }
.um42c.v42help { background: var(--surface, #fff); color: var(--fg, #0f172a); border-radius: 14px; padding: 20px 22px; width: min(680px, 94vw); max-height: 84vh; overflow: auto; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .4); }
.um42c.v42help h3 { margin: 0 0 12px; border-bottom: 3px solid var(--v42b); padding-bottom: 8px; }
.v42help h4 { margin: 14px 0 4px; font-size: 14px; font-weight: 700; color: var(--v42b); }
.v42help h4 + p { margin-top: 0; }
.v42help .um42a { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* v318 (Sam 17:42 / 17:44): one vertical scroll bar; a page with exactly one data table scrolls inside its box (vio326.js) */
.one42 { overflow: auto; }

/* 46 Oct (Sam 2 Nov, Violations dashboard test page agreed): small cards on the LEFT, the work lists on the right; the Property-wise
   summary button at the right of the header; tables in the app's light blue header style (#E6EFFC, black text, #7FA2CF lines). */
main.vio46d .vio46hd { margin: 0 0 10px; }
main.vio46d .vio46g { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { main.vio46d .vio46g { grid-template-columns: minmax(0, 1fr); } }
main.vio46d .vio46g > .col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
main.vio46d .vio46g > aside.col { position: static; }
.vio46more { display: inline-block; margin-top: 8px; }
html body .vio46h table.t thead th:not(#z46):not(#z517):not(#z518) { background: #E6EFFC !important; color: #111827 !important; border: 1px solid #7FA2CF !important; }
html body .vio46h table.t thead th:not(#z46):not(#z517):not(#z518) * { color: #111827 !important; }
/* Q1024 add-on (1 Nov): pop-up labels such as "Description" never break mid-word */
.lines>div>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Q1032 (1 Nov): dates never wrap */
.nw32,main.vio42 td.dt32{white-space:nowrap}
/* 1 Nov build. Q1030: every small dashboard card one fixed height, a longer list ends in "More...". Q1029: Overdue / Next 90 days.
   Q1033: the two graphs (month bars with the 12-month average line, agency bars split by class), grown on the first draw only. White, no shadows. */
main.vio46d .vc30 { max-height: 260px; padding: 12px 14px; display: flex; flex-direction: column; overflow: hidden; box-shadow: none; background: var(--surface, #fff); }
main.vio46d .vc30 > h3 { margin: 0 0 6px; font-size: 14px; }
main.vio46d .vc30 > .lines { flex: 0 1 auto; overflow: hidden; }
main.vio46d .vc30 > .vio46more { margin-top: auto; padding-top: 4px; }
main.vio46d .vc29 .lines div { padding: 3px 0; }
.lbl30 { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin: 6px 0 2px; cursor: pointer; }
.lbl30.up { color: var(--crit); }
.lines .click:hover span { text-decoration: underline; }
.vm30 { max-height: 60vh; overflow: auto; min-width: 320px; }
main.vio46d .vp30 .al { margin: 0 0 6px; }
/* Q1030 add-on (Sam 2 Nov 16:32): cards have no minimum, only a maximum (height 260 px, the left column 340 px wide at most). Next 30 days
   lists every item in a box of a fixed maximum height that scrolls, its header staying at the top, so the card never grows. */
main.vio46d .vn30 { max-height: 420px; overflow: auto; }
main.vio46d .vn30 table.t thead th { position: sticky; top: 0; z-index: 1; }
.g33 .mc33 { position: relative; display: flex; align-items: flex-end; gap: 4px; height: 140px; margin-top: 10px; }
.mb33 { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; }
.mb33 i { display: block; width: 72%; min-height: 1px; background: #7FA2CF; border-radius: 3px 3px 0 0; transform-origin: bottom; }
.mb33.cur i { background: #1d4ed8; }
.mb33:hover i, .mb33:focus-visible i { background: #2563eb; }
.mb33 .small { font-size: 10.5px; white-space: nowrap; }
.avg33 { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed #6b7280; pointer-events: none; z-index: 1; }
.avg33 span { position: absolute; right: 0; top: -15px; font: 600 10px var(--mono, monospace); color: var(--muted, #4b5563); background: var(--surface, #fff); padding: 0 3px; font-style: normal; }
.ok33 { color: #15803d; }
.ag33 { display: grid; grid-template-columns: 48px minmax(0, 1fr) 56px; align-items: center; gap: 8px; width: 100%; background: none; border: 0; padding: 5px 0; margin: 0; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.ag33:hover .st33, .ag33:focus-visible .st33 { outline: 2px solid #93c5fd; outline-offset: 1px; }
.st33 { display: flex; height: 14px; border-radius: 3px; overflow: hidden; transform-origin: left; }
.st33 i, .sw33 { display: block; height: 100%; }
.st33 i.c, .sw33.c { background: var(--crit); }
.st33 i.b, .sw33.b { background: var(--warn); }
.st33 i.o, .sw33.o { background: #7FA2CF; }
.sw33 { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin: 0 3px 0 6px; vertical-align: middle; }
.an33 .mb33 i { animation: grow33 .6s ease-out both; animation-delay: calc(var(--k, 0) * 40ms); }
.an33 .st33 { animation: wide33 .7s ease-out both; }
@keyframes grow33 { from { transform: scaleY(0); } }
@keyframes wide33 { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .an33 .mb33 i, .an33 .st33 { animation: none; } }
/* Q1021 (Sam 2 Nov 12:30-14:04, 1 Nov build): ONE table style for every table in the Violations screens, their pop-ups and Violations admin,
   like Metrics > Table: light blue header (#E6EFFC, dark bold text as written, no capitals), a navy line above it, #7FA2CF header lines,
   thin light grey grid lines, white rows, numbers right aligned with even digits. Replaces the navy header with white capitals (ui326b) here only. */
html body main:is(.vio42, .vio42a) table thead th:not(#z1021):not(#z517):not(#z518),
html body:has(main:is(.vio42, .vio42a)) :is(.swal2-popup, #dlg) table thead th:not(#z1021):not(#z517):not(#z518) {
	background: #E6EFFC !important; color: #111827 !important; border: 1px solid #7FA2CF !important; text-transform: none !important; letter-spacing: 0 !important;
	font-weight: 700 !important; font-size: 12.5px !important; padding: 7px 8px !important; box-shadow: none !important; }
html body main:is(.vio42, .vio42a) table thead th:not(#z1021):not(#z517):not(#z518) *,
html body:has(main:is(.vio42, .vio42a)) :is(.swal2-popup, #dlg) table thead th:not(#z1021):not(#z517):not(#z518) * { color: #111827 !important; }
html body main:is(.vio42, .vio42a) table thead tr:first-child th:not(#z1021):not(#z517):not(#z518),
html body:has(main:is(.vio42, .vio42a)) :is(.swal2-popup, #dlg) table thead tr:first-child th:not(#z1021):not(#z517):not(#z518) { border-top: 2px solid #1a3768 !important; }
main:is(.vio42, .vio42a) table.t, body:has(main:is(.vio42, .vio42a)) :is(.swal2-popup, #dlg) table.t { border-collapse: collapse; background: #fff; }
main:is(.vio42, .vio42a) table.t tbody td, body:has(main:is(.vio42, .vio42a)) :is(.swal2-popup, #dlg) table.t tbody td { border: 1px solid #e5e7eb; padding: 6px 8px; background: transparent; }
main:is(.vio42, .vio42a) table.t tbody tr, body:has(main:is(.vio42, .vio42a)) :is(.swal2-popup, #dlg) table.t tbody tr { background: #fff; }
main:is(.vio42, .vio42a) table.t :is(td, th).n, body:has(main:is(.vio42, .vio42a)) :is(.swal2-popup, #dlg) table.t :is(td, th).n { text-align: right; font-variant-numeric: tabular-nums; }
main:is(.vio42, .vio42a) table.t td { font-variant-numeric: tabular-nums; }
/* Q1021 Records: group rows (Categorize by...), the legend and the row tints */
main:is(.vio42, .vio42a) table.t tr.grp21 td { background: #fff; color: #1E40AF; font-weight: 700; font-size: 13.5px; padding: 7px 8px; border-color: #e5e7eb; }
main:is(.vio42, .vio42a) table.t tr.grp21.alt21 td { background: #f5f6f8; }
main:is(.vio42, .vio42a) table.t tr.grp21 td .small { color: #1E40AF; font-weight: 600; }
main:is(.vio42, .vio42a) table.t tr.rd21 { background: #fdecec; }
main:is(.vio42, .vio42a) table.t tr.yl21 { background: #fbf3dc; }
main:is(.vio42, .vio42a) table.t tr.click:hover { background: #eef4fd; }
.lg21 { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 6px; color: #4b5563; }
.lg21 i { display: inline-block; width: 12px; height: 12px; border: 1px solid #d1d5db; border-radius: 2px; margin-right: 6px; vertical-align: -2px; }
.lg21 i.rd21 { background: #fdecec; }
.lg21 i.yl21 { background: #fbf3dc; }
html[data-theme="dark"] body main:is(.vio42, .vio42a) table thead th:not(#z1021):not(#z517):not(#z518),
html[data-theme="dark"] body:has(main:is(.vio42, .vio42a)) :is(.swal2-popup, #dlg) table thead th:not(#z1021):not(#z517):not(#z518) { background: #22365e !important; color: #e6ebf7 !important; }
html[data-theme="dark"] body main:is(.vio42, .vio42a) table thead th:not(#z1021):not(#z517):not(#z518) * { color: #e6ebf7 !important; }
html[data-theme="dark"] main:is(.vio42, .vio42a) table.t, html[data-theme="dark"] main:is(.vio42, .vio42a) table.t tbody tr, html[data-theme="dark"] main:is(.vio42, .vio42a) table.t tr.grp21 td { background: var(--surface); }
html[data-theme="dark"] main:is(.vio42, .vio42a) table.t tbody td { border-color: var(--line); }
/* Q1024 add-on: a label column never breaks mid-word ("Description") */
.kv42 .k { white-space: nowrap; }

/* Dark mode fix (Sam 2 Nov 16:42, 1 Nov build): the 1 Nov light colours (white cards, white table rows, light row tints, the light blue
   header) also showed in dark mode, with the text turned light: almost invisible. Light mode is unchanged; in dark mode the same places use
   the theme's colours. core.js always sets data-theme (from the person's choice or the computer's setting). */
html[data-theme="dark"] main.vio46d .vc30 { background: var(--surface); color: var(--fg); }
html[data-theme="dark"] body .vio46h table.t thead th:not(#z46):not(#z517):not(#z518) { background: #22365e !important; color: #e6ebf7 !important; border-color: #3a5488 !important; }
html[data-theme="dark"] body .vio46h table.t thead th:not(#z46):not(#z517):not(#z518) * { color: #e6ebf7 !important; }
html[data-theme="dark"] body:has(main:is(.vio42, .vio42a)) :is(.swal2-popup, #dlg) table thead th:not(#z1021):not(#z517):not(#z518) * { color: #e6ebf7 !important; }
html[data-theme="dark"] main:is(.vio42, .vio42a) table thead tr:first-child th:not(#z1021):not(#z517):not(#z518),
html[data-theme="dark"] body:has(main:is(.vio42, .vio42a)) :is(.swal2-popup, #dlg) table thead tr:first-child th:not(#z1021):not(#z517):not(#z518) { border-top-color: #5b7cc0 !important; }
html[data-theme="dark"] body:has(main:is(.vio42, .vio42a)) :is(.swal2-popup, #dlg) table.t,
html[data-theme="dark"] body:has(main:is(.vio42, .vio42a)) :is(.swal2-popup, #dlg) table.t tbody tr { background: var(--surface); }
html[data-theme="dark"] body:has(main:is(.vio42, .vio42a)) :is(.swal2-popup, #dlg) table.t tbody td { border-color: var(--line); }
html[data-theme="dark"] main:is(.vio42, .vio42a) table.t tr.grp21.alt21 td { background: var(--surface2); }
html[data-theme="dark"] main:is(.vio42, .vio42a) table.t tr.grp21 td, html[data-theme="dark"] main:is(.vio42, .vio42a) table.t tr.grp21 td .small { color: var(--info); border-color: var(--line); }
html[data-theme="dark"] main:is(.vio42, .vio42a) table.t tr.rd21, html[data-theme="dark"] .lg21 i.rd21 { background: var(--crit-soft); }
html[data-theme="dark"] main:is(.vio42, .vio42a) table.t tr.yl21, html[data-theme="dark"] .lg21 i.yl21 { background: var(--warn-soft); }
html[data-theme="dark"] main:is(.vio42, .vio42a) table.t tr.click:hover { background: var(--surface2); }
html[data-theme="dark"] .lg21 { color: var(--muted); }
html[data-theme="dark"] .lg21 i { border-color: var(--line); }

/* Q1039 (Sam 2 Nov 17:24, option C): Records toolbar in 3 lines; the 7 selects in one line; the quick links as a tab strip above the table,
   sentence case, the selected tab underlined in blue. Theme colours, so dark mode follows. */
main.vio42 .filters.f39 { flex-wrap: wrap; }
main.vio42 .filters.f39 select.in { max-width: 175px; }
.tabs39 { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--line); margin: 4px 0 8px; }
.tabs39 .tab39 { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 7px 9px; font: inherit; font-size: 13px; color: var(--fg); cursor: pointer; white-space: nowrap; text-transform: none; letter-spacing: 0; border-radius: 0; }
.tabs39 .tab39 b { margin-left: 5px; font-weight: 700; }
.tabs39 .tab39:hover { color: var(--v42b, #1E40AF); }
.tabs39 .tab39.on { border-bottom-color: var(--v42b, #1E40AF); color: var(--v42b, #1E40AF); font-weight: 700; }
html[data-theme="dark"] .tabs39 .tab39:hover, html[data-theme="dark"] .tabs39 .tab39.on { color: var(--info); border-bottom-color: var(--info); }

/* Q1054 (Sam 3 Nov 07:26): a Violations page with one fitted table drops the 64 px bottom padding so the table reaches the window bottom */
html.one42v body main.page:not(#z42) { padding-bottom: 8px !important; }
/* Q1054 (Sam 3 Nov 07:29-07:30): the quick link tabs stay on one line (narrower padding; a very narrow window scrolls the strip sideways);
   "Categorize by..." sits at the right end of the legend row, a compact select */
.lg21 { align-items: center; }
.lg21 .lg43 { margin-left: auto; }
.lg21 .lg43 select.in { height: 30px; min-height: 0; padding: 2px 28px 2px 8px; font-size: 13px; max-width: 200px; }

/* Q1054 (Sam 3 Nov 07:32-07:40, "Proposed, stronger look" on the test page): Records line 1 = sub-tabs, then dates, Upcoming only, search
   and Reset on the right; line 2 = the 6 selects; line 3 = the quick link tabs as pills on one line; line 4 = colour key, then
   Categorize by, sort, view and Export on the right. Fields have a navy outline; a field that is filtering turns light blue and bold. */
main.vio42 .vio54n { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
main.vio42 .vio54n > .vio42n { margin-bottom: 0 !important; }
main.vio42 .vio54n > .f54r { margin: 0 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
main.vio42 .lg21 .lg43 { display: inline-flex; gap: 6px; align-items: center; }
main.vio42 :is(.vio54n, .f39, .lg21) :is(select.in, input.in, .rg32, .rng, .drp) { border: 1px solid #1a3768; }
main.vio42 :is(.f39, .lg21) select.in.set54 { background-color: #E6EFFC; border-color: #1E40AF; color: #1E40AF; font-weight: 700; }
html[data-theme="dark"] main.vio42 :is(.vio54n, .f39, .lg21) :is(select.in, input.in) { border-color: var(--info); }
html[data-theme="dark"] main.vio42 :is(.f39, .lg21) select.in.set54 { background-color: var(--info-soft, #1e3a5f); color: var(--fg); border-color: var(--info); }
.tabs39 { gap: 3px; border-bottom: 1px solid var(--line); padding: 4px 0 8px; }
.tabs39 .tab39 { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 8px; margin: 0; border: 1px solid #7FA2CF; border-radius: 14px; background: #E6EFFC; color: #1E40AF; font-size: 12.5px; font-weight: 600; }
.tabs39 .tab39 b { margin: 0; background: #fff; color: #111827; border-radius: 9px; padding: 0 5px; font-size: 12px; }
.tabs39 .tab39 b.red54 { background: #fdecec; color: #b91c1c; }
.tabs39 .tab39:hover { background: #d6e4fa; color: #1E40AF; }
.tabs39 .tab39.on { background: #1a3768; border-color: #1a3768; color: #fff; }
.tabs39 .tab39.on b { background: #fff; color: #1a3768; }
html[data-theme="dark"] .tabs39 .tab39 { background: var(--info-soft, #1e3a5f); border-color: var(--line); color: var(--fg); }
html[data-theme="dark"] .tabs39 .tab39 b { background: var(--bg, #0f172a); color: var(--fg); }
html[data-theme="dark"] .tabs39 .tab39.on, html[data-theme="dark"] .tabs39 .tab39:hover { background: #3B63D9; border-color: #3B63D9; color: #fff; }

/* Q1054 Dashboard (Sam 3 Nov 08:04-08:13, test page agreed): cards a bit stronger. 7 top cards: a light tint and a 4 px left stripe in the card's colour
   (navy, red for Class C / vacate, amber for cure-by overdue), number bold. Left cards and Today's priorities: navy outline and a
   light blue title band. */
main.vio46d .kpi54 { border: 1px solid #1a3768 !important; border-left-width: 4px !important; background: #f3f7fe !important; }
main.vio46d .kpi54.t54-crit { border-color: #b91c1c !important; background: #fdf2f2 !important; }
main.vio46d .kpi54.t54-warn { border-color: #b45309 !important; background: #fdf8ec !important; }
main.vio46d .kpi54 .lbl { color: #1a3768; font-weight: 700; }
main.vio46d .kpi54 .mid { font-weight: 700; }
main.vio46d .kpi54:hover { box-shadow: 0 2px 8px rgba(26, 55, 104, .18); }
main.vio46d :is(.vc30, .vp30) { border: 1px solid #1a3768 !important; padding-top: 0; }
main.vio46d .vc30 > h3, main.vio46d .vp30 > .lbl:first-child { margin: 0 -14px 8px; padding: 8px 14px; background: #E6EFFC; color: #1a3768; border-bottom: 1px solid #7FA2CF; }
main.vio46d .vp30 > .lbl:first-child { margin: 0 -16px 10px !important; padding: 9px 16px; }
html[data-theme="dark"] main.vio46d .kpi54 { background: var(--surface); border-color: var(--info) !important; }
html[data-theme="dark"] main.vio46d .kpi54.t54-crit { border-color: var(--crit) !important; }
html[data-theme="dark"] main.vio46d .kpi54.t54-warn { border-color: var(--warn) !important; }
html[data-theme="dark"] main.vio46d .kpi54 .lbl, html[data-theme="dark"] main.vio46d .vc30 > h3, html[data-theme="dark"] main.vio46d .vp30 > .lbl:first-child { color: var(--fg); }
html[data-theme="dark"] main.vio46d .vc30 > h3, html[data-theme="dark"] main.vio46d .vp30 > .lbl:first-child { background: var(--info-soft, #1e3a5f); border-color: var(--line) !important; }
html[data-theme="dark"] main.vio46d :is(.vc30, .vp30) { border-color: var(--line) !important; }

/* Sam 3 Nov 08:06: hearings in the next 7 days flicker (2.5 s, as open Critical alerts, Q963): the Dashboard "Hearings next 7 days"
   card when above 0, the hearing date on Records (Deadline column) and the Hearing items on the Calendar. Off with reduced motion. */
@keyframes flk54c { 75% { background: #fde68a; } }
@keyframes flk54k { 75% { box-shadow: inset 0 0 0 999px #fde68a; } }
@keyframes flk54o { 75% { opacity: .35; } }
main.vio46d .card.flk54 { animation: flk54k 2.5s step-end infinite; }
main.vio42 .hd54.flk54 { animation: flk54o 2.5s step-end infinite; font-weight: 700; color: #b45309; }
main.vio42 .al.flk54 { animation: flk54o 2.5s step-end infinite; }
html[data-theme="dark"] main.vio42 .hd54.flk54 { color: var(--warn); }
html[data-theme="dark"] main.vio46d .card.flk54 { animation-name: flk54o; }
@media (prefers-reduced-motion: reduce) { main.vio42 .flk54, main.vio42 tr.flk54 > td { animation: none !important; } }

/* Q1054 Today's priorities (Sam 3 Nov 08:10-08:13, agreed): white rows with a thin line between them, a small colour dot and a short grey label
   (Urgent / Soon / Note), numbers bold; only an Urgent dot flickers. */
main.vio46d .vp30 .pr54 { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line2, #e5e7eb); font-size: 14px; }
main.vio46d .vp30 .pr54:last-child { border-bottom: 0; }
main.vio46d .vp30 .pr54 > i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #1E40AF; }
main.vio46d .vp30 .pr54.crit > i { background: #b91c1c; animation: flk54o 2.5s step-end infinite; }
main.vio46d .vp30 .pr54.warn > i { background: #d97706; }
main.vio46d .vp30 .pr54 .pt54 { flex: none; width: 58px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6b7280; }
main.vio46d .vp30 .pr54.crit .pt54 { color: #b91c1c; }
main.vio46d .vp30 .pr54 b { color: #111827; }
html[data-theme="dark"] main.vio46d .vp30 .pr54 b { color: var(--fg); }
html[data-theme="dark"] main.vio46d .vp30 .pr54.crit > i { background: var(--crit); }
@media (prefers-reduced-motion: reduce) { main.vio46d .vp30 .pr54.crit > i { animation: none; } }

/* Q1054 Calendar look (Sam 3 Nov 08:13-09:07, test page https://claude.ai/artifact/8iRzN9XJWG7dPUBmkowbxb agreed) */
main.vio42 .cmo55 { min-width: 140px; text-align: center; font-size: 15px; }
main.vio42 .ck55 { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin: 0 0 10px; font-size: 13px; }
main.vio42 .ck55 > span > i { display: inline-block; width: 4px; height: 14px; border-radius: 2px; margin-right: 7px; vertical-align: -2px; }
main.vio42 .ck55 b { margin-left: 3px; }
main.vio42 .cg55 { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); gap: 0; min-width: 780px; border: 1px solid #c7d4e8; border-radius: 10px; overflow: hidden; background: #fff; }
main.vio42 .cw55 { padding: 7px 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1a3768; background: #E6EFFC; border-bottom: 1px solid #7FA2CF; }
main.vio42 .cd55 { min-height: 96px; overflow: hidden; padding: 4px 6px 6px; border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; background: #fff; }
main.vio42 .cd55:nth-child(7n) { border-right: 0; }
main.vio42 .cd55.wk55 { background: #f4f6fa; }
main.vio42 .cd55.out55 > * { visibility: hidden; }
main.vio42 .cd55.out55 { background: #fbfcfe; }
main.vio42 .cd55.past55 .ci55, main.vio42 .cd55.past55 .cn55 { opacity: .55; }
main.vio42 .cn55 { font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 3px; }
main.vio42 .cn55 span { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 11px; }
main.vio42 .cd55.now55 .cn55 span { background: #1a3768; color: #fff; }
.ci55 { display: flex; align-items: center; gap: 6px; padding: 3px 6px 3px 7px; margin: 0; font-size: 13.5px; border-bottom: 1px solid #edf0f5; line-height: 1.35; border-left: 3px solid; border-radius: 3px; background: #fff; cursor: pointer; }
.ci55:hover { background: #f1f5fb; }
.ci55 span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci55 b { flex: none; font-size: 12px; background: #eef2f7; color: #111827; border-radius: 8px; padding: 0 6px; }
.ci55 em { flex: none; font-style: normal; font-size: 12px; font-weight: 700; color: #4b5563; white-space: nowrap; }
.ci55.h55 em { color: #b91c1c; }
.ci55.h55 span { font-weight: 600; }
html[data-theme="dark"] .ci55 em { color: var(--muted); }
.h55 { border-left-color: #b91c1c !important; } .c55 { border-left-color: #d97706 !important; } .k55 { border-left-color: #1E40AF !important; } .o55 { border-left-color: #0f766e !important; }
main.vio42 .ck55 .h55 i { background: #b91c1c; } main.vio42 .ck55 .c55 i { background: #d97706; } main.vio42 .ck55 .k55 i { background: #1E40AF; } main.vio42 .ck55 .o55 i { background: #0f766e; }
main.vio42 .cm55 { display: inline-block; margin-top: 2px; font-size: 12.5px; }
main.vio42 .cm55[hidden], .ci55[hidden] { display: none; }
.cdl55 { min-width: 340px; max-height: 60vh; overflow: auto; }
.cdl55 .ci55 { padding: 6px 8px; margin: 3px 0; font-size: 13px; }
html[data-theme="dark"] main.vio42 :is(.cg55, .cd55) { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] main.vio42 .cd55.wk55, html[data-theme="dark"] main.vio42 .cd55.out55 { background: var(--bg); }
html[data-theme="dark"] main.vio42 .cw55 { background: var(--info-soft, #1e3a5f); color: var(--fg); border-color: var(--line); }
html[data-theme="dark"] .ci55 { background: transparent; }
html[data-theme="dark"] .ci55 b { background: var(--line); color: var(--fg); }
html[data-theme="dark"] main.vio42 .cn55 { color: var(--fg); }
html[data-theme="dark"] main.vio42 .cd55.now55 .cn55 span { background: #3B63D9; }
html[data-theme="dark"] .ci55 { border-bottom-color: var(--line); }
@keyframes flk55 { 75% { background: #fbd5d5; } }
.ci55.flk55 { animation: flk55 2.5s step-end infinite; }
html[data-theme="dark"] .ci55.flk55 { animation-name: flk54o; }
@media (prefers-reduced-motion: reduce) { .ci55.flk55 { animation: none; } }
/* Sam 09:00: each date is its own card again (as before), with the new insides */
main.vio42 .cg55 { gap: 6px; border: 0; border-radius: 0; overflow: visible; background: transparent; }
main.vio42 .cw55 { background: transparent; border-bottom: 0; padding: 2px 6px; }
main.vio42 .cd55 { border: 1px solid #a9c1e6; border-radius: 10px; }
main.vio42 .cd55:nth-child(7n) { border-right: 1px solid #a9c1e6; }
main.vio42 .cd55.now55 { border: 2px solid #1a3768; }
main.vio42 .cd55.out55 { border-color: #e5ebf5; }
html[data-theme="dark"] main.vio42 .cg55 { background: transparent; }
html[data-theme="dark"] main.vio42 .cd55, html[data-theme="dark"] main.vio42 .cd55:nth-child(7n) { border-color: var(--line); }
html[data-theme="dark"] main.vio42 .cw55 { background: transparent; }
/* Month / Week / Day (Sam 09:01) */
main.vio42 .vw56 { margin: 0 6px 0 0 !important; }
main.vio42 .cg55.wk56 .cd55 { overflow: auto; }
main.vio42 .cg55.wk56 .cn55, main.vio42 .cg55.day56 .cn55 { font-size: 13px; }
main.vio42 .cg55.day56 { display: block; min-width: 0; }
main.vio42 .cg55.day56 .cd55 { height: 100%; overflow: auto; padding: 10px 14px; }
main.vio42 .cg55.day56 .ci55 { font-size: 14.5px; padding: 6px 10px; }
main.vio42 .cg55.day56 .ci55 em { font-size: 13px; }

/* Sam 3 Nov 09:28: Next 30 days as week bands that fold (Dashboard and Calendar "30 days") */
.wk57 { display: flex; flex-direction: column; gap: 8px; }
.wb57 { border: 1px solid #a9c1e6; border-radius: 10px; background: #fff; overflow: hidden; }
.wb57 > summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; cursor: pointer; list-style: none; background: #fff; font-size: 13px; }
.wb57 > summary::-webkit-details-marker { display: none; }
.wb57 > summary::before { content: "\25B8"; color: #1a3768; font-size: 12px; transition: transform .15s; }
.wb57[open] > summary::before { transform: rotate(90deg); }
.wb57[open] > summary { border-bottom: 1px solid #c7d4e8; }
.wb57 .wh57 { color: #1a3768; font-size: 14px; }
.wb57 .sp { flex: 1; }
.wt57 { font-size: 12.5px; white-space: nowrap; } .wt57 i { display: inline-block; width: 4px; height: 12px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.wt57.h55 i { background: #b91c1c; } .wt57.c55 i { background: #d97706; } .wt57.k55 i { background: #1E40AF; } .wt57.o55 i { background: #0f766e; }
.wn57 { min-width: 26px; text-align: center; font-size: 12px; font-weight: 700; color: #fff; background: #1a3768; border-radius: 10px; padding: 1px 7px; }
.wb57 table.t { margin: 0; } .wb57 .vio46h { border: 0; }
.wk57k { display: inline-block; border-left: 3px solid; padding-left: 7px; font-weight: 600; white-space: nowrap; }
.wk57k.h55 { color: #b91c1c; }
@keyframes flk57 { 75% { background: #fbd5d5; } }
tr.flk57 > td { animation: flk57 2.5s step-end infinite; }
main.vio46d .vn57 { max-height: 560px; overflow: auto; }
main.vio42 .vc57 { overflow: auto; }
html[data-theme="dark"] .wb57, html[data-theme="dark"] .wb57 > summary { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .wb57 .wh57 { color: var(--fg); }
html[data-theme="dark"] tr.flk57 > td { animation-name: flk54o; }
@media (prefers-reduced-motion: reduce) { tr.flk57 > td { animation: none; } }

/* Font (Sam 3 Nov 10:34, in the build): Violations tables and calendar at the app's own size (14 px) */
main:is(.vio42, .vio42a) table.t { font-size: 14px; }
main:is(.vio42, .vio42a) table.t th { font-size: 13px; }
main:is(.vio42, .vio42a) table.t td .small { font-size: 13px; }
main:is(.vio42, .vio42a) table.t td .pill { font-size: 12px; }
main:is(.vio42, .vio42a) table.t tr.grp21 td { font-size: 14.5px; }
main.vio42 .ci55 { font-size: 14px; } main.vio42 .ci55 em, main.vio42 .ci55 b { font-size: 13px; }
main.vio42 .cn55 { font-size: 13px; }
.wb57 > summary { font-size: 14px; } .wb57 .wh57 { font-size: 15px; } .wt57 { font-size: 13.5px; }
/* Dashboard cards font like the single building Live cards (Sam 3 Nov 10:36): labels 12.5 px, big numbers 26 px, card lines 14 px */
main.vio46d .kpi54 .lbl { font-size: 12.5px; }
main.vio46d .kpi54 .mid { font-size: 26px; }
main.vio46d .kpi54 .small { font-size: 12.5px; }
main.vio46d .vc30 .lines > div, main.vio46d .vc30 .lines > div span, main.vio46d .vc30 .lines > div b { font-size: 14px; }
main.vio46d .vc30 .lines > div b { font-weight: 600; }
main.vio46d .vc30 .small, main.vio46d .vc30 .lbl30 { font-size: 13px; }
main.vio46d .vp30 .pr54 .pt54 { font-size: 12px; }
main.vio46d .vp30 .lbl, main.vio46d section.card .lbl { font-size: 12.5px; }
main.vio46d .mb33 .small { font-size: 11.5px; }
main.vio46d .ag33 .small { font-size: 13px; }

/* Sam 3 Nov 14:16: Next 30 days rows stand out: What as a pill, bold date / building / record title, dates today and tomorrow red + flicker */
.wb57 .wd57 { font-weight: 700; color: #111827; }
.wb57 .wd57.soon57 { color: #b91c1c; animation: flk54o 2.5s step-end infinite; }
.wb57 .wbn57 { font-weight: 600; color: #111827; }
.wb57 .wr57 { font-weight: 600; }
.wb57 .pill.wp57 { font-size: 12.5px; font-weight: 700; padding: 3px 11px; border: 1px solid transparent; }
.wb57 .pill.wp57.h55 { background: #fde2e2; color: #b91c1c; border-color: #f5b5b5; }
.wb57 .pill.wp57.c55 { background: #fef3c7; color: #92400e; border-color: #f6d58a; }
.wb57 .pill.wp57.k55 { background: #dbeafe; color: #1E40AF; border-color: #a9c1e6; }
.wb57 .pill.wp57.o55 { background: #ccfbf1; color: #0f766e; border-color: #8fd9cb; }
html[data-theme="dark"] .wb57 .wd57, html[data-theme="dark"] .wb57 .wbn57 { color: var(--fg); }
html[data-theme="dark"] .wb57 .wd57.soon57 { color: var(--crit); }
@media (prefers-reduced-motion: reduce) { .wb57 .wd57.soon57 { animation: none; } }

/* Sam 3 Nov 17:02: one date cell per day (rowspan), a strong line under the date and under the last row of each day */
.wb57 table.t td.wd57 { vertical-align: top; border-bottom: 2px solid #7FA2CF; border-right: 1px solid #e5e7eb; background: #f7faff; }
.wb57 table.t tr.le57 > td { border-bottom: 2px solid #7FA2CF; }
html[data-theme="dark"] .wb57 table.t td.wd57 { background: var(--surface2); }