/* r43 — canonical portal layer derived from the proven Toolkit shell.
   This file intentionally loads AFTER legacy shell.css. New work belongs here,
   not in another release-specific override appended to shell.css. */
:root {
  --portal-surface: color-mix(in srgb, var(--bg-panel) 88%, transparent);
  --portal-shadow: 0 18px 46px rgba(0,0,0,.22);
  --sidebar-width: 300px;
}
body { min-height:100vh; }
.sidebar {
  box-sizing:border-box;
  width:var(--sidebar-width);
  overflow:hidden;
  padding:36px 20px 24px;
}
.sidebar .brand-lockup { min-height:68px; margin-bottom:8px; }
.sidebar .kicker { min-height:18px; margin:4px 0 12px; }
.sidebar .intro { min-height:44px; margin:0 0 18px; }
.sidebar .side-nav { flex:1 1 auto; min-height:0; margin-bottom:0; overflow-y:auto; scrollbar-width:thin; }
.sidebar .side-controls { flex:none; }
.client-nav { display:flex; flex-direction:column; gap:3px; }
.client-nav a { min-height:40px; }
.client-nav svg { width:16px; height:16px; flex:none; }

/* Toolkit form model: the field belongs to the page, not to the browser skin. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select, textarea {
  background:var(--bg) !important;
  background-color:var(--bg) !important;
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  border:1px solid var(--line) !important;
  border-radius:8px !important;
  box-shadow:none !important;
  outline:none !important;
  color-scheme:dark;
}
html[data-theme="day"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="day"] select, html[data-theme="day"] textarea { color-scheme:light; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus, textarea:focus { border-color:var(--accent) !important; box-shadow:none !important; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color:var(--ink) !important;
  caret-color:var(--ink) !important;
  -webkit-box-shadow:0 0 0 1000px var(--bg) inset !important;
  box-shadow:0 0 0 1000px var(--bg) inset !important;
  border-color:var(--line) !important;
  transition:background-color 99999s ease-out 0s;
}
.login-gate .gate-card input:not([type="checkbox"]):not([type="radio"]) {
  background:var(--bg) !important; background-color:var(--bg) !important;
  color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important;
  caret-color:var(--ink) !important; border-color:var(--line) !important;
  box-shadow:none !important; -webkit-box-shadow:none !important;
}
.login-gate .gate-card input:-webkit-autofill,
.login-gate .gate-card input:-webkit-autofill:hover,
.login-gate .gate-card input:-webkit-autofill:focus,
.login-gate .gate-card input:-webkit-autofill:active {
  -webkit-text-fill-color:var(--ink) !important; caret-color:var(--ink) !important;
  -webkit-box-shadow:0 0 0 1000px var(--bg) inset !important;
  box-shadow:0 0 0 1000px var(--bg) inset !important;
  border-color:var(--line) !important;
}

/* Toolkit notification: fixed top-right, no layout shift, visible but restrained. */
.toast {
  position:fixed !important; top:22px !important; right:22px !important; left:auto !important; bottom:auto !important;
  z-index:2000; max-width:min(420px,calc(100vw - 32px)); padding:12px 15px 12px 17px;
  border:1px solid color-mix(in srgb,var(--signal) 54%,var(--line)); border-radius:10px;
  background:color-mix(in srgb,var(--signal-bg) 72%,var(--bg-panel)); color:var(--ink);
  box-shadow:var(--portal-shadow); backdrop-filter:blur(8px);
  transform:translateX(calc(100% + 36px)); opacity:0;
  transition:transform .24s ease,opacity .24s ease;
}
.toast::before { content:""; position:absolute; inset:7px auto 7px 5px; width:3px; border-radius:3px; background:var(--signal); }
.toast.show { transform:translateX(0); opacity:1; }
.toast.toast-mail { border-color:color-mix(in srgb,var(--accent) 58%,var(--line)); }
.toast.toast-mail::before { background:var(--accent); }
.toast.is-clickable { cursor:pointer; }
.toast.is-clickable:hover { border-color:var(--accent); }
.toast.is-clickable:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

.tk-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.tk-stat { padding:18px; border:1px solid var(--line); background:var(--portal-surface); border-radius:12px; }
.tk-stat strong { display:block; margin-top:7px; font-size:27px; line-height:1.15; }
.tk-stat span { color:var(--ink-faint); font:11px var(--mono); text-transform:uppercase; letter-spacing:.11em; }
.overview-stat-grid-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.overview-history h3 { margin-top:0; }
.table-scroll { overflow:auto; }

.document-list { gap:0; }
.document-item { min-height:74px; padding:14px 0; }
.document-item > div:first-child { gap:7px; }
.document-item > .row { margin-left:14px; }
.document-item .btn { min-width:86px; justify-content:center; }

.login-gate .gate-controls button.active { border-color:var(--accent); color:var(--accent) !important; background:var(--accent-soft) !important; }

html[data-theme="day"] .sidebar .kicker,
html[data-theme="day"] .tk-stat span { color:#3d4a57; }
html[data-theme="day"] .side-nav a,
html[data-theme="day"] .side-nav button,
html[data-theme="day"] .content-head p,
html[data-theme="day"] .intro { color:#334252; }

@media (max-width:900px) {
  .tk-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  :root { --sidebar-width:100%; }
  .app-shell { display:block; }
  .sidebar { position:relative; width:100%; height:auto; padding:20px 16px; border-right:0; border-bottom:1px solid var(--line); }
  .sidebar .side-nav { overflow:visible; }
  .content { padding:28px 18px 56px; }
  .tk-stat-grid, .overview-stat-grid-two { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
  .tk-stat-grid, .overview-stat-grid-two { grid-template-columns:1fr; }
  .toast { top:12px !important; right:12px !important; }
}

/* r43 — Hälli põik administrator meter workspace. */
.admin-month-bar { margin-bottom:18px; }
.admin-readings-toolbar { margin-bottom:14px; }
.admin-readings-help { display:grid; gap:10px; }
.readings-options { display:flex; flex-wrap:wrap; gap:10px 22px; }
.readings-options .tick { color:var(--ink); }
.admin-readings-card { padding:0; overflow:hidden; }
.admin-readings-table { width:100%; min-width:760px; border-collapse:collapse; }
.admin-readings-table th,
.admin-readings-table td { padding:13px 16px; vertical-align:middle; }
.admin-readings-table thead th { color:var(--ink-faint); font:11px var(--mono); text-transform:uppercase; letter-spacing:.1em; border-bottom:1px solid var(--line); }
.admin-readings-table tbody tr + tr td { border-top:1px solid var(--line); }
.admin-readings-table td:first-child { min-width:190px; }
.admin-readings-table .meter-code { margin-top:4px; color:var(--ink-faint); font:10.5px var(--mono); letter-spacing:.05em; }
.meter-reading-input { width:132px !important; min-width:110px; font-family:var(--mono); }
.meter-reading-input[readonly] { cursor:default; color:var(--ink-dim); background:var(--bg) !important; }
.meter-reading-input.is-auto { border-style:dashed; }
.opening-cell { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.opening-auto-source { color:var(--accent); font:10px var(--mono); letter-spacing:.02em; white-space:nowrap; }
.meter-reading-input.is-missing { border-color:var(--signal) !important; }
.meter-usage { min-width:90px; font-family:var(--mono); font-weight:650; }
.meter-usage.is-bad { color:var(--danger); }
.meter-source { min-width:150px; color:var(--ink-dim); font-size:12px; }
.meter-source small { color:var(--ink-faint); }
.admin-readings-actions { justify-content:flex-end; padding:14px 16px 16px; border-top:1px solid var(--line); }

@media (max-width:700px) {
  .admin-month-bar .spacer { flex-basis:100%; height:0; }
  .readings-options { display:grid; gap:8px; }
  .admin-readings-actions { justify-content:stretch; }
  .admin-readings-actions .btn { width:100%; justify-content:center; }
}

/* r43 — monthly workflow is a real layout, not unstyled inline content. */
.period-workspace {
  margin: 0 0 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--portal-surface);
  overflow: hidden;
}
.workflow-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-panel) 72%, transparent);
}
.workflow-step {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-areas:
    "no title"
    "no hint";
  column-gap: 10px;
  row-gap: 3px;
  align-content: center;
  min-width: 0;
  min-height: 72px;
  padding: 12px 16px;
  color: var(--ink-dim);
  background: transparent;
}
.workflow-step + .workflow-step { border-left: 1px solid var(--line); }
.workflow-step::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: transparent;
}
.workflow-step .step-no {
  grid-area: no;
  align-self: center;
  color: var(--ink-faint);
  font: 650 11px/1 var(--mono);
  letter-spacing: .08em;
}
.workflow-step strong {
  grid-area: title;
  display: block;
  min-width: 0;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.25;
}
.workflow-step small {
  grid-area: hint;
  display: block;
  min-width: 0;
  color: var(--ink-faint);
  font-size: 11.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.workflow-step.is-active {
  background: var(--accent-soft);
}
.workflow-step.is-active::after { background: var(--accent); }
.workflow-step.is-active .step-no,
.workflow-step.is-active strong { color: var(--accent); }
.workflow-step.is-done .step-no { color: var(--good); }
.workflow-step.is-done::after { background: color-mix(in srgb, var(--good) 58%, transparent); }
.workflow-body { padding: 16px; }
.workflow-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.workflow-head h3 { margin: 0 0 5px; font-size: 15px; line-height: 1.3; }
.workflow-head p { margin: 0; color: var(--ink-dim); font-size: 13px; line-height: 1.45; }
.workflow-kpis {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  flex: none;
}
.workflow-kpi {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-dim);
  background: var(--bg);
  font-size: 11.5px;
  white-space: nowrap;
}
.workflow-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.workflow-hint {
  min-width: 0;
  color: var(--ink-dim);
  font-size: 12.5px;
  line-height: 1.4;
}
.workflow-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  flex: none;
}
.workflow-buttons .btn { white-space: nowrap; }

@media (max-width: 900px) {
  .workflow-step { padding: 11px 12px; grid-template-columns: 28px minmax(0,1fr); }
  .workflow-step small { font-size: 11px; }
  .workflow-head, .workflow-actions { align-items: stretch; flex-direction: column; }
  .workflow-kpis, .workflow-buttons { justify-content: flex-start; }
}
@media (max-width: 620px) {
  .workflow-steps { grid-template-columns: 1fr; }
  .workflow-step { min-height: 62px; }
  .workflow-step + .workflow-step { border-left: 0; border-top: 1px solid var(--line); }
  .workflow-buttons { display: grid; grid-template-columns: 1fr; }
  .workflow-buttons .btn { width: 100%; justify-content: center; }
}

/* r44 — one calendar slider for HP periods. No second month dropdown. */
.unified-month-bar {
  display:flex;
  align-items:center;
  gap:10px;
}
.unified-month-bar .month-label {
  min-width:150px;
  text-align:center;
  font-weight:700;
}
.unified-month-bar [data-month-action] {
  min-width:104px;
  justify-content:center;
}
.unified-month-bar [data-month-action]:disabled {
  opacity:.62;
}
@media (max-width:700px) {
  .unified-month-bar { flex-wrap:wrap; }
  .unified-month-bar .spacer { display:none; }
  .unified-month-bar [data-month-action] { margin-left:auto; }
}

/* r46 — quieter meter-reading controls and visually grouped registers. */
.readings-options {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 12px;
}
.reading-toggle {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:transparent;
  color:var(--ink-dim);
  font-size:12.5px;
  line-height:1;
  cursor:pointer;
  user-select:none;
  transition:border-color .16s ease, background .16s ease, color .16s ease;
}
.reading-toggle:hover { border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); color:var(--ink); }
.reading-toggle input {
  position:absolute;
  inline-size:1px;
  block-size:1px;
  opacity:0;
  pointer-events:none;
}
.reading-toggle-mark {
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border-radius:5px;
  background:color-mix(in srgb,var(--bg-panel) 72%,transparent);
  color:var(--ink-faint);
  font:700 12px/1 var(--mono);
}
.reading-toggle:has(input:checked) {
  border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
  background:var(--accent-soft);
  color:var(--accent);
}
.reading-toggle:has(input:checked) .reading-toggle-mark { color:var(--accent); }
.reading-toggle:has(input:focus-visible) { outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent); outline-offset:2px; }
.reading-toggle:has(input:disabled) { opacity:.48; cursor:not-allowed; }

.admin-readings-table .meter-group-row td {
  padding:9px 16px 7px;
  border-top:1px solid var(--line);
  border-bottom:1px solid color-mix(in srgb,var(--line) 68%,transparent);
  background:color-mix(in srgb,var(--bg-panel) 56%,transparent);
  color:var(--ink-faint);
  font:700 10.5px/1.2 var(--mono);
  text-transform:uppercase;
  letter-spacing:.12em;
}
.admin-readings-table tbody .meter-group-row:first-child td { border-top:0; }
.admin-readings-table .meter-group-row + tr td { border-top:0; }
.admin-readings-table .meter-group-row:not(:first-child) td { padding-top:12px; }

.admin-readings-footnote {
  display:flex;
  flex-wrap:wrap;
  gap:5px 18px;
  margin:10px 2px 0;
  max-width:980px;
  color:var(--ink-faint);
  font-size:11.5px;
  line-height:1.45;
}
.admin-readings-footnote span + span::before {
  content:"•";
  margin-right:8px;
  color:var(--line);
}

@media (max-width:700px) {
  .reading-toggle { flex:1 1 auto; justify-content:center; }
  .admin-readings-footnote { display:block; }
  .admin-readings-footnote span { display:block; margin-top:5px; }
  .admin-readings-footnote span + span::before { content:""; margin:0; }
}

/* r46 — monthly tariff workspace and calculated-invoice archive */
.section-heading-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.monthly-settings-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin:18px 0;padding-top:16px;border-top:1px solid var(--line)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.compact-grid .field{margin:0}
.tariff-global-settings{margin-top:18px;max-width:720px}
.tariff-global-settings .btn{margin-top:12px}
.invoice-archive-list .invoice-archive-row{gap:14px}
.invoice-archive-row strong{font:700 14px var(--mono);white-space:nowrap}
.invoice-detail-card{margin-top:16px}
.invoice-detail-card .flat-head{margin-bottom:10px}
@media(max-width:760px){
  .monthly-settings-split,.grid3{grid-template-columns:1fr}
  .invoice-archive-row{align-items:flex-start;flex-wrap:wrap}
  .invoice-archive-row .btn{margin-left:auto}
}


/* r50 — admin overview typography and portal branding. */
.sidebar-home-brand .brand-copy strong,
.admin-dashboard-title {
  font-family: var(--mono);
}

.admin-overview-cards .dashboard-property-name {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  color: #fff;
}

.admin-overview-cards .dashboard-property-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}

.admin-overview-cards .dashboard-property-month {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--ink-dim);
}

.admin-overview-cards .dashboard-property-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 8px 0;
}

html[data-theme="day"] .admin-overview-cards .dashboard-property-name {
  color: #000;
}

/* r52 — tabbed admin portfolio overview + two-year charts */
.property-summary-tabs {
  /* inline-flex, not flex: the strip is as wide as its labels instead of
     stretching to the full column. */
  display:inline-flex;
  max-width:100%;
  gap:6px;
  padding:4px;
  margin:0 0 18px;
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:12px;
  overflow-x:auto;
}
.property-summary-tabs button {
  appearance:none;
  border:0;
  background:transparent;
  color:var(--ink-dim);
  border-radius:9px;
  padding:10px 14px;
  font:650 14px var(--sans);
  white-space:nowrap;
  cursor:pointer;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.property-summary-tabs button:hover { color:var(--ink); background:var(--bg-card); }
.property-summary-tabs button.active,
.property-summary-tabs button[aria-selected="true"] {
  color:var(--ink);
  background:var(--bg-card);
  box-shadow:inset 0 0 0 1px var(--line);
}
.dashboard-summary-strip {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:16px;
}
.dashboard-summary-stat {
  min-height:82px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--bg-card);
}
.dashboard-summary-stat .label {
  display:block;
  color:var(--ink-dim);
  font-size:12px;
  margin-bottom:7px;
}
.dashboard-summary-stat strong {
  display:block;
  color:var(--ink);
  font:650 15px var(--mono);
  overflow-wrap:anywhere;
}
.dashboard-actions { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.dashboard-chart-card { padding:18px 18px 15px; }
.dashboard-chart-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:12px; }
.dashboard-chart-head h3 { margin:0 0 3px; font-size:15px; }
.dashboard-chart-head p { margin:0; color:var(--ink-dim); font-size:12.5px; }
.dashboard-chart-scroll { overflow-x:auto; padding-bottom:2px; }
.dashboard-chart {
  display:block;
  width:100%;
  min-width:820px;
  height:auto;
}
.dashboard-chart .grid-line { stroke:var(--line); stroke-width:1; }
.dashboard-chart .axis-line { stroke:var(--line); stroke-width:1.2; }
.dashboard-chart .axis-text { fill:var(--ink-dim); font:10.5px var(--mono); }
.dashboard-chart .month-text { fill:var(--ink-dim); font:10.5px var(--sans); }
.dashboard-chart .axis-title { fill:var(--ink-faint); font:10px var(--mono); letter-spacing:.05em; }
.dashboard-chart .bar-water { fill:var(--signal); opacity:.9; }
.dashboard-chart .bar-electricity { fill:var(--accent); }
.dashboard-chart .bar-heating { fill:var(--good); opacity:.9; }
.dashboard-chart .bar-empty { fill:var(--line); opacity:.7; }
.dashboard-chart .bar-utilities { fill:var(--signal); opacity:.88; }
.dashboard-chart .series-water { fill:none; stroke:var(--signal); stroke-width:2.2; }
.dashboard-chart .series-electricity { fill:none; stroke:var(--accent); stroke-width:2.2; }
.dashboard-chart .series-heating { fill:none; stroke:var(--good); stroke-width:2.2; }
.dashboard-chart .point-water { fill:var(--signal); }
.dashboard-chart .point-electricity { fill:var(--accent); }
.dashboard-chart .point-heating { fill:var(--good); }
.dashboard-chart-legend {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:10px;
  color:var(--ink-dim);
  font-size:12px;
}
.dashboard-chart-legend span { display:inline-flex; align-items:center; gap:6px; }
.dashboard-chart-legend i { width:10px; height:10px; border-radius:50%; display:inline-block; }
.dashboard-chart-legend .water { background:var(--signal); border-radius:3px; }
.dashboard-chart-legend .electricity { background:var(--accent); border-radius:3px; }
.dashboard-chart-legend .heating { background:var(--good); border-radius:3px; }
.dashboard-chart-legend .utilities { background:var(--signal); border-radius:3px; }
.dashboard-chart-legend .electricity.bar { background:var(--accent); border-radius:3px; }
.hp-apartment-charts { display:grid; grid-template-columns:1fr; gap:14px; }
.dashboard-chart-note { margin-top:8px; color:var(--ink-faint); font-size:11.5px; }
.dashboard-empty-chart { padding:28px 16px; text-align:center; color:var(--ink-dim); }
@media (max-width:900px) {
  .dashboard-summary-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px) {
  .dashboard-summary-strip { grid-template-columns:1fr 1fr; }
  .property-summary-tabs button { padding:9px 11px; font-size:13px; }
}

/* r54 — multi-issuer billing, Toolkit-style card popup and date picker. */
.issuer-settings-card { overflow:visible; }
.issuer-settings-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:16px; }
.issuer-tabs { display:flex; gap:5px; padding:4px; border:1px solid var(--line); background:var(--bg); border-radius:10px; max-width:100%; }
.issuer-tab { appearance:none; border:0; background:transparent; color:var(--ink-dim); padding:8px 12px; border-radius:7px; font:600 12px var(--sans); cursor:pointer; white-space:nowrap; max-width:190px; overflow:hidden; text-overflow:ellipsis; }
.issuer-tab:hover { color:var(--ink); background:var(--bg-card); }
.issuer-tab.active { color:var(--ink); background:var(--bg-card); box-shadow:inset 0 0 0 1px var(--line); }
.issuer-profile-form { margin-bottom:14px; }
.issuer-account-label { font-size:12.5px; color:var(--ink); }

.invoice-issuer-row { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; padding:10px 0 12px; border-bottom:1px solid var(--line); }
.invoice-issuer-row > div:first-child { display:flex; flex-direction:column; gap:4px; min-width:0; }
.invoice-issuer-row small { color:var(--ink-dim); font-size:11.5px; overflow-wrap:anywhere; }
.invoice-issuer-row .warn-text { color:var(--signal); }
.issue-issuer-select { width:auto; min-width:180px; max-width:260px; }
.issued-issuer { display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0; }
.issued-issuer strong { font-size:12.5px; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Toolkit vacation calendar, ported verbatim in behaviour: custom DD/MM/YYYY
   field + fixed popup so browser locale and scrolling containers cannot alter it. */
.dp-wrap { position:relative; display:inline-block; max-width:100%; }
.dp-input { font-family:var(--sans); font-size:13px; padding:7px 10px !important; width:122px; cursor:pointer; }
.dp-popup { display:none; position:fixed; z-index:2300; background:var(--bg-panel); border:1px solid var(--line); border-radius:10px; padding:10px; width:220px; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.dp-popup.show { display:block; }
.dp-popup .dp-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.dp-popup .dp-nav button { all:unset; cursor:pointer; padding:3px 7px; border-radius:6px; color:var(--ink-dim); font-size:13px; }
.dp-popup .dp-nav button:hover { background:var(--accent-soft); color:var(--accent); }
.dp-popup .dp-nav .dp-label { font-size:12.5px; font-weight:600; color:var(--ink); }
.dp-popup .dp-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.dp-popup .dp-dow { font-family:var(--mono); font-size:9px; text-transform:uppercase; color:var(--ink-faint); text-align:center; padding:2px 0; }
.dp-popup .dp-day { all:unset; box-sizing:border-box; cursor:pointer; text-align:center; font-size:12px; padding:5px 0; border-radius:5px; color:var(--ink); }
.dp-popup .dp-day:hover { background:var(--accent-soft); color:var(--accent); }
.dp-popup .dp-day.dp-out { color:var(--ink-faint); opacity:.4; cursor:default; }
.dp-popup .dp-day.dp-selected { background:var(--accent); color:#0d1013; font-weight:700; }

/* Toolkit business-card popup geometry, adapted to tenant billing fields. */
.card-modal-overlay { position:fixed; inset:0; z-index:2200; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(3,8,14,.68); opacity:0; pointer-events:none; transition:opacity .16s ease; }
.card-modal-overlay.show { opacity:1; pointer-events:auto; }
.card-modal { width:min(620px,94vw); max-height:min(88vh,760px); overflow:auto; text-align:left; padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--bg-panel); box-shadow:0 24px 70px rgba(0,0,0,.42); }
.card-modal-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:14px; }
.card-modal-head h3 { margin:4px 0 0; font-size:17px; }
.card-modal-close { width:34px; min-width:34px; height:34px; padding:0 !important; font-size:19px !important; }
.card-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
.card-grid .span-2 { grid-column:1 / -1; }
.card-grid input:disabled { opacity:.72; cursor:not-allowed; }
.card-user-note { margin:11px 0 0; color:var(--ink-faint); font-size:11.5px; }
.card-modal-actions { display:flex; align-items:center; justify-content:flex-end; gap:9px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }

@media (max-width:700px) {
  .issuer-settings-head { flex-direction:column; }
  .issuer-tabs { width:100%; overflow-x:auto; }
  .issuer-tab { flex:1 1 0; max-width:none; }
  .invoice-issuer-row { align-items:flex-start; flex-direction:column; }
  .issue-issuer-select { width:100%; max-width:none; }
  .issued-issuer { width:100%; justify-content:space-between; }
  .card-modal-overlay { align-items:flex-start; padding:12px; }
  .card-modal { width:100%; max-height:calc(100vh - 24px); }
}
@media (max-width:540px) {
  .card-grid { grid-template-columns:1fr; }
  .card-grid .span-2 { grid-column:auto; }
}

/* r54 — frozen invoice issuer / PDF actions */
.invoice-detail-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin:10px 0 14px;color:var(--ink-dim);font-size:12.5px}
.invoice-detail-meta .btn{margin-left:auto}
@media (max-width:640px){.invoice-detail-meta .btn{margin-left:0}.invoice-archive-row{flex-wrap:wrap}}
.account-issuer-select{min-width:118px;max-width:150px}

/* r59 — two documents per flat and month: utilities and rent, issued apart */
.invoice-docs { margin-top:16px; border-top:1px solid var(--line); }
.invoice-doc-row { display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--line-soft); }
.invoice-doc-row:last-child { border-bottom:0; }
.invoice-doc-row .doc-label { display:flex; flex-direction:column; gap:3px; min-width:0; }
.invoice-doc-row .doc-label strong { font-size:13px; }
.invoice-doc-row .doc-label small { color:var(--ink-dim); font-size:12px; font-family:var(--mono); }
.invoice-doc-row .doc-actions { display:flex; align-items:center; gap:8px; flex:none; }
.invoice-archive-row .kind-tag { flex:none; }
@media (max-width:640px) {
  .invoice-doc-row { align-items:flex-start; flex-direction:column; gap:8px; }
  .invoice-doc-row .doc-actions { width:100%; justify-content:flex-end; }
}

/* r60 — separate/combined switch and annulled documents */
.invoice-mode-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0 11px; }
.mode-switch { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; flex:none; }
.mode-switch button { all:unset; box-sizing:border-box; cursor:pointer; padding:6px 12px;
  font:600 12px var(--sans); color:var(--ink-dim); text-align:center; }
.mode-switch button:hover { color:var(--ink); }
.mode-switch button.is-on { background:var(--accent-soft); color:var(--accent); }
.doc-note { padding:8px 0 2px; color:var(--ink-dim); font-size:12px; }
.voided-list { margin-top:12px; padding-top:11px; border-top:1px solid var(--line); }
.voided-row { display:flex; align-items:center; gap:9px; padding:7px 0; min-width:0; }
.voided-row .voided-kind { font-size:12px; color:var(--ink-dim); flex:none; }
.voided-row .voided-reason { flex:1; min-width:0; font-size:12px; color:var(--ink-faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tag.void { background:var(--signal-bg); color:var(--signal); text-decoration:line-through; }
.invoice-archive-row.is-void .fname, .invoice-archive-row.is-void strong { text-decoration:line-through; opacity:.62; }
@media (max-width:640px) {
  .invoice-mode-row { flex-direction:column; align-items:flex-start; }
  .mode-switch { width:100%; }
  .mode-switch button { flex:1; }
  .voided-row { flex-wrap:wrap; }
  .voided-row .voided-reason { flex-basis:100%; }
}

/* r61 — delivery state on the document rows */
.sent-mark { font:500 11.5px var(--mono); color:var(--good); white-space:nowrap; }
#mailLog .file-row { gap:10px; }
#mailLog .fnote { font-size:11.5px; }

/* r62 — settings sub-tabs, build badge, audit pager */
.settings-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.build-badge { display:inline-flex; align-items:center; gap:8px; flex:none;
  padding:7px 14px; border:1px solid var(--line); border-radius:999px;
  background:var(--bg-card); font:500 12px var(--mono); color:var(--ink-dim); }
.build-badge .build-dot { width:7px; height:7px; border-radius:50%; background:var(--good); flex:none; }
.build-badge .build-channel { color:var(--ink); letter-spacing:.06em; }
.build-badge .build-sep { opacity:.45; }
.build-badge.is-test .build-dot { background:var(--signal); }
.build-badge.is-test .build-channel { color:var(--signal); }

.sub-tabs { display:flex; gap:4px; padding:4px; margin-bottom:18px; overflow-x:auto;
  border:1px solid var(--line); background:var(--bg); border-radius:10px; }
.sub-tabs button { appearance:none; border:0; background:transparent; color:var(--ink-dim);
  padding:8px 14px; border-radius:7px; font:600 12.5px var(--sans); cursor:pointer; white-space:nowrap; }
.sub-tabs button:hover { color:var(--ink); }
.sub-tabs button.active { color:var(--ink); background:var(--bg-card); box-shadow:inset 0 0 0 1px var(--line); }

/* The details column holds arbitrary JSON, so it is the column that has to
   give way — the table is capped at the card and the text is clipped. */
.audit-scroll { overflow-x:auto; }
.audit-table { width:100%; table-layout:fixed; }
.audit-table td { vertical-align:top; }
.audit-table .audit-when { width:88px; font:12px var(--mono); color:var(--ink-dim); white-space:nowrap; }
.audit-table .audit-who { width:110px; font:12.5px var(--mono); }
.audit-table .audit-action { width:190px; font:12px var(--mono); word-break:break-word; }
.audit-table .audit-details { font:11.5px var(--mono); color:var(--ink-dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:0; }

.pager { display:flex; align-items:center; justify-content:center; gap:5px;
  flex-wrap:wrap; padding:14px 0 2px; }
.pager button { appearance:none; cursor:pointer; min-width:32px; height:31px; padding:0 9px;
  border:1px solid var(--line); border-radius:8px; background:transparent;
  color:var(--ink-dim); font:500 12px var(--mono); }
.pager button:hover:not(:disabled) { color:var(--ink); border-color:var(--ink-faint); }
.pager button:disabled { opacity:.35; cursor:default; }
.pager .pager-num.is-on { background:var(--accent); border-color:var(--accent); color:#fff; }
.pager .pager-gap { color:var(--ink-faint); padding:0 2px; font:12px var(--mono); }

@media (max-width:640px) {
  .audit-table .audit-when { width:70px; }
  .audit-table .audit-who { width:80px; }
  .audit-table .audit-action { width:130px; }
}

/* The month total is the figure the reader is looking for, so it carries the
   accent here as it already does on the invoices page. */
.dashboard-summary-stat.is-total strong { color:var(--accent); }

/* r62 — the upload form fits on one line instead of running down the page */
.upload-grid { display:grid; gap:12px; align-items:end;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); margin-top:14px; }
.upload-grid .field { margin:0; min-width:0; }
.upload-grid input[type="file"] { font-size:12.5px; }
/* A grid item fills its cell by default, which is why this button was
   several times the width of every other button in the portal. It is
   sized by its own label, like Save in the accounts table. */
.upload-grid button[type="submit"] { justify-self:start; }
.month-step { display:flex; align-items:center; gap:4px;
  border:1px solid var(--line); border-radius:9px; background:var(--bg); padding:3px; }
.month-step button { appearance:none; cursor:pointer; flex:none; width:28px; height:30px;
  border:0; border-radius:7px; background:transparent; color:var(--ink-dim); font-size:13px; }
.month-step button:hover:not(:disabled) { color:var(--ink); background:var(--bg-card); }
.month-step button:disabled { opacity:.3; cursor:default; }
.month-step-label { flex:1; text-align:center; font:600 12.5px var(--mono); color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:560px) { .upload-grid { grid-template-columns:1fr; } }

/* r62 — the file picker, which the browser otherwise draws in its own style */
input[type="file"] {
  width:100%; box-sizing:border-box; cursor:pointer;
  padding:5px; border:1px solid var(--line); border-radius:9px;
  background:var(--bg); color:var(--ink-dim);
  font:12.5px var(--sans);
}
input[type="file"]::file-selector-button {
  cursor:pointer; margin-right:9px;
  padding:6px 12px; border:1px solid var(--line); border-radius:7px;
  background:var(--bg-card); color:var(--ink);
  font:600 12.5px var(--sans);
}
input[type="file"]::file-selector-button:hover { border-color:var(--accent); color:var(--accent); }
input[type="file"]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }


/* r63 / 2026.08.13.01 — Mail transport selector (Toolkit-inspired) */
.mail-settings-card .mail-transport-row{
  display:flex;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
  margin:0 0 16px;
}
.mail-settings-card .mail-transport-select{
  min-width:240px;
  max-width:360px;
  flex:0 1 320px;
}
.mail-settings-card .mail-transport-note{
  flex:1 1 320px;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.45;
  padding:0 0 10px;
}
.mail-settings-card .mail-transport-fields{
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-top:4px;
}
.mail-settings-card .mail-transport-fields.hidden{ display:none !important; }
.mail-settings-card .grid2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.mail-settings-card .mail-mode-notice{
  margin-top:14px;
  font-size:12.5px;
  opacity:.86;
}
.mail-settings-card .mail-actions-row{
  gap:10px;
  flex-wrap:wrap;
}
@media (max-width:760px){
  .mail-settings-card .grid2{ grid-template-columns:1fr; }
  .mail-settings-card .mail-transport-select{ max-width:none; flex-basis:100%; }
  .mail-settings-card .mail-transport-note{ flex-basis:100%; padding-bottom:0; }
}

/* r64 / 2026.08.13.04 — portal mailbox */
.mailbox-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.mailbox-toolbar h3{margin:0 0 5px}.mailbox-toolbar p{margin:0}
.mailbox-list{display:flex;flex-direction:column;gap:7px}
.mailbox-row{width:100%;appearance:none;text-align:left;cursor:pointer;color:var(--ink);font:inherit;border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:11px 12px;display:flex;align-items:center;gap:10px}
.mailbox-row:hover{border-color:var(--ink-faint);background:var(--bg-card)}
.mailbox-row.unread{border-color:color-mix(in srgb,var(--accent) 42%,var(--line));background:var(--accent-soft)}
.mail-unread-dot{width:7px;height:7px;border-radius:50%;background:transparent;flex:none}
.mailbox-row.unread .mail-unread-dot{background:var(--accent)}
.mailbox-row-main{min-width:0;flex:1}.mailbox-row-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mailbox-row-head .fname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mailbox-row-head time{color:var(--ink-faint);font:11px var(--mono);white-space:nowrap}
.mailbox-row-subject{margin-top:3px;font-size:13px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mailbox-row .fnote{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-clip{flex:none;color:var(--ink-dim);font-size:11.5px}
.mail-imap-settings{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}.mail-imap-settings h3{margin:0 0 14px;font-size:15px}
.mail-compose-modal,.mail-message-modal{width:min(760px,94vw)}.mail-compose-fields{display:grid;gap:12px}
.mail-compose-fields textarea{font-family:var(--sans);font-size:13px;line-height:1.55;resize:vertical}
.mail-message-meta{display:grid;gap:4px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink-dim);font-size:12px;overflow-wrap:anywhere}
.mail-message-details-toggle{margin-top:12px;color:var(--ink-dim);font-size:12.5px}
.mail-message-body{min-height:130px;margin-top:14px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;font-size:13.5px}
.mail-message-attachments{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.mail-message-attachments:empty{display:none}
.mail-message-attachments a{text-decoration:none}.mail-message-attachments small{opacity:.7}
.mail-trash-hint{margin:7px 0 0;padding-top:7px;max-width:560px}
.mail-message-modal .card-modal-actions .btn.danger{margin-right:auto}
@media (max-width:640px){
  .mailbox-toolbar{flex-direction:column}.mailbox-toolbar .row,.mailbox-toolbar>.btn{width:100%}.mailbox-toolbar .row .btn,.mailbox-toolbar>.btn{flex:1}
  .mailbox-row-head{align-items:flex-start;flex-direction:column;gap:3px}.mailbox-row-head time{white-space:normal}
}