/* ============================================================================
Kalé Deep Sea — support portal design system
Added 2026-09-02 (UI modernisation, phase 1).
Source of truth for colour and type is the Kalé Harmonics 1.01 "Deep Sea"
identity. Reference the tokens below; never introduce a raw hex in a page.
Load order matters: this file comes AFTER Styles/Custom.css so it wins where
the two disagree. Legacy pages still carry inline style attributes, and an
inline style beats any stylesheet — those are removed screen by screen as
each page is converted.
========================================================================= */
:root {
/* ---- palette ---- */
--deep-sea: #081F4B;
--noon: #EB4A26;
--blue-sea: #3B97FF;
--evening-sky: #76CBFF;
--iceberg: #B6E3FF;
--snow: #FFFFFF;
--morning: #FCF0D9;
--twilight: #ECECE4;
--road: #585858;
--night: #202020;
/* ---- roles ---- */
--app-bg: #F5F5F0;
--surface: var(--snow);
--surface-quiet: #F7F7F3;
--border: #E4E4DA;
--border-input: #C9CFD9;
--text: var(--night);
--text-strong: var(--deep-sea);
--text-meta: var(--road);
--link: #1f6fd0;
/* ---- status (always paired with a word) ---- */
--ok: #2e7d32; --ok-bg: #e8f5e9;
--warn: #e65100; --warn-bg: #fff3e0;
--danger: #c62828; --danger-bg: #fbe9e7;
--info: #1f6fd0; --info-bg: #e3f1ff;
/* ---- type ---- */
--f-body: 'Roboto', -apple-system, 'Segoe UI', Arial, sans-serif;
--f-tech: 'Chakra Petch', 'Roboto', -apple-system, 'Segoe UI', Arial, sans-serif;
--f-mono: 'Roboto Mono', Consolas, Monaco, 'Courier New', monospace;
/* ---- spacing (8px grid) ---- */
--s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px; --s6: 64px;
--shadow-1: 0 1px 2px rgba(8, 31, 75, .05);
--shadow-2: 0 6px 20px rgba(8, 31, 75, .10);
--side-w: 216px;
}
/* ============================ base ============================ */
html, body { margin: 0; padding: 0; }
body {
background: var(--app-bg);
color: var(--text);
font-family: var(--f-body);
font-size: 13px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--link); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
outline: 2px solid var(--blue-sea);
outline-offset: 2px;
}
/* ============================ app shell ============================ */
.k-app { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100vh; }
.k-main { display: flex; flex-direction: column; min-width: 0; }
/* ---- sidebar ---- */
.k-side { background: var(--deep-sea); color: var(--snow); padding: 16px 0 32px; }
.k-side-brand { padding: 0 16px 16px; border-bottom: 1px solid rgba(255,255,255,.14); margin-bottom: 8px; }
/* align-self guards against the column-flex stretch that squashes a logo when a
brand panel is a flex container (it caught out the sign-in page). */
.k-side-brand img { display: block; height: 30px; width: auto; align-self: flex-start; border: 0; cursor: pointer; }
.k-navgroup {
font-family: var(--f-tech); font-size: 10px; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase;
color: var(--evening-sky); padding: 16px 16px 6px;
}
/* Server controls render as ; style them as nav rows. */
.k-nav {
display: block; width: 100%; text-align: left;
background: transparent; color: #D6E4F5;
border: 0; border-left: 3px solid transparent;
padding: 9px 16px; font-family: var(--f-body); font-size: 13px;
cursor: pointer; text-decoration: none;
}
.k-nav:hover { background: rgba(182,227,255,.08); color: var(--snow); }
.k-nav.k-nav-on,
.k-nav[disabled] {
background: rgba(182,227,255,.10);
border-left-color: var(--iceberg);
color: var(--snow); font-weight: 500;
}
.k-nav[disabled] { cursor: default; opacity: 1; }
/* ---- topbar ---- */
.k-top {
display: flex; align-items: center; gap: var(--s3);
background: var(--surface); border-bottom: 1px solid var(--border);
padding: 12px 22px; flex-wrap: wrap;
}
.k-top h1, .k-top .k-title {
margin: 0; font-size: 19px; font-weight: 700;
color: var(--text-strong); letter-spacing: -.01em;
}
.k-spacer { flex: 1 1 auto; }
.k-who { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--text-meta); }
.k-avatar {
width: 28px; height: 28px; border-radius: 50%;
background: var(--deep-sea); color: var(--snow);
display: grid; place-items: center;
font-family: var(--f-tech); font-size: 11px; font-weight: 600;
}
/* ---- content ---- */
.k-content { padding: 22px; display: flex; flex-direction: column; gap: 20px; }
/* ---- footer ---- */
.k-foot {
margin-top: auto; background: var(--deep-sea); color: var(--evening-sky);
padding: 14px 22px; font-family: var(--f-mono); font-size: 11px;
display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
}
/* ============================ notice ============================ */
.k-notice {
border-left: 4px solid var(--warn); background: var(--warn-bg);
color: var(--warn); padding: 10px 14px; font-size: 13px;
}
.k-notice:empty { display: none; }
/* ============================ buttons ============================ */
.k-btn {
display: inline-block; font-family: var(--f-body); font-size: 12.5px; font-weight: 500;
padding: 8px 15px; border: 1px solid transparent; border-radius: 8px;
cursor: pointer; text-decoration: none; line-height: 1.4;
transition: filter 140ms cubic-bezier(0.2, 0, 0, 1);
}
.k-btn:hover { filter: brightness(.94); }
.k-btn-primary { background: var(--noon); color: var(--snow); }
.k-btn-secondary { background: var(--surface); color: var(--text-strong); border-color: var(--border-input); }
.k-btn-ghost { background: transparent; color: var(--text-strong); }
.k-btn[disabled] { opacity: .55; cursor: default; filter: none; }
/* ============================ cards ============================ */
.k-card { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1); }
.k-card-h {
display: flex; align-items: center; gap: 12px;
padding: 13px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.k-card-h h2, .k-card-h h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-strong); }
.k-card-b { padding: 18px; }
/* ============================ KPI ============================ */
.k-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.k-kpi { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--deep-sea); padding: 14px 16px; }
.k-kpi-lab {
font-family: var(--f-tech); font-size: 10px; font-weight: 600;
letter-spacing: .13em; text-transform: uppercase; color: var(--text-meta);
}
.k-kpi-val { font-size: 32px; font-weight: 700; color: var(--text-strong); line-height: 1.1; margin-top: 5px; font-variant-numeric: tabular-nums; }
.k-kpi-sub { font-size: 11.5px; color: var(--text-meta); margin-top: 3px; }
.k-kpi-warn { border-top-color: var(--warn); } .k-kpi-warn .k-kpi-val { color: var(--warn); }
.k-kpi-ok { border-top-color: var(--ok); } .k-kpi-ok .k-kpi-val { color: var(--ok); }
/* ============================ dashboard ============================ */
/* KPI tiles are links: each number traces back to the rows that produced it. */
a.k-kpi-link { display: block; text-decoration: none; color: inherit; }
a.k-kpi-link:hover { border-color: var(--border-input); box-shadow: var(--shadow-2); }
.k-kpi-link .k-kpi-lab, .k-kpi-link .k-kpi-val, .k-kpi-link .k-kpi-sub { display: block; }
.k-slagrid { display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: center; }
.k-slabig { font-size: 44px; font-weight: 700; line-height: 1; color: var(--ok); font-variant-numeric: tabular-nums; }
.k-statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 18px; }
.k-stat { display: flex; flex-direction: column; gap: 3px; }
.k-stat-lab { font-family: var(--f-tech); font-size: 10px; font-weight: 600; letter-spacing: .13em;
text-transform: uppercase; color: var(--text-meta); }
.k-stat-val { font-size: 21px; font-weight: 700; color: var(--text-strong); line-height: 1.15;
font-variant-numeric: tabular-nums; }
.k-ok-text { color: var(--ok); }
.k-bad-text { color: var(--danger); }
.k-unit { font-size: 12px; font-weight: 400; color: var(--text-meta); margin-left: 3px; }
/* Numeric matrix: figures right-aligned on tabular numerals so columns line up. */
.k-matrix td.k-r, .k-matrix th.k-r { text-align: right; }
.k-matrix td.k-r { font-family: var(--f-mono); font-variant-numeric: tabular-nums; color: var(--text-strong); }
.k-matrix td.k-tot { font-weight: 700; border-right: 1px solid var(--border); padding-right: 14px; }
.k-matrix td:first-child { font-weight: 500; color: var(--text-strong); }
@media (max-width: 820px) {
.k-slagrid { grid-template-columns: 1fr; gap: 16px; }
}
/* ============================ status chips ============================ */
.k-chip {
display: inline-block; font-family: var(--f-mono); font-size: 9.5px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px;
border: 1px solid; white-space: nowrap;
}
.k-chip-new { color: var(--info); border-color: var(--info); background: var(--info-bg); }
.k-chip-act { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); }
.k-chip-ok { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); }
.k-chip-bad { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }
.k-chip-mute { color: var(--text-meta); border-color: var(--border); background: var(--surface-quiet); }
/* severity: colour bar plus the word, never colour alone */
.k-sev { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; }
.k-sev::before { content: ""; width: 3px; height: 13px; background: currentColor; }
.k-sev-crit { color: var(--danger); } .k-sev-high { color: var(--warn); }
.k-sev-med { color: var(--info); } .k-sev-low { color: var(--text-meta); }
/* ============================ page head ============================ */
.k-page-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.k-page-head h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text-strong); letter-spacing: -.01em; }
/* ============================ severity summary ============================
Counts lead and the proportion bar follows. A purely proportional bar hides
the small-but-urgent: four Critical out of four hundred is a one-percent
sliver, which is exactly the number that must not be missed. */
.k-sevwrap { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1); }
.k-sevstrip { display: flex; align-items: stretch; flex-wrap: wrap; }
.k-sevcell { display: flex; align-items: center; gap: 11px; padding: 13px 20px; border-right: 1px solid var(--surface-quiet); }
.k-sevcell:last-of-type { border-right: none; }
.k-sevmark { width: 4px; align-self: stretch; min-height: 36px; background: currentColor; }
.k-sevnum { font-size: 25px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text-strong); display: block; }
.k-sevlab { font-family: var(--f-tech); font-size: 10px; font-weight: 600; letter-spacing: .13em;
text-transform: uppercase; color: var(--text-meta); display: block; margin-top: 3px; }
.k-sevtotal { margin-left: auto; padding: 13px 20px; border-left: 1px solid var(--surface-quiet); display: flex; align-items: center; }
.k-sevdist { display: flex; height: 6px; background: var(--surface-quiet); }
.k-sevdist i { display: block; min-width: 10px; background: currentColor; }
/* The severity classes carry the colour; mark, number and bar all inherit it. */
.k-sevcell .k-sev-crit, .k-sevdist .k-sev-crit { color: var(--danger); }
.k-sevcell .k-sev-high, .k-sevdist .k-sev-high { color: var(--warn); }
.k-sevcell .k-sev-med, .k-sevdist .k-sev-med { color: var(--info); }
.k-sevcell .k-sev-low, .k-sevdist .k-sev-low { color: #9A9A90; }
.k-sevnum.k-sev-crit { color: var(--danger); }
.k-sevnum.k-sev-high { color: var(--warn); }
.k-sevnum.k-sev-med { color: var(--info); }
.k-sevnum.k-sev-low { color: var(--text-meta); }
/* ============================ filter panel ============================ */
.k-filterset { border: 1px solid var(--border); background: var(--surface); padding: 0 0 14px; margin: 0; }
.k-filter-toggle { padding: 12px 18px; cursor: pointer; border-bottom: 1px solid var(--border); }
.k-filter-toggle a { color: var(--text-strong) !important; text-decoration: none; font-weight: 500;
background: transparent !important; }
/* ============================ tables ============================
Also styles what GridView emits, which is a plain . Scoped to
.k-table so legacy layout tables are left alone until their page is done. */
.k-scroll { overflow-x: auto; }
.k-table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--surface); }
.k-table th,
.k-table > tbody > tr:first-child > th {
font-family: var(--f-tech); font-size: 9.5px; font-weight: 600;
letter-spacing: .11em; text-transform: uppercase; text-align: left;
color: var(--text-strong); padding: 8px 12px 8px 0;
border-bottom: 2px solid var(--deep-sea); white-space: nowrap; background: var(--surface);
}
.k-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--surface-quiet); vertical-align: top; }
.k-table tr:last-child td { border-bottom: none; }
.k-table a { color: var(--link); text-decoration: none; }
.k-table a:hover { text-decoration: underline; }
.k-num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ============================ forms ============================ */
.k-field { display: flex; flex-direction: column; gap: 5px; }
.k-field label,
.k-label {
font-family: var(--f-tech); font-size: 10px; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase; color: var(--text-meta);
}
.k-req { color: var(--noon); }
.k-input,
.k-form input[type="text"], .k-form input[type="password"],
.k-form input[type="email"], .k-form textarea, .k-form select {
border: 1px solid var(--border-input); background: var(--surface);
padding: 8px 11px; font-family: var(--f-body); font-size: 13px;
color: var(--text); min-height: 36px; border-radius: 0;
}
.k-form textarea { min-height: 96px; line-height: 1.55; }
.k-input:focus, .k-form input:focus, .k-form textarea:focus, .k-form select:focus {
border-color: var(--blue-sea); outline: none; box-shadow: 0 0 0 2px rgba(59,151,255,.18);
}
.k-hint { font-size: 11px; color: var(--text-meta); }
.k-hint-err { color: var(--danger); }
.k-input-bad { border-color: var(--danger); }
/* ============================ utility ============================ */
.k-meta { color: var(--text-meta); font-size: 11.5px; }
.k-strong { color: var(--text-strong); font-weight: 700; }
.k-mono { font-family: var(--f-mono); }
.k-visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ============================ responsive ============================
Desktop is the design target. These rules keep the shell usable on a
narrow screen; they are not a mobile-first layout. */
@media (max-width: 900px) {
.k-app { grid-template-columns: 1fr; }
.k-side { padding-bottom: 12px; }
.k-side-brand { border-bottom: none; margin-bottom: 0; }
.k-navgroup { padding-top: 10px; }
.k-nav { display: inline-block; width: auto; border-left: 0; border-bottom: 3px solid transparent; }
.k-nav.k-nav-on, .k-nav[disabled] { border-left: 0; border-bottom-color: var(--iceberg); }
.k-content { padding: 14px; }
.k-top { padding: 12px 14px; }
}
@media print {
.k-side, .k-top .k-btn, .k-foot { display: none !important; }
.k-app { grid-template-columns: 1fr; }
body { background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
/* ============================================================================
LEGACY COMPATIBILITY LAYER
Added 2026-09-02.
The portal carries about a dozen legacy class names across its screens —
style2 (353 uses), tbox, tdsty, classbtn, w3-round-large and so on. Rewriting
the markup of fifteen pages to remove them all at once would be a large,
risky change for a purely visual gain.
Instead these rules restyle the OLD names in the NEW language, so every
screen picks up the design system immediately. As each page is converted
properly its entries here become dead, and the block shrinks. It is scaffolding,
not architecture — do not add to it for new work; use the k- classes.
========================================================================= */
/* ---- inputs ---- */
input.style2[type="text"], input.style2[type="password"], select.style2, textarea.style2,
input.tbox[type="text"], select.tbox, textarea.tbox,
input.txtbox[type="text"], select.txtbox,
select.drpDwn, select.drpdwn2, select.drpDwn4status,
input.width[type="text"], input.width2[type="text"], input.width4[type="text"],
input.textEntry[type="text"], input.passwordEntry[type="password"],
input.time[type="text"], input.dates[type="text"], input.start[type="text"], input.end[type="text"] {
border: 1px solid var(--border-input); background: var(--surface);
padding: 7px 10px; font-family: var(--f-body); font-size: 13px;
color: var(--text); min-height: 34px; border-radius: 0; box-sizing: border-box;
}
input.style2:focus, select.style2:focus, textarea.style2:focus,
input.tbox:focus, select.tbox:focus, input.txtbox:focus,
select.drpDwn:focus, select.drpdwn2:focus {
border-color: var(--blue-sea); outline: none; box-shadow: 0 0 0 2px rgba(59,151,255,.18);
}
/* ---- labels: the same class is used on captions, so target the rendered span ---- */
span.style2, span.lblCust, span.Text, span.label, td.tdsty span, .lblCust {
color: var(--text); font-family: var(--f-body); font-size: 13px;
}
/* ---- buttons ---- */
input.classbtn[type="submit"], input.classbtn[type="button"],
input.btnSubmit[type="submit"], input.btnSubmit[type="button"],
a.classbtn, a.btnSubmit {
display: inline-block; background: var(--surface); color: var(--text-strong);
border: 1px solid var(--border-input); border-radius: 8px;
padding: 8px 15px; font-family: var(--f-body); font-size: 12.5px; font-weight: 500;
cursor: pointer; text-decoration: none; line-height: 1.4;
}
input.classbtn:hover, input.btnSubmit:hover { filter: brightness(.94); }
input.orange-btn[type="submit"], input.orange-btn[type="button"], a.orange-btn {
background: var(--noon); color: var(--snow); border-color: var(--noon);
border-radius: 8px; padding: 8px 15px; font-size: 12.5px; font-weight: 500; cursor: pointer;
}
/* ---- page headings ---- */
.Title { margin: 0 0 4px; }
.Title h2 { margin: 0; font-size: 15px; line-height: 1.15; font-weight: 700; color: var(--text-strong); letter-spacing: -.01em; }
/* ---- containers ---- */
.PageBorder, .list_table, .tbl, .tbl2, .table1, .main1, .backgrnd {
border: 0; background: transparent;
}
fieldset.PageBorder { border: 1px solid var(--border); background: var(--surface); padding: 0 0 14px; }
.w3-round-large { border-radius: 0 !important; }
.w3-border { border: 1px solid var(--border) !important; }
td.tdsty { padding: 7px 10px; vertical-align: middle; }
/* ---- grids rendered with the old classes ---- */
.Grid { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--surface); }
.Grid td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--surface-quiet); }
.Grid th, .GridHeader th, tr.GridHeader td, tr.GridHeader th {
font-family: var(--f-tech); font-size: 9.5px; font-weight: 600; letter-spacing: .11em;
text-transform: uppercase; text-align: left; color: var(--text-strong);
background: var(--surface); padding: 8px 12px 8px 0;
border-bottom: 2px solid var(--deep-sea);
}
.GridHeader a, .Grid th a { color: var(--text-strong); text-decoration: none; }
.Paging td, tr.Paging td { padding-top: 12px; }
.Paging a, .Paging span {
display: inline-grid; place-items: center; min-width: 26px; height: 26px;
border: 1px solid var(--border-input); background: var(--surface);
font-family: var(--f-mono); font-size: 11.5px; color: var(--text-strong);
text-decoration: none; margin-right: 4px; padding: 0 6px;
}
.Paging span { background: var(--deep-sea); color: var(--snow); border-color: var(--deep-sea); }
/* ---- validation and messages ---- */
.SpanRed, .failureNotification, .errmsg { color: var(--danger); font-size: 12px; }
/* ---- collapsible filter headers used on several screens ---- */
.header { padding: 10px 14px; cursor: pointer; }
.header a { color: var(--text-strong) !important; text-decoration: none; font-weight: 500;
background: transparent !important; }
/* ============================ forms: multi-field layout ==================== */
/* Fields flow into as many columns as fit, so nothing has a hand-tuned pixel
width that breaks at a different zoom or window size. */
.k-formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 16px 20px; align-items: start; }
.k-formgrid .k-col-2 { grid-column: span 2; }
.k-formgrid .k-col-3 { grid-column: span 3; }
.k-formgrid-top { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--surface-quiet); }
.k-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.k-field .k-input, .k-field select.k-input { width: 100%; box-sizing: border-box; }
.k-textarea { min-height: 84px; resize: vertical; font-family: var(--f-body); line-height: 1.5; }
.k-readonly { background: var(--surface-quiet); color: var(--text-meta); cursor: not-allowed; }
.k-req { color: var(--danger); font-weight: 700; }
.k-hint { font-size: 11.5px; color: var(--text-meta); }
.k-err { font-size: 12px; color: var(--danger); }
.k-inline { display: flex; align-items: center; gap: 6px; }
.k-inline .k-input { flex: 1 1 auto; }
.k-inline img { flex: 0 0 auto; cursor: pointer; border: 0; }
.k-actions-bar { display: flex; justify-content: flex-end; align-items: center; gap: 10px;
margin: 4px 0 20px; }
/* ============================ timeline ==================================== */
/* Comments and history: one column, newest entries readable as a sequence
rather than a three-cell table row. */
.k-timeline { list-style: none; margin: 16px 0 0; padding: 0 0 0 18px;
border-left: 2px solid var(--surface-quiet); }
.k-timeline li { position: relative; padding: 0 0 18px 14px; }
.k-timeline li:last-child { padding-bottom: 0; }
.k-timeline li::before { content: ""; position: absolute; left: -25px; top: 4px;
width: 13px; height: 13px; border-radius: 50%;
background: var(--surface); border: 2px solid var(--blue-sea); }
.k-tl-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-bottom: 3px; }
.k-tl-when { font-family: var(--f-mono); font-size: 11px; color: var(--text-meta); }
.k-tl-who { font-size: 12px; font-weight: 600; color: var(--text-strong); }
.k-tl-body { font-size: 13px; color: var(--text); line-height: 1.55; white-space: pre-wrap; }
@media (max-width: 700px) {
.k-formgrid { grid-template-columns: 1fr; }
.k-formgrid .k-col-2, .k-formgrid .k-col-3 { grid-column: span 1; }
}
/* ============================ two-column record layout ==================== */
/* The problem on the left, the record's metadata on the right. The aside is a
fixed width so the form column never stretches to a full-width line length. */
.k-two-col { display: grid; grid-template-columns: minmax(0, 1fr) 336px;
gap: 20px; align-items: start; }
.k-main-col, .k-side-col { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.k-side-col .k-card-b { padding: 16px 18px; }
.k-stack { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1100px) {
.k-two-col { grid-template-columns: 1fr; }
}
/* Severity accent — same colour vocabulary as the incident list chips. */
.k-sevpick { border-left-width: 3px; }
.k-sevpick.k-sev-crit { border-left-color: var(--danger); }
.k-sevpick.k-sev-high { border-left-color: var(--warn); }
.k-sevpick.k-sev-med { border-left-color: var(--blue-sea); }
.k-sevpick.k-sev-low { border-left-color: var(--border-input); }
/* Attachments: a real drop target rather than a bare file input. */
.k-dropzone { margin-top: 12px; padding: 14px; border: 1px dashed var(--border-input);
background: var(--surface-quiet); display: flex; flex-direction: column;
gap: 10px; align-items: flex-start; }
.k-dropzone input[type="file"] { font-size: 12px; max-width: 100%; }
.k-btn-sm { padding: 5px 11px; font-size: 12px; }
.k-table-tight td, .k-table-tight th { padding: 6px 8px 6px 0; font-size: 12px; }
/* ---- About panel: label beside the field, not above it -------------------
In the main column a label sits above its input, because those fields are
wide and the eye reads down. The About panel is a narrow column of short
values, so stacking the label wastes half the height. Here the label takes a
fixed left gutter and the control fills the rest, which lines every value up
on a single vertical edge and roughly halves the panel. */
.k-side-col .k-field {
display: grid;
grid-template-columns: 104px minmax(0, 1fr);
align-items: start;
gap: 4px 10px;
}
.k-side-col .k-field > .k-label {
padding-top: 9px; /* aligns the cap-height with the input's text */
line-height: 1.25;
word-break: break-word; /* "test scenario / case id" wraps, never clips */
}
/* Hints and validation messages belong under the control, not under the label. */
.k-side-col .k-field > .k-hint,
.k-side-col .k-field > .k-err,
.k-side-col .k-field > span.k-hint,
.k-side-col .k-field > span.k-err { grid-column: 2; }
.k-side-col .k-stack { gap: 10px; }
/* ============================ compact record layout ======================
Tightens the add/edit screen so the whole record fits without scrolling on a
normal laptop. Nothing is hidden or removed — the same fields, less air.
Scoped to .k-two-col so list and dashboard pages keep their roomier rhythm. */
/* Six supporting fields in two tidy rows of three, rather than a 4 + 2 split
with a divider between them. */
.k-formgrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1400px) { .k-formgrid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .k-formgrid-3 { grid-template-columns: 1fr; } }
.k-two-col { gap: 14px; }
.k-two-col .k-main-col, .k-two-col .k-side-col { gap: 14px; }
.k-two-col .k-card-b { padding: 14px 18px; }
.k-two-col .k-card-h { padding: 10px 18px; }
.k-two-col .k-field { gap: 3px; }
.k-two-col .k-formgrid { gap: 11px 16px; }
.k-two-col .k-formgrid-top { margin-top: 13px; padding-top: 13px; }
/* Textareas keep a sane floor but no longer reserve ten rows of empty space.
Both stay resizable, so anyone pasting a long log can still drag them open. */
.k-two-col .k-textarea { min-height: 76px; }
.k-two-col .k-textarea-sm { min-height: 54px; }
.k-two-col + .k-actions-bar { margin: 0 0 16px; }
/* ---- denser pass: fit the whole record on one laptop screen --------------
Everything below only tightens metrics — no field is hidden, truncated or
removed, and every control stays at a comfortable click target. Still scoped
to .k-two-col so the list and dashboard keep their roomier rhythm. */
.k-two-col .k-input,
.k-two-col select.k-input,
.k-two-col input.k-input { min-height: 29px; padding: 4px 9px; font-size: 12.5px; }
.k-two-col .k-label { font-size: 9px; letter-spacing: .1em; line-height: 1.2; }
.k-two-col .k-hint { font-size: 11px; line-height: 1.35; }
.k-two-col .k-field { gap: 2px; }
.k-two-col .k-formgrid { gap: 9px 14px; }
.k-two-col .k-formgrid-top { margin-top: 11px; padding-top: 11px; }
.k-two-col .k-card-b { padding: 12px 16px; }
.k-two-col .k-card-h { padding: 8px 16px; }
.k-two-col .k-card-h h3 { font-size: 13px; }
.k-two-col, .k-two-col .k-main-col, .k-two-col .k-side-col { gap: 10px; }
.k-two-col .k-textarea { min-height: 62px; }
.k-two-col .k-textarea-sm { min-height: 44px; }
/* About panel: narrower gutter, and the label's top padding re-matched to the
shorter input so captions still line up with the text inside the control. */
.k-side-col .k-field { grid-template-columns: 96px minmax(0, 1fr); gap: 3px 9px; }
.k-side-col .k-field > .k-label { padding-top: 7px; }
.k-side-col .k-stack { gap: 7px; }
/* History can grow without limit as an incident ages. Capping it keeps the
form itself on screen; the list scrolls in place instead of the page. */
.k-two-col .k-timeline { max-height: 300px; overflow-y: auto; margin-top: 12px; }
.k-two-col .k-timeline li { padding-bottom: 13px; }
.k-page-head { margin-bottom: 10px; }
/* ---- breathing room back between stacked fields -------------------------
.k-card-b was a plain block, so consecutive .k-field divs had no separation
at all — a field's hint text ran straight into the next field's label. The
earlier compaction made that collision obvious rather than causing it. */
.k-two-col .k-card-b { display: flex; flex-direction: column; gap: 13px; }
.k-two-col .k-card-b > .k-formgrid-top { margin-top: 0; padding-top: 13px; }
/* ---- About panel: two fields per row ------------------------------------
A single column of short values wasted most of the panel's width and made it
twice as tall as it needed to be. Labels go back above their control here —
at ~170px per field there is no room for a side gutter — and short fields
pair up. Product and Root cause analysis keep the full width because their
option text is long enough to truncate at half. */
.k-side-col .k-stack {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 11px 12px;
align-items: start;
}
.k-side-col .k-field {
display: flex; /* overrides the earlier label-beside grid */
flex-direction: column;
gap: 3px;
}
.k-side-col .k-field > .k-label { padding-top: 0; }
.k-side-col .k-field.k-wide { grid-column: span 2; }
.k-side-col .k-stack .k-formgrid-top { grid-column: span 2; margin-top: 2px; padding-top: 11px; }
/* The panel earns a little more width now that it carries two columns. */
.k-two-col { grid-template-columns: minmax(0, 1fr) 384px; }
@media (max-width: 1100px) { .k-two-col { grid-template-columns: 1fr; } }
/* ---- page chrome: shorter header strip ----------------------------------
The band above the first card was three separate spacings stacked: 22px of
content padding, a 20px flex gap, and a 10px margin under the heading. Each
looked reasonable alone; together they cost about 50px on every page.
Applied globally rather than to the record screen, so all pages keep the same
chrome and only the content density differs between them. */
.k-content { padding: 15px 18px; gap: 14px; }
.k-page-head { align-items: center; margin-bottom: 0; }
.k-page-head h2 { font-size: 16px; }
/* Buttons drop to the same 29px as the inputs they sit alongside, so a control
row reads as one line rather than two heights. Still a comfortable target. */
.k-btn { padding: 6px 13px; font-size: 12px; }
.k-btn-sm { padding: 4px 10px; font-size: 11.5px; }
@media (max-width: 900px) { .k-content { padding: 12px; gap: 12px; } }
/* ============================================================================
LEGACY FORM STRUCTURE — lifts un-converted pages to the card look
Added 2026-09-02.
Several screens still carry