/* =====================================================================================================================
   SBSone UI kit (Part 11, step 1 -- 13-11-2026). Owner-approved concept: ui-kit-boxes-and-actions-concept-2026-11-13.
   One look for boxes, one ⋮ menu for actions. Class prefix k-. Used through {% load kit %} (core/templatetags/kit.py);
   the living style guide is /ui-kit/ (staff only). Owned by the kit core: screens never restyle these classes.

     Boxes    k-card (__head __title __sub __actions __body __foot, --fold, --flush) · k-kv (--cols) · k-kpis / k-kpi
              (__label __value .good/.bad __note) · k-note--info|success|warning|danger · k-empty · k-modal
     Parts    k-btn--primary|secondary|danger|link (+ --sm) · k-pill--ok|wait|info|bad · k-menu / k-dots / k-panel /
              k-mi / k-mi--danger / k-sep · k-field / k-input · k-table (.num .dt tfoot .k-sort, first column fixed) · k-pager
     Step 2   k-tabs / k-tab (--on, __n) · k-seg · k-steps / k-step · k-prog · k-date / k-cal · k-lb (photo viewer) ·
              k-ph (page header) · k-sr
     Step 3   k-n (numbers never break) · k-f / k-input / k-sel / k-phone / k-amt / k-file / k-check (Field family) ·
              k-form-grid / k-errsum · k-filters / k-chips / k-counts / k-pager__per · k-chart / k-hbars / k-vbars /
              k-donut / k-progress · k-modal--full · .k4 robustness · k-topsearch / client pill / help button
     Rules    12 px corners on boxes, 8 px on buttons, fields and the ⋮; 1 px grey line; no shadow except the ⋮ menu and
              the Modal; 16 x 18 px inside (12 x 14 on a phone); 16 px between boxes; Poppins; theme colours only.
   ===================================================================================================================== */
:root{
  --k-primary:var(--t-primary,#1E46A0);
  --k-line:var(--t-line,#E3E7EF);
  --k-line-strong:color-mix(in srgb,var(--k-line) 85%,var(--k-muted));
  --k-card:var(--t-card,#fff);
  --k-page:var(--t-page,#F5F7FB);
  --k-text:var(--t-text,#1A1D29);
  --k-muted:var(--t-muted,#5D6475);
  --k-on-primary:#fff;
  --k-ok:var(--t-success,#4BA34B);
  --k-ok-ink:color-mix(in srgb,var(--k-ok) 68%,#000);
  --k-warn:var(--t-warning,#ED9C23);
  --k-warn-ink:color-mix(in srgb,var(--k-warn) 58%,#000);
  --k-bad:var(--t-danger,#D64545);
  --k-bad-ink:color-mix(in srgb,var(--k-bad) 84%,#000);
  --k-primary-soft:color-mix(in srgb,var(--k-primary) 8%,var(--k-card));
  --k-bad-soft:color-mix(in srgb,var(--k-bad) 10%,var(--k-card));
  --k-soft:color-mix(in srgb,var(--k-line) 32%,var(--k-card));      /* the light band: table headings, the switch */
  --k-r:12px;--k-r-sm:8px;--k-r-menu:10px;--k-r-modal:14px;
  --k-pad:16px 18px;--k-pad-phone:12px 14px;--k-gap:16px;
  --k-shadow-menu:0 10px 28px rgba(20,30,60,.16);
  --k-shadow-modal:0 24px 64px rgba(0,22,65,.28);
  --k-font:'Poppins',system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---------------------------------------------------------------- 1 Card (header, body, footer, folding) */
.k-card{background:var(--k-card);border:1px solid var(--k-line);border-radius:var(--k-r);min-width:0;font-family:var(--k-font);color:var(--k-text);box-shadow:none}
.k-card+.k-card,.k-card+.k-kpis,.k-kpis+.k-card,.k-note+.k-card,.k-card+.k-note{margin-top:var(--k-gap)}
.k-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px 0;min-width:0}
.k-card__head>div{min-width:0}
.k-card__title{margin:0;font-size:var(--t-fs-large,14px);font-weight:600;color:var(--k-primary);line-height:1.35;min-width:0;overflow-wrap:anywhere;text-transform:none;letter-spacing:0}
.k-card__sub{margin:2px 0 0;font-size:var(--t-fs-small,12px);color:var(--k-muted)}
.k-card__actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.k-card__body{padding:var(--k-pad);font-size:var(--t-fs-body,13px)}
.k-card__head+.k-card__body{padding-top:10px}
.k-card--flush>.k-card__body,.k-card--flush>details>.k-card__body{padding-left:0;padding-right:0;padding-bottom:0}
.k-card--flush .k-table th:first-child,.k-card--flush .k-table td:first-child{padding-left:18px}
.k-card--flush .k-table th:last-child,.k-card--flush .k-table td:last-child{padding-right:18px}
.k-card--flush .k-table tr:last-child td{border-bottom:0}
.k-card__foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--k-line)}
.k-card details>summary{list-style:none;cursor:pointer}
.k-card details>summary::-webkit-details-marker{display:none}
.k-card--fold>details>summary{display:flex;align-items:center;gap:10px;padding:14px 18px;border-radius:var(--k-r)}
.k-card--fold>details>summary:focus-visible{outline:2px solid var(--k-primary);outline-offset:-2px}
.k-card--fold>details>summary .k-chev{flex:0 0 16px;transition:transform .15s;color:var(--k-muted)}
.k-card--fold>details[open]>summary .k-chev{transform:rotate(90deg)}
.k-card--fold>details>summary .k-card__title{flex:1}
.k-card--fold>details>summary .k-cnt{font-size:var(--t-fs-small,12px);color:var(--k-muted)}
.k-card--fold>details>.k-card__body{border-top:1px solid var(--k-line);padding-top:12px}

/* ---------------------------------------------------------------- 2 Key-value (rows, columns) */
.k-kv{margin:0;display:block;font-family:var(--k-font)}
/* Part 3 (item 1; A request / B request 2): each row is its own line. The label keeps at least its longest word and
   wraps; the value (numbers never break) sits on the right, and goes under its label when it does not fit beside it. */
.k-kv>div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:14px;row-gap:2px;padding:8px 0;border-bottom:1px solid var(--k-line);min-width:0}
.k-kv>div:last-child{border-bottom:0}
.k-kv dt,.k-kv dd{margin:0;padding:0;border:0;font-size:var(--t-fs-body,13px)}
.k-kv dt{flex:1 1 40%;min-width:min-content;color:var(--k-muted);font-weight:400;text-transform:none;letter-spacing:0}
.k-kv dd{flex:0 1 auto;max-width:100%;min-width:0;margin-left:auto;text-align:right;font-weight:500;color:var(--k-text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.k-kv--cols{display:flex;flex-wrap:wrap;gap:12px 18px}
.k-kv--cols>div{display:block;flex:1 1 150px;min-width:min-content;padding:0;border:0}
.k-kv--cols dt{padding:0 0 2px;font-size:var(--t-fs-small,12px)}
.k-kv--cols dd{text-align:left;margin-left:0}

/* ---------------------------------------------------------------- 3 KPI tile */
.k-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.k-kpi{background:var(--k-card);border:1px solid var(--k-line);border-radius:var(--k-r);padding:14px 16px;min-width:0;text-decoration:none;color:inherit;display:block;font-family:var(--k-font);box-shadow:none}
.k-kpi__label{font-size:var(--t-fs-small,12px);color:var(--k-muted);margin:0;font-weight:400;text-transform:none;letter-spacing:0}
.k-kpi__value{font-size:var(--t-fs-page,22px);font-weight:600;color:var(--k-primary);margin:2px 0 0;font-variant-numeric:tabular-nums;line-height:1.25;overflow-wrap:anywhere}
.k-kpi__value.good{color:var(--k-ok-ink)}.k-kpi__value.bad{color:var(--k-bad-ink)}
.k-kpi__note{font-size:var(--t-fs-caption,11px);color:var(--k-muted);margin:2px 0 0}
a.k-kpi:hover{border-color:color-mix(in srgb,var(--k-primary) 40%,var(--k-line))}
a.k-kpi:focus-visible{outline:2px solid var(--k-primary);outline-offset:1px}

/* ---------------------------------------------------------------- 4 Notice (info, success, warning = orange, danger) */
.k-note{display:flex;gap:10px;align-items:flex-start;border:1px solid;border-left-width:3px;border-radius:10px;padding:10px 14px;font:var(--t-fs-body,13px)/1.5 var(--k-font);color:var(--k-text)}
.k-note+.k-note{margin-top:10px}
.k-note[hidden],.k-errsum[hidden]{display:none}
.k-note b,.k-note strong{font-weight:600}
.k-note__ic{flex:0 0 16px;margin-top:2px}
.k-note__text{min-width:0;overflow-wrap:anywhere}
.k-note--info{background:color-mix(in srgb,var(--k-primary) 6%,var(--k-card));border-color:color-mix(in srgb,var(--k-primary) 22%,var(--k-card));border-left-color:var(--k-primary)}
.k-note--success{background:color-mix(in srgb,var(--k-ok) 8%,var(--k-card));border-color:color-mix(in srgb,var(--k-ok) 28%,var(--k-card));border-left-color:var(--k-ok)}
.k-note--warning{background:color-mix(in srgb,var(--k-warn) 10%,var(--k-card));border-color:color-mix(in srgb,var(--k-warn) 35%,var(--k-card));border-left-color:var(--k-warn)}
.k-note--danger{background:color-mix(in srgb,var(--k-bad) 7%,var(--k-card));border-color:color-mix(in srgb,var(--k-bad) 28%,var(--k-card));border-left-color:var(--k-bad)}
.k-note--info .k-note__ic{color:var(--k-primary)}.k-note--success .k-note__ic{color:var(--k-ok-ink)}
.k-note--warning .k-note__ic{color:var(--k-warn-ink)}.k-note--danger .k-note__ic{color:var(--k-bad-ink)}

/* ---------------------------------------------------------------- 5 Empty state (inside its card; no box of its own) */
.k-empty{text-align:center;padding:28px 16px;color:var(--k-muted);font:var(--t-fs-body,13px)/1.5 var(--k-font);border:0;background:none}
.k-empty p{margin:0}
.k-empty .k-empty__hint{font-size:var(--t-fs-small,12px);margin-top:2px}
.k-empty .k-btn{margin-top:12px}

/* ---------------------------------------------------------------- buttons (4) and the pill */
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:7px 14px;border-radius:var(--k-r-sm);font:600 var(--t-fs-body,13px)/1.2 var(--k-font);border:1px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none;box-sizing:border-box;box-shadow:none}
.k-btn:focus-visible{outline:2px solid var(--k-primary);outline-offset:2px}
.k-btn[disabled],.k-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.k-btn--primary{background:var(--k-primary);border-color:var(--k-primary);color:var(--k-on-primary)}
.k-btn--primary:hover{filter:brightness(.92)}
.k-btn--secondary{background:var(--k-card);border-color:var(--k-line-strong);color:var(--k-primary)}
.k-btn--secondary:hover{background:var(--k-primary-soft)}
.k-btn--danger{background:var(--k-card);border-color:color-mix(in srgb,var(--k-bad) 45%,var(--k-card));color:var(--k-bad-ink)}
.k-btn--danger:hover{background:var(--k-bad-soft)}
.k-btn--link{background:none;border:0;padding:4px 2px;min-height:0;color:var(--k-primary);font-weight:500}
.k-btn--link:hover{text-decoration:underline}
.k-btn--sm{min-height:30px;padding:4px 10px;font-size:var(--t-fs-small,12px)}
.k-pill{display:inline-block;font:600 var(--t-fs-caption,11px)/1.5 var(--k-font);padding:2px 9px;border-radius:999px;white-space:nowrap}
.k-pill--ok{background:color-mix(in srgb,var(--k-ok) 14%,var(--k-card));color:var(--k-ok-ink)}
.k-pill--wait{background:color-mix(in srgb,var(--k-warn) 16%,var(--k-card));color:var(--k-warn-ink)}
.k-pill--info{background:var(--k-primary-soft);color:var(--k-primary)}
.k-pill--bad{background:var(--k-bad-soft);color:var(--k-bad-ink)}

/* ---------------------------------------------------------------- fields used inside the boxes and the Modal */
.k-field{display:block;margin-top:10px}
.k-field>span{display:block;font-size:var(--t-fs-small,12px);color:var(--k-muted);margin-bottom:4px}
/* Part 3 (item 2): one Field family -- 40 px boxes, 1 px line, 8 px corners, 13 px text, a blue focus ring */
.k-input{min-height:40px;border:1px solid var(--k-line-strong);border-radius:var(--k-r-sm);padding:8px 12px;font:var(--t-fs-body,13px)/1.4 var(--k-font);width:100%;max-width:100%;box-sizing:border-box;background:var(--k-card);color:var(--k-text);margin:0}
.k-input:focus{outline:0;border-color:var(--k-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--k-primary) 14%,transparent)}
/* app.css styles every input[type=…] / select / textarea at (0,1,1): the kit box wins at the same weight, later */
input.k-input,select.k-input,textarea.k-input{font-size:var(--t-fs-body,13px);height:auto;min-height:40px;padding:8px 12px;border-radius:var(--k-r-sm);border:1px solid var(--k-line-strong);background-color:var(--k-card)}
.k-field__err{display:block;color:var(--k-bad-ink);font-size:var(--t-fs-small,12px);margin-top:4px}
.k-field__err[hidden]{display:none}

/* ---------------------------------------------------------------- tables inside a card (step 2: concept part 2, item 4)
   Sentence-case grey headings on a light band; .num (or .r) right-aligned with even-width digits; .dt dates on one line;
   a Total row in <tfoot> under a dark line; the sorted heading shows ↑ / ↓ (.k-sort); the first column stays fixed when
   the table scrolls sideways inside its card (phone / tablet). A tinted row sets --k-row-bg so its fixed cell keeps
   the tint. .k-table--nofix turns the fixed column off (a table whose first heading spans two rows, say). */
table.k-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t-fs-body,13px);overflow-wrap:normal;word-break:normal;color:var(--k-text)}
table.k-table th{background:var(--k-soft);white-space:nowrap;font-size:var(--t-fs-small,12px);color:var(--k-muted);font-weight:600;text-transform:none;letter-spacing:0;text-align:left;padding:9px 12px;border-bottom:1px solid var(--k-line);vertical-align:bottom}
table.k-table td{padding:10px 12px;border-bottom:1px solid var(--k-line);vertical-align:middle;background:var(--k-row-bg,transparent)}
table.k-table tbody th{background:var(--k-row-bg,var(--k-card));color:var(--k-text);font-size:var(--t-fs-body,13px);white-space:normal;vertical-align:middle;padding:10px 12px}
table.k-table td.r,table.k-table th.r,table.k-table td.num,table.k-table th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.k-table td.dt,table.k-table th.dt{white-space:nowrap;font-variant-numeric:tabular-nums}
table.k-table td.k-act,table.k-table th.k-act{width:56px;text-align:center;white-space:nowrap}
table.k-table td small{display:block;color:var(--k-muted);font-size:var(--t-fs-caption,11px)}
table.k-table td a{color:var(--k-primary);font-weight:500;text-decoration:none}
table.k-table td a:hover{text-decoration:underline}
table.k-table th a{color:inherit;text-decoration:none}
table.k-table th a:hover{color:var(--k-primary)}
table.k-table th a:focus-visible{outline:2px solid var(--k-primary);outline-offset:2px;border-radius:2px}
table.k-table th[aria-sort]{color:var(--k-text)}
.k-sort{color:var(--k-primary);margin-left:4px;font-weight:600}
table.k-table tfoot td,table.k-table tfoot th{font-weight:600;color:var(--k-text);font-size:var(--t-fs-body,13px);border-top:1.5px solid var(--k-text);border-bottom:0;background:var(--k-card);padding:10px 12px}
/* the first column, fixed when the table scrolls sideways (header and total included); opaque in every theme */
table.k-table:not(.k-table--nofix) tr>:first-child{position:sticky;left:0;z-index:1}
table.k-table:not(.k-table--nofix) thead tr>:first-child{z-index:2;background:var(--k-soft)}
table.k-table:not(.k-table--nofix) tbody tr>:first-child{background:var(--k-row-bg,var(--k-card))}
table.k-table:not(.k-table--nofix) tfoot tr>:first-child{background:var(--k-card)}
.k-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
/* "Showing 1–25 of 312" with Previous / Next ({% kit_pager %}); nothing when everything fits on one page */
.k-pager{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:10px 18px;font:var(--t-fs-small,12px)/1.4 var(--k-font);color:var(--k-muted);border-top:1px solid var(--k-line)}
.k-pager__txt{margin:0;font-variant-numeric:tabular-nums}
.k-pager__btns{display:flex;gap:8px;flex-wrap:wrap}
.k-pager .k-btn[aria-disabled="true"]{opacity:.5;cursor:default;pointer-events:none}

/* ---------------------------------------------------------------- 6 Modal (core/static/core/kit-modal.js) */
.k-modal-back{position:fixed;inset:0;z-index:2000;background:rgba(16,24,40,.45);display:flex;align-items:flex-start;justify-content:center;padding:10vh 16px 16px;overflow:auto;box-sizing:border-box}
.k-modal-back[hidden]{display:none}
.k-modal{background:var(--k-card);border-radius:var(--k-r-modal);box-shadow:var(--k-shadow-modal);width:100%;max-width:480px;display:flex;flex-direction:column;max-height:calc(100vh - 10vh - 16px);font-family:var(--k-font);color:var(--k-text);text-align:left}
.k-modal--wide{max-width:680px}
.k-modal>form{display:flex;flex-direction:column;min-height:0;margin:0}
.k-modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px 6px}
.k-modal__title{margin:0;font-size:var(--t-fs-sub,16px);font-weight:600;color:var(--k-primary);line-height:1.35;overflow-wrap:anywhere}
.k-modal__x{border:0;background:none;color:var(--k-muted);font-size:var(--t-fs-section,18px);line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px;min-height:0}
.k-modal__x:hover{background:var(--k-page)}
.k-modal__x:focus-visible{outline:2px solid var(--k-primary)}
.k-modal__body{padding:6px 18px 14px;overflow:auto;font-size:var(--t-fs-body,13px);line-height:1.5}
.k-modal__body p{margin:0 0 8px;white-space:pre-line}
.k-modal__foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--k-line)}
body.k-modal-open{overflow:hidden}

/* ---------------------------------------------------------------- 7 The ⋮ action menu (core/static/core/kit-menu.js) */
.k-menu{position:relative;display:inline-block;vertical-align:middle}
.k-menu>form{display:contents}
.k-dots{width:32px;height:32px;min-height:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--k-line);border-radius:var(--k-r-sm);background:var(--k-card);color:var(--k-primary);cursor:pointer;padding:0;flex:0 0 32px;box-shadow:none}
.k-dots--page{width:36px;height:36px;flex-basis:36px}
.k-dots:hover{background:var(--k-primary-soft)}
.k-dots[aria-expanded="true"]{border-color:var(--k-primary);background:var(--k-primary-soft)}
.k-dots:focus-visible,.k-mi:focus-visible{outline:2px solid var(--k-primary);outline-offset:1px}
.k-dots svg{display:block;pointer-events:none}
.k-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:1500;min-width:220px;max-width:min(320px,calc(100vw - 32px));background:var(--k-card);border:1px solid var(--k-line);border-radius:var(--k-r-menu);box-shadow:var(--k-shadow-menu);padding:6px;text-align:left;box-sizing:border-box;white-space:normal}
.k-panel[hidden]{display:none}
.k-panel.k-up{top:auto;bottom:calc(100% + 6px)}
.k-panel form{display:block;margin:0}
.k-mi{display:flex;gap:10px;align-items:flex-start;width:100%;box-sizing:border-box;text-align:left;background:none;border:0;border-radius:7px;padding:8px 10px;margin:0;min-height:0;font:500 var(--t-fs-body,13px)/1.4 var(--k-font);color:var(--k-text);cursor:pointer;text-decoration:none;box-shadow:none}
.k-mi>span{min-width:0;overflow-wrap:anywhere}
.k-mi:hover,.k-mi:focus{background:var(--k-primary-soft);outline:none;color:var(--k-text);text-decoration:none}
.k-mi small{display:block;font-size:var(--t-fs-caption,11px);font-weight:400;color:var(--k-muted);margin-top:1px;white-space:normal}
.k-mi--danger,.k-mi--danger:hover,.k-mi--danger:focus{color:var(--k-bad-ink)}
.k-mi--danger:hover,.k-mi--danger:focus{background:var(--k-bad-soft)}
.k-mi[aria-disabled="true"],.k-mi[aria-disabled="true"]:hover{color:var(--k-muted);cursor:not-allowed;opacity:.75;background:none}
.k-mi[aria-disabled="true"]:focus{background:var(--k-page)}
.k-mi[aria-disabled="true"] small{color:var(--k-warn-ink)}
.k-sep{height:1px;background:var(--k-line);margin:5px 4px}

/* ---------------------------------------------------------------- never clipped (owner: "no cut-off, no overlapping") */
.k-card,.k-card__body,.k-kpi,.k-note,.k-modal__body,.k-kv dd{overflow-wrap:anywhere;word-break:normal}
.k-kv dt{overflow-wrap:break-word;word-break:normal}
.k-card__body{min-width:0}
.k-card--flush>.k-card__body,.k-card--flush>details>.k-card__body,.k-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.k-table td.r,table.k-table th.r,.k-kpi__value{white-space:nowrap}
.k-kpi__value{overflow:visible}
.k-card__head{flex-wrap:wrap}
.k-card__actions{flex-wrap:wrap}
.k-btn{max-width:100%}
.k-btn:not(.k-btn--sm){white-space:normal;text-align:center}
.k-panel.k-left{right:auto;left:0}
.k-modal{max-width:min(480px,100%)}.k-modal--wide{max-width:min(680px,100%)}

/* ---------------------------------------------------------------- phone */
@media (max-width:600px){
  .k-modal-back{padding:16px}.k-modal{max-height:calc(100vh - 32px)}
  .k-card__head{padding:12px 14px 0}.k-card__body{padding:var(--k-pad-phone)}.k-card__foot{padding:10px 14px}
  .k-card--fold>details>summary{padding:12px 14px}
  .k-card--flush .k-table th:first-child,.k-card--flush .k-table td:first-child{padding-left:14px}
  .k-card--flush .k-table th:last-child,.k-card--flush .k-table td:last-child{padding-right:14px}
  .k-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.k-kpi__value{font-size:var(--t-fs-section,18px)}
  table.k-table th,table.k-table td{padding:8px 6px}table.k-table td.k-act,table.k-table th.k-act{width:44px}
}
/* one menu at every size: under its ⋮, the full width less 16 px each side, scrolling inside (kit-menu.js sets top) */
@media (max-width:520px){
  .k-panel{position:fixed;left:16px!important;right:16px!important;top:auto;bottom:auto;max-width:none;width:auto;overflow-y:auto}
  .k-mi{min-height:44px;align-items:center}
}

/* =====================================================================================================================
   Part 11 step 2 (13-11-2026) -- owner-approved concept "UI kit part 2": tabs, steps, the date box, the photo viewer,
   the page header (tables: the table section above). Through {% load kit %}; scripts: kit-tabs.js, kit-date.js,
   kit-photo.js (written by the tags themselves).
   ===================================================================================================================== */
.k-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ---------------------------------------------------------------- Tabs (links; the open one blue with a 2 px line) */
.k-tabs{display:flex;gap:2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;box-shadow:inset 0 -1px 0 var(--k-line);font-family:var(--k-font);margin:0 0 var(--k-gap);max-width:100%;scroll-behavior:auto}
.k-tabs::-webkit-scrollbar{display:none}
.k-tab{flex:none;display:inline-flex;align-items:center;gap:6px;padding:10px 14px;font-size:var(--t-fs-body,13px);font-weight:500;line-height:1.3;color:var(--k-muted);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap;text-transform:none;letter-spacing:0;background:none;border-radius:0}
.k-tab:hover{color:var(--k-text);text-decoration:none}
.k-tab:focus-visible{outline:2px solid var(--k-primary);outline-offset:-3px;border-radius:6px}
.k-tab--on,.k-tab[aria-selected="true"]{color:var(--k-primary);font-weight:600;border-bottom-color:var(--k-primary)}
.k-tab__n{display:inline-block;font-size:var(--t-fs-caption,11px);font-weight:500;line-height:1.5;background:var(--k-soft);border:1px solid var(--k-line);border-radius:999px;padding:0 7px;color:var(--k-muted);font-variant-numeric:tabular-nums}
.k-tab--on .k-tab__n,.k-tab[aria-selected="true"] .k-tab__n{background:var(--k-primary-soft);border-color:transparent;color:var(--k-primary)}
/* phone: the row scrolls sideways; a faded edge shows there is more (kit-tabs.js keeps the fade on the side with more) */
@media (max-width:600px){.k-tabs{-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}}
.k-tabs[data-fade="none"]{-webkit-mask-image:none;mask-image:none}
.k-tabs[data-fade="right"]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
.k-tabs[data-fade="left"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px);mask-image:linear-gradient(90deg,transparent,#000 44px)}
.k-tabs[data-fade="both"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent)}
[data-kit-tabpanel][hidden]{display:none!important}

/* ---------------------------------------------------------------- Segmented switch (a view or a value on the same page) */
.k-seg{display:inline-flex;flex-wrap:wrap;gap:2px;background:var(--k-soft);border:1px solid var(--k-line);border-radius:var(--k-r-sm);padding:3px;margin:0;min-width:0;max-width:100%;box-sizing:border-box;font-family:var(--k-font);vertical-align:middle}
fieldset.k-seg{min-inline-size:0}
.k-seg__o{position:relative;display:inline-flex;align-items:center;min-height:30px;margin:0;padding:4px 12px;border:0;border-radius:6px;background:none;box-shadow:none;font:500 var(--t-fs-small,12px)/1.3 var(--k-font);color:var(--k-muted);cursor:pointer;white-space:nowrap;text-transform:none}
label.k-seg__o{padding:0}
label.k-seg__o>span{display:block;padding:7px 12px;border-radius:6px}
.k-seg__in{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.k-seg__o[aria-pressed="true"],.k-seg__in:checked+span{background:var(--k-card);color:var(--k-text);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.k-seg__o:hover{color:var(--k-text)}
button.k-seg__o:focus-visible,.k-seg__in:focus-visible+span{outline:2px solid var(--k-primary);outline-offset:1px}
.k-seg__o[disabled],.k-seg__in:disabled+span{opacity:.5;cursor:not-allowed}

/* ---------------------------------------------------------------- Set-up steps (numbered circles on a line) */
.k-steps{font-family:var(--k-font);margin:0 0 var(--k-gap);min-width:0}
.k-steps__row{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start;overflow-x:auto;scrollbar-width:thin}
.k-step{flex:1 0 74px;min-width:74px;position:relative;text-align:center;font-size:var(--t-fs-small,12px);line-height:1.3;color:var(--k-muted);margin:0;padding:0}
.k-step::before{content:"";position:absolute;top:13px;left:-50%;right:50%;height:2px;background:var(--k-line)}
.k-step:first-child::before{display:none}
.k-step--done::before,.k-step--now::before{background:var(--k-ok)}
.k-step__in{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 4px 2px;color:inherit;text-decoration:none;border-radius:6px}
a.k-step__in:hover .k-step__t{text-decoration:underline}
a.k-step__in:focus-visible{outline:2px solid var(--k-primary);outline-offset:1px}
.k-step__c{position:relative;z-index:1;width:28px;height:28px;box-sizing:border-box;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--k-line);background:var(--k-card);font-weight:600;color:var(--k-muted)}
.k-step--done .k-step__c{background:var(--k-ok);border-color:var(--k-ok);color:var(--k-on-primary)}
.k-step--now .k-step__c{background:var(--k-primary);border-color:var(--k-primary);color:var(--k-on-primary)}
.k-step--now{color:var(--k-text);font-weight:600}
.k-step__t{overflow-wrap:normal}
.k-steps__phone{display:none}
.k-steps__now{margin:0;font-size:var(--t-fs-body,13px);font-weight:600;color:var(--k-text)}
.k-steps__bar{display:block;width:100%;height:4px;margin-top:6px;border:0;border-radius:4px;background:var(--k-line);-webkit-appearance:none;appearance:none;overflow:hidden}
.k-steps__bar::-webkit-progress-bar{background:var(--k-line);border-radius:4px}
.k-steps__bar::-webkit-progress-value{background:var(--k-primary);border-radius:4px}
.k-steps__bar::-moz-progress-bar{background:var(--k-primary);border-radius:4px}
@media (max-width:520px){.k-steps__row{display:none}.k-steps__phone{display:block}}

/* ---------------------------------------------------------------- Progress list (circles in a column, dates on the right) */
.k-prog{list-style:none;margin:0;padding:0;font-family:var(--k-font)}
.k-prog__i{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:start;margin:0;padding:8px 0;border-bottom:1px solid var(--k-line);font-size:var(--t-fs-body,13px);line-height:1.45}
.k-prog__i:last-child{border-bottom:0}
.k-prog__c{width:22px;height:22px;box-sizing:border-box;border-radius:50%;border:2px solid var(--k-line);display:flex;align-items:center;justify-content:center;font-size:var(--t-fs-caption,11px);font-weight:700;color:var(--k-muted);background:var(--k-card)}
.k-prog--done .k-prog__c{background:var(--k-ok);border-color:var(--k-ok);color:var(--k-on-primary)}
.k-prog--part .k-prog__c{border-color:var(--k-warn);background:linear-gradient(90deg,var(--k-warn) 50%,var(--k-card) 50%)}
.k-prog--skip .k-prog__c{border-style:dashed}
.k-prog--now{background:var(--k-primary-soft);border-radius:var(--k-r-sm);padding:8px;margin:2px -8px;border-bottom-color:transparent}
.k-prog--now:not(.k-prog--part) .k-prog__c{border-color:var(--k-primary);color:var(--k-primary)}
.k-prog__t{min-width:0;overflow-wrap:anywhere}
.k-prog__t small{display:block;color:var(--k-muted);font-size:var(--t-fs-small,12px)}
.k-prog__t a{color:var(--k-primary);text-decoration:none}
.k-prog__t a:hover{text-decoration:underline}
.k-prog__t a[aria-current="page"]{font-weight:600}
.k-prog__now{color:var(--k-muted)}
.k-prog__d{color:var(--k-muted);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:var(--t-fs-small,12px)}

/* ---------------------------------------------------------------- Date box (typed DD-MM-YYYY + the joined calendar button) */
.k-date{display:flex;flex-wrap:wrap;align-items:stretch;width:100%;max-width:260px;min-width:0;font-family:var(--k-font);vertical-align:middle}
.k-date .k-date__box{flex:1 1 0;min-width:0;width:auto;margin:0;border-top-right-radius:0;border-bottom-right-radius:0;font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none}
.k-date .k-date__box[aria-invalid="true"]{border-color:var(--k-bad)}
.k-date__btn{flex:0 0 40px;width:40px;min-height:40px;margin:0;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--k-line-strong);border-left:0;border-radius:0 var(--k-r-sm) var(--k-r-sm) 0;background:var(--k-soft);color:var(--k-muted);cursor:pointer;box-shadow:none}
.k-date__btn:hover,.k-date__btn[aria-expanded="true"]{color:var(--k-primary)}
.k-date__btn:focus-visible{outline:2px solid var(--k-primary);outline-offset:1px}
.k-date__btn[disabled]{opacity:.55;cursor:not-allowed}
.k-date .k-field__err{flex:0 0 100%}
.k-field--date>label{display:block;font-size:var(--t-fs-small,12px);color:var(--k-muted);font-weight:500;margin-bottom:4px}
.k-field__hint{display:block;font-size:var(--t-fs-small,12px);color:var(--k-muted);margin-top:4px}
/* the calendar: under the box (above it when there is no room), inside the window; fixed, so a card or a Modal never clips it */
.k-cal{position:fixed;z-index:2100;width:280px;max-width:calc(100vw - 32px);box-sizing:border-box;background:var(--k-card);border:1px solid var(--k-line);border-radius:var(--k-r-menu);box-shadow:var(--k-shadow-menu);padding:10px;font:var(--t-fs-small,12px)/1.4 var(--k-font);color:var(--k-text);text-align:left}
.k-cal[hidden]{display:none}
.k-cal__hd{display:flex;align-items:center;gap:4px;margin-bottom:8px}
.k-cal__nav{flex:0 0 32px;width:32px;height:32px;min-height:0;padding:0;border:1px solid transparent;border-radius:var(--k-r-sm);background:none;color:var(--k-primary);cursor:pointer;font-size:var(--t-fs-sub,16px);line-height:1;box-shadow:none}
.k-cal__nav:hover{background:var(--k-primary-soft)}
.k-cal__sel{flex:1 1 0;min-width:0;height:32px;margin:0;padding:0 4px;border:1px solid var(--k-line-strong);border-radius:var(--k-r-sm);background:var(--k-card);color:var(--k-text);font:600 var(--t-fs-small,12px)/1 var(--k-font)}
.k-cal__nav:focus-visible,.k-cal__sel:focus-visible,.k-cal__day:focus-visible,.k-cal__ft .k-btn:focus-visible{outline:2px solid var(--k-primary);outline-offset:-1px}
.k-cal__grid{display:block;width:100%}
.k-cal__row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;margin-top:2px}
.k-cal__cell{min-width:0;text-align:center}
.k-cal__wk .k-cal__cell{padding:4px 0;font-size:var(--t-fs-caption,11px);font-weight:500;color:var(--k-muted)}
.k-cal__day{width:100%;height:32px;min-height:0;margin:0;padding:0;border:0;border-radius:6px;background:none;color:var(--k-text);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer;box-shadow:none}
.k-cal__day:hover{background:var(--k-primary-soft)}
.k-cal__day.is-today{box-shadow:inset 0 0 0 1px var(--k-primary)}
.k-cal__day[aria-selected="true"]{background:var(--k-primary);color:var(--k-on-primary);font-weight:600}
.k-cal__day[aria-disabled="true"],.k-cal__nav[aria-disabled="true"],.k-cal__ft .k-btn[aria-disabled="true"]{opacity:.35;cursor:not-allowed;background:none}
.k-cal__ft{display:flex;justify-content:space-between;gap:8px;margin-top:6px}
@media (max-width:520px){.k-cal{width:300px}.k-cal__day{height:38px}}

/* ---------------------------------------------------------------- Photo viewer (kit-photo.js; dark in every theme) */
.k-lb-back{position:fixed;inset:0;z-index:2200;display:flex;align-items:stretch;justify-content:center;padding:16px;box-sizing:border-box;background:rgba(11,16,29,.92)}
.k-lb-back[hidden]{display:none}
.k-lb{display:flex;flex-direction:column;width:100%;max-width:1200px;min-height:0;min-width:0;color:#fff;font-family:var(--k-font);outline:0}
.k-lb__head{display:flex;justify-content:space-between;align-items:center;gap:12px;min-width:0}
.k-lb__title{margin:0;min-width:0;font-size:var(--t-fs-body,13px);font-weight:500;line-height:1.4;color:#fff;overflow-wrap:anywhere;text-transform:none;letter-spacing:0}
.k-lb__x{flex:0 0 36px;width:36px;height:36px;min-height:0;padding:0;border:1px solid rgba(255,255,255,.35);border-radius:var(--k-r-sm);background:none;color:#fff;font-size:var(--t-fs-section,18px);line-height:1;cursor:pointer;box-shadow:none}
.k-lb__mid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:40px minmax(0,1fr) 40px;grid-template-rows:minmax(0,1fr);align-items:center;gap:8px;margin:10px 0}
.k-lb__nav{width:40px;height:40px;min-height:0;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:var(--t-fs-section,18px);line-height:1;cursor:pointer;box-shadow:none}
.k-lb__nav:hover{background:rgba(255,255,255,.24)}
.k-lb__nav[hidden]{display:block;visibility:hidden}
.k-lb__x:focus-visible,.k-lb__nav:focus-visible,.k-lb__dl:focus-visible{outline:2px solid #fff;outline-offset:2px}
.k-lb__fig{margin:0;min-width:0;min-height:0;height:100%;align-self:stretch;display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.k-lb__img{display:block;max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--k-r-sm);user-select:none;-webkit-user-drag:none}
.k-lb__foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;font-size:var(--t-fs-small,12px)}
.k-lb__cap{margin:0;min-width:0;opacity:.9;overflow-wrap:anywhere}
.k-lb .k-lb__dl{background:none;border:1px solid rgba(255,255,255,.4);color:#fff}
.k-lb .k-lb__dl[hidden]{display:none}
@media (max-width:520px){.k-lb-back{padding:12px}.k-lb__mid{gap:4px}}

/* ---------------------------------------------------------------- Page header (breadcrumb, title, one pill, the buttons, the ⋮) */
.k-ph{font-family:var(--k-font);color:var(--k-text);margin:0 0 var(--k-gap);min-width:0}
.k-ph__crumbs{font-size:var(--t-fs-small,12px);color:var(--k-muted);margin:0 0 6px;min-width:0}
.k-ph__crumbs .crumbs,.k-ph__crumbs nav{margin:0;font-size:inherit;display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px;color:var(--k-muted)}
.k-ph__crumbs a{color:var(--k-muted);text-decoration:none;font-weight:400}
.k-ph__crumbs a:hover{color:var(--k-primary);text-decoration:underline}
.k-ph__crumbs .cur{color:var(--k-muted);font-weight:500}
.k-ph__main{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 16px;min-width:0}
.k-ph__tt{flex:1 1 260px;min-width:0}
.k-ph__line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.k-ph__title{margin:0;min-width:0;font-size:calc(var(--t-fs-page,22px) - 2px);font-weight:600;line-height:1.3;color:var(--k-text);text-transform:none;letter-spacing:0;overflow-wrap:anywhere}
.k-ph__sub{margin:2px 0 0;color:var(--k-muted);font-size:var(--t-fs-body,13px);overflow-wrap:anywhere}
.k-ph__more{margin-top:4px;font-size:var(--t-fs-small,12px);color:var(--k-muted);min-width:0}
.k-ph__ac{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;flex:0 1 auto;min-width:0}
.k-ph__form{display:inline-flex;margin:0}
.k-menu--phone,.k-mi--phone,.k-panel .k-mi--phone{display:none}
@media (max-width:520px){
  .k-ph__ac{flex:1 1 100%;flex-wrap:nowrap;justify-content:flex-start}
  .k-ph__ac>.k-btn,.k-ph__ac>.k-ph__form{flex:0 1 auto;min-width:0}
  .k-ph__sec{display:none!important}
  .k-menu--phone{display:inline-block}
  .k-panel .k-mi--phone{display:flex}
  .k-ph__crumbs .crumbs>:not(:nth-last-child(-n+3)),.k-ph__crumbs nav>:not(:nth-last-child(-n+3)){display:none}
  .k-ph__crumbs .crumbs>:nth-last-child(3):not(:first-child)::before,.k-ph__crumbs nav>:nth-last-child(3):not(:first-child)::before{content:"… ›";margin-right:7px;color:var(--k-muted)}
}

/* =====================================================================================================================
   Part 11 step 3 (13-11-2026) -- owner-approved concept "UI kit part 3" (all recommended answers): numbers never break,
   the Field family, form layout and errors, the filter bar and paging, the chart card, the shell. Through {% load kit %};
   scripts: kit-num.js (layouts), kit-form.js, kit-filters.js (written by the tags / the layouts).
   ===================================================================================================================== */
:root{
  /* chart series, in order (never two series in one colour); a theme may set --t-chart-2..4 */
  --k-c1:var(--k-primary);--k-c2:var(--t-chart-2,color-mix(in srgb,var(--k-ok) 45%,var(--k-primary)));
  --k-c3:var(--t-chart-3,color-mix(in srgb,var(--k-primary) 55%,var(--k-bad)));--k-c4:var(--t-chart-4,color-mix(in srgb,var(--k-muted) 70%,var(--k-card)));
  --k-c5:var(--t-chart-5,color-mix(in srgb,var(--k-primary) 45%,var(--k-card)));
  /* ageing (a status): light orange -> orange -> dark orange -> red over 90 days; never green */
  --k-age1:color-mix(in srgb,var(--k-warn) 62%,var(--k-card));--k-age2:var(--k-warn);
  --k-age3:color-mix(in srgb,var(--k-warn) 70%,var(--k-text));--k-age4:var(--k-bad);
  --k-fab:48px;
}

/* ---------------------------------------------------------------- 1 Numbers never break */
/* An amount, number, date, booking / receipt number or ID: one line, even-width digits, never cut with "…".
   .k-n is written by the kit tags and by kit-num.js (pages not converted yet); .num / .dt as in tables. */
.k-n,.k-num{white-space:nowrap!important;font-variant-numeric:tabular-nums;text-overflow:clip}
.k-n--s1{font-size:var(--t-fs-section,18px)!important}
.k-n--s2{font-size:var(--t-fs-sub,16px)!important}
.k-wrap{overflow-wrap:anywhere;word-break:normal}   /* long free text: e-mail, address */
.k-kpi{container-type:inline-size}
.k-kpi__value{white-space:nowrap}
@container (max-width:150px){.k-kpi__value{font-size:var(--t-fs-sub,16px)}}
.k-kpis>.k-kpi--wide{grid-column:1/-1}
.k-kv dd .k-n,.k-kv dd.k-n{display:inline-block;max-width:none}
table.k-table td.k-n,table.k-table td .k-n{white-space:nowrap}

/* ---------------------------------------------------------------- 2 The Field family */
.k-f{display:flex;flex-direction:column;gap:5px;min-width:0;margin:0;font-family:var(--k-font)}
.k-f>.k-f__label,.k-f>label.k-f__label,.k-f__label{display:block;font-size:var(--t-fs-small,12px);font-weight:600;line-height:1.35;color:var(--k-text);text-transform:none;letter-spacing:0;margin:0}
.k-req{color:var(--k-bad);margin-left:2px;font-weight:600}
.k-f__help,.k-help{display:block;font-size:var(--t-fs-small,12px);line-height:1.4;color:var(--k-muted);margin:0}
.k-f .k-field__err{margin-top:0}
.k-input::placeholder{color:color-mix(in srgb,var(--k-muted) 80%,var(--k-card));opacity:1}
.k-input[aria-invalid="true"],.k-input.is-bad{border-color:var(--k-bad);box-shadow:inset 0 0 0 1px var(--k-bad)}
.k-input[aria-invalid="true"]:focus{box-shadow:inset 0 0 0 1px var(--k-bad),0 0 0 3px color-mix(in srgb,var(--k-bad) 16%,transparent)}
/* locked / disabled: grey, with the reason under it (.k-f__help) */
.k-input:disabled,.k-input[readonly],.k-input.is-locked{background:var(--k-page);color:var(--k-muted);border-color:var(--k-line);cursor:not-allowed;box-shadow:none}
.k-input[readonly]:not(.is-locked){cursor:text}
.k-locked{display:flex;align-items:flex-start;gap:6px}
.k-locked svg{flex:0 0 14px;margin-top:2px}
/* a kit field marked hidden stays hidden (A's report) */
.k-f[hidden],.k-input[hidden],.k-check[hidden],.k-file[hidden],.k-amt[hidden],.k-sel[hidden],.k-phone[hidden],[data-kit-field][hidden]{display:none!important}
/* select: the browser's box, one drawn arrow; never narrower than its text */
select.k-input,.k-sel>select{-webkit-appearance:none;appearance:none;padding-right:34px;background-image:none;text-overflow:clip;cursor:pointer;width:auto;min-width:0;max-width:100%}
.k-f>select.k-input,.k-f>.k-sel,.k-sel{display:inline-grid;max-width:100%;min-width:0}
.k-f>.k-sel,.k-f>.k-sel>select{width:100%}
.k-sel{position:relative;align-items:center}
.k-sel>select{grid-area:1/1}
.k-sel::after{content:"";grid-area:1/1;justify-self:end;width:8px;height:8px;margin-right:14px;border-right:1.7px solid var(--k-muted);border-bottom:1.7px solid var(--k-muted);transform:translateY(-2px) rotate(45deg);pointer-events:none}
.k-sel:has(select:disabled)::after{opacity:.5}
/* mobile: the country code box (+91) is 92 px, joined to the number */
.k-phone{display:flex;align-items:stretch;min-width:0;max-width:100%}
.k-phone>.k-sel{flex:0 0 92px;width:92px}
.k-phone>.k-sel>select,.k-phone>select.k-input{width:92px;flex:0 0 92px;border-top-right-radius:0;border-bottom-right-radius:0;border-right:0;background-color:var(--k-soft)}
.k-phone>.k-input{flex:1 1 auto;min-width:0;border-top-left-radius:0;border-bottom-left-radius:0}
/* amount: ₹ in front, digits on the right, Indian grouping as you type (js/form_enhance.js .indian-number) */
.k-amt{display:flex;align-items:stretch;min-width:0;max-width:100%}
.k-amt__cur{display:flex;align-items:center;padding:0 10px;border:1px solid var(--k-line-strong);border-right:0;border-radius:var(--k-r-sm) 0 0 var(--k-r-sm);background:var(--k-soft);color:var(--k-muted);font:var(--t-fs-body,13px) var(--k-font)}
.k-amt>.k-input{flex:1 1 auto;min-width:0;text-align:right;font-variant-numeric:tabular-nums;border-top-left-radius:0;border-bottom-left-radius:0}
/* text area: starts at three lines (72 px) and grows as you type */
textarea.k-input{min-height:72px;height:auto;padding-top:9px;padding-bottom:9px;resize:vertical;field-sizing:content;max-height:60vh}
/* file: "Choose file" + the whole file name (wraps, never "…"); types and size under it */
.k-file{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-width:0;max-width:100%;padding:8px 10px;border:1px solid var(--k-line-strong);border-radius:var(--k-r-sm);background:var(--k-card);box-sizing:border-box;position:relative}
.k-file.is-drag{border-style:dashed;border-color:var(--k-primary);background:var(--k-primary-soft)}
.k-file__in{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.k-file__btn{pointer-events:none}
.k-file__name{min-width:0;flex:1 1 160px;font-size:var(--t-fs-small,12px);color:var(--k-text);overflow-wrap:anywhere}
.k-file__name:empty::before{content:attr(data-empty);color:var(--k-muted)}
.k-file:focus-within{border-color:var(--k-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--k-primary) 14%,transparent)}
.k-file:has(.k-file__in:disabled){background:var(--k-page);cursor:not-allowed}
/* tick box and option circle: one 18 px look, the whole row clickable (44 px on a phone) */
.k-check{display:flex;align-items:center;gap:10px;min-height:36px;margin:0;font:var(--t-fs-body,13px)/1.4 var(--k-font);color:var(--k-text);cursor:pointer;text-transform:none;letter-spacing:0;font-weight:400}
.k-check>input{-webkit-appearance:none;appearance:none;flex:0 0 18px;width:18px;height:18px;margin:0;border:1.7px solid var(--k-muted);border-radius:4px;background:var(--k-card);display:grid;place-content:center;cursor:pointer}
.k-check>input[type=radio]{border-radius:50%}
.k-check>input:checked{background:var(--k-primary);border-color:var(--k-primary)}
.k-check>input[type=checkbox]:checked::after{content:"";width:5px;height:10px;border:solid var(--k-on-primary);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.k-check>input[type=radio]:checked{background:var(--k-card);border:5px solid var(--k-primary)}
.k-check>input:focus-visible{outline:2px solid var(--k-primary);outline-offset:2px}
.k-check>input:disabled,.k-check>input:disabled+span{opacity:.55;cursor:not-allowed}
.k-check small{display:block;color:var(--k-muted);font-size:var(--t-fs-small,12px)}
.k-checks{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;border:0;min-width:0}
.k-checks--row{flex-direction:row;flex-wrap:wrap;gap:2px 18px}
.k-checks>legend{padding:0;margin-bottom:4px}
@media (max-width:520px){.k-check{min-height:44px}}

/* ---------------------------------------------------------------- 3 Form layout and errors */
.k-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;align-items:start}
.k-form-grid--1{grid-template-columns:minmax(0,1fr)}
.k-form-grid>.k-span,.k-form-grid>.k-f--wide{grid-column:1/-1}
.k-pair{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:14px 16px;align-items:start}
@media (max-width:600px){.k-form-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:767px){.k-pair{grid-template-columns:minmax(0,1fr)}}
.k-form-grid+.k-form-grid,.k-form-grid+.k-f,.k-f+.k-f{margin-top:14px}
.k-form-grid>.k-f+.k-f{margin-top:0}
/* boxes side by side start at the same top, even when one label wraps to two lines or has a star or a tip:
   each field spans four rows of the grid (label, box, error, help) through subgrid */
@supports (grid-template-rows:subgrid){
  .k-form-grid,.k-pair{row-gap:0}
  .k-form-grid>*,.k-pair>*{grid-row:span 4;margin-bottom:14px}
  .k-form-grid>.k-f,.k-pair>.k-f{display:grid;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .k-form-grid>.k-f>.k-f__label,.k-pair>.k-f>.k-f__label{grid-row:1;margin-bottom:5px;align-self:end}
  .k-form-grid>.k-f>.k-field__err,.k-pair>.k-f>.k-field__err{grid-row:3;margin-top:4px}
  .k-form-grid>.k-f>.k-f__help,.k-pair>.k-f>.k-f__help{grid-row:4;margin-top:4px}
  .k-form-grid>.k-f>:not(.k-f__label):not(.k-field__err):not(.k-f__help),.k-pair>.k-f>:not(.k-f__label):not(.k-field__err):not(.k-f__help){grid-row:2;align-self:start}
  .k-form-grid:last-child,.k-pair:last-child{margin-bottom:-14px}
}
/* the card footer: Cancel then the main button on the right; on a phone stacked full width, the main button on top */
@media (max-width:600px){
  .k-card__foot{flex-direction:column-reverse;align-items:stretch}
  .k-card__foot>.k-btn,.k-card__foot>form,.k-card__foot>form>.k-btn{width:100%;justify-content:center}
}
.k-errsum{margin:0 0 var(--k-gap)}
.k-errsum a{color:inherit;font-weight:600}
.k-errsum ul{margin:4px 0 0;padding-left:18px}
.k-errsum li+li{margin-top:2px}
.k-field__err{display:block;color:var(--k-bad-ink);font-size:var(--t-fs-small,12px);line-height:1.4;margin-top:4px}

/* ---------------------------------------------------------------- 4 Filter bar, applied-filter pills, paging */
.k-filters{border-bottom:1px solid var(--k-line);font-family:var(--k-font)}
.k-filters__bar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:14px 18px}
.k-filters__bar>.k-f{flex:1 1 150px;max-width:220px}
.k-filters__bar>.k-f--search{flex:2 1 240px;max-width:none}
.k-filters__bar>.k-f>select.k-input,.k-filters__bar>.k-f>.k-sel,.k-filters__bar>.k-f>.k-sel>select{width:100%}
.k-filters__more{flex:0 0 auto;align-self:flex-end}
.k-filters__extra{display:flex;flex-wrap:wrap;gap:10px;padding:0 18px 14px}
.k-filters__extra[hidden]{display:none}
.k-filters__extra>.k-f{flex:1 1 150px;max-width:220px}
.k-filters__go{align-self:flex-end}
.k-filters--js .k-filters__go{display:none}                /* filters apply on change; without scripts this button sends them */
.k-filters__phone{display:none}
.k-chips{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;padding:10px 18px;font-size:var(--t-fs-small,12px);color:var(--k-muted);border-bottom:1px solid var(--k-line);font-family:var(--k-font)}
.k-chips__l{margin-right:2px}
.k-chip{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:2px 6px 2px 10px;border-radius:999px;background:var(--k-primary-soft);color:var(--k-primary);font:500 var(--t-fs-small,12px)/1.3 var(--k-font);text-decoration:none;white-space:nowrap;border:1px solid transparent}
.k-chip__x{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:var(--t-fs-body,13px);line-height:1}
a.k-chip:hover .k-chip__x{background:color-mix(in srgb,var(--k-primary) 16%,var(--k-card))}
a.k-chip:focus-visible,.k-chips__clear:focus-visible,.k-count:focus-visible{outline:2px solid var(--k-primary);outline-offset:2px}
.k-chips__clear{color:var(--k-primary);font-weight:500;text-decoration:none;margin-left:2px}
.k-chips__clear:hover{text-decoration:underline}
.k-chips__n{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
/* status count chips: the same pills, with counts; the chosen one filled */
.k-counts{display:flex;flex-wrap:wrap;gap:6px 8px;padding:12px 18px 0}
.k-count{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:3px 12px;border-radius:999px;border:1px solid var(--k-line);background:var(--k-card);color:var(--k-text);font:500 var(--t-fs-small,12px)/1.3 var(--k-font);text-decoration:none;white-space:nowrap}
.k-count b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--k-muted)}
.k-count:hover{border-color:color-mix(in srgb,var(--k-primary) 40%,var(--k-line))}
.k-count[aria-current="true"]{background:var(--k-primary-soft);border-color:transparent;color:var(--k-primary)}
.k-count[aria-current="true"] b{color:var(--k-primary)}
/* phone: the search stays; the rest open in one "Filters (n)" Modal */
@media (max-width:520px){
  .k-filters__bar{padding:12px 14px;flex-wrap:nowrap;align-items:flex-end}
  .k-filters--js .k-filters__bar>.k-f:not(.k-f--search),.k-filters--js .k-filters__more,.k-filters--js .k-filters__extra{display:none}
  .k-filters--js .k-filters__phone{display:inline-flex;flex:0 0 auto}
  .k-filters__bar>.k-f--search{flex:1 1 auto;min-width:0}
  .k-chips{padding:10px 14px}.k-counts{padding:10px 14px 0}
  .k-chips__n{margin-left:0;flex-basis:100%}
}
.k-modal .k-filters__fields{display:flex;flex-direction:column;gap:12px}
.k-modal .k-filters__fields>.k-f{max-width:none}
/* "25 per page" beside Previous / Next */
.k-pager__per{display:inline-flex;align-items:center;gap:6px;margin:0}
.k-pager__per select.k-input{min-height:30px;padding:2px 32px 2px 10px;font-size:var(--t-fs-small,12px)}
.k-pager__per .k-sel::after{margin-right:12px;width:7px;height:7px}
.k-pager__left{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.k-pager__per button{display:inline-flex}
.k-pager--js .k-pager__per button{display:none}

/* ---------------------------------------------------------------- 5 Chart card (CSS / HTML only) */
.k-chart{font-family:var(--k-font);min-width:0}
.k-chart__sub{margin:0 0 8px;color:var(--k-muted);font-size:var(--t-fs-small,12px)}
.k-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 10px;padding:0;list-style:none;font-size:var(--t-fs-small,12px);color:var(--k-muted)}
.k-legend li{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.k-legend i,.k-swatch{display:inline-block;width:10px;height:10px;border-radius:2px;flex:none}
.k-s1{background:var(--k-c1)}.k-s2{background:var(--k-c2)}.k-s3{background:var(--k-c3)}.k-s4{background:var(--k-c4)}.k-s5{background:var(--k-c5)}
.k-age1{background:var(--k-age1)}.k-age2{background:var(--k-age2)}.k-age3{background:var(--k-age3)}.k-age4{background:var(--k-age4)}
.k-ok-bg{background:var(--k-ok)}.k-warn-bg{background:var(--k-warn)}.k-bad-bg{background:var(--k-bad)}
/* horizontal bars (categories, ageing): label and value on one line, the bar under; the value never wraps --
   when it does not fit beside its label it takes its own line (flex-wrap) */
.k-hbars{list-style:none;margin:0;padding:0}
.k-hbar{border-bottom:1px solid var(--k-line)}
.k-hbar:last-child{border-bottom:0}
.k-hbar__in{display:block;padding:9px 0;color:inherit;text-decoration:none;border-radius:6px}
a.k-hbar__in:hover{background:var(--k-primary-soft)}
a.k-hbar__in:focus-visible{outline:2px solid var(--k-primary);outline-offset:1px}
.k-hbar__t{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 10px;font-size:var(--t-fs-body,13px)}
.k-hbar__l{min-width:0;flex:1 1 auto;overflow-wrap:break-word;color:var(--k-text)}
.k-hbar__l small{display:block;color:var(--k-muted);font-size:var(--t-fs-small,12px)}
.k-hbar__v{flex:0 0 auto;margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600;text-align:right}
.k-hbar__v small{font-weight:400;color:var(--k-muted);margin-left:6px}
.k-hbar__track{display:flex;height:8px;margin-top:6px;border-radius:4px;background:var(--k-soft);overflow:hidden}
.k-hbar__track>i{display:block;height:100%;min-width:2px;border-radius:4px}
.k-hbar__track--thin{height:6px;margin-top:4px}
.k-hbar__t+.k-hbar__track--thin{margin-top:6px}
a.k-hbar__in .k-hbar__l::after{content:" ›";color:var(--k-muted)}
/* vertical bars over time: on a phone the strip scrolls sideways (faded edge; the latest month in view, kit-num.js) */
.k-vbars{position:relative}
.k-chart__scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:4px}
.k-chart__scroll[data-fade="right"]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.k-chart__scroll[data-fade="left"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
.k-chart__scroll[data-fade="both"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.k-vbars__row{display:flex;align-items:flex-end;gap:10px;min-height:180px;list-style:none;margin:0;padding:0}
.k-vbar{flex:1 0 44px;min-width:44px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.k-vbar__in{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;color:inherit;text-decoration:none;border-radius:6px;padding:2px}
a.k-vbar__in:hover{background:var(--k-primary-soft)}
a.k-vbar__in:focus-visible{outline:2px solid var(--k-primary);outline-offset:1px}
.k-vbar__v{font-size:var(--t-fs-small,12px);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.k-vbar__well{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:2px;width:28px;height:130px;border-radius:4px 4px 0 0;background:var(--k-soft)}
.k-vbar__well>i{display:block;min-height:2px;border-radius:4px 4px 0 0}
.k-vbar__l{font-size:var(--t-fs-caption,11px);color:var(--k-muted);white-space:nowrap}
/* donut: up to 5 slices, the total in the middle (conic-gradient set by the tag through custom properties) */
.k-donut{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.k-donut__ring{position:relative;flex:0 0 150px;width:150px;height:150px;border-radius:50%;background:conic-gradient(var(--k-c1) 0 var(--k-d1,0%),var(--k-c2) 0 var(--k-d2,0%),var(--k-c3) 0 var(--k-d3,0%),var(--k-c4) 0 var(--k-d4,0%),var(--k-c5) 0 100%)}
.k-donut__ring.is-empty{background:var(--k-soft)}
.k-donut__ring::after{content:"";position:absolute;inset:22px;border-radius:50%;background:var(--k-card)}
.k-donut__mid{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.k-donut__mid b{font-size:var(--t-fs-page,22px);font-weight:600;color:var(--k-text);white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1.2}
.k-donut__mid small{font-size:var(--t-fs-caption,11px);color:var(--k-muted)}
.k-donut .k-legend{flex-direction:column;flex:1 1 160px;gap:6px;margin:0}
.k-donut .k-legend li{justify-content:space-between;gap:10px;white-space:normal}
.k-donut .k-legend li>span{display:inline-flex;align-items:center;gap:6px;min-width:0}
.k-donut .k-legend b{color:var(--k-text);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
/* progress */
.k-progress{margin:0}
.k-progress__t{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;font-size:var(--t-fs-body,13px)}
.k-progress__t b{white-space:nowrap;font-variant-numeric:tabular-nums}
.k-progress__bar{display:block;height:8px;margin-top:6px;border-radius:4px;background:var(--k-soft);overflow:hidden}
.k-progress__bar>i{display:block;height:100%;border-radius:4px;background:var(--k-c1)}
.k-w0{width:0}

/* ---------------------------------------------------------------- Modal: full-screen size (C request 5) */
.k-modal--full{max-width:min(1200px,100%);width:100%;height:calc(100vh - 32px);max-height:calc(100vh - 32px)}
.k-modal-back:has(>.k-modal--full){padding:16px;align-items:stretch}
.k-modal--full>form{height:100%}
.k-modal--full .k-modal__body{flex:1 1 auto;min-height:0}
@media (max-width:600px){.k-modal--full{height:calc(100vh - 24px);max-height:calc(100vh - 24px)}.k-modal-back:has(>.k-modal--full){padding:12px}}

/* ---------------------------------------------------------------- kit parts inside the house .k4 wrapper (A request 1)
   price_sheet.css resets elements inside .k4 with (1,1,1) selectors (.k4:not(#_) button / a / th / td / table / input).
   These rules give the kit's look back inside .k4, with a higher specificity; outside .k4 they do nothing. */
.k4:not(#_) .k-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:7px 14px;margin:0;border-radius:var(--k-r-sm);font:600 var(--t-fs-body,13px)/1.2 var(--k-font);letter-spacing:0;border:1px solid transparent;cursor:pointer;text-align:center;text-decoration:none;box-sizing:border-box}
.k4:not(#_) .k-btn--primary{background:var(--k-primary);border-color:var(--k-primary);color:var(--k-on-primary)}
.k4:not(#_) .k-btn--secondary{background:var(--k-card);border-color:var(--k-line-strong);color:var(--k-primary)}
.k4:not(#_) .k-btn--danger{background:var(--k-card);border-color:color-mix(in srgb,var(--k-bad) 45%,var(--k-card));color:var(--k-bad-ink)}
.k4:not(#_) .k-btn--link{background:none;border:0;padding:4px 2px;min-height:0;color:var(--k-primary);font-weight:500}
.k4:not(#_) .k-btn--sm{min-height:30px;padding:4px 10px;font-size:var(--t-fs-small,12px)}
.k4:not(#_) .k-dots{width:32px;height:32px;padding:0;margin:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--k-line);border-radius:var(--k-r-sm);background:var(--k-card);color:var(--k-primary);cursor:pointer}
.k4:not(#_) .k-dots--page{width:36px;height:36px}
.k4:not(#_) .k-dots[aria-expanded="true"]{border-color:var(--k-primary);background:var(--k-primary-soft)}
.k4:not(#_) .k-mi{display:flex;gap:10px;align-items:flex-start;width:100%;padding:8px 10px;margin:0;border:0;border-radius:7px;background:none;font:500 var(--t-fs-body,13px)/1.4 var(--k-font);color:var(--k-text);text-align:left;text-decoration:none;cursor:pointer}
.k4:not(#_) .k-mi:hover,.k4:not(#_) .k-mi:focus{background:var(--k-primary-soft)}
.k4:not(#_) .k-mi--danger{color:var(--k-bad-ink)}
.k4:not(#_) .k-mi[aria-disabled="true"]{color:var(--k-muted);cursor:not-allowed}
.k4:not(#_) .k-modal__x{border:0;background:none;color:var(--k-muted);font-size:var(--t-fs-section,18px);line-height:1;padding:2px 6px;border-radius:6px}
.k4:not(#_) .k-tab{color:var(--k-muted);text-decoration:none;padding:10px 14px}
.k4:not(#_) .k-tab--on{color:var(--k-primary)}
.k4:not(#_) a.k-kpi{color:inherit;text-decoration:none}
.k4:not(#_) .k-card__title a,.k4:not(#_) .k-card__actions a:not(.k-btn),.k4:not(#_) .k-pager a:not(.k-btn),.k4:not(#_) .k-note a,.k4:not(#_) table.k-table td a{color:var(--k-primary)}
.k4:not(#_) table.k-table{display:table;width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t-fs-body,13px);background:none;padding:0;border:0;white-space:normal}
.k4:not(#_) table.k-table th{font-size:var(--t-fs-small,12px);text-transform:none;letter-spacing:0;color:var(--k-muted);font-weight:600;text-align:left;padding:9px 12px;border-bottom:1px solid var(--k-line);background:var(--k-soft)}
.k4:not(#_) table.k-table td{padding:10px 12px;border-bottom:1px solid var(--k-line)}
.k4:not(#_) table.k-table td.num,.k4:not(#_) table.k-table th.num,.k4:not(#_) table.k-table td.r,.k4:not(#_) table.k-table th.r{text-align:right}
.k4:not(#_) .k-card--flush table.k-table th:first-child,.k4:not(#_) .k-card--flush table.k-table td:first-child{padding-left:18px}
.k4:not(#_) .k-card--flush table.k-table th:last-child,.k4:not(#_) .k-card--flush table.k-table td:last-child{padding-right:18px}
.k4:not(#_) table.k-table tfoot td{border-top:1.5px solid var(--k-text);border-bottom:0;font-weight:600}
.k4:not(#_) .k-input{font:var(--t-fs-body,13px)/1.4 var(--k-font);min-height:40px;margin:0}
.k4:not(#_) textarea.k-input{min-height:72px}
.k4:not(#_) .k-date__btn,.k4:not(#_) .k-cal__nav,.k4:not(#_) .k-cal__day{display:flex;align-items:center;justify-content:center;text-align:center}
.k4:not(#_) .k-date__btn{border:1px solid var(--k-line-strong);border-left:0;border-radius:0 var(--k-r-sm) var(--k-r-sm) 0;background:var(--k-soft);color:var(--k-muted);width:40px}
.k4:not(#_) .k-chip,.k4:not(#_) .k-count{text-decoration:none}
@media (max-width:600px){.k4:not(#_) .k-card--flush table.k-table th:first-child,.k4:not(#_) .k-card--flush table.k-table td:first-child{padding-left:14px}
  .k4:not(#_) table.k-table th,.k4:not(#_) table.k-table td{padding:8px 6px}}

/* ---------------------------------------------------------------- the shell (layouts): top-bar search, client pill, help button */
.k-topsearch{position:relative;display:flex;align-items:center;flex:1 1 auto;min-width:0;max-width:420px}
.k-topsearch__ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--k-muted);pointer-events:none;display:flex}
.rl-topbar .k-topsearch input{width:100%;height:38px;padding:0 12px 0 34px;border:1px solid var(--k-line);border-radius:var(--k-r-sm);background:var(--k-page);font:var(--t-fs-body,13px) var(--k-font);color:var(--k-text);text-overflow:ellipsis}
.rl-topbar .k-topsearch input::placeholder{color:var(--k-muted);opacity:1}
.rl-topbar .k-topsearch input:focus{outline:0;border-color:var(--k-primary);background:var(--k-card);box-shadow:0 0 0 3px color-mix(in srgb,var(--k-primary) 14%,transparent)}
.k-topsearch__btn{display:none;flex:0 0 38px;width:38px;height:38px;padding:0;margin:0;align-items:center;justify-content:center;border:1px solid var(--k-line);border-radius:var(--k-r-sm);background:var(--k-card);color:var(--k-muted);cursor:pointer}
.k-topsearch__btn:focus-visible{outline:2px solid var(--k-primary);outline-offset:2px}
@media (max-width:520px){
  .rl-topbar .rl-search.k-topsearch{flex:0 0 auto;max-width:none}
  .k-topsearch__btn{display:inline-flex}
  .k-topsearch:not(.is-open)>.k-topsearch__box{display:none}
  .k-topsearch.is-open{position:absolute;left:8px;right:8px;top:11px;z-index:30;background:var(--k-card)}
  .k-topsearch.is-open>.k-topsearch__btn{display:none}
  .k-topsearch.is-open>.k-topsearch__box{display:flex;flex:1 1 auto;position:relative;align-items:center}
}
.k-topsearch__box{display:flex;align-items:center;flex:1 1 auto;min-width:0;position:relative}
/* the client pill keeps ~16 characters, then "…"; the full name is in the user menu (never a bare arrow) */
.rl-topbar .rl-client .cn{min-width:0;display:block}
.rl-topbar .rl-client b{max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl-umenu-client{padding:8px 14px;border-bottom:1px solid var(--rl-line-soft,var(--k-line));font-size:var(--t-fs-small,12px);color:var(--k-muted)}
.rl-umenu-client b{display:block;color:var(--k-text);font-size:var(--t-fs-body,13px);font-weight:600;overflow-wrap:anywhere}
@media (max-width:760px){
  .rl-topbar .rl-client .cn{display:block}
  .rl-topbar .rl-client{padding:0 10px 0 5px;max-width:none;flex:0 1 auto;min-width:0}
  .rl-topbar .rl-client:not(:has(.cg)){padding-left:10px}
  .rl-topbar span.rl-client:not(:has(.cg)){display:inline-flex}
  .rl-topbar .rl-client .sw{display:none}
  .rl-topbar .rl-top-actions{min-width:0;gap:6px}
}
@media (max-width:420px){.rl-topbar .rl-client b{max-width:12ch}.rl-topbar{gap:8px!important;padding:0 12px!important}}
/* menu captions in sentence case; the menu footer scrolls with the menu (never covers an item) */
.rl-sidebar .rl-nav-section{text-transform:none;letter-spacing:0;font-size:var(--t-fs-small,12px)}
.rl-sidebar{overflow-y:auto;overscroll-behavior:contain}
.rl-sidebar>.rl-nav{flex:1 0 auto;overflow:visible}
.rl-sidebar>.rl-side-foot{flex:none}
/* the floating help button: 48 px, 16 px from the corner; the page leaves room under the last row */
.fab-rail{right:16px!important;bottom:16px!important}
.fab-rail [id="eb-fab"],.fab-rail .k-fab{width:var(--k-fab)!important;height:var(--k-fab)!important;flex:0 0 var(--k-fab)!important}
main.rl-content{padding-bottom:calc(var(--k-fab) + 32px)!important}
body.k-modal-open .fab-rail,body.modal-open .fab-rail,body.k-menu-open .fab-rail,body:has(.rl-sidebar.open) .fab-rail,body:has(.k-lb-back:not([hidden])) .fab-rail{display:none!important}

/* =====================================================================================================================
   ALIASES -- old class names drawn with the kit's look so that screens not yet converted match it.
   Every rule in this block: "remove after Part 11 rounds" (listed in /mnt/attach/work/11/DONE_CORE).
   ===================================================================================================================== */
/* remove after Part 11 rounds: .alert / .alert-* (Django messages in base.html and 22 templates) = k-note */
.alert,.mk .alert{display:block;border:1px solid;border-left-width:3px;border-radius:10px;padding:10px 14px;font:var(--t-fs-body,13px)/1.5 var(--k-font);color:var(--k-text);margin-bottom:14px}
.alert-info,.mk .alert-info{background:color-mix(in srgb,var(--k-primary) 6%,var(--k-card));border-color:color-mix(in srgb,var(--k-primary) 22%,var(--k-card));border-left-color:var(--k-primary);color:var(--k-text)}
.alert-success,.mk .alert-success{background:color-mix(in srgb,var(--k-ok) 8%,var(--k-card));border-color:color-mix(in srgb,var(--k-ok) 28%,var(--k-card));border-left-color:var(--k-ok);color:var(--k-text)}
.alert-warning,.mk .alert-warning{background:color-mix(in srgb,var(--k-warn) 10%,var(--k-card));border:1px solid color-mix(in srgb,var(--k-warn) 35%,var(--k-card));border-left:3px solid var(--k-warn);color:var(--k-text)}
.alert-danger,.mk .alert-danger,.alert-error{background:color-mix(in srgb,var(--k-bad) 7%,var(--k-card));border-color:color-mix(in srgb,var(--k-bad) 28%,var(--k-card));border-left-color:var(--k-bad);color:var(--k-text)}
/* remove after Part 11 rounds: the shared empty states (app.css .empty-state, design.css .mk .empty / .lempty / .empty-state) = k-empty */
.empty-state,.mk .empty,.mk .lempty,.mk .empty-state{text-align:center;padding:28px 16px;color:var(--k-muted);font:var(--t-fs-body,13px)/1.5 var(--k-font);border:0;background:none}
/* remove after Part 11 rounds: the danger buttons ui_standardise.js marks = k-btn--danger colours (white, red outline, never filled) */
.rl-content .ui-action-danger.ui-action-danger{background:var(--k-card)!important;border:1px solid color-mix(in srgb,var(--k-bad) 45%,var(--k-card))!important;color:var(--k-bad-ink)!important}