/*
 * Kantorku theme: warm neutrals, softer radius, larger touch targets on phones
 * and a low-glare dark mode. Colours come from the panel palette (gray/primary),
 * so brand settings keep working. Loaded after Filament's own stylesheet.
 */

:root:root {
    --radius-lg: 0.625rem;
    --radius-xl: 0.875rem;
    --kk-focus: var(--primary-600);
}

html.dark:root {
    --kk-focus: var(--primary-400);
}

/* Soft dark: warm text instead of pure white, softer primary fills, deeper scrims. */
html.dark {
    --color-white: #e6e3dd;
    color-scheme: dark;
}

html.dark body {
    color: #e6e3dd;
}

html.dark .fi-btn:not(.fi-outlined).fi-color:not(label) {
    background-color: color-mix(in oklab, var(--dark-bg) 93%, var(--gray-950));
}

html.dark .fi-btn:not(.fi-outlined).fi-color:not(label):not(.fi-disabled):not([disabled]):hover {
    background-color: color-mix(in oklab, var(--dark-hover-bg) 88%, var(--gray-950));
}

/* Dark primary fill from the token table, not the muted mix. */
html.dark .fi-btn:not(.fi-outlined).fi-color-primary:not(label) {
    background-color: #b8571c;
    color: #fbfaf8;
}

html.dark .fi-btn:not(.fi-outlined).fi-color-primary:not(label):not(.fi-disabled):not([disabled]):hover {
    background-color: var(--primary-600);
}

html.dark .fi-modal-close-overlay,
html.dark .fi-sidebar-close-overlay {
    background-color: rgb(0 0 0 / 0.62);
}

html.dark ::placeholder {
    color: var(--gray-500);
}

/* Visible keyboard focus in both modes: a solid 2px primary ring clear of the control. */
.fi-btn:focus-visible,
.fi-icon-btn:focus-visible,
.fi-link:focus-visible,
.fi-tabs-item:focus-visible,
.fi-sidebar-item-btn:focus-visible,
.fi-sidebar-group-btn:focus-visible,
.fi-dropdown-list-item:focus-visible,
.fi-pagination-item-btn:focus-visible,
.fi-wi-stats-overview-stat:focus-visible,
.kk-settings-card a:focus-visible,
.fi-theme-switcher-btn:focus-visible,
.kk-phone-tab:focus-visible {
    outline: 2px solid var(--kk-focus);
    outline-offset: 2px;
}

/* Desktop density: 40px controls. */
.fi-btn:not(.fi-size-xs):not(.fi-size-sm),
.fi-input-wrp {
    min-height: 2.5rem;
}

/* Phones and tablets: 44px touch targets, 16px inputs (no iOS zoom). */
@media (pointer: coarse), (max-width: 767px) {
    .fi-btn,
    .fi-input-wrp,
    .fi-tabs-item,
    .fi-dropdown-list-item,
    .fi-sidebar-item-btn,
    .fi-pagination-item-btn {
        min-height: 2.75rem;
    }

    .fi-icon-btn {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    .fi-input,
    .fi-select-input,
    .fi-fo-textarea textarea {
        font-size: 1rem;
    }
}

/* Sign-in and other guest pages: logo above a centred card, note and footer. */
.fi-simple-main-ctn {
    flex-direction: column;
}

.fi-simple-main {
    position: relative;
    margin-top: 4.5rem;
    border-radius: 1.25rem;
}

@media (max-width: 639px) {
    .fi-simple-main {
        margin-inline: 1rem;
        width: auto;
    }
}

.fi-simple-header .fi-logo {
    position: absolute;
    top: -4rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}

.fi-simple-header-subheading {
    color: var(--gray-500);
}

html.dark .fi-simple-header-subheading {
    color: var(--gray-400);
}

.kk-auth-note {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    text-align: center;
    color: var(--gray-500);
}

html.dark .kk-auth-note {
    color: var(--gray-400);
}

.kk-auth-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.375rem;
    padding: 1.5rem 1rem 2rem;
    font-size: 0.8125rem;
    color: var(--gray-500);
}

html.dark .kk-auth-footer {
    color: var(--gray-400);
}

.kk-auth-footer a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Sidebar: active item in a soft primary tint, white rail with a hairline. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--primary-100);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label {
    color: var(--primary-700);
}

html.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: color-mix(in oklab, var(--primary-400) 14%, transparent);
}

html.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label {
    color: var(--primary-300);
}

/* Shared rows (Notifications, Approvals, Settings hub) */
.kk-home-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.5rem;
    padding: 0.625rem 0;
    border-top: 1px solid var(--gray-100);
    color: inherit;
    text-decoration: none;
}

.kk-home-row:first-child {
    border-top: 0;
}

html.dark .kk-home-row {
    border-top-color: var(--gray-800);
}

.kk-home-row-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 0.625rem;
}

.kk-home-row-text {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 0.125rem;
    color: inherit;
    text-decoration: none;
}

.kk-home-row-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--gray-950);
}

.kk-home-row-meta,
.kk-home-empty {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--gray-500);
}

.kk-home-empty {
    margin: 0;
    padding: 0.75rem 0;
}

html.dark .kk-home-row-title {
    color: var(--color-white);
}

html.dark .kk-home-row-meta,
html.dark .kk-home-empty {
    color: var(--gray-400);
}

/* Tones: light uses the 50/700 shades, dark mixes the colour into the page like the badges. */
.kk-tone-danger { background: var(--danger-50); color: var(--danger-700); }
.kk-tone-warning { background: var(--warning-50); color: var(--warning-700); }
.kk-tone-info { background: var(--info-50); color: var(--info-700); }
html.dark .kk-tone-danger { background: color-mix(in srgb, var(--danger-600) 14%, var(--gray-950)); color: color-mix(in srgb, var(--danger-500) 55%, #e6e3dd); }
html.dark .kk-tone-warning { background: color-mix(in srgb, var(--warning-600) 14%, var(--gray-950)); color: color-mix(in srgb, var(--warning-500) 55%, #e6e3dd); }
html.dark .kk-tone-info { background: color-mix(in srgb, var(--info-600) 14%, var(--gray-950)); color: color-mix(in srgb, var(--info-300) 90%, var(--info-700)); }

.kk-tone-text-success { color: var(--success-700); }
.kk-tone-text-warning { color: var(--warning-700); }
.kk-tone-text-danger { color: var(--danger-700); }
.kk-tone-text-gray { color: var(--gray-500); }
html.dark .kk-tone-text-success { color: color-mix(in srgb, var(--success-500) 55%, #e6e3dd); }
html.dark .kk-tone-text-warning { color: color-mix(in srgb, var(--warning-500) 55%, #e6e3dd); }
html.dark .kk-tone-text-danger { color: color-mix(in srgb, var(--danger-500) 55%, #e6e3dd); }
html.dark .kk-tone-text-gray { color: var(--gray-400); }

/* Home, as on the Main and PhoneHome boards */
.kk-home,
.kk-home-head,
.kk-help,
.kk-profile {
    --kk-home-card: var(--color-white);
    --kk-home-border: var(--gray-200);
    --kk-home-divider: #ecebe8;
    --kk-home-row: #f4f3f1;
    --kk-home-text: #18181b;
    --kk-home-text-2: #52525b;
    --kk-home-muted: #6b6b70;
    --kk-home-faint: #737378;
    --kk-home-icon: #3f3f46;
    --kk-home-track: var(--gray-100);
    --kk-home-inset: var(--gray-50);
    --kk-home-primary: var(--kk-primary-fill, var(--primary-600));
    --kk-home-on-primary: var(--color-white);
    --kk-home-soft: var(--primary-50);
    --kk-home-soft-text: var(--primary-700);
    --kk-home-warn: var(--warning-600);
    --kk-home-late: var(--danger-700);
    --kk-home-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    color: var(--kk-home-text);
}

html.dark .kk-home,
html.dark .kk-home-head,
html.dark .kk-help,
html.dark .kk-profile {
    --kk-home-card: var(--gray-900);
    --kk-home-border: var(--gray-700);
    --kk-home-divider: #302e2b;
    --kk-home-row: var(--gray-800);
    --kk-home-text: #e6e3dd;
    --kk-home-text-2: #b7b3ac;
    --kk-home-muted: var(--gray-400);
    --kk-home-faint: #8f8b83;
    --kk-home-icon: #cbc8c1;
    --kk-home-track: #2b2a28;
    --kk-home-inset: var(--gray-950);
    --kk-home-on-primary: #fbfaf8;
    --kk-home-soft: color-mix(in srgb, var(--primary-600) 14%, var(--gray-950));
    --kk-home-soft-text: color-mix(in srgb, var(--primary-300) 90%, var(--primary-700));
    --kk-home-warn: #e2a03f;
    --kk-home-late: color-mix(in srgb, var(--danger-500) 55%, #e6e3dd);
    --kk-home-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.kk-home {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr);
}

.fi-page-header-main-ctn:has(> .kk-home-head) {
    row-gap: 1.25rem;
}

.kk-home-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.kk-home-head-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.25rem;
}

.kk-home-date {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--kk-home-muted);
}

.kk-home-greeting {
    margin: 0;
    font-size: clamp(1.5rem, 4vw, 1.875rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--kk-home-text);
}

.kk-home-summary {
    margin: 0;
    font-size: 0.875rem;
    color: var(--kk-home-text-2);
}

.kk-home-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.kk-home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.75rem;
    padding: 0 0.875rem;
    border: 1px solid var(--kk-home-border);
    border-radius: 0.625rem;
    background: var(--kk-home-card);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--kk-home-text);
    text-decoration: none;
    transition: background-color 0.15s, filter 0.15s;
}

.kk-home-btn > svg {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: var(--kk-home-icon);
}

.kk-home-btn:hover {
    background: var(--kk-home-inset);
}

.kk-home-btn-primary,
.kk-home-btn-soft {
    border-color: transparent;
}

.kk-home-btn-primary {
    background: var(--kk-home-primary);
    color: var(--kk-home-on-primary);
}

.kk-home-btn-primary > svg {
    color: inherit;
}

.kk-home-btn-primary:hover {
    background: var(--kk-home-primary);
    filter: brightness(0.92);
}

.kk-home-btn-soft {
    background: var(--kk-home-soft);
    color: var(--kk-home-soft-text);
}

.kk-home-btn-soft:hover {
    background: var(--kk-home-soft);
    filter: brightness(0.96);
}

html.dark .kk-home-btn-primary:hover,
html.dark .kk-home-btn-soft:hover {
    filter: brightness(1.12);
}

.kk-home-btn-sm {
    height: 2.5rem;
    font-size: 0.84375rem;
}

.kk-home-btn:focus-visible,
.kk-home-segment:focus-visible,
.kk-home-kpi:focus-visible,
.kk-home-tile:focus-visible,
.kk-home-link:focus-visible,
.kk-home-event:focus-visible,
.kk-home-doc:focus-visible,
.kk-home-task-text:focus-visible {
    outline: 2px solid var(--kk-focus);
    outline-offset: 2px;
}

.kk-home-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--kk-home-border);
    border-radius: 1rem;
    background: var(--kk-home-card);
}

.kk-home-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.125rem;
    border-bottom: 1px solid var(--kk-home-divider);
}

.kk-home-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--kk-home-text);
}

.kk-home-count {
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--kk-home-primary);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--kk-home-on-primary);
}

.kk-home-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--kk-home-soft-text);
    text-decoration: none;
}

.kk-home-link:hover {
    text-decoration: underline;
}

.kk-home-segments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 3px;
    border-radius: 0.625rem;
    background: var(--kk-home-row);
}

.kk-home-segment {
    height: 2.125rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--kk-home-text-2);
    cursor: pointer;
}

.kk-home-segment[aria-selected='true'] {
    background: var(--kk-home-card);
    box-shadow: var(--kk-home-shadow);
    color: var(--kk-home-text);
}

.kk-home-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-home-need {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1.125rem;
    border-top: 1px solid var(--kk-home-row);
}

.kk-home-need:first-child {
    border-top: 0;
}

.kk-home-need-main {
    display: flex;
    flex: 1 1 18rem;
    min-width: 0;
    align-items: center;
    gap: 0.875rem;
}

.kk-home-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 0.625rem;
}

.kk-home-icon > svg {
    width: 1.0625rem;
    height: 1.0625rem;
}

.kk-home-dot {
    display: none;
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    margin-top: 0.3125rem;
    border-radius: 999px;
}

.kk-dot-danger { background: var(--danger-600); }
.kk-dot-warning { background: var(--warning-600); }
.kk-dot-info { background: var(--info-600); }

.kk-home-need-text,
.kk-home-task-text,
.kk-home-event-text,
.kk-home-doc-text {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 0.125rem;
    color: inherit;
    text-decoration: none;
}

.kk-home-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--kk-home-text);
}

.kk-home-meta {
    font-size: 0.78125rem;
    line-height: 1.45;
    color: var(--kk-home-muted);
}

.kk-home-need-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.kk-home-empty-state {
    margin: 0;
    padding: 1rem 1.125rem;
    font-size: 0.8125rem;
    color: var(--kk-home-muted);
}

.kk-home-empty-state.kk-flush {
    padding: 0;
}

.kk-home-kpis {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(13.125rem, 1fr));
}

.kk-home-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--kk-home-border);
    border-radius: 0.875rem;
    background: var(--kk-home-card);
    color: var(--kk-home-text);
    text-decoration: none;
}

.kk-home-kpi:hover {
    border-color: var(--primary-300);
}

html.dark .kk-home-kpi:hover {
    border-color: var(--kk-home-soft-text);
}

.kk-home-kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.kk-home-kpi-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--kk-home-muted);
}

.kk-home-kpi-module {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kk-home-faint);
}

.kk-home-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.kk-home-kpi-bar {
    display: block;
    height: 0.375rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--kk-home-track);
}

.kk-home-kpi-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--kk-home-primary);
}

.kk-home-kpi-bar > span.kk-warn {
    background: var(--kk-home-warn);
}

.kk-home-kpi-note {
    font-size: 0.78125rem;
    font-weight: 600;
}

.kk-home-kpi-note.kk-tone-text-gray {
    color: var(--kk-home-muted);
}

.kk-home-columns {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
}

.kk-home-tasks {
    flex: 3 1 27.5rem;
}

.kk-home-side {
    display: flex;
    flex: 2 1 20rem;
    min-width: 0;
    flex-direction: column;
    gap: 1rem;
}

.kk-home-task-list {
    padding: 0.25rem 0;
}

.kk-home-task {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.5rem;
    padding: 0.375rem 1.125rem;
}

.kk-home-task .kk-home-meta,
.kk-home-event .kk-home-meta,
.kk-home-doc .kk-home-meta {
    font-size: 0.75rem;
}

.kk-home-check {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--kk-home-primary);
    cursor: pointer;
}

.kk-home-check:disabled {
    cursor: not-allowed;
}

.kk-home-time {
    flex: none;
    font-size: 0.78125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--kk-home-text-2);
}

.kk-home-time.kk-late,
.kk-home-event-time.kk-late {
    color: var(--kk-home-late);
}

.kk-home-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.125rem;
}

.kk-home-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.kk-home-panel-head .kk-home-meta {
    font-size: 0.75rem;
}

.kk-home-event {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: inherit;
    text-decoration: none;
}

.kk-home-event-time {
    flex: none;
    width: 3.25rem;
    padding-top: 1px;
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.kk-home-event-bar {
    flex: none;
    align-self: stretch;
    width: 3px;
    border-radius: 2px;
    background: var(--kk-home-primary);
}

.kk-home-event-bar.kk-warn {
    background: var(--kk-home-warn);
}

.kk-home-event-title {
    font-size: 0.84375rem;
    font-weight: 600;
    color: var(--kk-home-text);
}

.kk-home-docs {
    gap: 0.625rem;
}

.kk-home-doc {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.625rem;
    background: var(--kk-home-inset);
    color: var(--kk-home-text);
    text-decoration: none;
}

.kk-home-doc-icon {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--kk-home-primary);
}

.kk-home-doc-read {
    flex: none;
    font-size: 0.78125rem;
    font-weight: 700;
    color: var(--kk-home-soft-text);
}

.kk-home-tiles,
.kk-home-phone-only {
    display: none;
}

/* Phone: quick tiles, attention cards, tasks, then a two-column KPI grid. */
@media (max-width: 639px) {
    .kk-home {
        gap: 1rem;
    }

    .kk-home-head .kk-home-quick,
    .kk-home-wide-only,
    .kk-home-segments,
    .kk-home-icon,
    .kk-home-kpi-module,
    .kk-home-kpi-bar {
        display: none;
    }

    .kk-home-phone-only,
    .kk-home-dot {
        display: inline;
    }

    .kk-home-dot {
        display: block;
    }

    .kk-home-tiles {
        display: grid;
        order: 1;
        gap: 0.5rem;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
    }

    .kk-home-tile {
        display: flex;
        min-height: 4.5rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.375rem;
        padding: 0.5rem 0.25rem;
        border: 1px solid var(--kk-home-divider);
        border-radius: 0.875rem;
        background: var(--kk-home-card);
        font-size: 0.71875rem;
        font-weight: 600;
        line-height: 1.25;
        text-align: center;
        color: var(--kk-home-text);
        text-decoration: none;
    }

    .kk-home-tile-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border-radius: 0.625rem;
        background: var(--kk-home-soft);
        color: var(--kk-home-primary);
    }

    html.dark .kk-home-tile-icon {
        color: var(--kk-home-soft-text);
    }

    .kk-home-tile-icon > svg {
        width: 1.0625rem;
        height: 1.0625rem;
    }

    .kk-home-needs,
    .kk-home-tasks {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .kk-home-needs {
        order: 2;
    }

    .kk-home-needs .kk-home-card-head,
    .kk-home-tasks .kk-home-card-head {
        padding: 0 0 0.625rem;
        border: 0;
    }

    .kk-home-need {
        flex-direction: column;
        align-items: stretch;
        gap: 0.625rem;
        margin-top: 0.625rem;
        padding: 0.875rem;
        border: 1px solid var(--kk-home-divider);
        border-radius: 1rem;
        background: var(--kk-home-card);
    }

    .kk-home-need:first-child {
        margin-top: 0;
        border-top: 1px solid var(--kk-home-divider);
    }

    .kk-home-need-main {
        flex: none;
        align-items: flex-start;
        gap: 0.625rem;
    }

    .kk-home-need-actions {
        margin-left: 0;
    }

    .kk-home-need-actions .kk-home-btn {
        flex: 1 1 0;
        height: 2.75rem;
        border-radius: 0.75rem;
        font-size: 0.875rem;
    }

    .kk-home-needs .kk-home-empty-state,
    .kk-home-tasks .kk-home-empty-state {
        border: 1px solid var(--kk-home-divider);
        border-radius: 1rem;
        background: var(--kk-home-card);
    }

    .kk-home-columns {
        display: contents;
    }

    .kk-home-tasks {
        order: 3;
        flex: none;
    }

    .kk-home-task-list {
        border: 1px solid var(--kk-home-divider);
        border-radius: 1rem;
        background: var(--kk-home-card);
    }

    .kk-home-task {
        padding: 0.25rem 0.875rem;
    }

    .kk-home-task .kk-home-title {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .kk-home-check {
        width: 1.375rem;
        height: 1.375rem;
    }

    .kk-home-kpis {
        order: 4;
        gap: 0.5rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* An odd last card takes the whole row instead of leaving a gap beside it. */
    .kk-home-kpis > .kk-home-kpi:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .kk-home-kpi {
        gap: 0.25rem;
        padding: 0.75rem;
        border-color: var(--kk-home-divider);
    }

    .kk-home-kpi-label {
        font-size: 0.75rem;
    }

    .kk-home-kpi-value {
        font-size: 1.1875rem;
        letter-spacing: 0;
    }

    .kk-home-kpi-note {
        font-size: 0.75rem;
    }

    .kk-home-side {
        order: 5;
        flex: none;
    }

    .kk-home-side .kk-home-card {
        border-color: var(--kk-home-divider);
    }
}

/* Date and time picker on phones: a sheet over the page, above the sticky Save / Cancel bar and the
   tab bar, so every day stays tappable. */
@media (max-width: 767px) {
    .fi-fo-date-time-picker .fi-fo-date-time-picker-panel {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        width: 100% !important;
        max-width: none !important;
        max-height: 88dvh;
        overflow-y: auto;
        transform: none !important;
        border-radius: 1.25rem 1.25rem 0 0 !important;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
        z-index: 60;
    }
}

/* Date range picker on phones: bottom sheet, presets as a chip row, one month. */
@media (max-width: 639px) {
    .fi-daterangepicker-dropdown {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        width: 100% !important;
        max-width: none !important;
        max-height: 88vh;
        overflow-y: auto;
        transform: none !important;
        border-radius: 1.25rem 1.25rem 0 0 !important;
        padding-bottom: env(safe-area-inset-bottom);
        z-index: 60;
    }

    .fi-daterangepicker-top {
        flex-direction: column !important;
    }

    .fi-daterangepicker-ranges {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0.5rem;
        width: auto !important;
        overflow-x: auto;
        padding: 0.75rem 1rem !important;
        border: 0 !important;
        border-bottom: 1px solid var(--gray-200) !important;
    }

    html.dark .fi-daterangepicker-ranges {
        border-bottom-color: var(--gray-700) !important;
    }

    .fi-daterangepicker-range-btn {
        flex: none;
        display: inline-flex !important;
        align-items: center;
        width: auto !important;
        min-height: 2.5rem;
        padding: 0 0.875rem !important;
        border-radius: 999px !important;
        white-space: nowrap;
        box-shadow: inset 0 0 0 1px var(--gray-200);
    }

    .fi-daterangepicker-calendars {
        justify-content: center;
    }

    .fi-daterangepicker-calendar + .fi-daterangepicker-calendar {
        display: none !important;
    }

    .fi-daterangepicker-day {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }
}

/* Phone tab bar (Home, Tasks, Search, Alerts, More) */
.kk-phone-tabs {
    display: none;
}

@media (max-width: 767px) {
    .kk-phone-tabs {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 25;
        display: grid;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        padding: 0.25rem 0.25rem calc(0.25rem + env(safe-area-inset-bottom));
        background: color-mix(in oklab, #fff 94%, transparent);
        backdrop-filter: blur(12px);
        box-shadow: 0 -1px 0 var(--gray-200);
    }

    html.dark .kk-phone-tabs {
        background: color-mix(in oklab, var(--gray-900) 94%, transparent);
        box-shadow: 0 -1px 0 var(--gray-800);
    }

    .fi-main-ctn,
    .fi-layout {
        padding-bottom: calc(4.25rem + env(safe-area-inset-bottom));
    }
}

.kk-phone-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    min-height: 3.5rem;
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--gray-600);
    text-decoration: none;
    cursor: pointer;
}

html.dark .kk-phone-tab {
    color: var(--gray-400);
}

.kk-phone-tab.kk-active {
    color: var(--primary-700);
}

html.dark .kk-phone-tab.kk-active {
    color: var(--primary-300);
}

.kk-phone-tab-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.kk-phone-tab-badge {
    position: absolute;
    top: -0.375rem;
    right: -0.625rem;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3125rem;
    border-radius: 999px;
    background: var(--primary-600);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.125rem;
    text-align: center;
}

/* Inline date range in a table views bar */
.fi-ta-views-extra {
    position: relative;
    display: flex;
    align-items: center;
    flex: none;
    padding-inline: 0.25rem;
}

.kk-date-range-pill {
    width: 18.5rem;
}

.kk-date-range-pill .fi-input-wrp {
    min-height: 2.25rem;
    border-radius: 0.5rem;
}

.kk-date-range-pill .fi-input {
    padding-block: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

@media (max-width: 767px) {
    .kk-date-range-pill {
        width: 17.5rem;
    }

    .kk-date-range-pill .fi-input {
        font-size: 0.8125rem;
    }
}

/* Document trail (Inquiry > Quotation > Sales order > Invoice > Receipt) */
.kk-trail {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-trail-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kk-trail-arrow {
    width: 1rem;
    height: 1rem;
    color: var(--gray-400);
}

.kk-trail-step {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 8.5rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.75rem;
    box-shadow: inset 0 0 0 1px var(--gray-200);
}

html.dark .kk-trail-step {
    box-shadow: inset 0 0 0 1px var(--gray-700);
}

.kk-trail-current {
    background: color-mix(in oklab, var(--primary-500) 8%, transparent);
    box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--primary-500) 55%, transparent);
}

html.dark .kk-trail-current {
    box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--primary-400) 50%, transparent);
}

.kk-trail-type {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-500);
}

html.dark .kk-trail-type {
    color: var(--gray-400);
}

.kk-trail-number {
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--gray-950);
}

html.dark .kk-trail-number {
    color: var(--color-white);
}

.kk-trail-link {
    color: var(--primary-700);
    text-decoration: none;
}

.kk-trail-link:hover {
    text-decoration: underline;
}

html.dark .kk-trail-link {
    color: var(--primary-300);
}

.kk-trail-badge {
    align-self: flex-start;
}

@media (max-width: 639px) {
    .kk-trail {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }
}

/* Small read-only tables inside infolists (journal preview) */
.kk-table-scroll {
    overflow-x: auto;
}

.kk-journal-preview {
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.kk-journal-preview th {
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    color: var(--gray-600);
    border-bottom: 1px solid var(--gray-200);
}

.kk-journal-preview td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--gray-100);
}

html.dark .kk-journal-preview th {
    color: var(--gray-300);
    border-bottom-color: var(--gray-700);
}

html.dark .kk-journal-preview td {
    border-bottom-color: var(--gray-800);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Notifications inbox */
.kk-inbox {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kk-inbox-tabs.fi-tabs {
    margin-inline: 0;
    align-self: flex-start;
}

.kk-inbox-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Device (push) notifications: the switch next to the sound one, and the one-time invitation card. */
.kk-inbox-toggles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.kk-push-hint {
    max-width: 28rem;
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.kk-push-ask {
    position: fixed;
    inset-inline-end: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 40;
    display: flex;
    gap: 0.75rem;
    width: min(22rem, calc(100vw - 2rem));
    padding: 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.875rem;
    background: var(--color-white);
    box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.25);
}

html.dark .kk-push-ask {
    border-color: var(--gray-700);
    background: var(--gray-900);
}

.kk-push-ask-icon {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--primary-600);
}

.kk-push-ask-title {
    font-size: 0.9375rem;
    font-weight: 600;
}

.kk-push-ask-body {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--gray-600);
}

html.dark .kk-push-ask-body {
    color: var(--gray-400);
}

.kk-push-ask-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

@media (max-width: 767px) {
    .kk-push-ask {
        bottom: calc(5rem + env(safe-area-inset-bottom));
    }
}

/* Notification sound switch (Notifications page, Profile) */
.kk-notify-ctn {
    display: contents;
}

.kk-sound {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.kk-sound-toggle,
.kk-sound-test {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: var(--kk-control-height-dense, 2.5rem);
    padding: 0 0.875rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--kk-control-radius, 0.625rem);
    background: var(--color-white);
    font-size: 0.84375rem;
    font-weight: 600;
    color: var(--gray-950);
    cursor: pointer;
}

.kk-sound-toggle[aria-checked='true'] {
    border-color: transparent;
    background: var(--primary-50);
    color: var(--primary-700);
}

.kk-sound-test:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.kk-sound-icon {
    width: 1.125rem;
    height: 1.125rem;
}

.kk-sound-toggle:focus-visible,
.kk-sound-test:focus-visible {
    outline: 2px solid var(--kk-focus);
    outline-offset: 2px;
}

html.dark .kk-sound-toggle,
html.dark .kk-sound-test {
    border-color: var(--gray-700);
    background: var(--gray-900);
    color: #e6e3dd;
}

html.dark .kk-sound-toggle[aria-checked='true'] {
    border-color: transparent;
    background: color-mix(in srgb, var(--primary-600) 14%, var(--gray-950));
    color: color-mix(in srgb, var(--primary-300) 90%, var(--primary-700));
}

.kk-profile-sound {
    margin-top: 0;
}

/* A new notification shakes the bell once. */
@keyframes kk-bell-ring {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(14deg); }
    30% { transform: rotate(-12deg); }
    45% { transform: rotate(9deg); }
    60% { transform: rotate(-6deg); }
    75% { transform: rotate(3deg); }
}

.kk-bell-ring svg,
.kk-bell-ring .kk-phone-tab-icon {
    transform-origin: 50% 10%;
    animation: kk-bell-ring 0.9s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .kk-bell-ring svg,
    .kk-bell-ring .kk-phone-tab-icon {
        animation: none;
    }
}

.kk-tone-success { background: color-mix(in oklab, var(--success-500) 12%, transparent); color: var(--success-700); }
.kk-tone-gray { background: var(--gray-100); color: var(--gray-600); }
html.dark .kk-tone-success { color: var(--success-300); }
html.dark .kk-tone-gray { background: var(--gray-800); color: var(--gray-300); }

.kk-inbox-row {
    align-items: flex-start;
}

.kk-inbox-text {
    text-align: start;
    cursor: pointer;
}

.kk-inbox-text:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
    border-radius: 0.375rem;
}

.kk-inbox-body {
    color: var(--gray-600);
    font-size: 0.875rem;
    line-height: 1.4;
}

html.dark .kk-inbox-body {
    color: var(--gray-400);
}

.kk-inbox-row:not(.kk-inbox-unread) .kk-home-row-title {
    font-weight: 500;
}

.kk-inbox-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-inline-end: 0.375rem;
    border-radius: 9999px;
    background: var(--primary-600);
    vertical-align: middle;
}

.kk-inbox-actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.25rem;
}

.kk-inbox-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 0;
    color: var(--gray-500);
    text-align: center;
}

.kk-inbox-more {
    display: flex;
    justify-content: center;
}

@media (max-width: 639px) {
    .kk-inbox-open {
        display: none;
    }
}

/* Settings hub */
.kk-settings {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.kk-settings-search {
    display: block;
    max-width: 28rem;
}

.kk-settings-grid {
    columns: 17rem;
    column-gap: 1rem;
}

.kk-settings-grid > .kk-settings-card {
    break-inside: avoid;
    margin-bottom: 1rem;
}

.kk-settings-card {
    border: 1px solid var(--gray-200);
    border-radius: var(--kk-radius-lg, 0.875rem);
    background: var(--color-white, #fff);
    overflow: hidden;
}

html.dark .kk-settings-card {
    border-color: var(--gray-800);
    background: var(--gray-900);
}

.kk-settings-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem 0.5rem;
}

.kk-settings-card-head h2 {
    font-size: 0.9375rem;
    font-weight: 600;
}

.kk-settings-card-head span {
    color: var(--gray-500);
    font-size: 0.75rem;
}

html.dark .kk-settings-card-head span {
    color: var(--gray-400);
}

.kk-settings-card ul {
    padding: 0 0.375rem 0.375rem;
}

.kk-settings-card a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    color: var(--gray-700);
    font-size: 0.875rem;
    text-decoration: none;
}

.kk-settings-card a svg {
    color: var(--gray-400);
}

.kk-settings-card a:hover,
.kk-settings-card a:focus-visible {
    background: var(--gray-50);
    color: var(--primary-700);
}

html.dark .kk-settings-card a {
    color: var(--gray-300);
}

html.dark .kk-settings-card a:hover,
html.dark .kk-settings-card a:focus-visible {
    background: var(--gray-800);
    color: var(--primary-300);
}

.kk-settings-md {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.kk-settings-nav {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.875rem;
    background: var(--color-white, #fff);
    box-shadow: inset 0 0 0 1px var(--kk-border, var(--gray-200));
}

html.dark .kk-settings-nav {
    background: var(--gray-900);
    box-shadow: inset 0 0 0 1px var(--gray-800);
}

.kk-settings-nav .kk-settings-search {
    max-width: none;
}

.kk-settings-nav ul {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.kk-settings-nav-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    color: var(--gray-700);
    font-size: 0.875rem;
    text-align: start;
}

.kk-settings-nav-btn:hover {
    background: var(--gray-50);
}

.kk-settings-nav-btn--on,
.kk-settings-nav-btn--on:hover {
    background: var(--primary-50);
    color: var(--primary-700);
    font-weight: 600;
}

html.dark .kk-settings-nav-btn {
    color: var(--gray-300);
}

html.dark .kk-settings-nav-btn:hover {
    background: var(--gray-800);
}

html.dark .kk-settings-nav-btn--on,
html.dark .kk-settings-nav-btn--on:hover {
    background: color-mix(in oklab, var(--primary-500) 15%, transparent);
    color: var(--primary-300);
}

.kk-settings-nav-count {
    color: var(--gray-400);
    font-size: 0.75rem;
    font-weight: 400;
}

.kk-settings-detail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

@media (min-width: 64rem) {
    .kk-settings-md {
        grid-template-columns: 14.5rem minmax(0, 1fr);
    }

    .kk-settings-nav {
        position: sticky;
        top: 5rem;
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
    }
}

@media (max-width: 639px) {
    .kk-settings-search {
        max-width: none;
    }

    .kk-settings-card a {
        min-height: 2.75rem;
    }
}

/* Approvals page: one card per document, opens in place with Approve / Reject. */
.kk-approvals {
    display: grid;
    gap: 0.625rem;
}

.kk-approval {
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid var(--gray-200);
    background: var(--color-white);
}

html.dark .kk-approval {
    border-color: var(--gray-800);
    background: var(--gray-900);
}

.kk-approval-head {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    width: 100%;
    padding: 0.875rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.kk-approval-head:disabled {
    cursor: default;
}

.kk-approval-text {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 0.1875rem;
}

.kk-approval-kind {
    font-size: 0.71875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.kk-approval-amount {
    flex: none;
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--gray-950);
}

html.dark .kk-approval-amount {
    color: var(--color-white);
}

.kk-approval-body {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0 0.875rem 0.875rem;
}

.kk-approval-lines {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0.625rem 0.75rem;
    list-style: none;
    border-radius: 0.75rem;
    background: var(--gray-50);
    font-size: 0.8125rem;
}

html.dark .kk-approval-lines {
    background: var(--gray-800);
}

.kk-approval-lines li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.kk-approval-lines b {
    white-space: nowrap;
}

.kk-approval-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: center;
}

.kk-approval-open {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary-700);
}

html.dark .kk-approval-open {
    color: var(--primary-300);
}

.kk-approval-note {
    min-height: 4rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid var(--gray-300);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
    resize: vertical;
}

html.dark .kk-approval-note {
    border-color: var(--gray-700);
}

.kk-approval-error {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--danger-700);
}

.kk-approval-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.kk-approval-result {
    padding: 0.625rem 0.875rem;
    border-top: 1px solid var(--gray-100);
    font-size: 0.8125rem;
    font-weight: 700;
}

html.dark .kk-approval-result {
    border-top-color: var(--gray-800);
}

/* Phone: toasts appear as a snackbar just above the tab bar instead of over the header. */
@media (max-width: 767px) {
    .fi-no.fi-no {
        inset: auto 0.75rem calc(4.75rem + env(safe-area-inset-bottom)) 0.75rem;
        flex-direction: column;
        justify-content: flex-end;
        align-items: stretch;
    }

    .fi-no.fi-no .fi-no-notification {
        max-width: none;
    }
}

/* Phone: the tab bar already has Search and Menu, so the top bar drops its menu and
   search buttons and keeps the company switcher, the bell and the avatar, as on the canvas. */
@media (max-width: 767px) {
    .fi-topbar .fi-topbar-open-sidebar-btn,
    .fi-topbar .kk-search {
        display: none !important;
    }
}

/* ------------------------------------------------------------------------------
 * Redesign shell (Kantorku Redesign canvas): a white sidebar running the full
 * height with the brand on top, a top bar over the content only (company,
 * search, then bell and avatar), compact navigation rows with a hairline
 * instead of dots, and flat bordered cards.
 * ------------------------------------------------------------------------------ */

:root:root {
    --kk-border: var(--gray-200);
    --kk-border-soft: #ecebe8;
    --kk-card-radius: 1rem;
}

html.dark:root {
    --kk-border: var(--gray-700);
    --kk-border-soft: var(--gray-800);
}

/* Navigation rows */
.fi-sidebar-nav {
    row-gap: 0.125rem;
    padding: 0.75rem 0.875rem 1.5rem;
}

.fi-sidebar-nav-groups {
    row-gap: 0.125rem;
}

.fi-sidebar-group-btn,
.fi-sidebar-group > .fi-sidebar-group-items > .fi-sidebar-item > .fi-sidebar-item-btn:has(> .fi-icon, > svg) {
    min-height: 2.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.625rem;
}

.fi-sidebar-group-btn:hover {
    background-color: var(--gray-100);
}

html.dark .fi-sidebar-group-btn:hover {
    background-color: var(--gray-800);
}

.fi-sidebar-group-label {
    font-weight: 600;
    color: #27272a;
}

html.dark .fi-sidebar-group-label {
    color: var(--gray-200);
}

.fi-sidebar-group.fi-active > .fi-sidebar-group-btn .fi-sidebar-group-label {
    color: var(--primary-700);
}

html.dark .fi-sidebar-group.fi-active > .fi-sidebar-group-btn .fi-sidebar-group-label {
    color: var(--primary-300);
}

/* Items of a group hang from one hairline, no dots. */
.fi-sidebar-group-btn ~ .fi-sidebar-group-items {
    margin: 0.125rem 0 0.375rem 1.125rem;
    padding-inline-start: 0.75rem;
    border-inline-start: 1px solid var(--kk-border-soft);
    row-gap: 1px;
}

.fi-sidebar-group-btn ~ .fi-sidebar-group-items .fi-sidebar-item-grouped-border {
    display: none;
}

.fi-sidebar-group-btn ~ .fi-sidebar-group-items .fi-sidebar-item-btn {
    min-height: 2.125rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
}

.fi-sidebar-group-btn ~ .fi-sidebar-group-items .fi-sidebar-item-label {
    font-size: 0.84375rem;
    font-weight: 500;
    color: #52525b;
}

html.dark .fi-sidebar-group-btn ~ .fi-sidebar-group-items .fi-sidebar-item-label {
    color: var(--gray-400);
}

.fi-sidebar-group-btn ~ .fi-sidebar-group-items .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    font-weight: 600;
    color: var(--primary-700);
}

html.dark .fi-sidebar-group-btn ~ .fi-sidebar-group-items .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: var(--primary-300);
}

/* Section label above the pages a cluster lists in the sidebar. */
.fi-sidebar-item[data-kk-nav-section]::before {
    content: attr(data-kk-nav-section);
    display: block;
    padding: 0.5rem 0.625rem 0.125rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #737378;
}

html.dark .fi-sidebar-item[data-kk-nav-section]::before {
    color: var(--gray-500);
}

/* Pages under a section heading (Customers, Vendors…) sit one step in, so the heading reads as their parent. */
.fi-sidebar-item[data-kk-nav-in-section] > .fi-sidebar-item-btn {
    margin-inline-start: 0.75rem;
}

/* Flat cards: one soft border, no drop shadow. */
.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-fo-repeater-item {
    border-radius: var(--kk-card-radius);
    box-shadow: 0 0 0 1px var(--kk-border);
}

html.dark .fi-section:not(.fi-section-not-contained):not(.fi-aside),
html.dark .fi-ta-ctn,
html.dark .fi-wi-stats-overview-stat,
html.dark .fi-fo-repeater-item {
    box-shadow: 0 0 0 1px var(--kk-border);
}

.fi-header-heading {
    font-size: clamp(1.375rem, 2.6vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Top bar: company first, wide search, bell and avatar at the end. */
.fi-topbar {
    box-shadow: 0 1px 0 var(--kk-border);
}

.fi-topbar-end {
    flex: 1 1 auto;
    gap: 0.5rem;
}

.kk-company-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    height: 2.75rem;
    padding: 0 0.75rem 0 0.375rem;
    border: 1px solid var(--kk-border);
    border-radius: 0.625rem;
    background: var(--color-white);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-950);
    cursor: pointer;
}

.kk-company-trigger:hover {
    background: var(--gray-50);
}

html.dark .kk-company-trigger {
    background: var(--gray-900);
    color: var(--gray-100);
}

html.dark .kk-company-trigger:hover {
    background: var(--gray-800);
}

.kk-company-trigger__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 0.5rem;
    background: color-mix(in oklab, var(--primary-500) 10%, transparent);
    color: var(--primary-600);
}

html.dark .kk-company-trigger__icon {
    background: color-mix(in oklab, var(--primary-400) 16%, transparent);
    color: var(--primary-300);
}

.kk-company-trigger__chevron {
    color: var(--gray-500);
}

/* Phone: the bell is in the tab bar, so the avatar takes the end of the bar. */
@media (max-width: 767px) {
    .fi-topbar .fi-topbar-end > .fi-user-menu {
        margin-inline-start: auto;
    }
}

@media (min-width: 768px) {
    .fi-topbar .kk-search {
        flex: 1 1 16rem;
        max-width: 32.5rem;
    }

    .fi-topbar .kk-search .fi-global-search,
    .fi-topbar .kk-search .fi-global-search-field {
        width: 100%;
        max-width: none;
    }

    .fi-topbar .kk-search .fi-input-wrp {
        min-height: 2.75rem;
        background: var(--gray-50);
        box-shadow: 0 0 0 1px var(--kk-border-soft);
    }

    html.dark .fi-topbar .kk-search .fi-input-wrp {
        background: var(--gray-950);
    }

    .fi-topbar .fi-topbar-end > .fi-no-database,
    .fi-topbar .fi-topbar-end > .kk-notify-ctn > .fi-no-database {
        margin-inline-start: auto;
    }

    /* Icon buttons carry a -0.5rem margin; the bordered bell needs its own box. */
    .fi-topbar .fi-topbar-database-notifications-btn {
        width: 2.75rem;
        height: 2.75rem;
        margin: 0;
        border-radius: 0.625rem;
        box-shadow: 0 0 0 1px var(--kk-border);
    }
}

/* Desktop: the sidebar runs the full height with the brand on top; the top bar
   starts where the sidebar ends. */
@media (min-width: 64rem) {
    .fi-body-has-topbar .fi-main-sidebar {
        top: 0;
        height: 100dvh;
        margin-top: calc(-1 * var(--topbar-height));
        z-index: 31;
        background-color: var(--color-white);
        box-shadow: inset -1px 0 0 var(--kk-border);
    }

    html.dark .fi-body-has-topbar .fi-main-sidebar {
        background-color: var(--gray-900);
    }

    .fi-body-has-topbar .fi-main-sidebar .fi-sidebar-header {
        display: flex;
        justify-content: flex-start;
        padding-inline: 1.25rem;
        background: transparent;
        box-shadow: none;
    }

    .fi-body-has-topbar .fi-main-sidebar .kk-sidebar-close {
        display: none;
    }

    .fi-topbar .fi-topbar-start > a {
        display: none;
    }

    .fi-topbar {
        padding-inline-start: calc(var(--sidebar-width) + 1rem);
        padding-inline-end: 1.75rem;
    }

    body:has(.fi-main-sidebar:not(.fi-sidebar-open)) .fi-topbar {
        padding-inline-start: calc(var(--collapsed-sidebar-width, 4.5rem) + 1rem);
    }

    body:has(.fi-main-sidebar:not(.fi-sidebar-open)) .fi-main-sidebar .fi-sidebar-header {
        justify-content: center;
        padding-inline: 0.5rem;
    }

    body:has(.fi-main-sidebar:not(.fi-sidebar-open)) .fi-main-sidebar .fi-sidebar-header .fi-logo {
        max-width: 2.5rem;
        object-fit: contain;
        object-position: left center;
    }

    /* Pages use the full width beside the sidebar; a 77.5rem cap left wide screens half empty. */
    .fi-main {
        max-width: none;
        padding-inline: clamp(1rem, 3vw, 2rem);
    }
}

/* Brand in the sidebar header: the full logo, or only the mark when the desktop sidebar is collapsed. */
.kk-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    text-decoration: none;
}

.kk-brand__mark {
    display: none;
    height: 2rem;
    width: auto;
}

@media (min-width: 64rem) {
    body:has(.fi-main-sidebar:not(.fi-sidebar-open)) .kk-brand .fi-logo {
        display: none;
    }

    body:has(.fi-main-sidebar:not(.fi-sidebar-open)) .kk-brand__mark {
        display: block;
    }
}

/* Quick navigation (Ctrl K): warm surfaces, orange for the active row. */
.kk-qn { background: var(--color-white); border: 1px solid var(--kk-border); }
.kk-qn-head { border-bottom: 1px solid var(--kk-border-soft); }
.kk-qn-foot { border-top: 1px solid var(--kk-border-soft); color: var(--gray-500); }
.kk-qn-input { color: var(--gray-950); }
.kk-qn-back { background: var(--primary-50); color: var(--primary-700); }
.kk-qn-accent { color: var(--primary-600); }
.kk-qn-group, .kk-qn-sub, .kk-qn-faint, .kk-qn-chevron { color: var(--gray-500); }
.kk-qn-item { color: var(--gray-950); }
.kk-qn-item.is-active { background: var(--primary-100); }
.kk-qn-icon { background: var(--gray-100); color: var(--gray-600); }
.kk-qn-item.is-active .kk-qn-icon { background: var(--primary-100); color: var(--primary-700); }
.kk-qn-item.is-active .kk-qn-chevron { color: var(--primary-600); }
html.dark .kk-qn { background: var(--gray-900); border-color: var(--gray-700); }
html.dark .kk-qn-head, html.dark .kk-qn-foot { border-color: var(--gray-800); }
html.dark .kk-qn-input, html.dark .kk-qn-item { color: #e6e3dd; }
html.dark .kk-qn-back, html.dark .kk-qn-item.is-active { background: color-mix(in oklab, var(--primary-400) 16%, transparent); color: var(--primary-400); }
html.dark .kk-qn-group, html.dark .kk-qn-sub, html.dark .kk-qn-faint, html.dark .kk-qn-chevron, html.dark .kk-qn-foot { color: var(--gray-400); }
html.dark .kk-qn-item.is-active .kk-qn-chevron { color: var(--primary-300); }
html.dark .kk-qn-icon { background: var(--gray-800); color: var(--gray-400); }
html.dark .kk-qn-item.is-active .kk-qn-icon { background: color-mix(in oklab, var(--primary-400) 22%, transparent); color: var(--primary-300); }

/* Touch screens and phones: no keyboard hints, a Cancel button instead of esc, and pin stars always visible. */
.kk-qn-cancel { display: none; color: var(--primary-700); }
html.dark .kk-qn-cancel { color: var(--primary-400); }

@media (hover: none) and (pointer: coarse), (max-width: 639px) {
    .kk-qn-keys { display: none !important; }
    .kk-qn-cancel { display: inline-flex; flex: none; padding: 0.375rem 0.25rem; }
    .kk-qn-item button.kk-qn-faint { opacity: 1; }
}
html.dark .kk-qn-kbd { border-color: var(--gray-700); background: var(--gray-800); color: var(--gray-300); }

/* Sidebar icons: 18px outline, muted; the open group and the current page take the primary. */
.fi-sidebar-group-btn > .fi-icon,
.fi-sidebar-group > .fi-sidebar-group-items > .fi-sidebar-item > .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-group > .fi-sidebar-group-items > .fi-sidebar-item > .fi-sidebar-item-btn > svg {
    width: 1.125rem;
    height: 1.125rem;
    color: #71717a;
}

html.dark .fi-sidebar-group-btn > .fi-icon,
html.dark .fi-sidebar-group > .fi-sidebar-group-items > .fi-sidebar-item > .fi-sidebar-item-btn > .fi-icon {
    color: var(--gray-400);
}

.fi-sidebar-group.fi-active > .fi-sidebar-group-btn > .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > svg {
    color: var(--primary-600);
}

html.dark .fi-sidebar-group.fi-active > .fi-sidebar-group-btn > .fi-icon,
html.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
html.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > svg {
    color: var(--primary-400);
}

/* Group chevron: small and muted, pointing right when closed and down when open. */
.fi-sidebar-group-collapse-btn {
    color: #737378;
}

.fi-sidebar-group-collapse-btn .fi-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.fi-sidebar-group-collapse-btn {
    transform: rotate(180deg);
    transition: transform 0.15s ease;
}

.fi-sidebar-group.fi-collapsed .fi-sidebar-group-collapse-btn {
    transform: rotate(-90deg);
}

/* Sidebar footer: version and Help. */
.kk-sidebar-foot {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 0.875rem;
    padding: 0.625rem 0.5rem 0.875rem;
    border-top: 1px solid var(--kk-border-soft);
    font-size: 0.75rem;
    color: var(--gray-500);
}

.kk-sidebar-foot a {
    margin-inline-start: auto;
    font-weight: 600;
    color: var(--primary-700);
    text-decoration: none;
}

html.dark .kk-sidebar-foot {
    color: var(--gray-400);
}

html.dark .kk-sidebar-foot a {
    color: var(--primary-400);
}

/* Soft dark shell surfaces: sidebar and top bar sit on the card colour, not the page colour. */
html.dark .fi-topbar,
html.dark .fi-body-has-topbar .fi-main-sidebar {
    background-color: var(--gray-900);
}

/* Wave 1 follow-ups from the design re-check. */
/* The top bar starts after the sidebar on desktop; a collapsed sidebar narrows it (rule above). */
@media (min-width: 64rem) {
    .fi-topbar {
        padding-inline-start: calc(var(--sidebar-width) + 1.75rem);
    }
}

/* Top-level rows (Home) read like the group rows. */
.fi-sidebar-group:not(:has(.fi-sidebar-group-btn)) .fi-sidebar-item-label {
    font-weight: 600;
}

/* Avatar 36px; bell badge a solid primary dot-count inside the button corner. */
.fi-topbar .fi-user-menu-trigger .fi-avatar {
    width: 2.25rem;
    height: 2.25rem;
}

.fi-topbar .fi-topbar-database-notifications-btn .fi-icon-btn-badge-ctn {
    top: 0.375rem;
    inset-inline-end: 0.375rem;
}

.fi-topbar .fi-topbar-database-notifications-btn .fi-badge {
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--primary-600);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    box-shadow: none;
}

/* ------------------------------------------------------------------------------
 * Redesign wave 2: page header, underline tabs, list chrome.
 * ------------------------------------------------------------------------------ */

/* Breadcrumbs: "Invoices / INV/2026/0001", slashes, no trailing "List"/"View"/"Edit". */
.fi-breadcrumbs-list {
    flex-wrap: wrap;
    row-gap: 0;
    font-size: 0.8125rem;
}

.fi-breadcrumbs-item > svg {
    display: none;
}

.fi-breadcrumbs-item + .fi-breadcrumbs-item::before {
    content: "/";
    margin-inline: 0.375rem;
    color: var(--gray-400);
}

.fi-breadcrumbs-item:last-child:not(:first-child) {
    display: none;
}

.fi-breadcrumbs-item-label {
    color: var(--kk-muted);
    font-weight: 500;
}

html.dark .fi-breadcrumbs-item-label {
    color: var(--gray-400);
}

/* Header: title and actions share a line when they fit; actions wrap to the right. One solid
   primary; success actions (Confirm, Pay, Validate) read as the primary; the rest outlined. */
.fi-header {
    flex-wrap: wrap;
    align-items: flex-end;
    row-gap: 0.75rem;
}

.fi-header > div:first-child {
    flex: 1 1 auto;
    min-width: min(100%, 20rem);
}

.fi-header-heading {
    overflow-wrap: anywhere;
}

.fi-header-actions-ctn {
    flex: 0 1 auto;
    margin-inline-start: auto;
}

.fi-header-actions-ctn > .fi-ac {
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Phones: the title starts at the left edge and shares its line with one button; more buttons wrap to a
   right-aligned row below. A page description takes the full width, so its buttons always sit below it.
   Stats sit two to a row. */
@media (max-width: 639px) {
    .fi-header:not(:has(.kk-chips)) {
        flex-direction: row;
        align-items: center;
    }

    .fi-header:not(:has(.kk-chips)) > div:first-child {
        flex: 1 1 9rem;
        min-width: min(100%, 9rem);
    }

    .fi-header:not(:has(.kk-chips)):has(.fi-header-subheading) > div:first-child {
        flex-basis: 100%;
    }

    .fi-wi-stats-overview .fi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.625rem;
    }

    .fi-wi-stats-overview .fi-wi-stats-overview-stat {
        padding: 0.875rem 1rem;
    }

    .fi-wi-stats-overview .fi-wi-stats-overview-stat-content {
        row-gap: 0.25rem;
    }

    .fi-wi-stats-overview .fi-wi-stats-overview-stat-value {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .fi-wi-stats-overview .fi-wi-stats-overview-stat-description {
        font-size: 0.75rem;
        line-height: 1.1rem;
    }

    .fi-wi-stats-overview .fi-wi-stats-overview-stat-description > span {
        min-width: 0;
    }

    /* The Done card's period select must shrink with the card instead of widening it. */
    .fi-wi-stats-overview .fi-wi-stats-overview-stat-content {
        grid-template-columns: minmax(0, 1fr);
    }

    .fi-wi-stats-overview .fi-wi-stats-overview-stat-label-ctn,
    .fi-wi-stats-overview .fi-wi-stats-overview-stat-label,
    .fi-wi-stats-overview .fi-wi-stats-overview-stat-label > span {
        min-width: 0;
        max-width: 100%;
    }

    .fi-wi-stats-overview .fi-wi-stats-overview-stat-label > span {
        flex-wrap: wrap;
        row-gap: 0;
    }

    .fi-wi-stats-overview .fi-wi-stats-overview-stat-label select {
        min-width: 0;
        max-width: 100%;
        margin-inline-start: -0.25rem;
    }
}

.fi-header-actions-ctn .fi-btn.fi-color-success:not(.fi-outlined) {
    background: var(--primary-600);
    color: #fff;
}

.fi-header-actions-ctn .fi-btn.fi-color-success:not(.fi-outlined):hover {
    background: var(--primary-700);
}

.fi-header-actions-ctn .fi-btn.fi-color-success:not(.fi-outlined) > svg,
.fi-header-actions-ctn .fi-btn.fi-color-success:not(.fi-outlined) > .fi-icon {
    color: #fff;
}

.fi-header-actions-ctn .fi-btn.fi-color:not(.fi-color-primary):not(.fi-color-success):not(.fi-outlined),
.fi-header-actions-ctn .fi-btn:not(.fi-color) {
    background: var(--color-white);
    color: var(--gray-900);
    box-shadow: 0 0 0 1px var(--kk-border);
}

.fi-header-actions-ctn .fi-btn.fi-color:not(.fi-color-primary):not(.fi-color-success):not(.fi-outlined):hover,
.fi-header-actions-ctn .fi-btn:not(.fi-color):hover {
    background: var(--gray-50);
}

.fi-header-actions-ctn .fi-btn.fi-color:not(.fi-color-primary):not(.fi-color-success):not(.fi-outlined) > .fi-icon,
.fi-header-actions-ctn .fi-btn.fi-color:not(.fi-color-primary):not(.fi-color-success):not(.fi-outlined) > svg {
    color: var(--gray-500);
}

.fi-header-actions-ctn .fi-btn.fi-color-danger:not(.fi-outlined) {
    color: var(--danger-700);
}

.fi-header-actions-ctn .fi-btn.fi-color-danger:not(.fi-outlined) > svg,
.fi-header-actions-ctn .fi-btn.fi-color-danger:not(.fi-outlined) > .fi-icon {
    color: var(--danger-600);
}

html.dark .fi-header-actions-ctn .fi-btn.fi-color:not(.fi-color-primary):not(.fi-color-success):not(.fi-outlined),
html.dark .fi-header-actions-ctn .fi-btn:not(.fi-color) {
    background: var(--gray-900);
    color: #e6e3dd;
    box-shadow: 0 0 0 1px var(--gray-700);
}

html.dark .fi-header-actions-ctn .fi-btn.fi-color:not(.fi-color-primary):not(.fi-color-success):not(.fi-outlined):hover,
html.dark .fi-header-actions-ctn .fi-btn:not(.fi-color):hover {
    background: var(--gray-800);
}

html.dark .fi-header-actions-ctn .fi-btn.fi-color-danger:not(.fi-outlined) {
    color: var(--danger-400);
}

/* An icon-only primary (chatter) is not the page's main action: outline it too. */
.fi-header-actions-ctn .fi-btn.fi-color-primary[aria-label]:has(> .fi-btn-badge-ctn) {
    background: var(--color-white);
    box-shadow: 0 0 0 1px var(--kk-border);
}

.fi-header-actions-ctn .fi-btn.fi-color-primary[aria-label]:has(> .fi-btn-badge-ctn) > svg,
.fi-header-actions-ctn .fi-btn.fi-color-primary[aria-label]:has(> .fi-btn-badge-ctn) > .fi-icon {
    color: var(--gray-700);
}

html.dark .fi-header-actions-ctn .fi-btn.fi-color-primary[aria-label]:has(> .fi-btn-badge-ctn) {
    background: var(--gray-900);
    box-shadow: 0 0 0 1px var(--gray-700);
}

html.dark .fi-header-actions-ctn .fi-btn.fi-color-primary[aria-label]:has(> .fi-btn-badge-ctn) > svg,
html.dark .fi-header-actions-ctn .fi-btn.fi-color-primary[aria-label]:has(> .fi-btn-badge-ctn) > .fi-icon {
    color: var(--gray-300);
}

/* Underline tabs (page sub-navigation, list tabs, record tabs): left aligned, no box. */
.fi-page-sub-navigation-tabs,
.fi-page-content > .fi-sc > nav.fi-tabs:not(.kk-views),
.fi-page-content > .fi-sc > .fi-grid-col > .fi-sc-component nav.fi-tabs:not(.kk-views),
.kk-record-tabs nav.fi-tabs {
    justify-content: flex-start;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: 0;
    gap: 0.25rem;
    border-radius: 0;
    background: transparent;
    box-shadow: inset 0 -1px 0 var(--kk-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.fi-page-sub-navigation-tabs .fi-tabs-item,
.fi-page-content > .fi-sc > nav.fi-tabs:not(.kk-views) .fi-tabs-item,
.fi-page-content > .fi-sc > .fi-grid-col > .fi-sc-component nav.fi-tabs:not(.kk-views) .fi-tabs-item,
.kk-record-tabs nav.fi-tabs .fi-tabs-item {
    flex: none;
    min-height: 2.75rem;
    padding: 0.625rem 0.75rem 0.75rem;
    border-radius: 0;
    background: transparent !important;
    border-bottom: 2px solid transparent;
    box-shadow: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--kk-muted);
}

.fi-page-sub-navigation-tabs .fi-tabs-item.fi-active,
.fi-page-content > .fi-sc > nav.fi-tabs:not(.kk-views) .fi-tabs-item.fi-active,
.fi-page-content > .fi-sc > .fi-grid-col > .fi-sc-component nav.fi-tabs:not(.kk-views) .fi-tabs-item.fi-active,
.kk-record-tabs nav.fi-tabs .fi-tabs-item.fi-active {
    color: var(--gray-950);
    border-bottom: 2px solid var(--primary-600);
    box-shadow: none;
}

.fi-page-sub-navigation-tabs .fi-tabs-item .fi-tabs-item-label,
.fi-page-content > .fi-sc > nav.fi-tabs:not(.kk-views) .fi-tabs-item .fi-tabs-item-label,
.fi-page-content > .fi-sc > .fi-grid-col > .fi-sc-component nav.fi-tabs:not(.kk-views) .fi-tabs-item .fi-tabs-item-label,
.kk-record-tabs nav.fi-tabs .fi-tabs-item .fi-tabs-item-label {
    color: inherit;
}

.fi-page-sub-navigation-tabs .fi-tabs-item > svg,
.fi-page-content > .fi-sc > nav.fi-tabs:not(.kk-views) .fi-tabs-item > svg,
.fi-page-content > .fi-sc > .fi-grid-col > .fi-sc-component nav.fi-tabs:not(.kk-views) .fi-tabs-item > svg,
.kk-record-tabs nav.fi-tabs .fi-tabs-item > svg {
    display: none;
}

html.dark .fi-page-sub-navigation-tabs,
html.dark .fi-page-content > .fi-sc > nav.fi-tabs:not(.kk-views),
html.dark .fi-page-content > .fi-sc > .fi-grid-col > .fi-sc-component nav.fi-tabs:not(.kk-views),
html.dark .kk-record-tabs nav.fi-tabs {
    box-shadow: inset 0 -1px 0 var(--gray-700);
}

html.dark .fi-page-sub-navigation-tabs .fi-tabs-item,
html.dark .fi-page-content > .fi-sc > nav.fi-tabs:not(.kk-views) .fi-tabs-item,
html.dark .fi-page-content > .fi-sc > .fi-grid-col > .fi-sc-component nav.fi-tabs:not(.kk-views) .fi-tabs-item,
html.dark .kk-record-tabs nav.fi-tabs .fi-tabs-item {
    color: var(--gray-400);
}

html.dark .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active,
html.dark .fi-page-content > .fi-sc > nav.fi-tabs:not(.kk-views) .fi-tabs-item.fi-active,
html.dark .fi-page-content > .fi-sc > .fi-grid-col > .fi-sc-component nav.fi-tabs:not(.kk-views) .fi-tabs-item.fi-active,
html.dark .kk-record-tabs nav.fi-tabs .fi-tabs-item.fi-active {
    color: #e6e3dd;
    border-bottom: 2px solid var(--primary-400);
    box-shadow: none;
}

/* Count pills on tabs: soft neutral, primary tint on the active tab.
   Tab underlines are bottom borders: an inset shadow drew hairlines down the sides of the active tab. */
.fi-tabs-item .fi-badge {
    border-radius: 999px;
    box-shadow: none;
    background: var(--gray-100);
    color: var(--gray-700);
    font-weight: 700;
}

.fi-tabs-item.fi-active .fi-badge {
    background: var(--primary-100);
    color: var(--primary-700);
}

html.dark .fi-tabs-item .fi-badge {
    background: var(--gray-800);
    color: var(--gray-300);
}

html.dark .fi-tabs-item.fi-active .fi-badge {
    background: color-mix(in oklab, var(--primary-400) 18%, transparent);
    color: var(--primary-300);
}

/* Tables: 12px muted headers on a light band, 13.5px rows, numbers never wrap. */
.fi-ta-header-cell {
    padding-block: 0.625rem;
    background: #fafaf9;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--kk-muted);
}

.fi-ta-header-cell-sort-btn {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--kk-muted);
}

html.dark .fi-ta-header-cell {
    background: var(--gray-950);
}

html.dark .fi-ta-header-cell-sort-btn {
    color: var(--gray-400);
}

.fi-ta-text-item,
.fi-ta-text {
    font-size: 0.84375rem;
}

.fi-ta-cell.fi-align-end .fi-ta-text-item,
.fi-ta-cell.fi-align-right .fi-ta-text-item,
.fi-ta-summary-row .fi-ta-text-item {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.fi-ta-row .fi-ta-text,
.fi-ta-row .fi-ta-icon,
.fi-ta-row .fi-ta-image {
    padding-block: 0.625rem;
}

.fi-ta-row .fi-ta-text-has-descriptions {
    gap: 0.125rem;
}

.fi-ta-row .fi-ta-text-description,
.fi-ta-row .fi-ta-text-has-descriptions > .fi-ta-text-item:not(:first-child) {
    font-size: 0.75rem;
    color: var(--kk-muted);
}

html.dark .fi-ta-row .fi-ta-text-description {
    color: var(--gray-400);
}

.fi-ta-selection-cell {
    padding-block: 0.625rem;
}

/* Initials avatars are near-black; in soft dark they flip to a light chip. */
html.dark img.fi-avatar[src^="data:image/svg+xml"] {
    filter: invert(1) hue-rotate(180deg);
}

/* An unused filter count reads as noise. */
.fi-ta-filters-dropdown .fi-icon-btn-badge-ctn:has(.fi-badge:empty),
.fi-ta-filters-dropdown .fi-icon-btn-badge-ctn:not(:has(.fi-badge)),
.fi-icon-btn.kk-filters-idle > .fi-icon-btn-badge-ctn,
.fi-btn.kk-filters-idle > .fi-btn-badge-ctn {
    display: none;
}

/* Switches: the off track keeps a visible edge on white cards. */
.fi-toggle.fi-toggle-off:not(.fi-color) {
    background-color: var(--gray-300);
}

html.dark .fi-toggle.fi-toggle-off:not(.fi-color) {
    background-color: var(--gray-700);
}

.fi-toggle.fi-toggle-off:not(.fi-color):not(:focus-visible) {
    box-shadow: 0 0 0 1px var(--gray-400);
}

html.dark .fi-toggle.fi-toggle-off:not(.fi-color):not(:focus-visible) {
    box-shadow: 0 0 0 1px var(--gray-500);
}

/* Pagination footer: summary left, per page and pages right. */
.fi-pagination {
    padding-inline: 1rem;
    font-size: 0.8125rem;
}

.fi-pagination-overview {
    color: var(--kk-muted);
}

/* Sort arrows only on hover or on the sorted column. */
.fi-ta-header-cell:not(.fi-ta-header-cell-sorted) .fi-ta-header-cell-sort-btn > svg,
.fi-ta-header-cell:not(.fi-ta-header-cell-sorted) .fi-ta-header-cell-sort-btn > .fi-icon {
    opacity: 0;
    transition: opacity 0.12s ease-out;
}

.fi-ta-header-cell:hover .fi-ta-header-cell-sort-btn > svg,
.fi-ta-header-cell:hover .fi-ta-header-cell-sort-btn > .fi-icon,
.fi-ta-header-cell-sort-btn:focus-visible > svg {
    opacity: 1;
}

/* Status badges: filled pills, no ring, like the redesign. */
.fi-badge {
    border-radius: 999px;
    box-shadow: none;
    font-weight: 700;
}

.fi-badge.fi-color-gray,
.fi-badge:not(.fi-color) {
    background: var(--gray-100);
    color: var(--gray-700);
}

html.dark .fi-badge.fi-color-gray,
html.dark .fi-badge:not(.fi-color) {
    background: var(--gray-800);
    color: var(--gray-300);
}

/* Wave 2 follow-ups from the re-check. */
/* Dark mode: success actions in the header are the primary too. */
html.dark .fi-header-actions-ctn .fi-btn.fi-color-success:not(.fi-outlined) {
    background: var(--primary-600);
    color: #fff;
}

html.dark .fi-header-actions-ctn .fi-btn.fi-color-success:not(.fi-outlined):hover {
    background: var(--primary-500);
}

/* When the header already has a labelled primary, success actions are secondary. */
.fi-header-actions-ctn .fi-ac:has(.fi-btn.fi-color-primary:not([aria-label])) .fi-btn.fi-color-success:not(.fi-outlined) {
    background: var(--color-white);
    color: var(--gray-900);
    box-shadow: 0 0 0 1px var(--kk-border);
}

.fi-header-actions-ctn .fi-ac:has(.fi-btn.fi-color-primary:not([aria-label])) .fi-btn.fi-color-success:not(.fi-outlined) > svg {
    color: var(--gray-500);
}

html.dark .fi-header-actions-ctn .fi-ac:has(.fi-btn.fi-color-primary:not([aria-label])) .fi-btn.fi-color-success:not(.fi-outlined) {
    background: var(--gray-900);
    color: #e6e3dd;
    box-shadow: 0 0 0 1px var(--gray-700);
}

/* Two labelled primaries in one header: only the last stays solid. */
.fi-header-actions-ctn .fi-ac > .fi-btn.fi-color-primary:not([aria-label]):has(~ .fi-btn.fi-color-primary:not([aria-label])) {
    background: var(--color-white);
    color: var(--gray-900);
    box-shadow: 0 0 0 1px var(--kk-border);
}

.fi-header-actions-ctn .fi-ac > .fi-btn.fi-color-primary:not([aria-label]):has(~ .fi-btn.fi-color-primary:not([aria-label])) > svg {
    color: var(--gray-500);
}

html.dark .fi-header-actions-ctn .fi-ac > .fi-btn.fi-color-primary:not([aria-label]):has(~ .fi-btn.fi-color-primary:not([aria-label])) {
    background: var(--gray-900);
    color: #e6e3dd;
    box-shadow: 0 0 0 1px var(--gray-700);
}

/* Delete and other danger actions in the header: red text on the outline. */
.fi-header-actions-ctn .fi-ac .fi-btn.fi-color-danger {
    color: var(--danger-700) !important;
}

html.dark .fi-header-actions-ctn .fi-ac .fi-btn.fi-color-danger {
    color: var(--danger-400) !important;
}

/* Status pills in tables carry no icon. */
.fi-ta-cell .fi-badge > svg,
.fi-ta-cell .fi-badge > .fi-icon {
    display: none;
}

/* ------------------------------------------------------------------------------
 * Redesign components (Kantorku Redesign canvas, Design system board): 44px
 * controls with a 10px radius, inputs with one soft border, pill badges,
 * underlined tabs, quieter table headers, and rounder modals and menus.
 * Resources keep their own markup; only the look changes.
 * ------------------------------------------------------------------------------ */

:root:root {
    --kk-control-height: 2.75rem;
    --kk-control-height-dense: 2.5rem;
    --kk-control-radius: 0.625rem;
    --kk-input-border: var(--gray-300);
    --kk-row-border: var(--gray-100);
    --kk-muted: #6b6b70;
}

html.dark:root {
    --kk-input-border: #4a4743;
    --kk-row-border: var(--gray-800);
    --kk-muted: var(--gray-400);
}

/* Buttons and inputs: 44px, 10px radius; 40px inside tables (dense). */
.fi-btn:not(.fi-size-xs):not(.fi-size-sm),
.fi-input-wrp {
    min-height: var(--kk-control-height);
    border-radius: var(--kk-control-radius);
}

/* The 36px input sits in the middle of the taller field, level with its prefix icon. */
.fi-input-wrp > .fi-input-wrp-content-ctn {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fi-btn:not(.fi-size-xs):not(.fi-size-sm) {
    padding-inline: 1rem;
    font-weight: 600;
}

.fi-ta-ctn .fi-btn:not(.fi-size-xs):not(.fi-size-sm),
.fi-ta-ctn .fi-input-wrp {
    min-height: var(--kk-control-height-dense);
}

.fi-btn:not(.fi-outlined):not(.fi-color),
.fi-btn.fi-outlined {
    box-shadow: 0 0 0 1px var(--kk-border);
}

.fi-input-wrp {
    box-shadow: 0 0 0 1px var(--kk-input-border);
}

.fi-input-wrp:not(.fi-disabled):not(:has(.fi-ac-action:focus)):focus-within {
    box-shadow: 0 0 0 1px var(--primary-600), 0 0 0 4px var(--primary-200);
}

html.dark .fi-input-wrp:not(.fi-disabled):not(:has(.fi-ac-action:focus)):focus-within {
    box-shadow: 0 0 0 1px var(--primary-500), 0 0 0 4px color-mix(in oklab, var(--primary-500) 30%, transparent);
}

.fi-input-wrp.fi-invalid {
    box-shadow: 0 0 0 1px var(--danger-600);
}

.fi-input-wrp.fi-disabled {
    background-color: #fafaf9;
}

html.dark .fi-input-wrp.fi-disabled {
    background-color: var(--gray-800);
}

.fi-fo-field-label-content {
    font-size: 0.84375rem;
    font-weight: 600;
}

/* Badges: pills with a tinted fill, no ring. */
.fi-badge {
    border-radius: 999px;
    padding-inline: 0.625rem;
    font-weight: 700;
    box-shadow: none;
}

.fi-badge.fi-size-sm {
    padding-inline: 0.4375rem;
}

/* Tabs: underlined, the active one in dark text over a primary line. */
.fi-tabs:not(.fi-contained) {
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: inset 0 -1px 0 var(--kk-border);
}

html.dark .fi-tabs:not(.fi-contained) {
    background-color: transparent;
}

.fi-tabs.fi-contained {
    padding-block: 0;
}

.fi-tabs-item {
    border-radius: 0;
    padding: 0.625rem 0.75rem 0.75rem;
    border-bottom: 2px solid transparent;
    box-shadow: none;
}

.fi-tabs-item .fi-tabs-item-label {
    font-weight: 600;
    color: var(--kk-muted);
}

.fi-tabs-item.fi-active,
html.dark .fi-tabs-item.fi-active,
.fi-tabs-item:hover,
.fi-tabs-item:focus-visible,
html.dark .fi-tabs-item:hover,
html.dark .fi-tabs-item:focus-visible {
    background-color: transparent;
}

.fi-tabs-item.fi-active {
    border-bottom: 2px solid var(--primary-600);
    box-shadow: none;
}

html.dark .fi-tabs-item.fi-active {
    border-bottom: 2px solid var(--primary-400);
    box-shadow: none;
}

.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item:hover .fi-tabs-item-label {
    color: var(--gray-950);
}

html.dark .fi-tabs-item.fi-active .fi-tabs-item-label,
html.dark .fi-tabs-item:hover .fi-tabs-item-label {
    color: var(--color-white);
}

.fi-tabs-item.fi-active > .fi-icon {
    color: var(--primary-600);
}

/* Tables: small muted headers, hairline rows, a compact toolbar. */
.fi-ta-header-cell {
    padding-block: 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--kk-muted);
}

html.dark .fi-ta-header-cell {
    color: var(--kk-muted);
}

.fi-ta-ctn .fi-ta-header-toolbar {
    padding: 0.75rem 0.875rem;
    border-color: var(--kk-border-soft);
}

/* Phones: group, search and filters share one row; the search field takes the space left. */
@media (max-width: 639px) {
    .fi-ta-ctn .fi-ta-header-toolbar {
        gap: 0.5rem;
    }

    .fi-ta-ctn .fi-ta-header-toolbar > :nth-child(2) {
        flex: 1 1 10rem;
        min-width: 0;
        gap: 0.5rem;
    }

    .fi-ta-ctn .fi-ta-header-toolbar .fi-ta-search-field {
        flex: 1 1 auto;
        min-width: 0;
    }
}

.fi-ta-table > tbody > :not(:last-child),
html.dark .fi-ta-table > tbody > :not(:last-child) {
    border-color: var(--kk-row-border);
}

/* Section headings 16px bold; breadcrumbs muted. */
.fi-section-header-heading {
    font-weight: 700;
}

.fi-breadcrumbs {
    font-size: 0.8125rem;
}

/* Modals: 16px radius, 18px bold title, a lighter scrim. */
.fi-modal-window {
    border-radius: var(--kk-card-radius);
}

.fi-modal.fi-modal-slide-over .fi-modal-window,
.fi-modal.fi-width-screen .fi-modal-window {
    border-radius: 0;
}

.fi-modal-heading {
    font-size: 1.125rem;
    font-weight: 700;
}

/* Actions sit at the end, primary last: Cancel, then Confirm. */
.fi-modal .fi-modal-footer:is(.fi-align-start, .fi-align-left) .fi-modal-footer-actions {
    flex-direction: row-reverse;
}

.fi-modal > .fi-modal-close-overlay {
    background-color: color-mix(in oklab, var(--gray-950) 45%, transparent);
}

/* Menus: 12px radius, soft border and a deeper, diffuse shadow. */
.fi-dropdown-panel {
    border-radius: 0.75rem;
    box-shadow: 0 0 0 1px var(--kk-border), 0 14px 36px rgb(24 24 27 / 0.16);
}

html.dark .fi-dropdown-panel {
    box-shadow: 0 0 0 1px var(--kk-border), 0 14px 36px rgb(0 0 0 / 0.45);
}

.fi-dropdown-list-item {
    border-radius: 0.5rem;
}

/* Help, as on the Help board */
.kk-help {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.kk-help-section {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.kk-help-contact-main {
    display: flex;
    flex: 1 1 18rem;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
}

.kk-help-contact-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    font-size: 0.84375rem;
    line-height: 1.5;
}

.kk-help-contact-title {
    font-size: 1rem;
    font-weight: 700;
}

.kk-help-group {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kk-home-muted);
}

.kk-help-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.625rem;
    background: var(--kk-home-soft);
    color: var(--kk-home-primary);
}

html.dark .kk-help-icon {
    color: var(--kk-home-soft-text);
}

.kk-help-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--kk-home-text);
}

.kk-help-text {
    margin: 0;
    font-size: 0.84375rem;
    line-height: 1.55;
    color: var(--kk-home-text-2);
}

.kk-help-docs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--kk-home-border);
    border-radius: 0.875rem;
    background: var(--kk-home-card);
    box-shadow: inset 4px 0 0 var(--kk-home-primary);
    color: var(--kk-home-text);
    text-decoration: none;
    transition: border-color 120ms;
}

.kk-help-docs:hover {
    border-color: var(--gray-300);
}

html.dark .kk-help-docs:hover {
    border-color: var(--gray-600);
}

.kk-help-docs:focus-visible {
    outline: 2px solid var(--kk-focus);
    outline-offset: 2px;
}

.kk-help-docs-text {
    display: flex;
    flex: 1 1 16rem;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.kk-help-docs-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.kk-help-docs-heading .kk-help-title {
    font-size: 0.9375rem;
}

.kk-help-badge {
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--kk-home-row);
    color: var(--kk-home-icon);
    font-size: 0.71875rem;
    font-weight: 700;
}

.kk-help-docs-open {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.375rem;
    height: 2.5rem;
    padding: 0 0.875rem;
    border: 1px solid var(--kk-home-border);
    border-radius: 0.625rem;
    color: var(--kk-home-soft-text);
    font-size: 0.84375rem;
    font-weight: 600;
}

.kk-help-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.375rem 1.5rem;
    border-radius: 0.875rem;
    background: var(--kk-home-primary);
    color: var(--kk-home-on-primary);
}

.kk-help-contact-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: #fff;
    color: var(--kk-home-primary);
}

html.dark .kk-help-contact-icon {
    background: #fbfaf8;
}

/* Profile: one column of cards across the page width, like the other pages. */
.kk-profile {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    width: 100%;
}

.kk-profile .fi-section-footer {
    border-top: 0;
    padding-top: 0;
}

.kk-profile .fi-fo-file-upload.fi-fo-file-upload-avatar {
    width: 6rem;
}

/* Notifications drawer, as on the Notifications board: 460px panel, rows with a
   tinted icon tile, title then body then time, a primary bar on unread rows. */
.fi-no-database.fi-modal-slide-over .fi-modal-window {
    max-width: 28.75rem;
}

.fi-no-database .fi-modal-header {
    border-bottom: 1px solid var(--kk-border-soft);
}

.fi-no-database .fi-modal-heading {
    font-size: 1.125rem;
    font-weight: 700;
}

.fi-no-database .fi-modal-header .fi-badge {
    border-radius: 999px;
    font-weight: 700;
}

.fi-no-database .fi-no-notification {
    gap: 0.75rem;
    padding: 0.75rem 0.875rem 0.75rem 1.25rem;
    border-bottom: 1px solid var(--kk-border-soft);
}

.fi-no-database .fi-no-notification .fi-no-notification-icon {
    box-sizing: content-box;
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    padding: 0.5625rem;
    border-radius: 0.625rem;
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.fi-no-database .fi-no-notification-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fi-no-database .fi-no-notification-title {
    order: 1;
    font-size: 0.84375rem;
    font-weight: 700;
    line-height: 1.4;
}

.fi-no-database .fi-no-notification-body {
    order: 2;
    margin-top: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--gray-700);
}

html.dark .fi-no-database .fi-no-notification-body {
    color: #cbc8c1;
}

.fi-no-database .fi-no-notification-date {
    order: 3;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: #737378;
}

html.dark .fi-no-database .fi-no-notification-date {
    color: #8f8b83;
}

/* Saved and preset views on lists, as on the Projects and SavedViews boards: a
   bordered "Views" bar with pill buttons, the active one in the primary tint. */
.fi-tabs.kk-views:not(.fi-contained) {
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0;
    padding: 0.25rem 0.375rem;
    border: 1px solid var(--kk-border);
    border-radius: 0.75rem;
    background-color: var(--color-white);
    box-shadow: none;
}

html.dark .fi-tabs.kk-views:not(.fi-contained) {
    background-color: var(--gray-900);
}

/* The bar still scrolls sideways on phones, without a scrollbar drawn under the pills. */
.fi-tabs.kk-views {
    scrollbar-width: none;
}

.fi-tabs.kk-views::-webkit-scrollbar {
    display: none;
}

.kk-views-label {
    flex: none;
    padding: 0 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--kk-muted);
}

.kk-views .fi-tabs-item {
    min-height: 2.25rem;
    padding: 0 0.75rem;
    border-radius: 0.5625rem;
    border-bottom: 0;
    box-shadow: none;
    transition: background-color 120ms;
}

.kk-views .fi-tabs-item .fi-tabs-item-label {
    font-size: 0.8125rem;
}

.kk-views .fi-tabs-item > .fi-icon {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--gray-400);
}

.kk-views .fi-tabs-item:hover,
html.dark .kk-views .fi-tabs-item:hover {
    background-color: var(--gray-50);
}

html.dark .kk-views .fi-tabs-item:hover {
    background-color: var(--gray-800);
}

.kk-views .fi-tabs-item.fi-active,
html.dark .kk-views .fi-tabs-item.fi-active {
    background-color: var(--primary-50);
    border-bottom: 0;
    box-shadow: none;
}

html.dark .kk-views .fi-tabs-item.fi-active {
    background-color: color-mix(in srgb, var(--primary-600) 16%, var(--gray-900));
}

.kk-views .fi-tabs-item.fi-active .fi-tabs-item-label,
.kk-views .fi-tabs-item.fi-active > .fi-icon {
    color: var(--primary-700);
}

html.dark .kk-views .fi-tabs-item.fi-active .fi-tabs-item-label,
html.dark .kk-views .fi-tabs-item.fi-active > .fi-icon {
    color: color-mix(in srgb, var(--primary-300) 90%, var(--primary-700));
}

/* Filter chips under a page title (project stages and the like), as on the
   Projects board: 40px bordered chips with an inline count, the active one filled. */
.fi-header-subheading:has(> .kk-chips) {
    max-width: none;
    margin-top: 0.75rem;
}

.kk-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.kk-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 0.875rem;
    border: 1px solid var(--kk-border);
    border-radius: 0.625rem;
    background: var(--color-white);
    color: var(--gray-700);
    font-size: 0.84375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms, border-color 120ms;
}

.kk-chip:hover {
    background: var(--gray-50);
}

.kk-chip:focus-visible {
    outline: 2px solid var(--kk-focus);
    outline-offset: 2px;
}

.kk-chip-count {
    padding: 0.0625rem 0.4375rem;
    border-radius: 999px;
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 0.71875rem;
    font-weight: 700;
}

.kk-chip.kk-chip-active {
    border-color: var(--kk-primary-fill, var(--primary-600));
    background: var(--kk-primary-fill, var(--primary-600));
    color: #fff;
}

.kk-chip.kk-chip-active .kk-chip-count {
    background: rgb(255 255 255 / 0.22);
    color: #fff;
}

html.dark .kk-chip {
    background: var(--gray-900);
    color: #cbc8c1;
}

html.dark .kk-chip:hover {
    background: var(--gray-800);
}

html.dark .kk-chip-count {
    background: var(--gray-800);
    color: #b7b3ac;
}

html.dark .kk-chip.kk-chip-active {
    border-color: var(--kk-primary-fill);
    background: var(--kk-primary-fill);
    color: #fbfaf8;
}

@media (max-width: 767px) {
    .kk-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-inline: -1rem;
        padding-inline: 1rem;
        scrollbar-width: none;
    }

    .kk-chip {
        flex: none;
        height: 2.75rem;
    }

    /* The title block keeps the page width, so the chips scroll inside it and the header button stays on screen. */
    .fi-header:has(.kk-chips) > div:first-child {
        width: 100%;
        min-width: 0;
    }
}

/* Project cards: the stage picker is a small pill, as on the Projects board. */
/* Filament gives inline selects a 12rem minimum, which outweighs the max-width and squeezed card titles. */
.kk-stage-select {
    flex: none;
    width: auto;
    min-width: 0;
    max-width: 10rem;
}

.kk-stage-select .fi-input-wrp {
    min-height: 2rem;
    border: 0;
    border-radius: 999px;
    background-color: var(--gray-100);
    box-shadow: none;
}

.kk-stage-select .fi-select-input {
    padding-block: 0.25rem;
    padding-inline-start: 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-700);
}

html.dark .kk-stage-select .fi-input-wrp {
    background-color: var(--gray-700);
}

html.dark .kk-stage-select .fi-select-input {
    color: #cbc8c1;
}

/* Tasks: the stage reads like "State" on a phone, so phones show the status only. The task list also drops
   its row checkboxes there; bulk actions stay on desktop. */
@media (max-width: 767px) {
    .kk-hide-on-phone {
        display: none !important;
    }

    .kk-tasks-table .fi-ta-selection-cell,
    .kk-tasks-table .fi-ta-header-cell.fi-ta-selection-cell,
    .kk-tasks-table .fi-ta-header-toolbar .fi-ta-bulk-actions {
        display: none !important;
    }
}

/* Task status as a pill-shaped select (list) and dropdown button (task detail), coloured like its badge. */
.kk-state-select .fi-input-wrp {
    background-color: color-mix(in oklab, var(--kk-state, var(--gray-500)) 14%, transparent);
}

.kk-state-select .fi-select-input {
    color: var(--kk-state, var(--gray-700));
}

/* In a table the status pill keeps a fixed width: with an auto width the column shrank below the pill and
   the deadline next to it ran into it. */
.fi-ta-cell .kk-state-select {
    width: 10rem;
    max-width: none;
}

.kk-state-select--success { --kk-state: var(--success-700); }
.kk-state-select--warning { --kk-state: var(--warning-700); }
.kk-state-select--danger { --kk-state: var(--danger-700); }
.kk-state-select--info { --kk-state: var(--info-700); }
.kk-state-select--primary { --kk-state: var(--primary-700); }
.kk-state-select--gray { --kk-state: var(--gray-700); }

html.dark .kk-state-select--success { --kk-state: var(--success-400); }
html.dark .kk-state-select--warning { --kk-state: var(--warning-400); }
html.dark .kk-state-select--danger { --kk-state: var(--danger-400); }
html.dark .kk-state-select--info { --kk-state: var(--info-400); }
html.dark .kk-state-select--primary { --kk-state: var(--primary-400); }
html.dark .kk-state-select--gray { --kk-state: var(--gray-300); }

/* Project cards: the name is the first thing to read, above stage, description and facts. */
.kk-project-card-name .fi-ta-text-item.fi-ta-text-item {
    font-size: 1.125rem;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--gray-950);
}

.dark .kk-project-card-name .fi-ta-text-item.fi-ta-text-item {
    color: #fff;
}

.kk-project-card-facts {
    padding-top: 0.75rem;
    border-top: 1px solid var(--kk-border-soft);
}

.fi-header:has(.kk-chips) {
    align-items: flex-start;
}

/* Cards as on the canvas: the heading sits in the card with no rule under it,
   20px padding all round, actions at the bottom without a footer bar. */
.fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header {
    padding: 1.25rem 1.25rem 0;
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside).fi-collapsed > .fi-section-header {
    padding-bottom: 1.25rem;
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside).fi-section-has-header:not(.fi-collapsed) > .fi-section-content-ctn {
    border-top: 0;
}

.fi-section:not(.fi-section-not-contained):not(.fi-divided) > .fi-section-content-ctn > .fi-section-content {
    padding: 1.25rem;
}

.fi-section:not(.fi-section-not-contained).fi-section-has-header:not(.fi-divided) > .fi-section-content-ctn > .fi-section-content {
    padding-top: 1rem;
}

.fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn > .fi-section-footer {
    padding: 0 1.25rem 1.25rem;
    border-top: 0;
}

/* Record pages: the View / Edit / Sub-tasks links start at the left edge, as on
   the TaskView and ProjectView boards. */
.fi-page-sub-navigation-tabs.fi-tabs {
    margin-inline: 0;
    justify-content: flex-start;
}

/* A destructive action in a page header is an outlined red button; the solid
   red stays for the confirmation inside the modal. */
.fi-header .fi-btn.fi-color-danger:not(.fi-outlined) {
    border: 1px solid var(--danger-200);
    background-color: var(--color-white);
    color: var(--danger-700);
    box-shadow: none;
}

.fi-header .fi-btn.fi-color-danger:not(.fi-outlined):hover {
    background-color: var(--danger-50);
}

.fi-header .fi-btn.fi-color-danger:not(.fi-outlined) > .fi-icon {
    color: currentColor;
}

html.dark .fi-header .fi-btn.fi-color-danger:not(.fi-outlined) {
    border-color: color-mix(in srgb, var(--danger-500) 35%, var(--gray-900));
    background-color: var(--gray-900);
    color: #f28b82;
}

html.dark .fi-header .fi-btn.fi-color-danger:not(.fi-outlined):hover {
    background-color: #361d1c;
}

/* Record facts: small muted labels over the value, as on the TaskView board. */
.fi-in-entry-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--kk-muted);
}

html.dark .fi-in-entry-label {
    color: #a29e97;
}

/* Page descriptions: 13.5px muted text under the title, as on every list board. */
.fi-header-subheading {
    max-width: 60rem;
    font-size: 0.84375rem;
    line-height: 1.5;
    color: var(--kk-muted);
}

html.dark .fi-header-subheading {
    color: #a29e97;
}

/* Status tabs on lists start at the left over a full-width rule (Leads and
   Action Plans boards) instead of floating in the middle. */
.fi-page-content > .fi-tabs:not(.fi-contained):not(.kk-views),
.fi-resource-list-records-page .fi-tabs:not(.fi-contained):not(.kk-views):not(.fi-page-sub-navigation-tabs) {
    width: 100%;
    margin-inline: 0;
    justify-content: flex-start;
}

/* Inline selects in table rows are compact, as on the Leads and Action Plans boards. */
.fi-ta-cell .fi-ta-select .fi-input-wrp {
    min-height: 2.125rem;
    border-radius: 0.5rem;
}

.fi-ta-cell .fi-ta-select .fi-select-input {
    padding-block: 0.3125rem;
    font-size: 0.78125rem;
    font-weight: 600;
}

/* Accounting overview: one card per journal, as on the canvas. */
.kk-journals {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kk-record-tabs .kk-count,
.kk-journals .kk-count,
.kk-journal .kk-count {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.4375rem;
    border-radius: 999px;
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 0.6875rem;
    font-weight: 700;
}

html.dark .kk-record-tabs .kk-count,
html.dark .kk-journals .kk-count,
html.dark .kk-journal .kk-count {
    background: var(--gray-800);
    color: var(--gray-300);
}

.kk-journals-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    font-size: 0.84375rem;
    font-weight: 600;
    color: var(--gray-700);
    cursor: pointer;
}

html.dark .kk-journals-toggle {
    color: var(--gray-300);
}

.kk-journals-tabs.fi-tabs {
    width: 100%;
    margin-inline: 0;
    justify-content: flex-start;
}

.kk-journals-attention {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem 0.875rem;
    border-radius: 0.75rem;
    border: 1px solid var(--kk-border-soft);
    background: #fff7e6;
    font-size: 0.84375rem;
    line-height: 1.5;
    color: #3f3f46;
}

.kk-journals-attention-icon {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    color: #b45309;
}

html.dark .kk-journals-attention {
    background: #2b2214;
    color: var(--gray-200);
}

html.dark .kk-journals-attention-icon {
    color: #f5b45c;
}

.kk-journals-empty {
    padding: 2rem 1rem;
    border-radius: 0.875rem;
    border: 1px dashed var(--kk-border);
    text-align: center;
    font-size: 0.875rem;
    color: var(--kk-muted);
}

.kk-journals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 21.25rem), 1fr));
    gap: 1rem;
    align-items: start;
}

.kk-journal {
    display: flex;
    flex-direction: column;
    border-radius: 0.875rem;
    border: 1px solid var(--kk-border-soft);
    background: #fff;
}

.kk-journal-hidden {
    border-style: dashed;
    border-color: var(--kk-border);
}

html.dark .kk-journal {
    background: var(--gray-900);
}

.kk-journal-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1rem 0.75rem;
}

.kk-journal-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background: var(--primary-50);
    color: var(--primary-700);
}

.kk-journal-icon .fi-icon,
.kk-journal-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

html.dark .kk-journal-icon {
    background: color-mix(in oklab, var(--primary-500) 18%, transparent);
    color: var(--primary-300);
}

.kk-journal-title {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
}

.kk-journal-name {
    font-size: 0.96875rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--gray-950);
}

a.kk-journal-name:hover {
    text-decoration: underline;
}

html.dark .kk-journal-name {
    color: var(--gray-50);
}

.kk-journal-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--kk-muted);
}

.kk-journal-code {
    padding: 0.0625rem 0.375rem;
    border-radius: 0.375rem;
    background: var(--gray-100);
    color: var(--gray-700);
    font-weight: 700;
    letter-spacing: 0.04em;
}

html.dark .kk-journal-code {
    background: var(--gray-800);
    color: var(--gray-300);
}

.kk-journal-stats {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0 1rem;
}

.kk-journal-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.5rem;
    border-top: 1px solid var(--kk-border-soft);
}

.kk-journal-stat dt a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.84375rem;
    font-weight: 600;
    color: var(--primary-700);
}

.kk-journal-stat dt a:hover {
    text-decoration: underline;
}

.kk-journal-stat-count {
    min-width: 1.375rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 999px;
    background: var(--primary-50);
    color: var(--primary-700);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.kk-journal-stat dd {
    margin: 0;
    font-size: 0.84375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--gray-950);
}

.kk-journal-stat-zero dt a,
.kk-journal-stat-zero dd {
    color: var(--kk-muted);
}

.kk-journal-stat-zero .kk-journal-stat-count {
    background: var(--gray-100);
    color: var(--kk-muted);
}

.kk-journal-stat-warning dd,
.kk-journal-stat-warning .kk-journal-stat-count {
    color: #b91c1c;
}

.kk-journal-stat-warning .kk-journal-stat-count {
    background: #fef2f2;
}

html.dark .kk-journal-stat dt a {
    color: var(--primary-300);
}

html.dark .kk-journal-stat-count {
    background: color-mix(in oklab, var(--primary-500) 18%, transparent);
    color: var(--primary-200);
}

html.dark .kk-journal-stat dd {
    color: var(--gray-50);
}

html.dark .kk-journal-stat-zero dt a,
html.dark .kk-journal-stat-zero dd {
    color: var(--kk-muted);
}

html.dark .kk-journal-stat-zero .kk-journal-stat-count {
    background: var(--gray-800);
    color: var(--gray-400);
}

html.dark .kk-journal-stat-warning dd,
html.dark .kk-journal-stat-warning .kk-journal-stat-count {
    color: #f28b82;
}

html.dark .kk-journal-stat-warning .kk-journal-stat-count {
    background: #361d1c;
}

.kk-journal-chart {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem 1rem;
}

.kk-journal-chart-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--kk-muted);
}

.kk-journal-chart-head > span:first-child {
    font-weight: 600;
}

.kk-journal-bars,
.kk-journal-line {
    position: relative;
    height: 7.5rem;
    border-bottom: 1px solid var(--kk-border);
    background: repeating-linear-gradient(to top, transparent 0 39px, var(--kk-border-soft) 39px 40px);
}

.kk-journal-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.375rem;
    padding-top: 0.25rem;
}

.kk-journal-bar {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.kk-journal-bar > span {
    display: block;
    flex: none;
}

.kk-journal-bar > span:first-child,
.kk-journal-bar > span:first-child[style*="height: 0px"] + span {
    border-radius: 4px 4px 0 0;
}

.kk-journal-bar-late {
    background: #dc2626;
}

.kk-journal-bar-ok {
    background: #15803d;
}

.kk-journal-bar-labels {
    display: flex;
    gap: 0.375rem;
}

.kk-journal-bar-labels > span {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-size: 0.6875rem;
    color: var(--kk-muted);
}

.kk-journal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    font-size: 0.75rem;
    color: var(--gray-600);
}

.kk-journal-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

html.dark .kk-journal-legend {
    color: var(--gray-400);
}

.kk-journal-swatch {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 3px;
}

.kk-journal-line svg {
    width: 100%;
    height: 100%;
}

.kk-journal-line polyline {
    stroke: var(--primary-600);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.kk-journal-chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--kk-muted);
}

.kk-journal-plain {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.5rem;
    padding: 0 0.75rem;
    border-radius: 0.625rem;
    border: 1px dashed var(--kk-border);
    text-align: center;
    font-size: 0.8125rem;
    color: var(--kk-muted);
}

.kk-journal-head > .fi-btn {
    flex: none;
    white-space: nowrap;
}

/* Users list: avatar, name and email in one cell, as on the canvas. */
.kk-user-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.kk-user-cell-avatar {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    object-fit: cover;
}

.kk-user-cell-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kk-user-cell-name {
    font-weight: 600;
    color: var(--gray-950);
}

.kk-user-cell-email {
    font-size: 0.8125rem;
    color: var(--kk-muted);
    overflow: hidden;
    text-overflow: ellipsis;
}

html.dark .kk-user-cell-name {
    color: var(--gray-50);
}

/* Breadcrumbs read "Module / Page", as on the canvas. */
.fi-breadcrumbs-item-separator {
    display: none;
}

.fi-breadcrumbs-item + .fi-breadcrumbs-item::before {
    content: "/";
    color: var(--gray-400);
}

.fi-breadcrumbs-item-label {
    font-size: 0.8125rem;
    color: var(--kk-muted);
}

/* Settings menu beside the page: one bordered card, uppercase group labels, plain 40px rows. */
.fi-page-sub-navigation-sidebar-ctn {
    width: 14.5rem;
    flex: none;
}

.fi-page-sub-navigation-sidebar {
    row-gap: 0.875rem;
    padding: 0.75rem;
    border-radius: 0.875rem;
    background-color: #fff;
    box-shadow: 0 0 0 1px var(--kk-border);
}

html.dark .fi-page-sub-navigation-sidebar {
    background-color: var(--gray-900);
}

/* Master-detail: the list stays beside the page, scrolls on its own and keeps its card frame. */
@media (min-width: 64rem) {
    .fi-page-sub-navigation-sidebar-ctn {
        position: sticky;
        top: 5rem;
        align-self: flex-start;
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 0.875rem;
        background-color: #fff;
        box-shadow: inset 0 0 0 1px var(--kk-border);
    }

    html.dark .fi-page-sub-navigation-sidebar-ctn {
        background-color: var(--gray-900);
    }

    .fi-page-sub-navigation-sidebar-ctn > .fi-page-sub-navigation-sidebar {
        background-color: transparent;
        box-shadow: none;
    }
}

.fi-page-sub-navigation-sidebar .fi-sidebar-group-btn {
    min-height: 0;
    padding: 0 0.625rem 0.25rem;
    background-color: transparent;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-group-btn > .fi-icon {
    display: none;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-group-label,
.fi-page-sub-navigation-sidebar .fi-sidebar-group.fi-active > .fi-sidebar-group-btn .fi-sidebar-group-label {
    font-size: 0.71875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #737378;
}

html.dark .fi-page-sub-navigation-sidebar .fi-sidebar-group-label,
html.dark .fi-page-sub-navigation-sidebar .fi-sidebar-group.fi-active > .fi-sidebar-group-btn .fi-sidebar-group-label {
    color: var(--gray-500);
}

.fi-page-sub-navigation-sidebar .fi-sidebar-group-btn ~ .fi-sidebar-group-items {
    margin: 0;
    padding: 0;
    border: 0;
    row-gap: 0.125rem;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-group-btn ~ .fi-sidebar-group-items .fi-sidebar-item-btn {
    min-height: 2.5rem;
    padding: 0 0.625rem;
    border-radius: 0.5625rem;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-item-btn > .fi-icon {
    display: none;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-group-btn ~ .fi-sidebar-group-items .fi-sidebar-item-label {
    font-size: 0.84375rem;
    font-weight: 600;
    color: #3f3f46;
}

html.dark .fi-page-sub-navigation-sidebar .fi-sidebar-group-btn ~ .fi-sidebar-group-items .fi-sidebar-item-label {
    color: var(--gray-300);
}

.fi-page-sub-navigation-sidebar .fi-sidebar-group-btn ~ .fi-sidebar-group-items .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    font-weight: 700;
}

/* A settings form without its own sections sits in one card, Save at the bottom. */
.fi-page-has-sub-navigation .fi-page-content > .fi-sc > .fi-grid-col > .fi-sc-component > .fi-sc-form:not(:has(.fi-section)) {
    padding: 1.25rem;
    border-radius: 0.875rem;
    background-color: #fff;
    box-shadow: 0 0 0 1px var(--kk-border);
}

html.dark .fi-page-has-sub-navigation .fi-page-content > .fi-sc > .fi-grid-col > .fi-sc-component > .fi-sc-form:not(:has(.fi-section)) {
    background-color: var(--gray-900);
}

/* Record pages: header actions wrap beside the title, pages as underline tabs, status steps as pills. */
@media (min-width: 40rem) {
    .fi-header > div:first-child {
        flex: 1 0 18rem;
        min-width: 0;
    }

    .fi-header-actions-ctn {
        flex-shrink: 1;
        min-width: 0;
    }

    .fi-header-actions-ctn > .fi-ac {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

.kk-record-tabs.fi-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 0.25rem;
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: inset 0 -1px 0 var(--kk-border);
}

.kk-record-tabs .fi-tabs-item {
    flex: none;
    gap: 0.375rem;
    margin-bottom: 0;
    padding: 0.625rem 0.75rem 0.75rem;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--kk-muted);
}

.kk-record-tabs .fi-tabs-item:hover {
    background: transparent;
    color: #18181b;
}

.kk-record-tabs .fi-tabs-item-icon {
    display: none;
}

.kk-record-tabs .fi-tabs-item .fi-tabs-item-label {
    color: inherit;
}

.kk-record-tabs .fi-tabs-item.fi-active {
    border-bottom-color: var(--primary-600);
    background: transparent;
    color: #18181b;
}

html.dark .kk-record-tabs .fi-tabs-item {
    color: var(--gray-400);
}

html.dark .kk-record-tabs .fi-tabs-item:hover,
html.dark .kk-record-tabs .fi-tabs-item.fi-active {
    color: var(--gray-100);
}

html.dark .kk-record-tabs .fi-tabs-item.fi-active {
    border-bottom-color: var(--primary-400);
}

.state-container {
    gap: 0.5rem;
}

.state-container .state label.stage-button,
.state-container .state:first-child label.stage-button,
.state-container .state:last-child label.stage-button {
    min-height: 2.125rem;
    padding: 0 0.75rem;
    border: 1px solid var(--kk-border);
    border-radius: 999px;
    background-color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--kk-muted);
}

.state-container .state label.stage-button::after {
    content: none;
}

.state-container .state label.stage-button.kk-step-done {
    border-color: transparent;
    background-color: var(--primary-50);
    color: var(--primary-700);
}

.state-container .state input:checked + label.stage-button {
    border-color: var(--primary-600);
    background-color: var(--primary-600);
    color: #fff;
}

html.dark .state-container .state label.stage-button {
    background-color: var(--gray-900);
    color: var(--gray-400);
}

html.dark .state-container .state label.stage-button.kk-step-done {
    background-color: color-mix(in oklab, var(--primary-400) 14%, transparent);
    color: var(--primary-300);
}

html.dark .state-container .state input:checked + label.stage-button {
    border-color: var(--primary-500);
    background-color: var(--primary-500);
    color: #fff;
}

/* Amounts in line tables stay on one line. */
.fi-fo-table-repeater td:not(:first-child) .fi-in-entry-content,
.fi-fo-table-repeater td:not(:first-child) .fi-in-text-item.fi-numeric {
    white-space: nowrap;
}

/* Employee cards open with the photo or initials, name and job title, as on the canvas. */
.kk-employee-cell .kk-user-cell-avatar {
    width: 2.75rem;
    height: 2.75rem;
}

.kk-employee-cell .kk-user-cell-name {
    font-size: 0.9375rem;
    font-weight: 700;
}

/* Company picker beside the hidden-journals switch on the Accounting overview. */
.kk-journals-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
}

.kk-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.125rem;
    padding: 0.25rem;
    border-radius: 0.625rem;
    background-color: #f1f0ee;
}

.kk-segmented-item {
    min-height: 2.25rem;
    padding: 0 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.84375rem;
    font-weight: 600;
    color: #52525b;
    cursor: pointer;
}

.kk-segmented-item.kk-active {
    background-color: #fff;
    color: #18181b;
    box-shadow: 0 1px 2px rgb(24 24 27 / 0.08);
}

html.dark .kk-segmented {
    background-color: var(--gray-800);
}

html.dark .kk-segmented-item {
    color: var(--gray-400);
}

html.dark .kk-segmented-item.kk-active {
    background-color: var(--gray-900);
    color: var(--gray-100);
}

.kk-heading-with-badges > .fi-badge {
    flex: none;
}

.kk-heading-with-badges {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.625rem;
}

/* Toggle buttons without their own colours: the picked option is a primary fill with white text, not a pale grey. */
.fi-fo-toggle-buttons:not(.kk-segmented-toggle) .fi-fo-toggle-buttons-input:checked + label.fi-btn:not(.fi-outlined):not(.fi-color),
.fi-fo-toggle-buttons:not(.kk-segmented-toggle) .fi-fo-toggle-buttons-input:checked + label.fi-btn:not(.fi-outlined):not(.fi-color):hover {
    background-color: var(--primary-600);
    color: #fff;
}

.fi-fo-toggle-buttons:not(.kk-segmented-toggle) .fi-fo-toggle-buttons-input:checked + label.fi-btn:not(.fi-outlined):not(.fi-color):not(.fi-disabled):not([disabled]):hover {
    background-color: var(--primary-700);
}

html.dark .fi-fo-toggle-buttons:not(.kk-segmented-toggle) .fi-fo-toggle-buttons-input:checked + label.fi-btn:not(.fi-outlined):not(.fi-color),
html.dark .fi-fo-toggle-buttons:not(.kk-segmented-toggle) .fi-fo-toggle-buttons-input:checked + label.fi-btn:not(.fi-outlined):not(.fi-color):hover {
    background-color: #b8571c;
    color: #fbfaf8;
}

html.dark .fi-fo-toggle-buttons:not(.kk-segmented-toggle) .fi-fo-toggle-buttons-input:checked + label.fi-btn:not(.fi-outlined):not(.fi-color):not(.fi-disabled):not([disabled]):hover {
    background-color: var(--primary-600);
}

.fi-fo-toggle-buttons.kk-segmented-toggle {
    gap: 0.125rem;
    padding: 0.25rem;
    border-radius: 0.625rem;
    background-color: #f1f0ee;
    box-shadow: none;
}

.kk-segmented-toggle .fi-btn.fi-btn-group-btn {
    min-height: 2.25rem;
    border-radius: 0.5rem;
    background-color: transparent;
    box-shadow: none;
    color: #52525b;
}

.kk-segmented-toggle .fi-fo-toggle-buttons-input:checked + .fi-btn.fi-btn-group-btn {
    background-color: #fff;
    color: #18181b;
    box-shadow: 0 1px 2px rgb(24 24 27 / 0.08);
}

html.dark .fi-fo-toggle-buttons.kk-segmented-toggle {
    background-color: var(--gray-800);
}

html.dark .kk-segmented-toggle .fi-btn.fi-btn-group-btn {
    color: var(--gray-400);
}

html.dark .kk-segmented-toggle .fi-fo-toggle-buttons-input:checked + .fi-btn.fi-btn-group-btn {
    background-color: var(--gray-950);
    color: #fff;
}

.kk-permission-matrix {
    display: block;
    overflow-x: auto;
    margin-inline: -1.5rem;
    margin-block: -0.5rem -1.5rem;
}

.kk-permission-matrix > .fi-grid.fi-sc {
    display: block;
}

.kk-permission-matrix-head,
.kk-permission-matrix .fi-fieldset {
    min-width: 66rem;
}

.kk-permission-matrix-head {
    display: grid;
    grid-template-columns: 15rem 5.5rem repeat(11, 4.25rem);
    align-items: end;
    padding: 0.5rem 0;
    background-color: #fafaf9;
    border-top: 1px solid #ecebe8;
    font-size: 0.71875rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--kk-muted);
    text-align: center;
}

.kk-permission-matrix-head > span:first-child {
    padding-left: 0.875rem;
    text-align: left;
}

.kk-permission-matrix .fi-fieldset {
    position: relative;
    margin: 0;
    padding: 0 0 0 15rem;
    border: 0;
    border-top: 1px solid #f1f0ee;
    border-radius: 0;
}

.kk-permission-matrix .fi-fieldset > legend {
    position: absolute;
    top: 50%;
    left: 1.5rem;
    max-width: 13rem;
    padding: 0;
    transform: translateY(-50%);
    font-size: 0.8125rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kk-permission-matrix .fi-fieldset > .fi-grid.fi-sc {
    display: block;
}

.kk-permission-matrix .fi-fo-checkbox-list {
    display: flex;
    align-items: center;
}

.kk-permission-matrix .fi-fo-checkbox-list-actions {
    flex: none;
    width: 5.5rem;
    margin: 0;
    text-align: center;
}

.kk-permission-matrix .fi-fo-checkbox-list-actions .fi-link {
    font-size: 0.75rem;
}

.kk-permission-matrix .fi-fo-checkbox-list-options.fi-grid.sm\:fi-grid-cols {
    grid-template-columns: repeat(11, 4.25rem);
    gap: 0;
}

.kk-permission-matrix .fi-fo-checkbox-list-option-ctn {
    grid-row: 1;
}

.kk-permission-matrix .fi-fo-checkbox-list-option {
    justify-content: center;
    align-items: center;
    min-height: 2.5rem;
}

.kk-permission-matrix .fi-fo-checkbox-list-option-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.kk-permission-matrix .fi-fo-checkbox-list-option-ctn:has(input[value^="view_"]) {
    grid-column: 2;
}

.kk-permission-matrix .fi-fo-checkbox-list-option-ctn:has(input[value^="view_any_"]) {
    grid-column: 1;
}

.kk-permission-matrix .fi-fo-checkbox-list-option-ctn:has(input[value^="create_"]) {
    grid-column: 3;
}

.kk-permission-matrix .fi-fo-checkbox-list-option-ctn:has(input[value^="update_"]) {
    grid-column: 4;
}

.kk-permission-matrix .fi-fo-checkbox-list-option-ctn:has(input[value^="delete_"]) {
    grid-column: 5;
}

.kk-permission-matrix .fi-fo-checkbox-list-option-ctn:has(input[value^="delete_any_"]) {
    grid-column: 6;
}

.kk-permission-matrix .fi-fo-checkbox-list-option-ctn:has(input[value^="restore_"]) {
    grid-column: 7;
}

.kk-permission-matrix .fi-fo-checkbox-list-option-ctn:has(input[value^="restore_any_"]) {
    grid-column: 8;
}

.kk-permission-matrix .fi-fo-checkbox-list-option-ctn:has(input[value^="force_delete_"]) {
    grid-column: 9;
}

.kk-permission-matrix .fi-fo-checkbox-list-option-ctn:has(input[value^="force_delete_any_"]) {
    grid-column: 10;
}

.kk-permission-matrix .fi-fo-checkbox-list-option-ctn:has(input[value^="reorder_"]) {
    grid-column: 11;
}

html.dark .kk-permission-matrix-head {
    background-color: var(--gray-900);
    border-color: var(--gray-800);
    color: var(--gray-400);
}

html.dark .kk-permission-matrix .fi-fieldset {
    border-color: var(--gray-800);
}

@media (max-width: 39.99rem) {
    .kk-permission-matrix-head {
        grid-template-columns: 10rem 5.5rem repeat(11, 4.25rem);
    }

    .kk-permission-matrix-head,
    .kk-permission-matrix .fi-fieldset {
        min-width: 62rem;
    }

    .kk-permission-matrix .fi-fieldset {
        padding-left: 10rem;
    }

    .kk-permission-matrix .fi-fieldset > legend {
        max-width: 8.5rem;
    }
}

@media (max-width: 39.99rem) {
    .kk-coa-layout {
        flex-direction: column;
        align-items: stretch;
    }

    .kk-coa-layout > .kk-coa-tree {
        position: static;
        width: 100% !important;
    }

    .kk-coa-tree ul[role='tree'] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
        gap: 0.125rem 0.375rem;
    }
}

.kk-company-cell .kk-user-cell-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
}

/* Docs page editor: spaces column beside the form, as on the canvas. */
.kk-docs-editor-layout > .fi-grid.fi-sc {
    display: grid;
    grid-template-columns: 17.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.kk-docs-editor-main > .fi-grid.fi-sc {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.kk-docs-spaces {
    border: 1px solid var(--gray-200);
    border-radius: var(--kk-radius-lg, 0.875rem);
    background: var(--color-white, #fff);
    overflow: hidden;
}

html.dark .kk-docs-spaces {
    border-color: var(--gray-800);
    background: var(--gray-900);
}

.kk-docs-spaces-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.875rem 0.875rem 0.625rem;
}

.kk-docs-spaces-head > span {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.kk-docs-spaces-head b {
    font-size: 0.9375rem;
}

.kk-docs-spaces-head > span > span,
.kk-docs-space-text > span + span,
.kk-docs-spaces-legend dd {
    color: var(--gray-500);
    font-size: 0.75rem;
}

.kk-docs-spaces ul {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0 0.375rem 0.375rem;
}

.kk-docs-space {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 3.25rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.625rem;
}

a.kk-docs-space[href]:hover {
    background: var(--gray-50);
}

html.dark a.kk-docs-space[href]:hover {
    background: rgb(255 255 255 / 0.05);
}

.kk-docs-space-current,
a.kk-docs-space-current[href]:hover {
    background: var(--primary-50);
    box-shadow: inset 3px 0 0 var(--primary-600);
}

html.dark .kk-docs-space-current,
html.dark a.kk-docs-space-current[href]:hover {
    background: color-mix(in oklab, var(--primary-500) 15%, transparent);
    box-shadow: inset 3px 0 0 var(--primary-400);
}

.kk-docs-space > .fi-badge {
    flex: none;
}

.kk-docs-space-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.kk-docs-space-text > span:first-child {
    overflow: hidden;
    font-size: 0.84375rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kk-docs-spaces-legend {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem 0.875rem;
    border-top: 1px solid var(--gray-100);
}

html.dark .kk-docs-spaces-legend {
    border-top-color: var(--gray-800);
}

.kk-docs-spaces-legend div {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.kk-docs-spaces-legend dt .fi-badge {
    justify-content: center;
    min-width: 5.5rem;
}

@media (max-width: 1023px) {
    .kk-docs-editor-layout > .fi-grid.fi-sc {
        grid-template-columns: minmax(0, 1fr);
    }

    .kk-docs-spaces ul {
        flex-direction: row;
        overflow-x: auto;
    }

    .kk-docs-space {
        min-width: 14rem;
    }

    .kk-docs-spaces-legend {
        display: none;
    }
}

/* Record pages: the status steps start at the left edge, as on the canvas. */
.fi-in-entry .state-container {
    justify-content: flex-start;
}

/* Button groups (view switches such as Calendar / List, Month / Week) read as one segmented
   control: a soft track, borderless items, and the primary item as the raised selection. */
.fi-btn-group:not(.fi-fo-toggle-buttons) {
    gap: 0.125rem;
    padding: 0.1875rem;
    border-radius: var(--kk-control-radius);
    background-color: #f1f0ee;
    box-shadow: none;
}

.fi-btn-group:not(.fi-fo-toggle-buttons) > .fi-btn,
html .fi-btn-group:not(.fi-fo-toggle-buttons) > .fi-btn.fi-color:not(label) {
    min-height: 0;
    margin: 0;
    border-radius: 0.5rem;
    background-color: transparent;
    box-shadow: none;
    color: #52525b;
}

.fi-btn-group:not(.fi-fo-toggle-buttons) > .fi-btn:hover {
    color: #18181b;
}

html .fi-btn-group:not(.fi-fo-toggle-buttons) > .fi-btn.fi-color-primary:not(label),
html .fi-btn-group:not(.fi-fo-toggle-buttons) > .fi-btn.fi-color-primary:not(label):hover {
    background-color: #fff;
    color: #18181b;
    box-shadow: 0 1px 2px rgb(24 24 27 / 0.08);
}

html.dark .fi-btn-group:not(.fi-fo-toggle-buttons) {
    background-color: var(--gray-800);
}

html.dark .fi-btn-group:not(.fi-fo-toggle-buttons) > .fi-btn:not(.fi-color-primary),
html.dark .fi-btn-group:not(.fi-fo-toggle-buttons) > .fi-btn:not(.fi-color-primary):hover {
    background-color: transparent;
    box-shadow: none;
    color: var(--gray-400);
}

html.dark .fi-btn-group:not(.fi-fo-toggle-buttons) > .fi-btn.fi-color-primary:not(label),
html.dark .fi-btn-group:not(.fi-fo-toggle-buttons) > .fi-btn.fi-color-primary:not(label):hover {
    background-color: var(--gray-950);
    color: var(--gray-100);
}

.fi-btn-group:not(.fi-fo-toggle-buttons) > .fi-btn > .fi-icon {
    color: inherit;
}

/* Create and edit forms with side-by-side columns (General | Settings): on desktop the
   columns stretch to the taller one and the last card of each column fills the rest,
   so both cards end on the same line. */
@media (min-width: 64rem) {
    form .fi-grid.lg\:fi-grid-cols > .fi-grid-col:has(> .fi-sc-component > div > .fi-grid > .fi-grid-col > .fi-sc-component > .fi-sc-section) {
        display: flex;
        flex-direction: column;
    }

    form .fi-grid.lg\:fi-grid-cols > .fi-grid-col > .fi-sc-component:has(> div > .fi-grid > .fi-grid-col > .fi-sc-component > .fi-sc-section),
    form .fi-grid.lg\:fi-grid-cols > .fi-grid-col > .fi-sc-component > div:has(> .fi-grid > .fi-grid-col > .fi-sc-component > .fi-sc-section) {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

    form .fi-grid.lg\:fi-grid-cols > .fi-grid-col > .fi-sc-component > div:not(.kk-bill-top) > .fi-grid:has(> .fi-grid-col > .fi-sc-component > .fi-sc-section) {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

    form .fi-grid.lg\:fi-grid-cols > .fi-grid-col > .fi-sc-component > div > .fi-grid > .fi-grid-col:not(.fi-hidden):not(:has(~ .fi-grid-col:not(.fi-hidden))):has(> .fi-sc-component > .fi-sc-section) {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

    form .fi-grid.lg\:fi-grid-cols > .fi-grid-col > .fi-sc-component > div > .fi-grid > .fi-grid-col:not(.fi-hidden):not(:has(~ .fi-grid-col:not(.fi-hidden))) > .fi-sc-component,
    form .fi-grid.lg\:fi-grid-cols > .fi-grid-col > .fi-sc-component > div > .fi-grid > .fi-grid-col:not(.fi-hidden):not(:has(~ .fi-grid-col:not(.fi-hidden))) > .fi-sc-component > .fi-sc-section {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

    form .fi-grid.lg\:fi-grid-cols > .fi-grid-col > .fi-sc-component > div > .fi-grid > .fi-grid-col:not(.fi-hidden):not(:has(~ .fi-grid-col:not(.fi-hidden))) > .fi-sc-component > .fi-sc-section > .fi-section {
        flex: 1 1 auto;
    }
}

/* A status stepper with no steps yet (a task before its project is picked) takes no room,
   unless it has a validation message to show. */
.fi-grid-col:has(> .fi-sc-component > .fi-fo-field .state-container):not(:has(> .fi-sc-component > .fi-fo-field .state-container .state)):not(:has(.fi-fo-field-wrp-error-message)) {
    display: none;
}

/* Long rich text on a page (docs and the like): the formatting toolbar stays under the top bar
   and the Blocks panel stays beside the text while scrolling, scrolling on its own when taller
   than the screen. Editors inside modals keep their normal layout. */
@media (min-width: 64rem) {
    .fi-fo-rich-editor:not(.fi-modal .fi-fo-rich-editor) .fi-fo-rich-editor-toolbar {
        position: sticky;
        top: var(--topbar-height, 4rem);
        z-index: 5;
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
        background-color: var(--color-white, #fff);
    }

    html.dark .fi-fo-rich-editor:not(.fi-modal .fi-fo-rich-editor) .fi-fo-rich-editor-toolbar {
        background-color: var(--gray-900);
    }

    .fi-fo-rich-editor:not(.fi-modal .fi-fo-rich-editor) .fi-fo-rich-editor-panels > .fi-fo-rich-editor-panel {
        position: sticky;
        top: calc(var(--topbar-height, 4rem) + 3.25rem);
        max-height: calc(100dvh - var(--topbar-height, 4rem) - 4.25rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* Phones: every text field is 16px so iOS does not zoom in on focus; compact table selects
   keep their tight padding. */
@media (max-width: 767px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
    select,
    textarea,
    .fi-input,
    .fi-select-input,
    .fi-ta-cell .fi-ta-select .fi-select-input,
    .kk-stage-select .fi-select-input,
    .fi-fo-date-time-picker .fi-fo-date-time-picker-display-text-input,
    .fi-fo-date-time-picker .fi-fo-date-time-picker-year-input,
    .fi-fo-date-time-picker .fi-fo-date-time-picker-time-inputs input,
    .ProseMirror {
        font-size: 16px;
    }

    .fi-ta-cell .fi-ta-select .fi-select-input,
    .kk-stage-select .fi-select-input {
        padding-block: 0.125rem;
    }

    /* Table filters open as a sheet over the page, above the tab bar, scrolling on their own. */
    html .fi-ta-filters-dropdown > .fi-dropdown-panel.fi-dropdown-panel {
        position: fixed !important;
        inset: auto 0.75rem calc(4.75rem + env(safe-area-inset-bottom)) 0.75rem !important;
        z-index: 30;
        width: auto !important;
        min-width: calc(100vw - 1.5rem);
        max-height: min(80dvh, calc(100dvh - 6rem - env(safe-area-inset-bottom)));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Long create and edit forms: Save and Cancel stay in reach above the tab bar, one full-width button per row. */
    .fi-page-content .fi-sc-form:not(.fi-modal .fi-sc-form) > .fi-sc:last-child:has(> .fi-grid-col:only-child > .fi-sc-component:only-child > .fi-sc-actions) {
        position: sticky;
        bottom: calc(4rem + env(safe-area-inset-bottom));
        z-index: 15;
        margin-inline: -1rem;
        padding: 0.625rem 1rem;
        background: color-mix(in oklab, var(--gray-50) 94%, transparent);
        backdrop-filter: blur(12px);
        box-shadow: 0 -1px 0 var(--gray-200);
    }

    html.dark .fi-page-content .fi-sc-form:not(.fi-modal .fi-sc-form) > .fi-sc:last-child:has(> .fi-grid-col:only-child > .fi-sc-component:only-child > .fi-sc-actions) {
        background: color-mix(in oklab, var(--gray-950) 94%, transparent);
        box-shadow: 0 -1px 0 var(--gray-800);
    }

    .fi-page-content .fi-sc-form:not(.fi-modal .fi-sc-form) > .fi-sc:last-child > .fi-grid-col:only-child > .fi-sc-component:only-child > .fi-sc-actions > .fi-ac {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .fi-page-content .fi-sc-form:not(.fi-modal .fi-sc-form) > .fi-sc:last-child > .fi-grid-col:only-child > .fi-sc-component:only-child > .fi-sc-actions > .fi-ac > .fi-btn {
        width: 100%;
    }
}

/* Touch screens: 44px targets for small controls; desktop keeps the compact sizes. */
@media (pointer: coarse) {
    .fi-topbar .fi-user-menu-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    .fi-theme-switcher-btn,
    .kk-qn-cancel {
        align-items: center;
        min-height: 2.75rem;
    }

    .fi-fo-rich-editor .fi-fo-rich-editor-tool {
        min-width: 2.5rem;
        height: 2.75rem;
    }

    .fi-sidebar-group-btn ~ .fi-sidebar-group-items .fi-sidebar-item-btn {
        min-height: 2.75rem;
    }

    /* Row checkboxes keep their 16px box; a transparent border makes the tappable square 44px. */
    .fi-ta-selection-cell .fi-checkbox-input {
        box-sizing: border-box;
        width: 2.75rem;
        height: 2.75rem;
        margin: -0.875rem;
        border: 0.875rem solid transparent;
        background-clip: padding-box;
        --tw-ring-inset: inset;
        --tw-shadow: 0 0 #0000;
    }
}

/* Phones: row link actions that have an icon show only the icon in a 44px target; the label
   stays for screen readers. Keeps lists such as the editorial plan from scrolling sideways. */
@media (max-width: 767px) {
    .fi-ta-actions .fi-ac-link-action:has(> .fi-icon) {
        justify-content: center;
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    .fi-ta-actions .fi-ac-link-action:has(> .fi-icon) > .fi-link-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* Contact cards: logos and photos sit in a fixed tile and keep their proportions. */
.fi-ta-image img.kk-partner-avatar {
    object-fit: contain;
    border-radius: 0.75rem;
    border: 1px solid var(--gray-200);
    background: #fff;
}

html.dark .fi-ta-image img.kk-partner-avatar {
    border-color: var(--gray-700);
}

/* Employee cards: header (photo, name, role, account mark), one aligned list of facts, quiet tag pills. */
.kk-employee-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
}

.kk-employee-card .kk-employee-cell {
    align-items: center;
    width: 100%;
}

.kk-employee-card .kk-user-cell-text {
    flex: 1 1 auto;
}

.kk-employee-card-account {
    display: inline-flex;
    flex: none;
    align-self: flex-start;
    color: var(--primary-600);
}

.kk-employee-card-account .fi-icon {
    width: 1.125rem;
    height: 1.125rem;
}

.kk-employee-card-facts {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--kk-border-soft);
}

.kk-employee-card-fact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: var(--kk-muted);
}

.kk-employee-card-fact .fi-icon {
    flex: none;
    width: 1rem;
    height: 1rem;
    color: var(--gray-400);
}

.kk-employee-card-fact > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kk-employee-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.kk-employee-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--kk-border-soft);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-700);
}

.kk-employee-card-tag i {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
}

html.dark .kk-employee-card-tag {
    color: var(--gray-200);
}

html.dark .kk-employee-card-account {
    color: var(--primary-400);
}

.fi-ta-record:has(.kk-employee-card) {
    align-items: flex-start;
}

.fi-ta-record:has(.kk-employee-card) .fi-ta-record-checkbox {
    margin-top: 0.75rem;
}

/* Phones: the top bar holds only the company switcher and the avatar. The bell moves into the
   avatar menu (Notifications, with the unread count); a dot on the avatar says something is unread. */
@media (max-width: 767px) {
    .fi-topbar .fi-topbar-database-notifications-btn {
        display: none;
    }

    .fi-topbar .fi-user-menu-trigger {
        position: relative;
    }

    .fi-topbar .fi-topbar-end:has(.fi-topbar-database-notifications-btn .fi-badge) .fi-user-menu-trigger::after {
        content: '';
        position: absolute;
        top: 0;
        inset-inline-end: 0;
        width: 0.625rem;
        height: 0.625rem;
        border-radius: 999px;
        background: var(--primary-600);
        box-shadow: 0 0 0 2px var(--color-white);
    }

    html.dark .fi-topbar .fi-topbar-end:has(.fi-topbar-database-notifications-btn .fi-badge) .fi-user-menu-trigger::after {
        box-shadow: 0 0 0 2px var(--gray-900);
    }
}

/* Customer and Date pickers beside the New button (Sales flow lists): labels above,
   inputs on the button's baseline. On phones they share one row under the title. */
.fi-header-actions-ctn:has(.kk-header-filters) {
    flex-wrap: wrap;
    align-items: flex-end;
}

.fi-header-actions-ctn .kk-header-filters {
    display: grid;
    grid-template-columns: minmax(11rem, 15rem) minmax(13rem, 16rem);
    gap: 0.75rem;
}

.fi-header-actions-ctn .kk-header-filters .fi-fo-field-label-content {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--kk-muted);
}

@media (max-width: 767px) {
    .fi-header-actions-ctn:has(.kk-header-filters) {
        width: 100%;
    }

    .fi-header-actions-ctn .kk-header-filters {
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
}

/* Table repeaters: the row actions (delete, reorder) get their own fixed column, so columns sized
   in percent can't squeeze the delete button out past the table edge. */
.fi-fo-table-repeater > table > thead > tr > th.fi-fo-table-repeater-empty-header-cell {
    width: 3.5rem;
    min-width: 3.5rem;
}

.fi-fo-table-repeater > table > tbody > tr > td:has(> .fi-fo-table-repeater-actions) {
    width: 3.5rem;
    padding-inline: 0.5rem;
    vertical-align: middle;
}

.fi-fo-table-repeater .fi-fo-table-repeater-actions {
    justify-content: center;
}

/* Document rail (create and edit pages of documents such as quotations): the header keeps the title,
   Cancel, Save, Print, Process and the document trail sit in a column on the right that follows the
   scroll on desktop and comes after the form on phones. */
.kk-document-rail-page .fi-header .fi-header-actions-ctn {
    display: none;
}

.kk-document-rail {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.kk-document-rail .fi-ac,
.kk-document-rail__actions .fi-ac {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}

.kk-document-rail .fi-ac > .fi-btn,
.kk-document-rail .fi-ac .fi-dropdown,
.kk-document-rail .fi-ac .fi-dropdown-trigger,
.kk-document-rail .fi-ac .fi-dropdown-trigger > .fi-btn {
    width: 100%;
}

.kk-document-rail .fi-ac .fi-btn {
    justify-content: center;
}

@media (min-width: 1024px) {
    .kk-document-rail {
        position: sticky;
        top: calc(var(--topbar-height, 4rem) + 1rem);
    }
}

/* Rail form actions: Cancel as a small red link on top, then Save with "create another" under the
   caret beside it, as on the document designs. */
.kk-document-rail .kk-document-rail__cancel .fi-ac {
    align-items: flex-start;
}

.kk-document-rail .kk-document-rail__cancel .fi-ac > .fi-link {
    font-size: 0.8125rem;
}

.kk-document-rail .kk-document-rail__split .fi-ac {
    flex-direction: row;
    gap: 1px;
}

.kk-document-rail .kk-document-rail__split .fi-ac > .fi-btn {
    flex: 1 1 auto;
    width: auto;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.kk-document-rail .kk-document-rail__split .fi-ac .fi-dropdown,
.kk-document-rail .kk-document-rail__split .fi-ac .fi-dropdown-trigger,
.kk-document-rail .kk-document-rail__split .fi-ac .fi-dropdown-trigger > .fi-btn {
    width: auto;
}

.kk-document-rail .kk-document-rail__split .fi-ac .fi-dropdown-trigger > .fi-btn {
    height: 100%;
    padding-inline: 0.625rem;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.kk-document-rail .kk-document-rail__split .fi-dropdown-panel .fi-btn,
.kk-document-rail .kk-document-rail__split .fi-dropdown-panel .fi-dropdown-list-item {
    width: 100%;
    justify-content: flex-start;
}

/* "Back to ..." in place of the breadcrumbs, above a page heading. */
.kk-header-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--kk-muted);
}

.kk-header-back:hover {
    color: var(--gray-950);
}

.kk-header-back .fi-icon {
    width: 1rem;
    height: 1rem;
}

html.dark .kk-header-back:hover {
    color: var(--color-white, #fff);
}

/* Vendor bill (Purchase Invoice design): card headings in capitals over a rule, with the
   "mandatory" hint on the right of the heading. */
.kk-bill-card > .fi-section:not(.fi-section-not-contained) > .fi-section-header {
    margin-inline: 1.25rem;
    padding: 1.25rem 0 1rem;
    border-bottom: 1px solid var(--kk-border-soft);
}

.kk-bill-card > .fi-section > .fi-section-header .fi-section-header-heading {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.kk-bill-card > .fi-section > .fi-section-header .fi-section-header-after-ctn .fi-sc-text {
    font-size: 0.75rem;
}

/* Invoice information and the applied purchase payment side by side, both cards as tall as the taller. */
.kk-bill-top > .fi-grid > .fi-grid-col > .fi-sc-component,
.kk-bill-top > .fi-grid > .fi-grid-col > .fi-sc-component > .kk-bill-card,
.kk-bill-top .kk-bill-card > .fi-section {
    height: 100%;
}

.kk-bill-items .fi-fo-table-repeater-add {
    display: none;
}

.kk-bill-lines > table > tbody {
    counter-reset: kk-bill-line;
}

.kk-bill-lines > table > tbody > tr {
    counter-increment: kk-bill-line;
}

.kk-bill-lines .kk-line-number::before {
    content: counter(kk-bill-line);
    font-variant-numeric: tabular-nums;
    color: var(--kk-muted);
}

.kk-bill-lines > table > thead > tr > th {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Applied purchase payment: the down payment bill in a tinted tile, the amounts under it and a
   note with the link to the down payment. */
.kk-applied-dp {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kk-applied-dp__item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.kk-applied-dp__tile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    background: var(--info-50, #eff6ff);
}

.kk-applied-dp__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: var(--color-white, #fff);
    color: var(--info-600, #2563eb);
}

.kk-applied-dp__icon .fi-icon {
    width: 1.375rem;
    height: 1.375rem;
}

.kk-applied-dp__doc {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    gap: 0.125rem;
}

.kk-applied-dp__doc strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    color: var(--gray-950);
}

.kk-applied-dp__tile > .fi-badge {
    flex: none;
}

.kk-applied-dp__doc span {
    font-size: 0.75rem;
    color: var(--kk-muted);
}

.kk-applied-dp__rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
}

.kk-applied-dp__rows > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8125rem;
}

.kk-applied-dp__rows dt {
    color: var(--kk-muted);
}

.kk-applied-dp__rows dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    color: var(--gray-950);
}

.kk-applied-dp__note {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: var(--gray-50);
    font-size: 0.75rem;
    color: var(--gray-700);
}

.kk-applied-dp__note p {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin: 0;
}

.kk-applied-dp__note .fi-icon {
    flex: none;
    width: 1rem;
    height: 1rem;
    color: var(--info-600, #2563eb);
}

.kk-applied-dp__link {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.375rem;
    font-weight: 600;
    color: var(--info-600, #2563eb);
}

.kk-applied-dp__link:hover {
    text-decoration: underline;
}

html.dark .kk-applied-dp__tile {
    background: color-mix(in oklab, var(--info-500, #3b82f6) 15%, transparent);
}

html.dark .kk-applied-dp__icon {
    background: var(--gray-900);
    color: var(--info-400, #60a5fa);
}

html.dark .kk-applied-dp__doc strong,
html.dark .kk-applied-dp__rows dd {
    color: var(--color-white, #fff);
}

html.dark .kk-applied-dp__note {
    background: var(--gray-800);
    color: var(--gray-300);
}

html.dark .kk-applied-dp__note .fi-icon,
html.dark .kk-applied-dp__link {
    color: var(--info-400, #60a5fa);
}

/* Quotation totals under the lines, as on the Create Quotation design. */
.kk-quote-summary {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 30rem;
    margin-left: auto;
    padding: 1rem 1.25rem;
    border: 1px solid var(--kk-border-soft);
    border-radius: 0.75rem;
}

.kk-quote-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-800);
    font-variant-numeric: tabular-nums;
}

.kk-quote-summary__row--muted {
    font-weight: 500;
    color: var(--kk-muted);
}

.kk-quote-summary__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.5rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--kk-border-soft);
    border-radius: 0.625rem;
    background: var(--gray-50);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--gray-700);
}

.kk-quote-summary__total strong {
    font-size: 1.375rem;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--gray-950);
    font-variant-numeric: tabular-nums;
}

html.dark .kk-quote-summary__row {
    color: var(--gray-100);
}

html.dark .kk-quote-summary__total {
    background: var(--gray-800);
    color: var(--gray-300);
}

html.dark .kk-quote-summary__total strong {
    color: #fff;
}

/* Sales Down Payment: base subtotal box, summary card with the total, remaining order balance. */
.kk-dp-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--gray-700);
}

.kk-dp-base {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--kk-border-soft);
    border-radius: 0.75rem;
    background: var(--gray-50);
}

.kk-dp-source {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--kk-border-soft);
    border-radius: 0.5rem;
    background: var(--color-white, #fff);
    font-size: 0.75rem;
    color: var(--gray-700);
}

.kk-dp-source .fi-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.kk-dp-base__value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    font-variant-numeric: tabular-nums;
}

.kk-dp-base__value strong {
    font-size: 1.125rem;
}

.kk-dp-base__value span {
    font-size: 0.75rem;
    color: var(--kk-muted);
}

.kk-dp-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kk-dp-summary {
    max-width: none;
    background: var(--gray-50);
}

.kk-dp-note {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    text-align: center;
    color: var(--kk-muted);
}

.kk-dp-remaining {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    background: var(--primary-50);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--gray-800);
    font-variant-numeric: tabular-nums;
}

.kk-dp-remaining strong {
    margin-left: auto;
    font-size: 1rem;
}

.kk-dp-remaining em {
    font-style: normal;
    font-weight: 500;
    color: var(--kk-muted);
}

html.dark .kk-dp-base,
html.dark .kk-dp-summary {
    background: var(--gray-800);
}

html.dark .kk-dp-source {
    background: var(--gray-900);
    color: var(--gray-200);
}

html.dark .kk-dp-label,
html.dark .kk-dp-remaining {
    color: var(--gray-100);
}

html.dark .kk-dp-remaining {
    background: color-mix(in oklab, var(--primary-500) 14%, transparent);
}

/* Sales Receipt: settlement status under the allocation grid, summary card and the amount in words. */
.kk-receipt-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    background: var(--gray-50);
    font-size: 0.875rem;
    color: var(--gray-800);
}

.kk-receipt-status strong {
    font-variant-numeric: tabular-nums;
}

.kk-receipt-status__badge {
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    background: var(--gray-700);
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
}

.kk-receipt-status__badge--done {
    background: var(--success-600);
}

.kk-receipt-summary {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.kk-receipt-summary__card {
    max-width: none;
}

.kk-receipt-words {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    font-size: 0.8125rem;
    color: var(--kk-muted);
}

.kk-receipt-words em {
    flex: 1 1 18rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--kk-border-soft);
    border-radius: 0.5rem;
    font-style: normal;
    text-align: right;
    color: var(--gray-800);
}

html.dark .kk-receipt-status {
    background: var(--gray-800);
    color: var(--gray-100);
}

html.dark .kk-receipt-words em {
    color: var(--gray-100);
}

/* Phones: the one compact column of a list (phone_task, phone_lead, ...) takes all the width the
   table has, and the row actions keep to their buttons on the right, so cards don't leave a blank
   strip beside the text. */
@media (max-width: 767px) {
    .fi-ta-table > thead > tr > th[class*="fi-ta-header-cell-phone-"],
    .fi-ta-table > tbody > tr > td[class*="fi-ta-cell-phone-"] {
        width: 100%;
    }

    .fi-ta-table > tbody > tr > td[class*="fi-ta-cell-phone-"] .fi-ta-text {
        max-width: none;
    }

    .fi-ta-table:has(td[class*="fi-ta-cell-phone-"]) > tbody > tr > td:last-child:has(.fi-ta-actions),
    .fi-ta-table:has(td[class*="fi-ta-cell-phone-"]) > thead > tr > th.fi-ta-actions-header-cell {
        width: 1%;
        white-space: nowrap;
    }

    .fi-ta-table:has(td[class*="fi-ta-cell-phone-"]) .fi-ta-actions {
        justify-content: flex-end;
    }

    /* The compact column already holds what the other columns say; custom-field columns (which
       have no phone setting of their own) would otherwise add empty strips. */
    .fi-ta-table:has(td[class*="fi-ta-cell-phone-"]) > thead > tr > th.fi-ta-header-cell:not([class*="fi-ta-header-cell-phone-"]),
    .fi-ta-table:has(td[class*="fi-ta-cell-phone-"]) > tbody > tr > td.fi-ta-cell:not(.fi-ta-selection-cell):not([class*="fi-ta-cell-phone-"]):not(:has(> .fi-ta-actions)) {
        display: none;
    }
}