/*
 * Kizen Ops UI Design System: NocoDB direction.
 *
 * This file is the canonical feature stylesheet. It is mirrored to
 * public/css/kizen-ui-design-system.css by tools/sync-kizen-ui-assets.ps1.
 * The selectors are scoped to one server-resolved root marker so SAP and NocoDB
 * cannot activate mixed tokens on the same page.
 */

/* Manrope variable font assets: @fontsource-variable/manrope 5.3.0 (SIL OFL 1.1). */

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-display: swap;
    font-weight: 400 700;
    src: url("/fonts/kizen/manrope-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-display: swap;
    font-weight: 400 700;
    src: url("/fonts/kizen/manrope-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html[data-kizen-ui-theme="nocodb"] {
    --kizen-ui-bg: #f7f8fa;
    --kizen-ui-surface: #ffffff;
    --kizen-ui-surface-muted: #f5f6f8;
    --kizen-ui-border: #d8e0e8;
    --kizen-ui-border-strong: #b9c7d5;
    --kizen-ui-text: #25313c;
    --kizen-ui-text-muted: #536271;
    --kizen-ui-primary: #1d4ed8;
    --kizen-ui-primary-soft: #eaf1ff;
    --kizen-ui-success: #067647;
    --kizen-ui-warning: #8a5a00;
    --kizen-ui-danger: #b42318;
    --kizen-ui-radius: 0.16rem;
    --kizen-ui-radius-sm: 0.1rem;
    --kizen-ui-radius-lg: 0.28rem;
    --kizen-ui-focus: #123b9c;
    --kizen-ui-focus-soft: #dbe7ff;
    --kizen-ui-shadow: 0 2px 9px rgba(30, 48, 64, 0.06);
}

html[data-kizen-ui-theme="nocodb"] {
    min-height: 100%;
    background: var(--kizen-ui-bg);
    color: var(--kizen-ui-text);
}

html[data-kizen-ui-theme="nocodb"] body {
    min-height: 100dvh;
    overflow-x: clip;
    background: var(--kizen-ui-bg);
    color: var(--kizen-ui-text);
}

html[data-kizen-ui-theme="nocodb"] .fi-main-ctn {
    background: var(--kizen-ui-bg);
}

html[data-kizen-ui-theme="nocodb"] .fi-topbar-ctn,
html[data-kizen-ui-theme="nocodb"] .fi-topbar,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-header,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-nav {
    background: var(--kizen-ui-surface) !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-topbar-ctn,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar {
    border-color: var(--kizen-ui-border) !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-topbar-ctn,
html[data-kizen-ui-theme="nocodb"] .fi-topbar {
    color: var(--kizen-ui-text) !important;
    box-shadow: 0 1px 2px rgba(30, 48, 64, 0.06) !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-topbar .fi-logo,
html[data-kizen-ui-theme="nocodb"] .fi-topbar .fi-logo *,
html[data-kizen-ui-theme="nocodb"] .fi-topbar .fi-icon-btn,
html[data-kizen-ui-theme="nocodb"] .fi-topbar .fi-user-menu-trigger,
html[data-kizen-ui-theme="nocodb"] .fi-topbar .fi-topbar-end a,
html[data-kizen-ui-theme="nocodb"] .fi-topbar .fi-topbar-end button {
    color: var(--kizen-ui-text) !important;
}

/* Filament 5 uses fi-sidebar-item-btn; the older fi-sidebar-item-button
   selector did not reach the actual navigation links. */
html[data-kizen-ui-theme="nocodb"] .fi-sidebar,
html[data-kizen-ui-theme="nocodb"] .fi-main-sidebar,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-nav {
    color: var(--kizen-ui-text) !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar-item-btn,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-item-button {
    min-height: 2.2rem;
    border-radius: var(--kizen-ui-radius) !important;
    background: transparent !important;
    color: var(--kizen-ui-text-muted) !important;
    transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar-item-btn:hover,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-item-button:hover,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-item.fi-sidebar-item-has-active-child-items > .fi-sidebar-item-btn {
    background: var(--kizen-ui-primary-soft) !important;
    color: var(--kizen-ui-primary) !important;
    box-shadow: inset 3px 0 0 var(--kizen-ui-primary);
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    background: var(--kizen-ui-primary-soft) !important;
    color: var(--kizen-ui-primary) !important;
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--kizen-ui-primary);
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar-item-label,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-item-icon,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-group-label,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-group-btn,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-group-collapse-btn {
    color: inherit !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar-group-btn {
    min-height: 2rem;
    border-radius: var(--kizen-ui-radius) !important;
    color: var(--kizen-ui-text-muted) !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar-group-label {
    color: var(--kizen-ui-text-muted) !important;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar-item-button {
    border-radius: var(--kizen-ui-radius);
    color: var(--kizen-ui-text-muted);
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar-item-button:hover,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-item-button.fi-active {
    background: var(--kizen-ui-primary-soft);
    color: var(--kizen-ui-primary);
}

/* Status/context chips stay compact and readable without white text on
   translucent red/green backgrounds. They are not decorative pills. */
html[data-kizen-ui-theme="nocodb"] a.sysbar-ai-topbar-status,
html[data-kizen-ui-theme="nocodb"] .sysbar-current-role {
    min-height: 1.85rem;
    border-radius: var(--kizen-ui-radius) !important;
    font-size: 0.72rem;
    line-height: 1.2;
}

html[data-kizen-ui-theme="nocodb"] .fi-topbar a.sysbar-ai-topbar-status--active,
html[data-kizen-ui-theme="nocodb"] .sysbar-current-role--ok {
    border-color: #9bd8ba !important;
    background: #e8f7ef !important;
    color: #075b3b !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-topbar a.sysbar-ai-topbar-status--inactive,
html[data-kizen-ui-theme="nocodb"] .sysbar-current-role--error {
    border-color: #e7b4ae !important;
    background: #fff0ef !important;
    color: #9f2f28 !important;
}

html[data-kizen-ui-theme="nocodb"] a.sysbar-ai-topbar-status__dot {
    color: inherit;
}

html[data-kizen-ui-theme="nocodb"] .sysbar-current-role__label {
    opacity: 1;
    font-weight: 650;
}

/* Shared module tabs: NocoDB uses a flat text tab with a clear active rule,
   not the legacy raised SAP tab. */
html[data-kizen-ui-theme="nocodb"] .sysbar-module-shell {
    border-color: var(--kizen-ui-border);
    border-radius: 0;
    background: var(--kizen-ui-bg);
    box-shadow: none;
}

html[data-kizen-ui-theme="nocodb"] .sysbar-module-shell__bar {
    min-height: 2.35rem;
    border-bottom-color: var(--kizen-ui-border);
    background: var(--kizen-ui-surface-muted);
}

html[data-kizen-ui-theme="nocodb"] .sysbar-module-tab {
    min-height: 2.1rem;
    margin: 0;
    padding: 0.15rem 0.2rem 0;
    border-color: transparent !important;
    border-radius: var(--kizen-ui-radius) var(--kizen-ui-radius) 0 0 !important;
    background: transparent !important;
    color: var(--kizen-ui-text-muted) !important;
    box-shadow: none !important;
}

html[data-kizen-ui-theme="nocodb"] .sysbar-module-tab:hover {
    background: #edf2f8 !important;
    color: var(--kizen-ui-text) !important;
}

html[data-kizen-ui-theme="nocodb"] .sysbar-module-tab.is-active {
    border-bottom-color: var(--kizen-ui-primary) !important;
    background: var(--kizen-ui-surface) !important;
    color: var(--kizen-ui-text) !important;
    box-shadow: inset 0 -2px 0 var(--kizen-ui-primary) !important;
}

html[data-kizen-ui-theme="nocodb"] .sysbar-module-tab__trigger {
    color: inherit !important;
}

html[data-kizen-ui-theme="nocodb"] .sysbar-module-tab__close {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: var(--kizen-ui-radius-sm) !important;
    background: transparent !important;
    color: var(--kizen-ui-text-muted) !important;
}

html[data-kizen-ui-theme="nocodb"] .sysbar-module-tab__close:hover {
    background: #e4ebf3 !important;
    color: var(--kizen-ui-text) !important;
}

html[data-kizen-ui-theme="nocodb"] .sysbar-module-shell__workspace {
    background: var(--kizen-ui-bg);
}

html[data-kizen-ui-theme="nocodb"] .fi-section,
html[data-kizen-ui-theme="nocodb"] .fi-ta,
html[data-kizen-ui-theme="nocodb"] .fi-card {
    border: 1px solid var(--kizen-ui-border);
    border-radius: var(--kizen-ui-radius);
    background: var(--kizen-ui-surface);
    box-shadow: var(--kizen-ui-shadow);
}

html[data-kizen-ui-theme="nocodb"] .fi-section-header,
html[data-kizen-ui-theme="nocodb"] .fi-ta-header,
html[data-kizen-ui-theme="nocodb"] .fi-ta-header-toolbar {
    border-color: var(--kizen-ui-border);
    background: var(--kizen-ui-surface-muted);
}

html[data-kizen-ui-theme="nocodb"] .fi-ta table thead,
html[data-kizen-ui-theme="nocodb"] .fi-ta table thead tr {
    background: #fbfcfd !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-ta table thead th {
    border-bottom: 1px solid var(--kizen-ui-border-strong);
    color: var(--kizen-ui-text-muted) !important;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

html[data-kizen-ui-theme="nocodb"] .fi-ta table tbody tr {
    border-bottom: 1px solid var(--kizen-ui-border);
}

html[data-kizen-ui-theme="nocodb"] .fi-ta table tbody tr:hover {
    background: #f5f9ff !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-input-wrp,
html[data-kizen-ui-theme="nocodb"] .fi-select-input,
html[data-kizen-ui-theme="nocodb"] .fi-input {
    border-color: var(--kizen-ui-border-strong) !important;
    border-radius: var(--kizen-ui-radius) !important;
    background: var(--kizen-ui-surface) !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-input:focus,
html[data-kizen-ui-theme="nocodb"] .fi-input-wrp:focus-within,
html[data-kizen-ui-theme="nocodb"] button:focus-visible,
html[data-kizen-ui-theme="nocodb"] a:focus-visible {
    outline: 2px solid var(--kizen-ui-primary) !important;
    outline-offset: 2px;
}

html[data-kizen-ui-theme="nocodb"] .fi-btn {
    border-radius: var(--kizen-ui-radius) !important;
    font-weight: 650;
    min-height: 2.35rem;
}

html[data-kizen-ui-theme="nocodb"] .sysbar-venta-edit-header-action {
    min-height: 2.75rem !important;
    padding: 0.625rem 0.875rem !important;
    gap: 0.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    white-space: nowrap;
}

html[data-kizen-ui-theme="nocodb"] .sysbar-venta-edit-header-action > .fi-icon {
    width: 1.05rem !important;
    height: 1.05rem !important;
    flex-shrink: 0;
}

html[data-kizen-ui-theme="nocodb"] .fi-btn.fi-color-primary {
    background: var(--kizen-ui-primary) !important;
    border-color: var(--kizen-ui-primary) !important;
    color: #ffffff !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-btn.fi-color-primary:hover,
html[data-kizen-ui-theme="nocodb"] .fi-btn.fi-color-primary:focus-visible {
    background: #1e40af !important;
    border-color: #1e40af !important;
    color: #ffffff !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-link.fi-color-primary,
html[data-kizen-ui-theme="nocodb"] .fi-ac-link-action.fi-color-primary {
    color: var(--kizen-ui-primary) !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-badge {
    border: 1px solid currentColor;
    border-radius: 999px;
    font-weight: 650;
}

html[data-kizen-ui-theme="nocodb"] .fi-modal-window,
html[data-kizen-ui-theme="nocodb"] .fi-dropdown-panel {
    border: 1px solid var(--kizen-ui-border-strong);
    border-radius: var(--kizen-ui-radius-lg);
    background: var(--kizen-ui-surface);
    box-shadow: 0 16px 35px rgba(30, 48, 64, 0.15);
}

html[data-kizen-ui-theme="nocodb"] .fi-tabs-item {
    border-radius: 0 !important;
    color: var(--kizen-ui-text-muted) !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-tabs-item.fi-active,
html[data-kizen-ui-theme="nocodb"] .fi-tabs-item[aria-selected="true"] {
    background: transparent !important;
    color: var(--kizen-ui-primary) !important;
    box-shadow: inset 0 -2px 0 var(--kizen-ui-primary);
}

/* POS is a custom Livewire surface and therefore does not inherit Filament's
   standard controls. Keep it in the same NocoDB token system. */
html[data-kizen-ui-theme="nocodb"] .kpos {
    --navy: var(--kizen-ui-text);
    --blue: var(--kizen-ui-primary);
    --blue2: #1e40af;
    --ice: var(--kizen-ui-surface-muted);
    --line: var(--kizen-ui-border);
    --ink: var(--kizen-ui-text);
    --muted: var(--kizen-ui-text-muted);
    --green: var(--kizen-ui-success);
    --red: var(--kizen-ui-danger);
    background: var(--kizen-ui-bg);
    color: var(--kizen-ui-text);
}

html[data-kizen-ui-theme="nocodb"] .kpos__topbar {
    background: var(--kizen-ui-surface) !important;
    border-bottom: 1px solid var(--kizen-ui-border) !important;
    color: var(--kizen-ui-text) !important;
    box-shadow: 0 1px 2px rgba(30, 48, 64, 0.06) !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__brand,
html[data-kizen-ui-theme="nocodb"] .kpos__brand b,
html[data-kizen-ui-theme="nocodb"] .kpos__identity > span:last-child,
html[data-kizen-ui-theme="nocodb"] .kpos__session > span {
    color: var(--kizen-ui-text) !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__brand-lockup {
    border-right-color: var(--kizen-ui-border);
}

html[data-kizen-ui-theme="nocodb"] .kpos__session button {
    border-color: var(--kizen-ui-border-strong) !important;
    border-radius: var(--kizen-ui-radius) !important;
    background: var(--kizen-ui-surface-muted) !important;
    color: var(--kizen-ui-text) !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__session button:hover {
    background: var(--kizen-ui-primary-soft) !important;
    color: var(--kizen-ui-primary) !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__session .kpos__close-session {
    border-color: #e7b4ae !important;
    background: #fff0ef !important;
    color: #9f2f28 !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__ticket,
html[data-kizen-ui-theme="nocodb"] .kpos__catalog {
    background: var(--kizen-ui-surface);
    border-color: var(--kizen-ui-border);
}

html[data-kizen-ui-theme="nocodb"] .kpos__customer,
html[data-kizen-ui-theme="nocodb"] .kpos__product,
html[data-kizen-ui-theme="nocodb"] .kpos__search,
html[data-kizen-ui-theme="nocodb"] .kpos__barcode,
html[data-kizen-ui-theme="nocodb"] .kpos__opening-form,
html[data-kizen-ui-theme="nocodb"] .kpos__payment-line,
html[data-kizen-ui-theme="nocodb"] .kpos__checkout-choice,
html[data-kizen-ui-theme="nocodb"] .kpos__stock-table-wrap {
    border-radius: var(--kizen-ui-radius) !important;
    border-color: var(--kizen-ui-border) !important;
    box-shadow: none !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__product {
    background: var(--kizen-ui-surface) !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__product:hover {
    transform: none;
    border-color: var(--kizen-ui-primary) !important;
    box-shadow: 0 0 0 1px var(--kizen-ui-primary-soft) !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__product-category,
html[data-kizen-ui-theme="nocodb"] .kpos__eyebrow,
html[data-kizen-ui-theme="nocodb"] .kpos__modal small {
    color: var(--kizen-ui-primary) !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__product-footer b {
    color: var(--kizen-ui-text) !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__product-footer small.is-low {
    background: #fff5d6 !important;
    color: #7a4d00 !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__product-footer small.is-empty {
    background: #fff0ef !important;
    color: #9f2f28 !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__catalog-actions button,
html[data-kizen-ui-theme="nocodb"] .kpos__categories button,
html[data-kizen-ui-theme="nocodb"] .kpos__payment-methods button,
html[data-kizen-ui-theme="nocodb"] .kpos__payment-heading button,
html[data-kizen-ui-theme="nocodb"] .kpos__inline-search button,
html[data-kizen-ui-theme="nocodb"] .kpos__credit-customer button,
html[data-kizen-ui-theme="nocodb"] .kpos__modal footer button,
html[data-kizen-ui-theme="nocodb"] .kpos__secondary,
html[data-kizen-ui-theme="nocodb"] .kpos__confirm,
html[data-kizen-ui-theme="nocodb"] .kpos__danger,
html[data-kizen-ui-theme="nocodb"] .kpos__pay {
    border-radius: var(--kizen-ui-radius) !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__catalog-actions button,
html[data-kizen-ui-theme="nocodb"] .kpos__categories button,
html[data-kizen-ui-theme="nocodb"] .kpos__payment-methods button,
html[data-kizen-ui-theme="nocodb"] .kpos__secondary,
html[data-kizen-ui-theme="nocodb"] .kpos__credit-customer button {
    border-color: var(--kizen-ui-border-strong) !important;
    color: var(--kizen-ui-text) !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__catalog-actions button:hover,
html[data-kizen-ui-theme="nocodb"] .kpos__categories button:hover,
html[data-kizen-ui-theme="nocodb"] .kpos__payment-methods button:hover,
html[data-kizen-ui-theme="nocodb"] .kpos__secondary:hover {
    border-color: var(--kizen-ui-primary) !important;
    background: var(--kizen-ui-primary-soft) !important;
    color: var(--kizen-ui-primary) !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__categories button.is-active,
html[data-kizen-ui-theme="nocodb"] .kpos__payment-methods button.is-active,
html[data-kizen-ui-theme="nocodb"] .kpos__category-list > button.is-active,
html[data-kizen-ui-theme="nocodb"] .kpos__modal-tabs button.is-active {
    border-color: var(--kizen-ui-primary) !important;
    background: var(--kizen-ui-primary-soft) !important;
    color: var(--kizen-ui-primary) !important;
    box-shadow: inset 0 0 0 1px var(--kizen-ui-primary);
}

html[data-kizen-ui-theme="nocodb"] .kpos__annulled-toggle.is-hiding {
    border-color: #9bd8ba !important;
    background: #e8f7ef !important;
    color: #075b3b !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__annulled-toggle.is-showing {
    border-color: #e7c77a !important;
    background: #fff5d6 !important;
    color: #7a4d00 !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__pay,
html[data-kizen-ui-theme="nocodb"] .kpos__confirm,
html[data-kizen-ui-theme="nocodb"] .kpos__inline-search button,
html[data-kizen-ui-theme="nocodb"] .kpos__danger {
    background: var(--kizen-ui-primary) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__danger {
    background: var(--kizen-ui-danger) !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__stock-detail-button {
    border-top-color: var(--kizen-ui-border) !important;
    background: #f5f8fc !important;
    color: var(--kizen-ui-primary) !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__stock-detail-button:hover {
    background: var(--kizen-ui-primary-soft) !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__modal {
    border: 1px solid var(--kizen-ui-border-strong);
    border-radius: var(--kizen-ui-radius-lg) !important;
    box-shadow: 0 16px 35px rgba(30, 48, 64, 0.15);
}

html[data-kizen-ui-theme="nocodb"] .kpos__modal header,
html[data-kizen-ui-theme="nocodb"] .kpos__modal footer,
html[data-kizen-ui-theme="nocodb"] .kpos__modal-tabs {
    background: var(--kizen-ui-surface-muted) !important;
    border-color: var(--kizen-ui-border) !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__modal-tabs button {
    border-radius: 0 !important;
    color: var(--kizen-ui-text-muted) !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__modal-tabs button.is-active {
    box-shadow: inset 0 -2px 0 var(--kizen-ui-primary);
}

html[data-kizen-ui-theme="nocodb"] .kpos__modal input:focus,
html[data-kizen-ui-theme="nocodb"] .kpos__modal select:focus,
html[data-kizen-ui-theme="nocodb"] .kpos__search:focus-within,
html[data-kizen-ui-theme="nocodb"] .kpos__barcode:focus-within {
    border-color: var(--kizen-ui-primary) !important;
    box-shadow: 0 0 0 2px var(--kizen-ui-primary-soft) !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos button:focus-visible,
html[data-kizen-ui-theme="nocodb"] .kpos input:focus-visible,
html[data-kizen-ui-theme="nocodb"] .kpos select:focus-visible,
html[data-kizen-ui-theme="nocodb"] .kpos textarea:focus-visible {
    outline: 2px solid var(--kizen-ui-primary) !important;
    outline-offset: 2px;
}

html[data-kizen-ui-theme="nocodb"] [aria-invalid="true"] .fi-input-wrp {
    border-color: var(--kizen-ui-danger) !important;
}

.kizen-global-settings__fallback {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-block: 0.85rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid #f0c36d;
    border-left: 4px solid var(--kizen-ui-warning, #9a6700);
    border-radius: var(--kizen-ui-radius, 0.45rem);
    background: #fff8e7;
    color: #624900;
    font-size: 0.85rem;
    line-height: 1.45;
}

.kizen-global-settings__fallback strong {
    flex: 0 0 auto;
}

.kizen-global-settings__asset-tools {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-block: 0.85rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--kizen-ui-border, #dbe5ed);
    border-left: 3px solid var(--kizen-ui-primary, #2f80ed);
    border-radius: var(--kizen-ui-radius, 0.45rem);
    background: var(--kizen-ui-surface, #ffffff);
    color: var(--kizen-ui-text, #24323f);
}

.kizen-global-settings__asset-tools h3 {
    margin: 0.15rem 0 0.3rem;
    font-size: 0.95rem;
}

.kizen-global-settings__asset-tools p {
    max-width: 58rem;
    margin: 0;
    color: var(--kizen-ui-text-muted, #687684);
    font-size: 0.78rem;
    line-height: 1.45;
}

.kizen-global-settings__asset-status {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.45rem;
    margin: 0.7rem 0 0;
}

.kizen-global-settings__asset-status div {
    min-width: 0;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--kizen-ui-border, #dbe5ed);
    border-radius: var(--kizen-ui-radius-sm, 0.2rem);
    background: var(--kizen-ui-surface-muted, #f5f6f8);
}

.kizen-global-settings__asset-status dt {
    color: var(--kizen-ui-text-muted, #687684);
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.kizen-global-settings__asset-status dd {
    overflow: hidden;
    margin: 0.12rem 0 0;
    color: var(--kizen-ui-text, #24323f);
    font-size: 0.72rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kizen-global-settings__asset-status dd.is-ok {
    color: var(--kizen-ui-success, #16855b);
}

.kizen-global-settings__asset-status dd.is-error {
    color: var(--kizen-ui-danger, #bd3f45);
}

.kizen-global-settings__asset-action {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

.kizen-global-settings__asset-action small {
    color: var(--kizen-ui-text-muted, #687684);
    font-size: 0.68rem;
}

@media (max-width: 800px) {
    .kizen-global-settings__asset-tools {
        flex-direction: column;
    }

    .kizen-global-settings__asset-status {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kizen-global-settings__asset-action {
        align-items: stretch;
        width: 100%;
    }
}

@media (max-width: 1023px) {
    html[data-kizen-ui-theme="nocodb"] .fi-main {
        padding-inline: 0.7rem;
    }
}

/*
 * NocoDB second pass: controls should read as compact workspace tools, not
 * as floating pills. Keep rounded treatment only for semantic badges and
 * status indicators; navigation, tabs, cards and actions use a restrained
 * 0-3px radius.
 */
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-item-btn,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-item-button,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-group-btn,
html[data-kizen-ui-theme="nocodb"] .sysbar-module-tab,
html[data-kizen-ui-theme="nocodb"] .fi-tabs-item {
    border-radius: 0 !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-btn,
html[data-kizen-ui-theme="nocodb"] .fi-input-wrp,
html[data-kizen-ui-theme="nocodb"] .fi-select-input,
html[data-kizen-ui-theme="nocodb"] .fi-input,
html[data-kizen-ui-theme="nocodb"] .fi-section,
html[data-kizen-ui-theme="nocodb"] .fi-ta,
html[data-kizen-ui-theme="nocodb"] .fi-card,
html[data-kizen-ui-theme="nocodb"] .fi-modal-window,
html[data-kizen-ui-theme="nocodb"] .fi-dropdown-panel,
html[data-kizen-ui-theme="nocodb"] .sysbar-current-role,
html[data-kizen-ui-theme="nocodb"] a.sysbar-ai-topbar-status,
html[data-kizen-ui-theme="nocodb"] .kpos__session button,
html[data-kizen-ui-theme="nocodb"] .kpos__customer,
html[data-kizen-ui-theme="nocodb"] .kpos__product,
html[data-kizen-ui-theme="nocodb"] .kpos__search,
html[data-kizen-ui-theme="nocodb"] .kpos__barcode,
html[data-kizen-ui-theme="nocodb"] .kpos__opening-form,
html[data-kizen-ui-theme="nocodb"] .kpos__payment-line,
html[data-kizen-ui-theme="nocodb"] .kpos__checkout-choice,
html[data-kizen-ui-theme="nocodb"] .kpos__stock-table-wrap,
html[data-kizen-ui-theme="nocodb"] .kpos__catalog-actions button,
html[data-kizen-ui-theme="nocodb"] .kpos__categories button,
html[data-kizen-ui-theme="nocodb"] .kpos__payment-methods button,
html[data-kizen-ui-theme="nocodb"] .kpos__payment-heading button,
html[data-kizen-ui-theme="nocodb"] .kpos__inline-search button,
html[data-kizen-ui-theme="nocodb"] .kpos__credit-customer button,
html[data-kizen-ui-theme="nocodb"] .kpos__modal footer button,
html[data-kizen-ui-theme="nocodb"] .kpos__secondary,
html[data-kizen-ui-theme="nocodb"] .kpos__confirm,
html[data-kizen-ui-theme="nocodb"] .kpos__danger,
html[data-kizen-ui-theme="nocodb"] .kpos__pay {
    border-radius: var(--kizen-ui-radius) !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__modal {
    border-radius: var(--kizen-ui-radius-lg) !important;
}

/* Use a high-contrast two-layer focus indicator: a dark blue outer ring and
   a white separation band remain visible on white, blue and muted surfaces. */
html[data-kizen-ui-theme="nocodb"] :where(
    button,
    a,
    input,
    select,
    textarea,
    [role="button"]
):focus-visible {
    outline: 3px solid var(--kizen-ui-focus) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px var(--kizen-ui-focus) !important;
}

html[data-kizen-ui-theme="nocodb"] :where(input, select, textarea):focus {
    border-color: var(--kizen-ui-focus) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px var(--kizen-ui-focus) !important;
}

/* Filament search fields render an input inside a bordered input wrapper. The
 * wrapper owns the focus treatment; leaving the input's own border and ring
 * active creates the visible double frame shown around table searches. */
html[data-kizen-ui-theme="nocodb"] .fi-input-wrp :where(input, select, textarea):focus {
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-input-wrp:focus-within,
html[data-kizen-ui-theme="nocodb"] .kpos__search:focus-within,
html[data-kizen-ui-theme="nocodb"] .kpos__barcode:focus-within {
    border-color: var(--kizen-ui-focus) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 2px var(--kizen-ui-focus) !important;
}

/* POS search and payment controls use the wrapper as their single focus
 * surface. The nested native input must not add a second outline or ring. */
html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .kpos__search input:focus-visible,
html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .kpos__barcode input:focus-visible,
html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .kpos__money-input input:focus-visible {
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
}

html[data-kizen-ui-theme="nocodb"] .sysbar-module-tab__trigger:focus-visible,
html[data-kizen-ui-theme="nocodb"] .sysbar-module-tab__close:focus-visible,
html[data-kizen-ui-theme="nocodb"] .kpos__modal-tabs button:focus-visible,
html[data-kizen-ui-theme="nocodb"] .kpos__stock-detail-button:focus-visible {
    outline: 3px solid var(--kizen-ui-focus) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px var(--kizen-ui-focus) !important;
}

/*
 * NocoDB density and navigation pass: remove Filament's decorative grouped
 * connector, which can turn charcoal on hover, and use compact workspace
 * spacing for the long ERP navigation and table surfaces.
 */
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-nav {
    padding: 1rem 0.75rem 0.75rem !important;
    row-gap: 0.85rem !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar-nav-groups {
    row-gap: 0.45rem !important;
    padding-top: 0.5rem !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar-group,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-group-items {
    row-gap: 0.15rem !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar-group-items {
    padding-left: 0.5rem !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar-item-grouped-border {
    display: none !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar-item-btn,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-item-button {
    min-height: 1.9rem;
    padding: 0.35rem 0.5rem !important;
    font-size: 0.82rem;
    line-height: 1.25;
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar-group-btn {
    min-height: 1.75rem;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem;
    line-height: 1.2;
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar-group-label {
    line-height: 1.2 !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar-item-btn:hover,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-item-button:hover,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-item-btn:focus-visible,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-item-button:focus-visible,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    background: var(--kizen-ui-primary-soft) !important;
    color: var(--kizen-ui-primary) !important;
}

/* Keep submenu focus aligned with the NocoDB navigation state without the
   dark Filament hover/focus surface. The inner ring remains visible on both
   white and the active blue-tinted background. */
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-group-items .fi-sidebar-item-btn:focus-visible,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-group-items .fi-sidebar-item-button:focus-visible {
    background: var(--kizen-ui-primary-soft) !important;
    color: var(--kizen-ui-primary) !important;
    outline: 3px solid var(--kizen-ui-focus) !important;
    outline-offset: 1px !important;
    box-shadow:
        inset 3px 0 0 var(--kizen-ui-primary),
        0 0 0 2px #ffffff,
        0 0 0 5px var(--kizen-ui-focus) !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-main {
    padding-inline: 1rem !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-page-content {
    row-gap: 1rem !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-section,
html[data-kizen-ui-theme="nocodb"] .fi-ta,
html[data-kizen-ui-theme="nocodb"] .fi-card {
    box-shadow: none !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-section-header,
html[data-kizen-ui-theme="nocodb"] .fi-ta-header-toolbar {
    padding: 0.65rem 0.8rem !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-section-content {
    padding: 0.8rem !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-ta table th,
html[data-kizen-ui-theme="nocodb"] .fi-ta table td {
    padding-block: 0.35rem !important;
    padding-inline: 0.55rem !important;
}

html[data-kizen-ui-theme="nocodb"] .sysbar-module-shell__bar {
    min-height: 2rem;
    padding-inline: 0.4rem;
}

html[data-kizen-ui-theme="nocodb"] .sysbar-module-tab {
    min-height: 1.85rem;
    padding: 0.1rem 0.3rem 0;
    font-size: 0.76rem;
}

/* POS cards use compact spreadsheet-like cells rather than tall tiles. */
html[data-kizen-ui-theme="nocodb"] .kpos__topbar {
    gap: 0.75rem;
    padding-inline: 0.75rem !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__ticket-head {
    padding: 0.7rem 0.85rem 0.45rem !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__customer {
    gap: 0.5rem;
    margin: 0 0.85rem 0.6rem !important;
    padding: 0.5rem 0.65rem !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__lines {
    padding-inline: 0.85rem !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__totals {
    padding: 0.65rem 0.85rem 0.8rem !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__search-row {
    gap: 0.5rem;
    padding: 0.65rem 0.75rem 0.45rem !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__products,
html[data-kizen-ui-theme="nocodb"] .kpos__catalog-skeleton {
    gap: 0.5rem;
    padding: 0 0.75rem 0.75rem !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__product-select {
    padding: 0.5rem !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__product-select strong {
    margin: 0.35rem 0 0.15rem;
    line-height: 1.2;
}

html[data-kizen-ui-theme="nocodb"] .kpos__product-footer {
    gap: 0.35rem;
    padding-top: 0.35rem !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__product-footer small {
    padding: 0.15rem 0.25rem !important;
    border-radius: var(--kizen-ui-radius-sm) !important;
    line-height: 1.2;
}

html[data-kizen-ui-theme="nocodb"] .kpos__stock-detail-button {
    padding: 0.4rem 0.5rem !important;
    font-size: 0.8rem;
    line-height: 1.2;
}

html[data-kizen-ui-theme="nocodb"] .kpos__catalog-skeleton span,
html[data-kizen-ui-theme="nocodb"] .kpos__catalog-skeleton i {
    border-radius: var(--kizen-ui-radius) !important;
}

/* The POS catalog uses a spreadsheet-like density in NocoDB mode. Keep its
 * loading state compact as well; the legacy 150px tiles looked like broken
 * cards and pushed the catalog below the viewport while searching. */
html[data-kizen-ui-theme="nocodb"] .kpos__catalog-skeleton {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(4.75rem, auto) !important;
    align-content: start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__catalog-skeleton > span {
    min-height: 0 !important;
    height: 4.75rem !important;
    display: grid !important;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr) minmax(0, 0.8fr) !important;
    align-items: center !important;
    gap: 0.55rem !important;
    padding: 0.55rem 0.65rem !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__catalog-skeleton > span > i,
html[data-kizen-ui-theme="nocodb"] .kpos__catalog-skeleton > span > i:nth-child(2),
html[data-kizen-ui-theme="nocodb"] .kpos__catalog-skeleton > span > i:nth-child(3) {
    width: auto !important;
    height: 0.62rem !important;
    min-width: 0 !important;
    margin: 0 !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__catalog-skeleton > span > i:nth-child(2) {
    height: 0.82rem !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__catalog-skeleton > span:empty::before,
html[data-kizen-ui-theme="nocodb"] .kpos__catalog-skeleton > span:empty::after {
    content: "";
    display: block;
    height: 0.62rem;
    border-radius: var(--kizen-ui-radius) !important;
    background: linear-gradient(90deg, #e8edf3 25%, #f8fafc 50%, #e8edf3 75%);
    background-size: 220% 100%;
    animation: kizen-ui-skeleton 1.1s infinite;
}

html[data-kizen-ui-theme="nocodb"] .kpos__catalog-skeleton > span:empty::after {
    grid-column: 2 / -1;
    height: 0.82rem;
}

@keyframes kizen-ui-skeleton {
    to {
        background-position: -220% 0;
    }
}

/* Literal markers are used for non-Filament creation links and Blade
 * controls; Filament actions use the server-side Heroicon plus. */
html[data-kizen-ui-theme="nocodb"] .kizen-create-action-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-inline-end: 0.35rem;
    color: currentColor;
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1;
}

/* Shared utility controls must follow the same compact language as the POS. */
html[data-kizen-ui-theme="nocodb"] .fi-icon-btn,
html[data-kizen-ui-theme="nocodb"] .fi-dropdown-list-item,
html[data-kizen-ui-theme="nocodb"] .sysbar-ai-chat__clear,
html[data-kizen-ui-theme="nocodb"] .sysbar-ai-chat__quick-action,
html[data-kizen-ui-theme="nocodb"] .sysbar-ai-chat__suggestions button,
html[data-kizen-ui-theme="nocodb"] .sysbar-ai-chat__form button,
html[data-kizen-ui-theme="nocodb"] .sysbar-ai-chat__form,
html[data-kizen-ui-theme="nocodb"] .sysbar-ai-chat__bubble,
html[data-kizen-ui-theme="nocodb"] .sysbar-ai-chat__typing {
    border-radius: var(--kizen-ui-radius) !important;
}

html[data-kizen-ui-theme="nocodb"] .sysbar-ai-chat {
    border-radius: var(--kizen-ui-radius) !important;
    box-shadow: none !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-badge {
    border-radius: var(--kizen-ui-radius-sm) !important;
}

/* Navigation counters (pending items) use a filled badge with white text so
   they stand out against the light sidebar and the active-item highlight. */
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-item-badge-ctn .fi-badge {
    border-color: var(--kizen-ui-primary) !important;
    background: var(--kizen-ui-primary) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar-item-badge-ctn .fi-badge .fi-badge-label {
    color: #ffffff !important;
}

/* The POS shortcut uses a standalone star, not a pill-shaped badge. Keep
   this exception after the shared navigation indicator rules above because
   the design-system stylesheet is loaded last. */
html[data-kizen-ui-theme="nocodb"] .sysbar-pos-navigation-item .fi-sidebar-item-badge-ctn,
html[data-kizen-ui-theme="nocodb"] .sysbar-pos-navigation-item .fi-sidebar-item-badge-ctn .fi-badge,
html[data-kizen-ui-theme="nocodb"] .sysbar-pos-navigation-item .fi-sidebar-item-badge-ctn .fi-badge-label-ctn,
html[data-kizen-ui-theme="nocodb"] .sysbar-pos-navigation-item .fi-sidebar-item-badge-ctn .fi-badge-label {
    border: 0 !important;
    border-color: transparent !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-kizen-ui-theme="nocodb"] .sysbar-pos-navigation-item .fi-sidebar-item-badge-ctn {
    padding: 0 !important;
}

/* Override the legacy global sidebar hover rule only for NocoDB. It used a
   charcoal surface and white text that made active/focused child links look
   like a different navigation state. */
html[data-kizen-ui-theme="nocodb"] .fi-sidebar .fi-sidebar-item:hover > .fi-sidebar-item-btn,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar .fi-sidebar-item:focus-within > .fi-sidebar-item-btn,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-btn,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-active-child-items > .fi-sidebar-item-btn,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar .fi-sidebar-item:hover > .fi-sidebar-item-button,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar .fi-sidebar-item:focus-within > .fi-sidebar-item-button,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-button,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-active-child-items > .fi-sidebar-item-button {
    background: var(--kizen-ui-primary-soft) !important;
    background-color: var(--kizen-ui-primary-soft) !important;
    color: var(--kizen-ui-primary) !important;
    box-shadow: inset 3px 0 0 var(--kizen-ui-primary) !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar .fi-sidebar-item:hover > .fi-sidebar-item-btn > .fi-sidebar-item-label,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar .fi-sidebar-item:focus-within > .fi-sidebar-item-btn > .fi-sidebar-item-label,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-active-child-items > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: inherit !important;
}

.ventas-estado-venta-cell .fi-ta-text,
.ventas-estado-venta-cell .fi-ta-text-item {
    min-width: 0;
    overflow: visible;
    white-space: nowrap;
}

.ventas-estado-venta-cell__content {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.ventas-estado-venta-badge {
    display: inline-flex;
    min-height: 1.5rem;
    align-items: center;
    padding: .16rem .48rem;
    border: 1px solid;
    border-radius: var(--kizen-ui-radius, .2rem);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.15;
}

.ventas-estado-venta-badge--neutral {
    border-color: #98a2b3;
    background: #f9fafb;
    color: #475467;
}

.ventas-estado-venta-badge--warning {
    border-color: #f59e0b;
    background: #fffbeb;
    color: #b45309;
}

.ventas-estado-venta-badge--info {
    border-color: #60a5fa;
    background: #eff6ff;
    color: #1d4ed8;
}

.ventas-estado-venta-badge--success {
    border-color: #4ade80;
    background: #f0fdf4;
    color: #15803d;
}

.ventas-estado-venta-badge--danger {
    border-color: #f87171;
    background: #fef2f2;
    color: #b91c1c;
}

.ventas-sunat-indicator {
    display: inline-flex;
    width: 1.4rem;
    height: 1.4rem;
    flex: 0 0 1.4rem;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    border-radius: 50%;
    background: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    cursor: help;
}

.ventas-sunat-indicator--neutral {
    border-color: #98a2b3;
    background: #f9fafb;
    color: #667085;
}

.ventas-sunat-indicator--pending {
    border-color: #f59e0b;
    background: #fffbeb;
    color: #b45309;
}

.ventas-sunat-indicator--success {
    border-color: #4ade80;
    background: #f0fdf4;
    color: #15803d;
}

.ventas-sunat-indicator--danger {
    border-color: #f87171;
    background: #fef2f2;
    color: #b91c1c;
}

.ventas-sunat-indicator:focus-visible {
    outline: 2px solid var(--kizen-ui-focus);
    outline-offset: 2px;
}

/* Re-apply the keyboard ring after the broad hover/active override above. */
html[data-kizen-ui-theme="nocodb"] .fi-sidebar .fi-sidebar-group-items .fi-sidebar-item-btn:focus-visible,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar .fi-sidebar-group-items .fi-sidebar-item-button:focus-visible {
    background: var(--kizen-ui-primary-soft) !important;
    background-color: var(--kizen-ui-primary-soft) !important;
    color: var(--kizen-ui-primary) !important;
    outline: 3px solid var(--kizen-ui-focus) !important;
    outline-offset: 1px !important;
    box-shadow:
        inset 3px 0 0 var(--kizen-ui-primary),
        0 0 0 2px #ffffff,
        0 0 0 5px var(--kizen-ui-focus) !important;
}

/*
 * NocoDB global normalization.
 *
 * Some ERP screens are custom Blade/Livewire surfaces and carry Tailwind
 * utilities or legacy SAP class names instead of Filament component classes.
 * This final layer gives every authenticated admin surface the same compact
 * workspace language while allowing semantic color swatches to remain round.
 */
html[data-kizen-ui-theme="nocodb"] body,
html[data-kizen-ui-theme="nocodb"] button,
html[data-kizen-ui-theme="nocodb"] input,
html[data-kizen-ui-theme="nocodb"] select,
html[data-kizen-ui-theme="nocodb"] textarea {
    font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

html[data-kizen-ui-theme="nocodb"] :where(
    [class~="rounded"],
    [class*="rounded-"],
    [style*="border-radius"]
):not(.fi-fo-color-picker-preview):not([data-nocodb-preserve-radius]) {
    border-radius: var(--kizen-ui-radius) !important;
}

html[data-kizen-ui-theme="nocodb"] :where(
    .fi-icon-btn,
    .fi-dropdown-list-item,
    .fi-pagination-item-btn,
    .fi-modal-close-btn,
    .fi-sidebar-group-collapse-btn,
    .fi-tabs-item,
    .fi-sc-tabs-tab,
    .fi-btn,
    [class*="__btn"],
    [class*="__button"]
) {
    border-radius: var(--kizen-ui-radius) !important;
    font-family: inherit !important;
}

html[data-kizen-ui-theme="nocodb"] :where(
    .fi-pagination-item-btn,
    .fi-dropdown-list-item,
    .fi-modal-close-btn,
    .fi-sidebar-group-collapse-btn
) {
    border-color: var(--kizen-ui-border) !important;
    color: var(--kizen-ui-text) !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-pagination-item-btn:hover,
html[data-kizen-ui-theme="nocodb"] .fi-pagination-item-btn[aria-current="page"],
html[data-kizen-ui-theme="nocodb"] .fi-pagination-item-btn[aria-current="true"] {
    border-color: var(--kizen-ui-primary) !important;
    background: var(--kizen-ui-primary-soft) !important;
    color: var(--kizen-ui-primary) !important;
}

html[data-kizen-ui-theme="nocodb"] :where(
    .fi-input-wrp,
    .fi-select-input,
    .fi-input,
    .fi-textarea,
    .choices__inner,
    .choices__list--dropdown,
    .fi-checkbox-list-option,
    .fi-radio,
    [class*="__input"],
    [class*="__search"]
) {
    border-color: var(--kizen-ui-border-strong) !important;
    border-radius: var(--kizen-ui-radius) !important;
    background: var(--kizen-ui-surface) !important;
    color: var(--kizen-ui-text) !important;
}

html[data-kizen-ui-theme="nocodb"] :where(
    .fi-input,
    .fi-select-input,
    .fi-textarea,
    .choices__input,
    [class*="__input"]
)::placeholder {
    color: var(--kizen-ui-text-muted) !important;
    opacity: 1;
}

/* Keep the select affordance visible after the theme's background reset.
 * Filament uses a native select or a button-backed custom select depending on
 * the field configuration; both controls expose the same down chevron. */
html[data-kizen-ui-theme="nocodb"] select.fi-select-input,
html[data-kizen-ui-theme="nocodb"] .fi-select-input .fi-select-input-btn {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
    background-position: right 0.5rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.5em 1.5em !important;
}

html[data-kizen-ui-theme="nocodb"][dir="rtl"] select.fi-select-input,
html[data-kizen-ui-theme="nocodb"][dir="rtl"] .fi-select-input .fi-select-input-btn,
html[data-kizen-ui-theme="nocodb"] [dir="rtl"] select.fi-select-input,
html[data-kizen-ui-theme="nocodb"] [dir="rtl"] .fi-select-input .fi-select-input-btn {
    background-position: left 0.5rem center !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-ta,
html[data-kizen-ui-theme="nocodb"] .fi-ta-content-ctn {
    overflow-x: auto;
}

html[data-kizen-ui-theme="nocodb"] .fi-ta .fi-ta-text.grid,
html[data-kizen-ui-theme="nocodb"] .fi-ta .fi-ta-text {
    padding-block: 0 !important;
    row-gap: 0.1rem !important;
    padding-left: 1px;
}

html[data-kizen-ui-theme="nocodb"] .fi-ta .fi-ta-text-item,
html[data-kizen-ui-theme="nocodb"] .fi-ta table td,
html[data-kizen-ui-theme="nocodb"] .fi-ta table th {
    line-height: 1.25 !important;
}

html[data-kizen-ui-theme="nocodb"] :where(
    .sap-section,
    .sap-finance-panel,
    .sap-related-docs-panel,
    .sap-status-panel,
    .sap-status-tile,
    .sap-object-tabs,
    .schema-section-general,
    .movement-party-fieldset,
    .fi-fieldset,
    .role-map__table-card,
    .role-map__toolbar,
    .receipt-association-panel,
    .receipt-association-table-wrap,
    .credit-note-origin-picker__table-wrap,
    .movement-reference-modal__frame,
    .sysbar-workspace__assistant,
    .sysbar-product-modal__recovery,
    [class*="__surface"],
    [class*="__frame"],
    [class*="__table-card"]
) {
    border-color: var(--kizen-ui-border) !important;
    border-radius: var(--kizen-ui-radius) !important;
    box-shadow: none !important;
}

html[data-kizen-ui-theme="nocodb"] :where(
    .sap-section,
    .sap-finance-panel,
    .sap-related-docs-panel,
    .sap-status-panel,
    .sap-status-tile,
    .role-map__table-card,
    .receipt-association-panel,
    .receipt-association-table-wrap,
    .credit-note-origin-picker__table-wrap,
    .movement-reference-modal__frame,
    .sysbar-workspace__assistant,
    [class*="__surface"],
    [class*="__frame"],
    [class*="__table-card"]
) {
    background: var(--kizen-ui-surface) !important;
    color: var(--kizen-ui-text) !important;
}

html[data-kizen-ui-theme="nocodb"] :where(
    .sap-section__legend,
    .sap-section__content,
    .role-map__toolbar,
    .role-map__toolbar-button,
    .ps-tab,
    .ps-subtab,
    .receipt-association-filter-btn,
    .receipt-association-search-shell,
    .sales-processes-lab__toolbar,
    [class*="__toolbar"],
    [class*="__filter"]
) {
    border-radius: var(--kizen-ui-radius) !important;
}

html[data-kizen-ui-theme="nocodb"] :where(
    .sap-btn-primary,
    .ps-tab--active,
    .ps-subtab--active,
    .role-map__toolbar-button--primary,
    .receipt-association-filter-btn.is-active,
    .sales-processes-lab__clear-btn,
    .sales-processes-lab__pager-btn--active
) {
    border-color: var(--kizen-ui-primary) !important;
    background: var(--kizen-ui-primary) !important;
    color: #ffffff !important;
}

/* Receipt association actions and source progress fills use the same flat
 * primary blue as the NocoDB workspace. */
html[data-kizen-ui-theme="nocodb"] :where(
    .modalButtonSelect,
    .receipt-association-row-action--select,
    .sysbar-dispatch-sources__progress span
) {
    background: var(--kizen-ui-primary) !important;
    border-color: var(--kizen-ui-primary) !important;
    color: #ffffff !important;
}

html[data-kizen-ui-theme="nocodb"] .state-progress-bar .chevron-step.is-current .chevron-button,
html[data-kizen-ui-theme="nocodb"] .dispatch-state-bar .dispatch-state-bar__step.is-current > div,
html[data-kizen-ui-theme="nocodb"] .arqueo-state-bar .arqueo-state-bar__step.is-current,
html[data-kizen-ui-theme="nocodb"] .transfer-state-bar .transfer-state-bar__step.is-current .transfer-state-bar__number {
    background: var(--kizen-ui-primary) !important;
    border-color: var(--kizen-ui-primary) !important;
    color: #ffffff !important;
}

html[data-kizen-ui-theme="nocodb"] :where(
    .modalButtonSelect:hover,
    .receipt-association-row-action--select:hover,
    .sysbar-dispatch-sources__progress span:hover
) {
    background: #1e40af !important;
    border-color: #1e40af !important;
    color: #ffffff !important;
}

html[data-kizen-ui-theme="nocodb"] .state-progress-bar .chevron-step.is-current .chevron-button:hover {
    background: #1e40af !important;
    border-color: #1e40af !important;
    color: #ffffff !important;
}

html[data-kizen-ui-theme="nocodb"] :where(
    .sap-btn-secondary,
    .role-map__toolbar-button,
    .receipt-association-filter-btn,
    .sales-processes-lab__pager-btn
) {
    border-color: var(--kizen-ui-border-strong) !important;
    background: var(--kizen-ui-surface) !important;
    color: var(--kizen-ui-text) !important;
}

html[data-kizen-ui-theme="nocodb"] :where(
    .sap-btn-primary,
    .sap-btn-secondary,
    .role-map__toolbar-button,
    .ps-tab,
    .ps-subtab,
    .receipt-association-filter-btn,
    .sales-processes-lab__clear-btn,
    .sales-processes-lab__pager-btn
):hover {
    border-color: var(--kizen-ui-primary) !important;
    background: var(--kizen-ui-primary-soft) !important;
    color: var(--kizen-ui-primary) !important;
}

html[data-kizen-ui-theme="nocodb"] :where(
    .sap-table,
    .role-map__table,
    .receipt-association-table,
    .movement-products-table__table,
    .warehouse-distribution-stock__table,
    .audit-log-table__table,
    .distribution-history-table,
    .credit-note-origin-picker__table
) {
    border-color: var(--kizen-ui-border) !important;
    background: var(--kizen-ui-surface) !important;
    color: var(--kizen-ui-text) !important;
}

html[data-kizen-ui-theme="nocodb"] :where(
    .sap-table thead th,
    .role-map__table thead th,
    .receipt-association-table thead th,
    .movement-products-table__table thead th,
    .warehouse-distribution-stock__table thead th,
    .audit-log-table__table thead th,
    .distribution-history-table thead th,
    .credit-note-origin-picker__table thead th
) {
    border-color: var(--kizen-ui-border-strong) !important;
    background: var(--kizen-ui-surface-muted) !important;
    color: var(--kizen-ui-text-muted) !important;
    padding-block: 0.4rem !important;
}

html[data-kizen-ui-theme="nocodb"] :where(
    .sap-table tbody td,
    .role-map__table tbody td,
    .receipt-association-table tbody td,
    .movement-products-table__table tbody td,
    .warehouse-distribution-stock__table tbody td,
    .audit-log-table__table tbody td,
    .distribution-history-table tbody td,
    .credit-note-origin-picker__table tbody td
) {
    border-color: var(--kizen-ui-border) !important;
    padding-block: 0.35rem !important;
}

html[data-kizen-ui-theme="nocodb"] :where(
    .sap-badge,
    [class*="__badge"],
    [class*="__pill"]
) {
    border-radius: var(--kizen-ui-radius-sm) !important;
    font-weight: 650;
    line-height: 1.2;
}

html[data-kizen-ui-theme="nocodb"] :where(
    .fi-btn,
    .sap-btn-primary,
    .sap-btn-secondary,
    .role-map__toolbar-button,
    .ps-tab,
    .ps-subtab,
    .receipt-association-filter-btn,
    .sales-processes-lab__clear-btn,
    .sales-processes-lab__pager-btn,
    [class*="__btn"],
    [class*="__button"]
):focus-visible {
    outline: 3px solid var(--kizen-ui-focus) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px var(--kizen-ui-focus) !important;
}

/* Final Filament shell pass: the generated table container and pagination
 * wrapper have their own radius tokens, so normalize them explicitly too. */
html[data-kizen-ui-theme="nocodb"] :where(
    .fi-ta-ctn,
    .fi-pagination-items,
    .fi-icon-btn-badge-ctn,
    .fi-global-search-ctn,
    .fi-page-header,
    .fi-page-header-main-ctn
) {
    border-radius: var(--kizen-ui-radius) !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-ta-ctn {
    border-color: var(--kizen-ui-border) !important;
    background: var(--kizen-ui-surface) !important;
    box-shadow: none !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-page-header {
    margin-bottom: 0.8rem !important;
    padding-bottom: 0.65rem !important;
    border-bottom-color: var(--kizen-ui-border) !important;
}

/* Keep resource headers compact and aligned with the NocoDB workspace rather
 * than inheriting Filament's oversized 3xl heading treatment. */
html[data-kizen-ui-theme="nocodb"] .fi-page-header-main-ctn {
    gap: 10px !important;
    padding: 0 !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-header-heading {
    font-size: var(--text-2xl) !important;
    line-height: 1.2 !important;
}

/* Filament applies generous horizontal cell padding by default. Reduce it
 * consistently so long resource tables read like a compact spreadsheet and
 * allow intentionally wrapped column headings to use their available width. */
html[data-kizen-ui-theme="nocodb"] .fi-ta table :is(thead th, tbody td) {
    padding-inline: 0.75rem !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-ta table thead th {
    white-space: normal !important;
    line-height: 1.15 !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-pagination-items {
    gap: 0.15rem !important;
    box-shadow: none !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-pagination-item-btn,
html[data-kizen-ui-theme="nocodb"] .fi-pagination-previous-btn,
html[data-kizen-ui-theme="nocodb"] .fi-pagination-next-btn {
    border-radius: var(--kizen-ui-radius) !important;
}

html[data-kizen-ui-theme="nocodb"] .sysbar-ai-chat {
    border-radius: var(--kizen-ui-radius) !important;
    box-shadow: none !important;
}

/* Primary custom actions keep the NocoDB blue/white contrast while neutral
 * controls gain the spreadsheet-like blue hover treatment. */
html[data-kizen-ui-theme="nocodb"] :where(
    .sap-btn-primary,
    .role-map__toolbar-button--primary,
    .sales-processes-lab__clear-btn
):hover {
    border-color: #1e40af !important;
    background: #1e40af !important;
    color: #ffffff !important;
}

html[data-kizen-ui-theme="nocodb"] :where(
    .sap-btn-secondary,
    .role-map__toolbar-button,
    .receipt-association-filter-btn,
    .sales-processes-lab__pager-btn
):hover {
    border-color: var(--kizen-ui-primary) !important;
    background: var(--kizen-ui-primary-soft) !important;
    color: var(--kizen-ui-primary) !important;
}

/* Custom global-settings and FilePond surfaces use their own component
 * classes. Bring those surfaces into the same NocoDB workspace grammar. */
html[data-kizen-ui-theme="nocodb"] :where(
    .kizen-global-settings__hero,
    .kizen-global-settings__theme-summary,
    .kizen-global-settings__theme-card,
    .kizen-global-settings__form,
    .kizen-global-settings__recommendation,
    .kizen-global-settings__preview > div,
    .fi-sc-tabs,
    .fi-sc-tabs-tab,
    .fi-select-input-btn,
    .filepond--root,
    .filepond--panel-root,
    .filepond--drip
) {
    border-color: var(--kizen-ui-border) !important;
    border-radius: var(--kizen-ui-radius) !important;
    box-shadow: none !important;
}

html[data-kizen-ui-theme="nocodb"] :where(
    .kizen-global-settings__hero,
    .kizen-global-settings__theme-summary,
    .kizen-global-settings__theme-card,
    .kizen-global-settings__form,
    .kizen-global-settings__recommendation,
    .kizen-global-settings__preview > div,
    .fi-sc-tabs,
    .fi-sc-tabs-tab,
    .fi-select-input-btn,
    .filepond--root
) {
    background: var(--kizen-ui-surface) !important;
    color: var(--kizen-ui-text) !important;
}

html[data-kizen-ui-theme="nocodb"] .kizen-global-settings__theme-card.is-active {
    border-color: var(--kizen-ui-primary) !important;
    background: var(--kizen-ui-primary-soft) !important;
}

html[data-kizen-ui-theme="nocodb"] .kizen-global-settings__theme-badge {
    border-radius: var(--kizen-ui-radius-sm) !important;
    background: var(--kizen-ui-primary-soft) !important;
    color: var(--kizen-ui-primary) !important;
}

html[data-kizen-ui-theme="nocodb"] :where(
    .fi-input-wrp-content-ctn,
    .section-sheet-location-card
) {
    border-radius: var(--kizen-ui-radius) !important;
}

html[data-kizen-ui-theme="nocodb"] .section-sheet-location-card > span,
html[data-kizen-ui-theme="nocodb"] .section-sheet-location-card span {
    border-radius: var(--kizen-ui-radius-sm) !important;
}

/* User identity cells: the circle is intentional, while the surrounding
 * table remains compact and square like the NocoDB reference UI. */
.kizen-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    position: relative;
    width: 28px;
    height: 28px;
    border: 1px solid color-mix(in srgb, var(--kizen-user-avatar-bg) 78%, #0f172a 22%);
    border-radius: 50%;
    background: var(--kizen-user-avatar-bg, #64748b);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    text-align: center;
    cursor: help;
    outline: none;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
}

/* Filament's utility class is not guaranteed to be present in every table
 * renderer. Keep the full name available to assistive technology and the
 * native tooltip, but never let it become visible inside the initials circle. */
.kizen-user-avatar > .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.kizen-user-avatar > span[aria-hidden="true"] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.kizen-user-avatar--xs {
    width: 24px;
    height: 24px;
    font-size: 10px;
}

.kizen-user-avatar--lg {
    width: 34px;
    height: 34px;
    font-size: 12px;
}

.kizen-user-avatar:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--kizen-ui-focus, #123b9c);
}

/*
 * NocoDB typography cap: 700 is the strongest weight used by this variant.
 * Legacy/SAP styles remain scoped to their own mode and are intentionally
 * not rewritten here.
 */
html[data-kizen-ui-theme="nocodb"] :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    strong,
    b,
    th,
    button,
    [role="button"],
    [class*="__heading"],
    [class*="__title"],
    [class*="__label"],
    [class*="__button"],
    [class*="__btn"],
    [class*="__badge"],
    [class*="__pill"],
    [class*="__eyebrow"],
    [class*="__count"],
    [class*="__metric"],
    [class*="__value"],
    .sysbar-workspace__assistant-answer a,
    .sysbar-workspace__assistant-bubble,
    .sysbar-workspace__assistant-answer span,
    .sysbar-stock-cell__transit,
    .sysbar-stock-cell__td--physical,
    .sysbar-stock-cell__td--transit,
    .sysbar-stock-cell__td--outbound,
    .sysbar-stock-cell__td--negative,
    .sysbar-stock-cell__panel-total-value--negative,
    .ingreso-archivos__eyebrow,
    .ingreso-archivos__title,
    .ingreso-archivos__count,
    .ingreso-archivos__table th,
    .ingreso-archivos__file-name,
    .ingreso-archivos__action,
    .kpos__brand,
    .kpos__customer-icon,
    .kpos__customer small,
    .kpos__line-code,
    .kpos__manual-price,
    .kpos__manual-price input,
    .kpos__line-controls label,
    .kpos__product-category,
    .kpos__product-footer small,
    .kpos__opening-form label,
    .kpos__modal small,
    .kpos__payment-line label,
    .kpos__money-input input,
    [style*="font-weight: 750"],
    [style*="font-weight:750"],
    [style*="font-weight: 800"],
    [style*="font-weight:800"],
    [style*="font-weight: 850"],
    [style*="font-weight:850"],
    [style*="font-weight: 900"],
    [style*="font-weight:900"]
) {
    font-weight: 700 !important;
}

/* Human-review follow-up: the collapsible navigation groups use the classic
 * disclosure triangle. The indicator remains a real button for keyboard and
 * screen-reader users, while creation markers stay scoped to action buttons
 * and never appear as a faux plus in the sidebar. */
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-group-btn {
    display: flex !important;
    align-items: center;
    width: 100%;
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar-group-collapse-btn {
    position: relative;
    display: inline-flex !important;
    flex: 0 0 1rem;
    align-items: center;
    justify-content: center;
    width: 1rem !important;
    height: 1rem !important;
    margin-inline-start: auto;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--kizen-ui-text-muted) !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar-group-collapse-btn svg {
    display: none !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar-group-collapse-btn::before {
    content: "";
    width: 0;
    height: 0;
    border-top: 0.3rem solid transparent;
    border-bottom: 0.3rem solid transparent;
    border-left: 0.4rem solid currentColor;
    transition: transform 140ms ease;
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar-group-collapse-btn[aria-expanded="true"]::before {
    transform: rotate(90deg);
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar-group-collapse-btn:hover,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar-group-collapse-btn:focus-visible {
    background: transparent !important;
    color: var(--kizen-ui-primary) !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar .kizen-create-action-marker {
    display: none !important;
}

/* The global topbar already owns the brand/header row. Keeping the sidebar
 * drawer at top: 0 makes its scroll track pass underneath that bar, which
 * clips the first part of the scrollbar when the navigation is open. Align
 * the drawer with the content workspace and let only its nav scroll. */
html[data-kizen-ui-theme="nocodb"] .fi-sidebar {
    top: 4rem !important;
    bottom: 0 !important;
    height: calc(100dvh - 4rem) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 4rem) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box;
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar-header {
    display: none !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar-nav {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

/* The table body is intentionally spreadsheet-dense. Explicitly setting each
 * horizontal side defeats Filament and legacy utility padding that otherwise
 * leaves a large blank gutter before the first value. */
html[data-kizen-ui-theme="nocodb"] .fi-ta table :is(thead th, tbody td) {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
}

/* POS catalog density and interaction: twelve cards per page keep the result
 * readable, the stock-detail action stays attached below its product, and the
 * stock modal gets a little more vertical room without changing its layout. */
html[data-kizen-ui-theme="nocodb"] .kpos__catalog {
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__products {
    grid-auto-rows: minmax(6.5rem, auto) !important;
    gap: 0.4rem !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__product {
    min-height: 0 !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__product-select {
    min-height: 6.5rem !important;
    padding: 0.45rem 0.55rem !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__product-select > strong {
    display: -webkit-box;
    margin: 0.25rem 0 0.1rem !important;
    line-height: 1.15 !important;
    -webkit-line-clamp: 2;
}

html[data-kizen-ui-theme="nocodb"] .kpos__product-footer {
    padding-top: 0.25rem !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__stock-detail-button {
    min-height: 1.75rem;
    padding: 0.3rem 0.45rem !important;
    line-height: 1.15 !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__catalog-skeleton {
    grid-auto-rows: minmax(6.5rem, auto) !important;
    gap: 0.4rem !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__catalog-skeleton > span {
    height: 6.5rem !important;
}

html[data-kizen-ui-theme="nocodb"] .kpos__catalog-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    min-height: 2.25rem;
    padding: 0.35rem 0.75rem 0.55rem;
    border-top: 1px solid var(--kizen-ui-border);
    background: var(--kizen-ui-surface);
    color: var(--kizen-ui-text-muted);
    font-size: 0.72rem;
}

html[data-kizen-ui-theme="nocodb"] .kpos__catalog-pagination button {
    min-width: 2rem;
    min-height: 1.7rem;
    padding: 0.2rem 0.45rem;
    border: 1px solid var(--kizen-ui-border-strong);
    border-radius: var(--kizen-ui-radius) !important;
    background: var(--kizen-ui-surface);
    color: var(--kizen-ui-text);
    font-size: 0.7rem;
}

html[data-kizen-ui-theme="nocodb"] .kpos__catalog-pagination button:hover:not(:disabled),
html[data-kizen-ui-theme="nocodb"] .kpos__catalog-pagination button.is-active {
    border-color: var(--kizen-ui-primary);
    background: var(--kizen-ui-primary-soft);
    color: var(--kizen-ui-primary);
}

html[data-kizen-ui-theme="nocodb"] .kpos__catalog-pagination button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

html[data-kizen-ui-theme="nocodb"] .kpos__catalog-page-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    justify-content: center;
}

html[data-kizen-ui-theme="nocodb"] .kpos__modal--stock {
    height: min(760px, calc(100dvh - 2rem));
    max-height: min(760px, calc(100dvh - 2rem)) !important;
}

/*
 * Explicit viewport/scroll contract (006 follow-up)
 *
 * Host and embedded documents are identified by JavaScript classes installed
 * before paint. Scroll ownership never depends on `:has(.sysbar-module-shell)`:
 * an embedded resource may temporarily contain a dormant server-rendered
 * shell after navigation, and that must not lock its document.
 *
 * - host document: the active native pane owns page scrolling;
 * - embedded document: the iframe document scrolls naturally;
 * - POS desktop: the ticket lines and product catalog own their internal
 *   scrolling;
 * - POS narrow/zoomed: the bounded POS workspace is the only scroll owner.
 *
 * The host-only lock is deliberately free of `!important`; embedded resource
 * pages can therefore never inherit an irreversible overflow lock.
 */
html[data-kizen-ui-theme="nocodb"]:is(.sysbar-module-host-preload, .sysbar-module-host),
html[data-kizen-ui-theme="nocodb"]:is(.sysbar-module-host-preload, .sysbar-module-host) body {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

html[data-kizen-ui-theme="nocodb"]:is(.sysbar-module-host-preload, .sysbar-module-host) body:not(:has(.kpos)) {
    display: flex;
    flex-direction: column;
}

html[data-kizen-ui-theme="nocodb"]:is(.sysbar-module-host-preload, .sysbar-module-host) body:not(:has(.kpos)) .fi-topbar-ctn {
    flex: 0 0 auto;
}

html[data-kizen-ui-theme="nocodb"].sysbar-module-host body:not(:has(.kpos)) .fi-layout {
    display: flex;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
}

html[data-kizen-ui-theme="nocodb"].sysbar-module-host body:not(:has(.kpos)) :is(.fi-main-ctn, .fi-main, .fi-page, .fi-page-main, .fi-page-content) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow: visible;
}

html[data-kizen-ui-theme="nocodb"].sysbar-module-host body:not(:has(.kpos)) .sysbar-module-shell,
html[data-kizen-ui-theme="nocodb"].sysbar-module-host body:not(:has(.kpos)) .sysbar-module-shell__workspace,
html[data-kizen-ui-theme="nocodb"].sysbar-module-host body:not(:has(.kpos)) .sysbar-module-pane.is-active {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
}

html[data-kizen-ui-theme="nocodb"].sysbar-module-host body:not(:has(.kpos)) .sysbar-module-shell,
html[data-kizen-ui-theme="nocodb"].sysbar-module-host body:not(:has(.kpos)) .sysbar-module-pane.is-active {
    flex-direction: column;
    height: 100%;
}

html[data-kizen-ui-theme="nocodb"].sysbar-module-host body:not(:has(.kpos)) .sysbar-module-shell {
    margin-bottom: 0;
}

html[data-kizen-ui-theme="nocodb"].sysbar-module-host body:not(:has(.kpos)) .sysbar-module-shell__workspace {
    height: auto;
}

html[data-kizen-ui-theme="nocodb"].sysbar-module-host body:not(:has(.kpos)) .sysbar-module-pane--native.is-active {
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

/* Full-height pages inside the native module pane use the measured pane
 * height. The page itself owns its internal scrolling, not a viewport offset. */
html[data-kizen-ui-theme="nocodb"].sysbar-module-host body:not(:has(.kpos)) .sysbar-module-pane--native.is-active:has(.sysbar-module-fill) {
    overflow: hidden;
}

html[data-kizen-ui-theme="nocodb"].sysbar-module-host body:not(:has(.kpos)) .sysbar-module-pane--native.is-active:has(.sysbar-module-fill) :is(
    .fi-main,
    .fi-page,
    .fi-page-header-main-ctn,
    .fi-page-main,
    .fi-page-content
) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    max-height: none;
}

.sysbar-module-fill {
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 28rem;
    width: 100%;
}

html[data-kizen-ui-theme="nocodb"].sysbar-module-host body:not(:has(.kpos)) .sysbar-module-fill {
    height: 100%;
    min-height: 0;
}

html[data-kizen-ui-theme="nocodb"].sysbar-module-host body:not(:has(.kpos)) .sysbar-module-pane__frame {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
}

html[data-kizen-ui-theme="nocodb"]:is(.sysbar-module-embedded-preload, .sysbar-module-embedded),
html[data-kizen-ui-theme="nocodb"]:is(.sysbar-module-embedded-preload, .sysbar-module-embedded) body {
    height: auto;
    min-height: 100%;
    overflow-x: clip;
    overflow-y: auto;
}

html[data-kizen-ui-theme="nocodb"]:is(.sysbar-module-embedded-preload, .sysbar-module-embedded) :is(.fi-layout, .fi-main-ctn, .fi-main, .fi-page, .fi-page-main, .fi-page-content) {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
}

html[data-kizen-ui-theme="nocodb"]:is(.sysbar-module-embedded-preload, .sysbar-module-embedded) .fi-layout:has(.sysbar-module-fill) {
    display: flex;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

html[data-kizen-ui-theme="nocodb"]:is(.sysbar-module-embedded-preload, .sysbar-module-embedded) :is(
    .fi-main-ctn,
    .fi-main,
    .fi-page,
    .fi-page-header-main-ctn,
    .fi-page-main,
    .fi-page-content
):has(.sysbar-module-fill) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow: hidden;
}

html[data-kizen-ui-theme="nocodb"]:is(.sysbar-module-embedded-preload, .sysbar-module-embedded) .sysbar-module-fill {
    height: 100%;
    min-height: 0;
}

/* Standalone resource forms get one bounded scroll surface. Inside a module
 * tab, the embedded document or native pane owns scrolling, so the inner
 * Filament container must stay naturally sized and overflow-visible. */
html[data-kizen-ui-theme="nocodb"] body:not(:has(.kpos)):not(.sysbar-module-host-preload):not(.sysbar-module-host):not(.sysbar-module-embedded-preload):not(.sysbar-module-embedded) .fi-main-ctn:has(:is(
    .fi-resource-create-record-page,
    .fi-resource-edit-record-page,
    .fi-resource-view-record-page,
    .fi-resource-manage-related-records-page
)) {
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html[data-kizen-ui-theme="nocodb"] body:not(:has(.kpos)) .fi-main-ctn:has(:is(
    .fi-resource-create-record-page,
    .fi-resource-edit-record-page,
    .fi-resource-view-record-page,
    .fi-resource-manage-related-records-page
)) > .fi-main,
html[data-kizen-ui-theme="nocodb"] body:not(:has(.kpos)) .fi-main-ctn:has(:is(
    .fi-resource-create-record-page,
    .fi-resource-edit-record-page,
    .fi-resource-view-record-page,
    .fi-resource-manage-related-records-page
)) .sysbar-module-pane--native.is-active > .fi-main {
    flex: 0 0 auto !important;
    min-height: max-content !important;
    height: auto !important;
}

html[data-kizen-ui-theme="nocodb"] body:not(:has(.kpos)) .fi-main-ctn:has(:is(
    .fi-resource-create-record-page,
    .fi-resource-edit-record-page,
    .fi-resource-view-record-page,
    .fi-resource-manage-related-records-page
)) .sysbar-module-pane--native.is-active {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html[data-kizen-ui-theme="nocodb"] body:not(:has(.kpos)) .fi-main-ctn:has(:is(
    .fi-resource-create-record-page,
    .fi-resource-edit-record-page,
    .fi-resource-view-record-page,
    .fi-resource-manage-related-records-page
)) .fi-page {
    min-height: max-content !important;
}

html[data-kizen-ui-theme="nocodb"] body:not(:has(.kpos)):not(.sysbar-module-host-preload):not(.sysbar-module-host):not(.sysbar-module-embedded-preload):not(.sysbar-module-embedded) .fi-main-ctn:has(:is(
    .fi-resource-create-record-page,
    .fi-resource-edit-record-page,
    .fi-resource-view-record-page,
    .fi-resource-manage-related-records-page
)) {
    height: calc(100dvh - 4rem) !important;
}

html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .fi-main-ctn,
html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .fi-main,
html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .sysbar-module-shell,
html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .sysbar-module-shell__workspace,
html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .sysbar-module-pane--native,
html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .fi-page,
html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .fi-page-header-main-ctn,
html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .fi-page-main,
html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .fi-page-content {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .kpos {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .kpos__topbar {
    flex: 0 0 auto !important;
}

html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .kpos__workspace {
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Historial de Ventas and Pagos por devolver have no inner scroll panes, so
 * their workspace scrolls itself instead of clipping the list on desktop. */
html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .kpos__workspace--history {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .kpos__ticket,
html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .kpos__catalog {
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .kpos__lines,
html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .kpos__products {
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

@media (max-width: 850px) {
    /* A zoomed desktop is treated exactly like a narrow viewport. The outer
     * document remains bounded; only the workspace scrolls. */
    html[data-kizen-ui-theme="nocodb"] body:has(.kpos),
    html[data-kizen-ui-theme="nocodb"]:has(.kpos) {
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .kpos__workspace {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .kpos__ticket,
    html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .kpos__catalog {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        min-height: 650px !important;
        overflow: visible !important;
    }

    html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .kpos__lines,
    html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .kpos__products {
        flex: 0 0 auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        scrollbar-gutter: auto;
    }
}

@media (max-width: 850px) {
    /* An empty ticket should wrap its content instead of reserving the same
     * tall panel used by a catalog with products. Keep the empty message
     * readable with the requested 30px vertical breathing room. */
    html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .kpos__ticket:has(.kpos__empty) {
        height: auto !important;
        min-height: 0 !important;
    }

    html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .kpos__ticket:has(.kpos__empty) .kpos__lines {
        height: auto !important;
        min-height: 0 !important;
    }

    html[data-kizen-ui-theme="nocodb"] body:has(.kpos) .kpos__ticket:has(.kpos__empty) .kpos__empty {
        min-height: 0 !important;
        padding-block: 30px !important;
    }
}

/* Read-only controls use a very subtle striped treatment as the movement
 * repeater's non-editable cells. Keep the native border and box shadow so
 * locked fields remain legible in Compras, Salidas, Ventas and other forms. */
html[data-kizen-ui-theme="nocodb"] .fi-input-wrp.fi-disabled,
html[data-kizen-ui-theme="nocodb"] .fi-input-wrp:has(:is(input, select, textarea)[disabled]),
html[data-kizen-ui-theme="nocodb"] .fi-input-wrp:has(.fi-select-input-btn[disabled]),
html[data-kizen-ui-theme="nocodb"] .fi-input-wrp:has(.fi-select-input-btn[aria-disabled="true"]),
html[data-kizen-ui-theme="nocodb"] .fi-input-wrp:has(:is(input, textarea)[readonly]) {
    background-color: var(--kizen-ui-surface, #fff) !important;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent 0,
        transparent 6px,
        rgba(83, 98, 113, .025) 6px,
        rgba(83, 98, 113, .025) 12px
    ) !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-input:disabled,
html[data-kizen-ui-theme="nocodb"] .fi-input[readonly],
html[data-kizen-ui-theme="nocodb"] .fi-select-input:disabled,
html[data-kizen-ui-theme="nocodb"] .fi-select-input[readonly],
html[data-kizen-ui-theme="nocodb"] .fi-input-wrp.fi-disabled .fi-select-input-btn,
html[data-kizen-ui-theme="nocodb"] .fi-input-wrp:has(:is(input, select, textarea)[disabled]) .fi-select-input-btn,
html[data-kizen-ui-theme="nocodb"] .fi-select-input-btn[disabled],
html[data-kizen-ui-theme="nocodb"] .fi-select-input-btn[aria-disabled="true"],
html[data-kizen-ui-theme="nocodb"] .fi-fo-field :is(input, select, textarea)[disabled],
html[data-kizen-ui-theme="nocodb"] .fi-fo-field :is(input, textarea)[readonly] {
    background-color: transparent !important;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent 0,
        transparent 6px,
        rgba(83, 98, 113, .025) 6px,
        rgba(83, 98, 113, .025) 12px
    ) !important;
    color: #000 !important;
    cursor: not-allowed;
}

/* Filament marks the visible text input of a custom date picker as readonly
 * because dates are selected through its calendar. It is still editable, so
 * reserve the striped treatment for fields that are actually disabled. */
html[data-kizen-ui-theme="nocodb"] .fi-input-wrp:not(.fi-disabled):not(:has(.fi-fo-date-time-picker-display-text-input:disabled)):has(.fi-fo-date-time-picker-display-text-input[readonly]) {
    background-image: none !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-input-wrp:not(.fi-disabled):not(:has(.fi-fo-date-time-picker-display-text-input:disabled)) .fi-fo-date-time-picker-display-text-input[readonly] {
    background-color: transparent !important;
    background-image: none !important;
    cursor: pointer !important;
}

/* Field values keep maximum contrast in editable and non-editable controls.
 * Keep this color-only override independent from the border, shadow and
 * striped-background treatments defined above. */
html[data-kizen-ui-theme="nocodb"] :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
    select,
    textarea,
    .fi-input,
    .fi-select-input,
    .fi-textarea,
    .fi-select-input-btn,
    .choices__inner,
    .choices__input,
    .choices__list--single,
    [contenteditable="true"]
) {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
}

html[data-kizen-ui-theme="nocodb"] :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
    textarea,
    .fi-input,
    .fi-textarea,
    .choices__input
)::placeholder {
    color: var(--kizen-ui-text-muted) !important;
    -webkit-text-fill-color: var(--kizen-ui-text-muted) !important;
    opacity: 1;
}

/* Keep the compact NocoDB primary action consistent wherever a movement list
 * exposes a manual refresh. */
html[data-kizen-ui-theme="nocodb"] .fi-btn.sysbar-refresh-data-action {
    min-height: 2.35rem;
    border-color: var(--kizen-ui-primary) !important;
    border-radius: var(--kizen-ui-radius) !important;
    background: var(--kizen-ui-primary) !important;
    color: #fff !important;
    font-weight: 700;
}

html[data-kizen-ui-theme="nocodb"] .fi-btn.sysbar-refresh-data-action:hover,
html[data-kizen-ui-theme="nocodb"] .fi-btn.sysbar-refresh-data-action:focus-visible {
    border-color: #1e40af !important;
    background: #1e40af !important;
    color: #fff !important;
}

/* NocoDB mobile navigation contract. Keep the shell header in one row,
 * reserve space for the account trigger and make open module tabs touch
 * scrollable instead of allowing a long active label to clip the menu. */
@media (max-width: 767px) {
    html[data-kizen-ui-theme="nocodb"] .fi-topbar-ctn {
        position: sticky !important;
        top: 0 !important;
        z-index: 80 !important;
        overflow-x: clip !important;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-topbar {
        box-sizing: border-box;
        display: flex !important;
        flex-wrap: nowrap !important;
        min-width: 0 !important;
        min-height: 4rem !important;
        gap: 0.25rem !important;
        padding-inline: 0.45rem !important;
        overflow: hidden;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-topbar-open-sidebar-btn,
    html[data-kizen-ui-theme="nocodb"] .fi-topbar-close-sidebar-btn {
        box-sizing: border-box;
        flex: 0 0 2.25rem !important;
        width: 2.25rem !important;
        min-width: 2.25rem !important;
        min-height: 2.25rem !important;
        margin: 0 !important;
        padding: 0.35rem !important;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-topbar-start {
        display: flex !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-topbar-start > a,
    html[data-kizen-ui-theme="nocodb"] .fi-topbar-start > .fi-logo {
        display: flex !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-topbar .fi-logo {
        justify-content: flex-start !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-topbar .kizen-topbar-brand {
        flex: 0 1 8rem;
        width: min(8rem, 34vw) !important;
        max-width: 100%;
        justify-content: flex-start;
        gap: 0.25rem;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-topbar .kizen-topbar-brand__client-logo {
        flex: 1 1 auto;
        max-width: min(4.6rem, 22vw);
    }

    html[data-kizen-ui-theme="nocodb"] .fi-topbar .kizen-topbar-brand__product {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 3.55rem;
        font-size: 0.55rem;
        text-overflow: ellipsis;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-topbar-end {
        display: flex !important;
        flex: 0 1 auto !important;
        align-items: center !important;
        min-width: 0 !important;
        max-width: 100%;
        gap: 0.25rem !important;
        margin-inline-start: auto !important;
        overflow: visible;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-topbar > .fi-topbar-end > .sysbar-topbar-statuses {
        display: inline-flex;
        flex: 0 1 auto;
        align-items: center;
        min-width: 0;
        max-width: 100%;
        gap: 0.25rem;
        overflow: hidden;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-topbar .sysbar-user-context,
    html[data-kizen-ui-theme="nocodb"] .fi-topbar .fi-user-menu {
        display: flex;
        flex: 0 1 auto;
        align-items: center;
        min-width: 0;
        max-width: 100%;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-topbar .sysbar-user-context {
        gap: 0.25rem;
        overflow: hidden;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-topbar .sysbar-user-context > .sysbar-current-role:first-child {
        display: none;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-topbar .sysbar-current-role {
        box-sizing: border-box;
        flex: 0 1 auto;
        min-width: 0;
        max-width: 8rem;
        overflow: hidden;
        padding-inline: 0.4rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-topbar .sysbar-current-role__label,
    html[data-kizen-ui-theme="nocodb"] .fi-topbar .sysbar-current-role__value {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-topbar .sysbar-current-role__label {
        flex: 0 0 auto;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-topbar .sysbar-current-role__value {
        flex: 0 1 auto;
    }

    /* Preserve the IA status as a compact, titled state indicator. */
    html[data-kizen-ui-theme="nocodb"] .fi-topbar a.sysbar-ai-topbar-status {
        display: inline-flex;
        flex: 0 0 2rem;
        align-items: center;
        justify-content: center;
        width: 2rem;
        min-width: 2rem;
        max-width: 2rem;
        gap: 0;
        overflow: hidden;
        padding-inline: 0.4rem;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-topbar a.sysbar-ai-topbar-status > :not(.sysbar-ai-topbar-status__dot) {
        display: none;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-topbar .fi-user-menu-trigger {
        display: flex;
        flex: 0 0 2.25rem;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        min-width: 2.25rem;
        min-height: 2.25rem;
        padding: 0.1rem !important;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-topbar .fi-user-menu-trigger .fi-avatar {
        flex: 0 0 2rem;
        width: 2rem;
        height: 2rem;
    }

    /* The topbar already carries the brand, so the mobile drawer starts
     * below it and does not duplicate a second header/logo. */
    html[data-kizen-ui-theme="nocodb"] .fi-sidebar {
        top: 4rem !important;
        right: auto !important;
        bottom: 0 !important;
        width: min(var(--sidebar-width), calc(100vw - 0.75rem)) !important;
        height: auto !important;
        max-height: calc(100dvh - 4rem) !important;
        z-index: 60 !important;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-sidebar-header-ctn {
        display: none !important;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-sidebar-close-overlay {
        top: 4rem !important;
        z-index: 50 !important;
    }

    html[data-kizen-ui-theme="nocodb"] body:has(.fi-sidebar-open) {
        overflow: hidden !important;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-sidebar-nav {
        flex: 1 1 auto;
        min-height: 0 !important;
        padding: 0.75rem 0.65rem 1rem !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-sidebar-nav-groups {
        gap: 0.45rem !important;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-sidebar-group,
    html[data-kizen-ui-theme="nocodb"] .fi-sidebar-group-items {
        gap: 0.2rem;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-sidebar-group-label,
    html[data-kizen-ui-theme="nocodb"] .fi-sidebar-item-label {
        min-width: 0;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Open module tabs remain a single touch-scrollable menu row. */
    html[data-kizen-ui-theme="nocodb"] .sysbar-module-shell {
        width: 100%;
        max-width: 100vw;
        min-width: 0;
        overflow: hidden;
    }

    html[data-kizen-ui-theme="nocodb"] .sysbar-module-shell__bar {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    html[data-kizen-ui-theme="nocodb"] .sysbar-module-shell__bar::-webkit-scrollbar {
        display: none;
        height: 0;
    }

    html[data-kizen-ui-theme="nocodb"] .sysbar-module-shell__tablist {
        display: flex;
        flex-wrap: nowrap;
        width: max-content;
        min-width: 100%;
        gap: 0;
        overflow: visible;
        scroll-padding-inline: 0.25rem;
    }

    html[data-kizen-ui-theme="nocodb"] .sysbar-module-tab {
        flex: 0 0 auto;
        max-width: none;
        white-space: nowrap;
    }

    html[data-kizen-ui-theme="nocodb"] .sysbar-module-tab__trigger,
    html[data-kizen-ui-theme="nocodb"] .sysbar-module-tab__label {
        flex: 0 0 auto;
        max-width: none;
        white-space: nowrap;
    }
}

@media (max-width: 420px) {
    html[data-kizen-ui-theme="nocodb"] .fi-topbar .kizen-topbar-brand {
        width: min(7.5rem, 32vw) !important;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-topbar .kizen-topbar-brand__client-logo {
        max-width: min(4.25rem, 21vw);
    }

    html[data-kizen-ui-theme="nocodb"] .fi-topbar .kizen-topbar-brand__product {
        max-width: 3.2rem;
        font-size: 0.53rem;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-topbar .sysbar-current-role {
        max-width: 7.5rem;
    }
}

@media (max-width: 359px) {
    html[data-kizen-ui-theme="nocodb"] .fi-topbar .kizen-topbar-brand {
        width: 4.75rem !important;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-topbar .kizen-topbar-brand__product,
    html[data-kizen-ui-theme="nocodb"] .fi-topbar .sysbar-current-role__label {
        display: none;
    }

    html[data-kizen-ui-theme="nocodb"] .fi-topbar .sysbar-current-role {
        max-width: 6.8rem;
    }
}

/* Keep the tall POS opening form reachable inside the bounded POS shell. */
html[data-kizen-ui-theme="nocodb"] body:has(.kpos__opening) .kpos__opening {
    align-items: safe center !important;
    flex: 1 1 0% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
}

/* Align Escritorio with the other sidebar icons. Its hover/active state uses
   blue text and icon color without painting a blue surface behind the item. */
html[data-kizen-ui-theme="nocodb"] .fi-sidebar .fi-sidebar-item.sysbar-dashboard-navigation-item > .fi-sidebar-item-btn {
    justify-content: flex-start !important;
    text-align: start !important;
    padding-inline-start: 0 !important;
    padding-left: 0 !important;
    transition: none !important;
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar .fi-sidebar-item.sysbar-dashboard-navigation-item:hover > .fi-sidebar-item-btn,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar .fi-sidebar-item.sysbar-dashboard-navigation-item:focus-within > .fi-sidebar-item-btn,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar .fi-sidebar-item.sysbar-dashboard-navigation-item.fi-active > .fi-sidebar-item-btn,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar .fi-sidebar-item.sysbar-dashboard-navigation-item.fi-sidebar-item-active > .fi-sidebar-item-btn,
html[data-kizen-ui-theme="nocodb"] .fi-sidebar .fi-sidebar-item.sysbar-dashboard-navigation-item > .fi-sidebar-item-btn:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--kizen-ui-primary) !important;
    box-shadow: none !important;
    font-weight: 700;
}

html[data-kizen-ui-theme="nocodb"] .fi-sidebar .fi-sidebar-item.sysbar-dashboard-navigation-item > .fi-sidebar-item-btn:focus-visible {
    outline: 2px solid var(--kizen-ui-focus) !important;
    outline-offset: 1px !important;
}