/* /Layout/MainLayout.razor.rz.scp.css */
/* Dropped, we use Bootstrap utilities directly in the HTML */
/* /Layout/NavMenu.razor.rz.scp.css */
.nav-link[b-lollnzgh8k] {
    color: #b0c4de !important;
    font-weight: 500;
}

.nav-link:hover[b-lollnzgh8k] {
    color: white !important;
}

.nav-link.active[b-lollnzgh8k] {
    background-color: #0066ff;
    color: white !important;
    border-radius: 4px;
}
/* /Pages/DataBoxMessages.razor.rz.scp.css */

/* The .header-section rule is gone with its row (title + progress bar + refresh button,
   removed 2026-08-30): the blocks above the table were taking about a third of the page
   before the accountant saw a single message. */


.filter-value[b-viadnvqdsc] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--k-text-2);
}

.dot[b-viadnvqdsc] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.bg-orange[b-viadnvqdsc] { background-color: var(--k-prio-high); }
.bg-yellow[b-viadnvqdsc] { background-color: var(--k-prio-warning); }
.bg-gray[b-viadnvqdsc] { background-color: var(--k-border-2); }

.legend-bar[b-viadnvqdsc] {
    background-color: var(--k-surface-2);
    border: 1px solid var(--k-border);
    border-radius: 8px;
    padding: 12px 20px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.search-input-wrapper[b-viadnvqdsc] {
    position: relative;
    width: 100%;
}

.search-input[b-viadnvqdsc] {
    width: 100%;
    border: 1px solid var(--k-border);
    border-radius: 6px;
    padding: 6px 30px 6px 12px;
    font-size: 0.85rem;
    color: var(--k-text-3);
    outline: none;
}

.search-input[b-viadnvqdsc]::placeholder {
    color: var(--k-text-faint);
}

.search-icon[b-viadnvqdsc] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--k-text-faint);
    font-size: 0.85rem;
}


/* Tabulka */
.messages-table[b-viadnvqdsc] {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--k-surface);
    border-radius: 8px;
    border: 1px solid var(--k-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.messages-table[b-viadnvqdsc] {
    width: 100%;
    border-collapse: collapse;
    /* Column widths come from the colgroup in the markup. Fixed layout is what
       makes the ellipsis on .cell-clip work at all, and it keeps the columns
       from resizing as the page is filtered. */
    table-layout: fixed;
}

.messages-table th[b-viadnvqdsc] {
    background-color: var(--k-surface-2);
    /* 8px horizontal, down from 12. Together with the td padding below this sets the air
       between columns: 16px of pure padding between neighbouring contents. */
    padding: 9px 8px;
    text-align: left;
    color: var(--k-text-4);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
    border-bottom: 1px solid var(--k-border);
}

.messages-table th:first-child[b-viadnvqdsc] {
    border-top-left-radius: 8px;
}

.messages-table th:last-child[b-viadnvqdsc] {
    border-top-right-radius: 8px;
}

.messages-table td[b-viadnvqdsc] {
    /* 2px, down from the original 8. With every row two lines tall, the padding and the line height
       were the whole difference between a comfortable row and a wasteful one - together they fit
       roughly six more rows on a screen. The row border still separates them clearly. */
    padding: 2px 8px;
    border-bottom: 1px solid var(--k-border);
    vertical-align: middle;
    line-height: 1.3;
}

/* The second line of a cell - sender ID, subject ID, time, date under the badge. Tighter than the
   Bootstrap default of 1.5; 1.15 still leaves room for the carons above capitals. */
.messages-table td .small[b-viadnvqdsc] {
    line-height: 1.15;
}

/* One line, cut with an ellipsis instead of wrapping. Long authority names used
   to push a row to three or four lines, so row heights varied and the eye had
   nothing to follow down the list. The full text stays reachable through the
   title tooltip and the message detail.

   Needs table-layout: fixed above — in an auto-layout table the column simply
   widens to fit the content and the ellipsis never triggers. */
.messages-table .cell-clip[b-viadnvqdsc] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The subject is the one cell that wraps instead of clipping: the accountant must
   always see the whole subject, in the compact rows too (request of 2026-08-30).
   A short subject stays on one line, a long one takes a second. overflow-wrap
   covers tokens longer than the column, e.g. case numbers like
   "3026/20-250-vyr.insolvence,249-Usnesení". */
.messages-table .cell-wrap[b-viadnvqdsc] {
    white-space: normal;
    overflow-wrap: anywhere;
}

.messages-table tbody tr[b-viadnvqdsc] {
    background-color: var(--k-surface);
}

.priority-cell[b-viadnvqdsc] {
    border-left: 5px solid transparent;
    /* The cell holds a lone centered icon, so it does not need the common 8px air on
       both sides — 4px keeps the importance column as narrow as possible. */
    padding-left: 4px;
    padding-right: 4px;
}

/* Header of the importance column: same tightening as .priority-cell, so the header
   trio (sort caret + funnel) fits the narrow column without spilling into ODESÍLATEL. */
.messages-table th.priority-head[b-viadnvqdsc] {
    padding-left: 4px;
    padding-right: 4px;
}

/* The right-hand block — Doručeno, Termín odpovědi, Stav and the action icons (columns 6-9).
   They hold a date, badges and icons, never running text, so they keep legible boundaries
   even with half the common 8px air; the width saved goes to the subject column. */
.messages-table th:nth-child(n+6)[b-viadnvqdsc],
.messages-table td:nth-child(n+6)[b-viadnvqdsc] {
    padding-left: 4px;
    padding-right: 4px;
}


.row-critical .priority-cell[b-viadnvqdsc] { border-left-color: var(--k-prio-critical) !important; }
.row-high .priority-cell[b-viadnvqdsc] { border-left-color: var(--k-prio-high) !important; }
.row-warning .priority-cell[b-viadnvqdsc] { border-left-color: var(--k-prio-warning) !important; }
.row-info .priority-cell[b-viadnvqdsc] { border-left-color: var(--k-border-2) !important; }
.row-resolved .priority-cell[b-viadnvqdsc] { border-left-color: var(--k-prio-resolved) !important; }

.text-orange[b-viadnvqdsc] { color: var(--k-prio-high); }
/* Bootstrap has no purple text utility; the "Čeká na odpověď" filter label referenced one
   that was defined nowhere. Same shade as .badge-outline-purple. */
.text-purple[b-viadnvqdsc] { color: var(--k-purple); }

.badge[b-viadnvqdsc] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.badge-danger[b-viadnvqdsc] { background-color: var(--k-badge-danger-bg); color: var(--k-prio-critical); border-color: var(--k-badge-danger-border); }
.badge-warning[b-viadnvqdsc] { background-color: var(--k-badge-warning-bg); color: var(--k-badge-warning-text); border-color: var(--k-badge-warning-border); }
.badge-primary[b-viadnvqdsc] { background-color: var(--k-primary-soft-bg); color: var(--k-primary-light); border-color: var(--k-primary-soft-border); }
.badge-neutral[b-viadnvqdsc] { background-color: var(--k-surface-2); color: var(--k-text-muted); border-color: var(--k-border-2); }

.badge-outline-purple[b-viadnvqdsc] { background-color: var(--k-surface); color: var(--k-purple); border: 1px solid var(--k-purple-border); }
.badge-outline-green[b-viadnvqdsc] { background-color: var(--k-surface); color: var(--k-prio-resolved); border: 1px solid var(--k-tile-green-border); }
.badge-outline-gray[b-viadnvqdsc] { background-color: var(--k-surface); color: var(--k-text-muted); border: 1px solid var(--k-border-2); }
.badge-outline-info[b-viadnvqdsc] { background-color: var(--k-surface); color: var(--k-info); border: 1px solid var(--k-info-border); }
/* State RepliedMissingReceipt (6). Scoped CSS is per component, so the definition in
   DataBoxSettings.razor.css does not reach here and has to be repeated. */
.badge-outline-yellow[b-viadnvqdsc] { background-color: var(--k-surface); color: var(--k-badge-warning-text); border: 1px solid var(--k-badge-warning-border); }

.action-icon:hover[b-viadnvqdsc] {
    color: var(--k-text-2) !important;
}

.row-resolved[b-viadnvqdsc] { background-color: var(--k-resolved-row-bg) !important; }
.row-resolved:hover[b-viadnvqdsc] { background-color: var(--k-resolved-row-hover) !important; }

/* Archive tile and banner (5. 9. 2026). One teal for both, chosen because nothing else in the
   application uses it: red is PO TERMÍNU and the top importance, slate is VYŽADUJE KONTROLU,
   purple is NEODPOVĚZENÉ. The open state has to say "a different world", not "a problem". */
.archive-tile[b-viadnvqdsc] {
    background-color: var(--k-surface-3);
    border-color: var(--k-tile-gray-border) !important;
    color: var(--k-text-muted);
}

.archive-tile:hover[b-viadnvqdsc] {
    background-color: var(--k-surface-4);
}

.archive-tile-open[b-viadnvqdsc] {
    background-color: var(--k-archive);
    border-color: var(--k-archive-hover) !important;
    color: var(--k-on-accent);
}

.archive-tile-open:hover[b-viadnvqdsc] {
    background-color: var(--k-archive-hover);
}

.archive-banner[b-viadnvqdsc] {
    background-color: var(--k-archive);
    color: var(--k-on-accent);
    border-radius: 8px;
    font-size: 0.9rem;
}

/* Row focus (5. 9. 2026), the same as on the boxes table: the marked row is the focus ring, so
   the table's own ring is off. A tint over the row plus a blue bar in the first cell — the bar
   because the tint alone is easy to miss next to the grey of a selected (checked) row. */
.messages-table:focus[b-viadnvqdsc] {
    outline: none;
}

.messages-table tbody tr.row-focused > td[b-viadnvqdsc] {
    background-color: var(--k-focus-row-bg);
}

.messages-table tbody tr.row-focused > td:first-child[b-viadnvqdsc] {
    box-shadow: inset 3px 0 0 var(--k-primary);
}

/* /Pages/DataBoxSettings.razor.rz.scp.css */
/* Same concept as on the messages page */
.settings-table[b-suqpl9e8vz] {
    width: 100%;
    border-collapse: collapse;
}

.settings-table th[b-suqpl9e8vz] {
    background-color: var(--k-surface-2);
    /* 8px vertical, down from 15. */
    padding: 8px 15px;
    text-align: left;
    color: var(--k-text-4);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
    border-bottom: 1px solid var(--k-border);
}

/* 2px vertical, down from 15 — the same density the messages table got with finding M12, and for
   the same reason: the cell holds two short lines (name, company number) and the rest was air.
   26px per row, so about three more mailboxes on a screen. The horizontal 15px stays: these
   columns are wide and the text would otherwise touch the borders. */
.settings-table td[b-suqpl9e8vz] {
    padding: 2px 15px;
    border-bottom: 1px solid var(--k-border);
    vertical-align: middle;
    line-height: 1.3;
}

/* Room for the caron above capitals is still there at 1.15 — verified on the messages table. */
.settings-table td .small[b-suqpl9e8vz] {
    line-height: 1.15;
}

.settings-table tbody tr[b-suqpl9e8vz] {
    background-color: var(--k-surface);
}

.priority-cell[b-suqpl9e8vz] {
    border-left: 5px solid transparent;
}

.row-critical .priority-cell[b-suqpl9e8vz] { border-left-color: var(--k-prio-critical) !important; }
.row-warning .priority-cell[b-suqpl9e8vz] { border-left-color: var(--k-prio-warning) !important; }
.row-info .priority-cell[b-suqpl9e8vz] { border-left-color: var(--k-border-2) !important; }
.row-resolved .priority-cell[b-suqpl9e8vz] { border-left-color: var(--k-prio-resolved) !important; }

.badge[b-suqpl9e8vz] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.badge-outline-green[b-suqpl9e8vz] { background-color: var(--k-surface); color: var(--k-prio-resolved); border: 1px solid var(--k-tile-green-border); }
.badge-outline-red[b-suqpl9e8vz] { background-color: var(--k-surface); color: var(--k-prio-critical); border: 1px solid var(--k-badge-danger-border); }
.badge-outline-yellow[b-suqpl9e8vz] { background-color: var(--k-surface); color: var(--k-badge-warning-text); border: 1px solid var(--k-badge-warning-border); }
.badge-outline-gray[b-suqpl9e8vz] { background-color: var(--k-surface); color: var(--k-text-muted); border: 1px solid var(--k-border-2); }

.action-icon:hover[b-suqpl9e8vz] {
    color: var(--k-text-2) !important;
}

.cursor-pointer[b-suqpl9e8vz] {
    cursor: pointer;
}

/* Same as on the messages page — the clear-filters button lives in both overviews. */
.filter-btn-hover:hover[b-suqpl9e8vz] {
    background-color: var(--k-surface-2);
}

/* Quick filters taken over from the messages page */
.filter-box[b-suqpl9e8vz] {
    background-color: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: 8px;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.filter-label[b-suqpl9e8vz] {
    font-size: 0.65rem;
    color: var(--k-text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Row focus (5. 9. 2026): the marked row is the focus ring, so the table's own ring is off. A
   tint over the whole row plus a blue bar in the first cell — the bar because the tint alone is
   easy to miss next to the grey of a selected (checked) row. Beats hover, which is lighter. */
.settings-table:focus[b-suqpl9e8vz] {
    outline: none;
}

.settings-table tbody tr.row-focused > td[b-suqpl9e8vz] {
    background-color: var(--k-focus-row-bg);
}

.settings-table tbody tr.row-focused > td:first-child[b-suqpl9e8vz] {
    box-shadow: inset 3px 0 0 var(--k-primary);
}
/* /Pages/Home.razor.rz.scp.css */
.login-wrapper[b-m7zzs18l8h] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: var(--k-login-bg);
    color: var(--k-on-accent);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.login-box[b-m7zzs18l8h] {
    background-color: var(--k-login-card);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.logo[b-m7zzs18l8h] {
    /* 1.9rem since the wordmark is the 18-character domain (16. 9. 2026); 2.5rem fit "Kontor." */
    font-size: 1.9rem;
    font-weight: bold;
    color: var(--k-primary-light);
    margin-bottom: 5px;
}

.subtitle[b-m7zzs18l8h] {
    color: var(--k-login-text-2);
    margin-bottom: 30px;
    font-size: 0.9rem;
}

.input-group[b-m7zzs18l8h] {
    text-align: left;
    margin-bottom: 20px;
}

.input-group label[b-m7zzs18l8h] {
    display: block;
    margin-bottom: 8px;
    color: var(--k-login-text-3);
    font-size: 0.85rem;
}

.input-group input[b-m7zzs18l8h] {
    width: 100%;
    padding: 12px;
    background-color: var(--k-login-input);
    border: 1px solid var(--k-login-input-border);
    border-radius: 6px;
    color: var(--k-on-accent);
    box-sizing: border-box;
}

.input-group input:focus[b-m7zzs18l8h] {
    outline: none;
    border-color: var(--k-primary-light);
}

.btn-login[b-m7zzs18l8h] {
    width: 100%;
    padding: 12px;
    background-color: var(--k-primary-light);
    color: var(--k-on-accent);
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
}

.btn-login:hover[b-m7zzs18l8h] {
    background-color: var(--k-primary);
}
/* /Pages/OdeslaneZpravy.razor.rz.scp.css */
/* Odeslané — the table is styled like .messages-table on Datové zprávy (same paddings, same header,
   same clipping rules), so the two lists read as one application. The tiles, the toolbar and the
   quick-filter chips use the shared classes in wwwroot/css/app.css. */

.sent-table[b-yla3eo58eg] {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--k-surface);
    border-radius: 8px;
    border: 1px solid var(--k-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    /* Column widths come from the colgroup in the markup; fixed layout makes the ellipsis work. */
    table-layout: fixed;
    font-size: 0.85rem;
}

.sent-table th[b-yla3eo58eg] {
    background-color: var(--k-surface-2);
    padding: 9px 6px;
    text-align: left;
    color: var(--k-text-4);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
    border-bottom: 1px solid var(--k-border);
    overflow: hidden;
}

.sent-table th:first-child[b-yla3eo58eg] { border-top-left-radius: 8px; }
.sent-table th:last-child[b-yla3eo58eg] { border-top-right-radius: 8px; }

/* 2px vertical like the received list: the padding and the line height are the whole difference
   between a comfortable row and a wasteful one. */
.sent-table td[b-yla3eo58eg] {
    padding: 2px 6px;
    border-bottom: 1px solid var(--k-border);
    vertical-align: middle;
    line-height: 1.3;
}

.sent-table td .small[b-yla3eo58eg] {
    line-height: 1.15;
}

/* The date columns, the link and the receipt icon: less horizontal air, they are narrow. By class,
   not by position — the selection column (6. 9. 2026) shifts the positions for those who may work. */
.sent-table th.cell-narrow[b-yla3eo58eg],
.sent-table td.cell-narrow[b-yla3eo58eg] {
    padding-left: 3px;
    padding-right: 3px;
}

.sent-table tbody tr[b-yla3eo58eg] { background-color: var(--k-surface); }
.sent-table tbody tr:hover[b-yla3eo58eg] { background-color: var(--k-surface-2); }

/* One line, cut with an ellipsis; the full text is in the tooltip and the detail. */
.sent-table .cell-clip[b-yla3eo58eg] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The subject wraps in the full row (the whole subject, always); compact clips it. */
.sent-table .cell-wrap[b-yla3eo58eg] {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Compact: strictly one line per row; the receipt button shrinks with it. */
.sent-table.compact td[b-yla3eo58eg] {
    white-space: nowrap;
}
.sent-table.compact .btn-sm[b-yla3eo58eg] {
    padding: 0 0.35rem;
    line-height: 1.4;
}

/* The delivery state: a dot in the colour vocabulary of IsdsDeliveryStatusCatalog.DotCss
   (gray, warning, success, danger) and plain text — the state is information, not an alarm. */
.status-text[b-yla3eo58eg] {
    font-size: 0.8rem;
    color: var(--k-text-3);
}

.sent-dot[b-yla3eo58eg] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
    background: var(--k-dot-gray);
}
.sent-dot-gray[b-yla3eo58eg] { background: var(--k-dot-gray); }
.sent-dot-warning[b-yla3eo58eg] { background: var(--k-badge-warning-text); }
.sent-dot-success[b-yla3eo58eg] { background: var(--k-tile-green-text); }
.sent-dot-danger[b-yla3eo58eg] { background: var(--k-tile-rose-text); }

.sent-timeline li[b-yla3eo58eg] {
    padding: 2px 0;
    border-left: 2px solid var(--k-border-3);
    padding-left: 10px;
}

/* The archive tile and banner — the same teal as on Datové zprávy (DataBoxMessages.razor.css), so
   an open archive reads as one signal on both lists. Scoped CSS does not reach across pages, hence
   the copy; the values must stay identical. */
.archive-tile[b-yla3eo58eg] {
    background-color: var(--k-surface-3);
    border-color: var(--k-tile-gray-border) !important;
    color: var(--k-text-muted);
}

.archive-tile:hover[b-yla3eo58eg] {
    background-color: var(--k-surface-4);
}

.archive-tile-open[b-yla3eo58eg] {
    background-color: var(--k-archive);
    border-color: var(--k-archive-hover) !important;
    color: var(--k-on-accent);
}

.archive-tile-open:hover[b-yla3eo58eg] {
    background-color: var(--k-archive-hover);
}

.archive-banner[b-yla3eo58eg] {
    background-color: var(--k-archive);
    color: var(--k-on-accent);
    border-radius: 8px;
    font-size: 0.9rem;
}

/* The selection checkbox column: centred, the same scale as on the received list. */
.sent-table td.select-cell[b-yla3eo58eg],
.sent-table th.select-cell[b-yla3eo58eg] {
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
}

.sent-table tbody tr.selected[b-yla3eo58eg] { background-color: var(--k-surface-3); }
/* /Pages/SpravaRychlychVoleb.razor.rz.scp.css */
/* Swatches of the quick-filter palette (Core.Services.QuickFilterKindLook) — the same hues the
   chips use on the messages page (DataBoxMessages.razor.css .qf-*), shown here as a filled square
   with the kind's icon in white. */
.qf-swatch[b-n1fkahyj97] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--k-on-accent);
    border: 2px solid transparent;
    vertical-align: middle;
}

.qf-swatch-pick[b-n1fkahyj97] { cursor: pointer; width: 34px; height: 34px; }
.qf-swatch-pick:hover[b-n1fkahyj97] { filter: brightness(1.08); }
.qf-swatch-selected[b-n1fkahyj97] { border-color: var(--k-text); box-shadow: 0 0 0 2px var(--k-surface) inset; }

.qf-swatch-blue[b-n1fkahyj97] { background-color: var(--k-qf-blue-active); }
.qf-swatch-purple[b-n1fkahyj97] { background-color: var(--k-qf-purple-active); }
.qf-swatch-yellow[b-n1fkahyj97] { background-color: var(--k-qf-yellow-active); }
.qf-swatch-green[b-n1fkahyj97] { background-color: var(--k-qf-green-active); }
.qf-swatch-red[b-n1fkahyj97] { background-color: var(--k-qf-red-active); }
.qf-swatch-teal[b-n1fkahyj97] { background-color: var(--k-qf-teal-active); }
.qf-swatch-orange[b-n1fkahyj97] { background-color: var(--k-qf-orange-active); }
.qf-swatch-pink[b-n1fkahyj97] { background-color: var(--k-qf-pink-active); }
.qf-swatch-gray[b-n1fkahyj97] { background-color: var(--k-qf-gray-active); }

.badge-outline-green[b-n1fkahyj97] { background-color: var(--k-surface); color: var(--k-prio-resolved); border: 1px solid var(--k-tile-green-border); padding: 4px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; }
.badge-outline-gray[b-n1fkahyj97] { background-color: var(--k-surface); color: var(--k-text-muted); border: 1px solid var(--k-border-2); padding: 4px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; }
/* /Pages/StavServeru.razor.rz.scp.css */
/* Stav serveru — four gauges with a traffic light, then facts. The colours are the tile palette of
   the message lists (green / amber / red backgrounds with their border tints), so the page reads as
   part of the same application. */

.gauges[b-g452o147l0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.gauge[b-g452o147l0] {
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border-top: 4px solid var(--k-ok);
}
.gauge.warn[b-g452o147l0] { border-top-color: var(--k-warn); }
.gauge.crit[b-g452o147l0] { border-top-color: var(--k-crit); }

.gauge .label[b-g452o147l0] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--k-text-muted);
    letter-spacing: 0.02em;
}

.gauge .pct[b-g452o147l0] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--k-text);
    line-height: 1;
}
.gauge .pct small[b-g452o147l0] { font-size: 0.9rem; color: var(--k-text-muted); margin-left: 2px; }

.gauge .bar[b-g452o147l0] {
    height: 10px;
    background: var(--k-surface-4);
    border-radius: 5px;
    overflow: hidden;
    margin: 10px 0 8px;
}
.gauge .fill[b-g452o147l0] { height: 100%; background: var(--k-ok); border-radius: 5px; transition: width .3s; }
.gauge.warn .fill[b-g452o147l0] { background: var(--k-warn); }
.gauge.crit .fill[b-g452o147l0] { background: var(--k-crit); }

.gauge .value[b-g452o147l0] { font-size: 0.9rem; color: var(--k-text); font-weight: 600; }
.gauge .note[b-g452o147l0] { font-size: 0.75rem; color: var(--k-text-muted); margin-top: 2px; }

/* Facts: a label column and a value column, one row per fact. */
.facts[b-g452o147l0] {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1.25rem;
    row-gap: 0.35rem;
    margin: 0;
    font-size: 0.9rem;
}
.facts dt[b-g452o147l0] { font-weight: 400; color: var(--k-text-muted); }
.facts dd[b-g452o147l0] { margin: 0; font-weight: 600; color: var(--k-text); }

/* The five job counters in one row. */
.job-counts[b-g452o147l0] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}
.job-counts > div[b-g452o147l0] {
    background: var(--k-surface-2);
    border: 1px solid var(--k-border);
    border-radius: 8px;
    padding: 8px 6px;
    text-align: center;
}
.job-counts > div.warn[b-g452o147l0] { background: var(--k-tile-amber-bg); border-color: var(--k-tile-amber-border); }
.job-counts .num[b-g452o147l0] { display: block; font-size: 1.3rem; font-weight: 700; color: var(--k-text); line-height: 1.1; }
.job-counts .lbl[b-g452o147l0] { display: block; font-size: 0.7rem; text-transform: uppercase; color: var(--k-text-muted); font-weight: 700; margin-top: 2px; }

.recurring th[b-g452o147l0] { font-size: 0.7rem; text-transform: uppercase; color: var(--k-text-muted); font-weight: 700; border-bottom: 1px solid var(--k-border); }
.recurring td[b-g452o147l0] { vertical-align: middle; }