/* ================================================================
KADAMBA — Design System CSS · v1.6 · 2026-06-15
Compiled static stylesheet — zero CSS custom properties.
Every colour, size and spacing value is a resolved literal.
To switch the typeface, find-replace this exact string:
Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif
Class prefix: kd-
── Palette ──────────────────────────────────────────────────────
Blue #02338C primary fill · primary text on white · table header bg
Orange #F06901 accent fill · accent text on white · note border
White #FFFFFF page bg · text on blue/orange fills
Surface #F5F7FB panels · cards · inputs · table zebra bg
Border #D0D8EE dividers · input edges · card edges · row separators
Text muted #5A6E99 secondary labels · hints · captions
Mid blue #4A5E8A .kd-sub supporting data lines (between blue & muted)
Success #059669 positive outcomes · success badges/verdicts
Danger #DC2626 error states · destructive actions
Warning #F59E0B warning badges · wide/no-ball indicators
── Text on fill rules ───────────────────────────────────────────
On blue fill → white (#FFFFFF)
On orange fill (solid) → white (#FFFFFF)
On orange tint / outline → blue (#02338C)
On white → blue (#02338C) primary · #5A6E99 muted
── Breakpoints ──────────────────────────────────────────────────
Mobile < 768px Tablet 768px–1199px Desktop ≥ 1200px
================================================================ */
/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
button { cursor: pointer; }
img, svg { display: block; }
a { color: inherit; }
/* ── Base ─────────────────────────────────────────────────────── */
body {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
line-height: 1.5;
color: #02338C;
background: #FFFFFF;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-variant-numeric: tabular-nums;
}
/* ── Typography ───────────────────────────────────────────────── */
.kd-heading-1 {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
color: #02338C;
}
.kd-heading-2 {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1.3;
color: #02338C;
}
.kd-heading-3 {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
color: #02338C;
}
.kd-label {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #5A6E99;
}
.kd-body {
font-size: 13px;
font-weight: 400;
line-height: 1.5;
color: #02338C;
}
.kd-body-muted {
font-size: 13px;
font-weight: 400;
line-height: 1.5;
color: #5A6E99;
}
.kd-caption {
font-size: 11px;
font-weight: 400;
line-height: 1.4;
color: #5A6E99;
}
.kd-mono {
font-family: 'Fira Code', 'Cascadia Code', Consolas, monospace;
font-size: 12px;
color: #02338C;
}
/* Supporting data line beneath a KPI — e.g. "econ 7.4 · BPD 22.4".
Darker and heavier than caption. */
.kd-sub {
font-size: 12px;
font-weight: 500;
line-height: 1.4;
color: #4A5E8A;
}
/* Callout block — orange left rule on a faint orange tint */
.kd-note {
font-size: 13px;
font-weight: 400;
line-height: 1.5;
color: #02338C;
border-left: 3px solid #F06901;
padding: 6px 10px;
background: rgba(240, 105, 1, 0.04);
}
.kd-note strong { color: #F06901; }
/* Verdict card — neutral by default; --success / --danger tint variants */
.kd-verdict {
background: #F5F7FB;
border: 1px solid #D0D8EE;
border-radius: 4px;
padding: 12px 14px;
}
.kd-verdict__title {
font-size: 14px;
font-weight: 700;
color: #02338C;
}
.kd-verdict__sub {
font-size: 12px;
font-weight: 400;
color: #5A6E99;
}
.kd-verdict--success {
background: #ECFDF5;
border-color: #A7F3D0;
}
.kd-verdict--success .kd-verdict__title { color: #059669; }
.kd-verdict--danger {
background: #FEF2F2;
border-color: #FECACA;
}
.kd-verdict--danger .kd-verdict__title { color: #DC2626; }
@media (min-width: 768px) {
.kd-heading-1 { font-size: 18px; }
.kd-heading-2 { font-size: 15px; }
}
@media (min-width: 1200px) {
.kd-heading-1 { font-size: 20px; }
}
/* ================================================================
BUTTONS
================================================================ */
.kd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 18px;
border: 1.5px solid transparent;
border-radius: 3px;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
user-select: none;
-webkit-user-select: none;
transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
position: relative;
}
/* Primary — blue fill */
.kd-btn--primary {
background: #02338C;
color: #FFFFFF;
border-color: #02338C;
}
.kd-btn--primary:hover { background: #022b74; border-color: #022b74; }
.kd-btn--primary:active { background: #012160; border-color: #012160; }
.kd-btn--primary:focus-visible {
outline: 2px solid rgba(2, 51, 140, 0.45);
outline-offset: 2px;
}
/* Accent — orange fill, white text */
.kd-btn--accent {
background: #F06901;
color: #FFFFFF;
border-color: #F06901;
}
.kd-btn--accent:hover { background: #d45d01; border-color: #d45d01; }
.kd-btn--accent:active { background: #b85201; border-color: #b85201; }
.kd-btn--accent:focus-visible {
outline: 2px solid rgba(240, 105, 1, 0.45);
outline-offset: 2px;
}
/* Secondary — outlined, blue text */
.kd-btn--secondary {
background: #FFFFFF;
color: #02338C;
border-color: #D0D8EE;
}
.kd-btn--secondary:hover { background: #F5F7FB; border-color: #02338C; }
.kd-btn--secondary:active { background: #e8ecf7; }
.kd-btn--secondary:focus-visible {
outline: 2px solid rgba(2, 51, 140, 0.45);
outline-offset: 2px;
}
/* Ghost — no border, blue text */
.kd-btn--ghost {
background: transparent;
color: #02338C;
border-color: transparent;
}
.kd-btn--ghost:hover { background: #F5F7FB; }
.kd-btn--ghost:active { background: #e2e8f5; }
.kd-btn--ghost:focus-visible {
outline: 2px solid rgba(2, 51, 140, 0.45);
outline-offset: 2px;
}
/* Orange ghost — no border, orange text */
.kd-btn--ghost-accent {
background: transparent;
color: #F06901;
border-color: transparent;
}
.kd-btn--ghost-accent:hover { background: rgba(240, 105, 1, 0.06); }
/* Danger — red fill */
.kd-btn--danger {
background: #DC2626;
color: #FFFFFF;
border-color: #DC2626;
}
.kd-btn--danger:hover { background: #b91c1c; border-color: #b91c1c; }
.kd-btn--danger:active { background: #991b1b; border-color: #991b1b; }
.kd-btn--danger:focus-visible {
outline: 2px solid rgba(220, 38, 38, 0.45);
outline-offset: 2px;
}
/* Danger ghost */
.kd-btn--danger-ghost {
background: transparent;
color: #DC2626;
border-color: transparent;
}
.kd-btn--danger-ghost:hover { background: #FEF2F2; }
/* Sizes */
.kd-btn--sm { padding: 4px 12px; font-size: 12px; }
.kd-btn--lg { padding: 9px 24px; font-size: 14px; }
/* Icon button */
.kd-btn--icon { width: 32px; height: 32px; padding: 0; }
.kd-btn--icon.kd-btn--sm { width: 26px; height: 26px; }
.kd-btn--icon.kd-btn--lg { width: 40px; height: 40px; }
/* Disabled */
.kd-btn:disabled,
.kd-btn.is-disabled {
opacity: 0.42;
cursor: not-allowed;
pointer-events: none;
}
/* Loading spinner — colour is transparent + ::after overlay */
.kd-btn.is-loading {
color: transparent;
pointer-events: none;
}
.kd-btn.is-loading::after {
content: '';
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.35);
border-top-color: #FFFFFF;
animation: kd-spin 0.65s linear infinite;
}
.kd-btn--secondary.is-loading::after,
.kd-btn--ghost.is-loading::after {
border-color: rgba(2, 51, 140, 0.25);
border-top-color: #02338C;
}
@keyframes kd-spin {
to { transform: rotate(360deg); }
}
/* Button group */
.kd-btn-group {
display: inline-flex;
}
.kd-btn-group .kd-btn {
border-radius: 0;
}
.kd-btn-group .kd-btn:first-child { border-radius: 3px 0 0 3px; }
.kd-btn-group .kd-btn:last-child { border-radius: 0 3px 3px 0; }
.kd-btn-group .kd-btn + .kd-btn { margin-left: -1.5px; }
/* ================================================================
PILLS
================================================================ */
.kd-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 10px;
border-radius: 12px;
border: 1px solid transparent;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 12px;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
}
.kd-pill--blue { background: #02338C; color: #FFFFFF; }
.kd-pill--orange { background: #F06901; color: #FFFFFF; }
.kd-pill--tint { background: rgba(2, 51, 140, 0.08); color: #02338C; }
.kd-pill--orange-tint { background: rgba(240, 105, 1, 0.10); color: #F06901; }
.kd-pill--outline { background: transparent; color: #02338C; border-color: #D0D8EE; }
.kd-pill--outline-blue { background: transparent; color: #02338C; border-color: #02338C; }
.kd-pill--muted { background: #F5F7FB; color: #5A6E99; border-color: #D0D8EE; }
.kd-pill--success { background: #ECFDF5; color: #065F46; }
.kd-pill--warning { background: #FFFBEB; color: #92400E; }
.kd-pill--danger { background: #FEF2F2; color: #DC2626; }
/* Live — pulsing dot */
.kd-pill--live { background: #FEF2F2; color: #DC2626; }
.kd-pill--live::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #DC2626;
flex-shrink: 0;
animation: kd-pulse 1.4s ease-in-out infinite;
}
@keyframes kd-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.35; transform: scale(0.7); }
}
/* Sizes */
.kd-pill--sm { padding: 1px 8px; font-size: 11px; }
.kd-pill--lg { padding: 4px 14px; font-size: 13px; }
/* ================================================================
BADGES
================================================================ */
.kd-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 5px;
border-radius: 3px;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.kd-badge--blue { background: #02338C; color: #FFFFFF; }
.kd-badge--orange { background: #F06901; color: #FFFFFF; }
.kd-badge--tint { background: rgba(2, 51, 140, 0.09); color: #02338C; }
.kd-badge--muted { background: #F5F7FB; color: #5A6E99; border: 1px solid #D0D8EE; }
.kd-badge--danger { background: #DC2626; color: #FFFFFF; }
.kd-badge--success { background: #059669; color: #FFFFFF; }
.kd-badge--warning { background: #F59E0B; color: #FFFFFF; }
/* Pill shape variant */
.kd-badge--round { border-radius: 12px; }
/* Notification dot (no text) */
.kd-badge--dot {
width: 8px; height: 8px;
min-width: 8px;
padding: 0;
border-radius: 50%;
background: #DC2626;
}
.kd-badge--dot.is-live { animation: kd-pulse 1.4s ease-in-out infinite; }
/* Ball event badges */
.kd-badge--ball { background: #D0D8EE; color: #5A6E99; }
.kd-badge--ball-dot { background: #9CA3AF; color: #FFFFFF; }
.kd-badge--ball-1 { background: #F5F7FB; color: #02338C; border: 1px solid #D0D8EE; }
.kd-badge--ball-2 { background: #F5F7FB; color: #02338C; border: 1px solid #D0D8EE; }
.kd-badge--ball-3 { background: #F5F7FB; color: #02338C; border: 1px solid #D0D8EE; }
.kd-badge--ball-4 { background: #02338C; color: #FFFFFF; }
.kd-badge--ball-6 { background: #F06901; color: #FFFFFF; }
.kd-badge--ball-w { background: #DC2626; color: #FFFFFF; }
.kd-badge--ball-wd { background: #FFFBEB; color: #92400E; border: 1px solid #F59E0B; }
.kd-badge--ball-nb { background: #FFFBEB; color: #92400E; border: 1px solid #F59E0B; }
/* Sizes */
.kd-badge--sm { min-width: 18px; height: 18px; font-size: 10px; padding: 0 4px; }
.kd-badge--lg { min-width: 28px; height: 28px; font-size: 13px; padding: 0 7px; }
/* ================================================================
TABLES
================================================================ */
.kd-table-wrap {
width: 100%;
overflow-x: auto;
border: 1px solid #D0D8EE;
border-radius: 4px;
/* Thin scrollbar on overflow */
scrollbar-width: thin;
scrollbar-color: #D0D8EE #F5F7FB;
}
.kd-table-wrap::-webkit-scrollbar { height: 5px; }
.kd-table-wrap::-webkit-scrollbar-track { background: #F5F7FB; }
.kd-table-wrap::-webkit-scrollbar-thumb { background: #D0D8EE; border-radius: 3px; }
.kd-table {
width: 100%;
border-collapse: collapse;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14px;
font-variant-numeric: tabular-nums;
color: #02338C;
}
.kd-table thead th {
padding: 6px 10px;
background: #02338C;
color: #FFFFFF;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
white-space: nowrap;
position: sticky;
top: 0;
z-index: 1;
}
.kd-table tbody td {
padding: 6px 10px;
border-bottom: 1px solid #D0D8EE;
vertical-align: middle;
}
.kd-table tbody tr:last-child td { border-bottom: none; }
.kd-table tbody tr:hover td { background: rgba(2, 51, 140, 0.03); }
/* Number cell — right-aligned */
.kd-table td.is-num,
.kd-table th.is-num { text-align: right; }
/* Highlight — bolder, blue */
.kd-table td.is-highlight,
.kd-table th.is-highlight { font-weight: 700; color: #02338C; }
/* Orange accent number */
.kd-table td.is-accent { font-weight: 700; color: #F06901; }
/* Muted cell */
.kd-table td.is-muted { color: #5A6E99; }
/* Striped — now the default; modifier kept for explicit opt-in on variant tables */
.kd-table--striped tbody tr:nth-child(even) td { background: #F5F7FB; }
.kd-table--striped tbody tr:nth-child(even):hover td { background: rgba(2, 51, 140, 0.05); }
/* Blue header — now the default (v1.6); kept for back-compat / explicit intent */
.kd-table--accent thead th {
background: #02338C;
color: #FFFFFF;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
/* Condensed variant */
.kd-table--condensed thead th,
.kd-table--condensed tbody td { padding: 3px 8px; }
/* Borderless */
.kd-table--borderless .kd-table-wrap { border: none; }
.kd-table--borderless tbody td { border-bottom-color: #F5F7FB; }
/* Empty state */
.kd-table__empty {
text-align: center;
padding: 32px 20px;
color: #5A6E99;
font-size: 13px;
}
/* Table footer row */
.kd-table tfoot td {
padding: 6px 10px;
background: #F5F7FB;
border-top: 1.5px solid #D0D8EE;
font-weight: 700;
color: #02338C;
}
/* Table caption */
.kd-table caption {
padding: 8px 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #02338C;
text-align: left;
caption-side: top;
border-bottom: 1px solid #D0D8EE;
background: #FFFFFF;
}
/* ================================================================
CARDS
================================================================ */
.kd-card {
background: #FFFFFF;
border: 1px solid #D0D8EE;
border-radius: 4px;
overflow: hidden;
}
.kd-card__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 20px;
border-bottom: 1px solid #D0D8EE;
}
.kd-card__title {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14px;
font-weight: 700;
color: #02338C;
line-height: 1.3;
}
.kd-card__subtitle {
font-size: 12px;
color: #5A6E99;
margin-top: 2px;
}
.kd-card__body { padding: 20px; }
.kd-card__footer {
padding: 12px 20px;
border-top: 1px solid #D0D8EE;
background: #F5F7FB;
display: flex;
align-items: center;
gap: 8px;
}
/* Surface card */
.kd-card--surface {
background: #F5F7FB;
}
/* Orange accent bar (top) */
.kd-card--accent {
border-top: 3px solid #F06901;
}
/* Blue accent bar (top) */
.kd-card--primary {
border-top: 3px solid #02338C;
}
/* Hero — solid blue fill */
.kd-card--hero {
background: #02338C;
border: none;
color: #FFFFFF;
}
.kd-card--hero .kd-card__header {
border-bottom-color: rgba(255, 255, 255, 0.15);
}
.kd-card--hero .kd-card__title { color: #FFFFFF; }
.kd-card--hero .kd-card__footer {
background: rgba(0, 0, 0, 0.18);
border-top-color: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.75);
}
/* Hoverable card */
.kd-card--hoverable {
transition: box-shadow 0.15s, border-color 0.15s;
cursor: pointer;
}
.kd-card--hoverable:hover {
border-color: #02338C;
box-shadow: 0 4px 16px rgba(2, 51, 140, 0.10);
}
/* Stat card — compact metric display */
.kd-stat-card {
background: #FFFFFF;
border: 1px solid #D0D8EE;
border-radius: 4px;
padding: 16px 20px;
}
.kd-stat-card__label {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #5A6E99;
margin-bottom: 6px;
}
.kd-stat-card__value {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 22px;
font-weight: 700;
color: #02338C;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.kd-stat-card__value--orange { color: #F06901; }
.kd-stat-card__sub {
font-size: 12px;
color: #5A6E99;
margin-top: 5px;
}
.kd-stat-card--accent { border-top: 3px solid #F06901; }
.kd-stat-card--primary { border-top: 3px solid #02338C; }
@media (min-width: 768px) {
.kd-card__title { font-size: 15px; }
.kd-stat-card__value { font-size: 26px; }
}
/* ================================================================
FORMS
================================================================ */
/* Form group */
.kd-form-group { margin-bottom: 16px; }
.kd-form-group:last-child { margin-bottom: 0; }
/* Label */
.kd-form-label {
display: block;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 12px;
font-weight: 600;
color: #02338C;
margin-bottom: 5px;
}
.kd-form-label.is-required::after {
content: ' *';
color: #DC2626;
}
/* Helper / error text */
.kd-form-hint { font-size: 11px; color: #5A6E99; margin-top: 4px; }
.kd-form-error { font-size: 11px; color: #DC2626; margin-top: 4px; }
/* ── Text input ───────────────────────────────────────────────── */
.kd-input {
display: block;
width: 100%;
padding: 7px 11px;
background: #FFFFFF;
border: 1.5px solid #D0D8EE;
border-radius: 3px;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
color: #02338C;
line-height: 1.4;
transition: border-color 0.15s, box-shadow 0.15s;
-webkit-appearance: none;
appearance: none;
}
.kd-input::placeholder { color: #5A6E99; }
.kd-input:focus {
outline: none;
border-color: #02338C;
box-shadow: 0 0 0 3px rgba(2, 51, 140, 0.12);
}
.kd-input:disabled {
background: #F5F7FB;
color: #5A6E99;
cursor: not-allowed;
}
.kd-input.is-error { border-color: #DC2626; box-shadow: none; }
.kd-input.is-error:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); }
.kd-input.is-success { border-color: #059669; }
.kd-input--sm { padding: 5px 9px; font-size: 12px; }
.kd-input--lg { padding: 10px 14px; font-size: 14px; }
/* Input with leading/trailing icon */
.kd-input-wrap { position: relative; }
.kd-input-wrap .kd-input { padding-left: 34px; }
.kd-input-wrap .kd-input.has-icon-right { padding-left: 11px; padding-right: 34px; }
.kd-input-wrap__icon {
position: absolute;
top: 50%; left: 10px;
transform: translateY(-50%);
color: #5A6E99;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
.kd-input-wrap__icon--right { left: auto; right: 10px; }
/* ── Textarea ─────────────────────────────────────────────────── */
.kd-textarea {
display: block;
width: 100%;
padding: 7px 11px;
background: #FFFFFF;
border: 1.5px solid #D0D8EE;
border-radius: 3px;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
color: #02338C;
line-height: 1.5;
resize: vertical;
min-height: 80px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.kd-textarea::placeholder { color: #5A6E99; }
.kd-textarea:focus {
outline: none;
border-color: #02338C;
box-shadow: 0 0 0 3px rgba(2, 51, 140, 0.12);
}
.kd-textarea:disabled { background: #F5F7FB; color: #5A6E99; cursor: not-allowed; }
.kd-textarea.is-error { border-color: #DC2626; }
/* ── Select ───────────────────────────────────────────────────── */
.kd-select {
display: block;
width: 100%;
padding: 7px 32px 7px 11px;
background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%235A6E99' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat right 10px center;
border: 1.5px solid #D0D8EE;
border-radius: 3px;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
color: #02338C;
line-height: 1.4;
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
-webkit-appearance: none;
appearance: none;
}
.kd-select:focus {
outline: none;
border-color: #02338C;
box-shadow: 0 0 0 3px rgba(2, 51, 140, 0.12);
}
.kd-select:disabled { background-color: #F5F7FB; color: #5A6E99; cursor: not-allowed; }
.kd-select--sm { padding-top: 5px; padding-bottom: 5px; font-size: 12px; }
.kd-select--lg { padding-top: 10px; padding-bottom: 10px; font-size: 14px; }
/* ── Checkbox ─────────────────────────────────────────────────── */
.kd-checkbox {
display: flex;
align-items: flex-start;
gap: 9px;
cursor: pointer;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
color: #02338C;
}
.kd-checkbox input[type="checkbox"] {
width: 16px; height: 16px; min-width: 16px;
border: 1.5px solid #D0D8EE;
border-radius: 3px;
background: #FFFFFF;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: background 0.15s, border-color 0.15s;
margin-top: 1px;
position: relative;
flex-shrink: 0;
}
.kd-checkbox input[type="checkbox"]:checked {
background: #02338C;
border-color: #02338C;
}
.kd-checkbox input[type="checkbox"]:checked::after {
content: '';
position: absolute;
top: 2px; left: 4px;
width: 5px; height: 8px;
border: 2px solid #FFFFFF;
border-top: none;
border-left: none;
transform: rotate(45deg);
}
.kd-checkbox input[type="checkbox"]:indeterminate {
background: #02338C;
border-color: #02338C;
}
.kd-checkbox input[type="checkbox"]:indeterminate::after {
content: '';
position: absolute;
top: 5px; left: 2px;
width: 8px; height: 2px;
background: #FFFFFF;
border: none;
transform: none;
}
.kd-checkbox input[type="checkbox"]:focus-visible {
outline: 2px solid rgba(2, 51, 140, 0.4);
outline-offset: 2px;
}
.kd-checkbox input[type="checkbox"]:disabled {
opacity: 0.42;
cursor: not-allowed;
}
.kd-checkbox.is-disabled { opacity: 0.42; cursor: not-allowed; pointer-events: none; }
/* ── Radio ────────────────────────────────────────────────────── */
.kd-radio {
display: flex;
align-items: flex-start;
gap: 9px;
cursor: pointer;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
color: #02338C;
}
.kd-radio input[type="radio"] {
width: 16px; height: 16px; min-width: 16px;
border: 1.5px solid #D0D8EE;
border-radius: 50%;
background: #FFFFFF;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: border-color 0.15s;
margin-top: 1px;
position: relative;
flex-shrink: 0;
}
.kd-radio input[type="radio"]:checked { border-color: #02338C; }
.kd-radio input[type="radio"]:checked::after {
content: '';
position: absolute;
top: 3px; left: 3px;
width: 8px; height: 8px;
border-radius: 50%;
background: #02338C;
}
.kd-radio input[type="radio"]:focus-visible {
outline: 2px solid rgba(2, 51, 140, 0.4);
outline-offset: 2px;
}
.kd-radio input[type="radio"]:disabled { opacity: 0.42; cursor: not-allowed; }
.kd-radio.is-disabled { opacity: 0.42; cursor: not-allowed; pointer-events: none; }
/* ── Toggle switch ────────────────────────────────────────────── */
.kd-toggle {
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
color: #02338C;
user-select: none;
-webkit-user-select: none;
}
/* Hide native checkbox, use .kd-toggle__track as visual */
.kd-toggle__input {
position: absolute;
opacity: 0;
width: 0; height: 0;
pointer-events: none;
}
.kd-toggle__track {
position: relative;
width: 36px; height: 20px;
background: #D0D8EE;
border-radius: 12px;
transition: background 0.2s;
flex-shrink: 0;
}
.kd-toggle__track::after {
content: '';
position: absolute;
top: 2px; left: 2px;
width: 16px; height: 16px;
border-radius: 50%;
background: #FFFFFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
transition: transform 0.2s;
}
.kd-toggle__input:checked ~ .kd-toggle__track {
background: #02338C;
}
.kd-toggle__input:checked ~ .kd-toggle__track::after {
transform: translateX(16px);
}
.kd-toggle__input:focus-visible ~ .kd-toggle__track {
outline: 2px solid rgba(2, 51, 140, 0.4);
outline-offset: 2px;
border-radius: 12px;
}
.kd-toggle.is-disabled {
opacity: 0.42;
cursor: not-allowed;
pointer-events: none;
}
/* Orange toggle variant */
.kd-toggle__input:checked ~ .kd-toggle__track--accent {
background: #F06901;
}
/* ── Slider / Range ───────────────────────────────────────────── */
.kd-slider { display: flex; flex-direction: column; gap: 6px; }
.kd-slider__header {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.kd-slider__label {
font-size: 12px;
font-weight: 600;
color: #02338C;
}
.kd-slider__value {
font-size: 12px;
font-weight: 700;
color: #F06901;
font-variant-numeric: tabular-nums;
min-width: 32px;
text-align: right;
}
input[type="range"].kd-range {
width: 100%;
height: 4px;
-webkit-appearance: none;
appearance: none;
background: #D0D8EE;
border-radius: 2px;
cursor: pointer;
outline: none;
}
input[type="range"].kd-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px; height: 16px;
border-radius: 50%;
background: #02338C;
border: 2.5px solid #FFFFFF;
box-shadow: 0 1px 4px rgba(2, 51, 140, 0.30);
cursor: pointer;
transition: background 0.15s;
}
input[type="range"].kd-range::-moz-range-thumb {
width: 16px; height: 16px;
border-radius: 50%;
background: #02338C;
border: 2.5px solid #FFFFFF;
cursor: pointer;
}
input[type="range"].kd-range:focus-visible {
outline: 2px solid rgba(2, 51, 140, 0.4);
outline-offset: 3px;
border-radius: 2px;
}
input[type="range"].kd-range--accent::-webkit-slider-thumb {
background: #F06901;
box-shadow: 0 1px 4px rgba(240, 105, 1, 0.30);
}
input[type="range"].kd-range--accent::-moz-range-thumb { background: #F06901; }
input[type="range"].kd-range:disabled { opacity: 0.42; cursor: not-allowed; }
/* ================================================================
TABS
================================================================ */
.kd-tabs { display: flex; flex-direction: column; gap: 0; }
.kd-tab-list {
display: flex;
gap: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.kd-tab-list::-webkit-scrollbar { display: none; }
.kd-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border: none;
background: transparent;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
font-weight: 500;
color: #5A6E99;
cursor: pointer;
white-space: nowrap;
transition: color 0.15s, background 0.15s;
position: relative;
flex-shrink: 0;
}
.kd-tab:hover { color: #02338C; }
.kd-tab.is-active { color: #02338C; font-weight: 600; }
.kd-tab:focus-visible {
outline: 2px solid rgba(2, 51, 140, 0.4);
outline-offset: -2px;
}
.kd-tab-panel { display: none; }
.kd-tab-panel.is-active { display: block; }
/* ── Style: underline (default) ───────────────────────────────── */
.kd-tabs--underline .kd-tab-list {
border-bottom: 2px solid #D0D8EE;
}
.kd-tabs--underline .kd-tab {
border-radius: 3px 3px 0 0;
}
.kd-tabs--underline .kd-tab:hover { background: #F5F7FB; }
.kd-tabs--underline .kd-tab.is-active::after {
content: '';
position: absolute;
bottom: -2px; left: 0; right: 0;
height: 2px;
background: #02338C;
border-radius: 2px 2px 0 0;
}
/* ── Style: pill ──────────────────────────────────────────────── */
.kd-tabs--pill .kd-tab-list {
background: #F5F7FB;
border: 1px solid #D0D8EE;
border-radius: 4px;
padding: 3px;
gap: 2px;
}
.kd-tabs--pill .kd-tab { border-radius: 3px; }
.kd-tabs--pill .kd-tab:hover { background: rgba(2, 51, 140, 0.06); color: #02338C; }
.kd-tabs--pill .kd-tab.is-active {
background: #02338C;
color: #FFFFFF;
}
/* ── Style: button ────────────────────────────────────────────── */
.kd-tabs--button .kd-tab-list { gap: 4px; }
.kd-tabs--button .kd-tab {
border: 1.5px solid #D0D8EE;
border-radius: 3px;
color: #02338C;
background: #FFFFFF;
}
.kd-tabs--button .kd-tab:hover { border-color: #02338C; background: #F5F7FB; }
.kd-tabs--button .kd-tab.is-active {
background: #02338C;
color: #FFFFFF;
border-color: #02338C;
}
/* Tab panel padding */
.kd-tab-panel--padded { padding: 16px 0; }
/* ================================================================
ALERTS
================================================================ */
.kd-alert {
display: flex;
gap: 12px;
padding: 13px 16px;
border-radius: 4px;
border: 1px solid transparent;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
line-height: 1.5;
}
.kd-alert__icon {
flex-shrink: 0;
width: 18px; height: 18px;
margin-top: 1px;
}
.kd-alert__body { flex: 1; min-width: 0; }
.kd-alert__title {
font-weight: 700;
margin-bottom: 2px;
}
.kd-alert__dismiss {
flex-shrink: 0;
background: transparent;
border: none;
cursor: pointer;
padding: 0 2px;
color: inherit;
opacity: 0.55;
font-size: 18px;
line-height: 1;
align-self: flex-start;
transition: opacity 0.15s;
}
.kd-alert__dismiss:hover { opacity: 1; }
.kd-alert--info { background: #EEF3FB; color: #02338C; border-color: #02338C; }
.kd-alert--success { background: #ECFDF5; color: #065F46; border-color: #059669; }
.kd-alert--warning { background: #FFFBEB; color: #92400E; border-color: #F59E0B; }
.kd-alert--danger { background: #FEF2F2; color: #991B1B; border-color: #DC2626; }
/* Left-border-only variant */
.kd-alert--info.kd-alert--bar { border-color: transparent; border-left: 4px solid #02338C; border-radius: 0 4px 4px 0; }
.kd-alert--success.kd-alert--bar { border-color: transparent; border-left: 4px solid #059669; border-radius: 0 4px 4px 0; }
.kd-alert--warning.kd-alert--bar { border-color: transparent; border-left: 4px solid #F59E0B; border-radius: 0 4px 4px 0; }
.kd-alert--danger.kd-alert--bar { border-color: transparent; border-left: 4px solid #DC2626; border-radius: 0 4px 4px 0; }
/* ================================================================
AVATARS
================================================================ */
.kd-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #02338C;
color: #FFFFFF;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 700;
overflow: hidden;
flex-shrink: 0;
position: relative;
/* Default = md */
width: 40px; height: 40px;
font-size: 14px;
}
.kd-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sizes */
.kd-avatar--xs { width: 24px; height: 24px; font-size: 10px; }
.kd-avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.kd-avatar--lg { width: 52px; height: 52px; font-size: 18px; }
.kd-avatar--xl { width: 64px; height: 64px; font-size: 22px; }
/* Square */
.kd-avatar--square { border-radius: 4px; }
.kd-avatar--square.kd-avatar--xs { border-radius: 3px; }
/* Colour variants */
.kd-avatar--orange { background: #F06901; }
.kd-avatar--surface { background: #F5F7FB; color: #02338C; border: 1px solid #D0D8EE; }
.kd-avatar--muted { background: #F5F7FB; color: #5A6E99; border: 1px solid #D0D8EE; }
/* Status dot */
.kd-avatar__status {
position: absolute;
bottom: 1px; right: 1px;
width: 10px; height: 10px;
border-radius: 50%;
border: 2px solid #FFFFFF;
background: #9CA3AF;
}
.kd-avatar--sm .kd-avatar__status { width: 8px; height: 8px; }
.kd-avatar--lg .kd-avatar__status { width: 12px; height: 12px; }
.kd-avatar__status--online { background: #059669; }
.kd-avatar__status--busy { background: #DC2626; }
.kd-avatar__status--away { background: #F59E0B; }
/* Avatar group */
.kd-avatar-group {
display: inline-flex;
align-items: center;
}
.kd-avatar-group .kd-avatar {
border: 2.5px solid #FFFFFF;
margin-left: -10px;
}
.kd-avatar-group .kd-avatar:first-child { margin-left: 0; }
.kd-avatar-group__more {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
border-radius: 50%;
background: #F5F7FB;
border: 2.5px solid #FFFFFF;
color: #5A6E99;
font-size: 12px;
font-weight: 700;
margin-left: -10px;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
/* ================================================================
DROPDOWN
================================================================ */
.kd-dropdown {
position: relative;
display: inline-block;
}
.kd-dropdown__menu {
position: absolute;
top: calc(100% + 5px);
left: 0;
min-width: 190px;
background: #FFFFFF;
border: 1px solid #D0D8EE;
border-radius: 4px;
box-shadow: 0 4px 20px rgba(2, 51, 140, 0.13);
z-index: 200;
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.kd-dropdown__menu.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.kd-dropdown__menu--right { left: auto; right: 0; }
.kd-dropdown__menu--up { top: auto; bottom: calc(100% + 5px); transform: translateY(4px); }
.kd-dropdown__menu--up.is-open { transform: translateY(0); }
.kd-dropdown__item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 14px;
background: transparent;
border: none;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
color: #02338C;
cursor: pointer;
text-align: left;
text-decoration: none;
transition: background 0.1s;
line-height: 1.4;
}
.kd-dropdown__item:hover { background: #F5F7FB; }
.kd-dropdown__item:active { background: rgba(2, 51, 140, 0.08); }
.kd-dropdown__item.is-active {
font-weight: 600;
background: rgba(2, 51, 140, 0.06);
color: #02338C;
}
.kd-dropdown__item.is-destructive { color: #DC2626; }
.kd-dropdown__item.is-destructive:hover { background: #FEF2F2; }
.kd-dropdown__item:disabled,
.kd-dropdown__item.is-disabled { opacity: 0.42; cursor: not-allowed; pointer-events: none; }
.kd-dropdown__divider {
height: 1px;
background: #D0D8EE;
margin: 4px 0;
}
.kd-dropdown__group-label {
padding: 6px 14px 3px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: #5A6E99;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
/* ================================================================
PROGRESS
================================================================ */
.kd-progress {
height: 6px;
background: #F5F7FB;
border: 1px solid #D0D8EE;
border-radius: 3px;
overflow: hidden;
}
.kd-progress__bar {
height: 100%;
background: #02338C;
border-radius: 3px;
transition: width 0.35s ease;
min-width: 0;
}
.kd-progress__bar--orange { background: #F06901; }
.kd-progress__bar--danger { background: #DC2626; }
.kd-progress__bar--success { background: #059669; }
.kd-progress__bar--warning { background: #F59E0B; }
.kd-progress--sm { height: 3px; }
.kd-progress--lg { height: 10px; }
.kd-progress--xl { height: 14px; }
/* Labelled progress */
.kd-progress-row {
display: flex;
flex-direction: column;
gap: 4px;
}
.kd-progress-row__header {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.kd-progress-row__label {
font-size: 12px;
font-weight: 500;
color: #02338C;
}
.kd-progress-row__value {
font-size: 12px;
font-weight: 700;
color: #F06901;
font-variant-numeric: tabular-nums;
}
/* ================================================================
PAGINATION
================================================================ */
.kd-pagination {
display: flex;
align-items: center;
gap: 3px;
flex-wrap: wrap;
}
.kd-page-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px; height: 32px;
padding: 0 8px;
border: 1.5px solid #D0D8EE;
border-radius: 3px;
background: #FFFFFF;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
font-weight: 500;
color: #02338C;
cursor: pointer;
text-decoration: none;
transition: background 0.15s, border-color 0.15s;
font-variant-numeric: tabular-nums;
}
.kd-page-btn:hover { background: #F5F7FB; border-color: #02338C; }
.kd-page-btn.is-active {
background: #02338C;
color: #FFFFFF;
border-color: #02338C;
font-weight: 700;
}
.kd-page-btn:disabled,
.kd-page-btn.is-disabled { opacity: 0.38; cursor: not-allowed; pointer-events: none; }
.kd-page-ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px; height: 32px;
color: #5A6E99;
font-size: 13px;
user-select: none;
}
/* ================================================================
BREADCRUMBS
================================================================ */
.kd-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0;
font-size: 13px;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
color: #5A6E99;
}
.kd-breadcrumb__item {
display: flex;
align-items: center;
}
.kd-breadcrumb__link {
color: #02338C;
text-decoration: none;
font-weight: 500;
padding: 2px 4px;
border-radius: 2px;
transition: background 0.1s;
}
.kd-breadcrumb__link:hover { background: #F5F7FB; }
.kd-breadcrumb__sep {
color: #D0D8EE;
font-size: 14px;
padding: 0 2px;
user-select: none;
}
.kd-breadcrumb__item:last-child .kd-breadcrumb__link {
color: #5A6E99;
font-weight: 400;
pointer-events: none;
}
/* ================================================================
TOOLTIP
================================================================ */
.kd-tooltip-wrap {
position: relative;
display: inline-flex;
}
.kd-tooltip {
position: absolute;
bottom: calc(100% + 7px);
left: 50%;
transform: translateX(-50%);
background: #02338C;
color: #FFFFFF;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 12px;
font-weight: 500;
padding: 5px 10px;
border-radius: 3px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
z-index: 400;
}
.kd-tooltip::after {
content: '';
position: absolute;
top: 100%; left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #02338C;
}
.kd-tooltip-wrap:hover .kd-tooltip,
.kd-tooltip-wrap:focus-within .kd-tooltip { opacity: 1; }
.kd-tooltip--bottom { bottom: auto; top: calc(100% + 7px); }
.kd-tooltip--bottom::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #02338C; }
.kd-tooltip--orange { background: #F06901; }
.kd-tooltip--orange::after { border-top-color: #F06901; }
.kd-tooltip--orange.kd-tooltip--bottom::after { border-bottom-color: #F06901; border-top-color: transparent; }
/* ================================================================
SCROLL CONTAINERS
================================================================ */
.kd-scroll { overflow: auto; }
.kd-scroll-y { overflow-x: hidden; overflow-y: auto; }
.kd-scroll-x { overflow-y: hidden; overflow-x: auto; }
/* Thin scrollbar — Webkit */
.kd-scroll::-webkit-scrollbar,
.kd-scroll-y::-webkit-scrollbar,
.kd-scroll-x::-webkit-scrollbar { width: 6px; height: 6px; }
.kd-scroll::-webkit-scrollbar-track,
.kd-scroll-y::-webkit-scrollbar-track,
.kd-scroll-x::-webkit-scrollbar-track { background: #F5F7FB; border-radius: 3px; }
.kd-scroll::-webkit-scrollbar-thumb,
.kd-scroll-y::-webkit-scrollbar-thumb,
.kd-scroll-x::-webkit-scrollbar-thumb {
background: #D0D8EE;
border-radius: 3px;
border: 1px solid #F5F7FB;
}
.kd-scroll::-webkit-scrollbar-thumb:hover,
.kd-scroll-y::-webkit-scrollbar-thumb:hover,
.kd-scroll-x::-webkit-scrollbar-thumb:hover { background: #5A6E99; }
/* Thin scrollbar — Firefox */
.kd-scroll, .kd-scroll-y, .kd-scroll-x {
scrollbar-width: thin;
scrollbar-color: #D0D8EE #F5F7FB;
}
/* ================================================================
DIVIDER
================================================================ */
.kd-divider {
border: none;
height: 1px;
background: #D0D8EE;
margin: 0;
}
.kd-divider--vertical {
width: 1px;
height: auto;
align-self: stretch;
}
.kd-divider--label {
display: flex;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #5A6E99;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.kd-divider--label::before,
.kd-divider--label::after {
content: '';
flex: 1;
height: 1px;
background: #D0D8EE;
}
/* ================================================================
TABLE VARIANTS — NEUTRAL, INDUSTRIAL AVERAGE, COMPARISON, GRID
================================================================ */
/* ── Neutral data grid ────────────────────────────────────────
White background throughout. Body text shifts to blue-derived
grey (#4A5E8A). Key figures and totals surface in full blue.
Use for dense reporting grids where brand colour is noise.
──────────────────────────────────────────────────────────────── */
.kd-table--neutral {
color: #4A5E8A;
}
.kd-table--neutral thead th {
background: #FFFFFF;
color: #5A6E99;
font-size: 11px;
border-bottom: 2px solid #D0D8EE;
}
.kd-table--neutral tbody td {
color: #4A5E8A;
background: #FFFFFF;
}
.kd-table--neutral tbody tr:hover td {
background: rgba(2, 51, 140, 0.025);
}
/* Key figure — full blue, draws eye to the important number */
.kd-table--neutral td.is-key,
.kd-table--neutral th.is-key {
color: #02338C;
font-weight: 700;
}
/* Orange accent figure */
.kd-table--neutral td.is-accent {
color: #F06901;
font-weight: 700;
}
/* Muted / secondary info */
.kd-table--neutral td.is-muted {
color: #8899BB;
}
/* Total / summary row */
.kd-table--neutral tfoot td {
background: #FFFFFF;
border-top: 2px solid #D0D8EE;
color: #02338C;
font-weight: 700;
}
/* ── Industrial average ───────────────────────────────────────
Cells where a value sits significantly above or below a
reference average. Apply .is-above / .is-below to | .
Add data-avg="7.23" data-delta="+1.14" for the hover tooltip.
──────────────────────────────────────────────────────────────── */
td.is-above,
td.is-below {
position: relative;
}
/* Arrow indicator — renders before the cell's text content */
td.is-above::before {
content: '↑\00a0';
font-size: 10px;
line-height: 1;
color: #059669;
}
td.is-below::before {
content: '↓\00a0';
font-size: 10px;
line-height: 1;
color: #DC2626;
}
/* Cell tint and text colour */
td.is-above {
background: rgba(16, 185, 129, 0.07);
color: #065F46;
}
td.is-below {
background: rgba(220, 38, 38, 0.07);
color: #991B1B;
}
/* Tooltip — uses data-avg and data-delta attributes */
td[data-avg]::after {
content: 'Avg\00a0' attr(data-avg) '\00a0\00b7\00a0' attr(data-delta);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: #02338C;
color: #FFFFFF;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 11px;
font-weight: 500;
font-variant-numeric: tabular-nums;
padding: 4px 10px;
border-radius: 3px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
z-index: 20;
}
td[data-avg]:hover::after {
opacity: 1;
}
/* Hover state stays readable over the tint */
tr:hover td.is-above { background: rgba(16, 185, 129, 0.13); }
tr:hover td.is-below { background: rgba(220, 38, 38, 0.13); }
/* ── Comparison grid ──────────────────────────────────────────
Two columns carry a colour wash to draw the comparison axis.
Apply .is-col-a (blue) or .is-col-b (orange) to both |
and | in the respective column. Text colour unchanged.
──────────────────────────────────────────────────────────────── */
.kd-table--comparison thead th.is-col-a {
border-top: 3px solid #02338C;
background: rgba(2, 51, 140, 0.06);
color: #02338C;
}
.kd-table--comparison thead th.is-col-b {
border-top: 3px solid #F06901;
background: rgba(240, 105, 1, 0.06);
color: #F06901;
}
.kd-table--comparison tbody td.is-col-a {
background: rgba(2, 51, 140, 0.04);
}
.kd-table--comparison tbody td.is-col-b {
background: rgba(240, 105, 1, 0.04);
}
.kd-table--comparison tbody tr:hover td.is-col-a {
background: rgba(2, 51, 140, 0.08);
}
.kd-table--comparison tbody tr:hover td.is-col-b {
background: rgba(240, 105, 1, 0.08);
}
/* Key figure inside a comparison column */
.kd-table--comparison td.is-col-a.is-key { color: #02338C; font-weight: 700; }
.kd-table--comparison td.is-col-b.is-key { color: #F06901; font-weight: 700; }
/* ── Full grid ────────────────────────────────────────────────
Hairline vertical dividers on all internal column boundaries.
Combine with any other table variant, e.g.:
──────────────────────────────────────────────────────────────── */
.kd-table--grid thead th,
.kd-table--grid tbody td,
.kd-table--grid tfoot td {
border-right: 1px solid #D0D8EE;
}
.kd-table--grid thead th:last-child,
.kd-table--grid tbody td:last-child,
.kd-table--grid tfoot td:last-child {
border-right: none;
}
/* ================================================================
UTILITY CLASSES
================================================================ */
/* Colour */
.kd-text-blue { color: #02338C; }
.kd-text-orange { color: #F06901; }
.kd-text-muted { color: #5A6E99; }
.kd-text-danger { color: #DC2626; }
.kd-text-white { color: #FFFFFF; }
.kd-bg-blue { background: #02338C; }
.kd-bg-orange { background: #F06901; }
.kd-bg-surface { background: #F5F7FB; }
.kd-bg-white { background: #FFFFFF; }
.kd-bg-tint { background: rgba(2, 51, 140, 0.06); }
/* Border */
.kd-border { border: 1px solid #D0D8EE; }
.kd-border-blue { border: 1px solid #02338C; }
.kd-border-orange { border: 1px solid #F06901; }
/* Radius */
.kd-rounded { border-radius: 3px; }
.kd-rounded-card { border-radius: 4px; }
.kd-rounded-pill { border-radius: 12px; }
.kd-rounded-full { border-radius: 9999px; }
/* Typography */
.kd-font-tabular { font-variant-numeric: tabular-nums; }
.kd-uppercase { text-transform: uppercase; letter-spacing: 0.05em; }
.kd-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Spacing shorthands */
.kd-gap-4 { gap: 4px; }
.kd-gap-8 { gap: 8px; }
.kd-gap-12 { gap: 12px; }
.kd-gap-16 { gap: 16px; }
/* Flex helpers */
.kd-flex { display: flex; }
.kd-flex-col { display: flex; flex-direction: column; }
.kd-flex-center { display: flex; align-items: center; justify-content: center; }
.kd-flex-between { display: flex; align-items: center; justify-content: space-between; }
.kd-flex-wrap { flex-wrap: wrap; }
.kd-flex-1 { flex: 1; min-width: 0; }
/* Screen-reader only */
.kd-sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ================================================================
MODAL / DIALOG
================================================================ */
.kd-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(2, 51, 140, 0.38);
z-index: 500;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
}
.kd-modal-backdrop.is-open {
opacity: 1;
visibility: visible;
}
.kd-modal {
background: #FFFFFF;
border-radius: 4px;
box-shadow: 0 12px 48px rgba(2, 51, 140, 0.20);
width: 100%;
max-width: 520px;
max-height: calc(100vh - 48px);
display: flex;
flex-direction: column;
transform: translateY(-10px) scale(0.99);
transition: transform 0.2s;
}
.kd-modal-backdrop.is-open .kd-modal {
transform: translateY(0) scale(1);
}
.kd-modal--sm { max-width: 380px; }
.kd-modal--lg { max-width: 720px; }
.kd-modal--xl { max-width: 960px; }
.kd-modal__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 18px 24px 14px;
border-bottom: 1px solid #D0D8EE;
flex-shrink: 0;
border-radius: 4px 4px 0 0;
}
.kd-modal__title {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 15px;
font-weight: 700;
color: #02338C;
line-height: 1.3;
}
.kd-modal__subtitle {
font-size: 12px;
color: #5A6E99;
margin-top: 3px;
}
.kd-modal__close {
flex-shrink: 0;
width: 28px; height: 28px;
border: none;
background: transparent;
color: #5A6E99;
cursor: pointer;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
line-height: 1;
transition: background 0.15s, color 0.15s;
margin-top: -3px;
}
.kd-modal__close:hover { background: #F5F7FB; color: #02338C; }
.kd-modal__body {
padding: 20px 24px;
overflow-y: auto;
flex: 1;
scrollbar-width: thin;
scrollbar-color: #D0D8EE #F5F7FB;
}
.kd-modal__body::-webkit-scrollbar { width: 5px; }
.kd-modal__body::-webkit-scrollbar-thumb { background: #D0D8EE; border-radius: 3px; }
.kd-modal__footer {
padding: 14px 24px;
border-top: 1px solid #D0D8EE;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-shrink: 0;
background: #F5F7FB;
border-radius: 0 0 4px 4px;
}
.kd-modal__footer--start { justify-content: flex-start; }
.kd-modal__footer--between { justify-content: space-between; }
/* Danger variant */
.kd-modal--danger .kd-modal__header {
background: #FEF2F2;
border-bottom-color: rgba(220, 38, 38, 0.2);
}
.kd-modal--danger .kd-modal__title { color: #991B1B; }
/* ================================================================
ACCORDION
================================================================ */
.kd-accordion {
border: 1px solid #D0D8EE;
border-radius: 4px;
overflow: hidden;
}
.kd-accordion__item {
border-bottom: 1px solid #D0D8EE;
}
.kd-accordion__item:last-child { border-bottom: none; }
.kd-accordion__trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 16px;
background: #FFFFFF;
border: none;
cursor: pointer;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
font-weight: 600;
color: #02338C;
text-align: left;
transition: background 0.15s;
}
.kd-accordion__trigger:hover { background: #F5F7FB; }
.kd-accordion__trigger.is-open { background: #F5F7FB; }
.kd-accordion__chevron {
flex-shrink: 0;
color: #5A6E99;
transition: transform 0.22s ease;
}
.kd-accordion__trigger.is-open .kd-accordion__chevron {
transform: rotate(180deg);
}
.kd-accordion__content {
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease;
}
.kd-accordion__content.is-open {
max-height: 600px;
}
.kd-accordion__body {
padding: 4px 16px 16px;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
color: #4A5E8A;
line-height: 1.6;
}
/* Flush variant — no outer border */
.kd-accordion--flush {
border: none;
border-radius: 0;
}
.kd-accordion--flush .kd-accordion__item {
border-bottom-color: #D0D8EE;
}
.kd-accordion--flush .kd-accordion__trigger { padding-left: 0; padding-right: 0; }
.kd-accordion--flush .kd-accordion__body { padding-left: 0; padding-right: 0; }
/* ================================================================
SPINNER
================================================================ */
.kd-spinner {
display: inline-block;
width: 24px; height: 24px;
border-radius: 50%;
border: 2.5px solid #D0D8EE;
border-top-color: #02338C;
animation: kd-spin 0.65s linear infinite;
flex-shrink: 0;
}
.kd-spinner--xs { width: 14px; height: 14px; border-width: 2px; }
.kd-spinner--sm { width: 18px; height: 18px; border-width: 2px; }
.kd-spinner--lg { width: 36px; height: 36px; border-width: 3px; }
.kd-spinner--xl { width: 48px; height: 48px; border-width: 3.5px; }
.kd-spinner--orange { border-color: #F5F7FB; border-top-color: #F06901; }
.kd-spinner--white { border-color: rgba(255,255,255,0.25); border-top-color: #FFFFFF; }
.kd-spinner--muted { border-color: #D0D8EE; border-top-color: #5A6E99; }
/* Centred wrap */
.kd-spinner-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 24px;
color: #5A6E99;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
}
/* ================================================================
SKELETON LOADER
================================================================ */
@keyframes kd-shimmer {
0% { background-position: -300% 0; }
100% { background-position: 300% 0; }
}
.kd-skeleton {
display: block;
background: linear-gradient(
90deg,
#F5F7FB 25%,
#E2E8F5 50%,
#F5F7FB 75%
);
background-size: 300% 100%;
animation: kd-shimmer 1.6s ease-in-out infinite;
border-radius: 3px;
}
/* Shape presets */
.kd-skeleton--text { height: 13px; }
.kd-skeleton--label { height: 11px; width: 60%; }
.kd-skeleton--heading { height: 18px; width: 45%; }
.kd-skeleton--btn { height: 32px; width: 90px; border-radius: 3px; }
.kd-skeleton--avatar { width: 40px; height: 40px; border-radius: 50%; }
.kd-skeleton--avatar-sm { width: 32px; height: 32px; border-radius: 50%; }
.kd-skeleton--card { height: 120px; border-radius: 4px; }
.kd-skeleton--row { height: 40px; border-radius: 0; }
.kd-skeleton--pill { height: 22px; width: 64px; border-radius: 12px; }
/* Skeleton block — a stacked group of lines */
.kd-skeleton-block {
display: flex;
flex-direction: column;
gap: 8px;
}
/* ================================================================
EMPTY STATE
================================================================ */
.kd-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 48px 24px;
gap: 0;
}
.kd-empty--compact { padding: 28px 16px; }
.kd-empty__icon {
width: 48px; height: 48px;
border-radius: 12px;
background: #F5F7FB;
border: 1px solid #D0D8EE;
display: flex;
align-items: center;
justify-content: center;
color: #5A6E99;
margin-bottom: 16px;
flex-shrink: 0;
}
.kd-empty--compact .kd-empty__icon { width: 36px; height: 36px; margin-bottom: 12px; }
.kd-empty__title {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14px;
font-weight: 700;
color: #02338C;
margin-bottom: 6px;
}
.kd-empty__text {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
color: #5A6E99;
line-height: 1.5;
max-width: 320px;
margin-bottom: 20px;
}
.kd-empty--compact .kd-empty__text { margin-bottom: 14px; }
.kd-empty__actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
/* ================================================================
BANNER
================================================================ */
.kd-banner {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 16px;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
font-weight: 500;
width: 100%;
}
.kd-banner__text { flex: 1; min-width: 0; }
.kd-banner__action {
flex-shrink: 0;
font-weight: 700;
text-decoration: underline;
cursor: pointer;
background: none;
border: none;
font-family: inherit;
font-size: inherit;
color: inherit;
padding: 0;
}
.kd-banner__dismiss {
flex-shrink: 0;
background: none;
border: none;
cursor: pointer;
color: inherit;
opacity: 0.6;
font-size: 18px;
line-height: 1;
padding: 0 2px;
}
.kd-banner__dismiss:hover { opacity: 1; }
.kd-banner--primary { background: #02338C; color: #FFFFFF; }
.kd-banner--accent { background: #F06901; color: #FFFFFF; }
.kd-banner--info { background: #EEF3FB; color: #02338C; border-bottom: 1px solid rgba(2,51,140,0.15); }
.kd-banner--success { background: #ECFDF5; color: #065F46; border-bottom: 1px solid rgba(5,150,105,0.2); }
.kd-banner--warning { background: #FFFBEB; color: #92400E; border-bottom: 1px solid rgba(245,158,11,0.3); }
.kd-banner--danger { background: #FEF2F2; color: #991B1B; border-bottom: 1px solid rgba(220,38,38,0.2); }
/* ================================================================
TAG / CHIP INPUT
================================================================ */
.kd-tag-field {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
padding: 5px 8px;
border: 1.5px solid #D0D8EE;
border-radius: 3px;
background: #FFFFFF;
cursor: text;
transition: border-color 0.15s, box-shadow 0.15s;
min-height: 38px;
}
.kd-tag-field:focus-within {
border-color: #02338C;
box-shadow: 0 0 0 3px rgba(2, 51, 140, 0.12);
}
.kd-tag-field__input {
border: none;
outline: none;
background: transparent;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
color: #02338C;
min-width: 80px;
flex: 1;
padding: 2px 3px;
}
.kd-tag-field__input::placeholder { color: #5A6E99; }
/* Individual tag / chip */
.kd-tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 8px 2px 10px;
border-radius: 12px;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
}
.kd-tag--blue { background: rgba(2, 51, 140, 0.10); color: #02338C; }
.kd-tag--orange { background: rgba(240, 105, 1, 0.10); color: #F06901; }
.kd-tag--muted { background: #F5F7FB; color: #5A6E99; border: 1px solid #D0D8EE; }
.kd-tag__remove {
display: flex;
align-items: center;
justify-content: center;
width: 14px; height: 14px;
border-radius: 50%;
background: none;
border: none;
cursor: pointer;
color: inherit;
opacity: 0.6;
font-size: 14px;
line-height: 1;
padding: 0;
transition: opacity 0.12s, background 0.12s;
flex-shrink: 0;
}
.kd-tag__remove:hover { opacity: 1; background: rgba(0,0,0,0.10); }
/* ================================================================
AUTOCOMPLETE
================================================================ */
.kd-autocomplete {
position: relative;
}
.kd-autocomplete__list {
position: absolute;
top: calc(100% + 4px);
left: 0; right: 0;
background: #FFFFFF;
border: 1px solid #D0D8EE;
border-radius: 4px;
box-shadow: 0 4px 20px rgba(2, 51, 140, 0.12);
z-index: 200;
overflow: hidden;
overflow-y: auto;
max-height: 260px;
scrollbar-width: thin;
scrollbar-color: #D0D8EE #F5F7FB;
}
.kd-autocomplete__list::-webkit-scrollbar { width: 5px; }
.kd-autocomplete__list::-webkit-scrollbar-thumb { background: #D0D8EE; border-radius: 3px; }
.kd-autocomplete__item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
color: #02338C;
cursor: pointer;
transition: background 0.1s;
}
.kd-autocomplete__item:hover,
.kd-autocomplete__item.is-active { background: #F5F7FB; }
.kd-autocomplete__item mark {
background: transparent;
color: #F06901;
font-weight: 700;
}
.kd-autocomplete__item-sub {
font-size: 11px;
color: #5A6E99;
margin-top: 1px;
}
.kd-autocomplete__empty {
padding: 14px;
text-align: center;
font-size: 13px;
color: #5A6E99;
}
.kd-autocomplete__group-label {
padding: 6px 14px 3px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: #5A6E99;
background: #F5F7FB;
}
/* ================================================================
DATE PICKER / CALENDAR
================================================================ */
.kd-datepicker { position: relative; }
.kd-calendar {
background: #FFFFFF;
border: 1px solid #D0D8EE;
border-radius: 4px;
box-shadow: 0 4px 20px rgba(2, 51, 140, 0.12);
width: 280px;
padding: 12px;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.kd-calendar__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.kd-calendar__nav {
width: 28px; height: 28px;
border: none;
background: transparent;
color: #5A6E99;
border-radius: 3px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: background 0.12s, color 0.12s;
}
.kd-calendar__nav:hover { background: #F5F7FB; color: #02338C; }
.kd-calendar__month {
font-size: 13px;
font-weight: 700;
color: #02338C;
}
.kd-calendar__weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
margin-bottom: 4px;
}
.kd-calendar__wd {
text-align: center;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #5A6E99;
padding: 3px 0;
}
.kd-calendar__grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
}
.kd-calendar__day {
display: flex;
align-items: center;
justify-content: center;
height: 32px;
border-radius: 3px;
border: none;
background: transparent;
font-size: 12px;
font-weight: 500;
color: #02338C;
cursor: pointer;
transition: background 0.12s, color 0.12s;
font-variant-numeric: tabular-nums;
}
.kd-calendar__day:hover { background: #F5F7FB; }
.kd-calendar__day.is-today {
border: 1.5px solid #02338C;
font-weight: 700;
}
.kd-calendar__day.is-selected {
background: #02338C;
color: #FFFFFF;
font-weight: 700;
}
.kd-calendar__day.is-selected:hover { background: #022b74; }
.kd-calendar__day.is-in-range {
background: rgba(2, 51, 140, 0.08);
border-radius: 0;
}
.kd-calendar__day.is-range-start { border-radius: 3px 0 0 3px; }
.kd-calendar__day.is-range-end { border-radius: 0 3px 3px 0; }
.kd-calendar__day.is-other-month { color: #C5D0E8; }
.kd-calendar__day.is-disabled { color: #C5D0E8; cursor: not-allowed; }
.kd-calendar__day.is-disabled:hover { background: transparent; }
.kd-calendar__footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #D0D8EE;
gap: 6px;
}
/* ================================================================
STEPPER / MULTI-STEP
================================================================ */
.kd-stepper {
display: flex;
align-items: flex-start;
}
.kd-step {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
position: relative;
}
/* Connector line */
.kd-step::after {
content: '';
position: absolute;
top: 16px;
left: calc(50% + 20px);
right: calc(-50% + 20px);
height: 2px;
background: #D0D8EE;
z-index: 0;
}
.kd-step:last-child::after { display: none; }
.kd-step.is-complete::after { background: #02338C; }
.kd-step__indicator {
width: 32px; height: 32px;
border-radius: 50%;
border: 2px solid #D0D8EE;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 12px;
font-weight: 700;
color: #5A6E99;
position: relative;
z-index: 1;
transition: background 0.2s, border-color 0.2s, color 0.2s;
flex-shrink: 0;
}
.kd-step.is-active .kd-step__indicator {
border-color: #02338C;
color: #02338C;
box-shadow: 0 0 0 4px rgba(2, 51, 140, 0.12);
}
.kd-step.is-complete .kd-step__indicator {
background: #02338C;
border-color: #02338C;
color: #FFFFFF;
}
.kd-step__label {
margin-top: 8px;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 11px;
font-weight: 600;
color: #5A6E99;
text-align: center;
line-height: 1.3;
}
.kd-step.is-active .kd-step__label { color: #02338C; }
.kd-step.is-complete .kd-step__label { color: #02338C; }
.kd-step__sublabel {
font-size: 10px;
font-weight: 400;
color: #5A6E99;
text-align: center;
margin-top: 2px;
}
/* Vertical stepper */
.kd-stepper--vertical {
flex-direction: column;
align-items: flex-start;
gap: 0;
}
.kd-stepper--vertical .kd-step {
flex-direction: row;
align-items: flex-start;
flex: none;
width: 100%;
gap: 14px;
padding-bottom: 28px;
}
.kd-stepper--vertical .kd-step:last-child { padding-bottom: 0; }
.kd-stepper--vertical .kd-step::after {
top: 32px; bottom: 0;
left: 15px; right: auto;
width: 2px; height: auto;
}
.kd-stepper--vertical .kd-step__label {
margin-top: 5px;
text-align: left;
font-size: 13px;
}
.kd-stepper--vertical .kd-step__sublabel { text-align: left; font-size: 12px; }
.kd-stepper--vertical .kd-step__body {
flex: 1;
min-width: 0;
padding-bottom: 8px;
}
/* ================================================================
SPORTS: SPLIT COMPARISON BAR
================================================================ */
.kd-split-bar { display: flex; flex-direction: column; gap: 8px; }
.kd-split-bar__labels {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.kd-split-bar__label-a {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 12px;
font-weight: 700;
color: #02338C;
}
.kd-split-bar__label-b {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 12px;
font-weight: 700;
color: #F06901;
}
.kd-split-bar__metric {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #5A6E99;
}
.kd-split-bar__track {
display: flex;
height: 28px;
border-radius: 3px;
overflow: hidden;
border: 1px solid #D0D8EE;
}
.kd-split-bar__a {
background: #02338C;
display: flex;
align-items: center;
padding: 0 10px;
color: #FFFFFF;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
transition: width 0.4s ease;
justify-content: flex-start;
overflow: hidden;
}
.kd-split-bar__b {
background: #F06901;
display: flex;
align-items: center;
padding: 0 10px;
color: #FFFFFF;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
transition: width 0.4s ease;
justify-content: flex-end;
overflow: hidden;
flex: 1;
}
/* Slim variant */
.kd-split-bar--slim .kd-split-bar__track { height: 10px; border-radius: 5px; }
.kd-split-bar--slim .kd-split-bar__a,
.kd-split-bar--slim .kd-split-bar__b { font-size: 0; padding: 0; }
/* ================================================================
SPORTS: BALL-BY-BALL TRACKER
================================================================ */
.kd-ball-tracker {
display: flex;
flex-direction: column;
gap: 8px;
}
.kd-ball-over {
display: flex;
align-items: center;
gap: 6px;
}
.kd-ball-over__num {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 11px;
font-weight: 600;
color: #5A6E99;
min-width: 24px;
font-variant-numeric: tabular-nums;
}
.kd-ball-over__balls {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.kd-ball {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
border-radius: 50%;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.kd-ball--dot { background: #F5F7FB; color: #5A6E99; border: 1px solid #D0D8EE; }
.kd-ball--1 { background: #F5F7FB; color: #02338C; border: 1px solid #D0D8EE; }
.kd-ball--2 { background: #F5F7FB; color: #02338C; border: 1px solid #D0D8EE; }
.kd-ball--3 { background: rgba(2, 51, 140, 0.12); color: #02338C; }
.kd-ball--4 { background: #02338C; color: #FFFFFF; }
.kd-ball--6 { background: #F06901; color: #FFFFFF; }
.kd-ball--w { background: #DC2626; color: #FFFFFF; }
.kd-ball--wd { background: #FFFBEB; color: #92400E; border: 1px solid #F59E0B; }
.kd-ball--nb { background: #FFFBEB; color: #92400E; border: 1px solid #F59E0B; }
.kd-ball--lb { background: #F5F7FB; color: #5A6E99; border: 1px solid #D0D8EE; }
.kd-ball--empty { background: transparent; border: 1.5px dashed #D0D8EE; color: transparent; }
/* Compact ball (for tight layouts) */
.kd-ball--sm { width: 22px; height: 22px; font-size: 10px; }
.kd-ball--lg { width: 36px; height: 36px; font-size: 13px; }
/* ================================================================
SPORTS: MATCH STATUS STRIP
================================================================ */
.kd-match-strip {
display: flex;
align-items: center;
gap: 0;
background: #FFFFFF;
border: 1px solid #D0D8EE;
border-radius: 4px;
overflow: hidden;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.kd-match-strip__team {
display: flex;
flex-direction: column;
padding: 10px 16px;
flex: 1;
min-width: 0;
}
.kd-match-strip__team--b { text-align: right; }
.kd-match-strip__name {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #5A6E99;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kd-match-strip__score {
font-size: 20px;
font-weight: 700;
color: #02338C;
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
.kd-match-strip__overs {
font-size: 11px;
color: #5A6E99;
font-variant-numeric: tabular-nums;
}
.kd-match-strip__center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px 14px;
border-left: 1px solid #D0D8EE;
border-right: 1px solid #D0D8EE;
gap: 4px;
flex-shrink: 0;
}
.kd-match-strip__vs {
font-size: 11px;
font-weight: 700;
color: #D0D8EE;
}
/* Live variant */
.kd-match-strip--live .kd-match-strip__center {
background: #FEF2F2;
border-color: rgba(220,38,38,0.2);
}
/* Compact — single line */
.kd-match-strip--compact {
padding: 8px 14px;
gap: 10px;
border-radius: 3px;
}
.kd-match-strip--compact .kd-match-strip__team {
flex-direction: row;
align-items: center;
gap: 8px;
padding: 0;
}
.kd-match-strip--compact .kd-match-strip__score { font-size: 14px; }
.kd-match-strip--compact .kd-match-strip__name { font-size: 12px; }
.kd-match-strip--compact .kd-match-strip__center {
border: none;
padding: 0 8px;
}
/* ================================================================
SPORTS: STANDINGS / POINTS TABLE
================================================================ */
/* Extends .kd-table--neutral */
.kd-table--standings .kd-table tbody tr.is-promoted td { background: rgba(5, 150, 105, 0.05); }
.kd-table--standings .kd-table tbody tr.is-relegated td { background: rgba(220, 38, 38, 0.05); }
.kd-table--standings .kd-pos {
font-weight: 700;
color: #5A6E99;
text-align: center;
width: 32px;
}
.kd-table--standings .kd-pos--top { color: #02338C; }
/* Form string — row of W/D/L indicators */
.kd-form-string {
display: flex;
gap: 3px;
align-items: center;
}
.kd-form-w { width: 18px; height: 18px; border-radius: 3px; background: #059669; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.kd-form-d { width: 18px; height: 18px; border-radius: 3px; background: #D0D8EE; color: #5A6E99; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.kd-form-l { width: 18px; height: 18px; border-radius: 3px; background: #DC2626; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.kd-form-n { width: 18px; height: 18px; border-radius: 3px; background: #FFFBEB; color: #92400E; border: 1px solid #F59E0B; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
/* ================================================================
SPORTS: RUN RATE PROGRESS (two-row, shared target marker)
Layout: [Team + score] [━━━━━━━━|━━░░░░] [overs]
Both rows share a red target marker at the same % position.
No overlapping bars — one clean bar per team.
================================================================ */
.kd-run-progress {
display: flex;
flex-direction: column;
gap: 2px;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Optional target label centred above the tracks */
.kd-run-progress__target {
text-align: center;
font-size: 11px;
font-weight: 600;
color: #DC2626;
letter-spacing: 0.03em;
margin-bottom: 4px;
font-variant-numeric: tabular-nums;
}
/* One row per team */
.kd-run-progress__row {
display: flex;
align-items: center;
gap: 10px;
}
/* Team label + score — fixed-width column, right-aligned for A */
.kd-run-progress__label {
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
min-width: 84px;
flex-shrink: 0;
}
.kd-run-progress__label--a { color: #02338C; text-align: right; }
.kd-run-progress__label--b { color: #F06901; }
/* Progress track */
.kd-run-progress__track {
flex: 1;
position: relative;
height: 10px;
background: #F5F7FB;
border: 1px solid #D0D8EE;
border-radius: 5px;
overflow: visible; /* allows marker to extend slightly */
}
/* Filled portion */
.kd-run-progress__fill {
position: absolute;
top: 0; left: 0;
height: 100%;
border-radius: 5px;
transition: width 0.4s ease;
}
.kd-run-progress__fill--a { background: #02338C; }
.kd-run-progress__fill--b { background: #F06901; }
/* Target marker — same % on both rows creates a visual shared line */
.kd-run-progress__marker {
position: absolute;
top: -4px; bottom: -4px;
width: 2px;
background: #DC2626;
border-radius: 1px;
z-index: 2;
}
/* "T" label appears only on the first row's marker */
.kd-run-progress__row:first-of-type .kd-run-progress__marker::after {
content: 'T';
position: absolute;
bottom: calc(100% + 3px);
left: 50%;
transform: translateX(-50%);
font-size: 9px;
font-weight: 700;
color: #DC2626;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1;
}
/* Overs — fixed-width right column */
.kd-run-progress__overs {
font-size: 11px;
color: #5A6E99;
font-variant-numeric: tabular-nums;
white-space: nowrap;
min-width: 46px;
flex-shrink: 0;
}
/* ================================================================
NAVBAR
================================================================ */
.kd-navbar {
display: flex;
align-items: center;
height: 52px;
padding: 0 20px;
background: #FFFFFF;
border-bottom: 1px solid #D0D8EE;
gap: 0;
position: relative;
z-index: 100;
}
.kd-navbar__brand {
display: flex;
align-items: center;
gap: 10px;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 15px;
font-weight: 700;
color: #02338C;
text-decoration: none;
flex-shrink: 0;
margin-right: 24px;
}
.kd-navbar__brand-mark {
width: 28px; height: 28px;
background: #02338C;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
}
.kd-navbar__nav {
display: flex;
align-items: center;
gap: 2px;
flex: 1;
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
}
.kd-navbar__nav::-webkit-scrollbar { display: none; }
.kd-navbar__link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 3px;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
font-weight: 500;
color: #5A6E99;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s, color 0.15s;
flex-shrink: 0;
}
.kd-navbar__link:hover { background: #F5F7FB; color: #02338C; }
.kd-navbar__link.is-active {
color: #02338C;
font-weight: 600;
background: rgba(2, 51, 140, 0.06);
}
.kd-navbar__actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
margin-left: 16px;
}
/* Dark (blue) navbar */
.kd-navbar--dark {
background: #02338C;
border-bottom-color: rgba(255,255,255,0.12);
}
.kd-navbar--dark .kd-navbar__brand { color: #FFFFFF; }
.kd-navbar--dark .kd-navbar__brand-mark { background: rgba(255,255,255,0.15); }
.kd-navbar--dark .kd-navbar__link { color: rgba(255,255,255,0.65); }
.kd-navbar--dark .kd-navbar__link:hover { background: rgba(255,255,255,0.10); color: #FFFFFF; }
.kd-navbar--dark .kd-navbar__link.is-active { background: rgba(255,255,255,0.15); color: #FFFFFF; }
/* ================================================================
DRAWER / SIDE PANEL
================================================================ */
.kd-drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(2, 51, 140, 0.35);
z-index: 480;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s, visibility 0.25s;
}
.kd-drawer-backdrop.is-open {
opacity: 1;
visibility: visible;
}
.kd-drawer {
position: fixed;
top: 0; bottom: 0;
width: 340px;
max-width: calc(100vw - 48px);
background: #FFFFFF;
box-shadow: 4px 0 32px rgba(2, 51, 140, 0.16);
z-index: 490;
display: flex;
flex-direction: column;
transition: transform 0.28s ease;
}
.kd-drawer--left { left: 0; transform: translateX(-100%); }
.kd-drawer--right { right: 0; transform: translateX(100%); box-shadow: -4px 0 32px rgba(2,51,140,0.16); }
.kd-drawer.is-open { transform: translateX(0); }
.kd-drawer--sm { width: 260px; }
.kd-drawer--lg { width: 480px; }
.kd-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid #D0D8EE;
flex-shrink: 0;
}
.kd-drawer__title {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14px;
font-weight: 700;
color: #02338C;
}
.kd-drawer__close {
width: 28px; height: 28px;
border: none; background: transparent;
color: #5A6E99; cursor: pointer;
border-radius: 3px;
display: flex; align-items: center; justify-content: center;
font-size: 20px; line-height: 1;
transition: background 0.15s, color 0.15s;
}
.kd-drawer__close:hover { background: #F5F7FB; color: #02338C; }
.kd-drawer__body {
flex: 1;
overflow-y: auto;
padding: 20px;
scrollbar-width: thin;
scrollbar-color: #D0D8EE #F5F7FB;
}
.kd-drawer__body::-webkit-scrollbar { width: 5px; }
.kd-drawer__body::-webkit-scrollbar-thumb { background: #D0D8EE; border-radius: 3px; }
.kd-drawer__footer {
padding: 14px 20px;
border-top: 1px solid #D0D8EE;
background: #F5F7FB;
display: flex;
gap: 8px;
justify-content: flex-end;
flex-shrink: 0;
}
/* ================================================================
NOTIFICATION BELL + PANEL
================================================================ */
.kd-notif-wrap {
position: relative;
display: inline-flex;
}
.kd-notif-panel {
position: absolute;
top: calc(100% + 6px);
right: 0;
width: 340px;
background: #FFFFFF;
border: 1px solid #D0D8EE;
border-radius: 4px;
box-shadow: 0 6px 28px rgba(2, 51, 140, 0.14);
z-index: 300;
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.kd-notif-panel.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.kd-notif-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid #D0D8EE;
background: #F5F7FB;
}
.kd-notif-panel__title {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
font-weight: 700;
color: #02338C;
}
.kd-notif-panel__action {
font-size: 12px;
color: #F06901;
font-weight: 600;
cursor: pointer;
background: none;
border: none;
font-family: inherit;
padding: 0;
}
.kd-notif-panel__action:hover { text-decoration: underline; }
.kd-notif-list {
overflow-y: auto;
max-height: 360px;
scrollbar-width: thin;
scrollbar-color: #D0D8EE #FFFFFF;
}
.kd-notif-list::-webkit-scrollbar { width: 4px; }
.kd-notif-list::-webkit-scrollbar-thumb { background: #D0D8EE; border-radius: 2px; }
.kd-notif-item {
display: flex;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid #F5F7FB;
transition: background 0.12s;
cursor: pointer;
position: relative;
}
.kd-notif-item:hover { background: #F5F7FB; }
.kd-notif-item:last-child { border-bottom: none; }
.kd-notif-item.is-unread {
background: rgba(2, 51, 140, 0.03);
}
.kd-notif-item.is-unread::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: #02338C;
}
.kd-notif-item__icon {
width: 36px; height: 36px;
border-radius: 50%;
background: #F5F7FB;
border: 1px solid #D0D8EE;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #5A6E99;
}
.kd-notif-item__icon--blue { background: rgba(2,51,140,0.08); color: #02338C; border-color: transparent; }
.kd-notif-item__icon--orange { background: rgba(240,105,1,0.08); color: #F06901; border-color: transparent; }
.kd-notif-item__icon--danger { background: rgba(220,38,38,0.08); color: #DC2626; border-color: transparent; }
.kd-notif-item__body { flex: 1; min-width: 0; }
.kd-notif-item__title {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
font-weight: 600;
color: #02338C;
line-height: 1.3;
margin-bottom: 2px;
}
.kd-notif-item__text {
font-size: 12px;
color: #5A6E99;
line-height: 1.4;
}
.kd-notif-item__time {
font-size: 11px;
color: #8899BB;
margin-top: 4px;
font-variant-numeric: tabular-nums;
}
.kd-notif-panel__footer {
padding: 10px 16px;
border-top: 1px solid #D0D8EE;
text-align: center;
background: #F5F7FB;
}
.kd-notif-panel__footer a {
font-size: 12px;
font-weight: 600;
color: #02338C;
text-decoration: none;
}
.kd-notif-panel__footer a:hover { text-decoration: underline; }
/* ================================================================
POPOVER
================================================================ */
.kd-popover-wrap { position: relative; display: inline-flex; }
.kd-popover {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
width: 260px;
background: #FFFFFF;
border: 1px solid #D0D8EE;
border-radius: 4px;
box-shadow: 0 6px 24px rgba(2, 51, 140, 0.14);
z-index: 300;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s, visibility 0.15s;
pointer-events: none;
}
.kd-popover.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Arrow */
.kd-popover::after {
content: '';
position: absolute;
top: 100%; left: 50%;
transform: translateX(-50%);
border: 7px solid transparent;
border-top-color: #D0D8EE;
}
.kd-popover::before {
content: '';
position: absolute;
top: 100%; left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #FFFFFF;
z-index: 1;
margin-top: -1px;
}
.kd-popover__header {
padding: 12px 14px 8px;
border-bottom: 1px solid #D0D8EE;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
font-weight: 700;
color: #02338C;
}
.kd-popover__body {
padding: 12px 14px;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
color: #4A5E8A;
line-height: 1.5;
}
.kd-popover__footer {
padding: 8px 14px 12px;
display: flex;
gap: 6px;
justify-content: flex-end;
}
/* Position variants */
.kd-popover--bottom {
bottom: auto;
top: calc(100% + 8px);
}
.kd-popover--bottom::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #D0D8EE; }
.kd-popover--bottom::before { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #FFFFFF; margin-top: 0; margin-bottom: -1px; }
.kd-popover--right { left: calc(100% + 8px); bottom: auto; top: 50%; transform: translateY(-50%); }
.kd-popover--left { right: calc(100% + 8px); left: auto; bottom: auto; top: 50%; transform: translateY(-50%); }
/* ================================================================
CONTEXT MENU
================================================================ */
.kd-context-menu {
position: fixed; /* JS sets top/left on trigger */
background: #FFFFFF;
border: 1px solid #D0D8EE;
border-radius: 4px;
box-shadow: 0 6px 24px rgba(2, 51, 140, 0.14);
z-index: 600;
min-width: 180px;
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: scale(0.97) translateY(-4px);
transform-origin: top left;
transition: opacity 0.12s, transform 0.12s, visibility 0.12s;
}
.kd-context-menu.is-open {
opacity: 1;
visibility: visible;
transform: scale(1) translateY(0);
}
/* Reuses dropdown item styles — aliased for semantic clarity */
.kd-context-menu__item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 14px; background: transparent; border: none; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; color: #02338C; cursor: pointer; text-align: left; transition: background 0.1s; }
.kd-context-menu__item:hover { background: #F5F7FB; }
.kd-context-menu__item.is-destructive { color: #DC2626; }
.kd-context-menu__item.is-destructive:hover { background: #FEF2F2; }
.kd-context-menu__item.is-disabled { opacity: 0.42; cursor: not-allowed; pointer-events: none; }
.kd-context-menu__divider { height: 1px; background: #D0D8EE; margin: 4px 0; }
.kd-context-menu__group-label { padding: 6px 14px 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #5A6E99; }
/* ================================================================
TIMELINE
================================================================ */
.kd-timeline {
display: flex;
flex-direction: column;
gap: 0;
}
.kd-timeline__item {
display: flex;
gap: 14px;
position: relative;
}
.kd-timeline__aside {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
}
.kd-timeline__dot {
width: 12px; height: 12px;
border-radius: 50%;
background: #02338C;
border: 2px solid #FFFFFF;
box-shadow: 0 0 0 2px #02338C;
flex-shrink: 0;
margin-top: 2px;
z-index: 1;
}
.kd-timeline__dot--orange { background: #F06901; box-shadow: 0 0 0 2px #F06901; }
.kd-timeline__dot--success { background: #059669; box-shadow: 0 0 0 2px #059669; }
.kd-timeline__dot--danger { background: #DC2626; box-shadow: 0 0 0 2px #DC2626; }
.kd-timeline__dot--muted { background: #D0D8EE; box-shadow: 0 0 0 2px #D0D8EE; }
.kd-timeline__dot--hollow { background: #FFFFFF; }
.kd-timeline__connector {
width: 2px;
flex: 1;
background: #D0D8EE;
margin: 4px 0;
min-height: 24px;
}
.kd-timeline__item:last-child .kd-timeline__connector { display: none; }
.kd-timeline__body {
flex: 1;
min-width: 0;
padding-bottom: 20px;
}
.kd-timeline__item:last-child .kd-timeline__body { padding-bottom: 0; }
.kd-timeline__time {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 11px;
color: #8899BB;
font-variant-numeric: tabular-nums;
margin-bottom: 2px;
}
.kd-timeline__title {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
font-weight: 600;
color: #02338C;
line-height: 1.3;
margin-bottom: 3px;
}
.kd-timeline__text {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 12px;
color: #5A6E99;
line-height: 1.5;
}
/* Compact */
.kd-timeline--compact .kd-timeline__body { padding-bottom: 12px; }
.kd-timeline--compact .kd-timeline__connector { min-height: 12px; }
/* ================================================================
CODE BLOCK
================================================================ */
.kd-code {
display: inline;
font-family: 'Fira Code', 'Cascadia Code', Consolas, monospace;
font-size: 12px;
background: rgba(2, 51, 140, 0.07);
color: #02338C;
padding: 1px 5px;
border-radius: 3px;
border: 1px solid rgba(2, 51, 140, 0.12);
}
.kd-code-block {
border: 1px solid #D0D8EE;
border-radius: 4px;
overflow: hidden;
}
.kd-code-block__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px;
background: #F5F7FB;
border-bottom: 1px solid #D0D8EE;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 11px;
font-weight: 600;
color: #5A6E99;
}
.kd-code-block__copy {
font-size: 11px;
font-weight: 600;
color: #02338C;
background: none;
border: none;
cursor: pointer;
font-family: inherit;
padding: 0;
transition: color 0.15s;
}
.kd-code-block__copy:hover { color: #F06901; }
.kd-pre {
display: block;
margin: 0;
padding: 16px;
background: #02338C;
color: rgba(255,255,255,0.92);
font-family: 'Fira Code', 'Cascadia Code', Consolas, monospace;
font-size: 12px;
line-height: 1.7;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.2) transparent;
tab-size: 2;
white-space: pre;
}
.kd-pre::-webkit-scrollbar { height: 5px; }
.kd-pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
/* Syntax colour tokens (apply to spans inside .kd-pre) */
.kd-pre .syn-kw { color: #F06901; } /* keyword */
.kd-pre .syn-str { color: rgba(255,255,255,0.65); } /* string */
.kd-pre .syn-num { color: #F06901; font-variant-numeric: tabular-nums; }
.kd-pre .syn-cmt { color: rgba(255,255,255,0.35); font-style: italic; }
.kd-pre .syn-fn { color: #FFFFFF; font-weight: 600; }
/* Light code block variant */
.kd-pre--light {
background: #F5F7FB;
color: #02338C;
border-top: none;
}
.kd-pre--light .syn-kw { color: #F06901; }
.kd-pre--light .syn-str { color: #4A5E8A; }
.kd-pre--light .syn-cmt { color: #8899BB; }
/* ================================================================
RATING / STARS
================================================================ */
.kd-rating {
display: inline-flex;
align-items: center;
gap: 3px;
}
.kd-star {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px; height: 20px;
color: #D0D8EE;
font-size: 18px;
line-height: 1;
transition: color 0.12s, transform 0.12s;
user-select: none;
-webkit-user-select: none;
}
.kd-star.is-filled { color: #F06901; }
.kd-star.is-half { color: #F06901; } /* half star via clip-path if needed */
.kd-star.is-blue { color: #02338C; }
/* Interactive rating */
.kd-rating--interactive .kd-star { cursor: pointer; }
.kd-rating--interactive .kd-star:hover { transform: scale(1.2); }
.kd-rating--interactive:hover .kd-star { color: #D0D8EE; }
.kd-rating--interactive .kd-star:hover,
.kd-rating--interactive .kd-star:hover ~ .kd-star { color: #D0D8EE; }
.kd-rating--interactive:hover .kd-star:hover,
.kd-rating--interactive:hover .kd-star:hover ~ * { color: inherit; }
/* Sizes */
.kd-rating--sm .kd-star { width: 14px; height: 14px; font-size: 13px; }
.kd-rating--lg .kd-star { width: 28px; height: 28px; font-size: 26px; }
.kd-rating__value {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px;
font-weight: 700;
color: #02338C;
margin-left: 6px;
font-variant-numeric: tabular-nums;
}
.kd-rating__count {
font-size: 11px;
color: #5A6E99;
margin-left: 4px;
}
/* ================================================================
TABLE OF CONTENTS
.kd-toc — hierarchical indented (sections + sub-sections)
.kd-toc--flat — flat bulleted hyperlink list
================================================================ */
.kd-toc {
display: block;
padding: 16px 20px;
background: #FFFFFF;
border: 1px solid #D0D8EE;
border-radius: 4px;
}
.kd-toc__title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #5A6E99;
margin-bottom: 10px;
}
/* ── Hierarchical list (ol/ul with nested children) ─── */
.kd-toc ol,
.kd-toc ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Top-level items */
.kd-toc > ol > li,
.kd-toc > ul > li {
margin-bottom: 4px;
}
.kd-toc a {
display: block;
font-size: 13px;
font-weight: 600;
color: #02338C;
text-decoration: none;
line-height: 1.5;
transition: color 0.12s;
}
.kd-toc a:hover {
color: #F06901;
text-decoration: underline;
}
/* Nested (sub-section) items — indented, lighter weight */
.kd-toc ol ol,
.kd-toc ul ul,
.kd-toc ol ul,
.kd-toc ul ol {
padding-left: 14px;
border-left: 2px solid #E2E8F5;
margin-top: 3px;
margin-bottom: 3px;
}
.kd-toc ol ol li,
.kd-toc ul ul li {
margin-bottom: 2px;
}
.kd-toc ol ol a,
.kd-toc ul ul a {
font-size: 12px;
font-weight: 400;
color: #4A5E8A;
}
.kd-toc ol ol a:hover,
.kd-toc ul ul a:hover {
color: #F06901;
}
/* Third level — more indent, muted */
.kd-toc ol ol ol,
.kd-toc ul ul ul {
padding-left: 12px;
}
.kd-toc ol ol ol a,
.kd-toc ul ul ul a {
font-size: 11px;
color: #5A6E99;
}
/* Active / current section */
.kd-toc a.is-active {
color: #F06901;
font-weight: 700;
}
/* ── Flat bulleted variant ──────────────────────────────── */
.kd-toc--flat ol,
.kd-toc--flat ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2px 12px;
}
@media (min-width: 600px) {
.kd-toc--flat ol,
.kd-toc--flat ul {
grid-template-columns: repeat(4, 1fr);
}
}
.kd-toc--flat li {
display: flex;
align-items: baseline;
gap: 6px;
min-width: 0;
}
.kd-toc--flat li::before {
content: '•';
color: #02338C;
font-size: 14px;
line-height: 1;
flex-shrink: 0;
}
.kd-toc--flat a {
font-size: 13px;
font-weight: 400;
color: #02338C;
text-decoration: none;
padding: 3px 0;
line-height: 1.5;
transition: color 0.12s;
}
.kd-toc--flat a:hover {
color: #F06901;
text-decoration: underline;
}
.kd-toc--flat a.is-active {
color: #F06901;
font-weight: 600;
}
/* ── Horizontal rule separator within toc ──────────────── */
.kd-toc__divider {
border: none;
border-top: 1px solid #E2E8F5;
margin: 8px 0;
}
|