/* Built from css/branding.css. Do not edit. */
/* css/components/001-kromeka-screen-and-component-styles.css */
/* ------------------------------------------------------------
   Kromeka screen and component styles
   Colors and shared buttons live in css/brand/tokens.css and css/brand/buttons.css.
   This file keeps the remaining shared components and screen rules.
   New brand colors go in tokens.css. New screens should not redefine .btn-primary.
------------------------------------------------------------ */

/* Flex children can shrink below their content width. Bootstrap 5.3
   does not ship this utility, and long titles overflow without it. */
.min-w-0 {
    min-width: 0 !important;
}

/* css/screens/002-gmail-email-linking-chips-search-picker-and-rela.css */
/* ------------------------------------------------------------
   Gmail email-linking chips, search picker, and related list
   ------------------------------------------------------------ */
.rich-notes-gmail-link {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.12rem 0.5rem;
    border: 1px solid var(--kromeka-red);
    border-radius: 999px;
    color: var(--link-color);
    background: var(--bg-card);
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.rich-notes-gmail-link::before {
    content: "\F32F";
    flex: 0 0 auto;
    margin-right: 0.35rem;
    font-family: "bootstrap-icons";
    font-weight: normal;
}

.rich-notes-gmail-link:hover,
.rich-notes-gmail-link:focus {
    color: var(--link-color);
    background: var(--kromeka-light-grey);
    text-decoration: none;
}

[data-theme="dark"] .rich-notes-gmail-link {
    border-color: var(--kromeka-yellow);
    background: var(--bg-card);
}

[data-theme="dark"] .rich-notes-gmail-link:hover,
[data-theme="dark"] .rich-notes-gmail-link:focus {
    color: var(--kromeka-dark);
    background: var(--kromeka-yellow);
}

[data-theme="dark"] .gmail-related-email:hover .gmail-related-email-attribution,
[data-theme="dark"] .gmail-related-email:focus .gmail-related-email-attribution {
    color: var(--kromeka-dark);
}

.gmail-search-results {
    display: grid;
    gap: 0.65rem;
}

.gmail-search-result-card {
    display: flex;
    width: 100%;
    min-height: 4.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--kromeka-grey);
    border-radius: 0.6rem;
    color: var(--text-main);
    background: var(--bg-card);
    text-align: left;
}

.gmail-search-result-card:hover,
.gmail-search-result-card:focus {
    border-color: var(--kromeka-red);
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--kromeka-red) 14%, transparent);
}

[data-theme="dark"] .gmail-search-result-card:hover,
[data-theme="dark"] .gmail-search-result-card:focus {
    border-color: var(--kromeka-yellow);
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--kromeka-yellow) 18%, transparent);
}

.gmail-search-result-main,
.gmail-search-result-meta {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.2rem;
}

.gmail-search-result-main {
    flex: 1 1 auto;
}

.gmail-search-result-subject,
.gmail-search-result-from {
    overflow-wrap: anywhere;
}

.gmail-search-result-from,
.gmail-search-result-meta {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.gmail-search-result-meta {
    flex: 0 0 auto;
    align-items: flex-end;
}

.gmail-related-card .card-body {
    display: grid;
    gap: 0.55rem;
}

.gmail-related-email {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 0.6rem;
    padding: 0.65rem 0.8rem;
}

.gmail-related-email::before {
    display: none;
}

.gmail-related-email-subject,
.gmail-related-email-attribution {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.gmail-related-email-attribution {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: normal;
}

.gmail-settings-mailboxes {
    display: grid;
    gap: 0.55rem;
}

.gmail-settings-mailbox-row {
    min-height: 2rem;
}

.gmail-always-ask-switch {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

@media (max-width: 575.98px) {
    .gmail-search-result-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .gmail-search-result-meta {
        width: 100%;
        align-items: flex-start;
    }
}

/* Dark theme: replace blue accents with yellow (no blue in dark mode) */
[data-theme="dark"] .alert-info {
    background-color: rgba(245, 181, 31, 0.15);
    border-color: rgba(245, 181, 31, 0.4);
    color: var(--text-main);
}

[data-theme="dark"] .alert-info a {
    color: var(--kromeka-yellow);
    text-decoration: underline;
}

[data-theme="dark"] .alert-info a:hover {
    color: #f7c94a;
}

/* Dark theme: Bootstrap default success/warning/danger alert backgrounds (greens, yellows, pinks)
   do not match Kromeka surfaces — use only brand tokens (yellow accent, red, theme text). */
[data-theme="dark"] .alert-success,
[data-bs-theme="dark"] .alert-success {
    background-color: rgba(245, 181, 31, 0.12);
    border-color: rgba(245, 181, 31, 0.5);
    color: var(--text-main);
}

[data-theme="dark"] .alert-success strong,
[data-bs-theme="dark"] .alert-success strong {
    color: var(--kromeka-yellow);
}

[data-theme="dark"] .alert-warning,
[data-bs-theme="dark"] .alert-warning {
    background-color: rgba(245, 181, 31, 0.16);
    border-color: rgba(245, 181, 31, 0.48);
    color: var(--text-main);
}

[data-theme="dark"] .alert-warning strong,
[data-bs-theme="dark"] .alert-warning strong {
    color: var(--kromeka-yellow);
}

[data-theme="dark"] .alert-danger,
[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(175, 22, 30, 0.22);
    border-color: rgba(175, 22, 30, 0.6);
    color: var(--text-main);
}

[data-theme="dark"] .alert-danger strong,
[data-bs-theme="dark"] .alert-danger strong {
    color: var(--text-card-header);
}

[data-theme="dark"] .alert .btn-close,
[data-bs-theme="dark"] .alert .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.85;
}

[data-theme="dark"] .alert .btn-close:hover,
[data-bs-theme="dark"] .alert .btn-close:hover {
    opacity: 1;
}

[data-theme="dark"] .badge.bg-info {
    background-color: rgba(245, 181, 31, 0.35) !important;
    color: var(--kromeka-dark) !important;
}

.badge.bg-warning,
[data-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.bg-warning {
    color: var(--kromeka-dark) !important;
}

/* css/components/003-dark-theme-bootstrap-primary-is-blue-map-outline.css */
/* ------------------------------------------------------------
 * Dark theme: Bootstrap "primary" is blue — map outline buttons
 * and primary-tinted accents to brand yellow (app-wide, no per-page fixes).
 * Solid .btn-primary stays red via explicit rules above.
 * ------------------------------------------------------------ */
[data-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--kromeka-yellow);
    --bs-btn-border-color: var(--kromeka-yellow);
    --bs-btn-hover-color: var(--kromeka-yellow);
    --bs-btn-hover-bg: rgba(245, 181, 31, 0.12);
    --bs-btn-hover-border-color: var(--link-hover-color);
    --bs-btn-focus-shadow-rgb: 245, 181, 31;
    --bs-btn-active-color: var(--kromeka-dark);
    --bs-btn-active-bg: var(--kromeka-yellow);
    --bs-btn-active-border-color: var(--kromeka-yellow);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
    --bs-btn-disabled-color: rgba(245, 181, 31, 0.45);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: rgba(245, 181, 31, 0.35);
}

[data-theme="dark"] .badge.bg-primary,
[data-bs-theme="dark"] .badge.bg-primary {
    background-color: var(--kromeka-yellow) !important;
    color: var(--kromeka-dark) !important;
}

[data-theme="dark"] a.badge.bg-primary:hover,
[data-bs-theme="dark"] a.badge.bg-primary:hover {
    background-color: var(--link-hover-color) !important;
    color: var(--kromeka-dark) !important;
}

[data-theme="dark"] .bg-primary-subtle,
[data-bs-theme="dark"] .bg-primary-subtle {
    background-color: rgba(245, 181, 31, 0.15) !important;
}

[data-theme="dark"] .text-primary-emphasis,
[data-bs-theme="dark"] .text-primary-emphasis {
    color: var(--kromeka-yellow) !important;
}

[data-theme="dark"] .border-primary,
[data-bs-theme="dark"] .border-primary {
    border-color: var(--kromeka-yellow) !important;
}

body {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: 'DINPro', 'Segoe UI', Roboto, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Canonical full-width authenticated content shell (matches navbar gutters). */
.kromeka-app-content {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding-left: var(--kromeka-content-gutter);
    padding-right: var(--kromeka-content-gutter-end);
    padding-top: 0.75rem;
    padding-bottom: 1rem;
}

.kromeka-app-content-inner {
    width: 100%;
    min-width: 0;
}

/* Focused forms / auth / confirmations stay readable inside the full-width shell. */
.kromeka-readable-content,
.kromeka-form-page {
    width: 100%;
    max-width: var(--kromeka-readable-max-width);
    margin-left: auto;
    margin-right: auto;
}

.kromeka-form-page.kromeka-workorder-form-page {
    max-width: 80rem;
}

/* Table-heavy cards: bleed to the shell edge on small screens (gutter cancelled once). */
@media (max-width: 767.98px) {
    .production-planning-card,
    .kromeka-data-table-card {
        margin-left: calc(-1 * var(--kromeka-content-gutter));
        margin-right: calc(-1 * var(--kromeka-content-gutter-end));
        width: calc(100% + var(--kromeka-content-gutter) + var(--kromeka-content-gutter-end));
        max-width: none;
        border-left: none;
        border-right: none;
        border-radius: 0;
    }
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

/* Bootstrap hardcodes these; tokens do not reach them. */
.form-check-input:checked {
    background-color: var(--kromeka-red);
    border-color: var(--kromeka-red);
}

.form-check-input:focus {
    border-color: var(--kromeka-red-dark);
    box-shadow: 0 0 0 0.25rem rgba(175, 22, 30, 0.25);
}

.progress-bar {
    background-color: var(--kromeka-red);
}

/* Theme toggle shows the icon for the other theme. CSS follows data-theme so there is no flash. */
.theme-icon--dark {
    display: none;
}

[data-theme="dark"] .theme-icon--light {
    display: none;
}

[data-theme="dark"] .theme-icon--dark {
    display: inline-block;
}

/* Navbar — brand, work areas, and an always-visible tasks/notifications/messages bar */
.navbar.kromeka-app-navbar {
    position: relative;
    z-index: 1030; /* above page sticky layers (e.g. Production Planning table header) */
    width: 100%;
    max-width: 100%;
    background-color: var(--navbar-bg) !important;
    border-bottom: 5px solid var(--kromeka-red);
    padding-top: 0;
    padding-bottom: 0;
    overflow: visible;
}

/* Dropdowns must paint above main content, not under card headers / sticky tables */
.kromeka-app-navbar .dropdown-menu {
    z-index: 1050;
}

/* One horizontal inset for brand + menu on every page (Bootstrap gutter neutralized). */
.kromeka-app-navbar__shell {
    --bs-gutter-x: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.5rem;
    column-gap: 0.75rem;
    min-height: 60px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-left: max(1.5rem, env(safe-area-inset-left, 0px));
    padding-right: max(1.5rem, env(safe-area-inset-right, 0px));
}

@media (max-width: 575.98px) {
    .kromeka-app-navbar__shell {
        column-gap: 0.25rem;
        padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
    }
}

@media (min-width: 1400px) {
    .kromeka-app-navbar__shell {
        flex-wrap: nowrap;
        min-height: 69px;
        column-gap: 1rem;
    }
}

.kromeka-app-navbar__brand.navbar-brand {
    color: #fff !important;
    font-weight: 700;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
    margin-bottom: 0;
    margin-right: 0;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 44px;
}

@media (max-width: 575.98px) {
    .kromeka-app-navbar__brand.navbar-brand {
        font-size: 0.95rem;
        letter-spacing: 0;
    }

    .kromeka-app-navbar__toggler {
        padding: 0.25rem 0.4rem;
    }
}

.kromeka-app-navbar__test-badge {
    color: var(--kromeka-yellow);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.kromeka-app-navbar__toggler {
    margin-left: 0;
    flex-shrink: 0;
}

@media (min-width: 1400px) {
    .kromeka-app-navbar__toggler {
        margin-left: 0;
    }
}

@media (max-width: 1399.98px) {
    .kromeka-app-navbar__collapse {
        width: 100%;
        flex-basis: 100%;
        overflow: visible;
    }
}

.kromeka-app-navbar__collapse,
.kromeka-app-navbar__sections {
    overflow: visible;
}

/* Open collapsed menu stays on screen when several sections are expanded. */
@media (max-width: 1399.98px) {
    .kromeka-app-navbar__collapse.show {
        max-height: calc(100dvh - 4.5rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Desktop: collapse and section wrappers disappear so every zone is one flex row. */
@media (min-width: 1400px) {
    .kromeka-app-navbar.navbar-expand-xxl .kromeka-app-navbar__collapse,
    .kromeka-app-navbar__sections {
        display: contents !important;
    }
}

.kromeka-app-navbar__sections {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.75rem;
    padding: 0.25rem 0 0.5rem;
}

@media (min-width: 1400px) {
    .kromeka-app-navbar__brand {
        order: 1;
    }

    .kromeka-app-navbar__zone--start {
        order: 2;
    }

    .kromeka-app-navbar__zone--accounting {
        order: 3;
    }

    .kromeka-app-navbar__zone--main {
        order: 4;
    }

    .kromeka-app-navbar__actions {
        order: 5;
        margin-left: 0;
    }

    .kromeka-app-navbar__zone--end {
        order: 6;
    }
}

.kromeka-app-navbar__zone {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
    row-gap: 0.35rem;
    column-gap: 0.25rem;
}

@media (min-width: 1400px) {
    .kromeka-app-navbar__zone {
        flex-wrap: nowrap;
        row-gap: 0;
    }

    .kromeka-app-navbar__zone--start {
        flex: 0 0 auto;
    }

    .kromeka-app-navbar__zone--main {
        flex: 1 1 auto;
        min-width: 0;
        column-gap: 0.35rem;
    }

    .kromeka-app-navbar__zone--accounting {
        flex: 0 0 auto;
    }

    .kromeka-app-navbar__zone--end {
        flex: 0 0 auto;
        margin-left: 0;
        column-gap: 0.35rem;
        flex-wrap: nowrap;
        white-space: nowrap;
    }
}

@media (max-width: 1399.98px) {
    .kromeka-app-navbar__zone {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        width: 100%;
    }

    .kromeka-app-navbar__zone > .nav-item {
        width: 100%;
    }

    .kromeka-app-navbar__collapse .nav-link {
        width: 100%;
    }

    .kromeka-app-navbar__collapse .dropdown-menu {
        position: static !important;
        transform: none !important;
        float: none;
        width: 100%;
        margin-top: 0;
    }
}

/* Slightly compact horizontal bar when width is just above the collapse breakpoint */
@media (min-width: 1400px) and (max-width: 1649.98px) {
    .kromeka-app-navbar__brand.navbar-brand {
        font-size: 1.35rem;
        letter-spacing: 0.5px;
    }

    .kromeka-app-navbar .nav-link {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        font-size: 0.9375rem;
    }

    .kromeka-app-navbar__zone--main {
        column-gap: 0.15rem;
    }

    .kromeka-app-navbar__zone--end {
        column-gap: 0.2rem;
    }
}

/* Collapsed menu shows "My Account"; the username appears on the desktop bar. */
@media (max-width: 1399.98px) {
    .kromeka-app-navbar__username {
        display: none !important;
    }
}

/* Tasks, notifications, and messages stay in the top bar, beside the menu button. */
.kromeka-app-navbar__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;
    gap: 0;
    flex: 0 0 auto;
}

.kromeka-app-navbar__actions > .nav-item {
    width: auto;
}

.kromeka-app-navbar__actions .nav-link {
    min-width: 44px;
    justify-content: center;
}

.kromeka-app-navbar__actions .dropdown-toggle::after {
    display: none;
}

.kromeka-app-navbar__actions .dropdown-menu {
    position: absolute !important;
}

.kromeka-app-navbar__menu-divider {
    width: 100%;
    height: 1px;
    margin: 0.35rem 0;
    padding: 0;
    list-style: none;
    background-color: rgba(255, 255, 255, 0.28);
}

.kromeka-app-navbar__external-icon {
    margin-left: 0.4rem;
    font-size: 0.75rem;
    opacity: 0.85;
}

/* Vertical rule before user menu (desktop) */
.kromeka-app-navbar__separator {
    align-self: center;
    width: 1px;
    min-width: 1px;
    height: 36px;
    flex: 0 0 1px;
    padding: 0;
    margin: 0 0.25rem;
    background-color: rgba(255, 255, 255, 0.35);
}

.kromeka-app-navbar .nav-link {
    color: var(--navbar-text) !important;
    font-weight: 500;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 2rem;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
}

@media (max-width: 1399.98px) {
    .kromeka-app-navbar__collapse .nav-link {
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .kromeka-app-navbar__actions .nav-link {
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }
}

.kromeka-app-navbar .nav-link:hover {
    color: var(--navbar-hover) !important;
    text-decoration: none;
}

.kromeka-app-navbar .nav-link.kromeka-app-navbar__current {
    color: var(--navbar-hover) !important;
    box-shadow: inset 0 -3px 0 var(--kromeka-yellow);
}

.kromeka-app-navbar .dropdown-item.kromeka-app-navbar__current {
    font-weight: 600;
    color: var(--text-accent);
    background-color: var(--hover-bg);
}

.kromeka-app-navbar__collapsed-label {
    margin-left: 0.35rem;
}

.kromeka-app-navbar__external-hint {
    font-size: 0.75rem;
}

@media (min-width: 1400px) {
    .kromeka-app-navbar__collapsed-label {
        display: none !important;
    }
}

.kromeka-setup-link {
    min-height: 44px;
    color: var(--link-color);
    font-weight: 500;
}

.kromeka-setup-link:hover {
    color: var(--link-hover-color);
}

.kromeka-app-navbar .nav-item.dropdown > .nav-link.dropdown-toggle.kromeka-app-navbar__user-toggle {
    justify-content: flex-start;
    max-width: 14rem;
}

@media (max-width: 1399.98px) {
    .kromeka-app-navbar .nav-item.dropdown > .nav-link.dropdown-toggle.kromeka-app-navbar__user-toggle {
        max-width: none;
    }
}

.kromeka-app-navbar i,
.kromeka-app-navbar .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.kromeka-app-navbar .nav-item {
    position: relative;
    display: flex;
    align-items: center;
}

@media (max-width: 1399.98px) {
    .kromeka-app-navbar__collapse .nav-item {
        flex-direction: column;
        align-items: stretch;
    }

    .kromeka-app-navbar__collapse .dropdown-menu {
        width: 100% !important;
    }
}

@media (max-width: 575.98px) {
    .kromeka-app-navbar__actions .dropdown-menu {
        position: fixed !important;
        top: 4.25rem !important;
        right: max(0.75rem, env(safe-area-inset-right, 0px)) !important;
        left: max(0.75rem, env(safe-area-inset-left, 0px)) !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        max-height: calc(100dvh - 5.5rem);
        overflow-y: auto;
    }
}

.kromeka-app-navbar .theme-icon--dark {
    display: none;
}

[data-theme="dark"] .kromeka-app-navbar .theme-icon--light {
    display: none;
}

[data-theme="dark"] .kromeka-app-navbar .theme-icon--dark {
    display: inline-flex;
}

.kromeka-app-navbar .nav-item .btn.nav-link {
    color: var(--navbar-text) !important;
}

.kromeka-app-navbar .nav-item .btn.nav-link:hover {
    color: var(--navbar-hover) !important;
}

/* Breadcrumbs */
.breadcrumb {
    background-color: transparent;
    padding: 0;
    margin-bottom: 1rem;
}

.breadcrumb-item a {
    color: var(--link-color);
}

.breadcrumb-item.active {
    color: var(--text-muted);
}

[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted);
}

/* Headings. --text-accent is brand red in light theme and yellow in dark theme. */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-accent);
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Cards — crisp bordered surfaces (Offers-style), not heavy elevation */
.card {
    background-color: var(--bg-card);
    border: 1px solid var(--kromeka-surface-border);
    border-radius: 0;
    box-shadow: var(--kromeka-surface-shadow);
    margin-bottom: var(--kromeka-section-gap);
    color: var(--text-main);
}

.card-header {
    background-color: var(--bg-card-header);
    color: var(--text-card-header);
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 0 !important;
    border-bottom: 2px solid var(--kromeka-yellow);
    padding: var(--kromeka-card-header-pad-y) var(--kromeka-card-header-pad-x);
}

/* Toolbar labels on dark/grey header and filter strips — not dependent on .text-muted */
.kromeka-toolbar-label,
.kromeka-data-table-card > .card-header .form-label,
.kromeka-data-table-card > .card-header label:not(.form-check-label):not(.btn):not(.visually-hidden),
.card-header .kromeka-table-toolbar .form-label,
.card-header .kromeka-table-toolbar label:not(.form-check-label):not(.btn):not(.visually-hidden),
.card-header .product-list-filter-form label:not(.btn),
.card-header #wo-filter-form .form-label,
.card-header .nc-filter-field .form-label,
.kromeka-filter-bar .form-label,
.kromeka-filter-bar label:not(.form-check-label):not(.btn):not(.visually-hidden) {
    color: var(--toolbar-label-text) !important;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.kromeka-data-table-card > .card-header .text-muted,
.card-header .kromeka-table-toolbar .text-muted {
    color: var(--toolbar-label-muted) !important;
}

.card-header .dropdown-menu .form-label,
.card-header .dropdown-menu label {
    color: var(--text-main) !important;
    font-weight: inherit;
    letter-spacing: normal;
}

/* Light theme: outline buttons on dark toolbar strips (card header, filter bar, table toolbar) */
:root:not([data-theme="dark"]) :is(
    .card-header,
    .data-card-header,
    .dashboard-card-header,
    .kromeka-filter-bar,
    .kromeka-table-toolbar,
    .cpq-cfg-subcategory-header,
    .cpq-table-group-header
) .btn-outline-secondary {
    background-color: var(--card-header-btn-bg);
    color: var(--card-header-btn-text);
    border-color: var(--card-header-btn-border);
}
:root:not([data-theme="dark"]) :is(
    .card-header,
    .data-card-header,
    .dashboard-card-header,
    .kromeka-filter-bar,
    .kromeka-table-toolbar,
    .cpq-cfg-subcategory-header,
    .cpq-table-group-header
) .btn-outline-secondary:hover,
:root:not([data-theme="dark"]) :is(
    .card-header,
    .data-card-header,
    .dashboard-card-header,
    .kromeka-filter-bar,
    .kromeka-table-toolbar,
    .cpq-cfg-subcategory-header,
    .cpq-table-group-header
) .btn-outline-secondary:focus {
    background-color: var(--card-header-btn-hover-bg);
    color: var(--card-header-btn-hover-text);
    border-color: var(--card-header-btn-hover-border);
}

/* Light theme safety net: Bootstrap .btn-outline-primary is blue on dark/grey header strips */
:root:not([data-theme="dark"]) :is(
    .card-header,
    .data-card-header,
    .dashboard-card-header,
    .kromeka-table-toolbar,
    .kromeka-filter-bar,
    .page-toolbar
) .btn-outline-primary {
    color: var(--kromeka-yellow) !important;
    border-color: var(--kromeka-yellow) !important;
    background-color: transparent !important;
}

:root:not([data-theme="dark"]) :is(
    .card-header,
    .data-card-header,
    .dashboard-card-header,
    .kromeka-table-toolbar,
    .kromeka-filter-bar,
    .page-toolbar
) .btn-outline-primary:hover,
:root:not([data-theme="dark"]) :is(
    .card-header,
    .data-card-header,
    .dashboard-card-header,
    .kromeka-table-toolbar,
    .kromeka-filter-bar,
    .page-toolbar
) .btn-outline-primary:focus,
:root:not([data-theme="dark"]) :is(
    .card-header,
    .data-card-header,
    .dashboard-card-header,
    .kromeka-table-toolbar,
    .kromeka-filter-bar,
    .page-toolbar
) .btn-outline-primary:focus-visible {
    color: var(--kromeka-dark) !important;
    background-color: var(--kromeka-yellow) !important;
    border-color: var(--kromeka-yellow) !important;
}

/* Dark/grey card headers: inline code and outline-danger must not use Bootstrap pink/red on dark */
:is(.card-header, .data-card-header, .dashboard-card-header) code {
    color: var(--kromeka-yellow);
    background-color: color-mix(in srgb, var(--kromeka-dark) 40%, transparent);
    padding: 0.1em 0.35em;
    border-radius: 0.2rem;
    font-size: 0.92em;
}

:root:not([data-theme="dark"]) :is(
    .card-header,
    .data-card-header,
    .dashboard-card-header
) .btn-outline-danger {
    color: var(--kromeka-yellow) !important;
    border-color: var(--kromeka-yellow) !important;
    background-color: transparent !important;
}

:root:not([data-theme="dark"]) :is(
    .card-header,
    .data-card-header,
    .dashboard-card-header
) .btn-outline-danger:hover,
:root:not([data-theme="dark"]) :is(
    .card-header,
    .data-card-header,
    .dashboard-card-header
) .btn-outline-danger:focus,
:root:not([data-theme="dark"]) :is(
    .card-header,
    .data-card-header,
    .dashboard-card-header
) .btn-outline-danger:focus-visible {
    color: var(--kromeka-dark) !important;
    background-color: var(--kromeka-yellow) !important;
    border-color: var(--kromeka-yellow) !important;
}

[data-theme="dark"] :is(.card-header, .data-card-header, .dashboard-card-header) .btn-outline-danger {
    color: var(--kromeka-yellow) !important;
    border-color: var(--kromeka-yellow) !important;
    background-color: transparent !important;
}

[data-theme="dark"] :is(.card-header, .data-card-header, .dashboard-card-header) .btn-outline-danger:hover,
[data-theme="dark"] :is(.card-header, .data-card-header, .dashboard-card-header) .btn-outline-danger:focus,
[data-theme="dark"] :is(.card-header, .data-card-header, .dashboard-card-header) .btn-outline-danger:focus-visible {
    color: var(--kromeka-dark) !important;
    background-color: var(--kromeka-yellow) !important;
    border-color: var(--kromeka-yellow) !important;
}

/* Column gear / other dropdowns: menu surface is light — do not use header label color on .text-muted */
:root:not([data-theme="dark"]) .card-header .dropdown-menu .text-muted,
:root:not([data-theme="dark"]) .workload-column-settings-menu .text-muted {
    color: var(--text-main) !important;
}

/* Dark card header surface (all themes): Bootstrap .text-body / .text-dark stay dark by default;
   links use Bootstrap blue in light theme — remap to header tokens. */
.card-header .text-body,
.card-header .text-dark {
    color: var(--text-card-header) !important;
}

/* Count badges on dark headers: do not inherit header white text onto .bg-light. */
.card-header .badge.bg-light,
.data-card-header .badge.bg-light,
.dashboard-card-header .badge.bg-light {
    background-color: var(--kromeka-light-grey) !important;
    color: var(--kromeka-dark) !important;
}

[data-theme="dark"] .card-header .badge.bg-light,
[data-theme="dark"] .data-card-header .badge.bg-light,
[data-theme="dark"] .dashboard-card-header .badge.bg-light {
    background-color: var(--hover-bg) !important;
    color: var(--text-main) !important;
}

.card-header .text-primary {
    color: var(--kromeka-yellow) !important;
}

.card-header a:not(.btn):not(.dropdown-item) {
    color: var(--kromeka-yellow) !important;
}

.card-header a:not(.btn):not(.dropdown-item):hover,
.card-header a:not(.btn):not(.dropdown-item):focus-visible {
    color: #ffffff !important;
}

/* Dark/grey header surfaces — force readable text; do not inherit body/link defaults */
.card-header,
.data-card-header,
.dashboard-card-header,
.kromeka-filter-bar,
.kromeka-table-toolbar {
    color: var(--toolbar-label-text);
}

.card-header :is(h1, h2, h3, h4, h5, h6, label, .form-label, .card-title, .data-card-title),
.data-card-header :is(h1, h2, h3, h4, h5, h6, label, .form-label, .data-card-title),
.dashboard-card-header :is(.dashboard-card-title, a.dashboard-card-title),
.kromeka-filter-bar :is(label, .form-label, .small:not(.text-bg-secondary):not(.badge)),
.kromeka-table-toolbar :is(label, .form-label, .small:not(.text-bg-secondary):not(.badge)) {
    color: var(--toolbar-label-text) !important;
}

.card-header .text-reset,
.data-card-header .text-reset,
.dashboard-card-header .text-reset {
    color: var(--text-card-header) !important;
}

.card-header .text-body,
.card-header .text-dark,
.data-card-header .text-body,
.data-card-header .text-dark,
.dashboard-card-header .text-body,
.dashboard-card-header .text-dark {
    color: var(--text-card-header) !important;
}

.card-header .text-muted,
.data-card-header .text-muted:not(.dropdown-menu .text-muted) {
    color: var(--toolbar-label-muted) !important;
}

/* Standalone permission page shown inside an iframe. */
.embedded-denied {
    margin: 0;
    min-height: 100vh;
    padding: 1.5rem;
    background: var(--bg-body);
    color: var(--text-main);
}

.embedded-denied__card {
    max-width: 36rem;
    margin: 0 auto;
    padding: 1.5rem;
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: var(--kromeka-surface-shadow);
}

.embedded-denied__title {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    color: var(--text-accent);
}

.user-settings-col-name { min-width: 220px; }
.user-settings-col-title { min-width: 280px; }
.user-settings-col-reorder { width: 110px; }

/* css/components/004-dropdowns-that-open-from-dark-toolbars-headers-u.css */
/* ------------------------------------------------------------
   Dropdowns that open from dark toolbars/headers use a light menu
   surface. Header label tokens (#f0f0f0) must NOT cascade into them.
   ------------------------------------------------------------ */
.card-header .dropdown-menu,
.data-card-header .dropdown-menu,
.dashboard-card-header .dropdown-menu,
.kromeka-filter-bar .dropdown-menu,
.kromeka-table-toolbar .dropdown-menu,
.workload-column-settings-menu {
    color: var(--text-main);
    background-color: var(--bg-card, #ffffff);
}

.card-header .dropdown-menu :is(
    label,
    .form-label,
    .form-check-label,
    .small,
    span,
    p,
    div,
    a:not(.btn),
    button:not(.btn):not(.btn-close)
),
.data-card-header .dropdown-menu :is(
    label,
    .form-label,
    .form-check-label,
    .small,
    span,
    p,
    div,
    a:not(.btn),
    button:not(.btn):not(.btn-close)
),
.dashboard-card-header .dropdown-menu :is(
    label,
    .form-label,
    .form-check-label,
    .small,
    span,
    p,
    div
),
.kromeka-filter-bar .dropdown-menu :is(
    label,
    .form-label,
    .form-check-label,
    .small,
    span,
    p,
    div
),
.kromeka-table-toolbar .dropdown-menu :is(
    label,
    .form-label,
    .form-check-label,
    .small,
    span,
    p,
    div
),
.workload-column-settings-menu :is(
    label,
    .form-label,
    .form-check-label,
    .small,
    span,
    p,
    div
) {
    color: var(--text-main) !important;
}

.card-header .dropdown-menu .text-muted,
.data-card-header .dropdown-menu .text-muted,
.dashboard-card-header .dropdown-menu .text-muted,
.kromeka-filter-bar .dropdown-menu .text-muted,
.kromeka-table-toolbar .dropdown-menu .text-muted,
.workload-column-settings-menu .text-muted {
    color: var(--text-muted) !important;
}

/* Light theme: muted menu hints need stronger contrast than toolbar-muted greys */
:root:not([data-theme="dark"]) .card-header .dropdown-menu .text-muted,
:root:not([data-theme="dark"]) .data-card-header .dropdown-menu .text-muted,
:root:not([data-theme="dark"]) .dashboard-card-header .dropdown-menu .text-muted,
:root:not([data-theme="dark"]) .kromeka-filter-bar .dropdown-menu .text-muted,
:root:not([data-theme="dark"]) .kromeka-table-toolbar .dropdown-menu .text-muted,
:root:not([data-theme="dark"]) .workload-column-settings-menu .text-muted {
    color: var(--kromeka-dark-grey) !important;
}

.card-header .dropdown-menu .btn-link,
.workload-column-settings-menu .btn-link,
.card-header .dropdown-menu .kromeka-freeze-toggle,
.workload-column-settings-menu .kromeka-freeze-toggle {
    color: var(--text-muted) !important;
}

.card-header .dropdown-menu .btn-link:hover,
.workload-column-settings-menu .btn-link:hover,
.card-header .dropdown-menu .kromeka-freeze-toggle:hover,
.workload-column-settings-menu .kromeka-freeze-toggle:hover {
    color: var(--kromeka-dark) !important;
}

.card-header .dropdown-menu .bi-pin-fill.text-primary,
.workload-column-settings-menu .bi-pin-fill.text-primary {
    color: var(--text-accent) !important;
}

/* Reusable opt-in for custom dark strips */
.kromeka-on-dark,
.kromeka-on-dark a:not(.btn):not(.dropdown-item),
.kromeka-on-dark label,
.kromeka-on-dark .form-label {
    color: var(--toolbar-label-text) !important;
}

.kromeka-on-dark .text-muted {
    color: var(--toolbar-label-muted) !important;
}

/* Notebook card headers use the normal card surface, not the dark Kromeka strip */
.notebook-sidebar .card-header .text-body,
.notebook-sidebar .card-header .text-dark,
.notebook-main .card-header.notebook-editor-header .text-body,
.notebook-main .card-header.notebook-editor-header .text-dark {
    color: var(--text-main) !important;
}

.notebook-sidebar .card-header a:not(.btn):not(.dropdown-item),
.notebook-main .card-header.notebook-editor-header a:not(.btn):not(.dropdown-item) {
    color: var(--link-color) !important;
}

.notebook-sidebar .card-header a:not(.btn):not(.dropdown-item):hover,
.notebook-sidebar .card-header a:not(.btn):not(.dropdown-item):focus-visible,
.notebook-main .card-header.notebook-editor-header a:not(.btn):not(.dropdown-item):hover,
.notebook-main .card-header.notebook-editor-header a:not(.btn):not(.dropdown-item):focus-visible {
    color: var(--link-hover-color) !important;
}

.card-body {
    color: var(--text-main);
}

.list-group-item {
    background-color: var(--bg-card); /* Match card bg */
    color: var(--text-main);
    border-color: var(--border-color);
    border-left: 4px solid transparent;
    margin-bottom: 5px;
}

.list-group-item:hover, .list-group-item-action:hover {
    background-color: var(--hover-bg);
    color: var(--text-main);
}

.list-group-item-action {
    color: var(--text-main);
}

/* Status Badges - Pill Shaped */
.status-badge {
    padding: 6px 12px;
    border-radius: 50rem; /* Pill shape */
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    color: white; /* Default text color */
}

.status-badge-sm {
    font-size: 0.75em;
}

.cursor-pointer {
    cursor: pointer;
}

/* Project Phase Status Badges */
.status-planning, .status-design {
    background-color: var(--kromeka-status-neutral);
    color: white;
}

.status-engineering {
    background-color: var(--kromeka-status-info);
    color: white;
}

.status-manufacturing {
    background-color: var(--kromeka-status-progress);
    color: var(--kromeka-status-progress-text);
}

/* Product / machine lifecycle: testing (readable badge; not color-only meaning) */
.status-testing {
    background-color: var(--kromeka-status-testing);
    color: white;
}

.status-installation {
    background-color: var(--kromeka-status-installation);
    color: white;
}

.status-startup {
    background-color: var(--kromeka-status-startup);
    color: white;
}

.status-revisions {
    background-color: var(--kromeka-status-revision-bg);
    color: var(--kromeka-status-revision-text);
    border: 1px solid var(--kromeka-status-revision-border);
}

.status-finish, .status-completed, .status-delivered {
    background-color: var(--kromeka-success);
    color: white;
}

.status-on_hold, .status-maintenance {
    background-color: var(--kromeka-status-danger);
    color: white;
}

/* Legacy: map in_progress to manufacturing color for any cached pages */
.status-in_progress {
    background-color: var(--kromeka-status-progress);
    color: var(--kromeka-status-progress-text);
}

/* Shipment statuses */
.status-draft {
    background-color: var(--kromeka-status-neutral);
    color: white;
}
.status-packing {
    background-color: var(--kromeka-status-progress);
    color: var(--kromeka-status-progress-text);
}
.status-ready {
    background-color: var(--kromeka-status-info);
    color: white;
}
.status-shipped {
    background-color: var(--kromeka-status-shipped);
    color: white;
}

/* Offer request statuses: draft (neutral, above), sent, accepted, rejected, cancelled.
   Offer version statuses: draft, issued, accepted, archived.
   Without these, .status-badge white text rendered on no background. */
.status-sent,
.status-issued {
    background-color: var(--kromeka-status-info);
    color: white;
}

.status-accepted {
    background-color: var(--kromeka-success);
    color: white;
}

.status-rejected {
    background-color: var(--kromeka-status-danger);
    color: white;
}

.status-cancelled,
.status-archived,
.status-inactive {
    background-color: var(--kromeka-status-muted);
    color: white;
}

.status-active {
    background-color: var(--kromeka-success);
    color: white;
}

/* Shipment scanner: scanned item row */
.scan-item-row.item-scanned {
    background-color: rgba(25, 135, 84, 0.08);
}
[data-theme="dark"] .scan-item-row.item-scanned {
    background-color: rgba(25, 135, 84, 0.15);
}

/* Scan feedback alert animation */
.scan-feedback-alert {
    transition: opacity 0.3s ease;
}

/* Project number badge — always brand red with white text, including hover and dark theme. */
.badge-project-id,
.list-group-item-action .badge-project-id,
.list-group-item-action:hover .badge-project-id,
.list-group-item-action:focus .badge-project-id,
.list-group-item-action:focus-visible .badge-project-id,
[data-theme="dark"] .list-group-item-action .badge-project-id,
[data-theme="dark"] .list-group-item-action:hover .badge-project-id,
[data-theme="dark"] .list-group-item-action:focus .badge-project-id,
[data-theme="dark"] .list-group-item-action:focus-visible .badge-project-id,
.clickable-row .badge-project-id,
.clickable-row:hover .badge-project-id,
[data-theme="dark"] .clickable-row .badge-project-id,
[data-theme="dark"] .clickable-row:hover .badge-project-id {
    background-color: var(--kromeka-red) !important;
    color: #fff !important;
}

/* CPQ offer version item row: compact Configure (open-accent) icon */
.cpq-offer-item-configure-btn {
    padding: 0.25rem 0.45rem;
    line-height: 1;
}

/* Allowed components — always include / default toggles */
.cpq-allowed-col-flag {
    width: 2.25rem;
    vertical-align: middle;
}

.cpq-allowed-flag-btn {
    color: var(--text-muted);
    line-height: 1;
    text-decoration: none;
}

.cpq-allowed-flag-btn:hover,
.cpq-allowed-flag-btn:focus-visible {
    color: var(--kromeka-yellow);
}

.cpq-allowed-flag-btn.is-active {
    color: var(--kromeka-yellow);
}

.cpq-allowed-default-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid var(--kromeka-grey);
    border-radius: 0.2rem;
    color: var(--text-muted);
    line-height: 1;
}

.cpq-allowed-default-btn.is-active .cpq-allowed-default-mark,
.cpq-allowed-default-mark.is-active {
    border-color: var(--kromeka-yellow);
    color: var(--kromeka-dark);
    background: var(--kromeka-yellow);
}

[data-theme="dark"] .cpq-allowed-default-btn.is-active .cpq-allowed-default-mark,
[data-theme="dark"] .cpq-allowed-default-mark.is-active {
    color: var(--kromeka-dark);
}

.cpq-allowed-item-name {
    cursor: help;
    border-bottom: 1px dotted var(--kromeka-grey);
}

/* Full-page offer item configure (extends base layout) */
.cpq-offer-configure-page__card .card-body {
    padding: 1.25rem 1.5rem;
}

.cpq-offer-configure-page .cpq-offer-configure-identity {
    background: var(--bg-card, transparent);
}

.cpq-offer-configure-form .form-control,
.cpq-offer-configure-form .form-select {
    max-width: 100%;
}

.cpq-offer-configure-form .cpq-offer-configure-identity-text {
    min-height: 6rem;
}

.cpq-offer-configure-summary .cpq-offer-configure-overridden-label {
    display: inline-block;
    margin-top: 0.25rem;
}

.cpq-offer-configure-summary .cpq-offer-configure-margin-actions {
    margin-top: 0.25rem;
}

.cpq-offer-configure-summary .cpq-offer-configure-calc-btn {
    width: 100%;
    min-height: 44px;
}

.cpq-offer-configure-summary #configure-margin-hint {
    color: var(--text-muted);
}

.cpq-offer-configure-form .card-header {
    border-bottom: 3px solid var(--kromeka-yellow);
}

.cpq-offer-configure-form .cpq-configure-invalid-panel {
    border-color: var(--kromeka-red) !important;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--kromeka-red) 20%, transparent);
}

.cpq-offer-configure-form .invalid-feedback {
    white-space: normal;
    overflow-wrap: anywhere;
}

.cpq-offer-configure-form .cpq-offer-configure-source-badge {
    background: var(--kromeka-dark-grey);
    color: var(--text-card-header, #fff);
    font-weight: 500;
}

.cpq-offer-configure-qty-input {
    width: 7rem;
    max-width: 100%;
}

.cpq-offer-configure-preview-table {
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
}

.cpq-offer-configure-preview-table th {
    white-space: nowrap;
    vertical-align: bottom;
}

.cpq-offer-configure-preview-table td {
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.cpq-offer-configure-preview-table .cpq-preview-component-col {
    width: 16rem;
    min-width: 16rem;
}

.cpq-offer-configure-preview-table .cpq-preview-source-col {
    width: 7rem;
    min-width: 7rem;
}

.cpq-offer-configure-preview-table .cpq-preview-qty-col {
    width: 9rem;
    min-width: 9rem;
}

.cpq-offer-configure-preview-table .cpq-preview-price-source-col {
    width: 12rem;
    min-width: 12rem;
}

.cpq-offer-configure-preview-table .cpq-preview-unit-price-col {
    width: 11rem;
    min-width: 11rem;
}

.cpq-offer-configure-preview-table .cpq-preview-total-col {
    width: 8rem;
    min-width: 8rem;
    white-space: nowrap;
}

.cpq-offer-configure-preview-table .cpq-preview-actions-col {
    width: 3.5rem;
    min-width: 3.5rem;
}

.cpq-offer-configure-selected > summary,
.cpq-offer-configure-allowed > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.cpq-offer-configure-selected > summary::after,
.cpq-offer-configure-allowed > summary::after {
    content: "Show";
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.cpq-offer-configure-selected[open] > summary::after,
.cpq-offer-configure-allowed[open] > summary::after {
    content: "Hide";
}

.cpq-offer-configure-preview-status {
    border-left: 0.25rem solid var(--kromeka-yellow);
}

.cpq-offer-configure-qty-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.cpq-offer-configure-qty-cell:not(.is-overridden) .cpq-offer-configure-qty-reason {
    display: none;
}

.cpq-offer-configure-price-cell:not([data-price-source="manual_override"]) .cpq-offer-configure-override-note,
.cpq-offer-configure-price-cell:not([data-price-source="supplier_quote"]) .cpq-offer-configure-quote-ref {
    display: none;
}

#configure-modal-header-actions {
    flex-shrink: 0;
}

#configure-modal-header-actions .btn-close {
    margin: 0;
    padding: 0.4rem;
}

.cpq-offer-configure-page .btn-close[data-configure-leave] {
    display: block;
}

.cpq-offer-configure-price-source-select {
    width: 100%;
    max-width: none;
}

.cpq-offer-configure-price-cell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 9.5rem;
}

.cpq-offer-configure-price-cell .cpq-offer-configure-override-note,
.cpq-offer-configure-price-cell .cpq-offer-configure-quote-ref {
    display: none;
}

.cpq-offer-configure-price-cell[data-price-source="manual_override"] .cpq-offer-configure-override-note,
.cpq-offer-configure-price-cell[data-price-source="supplier_quote"] .cpq-offer-configure-quote-ref {
    display: block;
}

.cpq-offer-configure-unit-price-input {
    min-width: 0;
}

.cpq-offer-configure-unit-price-group {
    width: 10rem;
    margin-left: auto;
}

.cpq-offer-configure-unit-price-group .input-group-text {
    min-width: 3rem;
    justify-content: center;
}

.cpq-offer-configure-loading {
    color: var(--text-muted);
}

.cpq-offer-configure-add-select {
    min-width: 200px;
}

.cpq-offer-configure-add-qty {
    max-width: 80px;
}

#configure-modal-body .cpq-offer-configure-form {
    padding-top: 0.25rem;
}

/* CPQ offer version Cost Summary: commission % — 8ch wide, single-line row height */
.cpq-offer-version-financial-summary input.form-control-sm.cpq-offer-version-commission-pct-input {
    width: 8ch;
    max-width: 8ch;
    flex-shrink: 0;
    min-height: 0;
    height: 1.875rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    line-height: 1.25;
}

.cpq-offer-version-financial-summary .cpq-commission-pct-row {
    min-height: 0;
}

/*
 * Price Summary — Discount row: Bootstrap .form-select / .form-control default to width:100%;
 * in a flex row that forces wrap. Use fixed ch widths + nowrap so one line matches other rows.
 */
.cpq-offer-version-price-summary select.form-select-sm.cpq-offer-version-discount-type-select {
    width: 10ch !important;
    max-width: 10ch !important;
    min-width: 0 !important;
    flex: 0 0 10ch !important;
    box-sizing: border-box;
    min-height: 0;
    height: 1.875rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    padding-left: 0.2rem;
    padding-right: 1rem;
    line-height: 1.25;
    font-size: 0.8125rem;
    background-position: right 0.12rem center;
    background-size: 0.5rem 0.35rem;
}

.cpq-offer-version-price-summary input.form-control-sm.cpq-offer-version-discount-value-input {
    width: 11ch !important;
    max-width: 11ch !important;
    min-width: 0 !important;
    flex: 0 0 auto;
    box-sizing: border-box;
    min-height: 0;
    height: 1.875rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    line-height: 1.25;
}

.cpq-offer-version-price-summary .cpq-discount-row {
    min-height: 0;
    white-space: nowrap;
    flex-wrap: nowrap !important;
    min-width: 0;
}

/* Discount row: flat flex — no flex-grow on a meta wrapper so the amount stays on one line */
.cpq-offer-version-price-summary .cpq-discount-row > .form-select,
.cpq-offer-version-price-summary .cpq-discount-row > .form-control,
.cpq-offer-version-price-summary .cpq-discount-row > span {
    flex: 0 0 auto;
}

/* Narrow discount type select (~10ch); must follow the rule above so flex-basis wins over `flex: 0 0 auto`. */
.cpq-offer-version-price-summary .cpq-discount-row > select.cpq-offer-version-discount-type-select {
    flex: 0 0 10ch !important;
    width: 10ch !important;
    max-width: 10ch !important;
}

.cpq-offer-version-price-summary td.cpq-discount-cell {
    white-space: nowrap;
}

/*
 * Calculations tab — supervision scope select (Domestic / Abroad); wide enough to read the label.
 */
.cpq-calculations-table select.form-select-sm.cpq-supervision-calc-scope-select {
    width: auto !important;
    min-width: 9.5rem !important;
    max-width: none !important;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

.cpq-calculations-table tr.cpq-calc-readonly-row td {
    background-color: var(--bg-secondary);
}

.cpq-calculations-table tr.cpq-calc-section-row td {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom: none;
    padding-top: 0.65rem;
}

/*
 * CPQ product definition — Overhead Conveyor component bindings (category → default item).
 * Same issue as discount row: .form-select is width:100%, so each select fills the flex line and stacks.
 */
td.overhead-bind-cell {
    min-width: 0;
}

.overhead-bind-cell .overhead-bind-row {
    flex-wrap: nowrap !important;
    min-width: 0;
}

.overhead-bind-cell .overhead-bind-cat {
    width: auto !important;
    flex: 1 1 0;
    min-width: min(11rem, 35vw);
}

.overhead-bind-cell .overhead-bind-comp {
    width: auto !important;
    flex: 1 1 0;
    min-width: min(14rem, 50vw);
}

.overhead-bind-cell .overhead-bind-arrow {
    flex-shrink: 0;
}

/* Price Summary — whole-currency inputs: digits right-aligned (matches amount column) */
.cpq-offer-version-price-summary input.cpq-offer-version-shipment-price-input,
.cpq-offer-version-price-summary input.cpq-offer-version-supervision-price-input {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

/* CPQ offer version — payment add form: Bootstrap bg-body-secondary ignores app data-theme and reads as a light strip on dark pages. */
.cpq-inset-panel {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--bs-border-radius, 0.375rem);
}

.cpq-inset-panel > h2.h6 {
    color: var(--text-main);
}

/*
 * Native <input type="file">: the "Browse" control is painted by the UA and stays light unless
 * ::file-selector-button / ::-webkit-file-upload-button are themed (CPQ definition docs upload, etc.).
 */
[data-theme="dark"] input[type="file"].form-control {
    color: var(--input-text);
    background-color: var(--input-bg);
    border-color: var(--input-border);
}

[data-theme="dark"] input[type="file"].form-control::file-selector-button {
    background-color: var(--kromeka-dark-grey);
    color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--bs-border-radius, 0.375rem);
    padding: 0.375rem 0.75rem;
    margin-inline-end: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

[data-theme="dark"] input[type="file"].form-control::file-selector-button:hover {
    background-color: var(--hover-bg);
    color: var(--text-main);
}

[data-theme="dark"] input[type="file"].form-control::-webkit-file-upload-button {
    background-color: var(--kromeka-dark-grey);
    color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--bs-border-radius, 0.375rem);
    padding: 0.375rem 0.75rem;
    margin-inline-end: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

[data-theme="dark"] input[type="file"].form-control::-webkit-file-upload-button:hover {
    background-color: var(--hover-bg);
    color: var(--text-main);
}

/* CPQ offer version — commercial terms: section titles + legal/help lines follow theme tokens (BS .text-body / .text-muted can stay dark when data-theme is used without data-bs-theme). */
.cpq-commercial-terms-block h3.h6 {
    color: var(--text-main) !important;
}

.cpq-commercial-terms-hint {
    color: var(--text-muted) !important;
}

/* CPQ offer version — Commercial terms: compact numeric fields (avoid full-width .form-control). */
.cpq-commercial-terms-form input.cpq-commercial-terms-num,
#cpq-offer-version-commercial-terms-form input.cpq-commercial-terms-num {
    width: 6ch !important;
    max-width: 6rem;
    min-width: 4.25rem;
    flex: 0 0 auto !important;
    display: inline-block;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.cpq-commercial-terms-form input.cpq-commercial-terms-delivery,
#cpq-offer-version-commercial-terms-form input.cpq-commercial-terms-delivery {
    width: 12ch !important;
    max-width: 12rem;
    min-width: 6.5rem;
    flex: 0 0 auto !important;
    display: inline-block;
    text-align: center;
}

.cpq-commercial-terms-card-body {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.cpq-commercial-terms-row {
    min-height: 1.75rem;
}

/* Work order list — Multiple Edit: tooltips target a wrapper (native <select title> is unreliable in Chromium). */
.wo-bulk-tooltip-anchor {
    min-width: 0;
}

.tooltip.wo-bulk-edit-tooltip {
    --bs-tooltip-bg: var(--bg-card, #2c2c2a);
    --bs-tooltip-color: var(--text-main, #e0e0e0);
}

.tooltip.wo-bulk-edit-tooltip .tooltip-inner {
    text-align: left;
    max-width: min(22rem, 90vw);
}

.cpq-payment-add-form .cpq-payment-add-thead th {
    background-color: var(--bg-card-header) !important;
    color: var(--text-card-header) !important;
    border-color: var(--border-color) !important;
}

.cpq-payment-add-form .cpq-payment-add-thead .text-muted {
    color: var(--text-muted) !important;
}

/* CPQ Cost / Price summary tables: secondary text left of the amount, numbers flush right */
.cpq-financial-amount-cell .cpq-financial-amount-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
}

.cpq-financial-amount-row .cpq-financial-amount-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
}

.cpq-financial-amount-row .cpq-financial-amount-num {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cpq-financial-amount-row .cpq-financial-amount-action {
    flex: 0 0 auto;
    margin-right: auto;
}

/* Consistent width for side-by-side action buttons */
.table-action-btn {
    min-width: 5.5rem;
}

/* Offer version Qty column: align Save buttons by giving unit label fixed width */
.offer-item-qty-form .offer-item-qty-unit {
    min-width: 2.5em;
    display: inline-block;
}

/* CPQ offer version Price List: hide number input spinners (qty / unit prices) */
input[type="number"].cpq-no-spinner::-webkit-outer-spin-button,
input[type="number"].cpq-no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"].cpq-no-spinner {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Price list inline inputs: unit cost / list price — currency plus grouped digits (€1,234,567) */
.cpq-offer-price-list-table input.form-control-sm.cpq-no-spinner.cpq-offer-version-unit-amount-input {
    width: 11ch;
    max-width: 11ch;
    flex-shrink: 0;
}

/* Qty — ~7 digits */
.cpq-offer-price-list-table input.form-control-sm.cpq-no-spinner.cpq-offer-version-qty-input {
    width: 7ch;
    max-width: 7ch;
    flex-shrink: 0;
}

footer {
    border-top: 1px solid var(--footer-border);
    color: var(--text-muted) !important;
}

/* Bootstrap Utility Overrides */
.text-muted {
    color: var(--text-muted) !important;
}

.text-dark {
    color: var(--text-main) !important;
}

.text-secondary {
    color: var(--text-muted) !important;
}

.bg-light {
    background-color: var(--hover-bg) !important;
    color: var(--text-main) !important;
}

.bg-white {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
}

/* Forms & Inputs */
.form-control, .form-select, textarea {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border);
    transition: all 0.2s ease;
}

/* Shared height for single-line controls so mixed rows align cleanly. */
input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
select.form-control:not(.form-control-sm):not(.form-select-sm),
select.form-select:not(.form-control-sm):not(.form-select-sm) {
    height: var(--kromeka-control-height);
    min-height: var(--kromeka-control-height);
    padding-top: var(--kromeka-control-padding-y);
    padding-bottom: var(--kromeka-control-padding-y);
    padding-left: var(--kromeka-control-padding-x);
    box-sizing: border-box;
}

.form-control:focus, .form-select:focus {
    background-color: var(--input-focus-bg) !important;
    color: var(--input-focus-text) !important;
    border-color: var(--kromeka-yellow);
    box-shadow: 0 0 0 0.25rem rgba(245, 181, 31, 0.25);
}

.input-group-text {
    background-color: var(--input-bg);
    color: var(--input-text);
    border-color: var(--input-border);
    height: var(--kromeka-control-height);
    min-height: var(--kromeka-control-height);
    box-sizing: border-box;
}

.card details > summary {
    color: var(--text-main);
}

/* Select/Dropdown Styling - Match .form-control height for clean row alignment.
   Keep the custom chevron and hover/focus brand cues without extra vertical bulk. */
.form-select {
    cursor: pointer;
    background-color: var(--input-bg) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    /* Same vertical metrics as Bootstrap .form-control (shared --kromeka-control-* tokens). */
    padding: var(--kromeka-control-padding-y) 2.25rem var(--kromeka-control-padding-y) var(--kromeka-control-padding-x);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid var(--input-border);
    border-radius: 0.375rem;
    font-weight: 500;
    position: relative;
    min-height: var(--kromeka-control-height);
    height: var(--kromeka-control-height);
    color: var(--input-text) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    display: block;
    width: 100%;
    box-shadow: none;
    box-sizing: border-box;
}

/* Make it look like an interactive input field with clear visual feedback */
.form-select:hover {
    border-color: var(--kromeka-yellow);
    background-color: var(--hover-bg) !important;
    box-shadow: 0 0 0 0.15rem rgba(245, 181, 31, 0.2);
    border-width: 1px;
}

.form-select:focus {
    border-color: var(--kromeka-yellow);
    background-color: var(--input-focus-bg) !important;
    box-shadow: 0 0 0 0.25rem rgba(245, 181, 31, 0.25);
    outline: none;
    border-width: 1px;
}

.form-select:active {
    border-color: var(--kromeka-red);
    box-shadow: none;
}

/* Dark mode specific styling */
[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e0e0e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    border: 1px solid var(--input-border);
    background-color: var(--input-bg) !important;
    box-shadow: none;
}

[data-theme="dark"] .form-select:hover {
    border-color: var(--kromeka-yellow);
    background-color: var(--hover-bg) !important;
    box-shadow: 0 0 0 0.15rem rgba(245, 181, 31, 0.25);
}

[data-theme="dark"] .form-select:focus {
    background-color: var(--input-focus-bg) !important;
    box-shadow: 0 0 0 0.25rem rgba(245, 181, 31, 0.25);
}

/* Ensure the dropdown arrow area is clickable and styled */
.form-select option {
    background-color: var(--bg-card);
    color: var(--text-main);
    padding: 0.5rem;
}

/* Add a visual indicator on the right side */
.form-select::before {
    content: '';
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
    opacity: 0.6;
}

.form-label {
    color: var(--text-main);
    font-weight: 500;
}

/* css/components/005-shared-inline-formsets.css */
/* ------------------------------------------------------------
 * Shared inline formsets
 * Purpose: Keep repeatable form rows aligned without page-level
 * margin nudges. Used by contact channels, task dependencies, and
 * CPQ inline parameter/special-form bands.
 * ------------------------------------------------------------ */
.kromeka-formset-row {
    padding: 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background-color: var(--bg-card);
}

.kromeka-formset-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: end;
}

.kromeka-formset-field {
    min-width: 0;
}

.kromeka-formset-field .form-label,
.kromeka-inline-form-label {
    display: block;
    margin-bottom: 0.35rem;
}

.kromeka-contact-phone-kind {
    grid-column: span 2;
}

.kromeka-contact-phone-number {
    grid-column: span 6;
}

.contact-phone-has-extension .kromeka-contact-phone-number {
    grid-column: span 4;
}

.kromeka-contact-phone-extension,
.kromeka-inline-boolean,
.kromeka-formset-action {
    grid-column: span 2;
}

.kromeka-contact-email-address {
    grid-column: span 5;
}

.kromeka-contact-email-kind {
    grid-column: span 3;
}

.kromeka-dependency-task {
    grid-column: span 5;
}

.kromeka-dependency-link {
    grid-column: span 3;
}

.kromeka-dependency-lag,
.kromeka-dependency-grid .kromeka-formset-action {
    grid-column: span 2;
}

.kromeka-inline-boolean,
.kromeka-formset-action,
.kromeka-formset-control-band {
    display: flex;
    align-items: center;
    min-height: var(--kromeka-control-height);
}

.kromeka-inline-boolean .form-check,
.kromeka-formset-control-band .form-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--kromeka-control-height);
    margin: 0;
    padding-left: 0;
}

.kromeka-inline-boolean .form-check-input,
.kromeka-formset-control-band .form-check-input,
.kromeka-inline-boolean-stack .form-check-input {
    float: none;
    flex: 0 0 auto;
    margin: 0;
}

.kromeka-inline-boolean-stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.5rem;
}

.kromeka-inline-boolean-stack .form-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--kromeka-control-height);
    margin: 0;
    padding-left: 0;
}

.kromeka-formset-action {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem;
}

.kromeka-formset-delete-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: var(--kromeka-control-height);
    margin: 0;
    white-space: nowrap;
}

.kromeka-formset-delete-input:checked + .kromeka-formset-delete-button {
    color: #fff;
    background-color: var(--kromeka-red);
    border-color: var(--kromeka-red);
}

.kromeka-formset-row-pending-delete {
    border-color: var(--kromeka-red);
    background-color: rgba(175, 22, 30, 0.08);
}

.kromeka-formset-row-pending-delete .kromeka-formset-grid > :not(.kromeka-formset-action),
.kromeka-formset-row-pending-delete .wo-tpl-block-body {
    opacity: 0.5;
    pointer-events: none;
}

.kromeka-formset-delete-status {
    flex-basis: 100%;
    color: var(--text-danger);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: right;
}

.kromeka-formset-delete-status:empty {
    display: none;
}

.kromeka-formset-errors {
    margin-top: 0.65rem;
    color: var(--text-danger);
    font-size: 0.875rem;
}

.kromeka-formset-errors .errorlist {
    margin-bottom: 0.25rem;
}

.kromeka-formset-number-compact {
    width: 100%;
    max-width: 7rem;
}

.kromeka-actualized-cost-title {
    grid-column: span 7;
}

.kromeka-actualized-cost-amount {
    grid-column: span 3;
}

.kromeka-actualized-cost-grid .kromeka-formset-action {
    grid-column: span 2;
}

.kromeka-actualized-cost-total {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 1rem;
}

@media (max-width: 767.98px) {
    .kromeka-formset-row {
        padding: 0.75rem;
    }

    .kromeka-formset-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kromeka-formset-field {
        grid-column: 1 / -1 !important;
    }

    .kromeka-inline-boolean,
    .kromeka-formset-action {
        grid-column: span 1;
    }

    .kromeka-dependency-grid .kromeka-formset-action {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .kromeka-formset-action {
        justify-content: flex-start;
    }

    .kromeka-formset-delete-status {
        text-align: left;
    }

    .kromeka-formset-action .btn.kromeka-formset-delete-button {
        height: 44px;
        min-height: 44px;
    }
}

/* Form helper/hint text - theme-aware so readable in dark mode */
.form-text {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .form-text {
    color: var(--text-muted) !important;
}

/* Placeholder Styling */
::placeholder {
    color: var(--input-placeholder) !important;
    opacity: 1;
}

:-ms-input-placeholder {
    color: var(--input-placeholder) !important;
}

::-ms-input-placeholder {
    color: var(--input-placeholder) !important;
}

/* Dark Mode Specific Component Overrides */
[data-theme="dark"] .table {
    color: var(--text-main);
    border-color: var(--border-color);
}

/*
 * Dark body cells stay transparent so zebra/hover tokens show through.
 * Limit this to tbody/tfoot — thead must keep the shared opaque header
 * contract. Production Planning backlog heatmap stays excluded because
 * its sticky day cells need their own opaque freeze paint.
 */
[data-theme="dark"] .table:not(.pp-backlog-table) > tbody > * > *,
[data-theme="dark"] .table:not(.pp-backlog-table) > tfoot > * > * {
    background-color: transparent;
    color: var(--text-main);
    border-bottom-color: var(--border-color);
}

/* Restore faint zebra striping in dark theme (global transparent cell rule above hides it). */
[data-theme="dark"] .table.table-striped:not(.pp-backlog-table) > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--table-striped-bg);
}

[data-theme="dark"] .table.table-striped:not(.pp-backlog-table) > tbody > tr:nth-of-type(even) > * {
    background-color: transparent;
}

[data-theme="dark"] .table-light {
    background-color: var(--bg-card-header);
    color: var(--text-main);
    border-color: var(--border-color);
}

[data-theme="dark"] .table-light th,
[data-theme="dark"] .table-light td {
    background-color: var(--bg-card-header);
    color: var(--text-main);
    border-color: var(--border-color);
}

.table thead th {
    color: var(--table-header-text);
}

.table .sortable-th .sortable-link,
.table .sortable-link {
    color: var(--table-sort-link) !important;
    font-weight: 600;
}

.table .sortable-th .sortable-link:hover,
.table .sortable-link:hover {
    color: var(--table-sort-link-hover) !important;
    text-decoration: underline !important;
}

.table .sortable-th .sortable-link:focus,
.table .sortable-link:focus {
    outline: 1px dotted var(--kromeka-yellow);
    outline-offset: 2px;
}

.table .sortable-th .bi-arrow-up,
.table .sortable-th .bi-arrow-down {
    color: var(--table-sort-icon);
}

/* Workload kromeka table: constrain width so .table-responsive gains real overflow-x
   (otherwise the wrapper grows with the table, sw===cw, and the sticky bar never syncs). */
.workload-task-drilldown.card {
    min-width: 0;
    max-width: 100%;
}
.workload-task-drilldown .card-body,
.workload-task-drilldown .table-responsive:has(.kromeka-data-table),
.workload-task-drilldown .kromeka-data-table-responsive {
    min-width: 0;
    max-width: 100%;
}

.workload-task-drilldown .table thead th,
.workload-task-drilldown .table-light th {
    background-color: var(--kromeka-data-table-thead-bg);
    color: var(--kromeka-data-table-thead-text);
    border-color: var(--border-color);
}

.workload-task-drilldown .workload-task-sort-link {
    color: var(--kromeka-data-table-thead-sort-link) !important;
}

.workload-task-drilldown .workload-task-sort-link:hover {
    color: var(--kromeka-data-table-thead-sort-link-hover) !important;
}

/* Sortable column links — same tokens as Kromeka data-table thead */
.workload-task-drilldown .table thead th .sortable-link {
    color: var(--kromeka-data-table-thead-sort-link) !important;
}

.workload-task-drilldown .table thead th .sortable-link:hover {
    color: var(--kromeka-data-table-thead-sort-link-hover) !important;
}

.workload-task-drilldown .table thead th.sortable-th .bi-arrow-up,
.workload-task-drilldown .table thead th.sortable-th .bi-arrow-down {
    color: var(--kromeka-data-table-thead-sort-icon) !important;
}

/* Column filter funnel — match Kromeka data-table tokens */
.workload-task-drilldown .kromeka-data-table .kromeka-column-filter-btn {
    color: var(--kromeka-data-table-filter-icon);
}

.workload-task-drilldown .kromeka-data-table .kromeka-column-filter-btn:hover,
.workload-task-drilldown .kromeka-data-table .kromeka-column-filter-btn:focus {
    color: var(--kromeka-data-table-filter-icon);
    background: color-mix(in srgb, var(--kromeka-data-table-filter-icon) 14%, transparent);
}

.workload-task-drilldown .kromeka-data-table .kromeka-column-filter-btn.is-active {
    color: var(--kromeka-data-table-filter-icon);
    background: color-mix(in srgb, var(--kromeka-data-table-filter-icon) 18%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--kromeka-data-table-filter-icon) 35%, transparent),
        0 0 10px var(--kromeka-data-table-filter-glow);
}

.workload-task-drilldown .kromeka-data-table .kromeka-column-filter-btn:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--kromeka-data-table-filter-glow);
}

.pagination .page-link {
    background-color: var(--pagination-bg);
    color: var(--pagination-text);
    border-color: var(--pagination-border);
}

.pagination .page-link:hover {
    background-color: var(--pagination-hover-bg);
    color: var(--pagination-hover-text);
    border-color: var(--kromeka-yellow);
}

.pagination .page-item.active .page-link {
    background-color: var(--pagination-active-bg);
    border-color: var(--pagination-active-border);
    color: var(--pagination-active-text);
}

.pagination .page-item.disabled .page-link {
    background-color: var(--pagination-disabled-bg);
    color: var(--pagination-disabled-text);
    border-color: var(--pagination-border);
}

[data-theme="dark"] .table-hover > tbody > tr:hover > *:not(.kromeka-sheet-cell-selected):not(.kromeka-sheet-cell-active):not(.kromeka-sheet-cell-copied):not(.kromeka-sheet-cell-editing):not(.kromeka-sheet-cell-readonly-active) {
    background-color: var(--hover-bg);
    color: var(--text-main);
    box-shadow: inset 0 0 0 9999px var(--hover-bg); /* Force override bootstrap hover */
}

.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background-color: var(--hover-bg);
}

.clickable-row:hover td:first-child {
    box-shadow: inset 4px 0 0 var(--kromeka-yellow);
}

.resizable-table {
    table-layout: fixed;
}

.resizable-table thead th[data-col-key] {
    position: relative;
    /* Match JS minimum (~1.5ch); avoid columns collapsing to a single glyph */
    min-width: 1.5ch;
    overflow: hidden;
    vertical-align: middle;
    max-width: 0;
}

.resizable-table thead th[data-col-key="actions"] {
    overflow: visible;
}

.resizable-table .table-col-resize-handle {
    position: absolute;
    top: 0;
    right: -5px;
    width: 14px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 2;
}

/* Last column / column before a locked Actions col: keep the grip inside the cell */
.resizable-table thead th[data-col-key]:last-child .table-col-resize-handle,
.resizable-table thead th[data-col-key]:has(+ th[data-col-fixed]) .table-col-resize-handle,
.resizable-table thead th[data-col-key]:has(+ th[data-col-locked-width]) .table-col-resize-handle {
    right: 0;
    z-index: 9;
}

.resizable-table .table-col-resize-handle:hover,
body.col-resize-active .resizable-table .table-col-resize-handle {
    background-color: rgba(245, 181, 31, 0.35);
}

/* css/screens/006-shared-horizontal-scroll-pocket-data-tables-pp-s.css */
/* ------------------------------------------------------------
   Shared horizontal scroll pocket (data tables, PP, shipment board)
------------------------------------------------------------ */

.kromeka-hscroll-wrap,
.shipment-board-transport-scroll-wrap {
    position: relative;
    min-width: 0;
}

.kromeka-hscroll-main,
.shipment-board-transport-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.kromeka-hscroll-main {
    overflow-y: auto;
}

.shipment-board-transport-scroll {
    overflow-y: visible;
}

.kromeka-hscroll-sticky,
.shipment-board-sticky-scroll {
    position: sticky;
    bottom: 0;
    z-index: 20;
    overflow-x: auto;
    overflow-y: hidden;
    height: 18px;
    margin-top: 0.35rem;
    background: var(--bg-body);
    border-top: 1px solid var(--border-color, rgba(135, 135, 135, 0.25));
}

/* Viewport-docked pocket: fixed to bottom of visible table area (data tables). */
.kromeka-hscroll-wrap--viewport-dock .kromeka-hscroll-sticky--viewport-dock {
    position: fixed;
    margin-top: 0;
    z-index: 1040;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

/* Table bottom is on screen: sit in the wrap so the pocket scrolls with the table. */
.kromeka-hscroll-wrap--viewport-dock .kromeka-hscroll-sticky--viewport-dock.kromeka-hscroll-sticky--inline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 20;
    box-shadow: none;
}

/* Reserve space so viewport-docked pocket does not cover the last table row. */
.kromeka-hscroll-main.kromeka-hscroll-main--pocket-inset {
    box-sizing: border-box;
}

[data-theme="dark"] .kromeka-hscroll-wrap--viewport-dock .kromeka-hscroll-sticky--viewport-dock:not(.kromeka-hscroll-sticky--inline),
[data-bs-theme="dark"] .kromeka-hscroll-wrap--viewport-dock .kromeka-hscroll-sticky--viewport-dock:not(.kromeka-hscroll-sticky--inline) {
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.35);
}

.kromeka-hscroll-sticky[hidden],
.shipment-board-sticky-scroll[hidden] {
    display: none;
}

.kromeka-hscroll-sticky-inner,
.shipment-board-sticky-scroll-inner {
    height: 1px;
}

[data-theme="dark"] .kromeka-hscroll-sticky,
[data-bs-theme="dark"] .kromeka-hscroll-sticky,
[data-theme="dark"] .shipment-board-sticky-scroll,
[data-bs-theme="dark"] .shipment-board-sticky-scroll {
    background: var(--bg-body);
    border-top-color: var(--border-color, rgba(135, 135, 135, 0.35));
}

@media (min-width: 768px) {
    .kromeka-hscroll-wrap .kromeka-hscroll-main::-webkit-scrollbar:horizontal {
        display: none;
        height: 0;
    }

    body.kromeka-shipment-detail-page .shipment-board-transport-scroll {
        scrollbar-width: none;
    }

    body.kromeka-shipment-detail-page .shipment-board-transport-scroll::-webkit-scrollbar {
        display: none;
        height: 0;
    }
}

@media (max-width: 767.98px) {
    .kromeka-hscroll-sticky {
        display: none !important;
    }

    .kromeka-hscroll-wrap .kromeka-hscroll-main {
        scrollbar-width: auto;
    }

    .kromeka-hscroll-wrap .kromeka-hscroll-main::-webkit-scrollbar:horizontal {
        height: initial;
        width: initial;
    }
}

/* css/components/007-kromeka-data-table-widget-list-pages-keyed-grids.css */
/* ------------------------------------------------------------
   Kromeka data table widget (list pages + keyed grids)
------------------------------------------------------------ */

/* Last column gets no explicit width (JS clears it); table-layout:fixed gives it remaining space.
   max-height + overflow-y: auto creates a scroll container so thead { position: sticky } works. */
.table-responsive:has(.kromeka-data-table),
.kromeka-data-table-responsive {
    overflow-x: auto;
    overflow-y: auto;
    max-width: 100%;
    max-height: calc(100vh - 250px);
    width: 100%;
    min-width: 0;
}

/* Backup dashboard — readable defaults inside the shared data-table widget */
.backup-dashboard {
    min-width: 0;
}

.backup-dashboard .kromeka-data-table-card .table-responsive:has(.kromeka-data-table) {
    max-height: min(28rem, calc(100vh - 22rem));
}

.backup-dashboard .backup-table thead th[data-col-key="filename"],
.backup-dashboard .backup-table tbody td[data-col-key="filename"] {
    min-width: 360px;
}

.backup-dashboard .backup-table thead th[data-col-key="created"],
.backup-dashboard .backup-table tbody td[data-col-key="created"] {
    min-width: 180px;
}

.backup-dashboard .backup-table thead th[data-col-key="actions"],
.backup-dashboard .backup-table tbody td[data-col-key="actions"] {
    min-width: 120px;
    white-space: nowrap;
}

/* Inner vertical scrollbar on data-table scroll areas (horizontal uses sticky pocket).
   Only for scrollers WITHOUT the sticky pocket: a non-auto scrollbar-color makes browsers
   ignore every ::-webkit-scrollbar rule on that element, which would re-show the native
   horizontal bar next to the pocket (two bars). Pocket scrollers (.kromeka-hscroll-main)
   are themed by the ::-webkit-scrollbar:vertical rules below instead. */
.table-responsive:has(.kromeka-data-table):not(.kromeka-hscroll-main),
.kromeka-data-table-responsive:not(.kromeka-hscroll-main) {
    scrollbar-width: auto;
    scrollbar-color: var(--kromeka-table-v-scrollbar-thumb) var(--kromeka-table-v-scrollbar-track);
}

.kromeka-hscroll-wrap .kromeka-hscroll-main::-webkit-scrollbar:vertical,
.table-responsive:has(.kromeka-data-table)::-webkit-scrollbar:vertical,
.kromeka-data-table-responsive::-webkit-scrollbar:vertical {
    width: var(--kromeka-table-v-scrollbar-width);
}

.kromeka-hscroll-wrap .kromeka-hscroll-main::-webkit-scrollbar-track:vertical,
.table-responsive:has(.kromeka-data-table)::-webkit-scrollbar-track:vertical,
.kromeka-data-table-responsive::-webkit-scrollbar-track:vertical {
    background: var(--kromeka-table-v-scrollbar-track);
    border-left: 1px solid var(--border-color);
}

.kromeka-hscroll-wrap .kromeka-hscroll-main::-webkit-scrollbar-thumb:vertical,
.table-responsive:has(.kromeka-data-table)::-webkit-scrollbar-thumb:vertical,
.kromeka-data-table-responsive::-webkit-scrollbar-thumb:vertical {
    background-color: var(--kromeka-table-v-scrollbar-thumb);
    border: var(--kromeka-table-v-scrollbar-thumb-inset) solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
    min-height: 48px;
}

.kromeka-hscroll-wrap .kromeka-hscroll-main::-webkit-scrollbar-thumb:vertical:hover,
.kromeka-hscroll-wrap .kromeka-hscroll-main::-webkit-scrollbar-thumb:vertical:active,
.table-responsive:has(.kromeka-data-table)::-webkit-scrollbar-thumb:vertical:hover,
.table-responsive:has(.kromeka-data-table)::-webkit-scrollbar-thumb:vertical:active,
.kromeka-data-table-responsive::-webkit-scrollbar-thumb:vertical:hover,
.kromeka-data-table-responsive::-webkit-scrollbar-thumb:vertical:active {
    background-color: var(--kromeka-table-v-scrollbar-thumb-hover);
    border: var(--kromeka-table-v-scrollbar-thumb-inset) solid transparent;
    background-clip: padding-box;
}

/* Let the card constrain the table (flex/grid parents need min-width: 0 to shrink) */
.kromeka-data-table-card {
    min-width: 0;
    max-width: 100%;
}

.kromeka-data-table-card .card-body {
    min-width: 0;
}

.kromeka-data-table-card .card-header {
    min-width: 0;
    max-width: 100%;
    overflow-x: visible;
}

.kromeka-data-table {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-collapse: separate;
    border-spacing: 0;
}

/* Sticky column headers: one owner (thead). Body selection/copied cells stay below. */
.kromeka-data-table thead {
    position: sticky;
    top: 0;
    z-index: 6;
    isolation: isolate;
    background-color: var(--kromeka-data-table-thead-bg);
    color: var(--kromeka-data-table-thead-text);
    --bs-table-bg: var(--kromeka-data-table-thead-bg);
    --bs-table-color: var(--kromeka-data-table-thead-text);
    --bs-table-accent-bg: var(--kromeka-data-table-thead-bg);
    --bs-table-bg-state: var(--kromeka-data-table-thead-bg);
}

.kromeka-data-table thead tr {
    background-color: var(--kromeka-data-table-thead-bg);
    color: var(--kromeka-data-table-thead-text);
    --bs-table-bg: var(--kromeka-data-table-thead-bg);
    --bs-table-color: var(--kromeka-data-table-thead-text);
    --bs-table-accent-bg: var(--kromeka-data-table-thead-bg);
    --bs-table-bg-state: var(--kromeka-data-table-thead-bg);
}

.kromeka-data-table thead th {
    background-color: var(--kromeka-data-table-thead-bg);
    background-clip: padding-box;
    color: var(--kromeka-data-table-thead-text);
    --bs-table-bg: var(--kromeka-data-table-thead-bg);
    --bs-table-color: var(--kromeka-data-table-thead-text);
    --bs-table-accent-bg: var(--kromeka-data-table-thead-bg);
    --bs-table-bg-state: var(--kromeka-data-table-thead-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--kromeka-data-table-thead-text) 22%, transparent);
    box-shadow:
        inset 0 0 0 9999px var(--kromeka-data-table-thead-bg),
        inset 0 -1px 0 0 color-mix(in srgb, var(--kromeka-data-table-thead-text) 22%, transparent);
}

/* Unplanned report: solid thead strip (#555554 light, #000000 dark) — avoids sticky/stacking transparency */
.pp-unplanned-report-table.kromeka-data-table thead {
    isolation: isolate;
    background-color: #555554;
}
.pp-unplanned-report-table.kromeka-data-table thead tr {
    background-color: #555554;
}
.pp-unplanned-report-table.kromeka-data-table thead th {
    background-color: #555554 !important;
}
[data-theme="dark"] .pp-unplanned-report-table.kromeka-data-table thead,
[data-bs-theme="dark"] .pp-unplanned-report-table.kromeka-data-table thead {
    background-color: #000000;
}
[data-theme="dark"] .pp-unplanned-report-table.kromeka-data-table thead tr,
[data-bs-theme="dark"] .pp-unplanned-report-table.kromeka-data-table thead tr {
    background-color: #000000;
}
[data-theme="dark"] .pp-unplanned-report-table.kromeka-data-table thead th,
[data-bs-theme="dark"] .pp-unplanned-report-table.kromeka-data-table thead th {
    background-color: #000000 !important;
}

.pp-unplanned-report-table .pp-unplanned-editable {
    cursor: pointer;
}

/*
 * Unplanned Production Work report: tall header row (funnel above label via
 * shared grid). Narrow date/reason/hours columns keep vertical label text.
 */
.pp-unplanned-report-table.kromeka-data-table thead tr {
    height: 150px;
}

.pp-unplanned-report-table.kromeka-data-table thead th[data-col-key] {
    vertical-align: top;
    height: 150px;
    box-sizing: border-box;
    padding: 0.3rem 3px 0.2rem;
    text-align: center;
    overflow: visible;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.pp-unplanned-report-table.kromeka-data-table thead th[data-col-key] .kromeka-th-label-wrap {
    min-height: 0;
    height: 100%;
}

/* Narrow columns: vertical text (bottom-to-top) */
.pp-unplanned-report-table.kromeka-data-table thead th[data-col-key="start_date"],
.pp-unplanned-report-table.kromeka-data-table thead th[data-col-key="end_date"],
.pp-unplanned-report-table.kromeka-data-table thead th[data-col-key="reason"],
.pp-unplanned-report-table.kromeka-data-table thead th[data-col-key="hours"] {
    min-width: 40px;
    max-width: 48px;
}

.pp-unplanned-report-table.kromeka-data-table thead th[data-col-key="start_date"] .kromeka-th-label-wrap > .sortable-link,
.pp-unplanned-report-table.kromeka-data-table thead th[data-col-key="end_date"] .kromeka-th-label-wrap > .sortable-link,
.pp-unplanned-report-table.kromeka-data-table thead th[data-col-key="reason"] .kromeka-th-label-wrap > .sortable-link,
.pp-unplanned-report-table.kromeka-data-table thead th[data-col-key="hours"] .kromeka-th-label-wrap > .sortable-link {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    display: block;
    width: auto;
    max-height: 112px;
    max-width: 2.8rem;
    font-size: 0.78rem;
    line-height: 1.25;
    letter-spacing: normal;
    margin: 0;
    align-self: end;
    text-align: start;
}

.kromeka-data-table thead th .sortable-link,
.kromeka-data-table thead th .sortable-link.text-body {
    color: var(--kromeka-data-table-thead-sort-link) !important;
}

.kromeka-data-table thead th .sortable-link:hover {
    color: var(--kromeka-data-table-thead-sort-link-hover) !important;
}

/* Beat `.table .sortable-th .sortable-link` (var(--table-sort-link), ~#212529): that rule has
   three class selectors (0,3,0) and wins over `.kromeka-data-table thead th .sortable-link` (0,2,2).
   Contact People headers omit Bootstrap `.text-body`, so they never matched the stronger
   `.sortable-link.text-body` branch — use explicit .table + .kromeka-data-table chaining. */
.table.kromeka-data-table thead th.sortable-th .sortable-link {
    color: var(--kromeka-data-table-thead-sort-link) !important;
}

.table.kromeka-data-table thead th.sortable-th .sortable-link:hover {
    color: var(--kromeka-data-table-thead-sort-link-hover) !important;
}

.kromeka-data-table thead th.sortable-th .bi-arrow-up,
.kromeka-data-table thead th.sortable-th .bi-arrow-down,
.kromeka-data-table thead th .sortable-link .bi-caret-up-fill,
.kromeka-data-table thead th .sortable-link .bi-caret-down-fill,
.kromeka-data-table thead th .sortable-link .bi-caret-up,
.kromeka-data-table thead th .sortable-link .bi-caret-down {
    color: var(--kromeka-data-table-thead-sort-icon) !important;
}

/* Override Bootstrap .table-light thead (e.g. #f8f9fa) on all Kromeka data tables */
.kromeka-data-table thead.table-light > tr > th {
    background-color: var(--kromeka-data-table-thead-bg) !important;
    color: var(--kromeka-data-table-thead-text) !important;
    border-color: var(--border-color);
}

/*
 * Sortable kromeka headers: never set display:flex on th — it overrides table-cell
 * and breaks the row (headers stack in a column). Keep th as table-cell; use
 * .kromeka-th-label-wrap (flex) inside the cell for label + icon on one line.
 */
.kromeka-data-table thead th.sortable-th {
    vertical-align: middle;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Headers: wrap instead of clipping; narrow tables can still use vertical page rules below. */
.kromeka-data-table thead th[data-col-key]:not(:has(.sortable-link)):not(:has(.kromeka-th-label-wrap)) {
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.2;
}

.kromeka-data-table thead th[data-col-key] .sortable-link,
.kromeka-data-table thead th[data-col-key] .kromeka-th-sort-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.15;
}

.kromeka-data-table:not(.wo-list-table) thead th[data-col-key] .sortable-link,
.kromeka-data-table:not(.wo-list-table) thead th[data-col-key] .kromeka-th-sort-link {
    justify-content: center;
    text-align: center;
    width: 100%;
}

.kromeka-data-table thead th .kromeka-th-sort-link.is-active {
    color: var(--kromeka-yellow) !important;
    font-weight: 700;
}

.kromeka-data-table thead th .kromeka-sort-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    flex-shrink: 0;
    font-size: 0.75rem;
}

.kromeka-data-table thead th .kromeka-th-label {
    min-width: 0;
}

/*
 * Kromeka data table header layout (app-wide default)
 * ----------------------------------------------------------------
 * Two-row CSS grid: funnel row always reserved on top, label below
 * (bottom-aligned, word-wrapping). Height is content-driven: short
 * labels stay compact; long labels wrap at the column min-width.
 * No flex order hacks — every th[data-col-key] uses the same
 * structure via kromeka-data-table.js.
 * Opt-in vertical labels: data-kromeka-header-orientation="vertical"
 * on the <table> (whole header row), or
 * data-col-header-orientation="vertical" on one <th> (narrow status
 * columns such as shipment document slots).
 * Do not use kromeka-data-table--compact-header here: that puts
 * funnel and title on one nowrap line (workbench/SPC only).
 * ----------------------------------------------------------------
 */

.kromeka-data-table thead th[data-col-key] {
    text-align: center;
    vertical-align: top;
}

.kromeka-data-table thead th[data-col-key] .kromeka-th-label-wrap {
    display: grid;
    grid-template-rows: 1.375rem minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    justify-items: center;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    gap: 0.15rem;
}

.kromeka-data-table thead th[data-col-key] .kromeka-th-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    grid-row: 1;
    grid-column: 1;
    align-self: center;
    justify-self: center;
    margin: 0;
    min-height: 1.375rem;
    max-height: 1.375rem;
}

.kromeka-data-table thead th[data-col-key] .kromeka-th-label-wrap > .kromeka-th-label,
.kromeka-data-table thead th[data-col-key] .kromeka-th-label-wrap > .sortable-link,
.kromeka-data-table thead th[data-col-key] .kromeka-th-label-wrap > .kromeka-th-sort-link,
.kromeka-data-table thead th[data-col-key] .kromeka-th-label-wrap > .nc-th-label,
.kromeka-data-table thead th[data-col-key] .kromeka-th-label-wrap > .pp-th-label,
.kromeka-data-table thead th[data-col-key] .kromeka-th-label-wrap > .wo-list-th-vertical-label {
    grid-row: 2;
    grid-column: 1;
    align-self: end;
    justify-self: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    text-align: center;
    line-height: 1.15;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
    white-space: normal;
}

/* Filterless columns: empty .kromeka-th-actions still occupies grid-row 1. */

/*
 * Opt-in vertical header labels (WO list, dense grids).
 * data-kromeka-header-orientation="vertical" on the <table>.
 * Per column: data-col-header-orientation="vertical" on the <th>.
 * A per-column label uses a fixed height so a mixed row (horizontal
 * titles beside rotated ones) still shares one bottom line.
 */
.kromeka-data-table[data-kromeka-header-orientation="vertical"] thead tr {
    height: 150px;
}

.kromeka-data-table[data-kromeka-header-orientation="vertical"] thead th[data-col-key]:not([data-col-key="actions"]) {
    height: 150px;
    vertical-align: top;
}

.kromeka-data-table[data-kromeka-header-orientation="vertical"] thead th[data-col-key] .kromeka-th-label-wrap {
    min-height: 0;
    height: 100%;
}

/*
 * Shrink the title to its text (width: auto) so justify-self: center
 * puts the letters under the funnel. A 100% wide box left the glyphs
 * on the left edge of a 2.8rem slot. align-self: end plus text-align:
 * start (the bottom, after the 180deg turn) gives every title, short
 * or wrapped, the same bottom line. max-height fits under the funnel
 * row. Sort carets are not counter-rotated: caret-up already points up
 * after this turn.
 */
.kromeka-data-table[data-kromeka-header-orientation="vertical"] thead th[data-col-key] .kromeka-th-label-wrap > .kromeka-th-label,
.kromeka-data-table[data-kromeka-header-orientation="vertical"] thead th[data-col-key] .kromeka-th-label-wrap > .sortable-link,
.kromeka-data-table[data-kromeka-header-orientation="vertical"] thead th[data-col-key] .kromeka-th-label-wrap > .kromeka-th-sort-link,
.kromeka-data-table[data-kromeka-header-orientation="vertical"] thead th[data-col-key] .kromeka-th-label-wrap > .nc-th-label,
.kromeka-data-table[data-kromeka-header-orientation="vertical"] thead th[data-col-key] .kromeka-th-label-wrap > .pp-th-label,
.kromeka-data-table[data-kromeka-header-orientation="vertical"] thead th[data-col-key] .kromeka-th-label-wrap > .wo-list-th-vertical-label,
.kromeka-data-table thead th[data-col-header-orientation="vertical"] .kromeka-th-label-wrap > .kromeka-th-label,
.kromeka-data-table thead th[data-col-header-orientation="vertical"] .kromeka-th-label-wrap > .sortable-link,
.kromeka-data-table thead th[data-col-header-orientation="vertical"] .kromeka-th-label-wrap > .kromeka-th-sort-link {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    word-break: normal;
    text-overflow: clip;
    width: auto;
    max-height: 112px;
    max-width: 2.8rem;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    display: block;
    margin: 0;
    align-self: end;
    text-align: start;
    color: inherit;
}

/*
 * Mixed rows have no fixed header height, so max-height alone lets a
 * short title ("CMR") sit higher than a long one ("Packing list").
 * A fixed box plus text-align: start keeps every rotated title on the
 * same bottom line under its funnel.
 */
.kromeka-data-table thead th[data-col-header-orientation="vertical"] .kromeka-th-label-wrap > .kromeka-th-label,
.kromeka-data-table thead th[data-col-header-orientation="vertical"] .kromeka-th-label-wrap > .sortable-link,
.kromeka-data-table thead th[data-col-header-orientation="vertical"] .kromeka-th-label-wrap > .kromeka-th-sort-link {
    height: 112px;
}

/* List tables: scroll-width table, compact header chrome. */
.table-responsive .nonconformity-table.kromeka-data-table,
.table-responsive .products-table.kromeka-data-table,
.table-responsive .customers-table.kromeka-data-table,
.table-responsive .contacts-list-table.kromeka-data-table,
.table-responsive .cpq-offers-list-table.kromeka-data-table,
.table-responsive .sites-list-table.kromeka-data-table,
.table-responsive .cpq-price-catalog-list-table.kromeka-data-table,
.table-responsive .cpq-definitions-list-table.kromeka-data-table,
.table-responsive .cpq-component-main-table.kromeka-data-table {
    width: max-content;
    min-width: 100%;
}

.table-responsive .products-table--dashboard.kromeka-data-table {
    width: max-content;
    min-width: 0;
}

.nonconformity-table.kromeka-data-table thead tr,
.products-table.kromeka-data-table thead tr,
.customers-table.kromeka-data-table thead tr,
.contacts-list-table.kromeka-data-table thead tr,
.cpq-offers-list-table.kromeka-data-table thead tr,
.sites-list-table.kromeka-data-table thead tr,
.cpq-price-catalog-list-table.kromeka-data-table thead tr,
.cpq-definitions-list-table.kromeka-data-table thead tr,
.cpq-component-main-table.kromeka-data-table thead tr {
    height: auto;
}

.nonconformity-table.kromeka-data-table thead th[data-col-key],
.products-table.kromeka-data-table thead th[data-col-key],
.customers-table.kromeka-data-table thead th[data-col-key],
.contacts-list-table.kromeka-data-table thead th[data-col-key],
.cpq-offers-list-table.kromeka-data-table thead th[data-col-key],
.sites-list-table.kromeka-data-table thead th[data-col-key],
.cpq-price-catalog-list-table.kromeka-data-table thead th[data-col-key],
.cpq-definitions-list-table.kromeka-data-table thead th[data-col-key],
.cpq-component-main-table.kromeka-data-table thead th[data-col-key] {
    height: auto;
    min-height: 0;
    max-height: none;
    box-sizing: border-box;
    padding: 0.35rem 0.4rem;
    text-align: center;
    vertical-align: top;
    overflow: visible;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* List tables keep compact uppercase header chrome; stack layout is the app-wide grid. */

.products-table.kromeka-data-table tbody td {
    padding-top: 0.28rem;
    padding-bottom: 0.28rem;
    vertical-align: middle;
}

.products-table.kromeka-data-table tbody td[data-col-key] {
    text-align: left;
}

.products-table.kromeka-data-table tbody td[data-col-key="name"],
.products-table.kromeka-data-table tbody td[data-col-key="description"] {
    max-width: 18rem;
    white-space: normal;
}

.products-table.kromeka-data-table tbody td[data-col-key="status"],
.products-table.kromeka-data-table tbody td[data-col-key="actions"] {
    text-align: center;
}

.products-table tbody td[data-col-key="actions"] {
    min-width: 5.5rem;
}

.products-table tbody td[data-col-key="actions"] .table-action-buttons {
    flex-wrap: nowrap;
    justify-content: center;
}

.kromeka-cell-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
}

.products-table--dashboard thead th[data-col-key] {
    min-height: 0;
    padding: 0.3rem 0.4rem;
    font-size: 0.72rem;
}

.products-table--dashboard tbody td {
    padding-top: 0.22rem;
    padding-bottom: 0.22rem;
}

.products-table--dashboard.kromeka-data-table tbody td[data-col-key] {
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * Compact dashboard Scope widget: left-align headers with the cell
 * values, collapse the unused filter-funnel row, keep resize handles.
 */
.products-table--dashboard.kromeka-data-table thead th[data-col-key] {
    min-height: 0;
    text-align: left;
    vertical-align: middle;
    overflow: hidden;
}

.products-table--dashboard.kromeka-data-table thead th[data-col-key] .kromeka-th-label-wrap {
    min-height: 0;
    grid-template-rows: minmax(0, auto);
    justify-items: start;
}

.products-table--dashboard.kromeka-data-table thead th[data-col-key] .kromeka-th-actions:empty {
    display: none;
}

.products-table--dashboard.kromeka-data-table thead th[data-col-key] .kromeka-th-label-wrap > .kromeka-th-label {
    grid-row: 1;
    justify-self: start;
    text-align: left;
    align-self: center;
    white-space: normal;
    overflow-wrap: anywhere;
}

.kromeka-detail-fields .kromeka-detail-field {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
    gap: 0.2rem 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border-color);
    align-items: baseline;
}

.kromeka-detail-fields .kromeka-detail-field--last {
    border-bottom: 0;
}

.kromeka-detail-fields .kromeka-detail-label {
    color: var(--text-muted);
}

.kromeka-detail-fields .kromeka-detail-value {
    color: var(--text-main);
    min-width: 0;
    overflow-wrap: anywhere;
}

.kromeka-detail-fields .kromeka-detail-section {
    margin: 0.85rem 0 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--border-color);
}

.product-wo-linked-list {
    margin: 0;
}

.product-wo-linked-list a {
    font-weight: 600;
}

/* css/components/008-kromeka-data-tables-count-cardinality-columns.css */
/* ------------------------------------------------------------
   Kromeka data tables: count / cardinality columns
   Projects, Versions, Items, Customers counts, and similar
   short numeric/badge values stay horizontally centered in
   the cell (header + body). Beats Bootstrap .text-end.
   ------------------------------------------------------------ */
.kromeka-data-table thead th[data-col-key="projects"],
.kromeka-data-table tbody td[data-col-key="projects"],
.kromeka-data-table tfoot td[data-col-key="projects"],
.kromeka-data-table thead th[data-col-key="versions"],
.kromeka-data-table tbody td[data-col-key="versions"],
.kromeka-data-table tfoot td[data-col-key="versions"],
.kromeka-data-table thead th[data-col-key="items"],
.kromeka-data-table tbody td[data-col-key="items"],
.kromeka-data-table tfoot td[data-col-key="items"],
.kromeka-data-table thead th[data-col-key="customers"],
.kromeka-data-table tbody td[data-col-key="customers"],
.kromeka-data-table tfoot td[data-col-key="customers"],
.kromeka-data-table thead th[data-col-key="counts"],
.kromeka-data-table tbody td[data-col-key="counts"],
.kromeka-data-table tfoot td[data-col-key="counts"],
.kromeka-data-table thead th[data-col-key="rows"],
.kromeka-data-table tbody td[data-col-key="rows"],
.kromeka-data-table tfoot td[data-col-key="rows"],
.kromeka-data-table thead th.kromeka-count-col,
.kromeka-data-table tbody td.kromeka-count-col,
.kromeka-data-table tfoot td.kromeka-count-col {
    text-align: center !important;
    vertical-align: middle !important;
}

.kromeka-data-table thead th[data-col-key="projects"] .kromeka-th-label-wrap,
.kromeka-data-table thead th[data-col-key="versions"] .kromeka-th-label-wrap,
.kromeka-data-table thead th[data-col-key="items"] .kromeka-th-label-wrap,
.kromeka-data-table thead th[data-col-key="customers"] .kromeka-th-label-wrap,
.kromeka-data-table thead th[data-col-key="counts"] .kromeka-th-label-wrap,
.kromeka-data-table thead th[data-col-key="rows"] .kromeka-th-label-wrap,
.kromeka-data-table thead th.kromeka-count-col .kromeka-th-label-wrap,
.kromeka-data-table thead th[data-col-key="projects"].text-end .kromeka-th-label-wrap,
.kromeka-data-table thead th[data-col-key="versions"].text-end .kromeka-th-label-wrap,
.kromeka-data-table thead th[data-col-key="items"].text-end .kromeka-th-label-wrap,
.kromeka-data-table thead th[data-col-key="customers"].text-end .kromeka-th-label-wrap,
.kromeka-data-table thead th[data-col-key="counts"].text-end .kromeka-th-label-wrap,
.kromeka-data-table thead th[data-col-key="rows"].text-end .kromeka-th-label-wrap,
.kromeka-data-table thead th.kromeka-count-col.text-end .kromeka-th-label-wrap {
    justify-items: center !important;
    text-align: center !important;
}

/* Nested / non-data-table count cells (e.g. customer detail sites). */
td.kromeka-count-col,
th.kromeka-count-col {
    text-align: center !important;
    vertical-align: middle !important;
}

/* Contact people: center customer and project count badges. */
.contacts-list-table.kromeka-data-table thead th[data-col-key="customers"],
.contacts-list-table.kromeka-data-table tbody td[data-col-key="customers"],
.contacts-list-table.kromeka-data-table thead th[data-col-key="projects"],
.contacts-list-table.kromeka-data-table tbody td[data-col-key="projects"] {
    text-align: center;
    vertical-align: middle;
}

/* Offer requests: center status, dates, project link, and version count. */
.cpq-offers-list-table.kromeka-data-table thead th[data-col-key="status"],
.cpq-offers-list-table.kromeka-data-table tbody td[data-col-key="status"],
.cpq-offers-list-table.kromeka-data-table thead th[data-col-key="request_date"],
.cpq-offers-list-table.kromeka-data-table tbody td[data-col-key="request_date"],
.cpq-offers-list-table.kromeka-data-table thead th[data-col-key="project"],
.cpq-offers-list-table.kromeka-data-table tbody td[data-col-key="project"],
.cpq-offers-list-table.kromeka-data-table thead th[data-col-key="versions"],
.cpq-offers-list-table.kromeka-data-table tbody td[data-col-key="versions"] {
    text-align: center;
    vertical-align: middle;
}

.nonconformity-table.kromeka-data-table thead .nc-th-label {
    display: inline-block;
    writing-mode: horizontal-tb;
    transform: none;
    max-height: none;
    max-width: none;
    line-height: 1.2;
    letter-spacing: normal;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Nonconformity list: workflow columns — readable cells (global td max-width:0 clips controls). */
.nonconformity-table.kromeka-data-table thead th[data-col-key="actions"],
.nonconformity-table.kromeka-data-table tbody td[data-col-key="actions"] {
    min-width: 180px;
}

.nonconformity-table.kromeka-data-table thead th[data-col-key="correction"],
.nonconformity-table.kromeka-data-table tbody td[data-col-key="correction"] {
    min-width: 190px;
}

.nonconformity-table.kromeka-data-table thead th[data-col-key="verification"],
.nonconformity-table.kromeka-data-table tbody td[data-col-key="verification"] {
    min-width: 170px;
}

.nonconformity-table.kromeka-data-table thead th[data-col-key="status"],
.nonconformity-table.kromeka-data-table tbody td[data-col-key="status"] {
    min-width: 160px;
}

.nonconformity-table.kromeka-data-table thead th[data-col-key="current_action"],
.nonconformity-table.kromeka-data-table tbody td[data-col-key="current_action"] {
    min-width: 220px;
}

.nonconformity-table.kromeka-data-table tbody td[data-col-key="correction"],
.nonconformity-table.kromeka-data-table tbody td[data-col-key="verification"],
.nonconformity-table.kromeka-data-table tbody td[data-col-key="current_action"],
.nonconformity-table.kromeka-data-table tbody td[data-col-key="status"] {
    overflow: visible;
    max-width: none;
    white-space: normal;
}

.nonconformity-table.kromeka-data-table tbody td[data-col-key="actions"] {
    overflow: visible;
    max-width: none;
    position: relative;
    z-index: 1;
    background-color: var(--bg-card, #fff);
}

.nc-limited-access-label {
    font-size: 0.75rem;
    font-weight: normal;
    color: var(--text-muted);
    white-space: nowrap;
}

.nc-quality-oversight-banner {
    border-left: 3px solid var(--kromeka-yellow);
    color: var(--text-main);
    background-color: var(--bg-card);
}

[data-theme="dark"] .nc-quality-oversight-banner {
    color: var(--text-main);
    background-color: var(--bg-card);
}

/* Nonconformity create: reload control beside dependent Select2 (touch-friendly width) */
.nc-dependent-select-row .nc-dependent-select-refresh {
    min-width: 2.75rem;
}

.kromeka-data-table thead th[data-col-key] .kromeka-th-label-wrap .sortable-link {
    min-width: 0;
    display: block;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* css/components/009-kromeka-data-tables-app-wide-actions-column-data.css */
/* ------------------------------------------------------------
   Kromeka data tables: app-wide Actions column (data-col-key="actions")
   Centers header + body; beats Bootstrap .text-end / .justify-content-end !important.
   ------------------------------------------------------------ */
.kromeka-data-table thead th[data-col-key="actions"],
.kromeka-data-table tbody td[data-col-key="actions"],
.kromeka-data-table tfoot td[data-col-key="actions"] {
    text-align: center !important;
    vertical-align: middle !important;
    width: 1%;
    white-space: nowrap;
    box-sizing: border-box;
}

.kromeka-data-table .kromeka-column-filter {
    display: inline-flex;
    align-items: center;
}

.kromeka-data-table .kromeka-column-filter-btn {
    color: var(--kromeka-data-table-filter-icon);
    padding: 0.125rem 0.2rem;
    line-height: 1;
    border-radius: 0.35rem;
    text-decoration: none;
}

.kromeka-data-table .kromeka-column-filter-btn:hover,
.kromeka-data-table .kromeka-column-filter-btn:focus {
    color: var(--kromeka-data-table-filter-icon);
    background: color-mix(in srgb, var(--kromeka-data-table-filter-icon) 14%, transparent);
    text-decoration: none;
}

.kromeka-data-table .kromeka-column-filter-btn:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--kromeka-data-table-filter-glow);
}

.kromeka-data-table .kromeka-column-filter-btn.is-active {
    color: var(--kromeka-data-table-filter-icon);
    background: color-mix(in srgb, var(--kromeka-data-table-filter-icon) 18%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--kromeka-data-table-filter-icon) 38%, transparent),
        0 0 10px var(--kromeka-data-table-filter-glow);
}

.kromeka-column-filter-menu {
    position: fixed;
    z-index: 1085;
    width: 14rem;
    min-width: 14rem;
    max-width: min(90vw, 14rem);
    padding: 0.5rem;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 0.375rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

.kromeka-column-filter-menu .form-label {
    color: var(--text-main, var(--kromeka-dark));
}

.kromeka-column-filter-menu .btn {
    white-space: nowrap;
}

/* Empty-cell dash placeholder: always centered so the dash
   visually aligns with the column header above. */
.kromeka-data-table td .kromeka-empty-dash,
.kromeka-data-table td > .text-muted:only-child {
    display: block;
    text-align: center;
    user-select: none;
}

.kromeka-data-table tbody td[data-col-key] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    max-width: 0;
}

/*
 * Table cells with position:static do not clip overflowing native selects.
 * Scrolling cells get a stacking context below frozen columns so those
 * widgets cannot paint over the pinned band.
 */
.kromeka-data-table tbody td[data-col-key]:not(.kromeka-frozen-col):not([data-col-key="actions"]) {
    position: relative;
    z-index: 0;
}

.kromeka-data-table tbody td[data-col-key]:has(> select.kromeka-sheet-select-open) {
    overflow: visible;
}

/* Actions body cells: clip ellipsis rule breaks icon groups and dropdowns.
   Keep overflow visible; width is locked in JS so leftover space cannot stretch this column. */
.kromeka-data-table tbody td[data-col-key="actions"] {
    overflow: visible !important;
}

.kromeka-data-table tbody td[data-col-key="actions"] .table-action-buttons {
    display: flex !important;
    width: auto;
    align-items: center;
    justify-content: center !important;
    flex-wrap: nowrap;
    gap: 0.25rem;
    margin: 0;
}

.kromeka-data-table tbody td[data-col-key="actions"] form {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.kromeka-data-table tbody td[data-col-key="actions"] .btn-group {
    align-self: center;
}

/* Stacked workflow buttons (e.g. Nonconformity list) — center the block in the cell */
.kromeka-data-table tbody td[data-col-key="actions"] > .d-grid {
    margin-inline: auto;
    width: fit-content;
    max-width: 100%;
}

/* Status column with a dropdown: menu must extend past the cell; default td[data-col-key] uses
   overflow:hidden for ellipsis, which clips the menu to a sliver. */
.kromeka-data-table tbody td[data-col-key="status"]:has(.dropdown) {
    overflow: visible;
}

/* Open status dropdown paints above the following table row (list rows use position:relative). */
.kromeka-data-table tbody tr:has(.dropdown-menu.show) {
    z-index: 5;
}

/* Price list footer: same column width contract as body (fixed layout) — avoids misaligned totals */
.cpq-offer-version-items-table.kromeka-data-table tfoot td[data-col-key] {
    max-width: 0;
    vertical-align: top;
    white-space: normal;
    overflow: visible;
}

/* Monetary footer cells: max-width:0 + white-space:normal stacks each digit vertically */
.cpq-offer-price-list-table th[data-col-key="total_cost"],
.cpq-offer-price-list-table th[data-col-key="total_price"],
.cpq-offer-price-list-table th[data-col-key="total_price_discounted"],
.cpq-offer-price-list-table tbody td[data-col-key="total_cost"],
.cpq-offer-price-list-table tbody td[data-col-key="total_price"],
.cpq-offer-price-list-table tbody td[data-col-key="total_price_discounted"],
.cpq-offer-version-items-table.kromeka-data-table tfoot.cpq-offer-version-items-tfoot td[data-col-key="total_cost"],
.cpq-offer-version-items-table.kromeka-data-table tfoot.cpq-offer-version-items-tfoot td[data-col-key="total_price"],
.cpq-offer-version-items-table.kromeka-data-table tfoot.cpq-offer-version-items-tfoot td[data-col-key="total_price_discounted"] {
    min-width: 7rem;
    max-width: none;
    white-space: nowrap;
}

.cpq-offer-version-items-table.kromeka-data-table tfoot td[data-col-key="actions"] {
    vertical-align: middle !important;
    max-width: none;
    min-width: 5.5rem;
    white-space: nowrap;
}

.kromeka-data-table tbody td.table-cell-multiline {
    white-space: normal;
    max-width: none;
}

/* Icon-only row actions: square-ish hit targets, no extra horizontal padding */
.kromeka-data-table .table-action-buttons .btn.table-action-icon-btn {
    position: relative;
    z-index: 1;
    padding: 0.25rem 0.45rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kromeka-data-table .table-action-buttons .btn.table-action-icon-btn .bi {
    font-size: 1rem;
    line-height: 1;
    color: inherit;
}

/* Per-table optional vertical dividers (Column settings gear — persisted per user) */
.kromeka-data-table.kromeka-table-show-col-borders thead tr > th[data-col-key] + th[data-col-key],
.kromeka-data-table.kromeka-table-show-col-borders tbody tr > td[data-col-key] + td[data-col-key],
.kromeka-data-table.kromeka-table-show-col-borders tfoot tr > td[data-col-key] + td[data-col-key] {
    border-inline-start: 1px solid var(--border-color);
}

.kromeka-data-table-card .kromeka-table-toolbar {
    gap: 0.5rem;
}

/* css/components/010-toolbar-baseline-alignment.css */
/* ------------------------------------------------------------
   Toolbar baseline alignment
   All inputs, selects, and buttons share one horizontal control
   line (bottom-aligned). Prevents gear/actions floating between
   labels and fields when the toolbar uses labeled columns.
   ------------------------------------------------------------ */
.kromeka-data-table-card > .card-header > .kromeka-table-toolbar,
.kromeka-table-toolbar {
    align-items: flex-end !important;
}

.kromeka-table-toolbar > :is(form, .d-flex),
.kromeka-table-toolbar form.d-flex,
.kromeka-table-toolbar .kromeka-table-toolbar-actions {
    align-items: flex-end !important;
}

.kromeka-table-toolbar .kromeka-toolbar-field > :is(.form-label, label.form-label) {
    display: block;
    min-height: 1.05rem;
    line-height: 1.2;
    margin-bottom: 2px;
}

.kromeka-table-toolbar .kromeka-toolbar-btn-slot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: flex-end;
}

/* css/components/011-toolbar-control-normalization.css */
/* ------------------------------------------------------------
   Toolbar control normalization
   All controls inside .kromeka-table-toolbar share the same
   height, font-size, border-radius, and subdued hover effects
   so the filter bar reads as one cohesive strip. Form/detail
   page controls are unaffected — these rules are scoped.
   ------------------------------------------------------------ */

/* css/components/012-kromeka-table-toolbar-form-control.css */
/* --- Inputs & native selects --- */
.kromeka-table-toolbar .form-control,
.kromeka-table-toolbar .form-select {
    height: var(--toolbar-control-height);
    min-height: var(--toolbar-control-height);
    font-size: var(--toolbar-control-font-size);
    border-radius: var(--toolbar-control-radius);
    padding: 0.25rem 0.5rem;
    border-width: 1px;
    box-shadow: none;
    transform: none;
}

.kromeka-table-toolbar .form-select {
    padding-right: 2rem;
    background-size: 14px 10px;
}

.kromeka-table-toolbar .form-select:hover,
.kromeka-table-toolbar .form-control:hover {
    transform: none;
    box-shadow: none;
    border-width: 1px;
}

/* css/components/013-kromeka-table-toolbar-select2-container-default-.css */
/* --- Select2 inside toolbar --- */
.kromeka-table-toolbar .select2-container--default .select2-selection--single,
.kromeka-table-toolbar .select2-container--default .select2-selection--multiple {
    min-height: var(--toolbar-control-height) !important;
    height: var(--toolbar-control-height) !important;
    border-width: 1px !important;
    border-radius: var(--toolbar-control-radius) !important;
    padding: 2px 8px !important;
    box-shadow: none !important;
}

.kromeka-table-toolbar .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--toolbar-control-height) - 6px) !important;
    font-size: var(--toolbar-control-font-size);
}

.kromeka-table-toolbar .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--toolbar-control-height) - 2px) !important;
}

.kromeka-table-toolbar .select2-container--default .select2-selection--single:hover,
.kromeka-table-toolbar .select2-container--default .select2-selection--multiple:hover {
    box-shadow: none !important;
    transform: none;
}

/* css/components/014-kromeka-table-toolbar-btn-sm.css */
/* --- Buttons --- */
.kromeka-table-toolbar .btn-sm,
.kromeka-table-toolbar .btn-group-sm > .btn {
    height: var(--toolbar-control-height);
    font-size: var(--toolbar-control-font-size);
    border-radius: var(--toolbar-control-radius);
    padding: 0.25rem 0.75rem;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* Icon-only toolbar buttons (fullscreen, gear): square aspect */
.kromeka-table-toolbar .btn-sm:has(> i:only-child),
.kromeka-table-toolbar .btn-sm:has(> .bi:only-child) {
    padding: 0.25rem 0.5rem;
}

/* css/components/015-kromeka-table-toolbar-toolbar-select.css */
/* --- Toolbar select min-width utility --- */
.kromeka-table-toolbar .toolbar-select {
    min-width: var(--toolbar-select-min-width);
}

/* css/components/016-kromeka-table-toolbar-form-label.css */
/* --- Labels above toolbar controls --- */
.kromeka-table-toolbar .form-label {
    color: var(--toolbar-label-text);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}

/* Reusable filter strip (Products-style custom headers, Production Planning, etc.) */
.kromeka-filter-bar {
    background: var(--toolbar-surface-bg);
    color: var(--toolbar-label-text);
}

.kromeka-filter-bar .form-control,
.kromeka-filter-bar .form-select {
    height: var(--toolbar-control-height);
    min-height: var(--toolbar-control-height);
    font-size: var(--toolbar-control-font-size);
    border-radius: var(--toolbar-control-radius);
}

/* css/components/017-same-height-contract-as-kromeka-table-toolbar-bt.css */
/* --- Active column-filters count badge (kromeka-data-table.js ensureFilterCountBadge)
   Same height contract as .kromeka-table-toolbar .btn-sm; scoped by [data-kromeka-filter-count-badge]
   so other Bootstrap badges are untouched. Matches any toolbar inside .kromeka-data-table-card
   (card-header, card-body, or nested .kromeka-table-toolbar).
   Excluded from global `.badge:not([data-kromeka-filter-count-badge]):not([data-kromeka-query-filter-summary])` so `display: inline-flex`
   + `align-items: center` apply (global badge was forcing inline-block + baseline). */
:is(
    .kromeka-table-toolbar .kromeka-active-filters-badge[data-kromeka-filter-count-badge],
    .kromeka-data-table-card .kromeka-active-filters-badge[data-kromeka-filter-count-badge],
    [data-kromeka-filter-count-host] .kromeka-active-filters-badge[data-kromeka-filter-count-badge],
    .kromeka-data-table-card .card-header .kromeka-active-filters-badge[data-kromeka-query-filter-summary]
) {
    min-height: var(--toolbar-control-height);
    height: var(--toolbar-control-height);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0 0.55rem;
    border-radius: var(--toolbar-control-radius);
    line-height: 1;
    font-size: var(--toolbar-control-font-size);
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
    background-color: var(--kromeka-data-table-thead-bg) !important;
    color: var(--kromeka-data-table-thead-text) !important;
    border: 1px solid color-mix(in srgb, var(--kromeka-data-table-filter-icon) 45%, transparent);
}

:is(
    .kromeka-table-toolbar .kromeka-active-filters-badge[data-kromeka-filter-count-badge],
    .kromeka-data-table-card .kromeka-active-filters-badge[data-kromeka-filter-count-badge],
    [data-kromeka-filter-count-host] .kromeka-active-filters-badge[data-kromeka-filter-count-badge],
    .kromeka-data-table-card .card-header .kromeka-active-filters-badge[data-kromeka-query-filter-summary]
) .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--kromeka-data-table-filter-icon);
}

:is(
    .kromeka-table-toolbar .kromeka-active-filters-badge[data-kromeka-filter-count-badge],
    .kromeka-data-table-card .kromeka-active-filters-badge[data-kromeka-filter-count-badge],
    [data-kromeka-filter-count-host] .kromeka-active-filters-badge[data-kromeka-filter-count-badge],
    .kromeka-data-table-card .card-header .kromeka-active-filters-badge[data-kromeka-query-filter-summary]
) [data-filter-count-label] {
    flex: 0 1 auto;
    min-width: 0;
}

:is(
    .kromeka-table-toolbar .kromeka-active-filters-badge[data-kromeka-filter-count-badge],
    .kromeka-data-table-card .kromeka-active-filters-badge[data-kromeka-filter-count-badge],
    [data-kromeka-filter-count-host] .kromeka-active-filters-badge[data-kromeka-filter-count-badge],
    .kromeka-data-table-card .card-header .kromeka-active-filters-badge[data-kromeka-query-filter-summary]
) .btn-close {
    width: 0.75rem;
    height: 0.75rem;
    padding: 0;
    margin: 0;
    align-self: center;
    flex: 0 0 auto;
    opacity: 0.75;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

:is(
    .kromeka-table-toolbar .kromeka-active-filters-badge[data-kromeka-filter-count-badge],
    .kromeka-data-table-card .kromeka-active-filters-badge[data-kromeka-filter-count-badge],
    [data-kromeka-filter-count-host] .kromeka-active-filters-badge[data-kromeka-filter-count-badge],
    .kromeka-data-table-card .card-header .kromeka-active-filters-badge[data-kromeka-query-filter-summary]
) .btn-close:hover {
    opacity: 1;
}

:is(
    .kromeka-table-toolbar .kromeka-active-filters-badge[data-kromeka-filter-count-badge],
    .kromeka-data-table-card .kromeka-active-filters-badge[data-kromeka-filter-count-badge],
    [data-kromeka-filter-count-host] .kromeka-active-filters-badge[data-kromeka-filter-count-badge],
    .kromeka-data-table-card .card-header .kromeka-active-filters-badge[data-kromeka-query-filter-summary]
) .btn-close:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--kromeka-data-table-filter-glow);
    opacity: 1;
    outline: 0;
}

.kromeka-data-table-card .card-header .kromeka-active-filters-badge[data-kromeka-query-filter-summary] {
    white-space: normal;
    height: auto;
    min-height: var(--toolbar-control-height);
}

.kromeka-active-filters-badge[data-kromeka-query-filter-summary] .kromeka-query-filters-clear-link {
    color: var(--kromeka-data-table-thead-text) !important;
    text-decoration: underline;
    font-weight: 600;
    font-size: inherit;
}

.kromeka-active-filters-badge[data-kromeka-query-filter-summary] .kromeka-query-filters-clear-link:hover,
.kromeka-active-filters-badge[data-kromeka-query-filter-summary] .kromeka-query-filters-clear-link:focus-visible {
    color: #ffffff !important;
}

/* css/components/018-segmented-view-mode-toggle-kromeka-view-toggle.css */
/* ------------------------------------------------------------
   Segmented view-mode toggle (.kromeka-view-toggle)
   Renders a btn-group as a clean segmented control with a
   shared border and no inner gaps. Active segment = brand red.
   ------------------------------------------------------------ */
.kromeka-view-toggle {
    border-radius: var(--toolbar-control-radius);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.kromeka-view-toggle .btn {
    min-height: var(--toolbar-control-height);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: var(--toolbar-control-font-size);
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--border-color);
}

.kromeka-view-toggle .btn:last-child {
    border-right: none;
}

.kromeka-view-toggle .btn.btn-primary {
    background-color: var(--kromeka-red);
    border-color: var(--kromeka-red);
    color: #fff;
}

.kromeka-view-toggle .btn:not(.btn-primary) {
    background: transparent;
    color: var(--text-card-header);
}

.kromeka-view-toggle .btn:not(.btn-primary):hover {
    background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .kromeka-view-toggle .btn:not(.btn-primary) {
    color: var(--text-main);
}

/* End toolbar normalization
   ------------------------------------------------------------ */

.kromeka-table-filter-summary {
    font-size: 0.8125rem;
    color: var(--text-muted, var(--kromeka-grey));
}

.kromeka-table-filter-summary strong {
    color: var(--text-main, var(--kromeka-dark));
}

/* css/components/019-filter-chip-strip-removable-badges-above-the-tab.css */
/* ------------------------------------------------------------
   Filter chip strip: removable badges above the table showing
   each active column filter. Works in both light and dark themes.
   ------------------------------------------------------------ */
.kromeka-filter-chips {
    background-color: var(--kromeka-data-table-thead-bg);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.kromeka-filter-chip {
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    background-color: var(--kromeka-dark, #333) !important;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    padding: 0.3em 0.6em;
}

[data-theme="dark"] .kromeka-filter-chip,
[data-bs-theme="dark"] .kromeka-filter-chip {
    background-color: var(--kromeka-yellow, #f5b51f) !important;
    color: var(--kromeka-dark, #333) !important;
}

.kromeka-filter-chip .btn-close {
    font-size: 0.5em;
    vertical-align: middle;
    opacity: 0.7;
}

.kromeka-filter-chip .btn-close:hover {
    opacity: 1;
}

[data-theme="dark"] .kromeka-filter-chip .btn-close,
[data-bs-theme="dark"] .kromeka-filter-chip .btn-close {
    filter: none;
}

.kromeka-clear-all-chips {
    font-size: 0.78rem;
    color: #fff;
    padding: 0;
}

[data-theme="dark"] .kromeka-clear-all-chips,
[data-bs-theme="dark"] .kromeka-clear-all-chips {
    color: var(--kromeka-yellow);
}

.kromeka-clear-all-chips:hover,
.kromeka-clear-all-chips:focus-visible {
    color: #fff;
    text-decoration: underline;
}

/* Category / FK filter panel — scrollable options list */
.kromeka-filter-options-list {
    max-height: 200px;
    overflow-y: auto;
}

/* Between inputs row for number/date panels */
.kromeka-column-filter-menu [data-kromeka-filter-value-wrap-2] .d-flex {
    min-width: 0;
}

/* css/screens/020-my-tasks-page.css */
/* ------------------------------------------------------------
   My Tasks page
   - Department color dot for the unified row
   - Productivity summary card spacing
   ------------------------------------------------------------ */
.my-tasks-dept-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.my-tasks-productivity-card .card-body {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.my-tasks-row.table-danger {
    --bs-table-bg: rgba(175, 22, 30, 0.06);
}

body.col-resize-active {
    cursor: col-resize;
}

/* css/components/021-core-inline-table-save-feedback.css */
/* ------------------------------------------------------------
   Core inline table save feedback
------------------------------------------------------------ */
td.kromeka-save-feedback-saving,
th.kromeka-save-feedback-saving,
td.kromeka-save-feedback-saved,
th.kromeka-save-feedback-saved,
td.kromeka-save-feedback-error,
th.kromeka-save-feedback-error,
td.kromeka-save-feedback-unsaved,
th.kromeka-save-feedback-unsaved {
    position: relative;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

td.kromeka-save-feedback-saving,
th.kromeka-save-feedback-saving {
    border-bottom: 3px solid var(--kromeka-yellow) !important;
    box-shadow: inset 0 -2px 0 var(--kromeka-yellow);
}

td.kromeka-save-feedback-saved,
th.kromeka-save-feedback-saved {
    border-bottom: 3px solid var(--bs-success, #198754) !important;
    box-shadow: inset 0 -2px 0 var(--bs-success, #198754);
}

td.kromeka-save-feedback-error,
th.kromeka-save-feedback-error,
td.kromeka-save-feedback-unsaved,
th.kromeka-save-feedback-unsaved {
    border-bottom: 3px solid var(--kromeka-red) !important;
    box-shadow: inset 0 -2px 0 var(--kromeka-red);
}

.kromeka-save-feedback-saving :is(select, input, textarea, .form-control, .form-select, .select2-selection),
.kromeka-save-feedback-saved :is(select, input, textarea, .form-control, .form-select, .select2-selection),
.kromeka-save-feedback-error :is(select, input, textarea, .form-control, .form-select, .select2-selection),
.kromeka-save-feedback-unsaved :is(select, input, textarea, .form-control, .form-select, .select2-selection),
:is(select, input, textarea, .form-control, .form-select, .select2-selection).kromeka-save-feedback-saving,
:is(select, input, textarea, .form-control, .form-select, .select2-selection).kromeka-save-feedback-saved,
:is(select, input, textarea, .form-control, .form-select, .select2-selection).kromeka-save-feedback-error,
:is(select, input, textarea, .form-control, .form-select, .select2-selection).kromeka-save-feedback-unsaved {
    border-bottom-width: 3px !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.kromeka-save-feedback-saving :is(select, input, textarea, .form-control, .form-select, .select2-selection),
:is(select, input, textarea, .form-control, .form-select, .select2-selection).kromeka-save-feedback-saving {
    border-bottom-color: var(--kromeka-yellow) !important;
    box-shadow: inset 0 -2px 0 var(--kromeka-yellow);
}

.kromeka-save-feedback-saved :is(select, input, textarea, .form-control, .form-select, .select2-selection),
:is(select, input, textarea, .form-control, .form-select, .select2-selection).kromeka-save-feedback-saved {
    border-bottom-color: var(--bs-success, #198754) !important;
    box-shadow: inset 0 -2px 0 var(--bs-success, #198754);
}

.kromeka-save-feedback-error :is(select, input, textarea, .form-control, .form-select, .select2-selection),
.kromeka-save-feedback-unsaved :is(select, input, textarea, .form-control, .form-select, .select2-selection),
:is(select, input, textarea, .form-control, .form-select, .select2-selection).kromeka-save-feedback-error,
:is(select, input, textarea, .form-control, .form-select, .select2-selection).kromeka-save-feedback-unsaved {
    border-bottom-color: var(--kromeka-red) !important;
    box-shadow: inset 0 -2px 0 var(--kromeka-red);
}

.note-editor-wrap.kromeka-save-feedback-saving .note-editor-surface,
.note-editor-surface.kromeka-save-feedback-saving {
    border-bottom-color: var(--kromeka-yellow) !important;
    box-shadow: inset 0 -2px 0 var(--kromeka-yellow);
}

.note-editor-wrap.kromeka-save-feedback-saved .note-editor-surface,
.note-editor-surface.kromeka-save-feedback-saved {
    border-bottom-color: var(--bs-success, #198754) !important;
    box-shadow: inset 0 -2px 0 var(--bs-success, #198754);
}

.note-editor-wrap.kromeka-save-feedback-error .note-editor-surface,
.note-editor-surface.kromeka-save-feedback-error,
.note-editor-wrap.kromeka-save-feedback-unsaved .note-editor-surface,
.note-editor-surface.kromeka-save-feedback-unsaved {
    border-bottom-color: var(--kromeka-red) !important;
    box-shadow: inset 0 -2px 0 var(--kromeka-red);
}

.note-autosave-status.is-saving,
.note-autosave-status.is-saved {
    color: var(--text-muted);
}

.note-autosave-status.is-error {
    color: var(--text-danger);
}

.kromeka-flatpickr-clear {
    border-top: 1px solid var(--border-color);
    padding: 0.35rem 0.45rem;
    text-align: right;
}

.kromeka-flatpickr-clear-btn {
    border: 1px solid var(--kromeka-red);
    border-radius: 0.25rem;
    background: transparent;
    color: var(--text-danger);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.2rem 0.45rem;
}

.kromeka-flatpickr-clear-btn:hover,
.kromeka-flatpickr-clear-btn:focus-visible {
    background: var(--kromeka-red);
    color: #fff;
}

/* css/components/022-inline-task-table-editing.css */
/* ------------------------------------------------------------
   Inline task table editing
------------------------------------------------------------ */
.inline-edit-table td[data-inline-field] {
    cursor: pointer;
    position: relative;
    min-width: 120px;
    outline: none;
}

#workload-task-inline-table td[data-inline-field],
#quick-task-inline-table td[data-inline-field],
#general-workload-task-inline-table td[data-inline-field] {
    min-width: 0;
}

.inline-edit-table td[data-inline-field]:focus-visible {
    box-shadow: inset 0 0 0 2px var(--kromeka-yellow);
}

.inline-edit-table td[data-inline-field]:hover .inline-cell-display {
    text-decoration: underline;
    text-decoration-style: dotted;
}

.inline-edit-table .inline-cell-editor {
    min-width: 100%;
}

.inline-edit-table td.inline-cell-editing {
    background: rgba(245, 181, 31, 0.12);
    overflow: visible !important;
    white-space: normal;
    max-width: none;
    z-index: 4;
    position: relative;
}

/* Multi-value Select2 in SPC component grid: do not clip tags or dropdown */
.spc-comp-grid-table td:has(select[data-spc-multi="1"]),
.spc-comp-grid-table td:has(.select2-container) {
    overflow: visible !important;
    white-space: normal;
    max-width: none;
}

.spc-comp-grid-table .select2-container--default .select2-selection--multiple {
    min-height: 1.75rem !important;
    height: auto !important;
}

/* Select2 dropdown above sticky grid headers / Bootstrap modal */
.spc-comp-grid-modal .select2-container--open,
.modal.show .select2-container--open {
    z-index: 2100;
}

.inline-edit-table td.inline-cell-saving::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border: 2px solid var(--kromeka-grey);
    border-top-color: var(--kromeka-red);
    border-radius: 50%;
    animation: inline-cell-spin 0.7s linear infinite;
}

.inline-edit-table .inline-cell-saved {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.66rem;
    color: #198754;
    font-weight: 600;
}

.inline-edit-table .inline-cell-feedback {
    position: absolute;
    left: 0;
    top: calc(100% - 2px);
    z-index: 5;
    background: #dc3545;
    color: #fff;
    font-size: 0.68rem;
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
}

.inline-edit-table td.inline-cell-error {
    box-shadow: inset 0 0 0 2px #dc3545;
}

/* css/components/023-quick-task-table-prevent-text-overflow-and-allow.css */
/* ------------------------------------------------------------
   Quick task table: prevent text overflow and allow header drag
------------------------------------------------------------ */
#quick-task-inline-table th,
#quick-task-inline-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#workload-task-inline-table th,
#workload-task-inline-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#general-workload-task-inline-table th,
#general-workload-task-inline-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#quick-task-inline-table td .inline-cell-display,
#quick-task-inline-table td a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#workload-task-inline-table td .inline-cell-display,
#workload-task-inline-table td a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#general-workload-task-inline-table td .inline-cell-display,
#general-workload-task-inline-table td a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resizable-table thead th.table-col-draggable {
    cursor: grab;
}

.resizable-table thead th.table-col-draggable.table-col-dragging {
    cursor: grabbing;
    opacity: 0.65;
}

.resizable-table thead th.table-col-drop-before::before,
.resizable-table thead th.table-col-drop-after::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--kromeka-yellow);
    z-index: 20;
    pointer-events: none;
}

.resizable-table thead th.table-col-drop-before::before {
    left: 0;
}

.resizable-table thead th.table-col-drop-after::after {
    right: 0;
}

@keyframes inline-cell-spin {
    to { transform: rotate(360deg); }
}

.spin-slow {
    animation: inline-cell-spin 1.2s linear infinite;
}

/* css/screens/024-planning-workload-table-subtle-refreshing-overla.css */
/* ----------------------------------------------------------------
 * Planning workload table: subtle "refreshing" overlay used while a
 * stale-check or refresh fetch is in flight. We keep the existing
 * rows visible (so filters / scroll context is preserved) but dim the
 * table and block pointer events to signal the in-flight reload.
 * ---------------------------------------------------------------- */
.workload-refreshing {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 120ms ease-in;
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-main);
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--hover-bg);
    color: var(--text-main);
}

/* css/components/025-bootstrap-modal-theme-compatible.css */
/* ------------------------------------------------------------
   Bootstrap Modal - Theme Compatible
   Ensures modals respect dark/light theme variables.
------------------------------------------------------------ */
.modal {
    overflow: visible !important;
}

.modal-dialog {
    overflow: visible;
}

.modal-content {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
    overflow: visible;
}

.modal-header {
    border-bottom-color: var(--border-color) !important;
    color: var(--text-main);
}

.modal-header .modal-title {
    color: var(--text-accent);
}

.modal-footer {
    border-top-color: var(--border-color) !important;
}

.modal-body {
    overflow: visible;
}

/* Tall form modals: keep header/footer on screen and scroll the body.
   Needed because .modal / .modal-content / .modal-body use overflow: visible
   so native <select> menus can paint, which otherwise clips Save/Cancel.
   Use a definite max-height (not height: 100%) so max-height: 100% on the
   inner form cannot collapse to "unlimited" when the dialog height is auto.
   Bootstrap .modal-dialog-scrollable sets an explicit height; override that
   so short forms stay compact and tall forms still cap at the viewport. */
.kromeka-modal-fit.modal {
    overflow-y: auto !important;
}

.kromeka-modal-fit .modal-dialog {
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.kromeka-modal-fit .modal-dialog.modal-dialog-scrollable {
    height: auto;
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
}

.kromeka-modal-fit .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
    overflow: hidden !important;
}

.kromeka-modal-fit .modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
    overflow: hidden;
}

.kromeka-modal-fit .modal-header,
.kromeka-modal-fit .modal-footer {
    flex: 0 0 auto;
}

.kromeka-modal-fit .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto !important;
}

[data-theme="dark"] .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.modal .form-label {
    color: var(--text-main);
}

[data-theme="dark"] pre {
    color: var(--text-main);
    background-color: var(--bg-body);
    border: 1px solid var(--border-color);
    padding: 10px;
}

/* Dashboard Specific Fixes */
.badge.bg-secondary {
    background-color: var(--kromeka-dark-grey) !important;
    color: white !important;
}

/* Catalog badge (offer version header): dark text on light info background for readability */
.card-header .badge.bg-info {
    color: var(--kromeka-dark) !important;
}

.department-chef-badge {
    background-color: var(--kromeka-yellow) !important;
    color: #1d1d1b !important;
}

/* Workload toolbar (planning): Gantt-sync date-range chip — brand yellow + dark text in both themes.
   Bootstrap .bg-warning on dark pages reads as pale yellow with low contrast; avoid. */
.planning-workload-date-filter-badge {
    background-color: var(--kromeka-yellow) !important;
    color: var(--kromeka-dark) !important;
}

.planning-workload-date-filter-badge .bi,
.planning-workload-date-filter-badge [data-date-filter-label] {
    color: inherit !important;
}

.planning-workload-date-filter-badge .btn-close {
    filter: brightness(0);
    opacity: 0.55;
}

.planning-workload-date-filter-badge .btn-close:hover {
    opacity: 0.85;
}

/* Workload batch-load cue: red while fetching, green when complete. */
.planning-workload-load-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.planning-workload-load-status--loading {
    background-color: var(--kromeka-red) !important;
    color: #ffffff !important;
}

.planning-workload-load-status--loaded {
    background-color: #1f6b3a !important;
    color: #ffffff !important;
}

[data-theme="dark"] .planning-workload-load-status--loaded {
    background-color: #2f8f52 !important;
    color: #ffffff !important;
}

.planning-workload-load-status .bi {
    color: inherit !important;
    line-height: 1;
}

/* Week filter chip: show full labels (e.g. W17); avoid flex shrinking the label text */
.planning-workload-week-filter-badge [data-week-filter-label] {
    white-space: nowrap;
}

.department-workload-header {
    background-color: var(--bg-secondary);
}

.department-workload-header-medium {
    background-color: rgba(245, 181, 31, 0.22);
}

.department-workload-header-heavy {
    background-color: rgba(175, 22, 30, 0.2);
}

[data-theme="dark"] .badge.bg-light {
    background-color: var(--hover-bg) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .card-footer {
    border-top-color: var(--border-color);
}

/* Ensure badges display inline and don't break to new lines.
   Exclude active column-filter count chip: it uses flex + toolbar height (see toolbar section).
   Exclude .d-none: this rule's !important would otherwise beat Bootstrap and keep hidden badges visible. */
.badge:not([data-kromeka-filter-count-badge]):not([data-kromeka-query-filter-summary]):not(.d-none) {
    display: inline-block !important;
    vertical-align: baseline !important;
    white-space: nowrap !important;
}

/* Force links inside small/p tags to be inline */
.small a,
small a,
p.small a {
    display: inline !important;
}

/* css/components/026-select2-styling-centralized.css */
/* ------------------------------------------------------------
   Select2 Styling (Centralized)
   ------------------------------------------------------------ */
/* Base Select2 Container */
.select2-container {
    width: 100% !important;
}

/* Keep Select2 overlays above Bootstrap modal layers on mobile/desktop */
.select2-container--open {
    z-index: 2000;
}

/* Single & Multiple Selection Box — match Bootstrap .form-control height */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--input-text) !important;
    min-height: var(--kromeka-control-height) !important;
    height: var(--kromeka-control-height) !important;
    padding: 0 var(--kromeka-control-padding-x) !important;
    border-radius: 0.375rem !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

.select2-container--default .select2-selection--multiple {
    height: auto !important;
    min-height: var(--kromeka-control-height) !important;
    padding: 0.25rem 0.5rem !important;
    align-items: center !important;
}

/* Hover State */
.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--multiple:hover {
    border-color: var(--kromeka-yellow) !important;
    background-color: var(--input-hover-bg) !important;
    box-shadow: 0 0 0 0.15rem rgba(245, 181, 31, 0.2) !important;
}

/* Focus State */
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--kromeka-yellow) !important;
    box-shadow: 0 0 0 0.25rem rgba(245, 181, 31, 0.25) !important;
    outline: 0 !important;
}

/* Selected Text */
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--input-text) !important;
    padding-left: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Multiple Select2: placeholder lives on the inline search field — avoid single-line
   line-height on the <ul> (it sat the text low). Flex aligns chips + search. */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    line-height: normal !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 2px 4px !important;
    width: auto !important;
    max-width: 100%;
    flex: 0 1 auto;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-search--inline {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto;
    min-width: 8ch;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    width: 100% !important;
    min-width: 0 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 1.4em !important;
    min-height: 1.4em !important;
    vertical-align: middle !important;
    text-align: start;
}

/* Placeholder Text */
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: var(--text-muted) !important;
}

/* Arrow Icon */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 0.5rem !important;
    width: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-main) transparent transparent transparent !important;
    border-width: 5px 4px 0 4px !important;
    margin: 0 !important;
    position: static !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--text-main) transparent !important;
    border-width: 0 4px 5px 4px !important;
}

/* Multiple Selection - Tags/Chips */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--kromeka-red) !important;
    border: 1px solid var(--kromeka-red-dark) !important;
    color: #ffffff !important;
    padding: 0 0.45rem !important;
    border-radius: 0.25rem !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.4 !important;
    float: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #ffffff !important;
    margin-right: 5px !important;
    margin-left: 0 !important;
    font-weight: bold !important;
    float: none !important;
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--kromeka-yellow) !important;
}

/* Dropdown Container */
.select2-dropdown {
    background-color: var(--bg-card) !important;
    border: 2px solid var(--kromeka-yellow) !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Search Input in Dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--input-bg) !important;
    border: 2px solid var(--input-border) !important;
    color: var(--input-text) !important;
    padding: 6px 10px !important;
    border-radius: 0.25rem !important;
    margin: 8px !important;
    width: calc(100% - 16px) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--kromeka-yellow) !important;
    outline: 0 !important;
}

/* Dropdown Results — tall enough to scan a long catalog without feeling cramped.
   The check gutter is reserved on every option so labels stay aligned. */
.select2-container--default .select2-results > .select2-results__options {
    max-height: min(60vh, 24rem) !important;
}

.select2-container--default .select2-results > .select2-results__options .select2-results__option {
    position: relative;
    padding-left: 2rem !important;
}

.select2-container--default .select2-results__option {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    padding: 8px 12px !important;
}

/* Highlighted/Hover Option */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected=true]:hover {
    background-color: var(--kromeka-red) !important;
    color: #ffffff !important;
}

/* Already chosen options stay marked when the list is open. */
.select2-container--default .select2-results__option.select2-results__option--selected {
    background-color: color-mix(in srgb, var(--kromeka-yellow) 28%, var(--bg-card)) !important;
    color: var(--text-main) !important;
    font-weight: 600 !important;
}

.select2-container--default .select2-results__option.select2-results__option--selected::before {
    content: "\f633";
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: 400 !important;
    font-size: 1rem;
    line-height: 1;
    position: absolute;
    left: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-main);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selected,
.select2-container--default .select2-results__option.select2-results__option--selected:hover {
    background-color: var(--kromeka-red) !important;
    color: #ffffff !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selected::before,
.select2-container--default .select2-results__option.select2-results__option--selected:hover::before {
    color: #ffffff !important;
}

/* Disabled State */
.select2-container--default .select2-selection--single.select2-selection--disabled,
.select2-container--default .select2-selection--multiple.select2-selection--disabled {
    background-color: var(--bg-secondary) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* Clear Button */
.select2-container--default .select2-selection--single .select2-selection__clear {
    color: var(--text-muted) !important;
    margin-right: 10px !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: var(--text-danger) !important;
}

/*
 * Select2 on Bootstrap sm controls — match .form-control-sm / .form-select-sm height
 * (Packages quick-add, offer version definition picker, filter bars, etc.).
 */
select.form-select-sm + .select2-container--default .select2-selection--single,
select.form-control-sm + .select2-container--default .select2-selection--single {
    min-height: calc(1.5em + 0.5rem + 2px) !important;
    height: calc(1.5em + 0.5rem + 2px) !important;
    border-width: 1px !important;
    border-radius: var(--bs-border-radius-sm, 0.25rem) !important;
    padding: 0 1.75rem 0 0.5rem !important;
    font-size: 0.875rem !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    display: flex !important;
    align-items: center !important;
}

select.form-select-sm + .select2-container--default .select2-selection--single:hover,
select.form-control-sm + .select2-container--default .select2-selection--single:hover {
    box-shadow: none !important;
    transform: none;
}

select.form-select-sm + .select2-container--default.select2-container--focus .select2-selection--single,
select.form-select-sm + .select2-container--default.select2-container--open .select2-selection--single,
select.form-control-sm + .select2-container--default.select2-container--focus .select2-selection--single,
select.form-control-sm + .select2-container--default.select2-container--open .select2-selection--single {
    border-width: 1px !important;
}

select.form-select-sm + .select2-container--default .select2-selection--single .select2-selection__rendered,
select.form-control-sm + .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5 !important;
    font-size: 0.875rem !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding-right: 0.25rem !important;
}

select.form-select-sm + .select2-container--default .select2-selection--single .select2-selection__clear,
select.form-control-sm + .select2-container--default .select2-selection--single .select2-selection__clear {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0 !important;
    margin-right: 0.25rem !important;
    line-height: 1 !important;
    height: auto !important;
}

select.form-select-sm + .select2-container--default .select2-selection--single .select2-selection__arrow,
select.form-control-sm + .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    width: 1.5rem !important;
}

select.form-select-sm + .select2-container--default .select2-selection--single .select2-selection__arrow b,
select.form-control-sm + .select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-top: -2px !important;
}

/* Multiple Select2 on sm controls — tag pickers in filter bars, offer files, etc. */
select.form-select-sm + .select2-container--default .select2-selection--multiple,
select.form-control-sm + .select2-container--default .select2-selection--multiple {
    min-height: calc(1.5em + 0.5rem + 2px) !important;
    height: auto !important;
    border-width: 1px !important;
    border-radius: var(--bs-border-radius-sm, 0.25rem) !important;
    padding: 0.2rem 0.4rem !important;
    font-size: 0.875rem !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
}

select.form-select-sm + .select2-container--default .select2-selection--multiple:hover,
select.form-control-sm + .select2-container--default .select2-selection--multiple:hover {
    box-shadow: none !important;
}

select.form-select-sm + .select2-container--default .select2-selection--multiple .select2-selection__rendered,
select.form-control-sm + .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.2rem 0.3rem !important;
    width: auto !important;
    max-width: 100%;
    flex: 0 1 auto;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

select.form-select-sm + .select2-container--default .select2-selection--multiple .select2-selection__choice,
select.form-control-sm + .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 0 !important;
    padding: 0.05rem 0.4rem !important;
    line-height: 1.35 !important;
    font-size: 0.8125rem !important;
    display: inline-flex !important;
    align-items: center !important;
    float: none !important;
}

select.form-select-sm + .select2-container--default .select2-selection--multiple .select2-search--inline,
select.form-control-sm + .select2-container--default .select2-selection--multiple .select2-search--inline {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    flex: 1 1 auto;
    min-width: 8ch;
}

select.form-select-sm + .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field,
select.form-control-sm + .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin: 0 !important;
    padding: 0 !important;
    height: 1.35em !important;
    min-height: 1.35em !important;
    line-height: 1.35 !important;
    font-size: 0.875rem !important;
}

/* Message Tags - Interactive and Clickable */
.message-tag {
    display: inline-block;
    padding: 4px 10px;
    margin: 2px 4px 2px 0;
    border-radius: 50rem; /* Pill shape */
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    background-color: var(--kromeka-grey);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: 1px solid transparent;
}

.message-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-decoration: none;
    color: white;
    opacity: 0.9;
}

.message-tag.active {
    border-color: var(--kromeka-yellow);
    box-shadow: 0 0 0 2px rgba(245, 181, 31, 0.3);
}

.message-tag i {
    margin-right: 4px;
    font-size: 0.7rem;
}

/* Clickable navigation tags */
.message-tag-navigate,
.chat-tag-link {
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.message-tag-navigate:hover,
.chat-tag-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    opacity: 0.9;
    text-decoration: none !important;
    color: white !important;
}

/* Tag Filter Section */
.tag-filter-section {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
}

.tag-filter-section h6 {
    color: var(--text-main);
    margin-bottom: 10px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.selected-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 50rem;
    font-size: 0.75rem;
    background-color: var(--kromeka-yellow);
    color: var(--kromeka-dark);
    font-weight: 600;
}

.selected-tag .remove-tag {
    margin-left: 6px;
    cursor: pointer;
    font-weight: bold;
    opacity: 0.7;
}

.selected-tag .remove-tag:hover {
    opacity: 1;
}

/* Autocomplete Search Inputs */
.autocomplete-input {
    position: relative;
}

.autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.autocomplete-results.show {
    display: block;
}

.autocomplete-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
}

.autocomplete-item:hover {
    background-color: var(--hover-bg);
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item.selected {
    background-color: var(--kromeka-yellow);
    color: var(--kromeka-dark);
}

/* css/screens/029-gantt-planning-unified-row-architecture.css */
/* ------------------------------------------------------------
   Gantt / Planning – Unified Row Architecture
   Each row is a single CSS Grid element spanning task + timeline.
   One scroll container handles both vertical and horizontal scroll.
------------------------------------------------------------ */
.gantt-wrapper,
.gantt-overview {
    --gantt-week-width: 70px;
    --gantt-row-height: 37px;
    --gantt-task-width: 320px;
    background: var(--bg-card);
}

.gantt-classic {
    border-top: 1px solid var(--border-color);
}

/* Single scroll container for both axes */
.gantt-container {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 70vh;
    position: relative;
    scrollbar-width: thin;
}

/* Header and body rows share the same grid columns */
.gantt-header,
.gantt-row {
    display: grid;
    grid-template-columns: var(--gantt-task-width, 320px) var(--gantt-timeline-width, 2000px);
}

/* Sticky header row (stays at top on vertical scroll) */
.gantt-header {
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--border-color);
}

/* Sticky left cells (stay at left on horizontal scroll) */
.gantt-row-task,
.gantt-header-task {
    position: sticky;
    left: 0;
    z-index: 2;
}

/* Header task cell: top-left corner, highest z-index */
.gantt-header-task {
    z-index: 12;
    background: var(--bg-secondary);
    padding: 4px 10px;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    min-height: var(--gantt-row-height);
    border-right: 1px solid var(--border-color);
}

/* Header timeline cell */
.gantt-header-timeline {
    background: var(--bg-secondary);
}

/* Gantt body: relative positioning for today line, SVG overlays */
.gantt-body {
    position: relative;
}

.gantt-body.gantt-week-separators::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--gantt-task-width, 320px);
    width: var(--gantt-timeline-width, 2000px);
    pointer-events: none;
    z-index: 1;
    background-image: repeating-linear-gradient(
        to right,
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.1) 1px,
        transparent 1px,
        transparent var(--gantt-week-width)
    );
}

[data-theme="dark"] .gantt-body.gantt-week-separators::before {
    background-image: repeating-linear-gradient(
        to right,
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 0.2) 1px,
        transparent 1px,
        transparent var(--gantt-week-width)
    );
}

.gantt-weeks {
    display: flex;
    min-height: var(--gantt-row-height, 37px);
}

.gantt-week {
    flex: 0 0 auto;
    text-align: center;
    padding: 4px 2px;
    border-right: 1px solid var(--border-color);
    color: var(--text-muted);
    background: var(--bg-secondary);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gantt-week.gantt-weekend {
    background: rgba(245, 181, 31, 0.1);
}

[data-theme="dark"] .gantt-week.gantt-weekend {
    background: rgba(245, 181, 31, 0.15);
}

.gantt-week.gantt-week-start {
    border-left: 2px solid var(--kromeka-yellow);
}

.gantt-week-number {
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--kromeka-yellow);
    background: rgba(175, 22, 30, 0.9);
    padding: 1px 4px;
    border-radius: 3px;
    position: absolute;
    top: 2px;
    left: 2px;
}

.gantt-day-grid .gantt-today {
    z-index: 2;
}

.gantt-bars.gantt-day-grid {
    background-image: repeating-linear-gradient(
        to right,
        rgba(0, 0, 0, 0.08),
        rgba(0, 0, 0, 0.08) 1px,
        transparent 1px,
        transparent var(--gantt-week-width)
    ) !important;
    background-size: var(--gantt-week-width) 100%;
}

[data-theme="dark"] .gantt-bars.gantt-day-grid {
    background-image: repeating-linear-gradient(
        to right,
        rgba(255, 255, 255, 0.15),
        rgba(255, 255, 255, 0.15) 1px,
        transparent 1px,
        transparent var(--gantt-week-width)
    ) !important;
    background-size: var(--gantt-week-width) 100%;
}

.gantt-bars.gantt-week-grid {
    background-image: none;
}

[data-theme="dark"] .gantt-bars.gantt-week-grid {
    background-image: none;
}

.gantt-bars.gantt-month-grid {
    background-image: repeating-linear-gradient(
        to right,
        rgba(0, 0, 0, 0.08),
        rgba(0, 0, 0, 0.08) 1px,
        transparent 1px,
        transparent var(--gantt-week-width)
    );
}

[data-theme="dark"] .gantt-bars.gantt-month-grid {
    background-image: repeating-linear-gradient(
        to right,
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0.12) 1px,
        transparent 1px,
        transparent var(--gantt-week-width)
    );
}

.gantt-week-label {
    font-weight: 700;
    color: var(--text-main);
    font-size: 0.65rem;
}

.gantt-week.gantt-weekend .gantt-week-label {
    font-size: 0.65rem;
}

.gantt-week-date {
    font-size: 0.68rem;
}

/* Unified row: fixed height, no auto-expand */
.gantt-row {
    height: var(--gantt-row-height, 37px);
    max-height: var(--gantt-row-height, 37px);
    box-sizing: border-box;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
}

.gantt-row-task {
    padding: 2px 10px;
    background: var(--bg-card);
    border-right: 1px solid var(--border-color);
    overflow: hidden;
}

.project-planning-process-list {
    max-height: 200px;
    overflow-y: auto;
}

/* css/screens/030-gantt-row-gantt-project-row.css */
/* ---- Project rows ---- */
.gantt-row.gantt-project-row {
    border-top: 2px solid var(--border-color);
}

.gantt-row.gantt-project-row > .gantt-row-task {
    background: var(--bg-secondary);
    font-weight: 700;
    font-size: 0.88rem;
}

/* css/screens/031-gantt-row-gantt-phase-row-gantt-row-task.css */
/* ---- Phase rows ---- */
.gantt-row.gantt-phase-row > .gantt-row-task {
    padding-left: 20px;
    font-weight: 600;
    font-size: 0.82rem;
    border-left: 3px solid var(--kromeka-red);
    background: rgba(175, 22, 30, 0.04);
}

[data-theme="dark"] .gantt-row.gantt-phase-row > .gantt-row-task {
    background: rgba(175, 22, 30, 0.08);
}

/* css/screens/032-gantt-row-gantt-task-row-gantt-row-task.css */
/* ---- Task rows ---- */
.gantt-row.gantt-task-row > .gantt-row-task {
    padding-left: 40px;
}

.planning-task-check {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px;
    cursor: pointer;
    vertical-align: middle;
    margin-top: 0 !important;
}

/* Timeline cell */
.gantt-row-timeline {
    position: relative;
}

.gantt-row.gantt-project-row > .gantt-row-timeline {
    background: var(--bg-secondary);
}

.gantt-bars {
    position: relative;
    min-height: var(--gantt-row-height, 37px);
    background-image: repeating-linear-gradient(
        to right,
        rgba(0, 0, 0, 0.06),
        rgba(0, 0, 0, 0.06) 1px,
        transparent 1px,
        transparent var(--gantt-week-width)
    );
}

[data-theme="dark"] .gantt-bars {
    background-image: repeating-linear-gradient(
        to right,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.1) 1px,
        transparent 1px,
        transparent var(--gantt-week-width)
    );
}

.gantt-bar {
    position: absolute;
    top: calc((var(--gantt-row-height, 37px) - 20px) / 2);
    height: 20px;
    min-width: 10px;
    border-radius: 4px;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    color: white;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 6px;
    font-size: 0.72rem;
    cursor: grab;
    z-index: 5;
    user-select: none;
    transition: box-shadow 0.15s, opacity 0.15s;
}

.gantt-bar:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}

.gantt-wo-subtask-row .gantt-bar {
    border-width: 3px !important;
}

/* Work order parent row: one segment per sub-task (same border/fill semantics as sub-rows) */
.gantt-bar.gantt-bar--wo-segment {
    cursor: default;
    min-height: 8px;
    padding: 0 4px;
    font-size: 0.65rem;
    border-width: 3px !important;
    box-sizing: border-box;
}

.gantt-bar.gantt-bar--wo-segment:active {
    cursor: default;
}

.gantt-bar.gantt-bar-active-today {
    outline: 1.5px solid var(--kromeka-yellow);
    outline-offset: 1px;
}

.gantt-bar.gantt-bar-completed {
    background-color: var(--task-status-check-color, #3E9E5B) !important;
    opacity: 0.85;
}

.gantt-bar.gantt-bar-ready-check {
    background-color: var(--kromeka-yellow) !important;
    border-color: rgba(29, 29, 27, 0.22);
    color: var(--kromeka-dark);
    opacity: 0.95;
}

.gantt-bar.gantt-bar-ready-check .gantt-bar-label {
    text-shadow: none;
}

.gantt-bar.gantt-bar-ready-check .gantt-bar-progress {
    background: rgba(29, 29, 27, 0.12);
}

.gantt-bar.gantt-bar-cancelled {
    background-color: #878787 !important;
    opacity: 0.75;
}

/* Structured task bar tooltip (General + Project Planning Gantt) */
.gantt-task-tooltip {
    position: fixed;
    z-index: 10050;
    max-width: min(22rem, calc(100vw - 24px));
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, visibility 0.12s ease;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.gantt-task-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}

.gantt-task-tooltip-inner {
    padding: 0;
}

.gantt-task-tooltip-header {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: var(--kromeka-dark-grey);
    color: #fff;
    border-radius: 10px 10px 0 0;
}

.gantt-tooltip-dot {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin-top: 0.2rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.gantt-tooltip-dot--green {
    background: var(--task-status-check-color, #3E9E5B);
}

.gantt-tooltip-dot--yellow {
    background: var(--kromeka-yellow);
}

.gantt-tooltip-dot--red {
    background: var(--kromeka-red);
}

.gantt-tooltip-dot--grey {
    background: var(--kromeka-grey);
}

.gantt-task-tooltip-header-text {
    min-width: 0;
    flex: 1;
}

.gantt-task-tooltip-status {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    opacity: 0.95;
    margin-bottom: 0.15rem;
    line-height: 1.35;
}

.gantt-task-tooltip-title {
    font-weight: 600;
    font-size: 0.9rem;
    word-break: break-word;
}

.gantt-task-tooltip-title-secondary {
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--text-muted);
    word-break: break-word;
    margin-top: 0.1rem;
    line-height: 1.35;
}

.gantt-task-tooltip-body {
    padding: 0.55rem 0.85rem 0.75rem;
}

.gantt-task-tooltip-kv {
    display: grid;
    grid-template-columns: minmax(6.5rem, 38%) 1fr;
    gap: 0.25rem 0.75rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border-color);
    align-items: start;
}

.gantt-task-tooltip-kv:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.gantt-task-tooltip-k {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.75rem;
}

.gantt-task-tooltip-v {
    font-size: 0.8125rem;
    word-break: break-word;
}

.gantt-task-tooltip-muted {
    color: var(--text-muted);
    font-size: 0.75rem;
}

[data-theme="dark"] .gantt-task-tooltip {
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
}

.gantt-bar:active,
.gantt-bar.dragging {
    cursor: grabbing;
    opacity: 0.85;
    z-index: 15;
}

.gantt-bar.resizing {
    cursor: ew-resize;
}

/* Resize handles */
.gantt-resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    cursor: ew-resize;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 2;
}

.gantt-bar:hover .gantt-resize-handle {
    opacity: 1;
}

.gantt-resize-left {
    left: -2px;
    border-radius: 4px 0 0 4px;
    background: linear-gradient(to right, rgba(255,255,255,0.4), transparent);
}

.gantt-resize-right {
    right: -2px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(to left, rgba(255,255,255,0.4), transparent);
}

/* Dependency arrows SVG container */
.gantt-dependencies-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
    overflow: visible;
}

.gantt-dependency-line {
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 1.5;
}

.gantt-dependency-arrow {
    fill: var(--text-muted);
}

.gantt-status-arrow-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

.gantt-status-arrow-delay {
    stroke: var(--kromeka-red);
    stroke-dasharray: 6 4;
    opacity: 0.85;
}

.gantt-status-arrow-waiting {
    stroke: var(--kromeka-yellow);
    opacity: 0.95;
}

/* Floating date label while dragging/resizing bars or creating new task */
.gantt-drag-date-label {
    position: absolute;
    background: var(--bg-card);
    border: 2px solid var(--kromeka-red);
    color: var(--text-main);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transform: translateY(-100%);
    margin-top: -6px;
}

.gantt-touch-date-tag {
    position: fixed;
    background: var(--bg-card);
    border: 2px solid var(--kromeka-red);
    color: var(--text-main);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    z-index: 1100;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
    transform: translateY(-100%);
}

.gantt-bar-progress {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: rgba(255,255,255,0.16);
}

.gantt-bar-label {
    position: relative;
    z-index: 1;
    font-weight: 700;
    font-size: 0.68rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.02em;
}

.gantt-bar-empty {
    padding: 6px 10px;
    color: var(--text-muted);
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fill color is set inline in JS to match the task/milestone bar (incl. multi-assignee gradients). */
.gantt-bar-out-range {
    position: absolute;
    top: calc((var(--gantt-row-height, 37px) - 12px) / 2);
    width: 12px;
    height: 12px;
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    opacity: 0.9;
}

.gantt-bar-out-range.is-before {
    left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.gantt-bar-out-range.is-after {
    right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.gantt-bar-out-range.is-outside {
    left: 0;
}

.gantt-phase-lifecycle-bar,
.gantt-phase-summary-bar {
    pointer-events: none;
    position: absolute;
    top: calc((var(--gantt-row-height, 37px) - 22px) / 2);
    height: 22px;
    border-radius: 4px;
}

.gantt-zoom-select {
    min-width: 120px;
    max-width: 100%;
}

.project-planning-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.project-planning-toolbar__controls,
.project-planning-sort-form,
.project-planning-control-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    max-width: 100%;
}

.project-planning-toolbar__controls {
    flex: 1 1 16rem;
    gap: 0.5rem;
}

.project-planning-nav {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
}

.project-planning-toolbar .form-select,
.project-planning-toolbar .form-control,
.project-planning-toolbar .gantt-zoom-select,
.project-planning-toolbar .select2-container {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 8rem;
}

@media (min-width: 992px) and (min-height: 37.51rem) {
    .project-planning-toolbar .gantt-zoom-select,
    .project-planning-toolbar #gantt-filter-task-project {
        min-width: 7rem;
    }
}

@media (max-width: 991.98px), (max-height: 37.5rem) {
    .project-planning-sort-form,
    .project-planning-control-group {
        flex: 1 1 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .project-planning-toolbar .form-select,
    .project-planning-toolbar .form-control,
    .project-planning-toolbar .gantt-zoom-select,
    .project-planning-toolbar .select2-container {
        flex: 1 1 auto;
        width: 100% !important;
        min-width: 0;
        max-width: 100%;
        font-size: 1rem;
    }
}

.gantt-zoom-select select,
.gantt-zoom-select .select2-selection {
    box-shadow: none;
}

/* Mobile: shrink task column */
@media (max-width: 991px) {
    .gantt-wrapper,
    .gantt-overview {
        --gantt-task-width: 200px;
    }
}

@media (max-width: 575px) {
    .gantt-wrapper,
    .gantt-overview {
        --gantt-task-width: 160px;
    }
}

/* General Planning: anchor for full-height project milestone overlay (timeline strip) */
.gantt-project-group {
    position: relative;
}

.gantt-project-milestone-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--gantt-task-width, 320px);
    right: 0;
    z-index: 6;
    pointer-events: none;
}

.gantt-project-milestone-overlay .gantt-project-milestone-line {
    pointer-events: auto;
}

/* Alternate project group colors */
.gantt-project-group:nth-child(even) > .gantt-row > .gantt-row-task {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .gantt-project-group:nth-child(even) > .gantt-row > .gantt-row-task {
    background: rgba(255, 255, 255, 0.02);
}

/* Collapse groups */
.gantt-phase-group.collapsed,
.gantt-task-group.collapsed {
    display: none;
}

/* Hidden rows (filters) */
.gantt-row.gantt-row-hidden {
    display: none;
}

.gantt-row-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Compact cell layout for 32px rows */
.gantt-cell-line {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.2;
}

.gantt-cell-meta {
    font-size: 0.6rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
    line-height: 1.2;
}

.gantt-project-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-main);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.gantt-project-name:hover {
    color: var(--kromeka-yellow);
    text-decoration: underline;
}

.gantt-task-name {
    font-size: 0.7rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.gantt-task-line {
    padding-left: 4px;
}

.gantt-badge-sm {
    font-size: 0.55rem !important;
    padding: 1px 4px !important;
    line-height: 1.2;
}

.gantt-badge-xs {
    font-size: 0.5rem !important;
    padding: 1px 3px !important;
    line-height: 1.2;
}

.gantt-toggle-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 0 3px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    flex-shrink: 0;
}

.gantt-toggle-btn:hover {
    background: var(--input-hover-bg);
    color: var(--text-main);
}

.gantt-row-meta {
    margin-top: 2px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.65rem;
    color: var(--text-muted);
}

.gantt-project-title {
    font-size: 1rem;
}

.gantt-project-title-link {
    color: var(--text-main);
    font-weight: 700;
    text-decoration: none;
}

.gantt-project-title-link:hover {
    color: var(--kromeka-yellow);
    text-decoration: underline;
}

.gantt-task-main {
    gap: 8px;
}

.gantt-task-indent {
    display: inline-block;
    width: 12px;
    flex-shrink: 0;
}

.gantt-reorder-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    color: var(--text-muted);
    cursor: grab;
    user-select: none;
    opacity: 0.5;
    flex-shrink: 0;
}

.gantt-reorder-handle:hover {
    opacity: 1;
    color: var(--kromeka-yellow);
}

.gantt-reorder-handle:active {
    cursor: grabbing;
}

.gantt-task-row-item.drag-over {
    outline: 1px dashed var(--kromeka-yellow);
    outline-offset: -2px;
}

.gantt-task-title {
    font-weight: 600;
    font-size: 0.85rem;
}

.gantt-toggle {
    border-radius: 4px;
}

/* Legacy collapse classes (backward compat) */
.gantt-project-tasks.collapsed,
.gantt-project-phases.collapsed,
.gantt-phase-tasks.collapsed {
    display: none;
}

.gantt-week-hours {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.gantt-week-flags {
    font-size: 0.65rem;
    color: var(--kromeka-yellow);
}

/* Milestone marker for task rows */
.gantt-milestone {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border: 2px solid var(--kromeka-yellow);
    background: rgba(245, 181, 31, 0.2);
    transform: translate(-50%, -50%) rotate(45deg);
    z-index: 8;
    cursor: grab;
}

.gantt-milestone::before {
    content: '';
    position: absolute;
    inset: -8px;
}

.gantt-milestone:hover {
    box-shadow: 0 0 0 2px rgba(245, 181, 31, 0.25);
}

.gantt-milestone.dragging {
    cursor: grabbing;
    box-shadow: 0 0 0 3px rgba(245, 181, 31, 0.35);
}

/* Milestone vertical line + flag (matches deadline style) */
.gantt-milestone-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--kromeka-yellow);
    z-index: 7;
    cursor: ew-resize;
}

.gantt-milestone-line::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -8px;
    width: 18px;
}

.gantt-milestone-line:hover {
    box-shadow: 0 0 0 1px rgba(245, 181, 31, 0.4);
}

.gantt-milestone-line.dragging {
    cursor: grabbing;
    box-shadow: 0 0 0 2px rgba(245, 181, 31, 0.45);
}
.gantt-milestone-flag {
    position: absolute;
    top: 0;
    left: 4px;
    background: var(--kromeka-yellow);
    color: var(--kromeka-dark);
    font-size: 0.55rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 0 0 3px 3px;
    white-space: nowrap;
    pointer-events: none;
}
.gantt-milestone-line.milestone-completed {
    background: #28a745;
    opacity: 0.7;
}
.gantt-milestone-line.milestone-completed .gantt-milestone-flag {
    background: #28a745;
    color: white;
}

.gantt-production-start-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #2f7fd2;
    z-index: 6;
    pointer-events: none;
}

.gantt-status-marker {
    position: absolute;
    top: calc((var(--gantt-row-height, 37px) - 18px) / 2);
    width: 4px;
    height: 18px;
    border-radius: 999px;
    transform: translateX(-50%);
    z-index: 6;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.gantt-status-marker-finished {
    background: var(--kromeka-yellow);
}

.gantt-status-marker-checked {
    background: var(--task-status-check-color, #3E9E5B);
}

.gantt-milestone-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    z-index: 7;
    pointer-events: auto;
    cursor: default;
}

.gantt-milestone-diamond {
    position: absolute;
    top: calc((var(--gantt-row-height, 37px) - 10px) / 2);
    left: -5px;
    width: 10px;
    height: 10px;
    background: var(--kromeka-red);
    transform: rotate(45deg);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
}

.gantt-production-start-flag {
    position: absolute;
    top: 0;
    left: 4px;
    background: #2f7fd2;
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 0 0 3px 3px;
    white-space: nowrap;
    pointer-events: none;
}

.gantt-dep-lag-label {
    font-size: 10px;
    fill: var(--kromeka-red);
    font-weight: 600;
}

.gantt-deadline-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--kromeka-red);
    z-index: 5;
}

.gantt-deadline-label {
    position: absolute;
    top: 0;
    left: 4px;
    background: var(--kromeka-red);
    color: white;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 0 0 3px 3px;
    white-space: nowrap;
}

/* Full-height project-wide milestone line (between phase milestones and deadline) */
.gantt-project-milestone-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--kromeka-yellow);
    z-index: 7;
    pointer-events: auto;
    cursor: pointer;
}
.gantt-project-milestone-label {
    position: absolute;
    top: 0;
    left: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--kromeka-yellow);
    color: var(--kromeka-dark);
    padding: 1px 6px;
    border-radius: 3px;
    pointer-events: none;
}
.gantt-project-milestone-line.milestone-completed {
    background: #28a745;
    opacity: 0.7;
}
.gantt-project-milestone-line.milestone-completed .gantt-project-milestone-label {
    background: #28a745;
    color: white;
}

/* Full-height deadline line for project planning */
.gantt-deadline-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--kromeka-red);
    z-index: 8;
}

.gantt-deadline-line .gantt-deadline-label {
    position: absolute;
    top: 0;
    left: 4px;
}

/* Action links in task cells */
.gantt-action-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.65rem;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.gantt-action-link:hover {
    opacity: 1;
    color: var(--text-accent);
}

.gantt-action-link.text-danger:hover {
    color: var(--text-danger) !important;
}

.gantt-task-name-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s, text-decoration 0.15s;
}

.gantt-task-name-link:hover {
    color: var(--text-accent);
    text-decoration: underline;
}

.gantt-task-name-link.task-cancelled-name,
.workload-task-name-combo.task-cancelled-name,
.inline-cell-display.task-cancelled-name {
    color: var(--bs-secondary-color, #6c757d);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.gantt-task-name-link.task-cancelled-name:hover,
.workload-task-name-combo.task-cancelled-name:hover {
    color: var(--bs-secondary-color, #6c757d);
    text-decoration: line-through;
}

.gantt-phase-drop-target {
    cursor: default;
}

.gantt-phase-drop-highlight {
    background: rgba(175, 22, 30, 0.12);
    outline: 2px dashed var(--kromeka-red);
    outline-offset: -2px;
}

/* Legacy filter hidden class (now use .gantt-row-hidden on .gantt-row) */
.gantt-task-hidden {
    display: none;
}

.gantt-today-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--kromeka-red);
    box-shadow: 0 0 8px rgba(175, 22, 30, 0.6);
    z-index: 3;
    pointer-events: none;
}

.gantt-today-label {
    position: absolute;
    top: 0;
    left: 4px;
    background: var(--kromeka-red);
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 0 0 4px 4px;
    white-space: nowrap;
}

.gantt-nav-btn {
    min-width: 30px;
    padding: 2px 6px;
}

#gantt-today,
.gantt-inline-today-btn {
    min-width: 56px;
    font-size: 0.7rem;
    line-height: 1;
    padding: 4px 8px;
    white-space: nowrap;
}

/* Keep planning header navigation controls readable in light theme. */
:root:not([data-theme="dark"]) .card-header .gantt-nav-btn.btn-outline-secondary,
:root:not([data-theme="dark"]) .card-header #gantt-today.btn-outline-secondary {
    color: #f8f9fa;
    border-color: rgba(248, 249, 250, 0.7);
    background-color: rgba(255, 255, 255, 0.08);
}

:root:not([data-theme="dark"]) .card-header .gantt-nav-btn.btn-outline-secondary:hover,
:root:not([data-theme="dark"]) .card-header #gantt-today.btn-outline-secondary:hover,
:root:not([data-theme="dark"]) .card-header .gantt-nav-btn.btn-outline-secondary:focus,
:root:not([data-theme="dark"]) .card-header #gantt-today.btn-outline-secondary:focus {
    color: #ffffff;
    border-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.2);
}

/* Hover effects for better UX */
.gantt-row-task:hover {
    background: var(--input-hover-bg);
}

.gantt-row.gantt-project-row > .gantt-row-task:hover {
    background: var(--bg-secondary);
}

.gantt-row.gantt-phase-row > .gantt-row-task:hover {
    background: rgba(175, 22, 30, 0.07);
}

[data-theme="dark"] .gantt-row.gantt-phase-row > .gantt-row-task:hover {
    background: rgba(175, 22, 30, 0.12);
}

/* Drag to add selection */
.gantt-drag-selection {
    position: absolute;
    background: rgba(175, 22, 30, 0.15);
    border: 2px dashed var(--kromeka-red);
    height: var(--gantt-row-height, 37px);
    pointer-events: none;
    z-index: 20;
    border-radius: 4px;
}

/* Cursor for draggable project timeline area */
.gantt-row.gantt-project-row > .gantt-row-timeline {
    cursor: crosshair;
}

/* Gantt filters */
.gantt-filters {
    background: var(--bg-secondary);
}

.gantt-filters .form-label {
    color: var(--text-muted);
    font-size: 0.75rem;
}

#dept-workload-link {
    text-transform: none;
}

/* Department detail — team description preview (long text stays compact) */
.dept-team-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    word-break: break-word;
}

/* (project row hover handled above) */

.gantt-toggle:hover {
    background: var(--kromeka-red);
    border-color: var(--kromeka-red);
    color: white;
}

/* Better zebra striping for task rows */
.gantt-row.gantt-task-row:nth-child(odd) > .gantt-row-timeline .gantt-bars {
    background-color: rgba(0, 0, 0, 0.01);
}

[data-theme="dark"] .gantt-row.gantt-task-row:nth-child(odd) > .gantt-row-timeline .gantt-bars {
    background-color: rgba(255, 255, 255, 0.01);
}

/* Row height selector in header */
.gantt-row-height-control {
    display: flex;
    align-items: center;
    gap: 4px;
}

.gantt-row-height-control label {
    margin-bottom: 0;
}

.gantt-row-height-control select {
    width: auto;
    min-width: 90px;
}

/* css/components/033-flatpickr-date-picker-theme-compatible.css */
/* ------------------------------------------------------------
   Flatpickr Date Picker - Theme Compatible
------------------------------------------------------------ */
.flatpickr-calendar {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3);
    font-family: inherit;
}

/* Month header */
.flatpickr-months {
    background: var(--bg-card-header) !important;
}

.flatpickr-months .flatpickr-month {
    background: transparent !important;
    color: var(--text-card-header) !important;
    fill: var(--text-card-header) !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: var(--text-card-header) !important;
    fill: var(--text-card-header) !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    color: var(--kromeka-yellow) !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: currentColor !important;
}

.flatpickr-current-month {
    color: var(--text-card-header) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    background: transparent !important;
    color: var(--text-card-header) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: rgba(255,255,255,0.1) !important;
}

/* Weekday headers (Mon, Tue, Wed, etc.) */
.flatpickr-weekdays {
    background: var(--bg-secondary) !important;
}

.flatpickr-weekday {
    color: var(--text-main) !important;
    font-weight: 600;
    background: transparent !important;
}

/* Week numbers column - THE FIX */
.flatpickr-weekwrapper {
    background: var(--bg-secondary) !important;
}

.flatpickr-weekwrapper .flatpickr-weekday {
    color: var(--text-main) !important;
    font-weight: 700;
}

.flatpickr-weekwrapper .flatpickr-weeks {
    background: var(--bg-secondary) !important;
}

.flatpickr-weeks span.flatpickr-day,
.flatpickr-weekwrapper .flatpickr-weeks span {
    color: var(--text-muted) !important;
    background: transparent !important;
}

/* Calendar days */
.flatpickr-day {
    color: var(--text-main) !important;
    border-radius: 6px;
    background: transparent !important;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background: var(--hover-bg) !important;
    border-color: var(--border-color) !important;
}

.flatpickr-day.today {
    border-color: var(--kromeka-yellow) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--kromeka-red) !important;
    border-color: var(--kromeka-red) !important;
    color: #fff !important;
}

/* Days outside current month */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--text-muted) !important;
}

/* Disabled days */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: var(--text-muted) !important;
    opacity: 0.5;
}

/* Inner container */
.flatpickr-innerContainer {
    background: var(--bg-card) !important;
}

.flatpickr-rContainer {
    background: var(--bg-card) !important;
}

.dayContainer {
    background: var(--bg-card) !important;
}

/* Time picker */
.flatpickr-time {
    background: var(--bg-card) !important;
    border-top: 1px solid var(--border-color) !important;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
    color: var(--text-main) !important;
    background: var(--input-bg) !important;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
    background: var(--hover-bg) !important;
}

/* Arrows */
.flatpickr-calendar.arrowTop:before {
    border-bottom-color: var(--border-color) !important;
}

.flatpickr-calendar.arrowTop:after {
    border-bottom-color: var(--bg-card-header) !important;
}

/* css/screens/035-project-detail-hero-header.css */
/* ------------------------------------------------------------
   Project Detail Hero Header
   ------------------------------------------------------------ */

.project-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.project-hero-main {
    min-width: 0;
    flex: 1 1 auto;
}

.project-eyebrow {
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 10px;
}

.project-title-block {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin-top: 8px;
}

.project-title {
    margin: 0;
    min-width: 0;
    color: var(--text-accent);
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.project-code-badge {
    flex-shrink: 0;
}

.project-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.project-meta-site {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.project-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--kromeka-dark-grey);
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
}

.project-meta-chip i {
    flex-shrink: 0;
}

.project-meta-chip > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-status-wrap {
    flex-shrink: 0;
}

.project-meta-row .status-badge,
.project-status-wrap .status-badge {
    flex-shrink: 0;
    white-space: nowrap;
}

.project-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
}

.project-hero + .detail-tabs {
    margin-top: 24px;
}

@media (max-width: 767.98px) {
    .project-hero {
        display: block;
    }

    .project-title-block {
        display: block;
    }

    .project-code-badge {
        display: inline-flex;
        margin-bottom: 10px;
    }

    .project-title {
        font-size: clamp(2.35rem, 9vw, 3rem);
        line-height: 1.08;
    }

    .project-meta-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        margin-top: 16px;
    }

    .project-meta-row > .project-meta-chip {
        max-width: 100%;
    }

    .project-status-wrap {
        justify-self: end;
        min-width: 0;
    }

    .project-meta-row .status-badge,
    .project-status-wrap .status-badge {
        max-width: 100%;
    }

    .project-meta-site {
        margin-top: 10px;
    }

    .project-hero-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
        gap: 10px;
        margin-top: 14px;
        width: 100%;
    }

    .project-hero-actions:not(:has(.btn-outline-secondary)) {
        grid-template-columns: 1fr;
    }

    .project-hero-actions > .btn,
    .project-hero-actions > .dropdown > .btn {
        width: 100%;
        min-height: 46px;
    }

    .project-hero + .detail-tabs {
        margin-top: 28px;
    }
}

.project-detail-progress-track {
    height: 30px;
}

.project-detail-icon-xs {
    font-size: 0.7rem;
}

.project-detail-deadline-item {
    border-left: 3px solid var(--kromeka-red);
}

.project-detail-deadline-badge {
    font-size: 0.65em;
}

.project-detail-deadline-input {
    width: 10rem;
}

.project-detail-shipment-progress {
    height: 4px;
    width: 3.75rem;
}

.task-form-comments-list {
    max-height: 400px;
    overflow-y: auto;
}

.phase-filter-assigned { min-width: 140px; }
.phase-filter-status { min-width: 130px; }
.phase-filter-date { width: 110px; }
.phase-col-handle { width: 28px; }
.phase-col-check { width: 32px; }

/* css/components/036-detail-page-tabs-project-customer.css */
/* ------------------------------------------------------------
   Detail Page Tabs (Project / Customer)
   ------------------------------------------------------------ */

.detail-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    border-bottom: 1px solid var(--border-color);
}

.detail-tabs .nav-link {
    color: var(--tab-inactive-text, var(--text-muted));
    border: none;
    border-bottom: 3px solid transparent;
    padding: 8px 0;
    white-space: nowrap;
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.15s, border-color 0.15s;
}

.detail-tabs .nav-link:hover {
    color: var(--text-accent);
    border-bottom-color: rgba(175, 22, 30, 0.3);
    background: transparent;
}

.detail-tabs .nav-link.active {
    color: var(--text-accent);
    border-bottom-color: var(--kromeka-red);
    background: transparent;
}

.detail-tabs .nav-link .badge {
    font-size: 0.65rem;
    vertical-align: middle;
}

[data-theme="dark"] .detail-tabs {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .detail-tabs .nav-link {
    color: var(--text-muted);
}

[data-theme="dark"] .detail-tabs .nav-link:hover {
    color: var(--kromeka-yellow);
    border-bottom-color: rgba(245, 181, 31, 0.3);
}

[data-theme="dark"] .detail-tabs .nav-link.active {
    color: var(--kromeka-yellow);
    border-bottom-color: var(--kromeka-yellow);
}

/* css/components/037-files-tab-table-ui.css */
/* ------------------------------------------------------------
   Files Tab – Table & UI
   ------------------------------------------------------------ */

.files-table th {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.files-table td {
    font-size: 0.88rem;
    vertical-align: middle;
}

.files-sort-link {
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.files-sort-link:hover {
    color: var(--text-accent);
}

.files-sort-link i {
    font-size: 0.65rem;
    margin-left: 2px;
}

.files-thumb {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.files-type-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    width: 36px;
    text-align: center;
}

.files-filename {
    max-width: 260px;
    display: inline-block;
    color: var(--link-color);
    text-decoration: none;
}

.files-source-badge {
    background-color: var(--bg-secondary);
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

.files-filename:hover {
    text-decoration: underline;
}

.files-table-scroll {
    overflow-x: auto;
}

.files-table {
    min-width: 720px;
}

.files-table th:first-child,
.files-table td:first-child {
    min-width: 180px;
}

.files-table th:last-child,
.files-table td:last-child {
    min-width: 7.5rem;
}

.files-row-actions .btn {
    min-height: 2.25rem;
}

.cpq-doc-col-num { width: 80px; }
.cpq-doc-col-preview { width: 100px; }

#drop-zone {
    border-color: var(--border-color);
    cursor: pointer;
}

#drop-zone.drag-over {
    background-color: var(--hover-bg);
    border-color: var(--kromeka-yellow) !important;
}

/* css/components/038-project-files-folder-tree.css */
/* ------------------------------------------------------------
   Project Files folder tree
   ------------------------------------------------------------ */

.kromeka-files-layout {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.files-type-select {
    width: auto;
    min-width: 9rem;
    max-width: 16rem;
}

.files-col-select {
    width: 2.25rem;
}

.kromeka-files-linked-note {
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.kromeka-files-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.kromeka-files-toolbar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.kromeka-files-toolbar__row--upload {
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

.kromeka-files-toolbar__search {
    flex: 1 1 16rem;
    max-width: 20rem;
    min-width: 12rem;
}

.kromeka-files-toolbar__count {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.kromeka-files-toolbar__hint {
    margin: 0;
    flex: 1 1 12rem;
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.kromeka-files-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.kromeka-files-toolbar__upload-as {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.kromeka-files-toolbar .files-type-select {
    flex: 0 0 auto;
}

.kromeka-files-toolbar__row > .btn-group {
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
}

/* One height for search, filters, Archive, type, and upload. */
.kromeka-files-toolbar :is(.form-control, .form-select, .btn) {
    height: var(--toolbar-control-height);
    min-height: var(--toolbar-control-height);
    box-sizing: border-box;
    font-size: var(--toolbar-control-font-size);
    line-height: 1;
}

.kromeka-files-toolbar :is(.btn, .btn-group > .btn, .input-group > .btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
}

.kromeka-files-toolbar :is(.form-control, .form-select) {
    padding-top: 0;
    padding-bottom: 0;
}

.kromeka-files-toolbar .input-group > .form-control {
    height: var(--toolbar-control-height);
    min-height: var(--toolbar-control-height);
}

.kromeka-files-toolbar .files-archive-facet .badge {
    line-height: 1;
    padding: 0.15rem 0.4rem;
}

.kromeka-files-panes {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    min-height: 320px;
}

.kromeka-file-tree-pane {
    flex: 0 0 260px;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    min-height: 280px;
}

.kromeka-file-tree-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.kromeka-file-tree-title {
    font-weight: 600;
    color: var(--text-main);
}

.kromeka-file-tree {
    padding: 0.5rem;
    overflow: auto;
    flex: 1;
}

.kromeka-files-related__label {
    margin: 0.35rem 0.4rem 0.15rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.kromeka-file-tree-link {
    text-decoration: none;
}

.kromeka-files-mobile-nav .kromeka-files-related {
    margin-bottom: 0.75rem;
    padding: 0.35rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.kromeka-file-tree-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.4rem;
    border-radius: 4px;
    color: var(--text-main);
    cursor: pointer;
    min-height: 36px;
}

.kromeka-file-tree-row:hover,
.kromeka-file-tree-row:focus {
    background: var(--bg-secondary);
    outline: none;
}

.kromeka-file-tree-row.is-selected {
    background: rgba(175, 22, 30, 0.12);
    box-shadow: inset 2px 0 0 var(--kromeka-red);
}

[data-theme="dark"] .kromeka-file-tree-row.is-selected {
    background: rgba(245, 181, 31, 0.12);
    box-shadow: inset 2px 0 0 var(--kromeka-yellow);
}

.kromeka-file-tree-row.is-drop-target,
.kromeka-files-dropzone.is-drop-target {
    outline: 2px dashed var(--kromeka-yellow);
    outline-offset: -2px;
}

.kromeka-file-tree-toggle,
.kromeka-file-tree-menu-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kromeka-file-tree-toggle-spacer {
    width: 28px;
    flex-shrink: 0;
}

.kromeka-file-tree-icon {
    color: var(--kromeka-yellow);
    flex-shrink: 0;
}

.kromeka-file-tree-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kromeka-file-tree-count {
    color: var(--text-muted);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.kromeka-file-tree-children {
    margin: 0;
    padding-left: 1rem;
}

.kromeka-file-tree-virtual {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

.kromeka-files-main {
    flex: 1;
    min-width: 0;
}

.kromeka-files-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    color: var(--text-muted);
}

.kromeka-files-crumb {
    border: none;
    background: transparent;
    color: var(--link-color);
    padding: 0.15rem 0.2rem;
}

.kromeka-files-crumb.is-current {
    color: var(--text-main);
    font-weight: 600;
}

.kromeka-files-layout.is-loading .kromeka-files-dropzone,
.kromeka-files-layout.is-uploading .kromeka-files-dropzone {
    opacity: 0.6;
    pointer-events: none;
}

.kromeka-files-draggable-row.is-dragging {
    opacity: 0.5;
}

@media (max-width: 767.98px) {
    .kromeka-files-panes {
        display: block;
    }
}

/* Delete modal option buttons */
#deleteFileModal .btn {
    text-align: left;
    padding: 0.75rem 1rem;
}

#deleteFileModal .btn small {
    font-weight: normal;
}

/* Responsive: stack on mobile */
@media (max-width: 767.98px) {
    .files-table th.files-col-size,
    .files-table td.files-col-size,
    .files-table th.files-col-actions,
    .files-table td.files-col-actions {
        display: none;
    }

    .kromeka-files-toolbar__search,
    .kromeka-files-toolbar__row > .btn-group,
    .kromeka-files-toolbar__actions,
    .kromeka-files-toolbar__upload-as {
        flex-basis: 100%;
        max-width: 100%;
    }

    .kromeka-files-toolbar__row > .btn-group > .btn {
        flex: 1 1 0;
        min-width: 0;
        padding-left: 0.35rem;
        padding-right: 0.35rem;
        white-space: nowrap;
    }

    .kromeka-files-toolbar__search {
        min-width: 0;
    }

    .kromeka-files-toolbar__actions,
    .kromeka-files-toolbar__upload-as {
        margin-left: 0;
        flex-wrap: wrap;
        white-space: normal;
    }

    .files-type-select {
        min-width: 9rem;
        max-width: 14rem;
    }

    .files-filename {
        max-width: 140px;
    }

    .detail-tabs .nav-link {
        padding: 8px 0;
        font-size: 0.8rem;
    }

    .detail-tabs .nav-link i {
        margin-right: 0 !important;
    }
}

/* css/screens/039-milestone-card-dashboard.css */
/* ============================================================
   Milestone Card (Dashboard)
   ============================================================ */
.milestone-item .form-check-input {
    width: 1.2em;
    height: 1.2em;
    cursor: pointer;
}
.milestone-item .form-check-input:checked {
    background-color: #28a745;
    border-color: #28a745;
}
.milestone-item:hover {
    background-color: rgba(0,0,0,.03);
}
[data-theme="dark"] .milestone-item:hover {
    background-color: rgba(255,255,255,.05);
}

/* css/components/040-mention-autocomplete.css */
/* ============================================================
   Mention Autocomplete
   ============================================================ */
.mention-dropdown {
    position: absolute;
    z-index: 1200;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
    border-radius: 6px;
    padding: 4px;
}

.mention-item {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-main);
    text-align: left;
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    padding: .45rem .55rem;
    border-radius: 4px;
    cursor: pointer;
}

.mention-item:hover,
.mention-item.active {
    background: var(--hover-bg);
}

.mention-item .mention-label {
    font-size: .86rem;
    font-weight: 600;
}

.mention-item .mention-meta {
    font-size: .72rem;
    opacity: .75;
    white-space: nowrap;
}

a.kromeka-mention,
.weekly-meeting-note-display a.kromeka-mention,
.weekly-meeting-note-editor-surface a.kromeka-mention {
    color: var(--text-accent);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--kromeka-red) 45%, transparent);
}

a.kromeka-mention:hover,
a.kromeka-mention:focus-visible {
    color: var(--link-color);
    border-bottom-color: var(--kromeka-red);
}

[data-theme="dark"] a.kromeka-mention,
[data-theme="dark"] .weekly-meeting-note-display a.kromeka-mention,
[data-theme="dark"] .weekly-meeting-note-editor-surface a.kromeka-mention {
    border-bottom-color: color-mix(in srgb, var(--kromeka-yellow) 50%, transparent);
}

[data-theme="dark"] a.kromeka-mention:hover,
[data-theme="dark"] a.kromeka-mention:focus-visible {
    color: #ffffff;
    border-bottom-color: var(--kromeka-yellow);
}

a.kromeka-mention--department {
    color: var(--kromeka-dark-grey);
    border-bottom-color: color-mix(in srgb, var(--kromeka-dark-grey) 45%, transparent);
}

[data-theme="dark"] a.kromeka-mention--department {
    color: color-mix(in srgb, var(--kromeka-yellow) 85%, #ffffff);
    border-bottom-color: color-mix(in srgb, var(--kromeka-yellow) 40%, transparent);
}

a.kromeka-mention--user {
    color: var(--text-accent);
}

/* css/screens/041-note-editor-shared-styles-for-contenteditable-ri.css */
/* ------------------------------------------------------------
 * Note Editor – shared styles for contenteditable rich-text
 * surfaces used on entity detail pages and the Notebook page.
 * ------------------------------------------------------------ */
.note-editor-wrap > textarea[name="content_html"] {
    display: none;
}

.note-editor-surface {
    min-height: 140px;
    max-height: 340px;
    overflow: auto;
    line-height: 1.6;
    padding: .65rem .75rem;
    font-family: var(--note-font-family);
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--text-main);
}

.note-editor-surface:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
}

.note-editor-surface hr,
.nb-editor-surface hr {
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: 1rem 0;
    opacity: 1;
}

.note-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.note-editor-toolbar .btn {
    min-width: 2rem;
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    color: var(--text-main);
    background: var(--bg-card);
    border-color: var(--border-color);
}

.note-editor-toolbar .btn:hover,
.note-editor-toolbar .btn:focus-visible,
.note-editor-toolbar .btn.show {
    color: var(--text-main);
    background: var(--hover-bg);
    border-color: var(--border-color);
}

.note-editor-toolbar .dropdown-menu {
    background: var(--bg-card);
    color: var(--text-main);
    border-color: var(--border-color);
    z-index: 1080;
}

.note-editor-toolbar .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-main);
}

.note-editor-toolbar .dropdown-item:hover,
.note-editor-toolbar .dropdown-item:focus {
    color: var(--text-main);
    background: var(--hover-bg);
}

.note-editor-toolbar .dropdown-item:disabled,
.note-editor-toolbar .dropdown-item.disabled {
    color: var(--text-muted);
    background: transparent;
}

.note-editor-toolbar .dropdown-item.note-editor-danger-item {
    color: var(--text-danger);
}

.note-editor-toolbar .dropdown-item.note-editor-danger-item:hover,
.note-editor-toolbar .dropdown-item.note-editor-danger-item:focus {
    color: var(--text-danger);
    background: var(--hover-bg);
}

.note-editor-toolbar .dropdown-divider {
    border-top-color: var(--border-color);
}

.note-editor-surface :is(b, strong),
.notebook-note-content :is(b, strong) {
    font-weight: 600;
}

.note-editor-surface :is(h1, h2, h3),
.notebook-note-content :is(h1, h2, h3) {
    font-weight: 600;
    color: var(--text-accent);
}

.note-editor-surface h1,
.notebook-note-content h1 {
    font-size: 1.35rem;
    line-height: 1.3;
    margin: 0.35rem 0 0.2rem;
}

.note-editor-surface h2,
.notebook-note-content h2 {
    font-size: 1.15rem;
    line-height: 1.35;
    margin: 0.3rem 0 0.15rem;
}

.note-editor-surface h3,
.notebook-note-content h3 {
    font-size: 1.05rem;
    line-height: 1.35;
    margin: 0.25rem 0 0.1rem;
}

.note-editor-surface code,
.notebook-note-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    font-weight: 400;
    color: var(--text-main);
    background: var(--bg-secondary);
    padding: 0.05em 0.3em;
    border-radius: 0.25rem;
}

.note-editor-surface table,
.notebook-note-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
}

.note-editor-surface th,
.note-editor-surface td,
.notebook-note-content th,
.notebook-note-content td {
    border: 1px solid var(--border-color);
    padding: 0.35rem 0.5rem;
    vertical-align: top;
    min-width: 3rem;
    color: var(--text-main);
}

.note-editor-surface th,
.notebook-note-content th {
    background: var(--bg-secondary);
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .note-editor-toolbar .btn {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }
}

/* Project detail dashboard card — compact editor without changing Notebook defaults */
.project-details-note-editor-wrap .note-editor-surface {
    min-height: 88px;
    max-height: 300px;
}

.project-details-note-editor-wrap .note-editor-toolbar {
    margin-bottom: 0.25rem;
}

/* To-do checkbox lists inside note editor and rendered note content */
.note-todo-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: .5rem;
}
.note-todo-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
    padding: 2px 0;
}
.note-todo-list input[type="checkbox"] {
    margin-top: 0.3em;
    flex-shrink: 0;
    cursor: pointer;
}
.note-todo-list .note-todo-list {
    margin-left: 1.5em;
}

.note-item .note-content p:last-child,
.notebook-note-content p:last-child {
    margin-bottom: 0;
}

.notebook-note-card {
    padding: .6rem .85rem;
    border-left: 3px solid var(--kromeka-yellow) !important;
    transition: background-color .15s ease;
}

.notebook-note-clickable {
    cursor: pointer;
}

.notebook-note-clickable:hover .nb-note-preview {
    opacity: .88;
}

.notebook-edit-panel {
    font-size: .9rem;
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main);
}

.notebook-edit-panel .form-control,
.notebook-edit-panel .form-select {
    background-color: var(--input-bg);
    color: var(--input-text);
    border-color: var(--input-border);
}

.notebook-edit-panel .form-control:focus,
.notebook-edit-panel .form-select:focus {
    background-color: var(--input-focus-bg);
    color: var(--input-focus-text);
}

.notebook-edit-panel .note-editor-surface {
    background-color: var(--input-bg);
    color: var(--input-text);
    border-color: var(--input-border);
}

.notebook-note-content {
    max-height: 120px;
    overflow: hidden;
    position: relative;
    font-family: var(--note-font-family);
    font-weight: 400;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--text-main);
}

.notebook-note-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 28px;
    background: linear-gradient(transparent, var(--bg-card, #fff));
    pointer-events: none;
}

.note-linked-panel {
    border: 1px dashed var(--border-color);
    border-radius: .4rem;
    padding: .5rem .6rem;
}

.notebook-shell {
    display: grid;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.notebook-sidebar {
    position: sticky;
    top: 1rem;
    align-self: start;
    max-height: calc(100vh - 2rem);
}

/* Full Notebook page — tall main column; embedded tab uses .notebook-embedded-note overrides */
.notebook-layout-compact:not(.notebook-embedded-note) .notebook-main {
    min-height: calc(100vh - 9rem);
    max-height: calc(100vh - 4.5rem);
    overflow: hidden;
}

.notebook-layout-compact:not(.notebook-embedded-note) .notebook-editor-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Entity Notes tab: avoid 100vh clipping inside project/customer panels */
.notebook-embedded-note.notebook-layout-compact .notebook-main {
    min-height: auto;
    max-height: none;
    overflow: visible;
}

.notebook-embedded-note.notebook-layout-compact .notebook-editor-body {
    overflow: visible;
    min-height: 0;
}

.notebook-embedded-note.notebook-layout-compact .notebook-editor-body .nb-editor-form .note-editor-surface.nb-editor-surface {
    min-height: 14rem;
    max-height: min(52vh, 480px);
    flex: 1 1 auto;
    overflow-y: auto;
    border-radius: 0.5rem;
    padding: 1rem 1.15rem;
}

.nb-flex-minh {
    min-height: 0;
}

.nb-attachments-top-rule {
    border-top: 1px solid var(--border-color);
}

.notebook-sidebar .card-header,
.notebook-main .card-header.notebook-editor-header {
    background: var(--bg-card);
    color: var(--text-main);
    border-bottom: 1px solid var(--border-color);
    text-transform: none;
    letter-spacing: 0;
    padding: .75rem .9rem;
}

.notebook-main .card-header.notebook-editor-header {
    padding: 0.9rem 1.1rem;
}

.notebook-editor-heading h5 {
    color: var(--text-main);
    margin-bottom: 0.15rem;
    font-size: 1.15rem;
    font-weight: 600;
}

.notebook-main .notebook-editor-body {
    padding: 1rem 1.1rem 0.85rem;
    gap: 0.85rem;
}

.nb-editor-form {
    gap: 0.75rem;
}

.nb-editor-meta-row .form-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.nb-context-value {
    min-height: var(--kromeka-control-height);
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    background: var(--bg-secondary);
    color: var(--text-main);
    font-size: 0.95rem;
}

.nb-editor-meta-row .form-control {
    min-height: var(--kromeka-control-height);
}

.nb-header-actions {
    gap: 0.45rem;
    flex-shrink: 0;
}

.nb-header-actions .nb-btn-primary,
.nb-header-actions .nb-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.25rem;
    padding: 0.3rem 0.8rem;
    font-weight: 600;
}

.nb-header-actions .nb-btn-primary,
.nb-header-actions .nb-btn-primary:disabled {
    background-color: var(--action-primary-bg);
    border-color: var(--action-primary-bg);
    color: var(--action-primary-text);
}

.nb-header-actions .btn:disabled {
    opacity: 0.45;
}

.nb-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 0.45rem;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.nb-btn-icon:hover,
.nb-btn-icon:focus-visible,
.nb-btn-icon.show {
    background: var(--hover-bg);
    color: var(--text-main);
    border-color: var(--border-color);
}

.notebook-editor-header .dropdown-menu {
    min-width: 12.5rem;
    padding: 0.35rem;
}

.notebook-editor-header .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    border-radius: 0.35rem;
    padding: 0.45rem 0.7rem;
    color: var(--text-main);
}

.notebook-editor-header .dropdown-menu .dropdown-item:hover,
.notebook-editor-header .dropdown-menu .dropdown-item:focus {
    background: var(--hover-bg);
    color: var(--text-main);
}

.notebook-editor-header .dropdown-menu .dropdown-item:disabled {
    color: var(--text-muted) !important;
    background: transparent;
}

.notebook-editor-header .dropdown-menu button.dropdown-item.nb-dropdown-danger,
.notebook-editor-header .dropdown-menu button.dropdown-item.nb-dropdown-danger:hover,
.notebook-editor-header .dropdown-menu button.dropdown-item.nb-dropdown-danger:focus,
.notebook-editor-header .dropdown-menu button.dropdown-item.nb-dropdown-danger:disabled {
    color: var(--text-danger) !important;
}

.notebook-editor-header .dropdown-item.nb-dropdown-danger:hover,
.notebook-editor-header .dropdown-item.nb-dropdown-danger:focus {
    background: var(--hover-bg);
}

[data-theme="dark"] .notebook-editor-header .dropdown-menu button.dropdown-item.nb-dropdown-danger,
[data-theme="dark"] .notebook-editor-header .dropdown-menu button.dropdown-item.nb-dropdown-danger:hover,
[data-theme="dark"] .notebook-editor-header .dropdown-menu button.dropdown-item.nb-dropdown-danger:focus,
[data-theme="dark"] .notebook-editor-header .dropdown-menu button.dropdown-item.nb-dropdown-danger:disabled {
    color: color-mix(in srgb, var(--kromeka-red) 40%, white) !important;
}

.notebook-tree {
    max-height: calc(100vh - 9rem);
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: .5rem;
    background: var(--bg-card);
    padding: .35rem;
}

.nb-tree-row {
    margin-bottom: 2px;
}

.nb-tree-main {
    display: flex;
    align-items: center;
    min-height: 40px;
    border-radius: .4rem;
    cursor: pointer;
    transition: background-color .16s ease;
}

.nb-tree-main:hover {
    background: var(--hover-bg);
}

.nb-tree-row.active > .nb-tree-main {
    background: var(--notebook-select-bg);
}

.nb-tree-row.nb-tree-draggable-note .nb-tree-main {
    cursor: grab;
}

.nb-tree-row.nb-tree-draggable-note:active .nb-tree-main {
    cursor: grabbing;
}

.nb-tree-row.nb-tree-drop-target > .nb-tree-main {
    outline: 2px solid var(--kromeka-yellow);
    outline-offset: -2px;
    background: var(--hover-bg);
}

.nb-tree-toggle,
.nb-tree-toggle-spacer {
    width: 20px;
    min-width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nb-tree-toggle {
    border: none;
    background: transparent;
    color: var(--text-muted);
    padding: 0;
    transition: transform .18s ease;
}

.nb-tree-row.expanded > .nb-tree-main .nb-tree-toggle {
    transform: rotate(90deg);
}

.nb-node-icon {
    width: 22px;
    min-width: 22px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nb-node-text-block {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
}

.nb-node-title {
    font-size: 13px;
    line-height: 1.15;
    color: var(--text-main);
}
.nb-node-code {
    font-size: 11px;
    font-weight: 600;
    color: var(--kromeka-grey);
    margin-right: 2px;
}

.nb-node-date {
    font-size: 10px;
    line-height: 1.1;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nb-level-0 .nb-node-title {
    font-size: 14px;
    font-weight: 600;
}

.nb-level-1 .nb-node-title {
    font-size: 13px;
    font-weight: 400;
}

.nb-level-2 .nb-node-title,
.nb-note-title {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-main);
}

.nb-tree-children {
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease;
}

.nb-tree-row.expanded > .nb-tree-children {
    max-height: 3000px;
}

.nb-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.nb-btn-primary,
.nb-btn-secondary,
.nb-btn-danger,
.nb-btn-icon-danger {
    border-radius: .45rem;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.nb-btn-primary {
    background: var(--action-primary-bg);
    color: var(--action-primary-text);
    border: 1px solid var(--action-primary-bg);
}

.nb-btn-primary:hover,
.nb-btn-primary:focus {
    background: var(--action-primary-hover);
    border-color: var(--action-primary-hover);
    color: var(--action-primary-text);
}

.nb-btn-secondary {
    background: var(--action-secondary-bg);
    color: var(--action-secondary-text);
    border: 1px solid var(--action-secondary-border);
}

.nb-btn-secondary:hover,
.nb-btn-secondary:focus {
    background: var(--action-secondary-hover-bg);
    color: var(--action-secondary-text);
    border-color: var(--action-secondary-border);
}

.nb-btn-danger {
    background: var(--action-danger-bg);
    color: var(--action-danger-text);
    border: 1px solid var(--action-danger-bg);
}

.nb-btn-danger:hover,
.nb-btn-danger:focus {
    background: var(--action-danger-hover);
    border-color: var(--action-danger-hover);
    color: var(--action-danger-text);
}

.nb-btn-icon-danger {
    background: transparent;
    color: var(--action-danger-bg);
    border: 1px solid transparent;
}

.nb-btn-icon-danger:hover {
    background: var(--hover-bg);
    color: var(--action-danger-hover);
}

.nb-dirty-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .2rem .55rem;
    background: var(--unsaved-bg);
    color: var(--unsaved-text);
    font-size: .72rem;
    font-weight: 600;
}

/* Full Notebook page: tall flexible editor (entity Notes tab uses .notebook-embedded-note rules above) */
.notebook-layout-compact:not(.notebook-embedded-note) .notebook-editor-body .nb-editor-form .note-editor-surface.nb-editor-surface {
    min-height: 12rem;
    max-height: none;
    flex: 1 1 auto;
    overflow-y: auto;
    border-radius: 0.5rem;
    padding: 1rem 1.15rem;
}

.notebook-layout-compact .note-editor-surface.nb-editor-surface:focus {
    border-color: var(--kromeka-yellow);
    box-shadow: var(--kromeka-select-focus-ring);
    background: var(--input-focus-bg);
    color: var(--input-focus-text);
}

.notebook-layout-compact .nb-editor-surface-column .note-editor-toolbar {
    margin-bottom: 0.35rem !important;
    flex-shrink: 0;
    gap: 0.55rem;
}

.notebook-layout-compact .note-editor-toolbar .btn-group {
    display: inline-flex;
    gap: 0.15rem;
}

.notebook-layout-compact .note-editor-toolbar .btn-group > .btn {
    border-radius: 0.4rem !important;
}

.notebook-layout-compact .note-editor-toolbar .btn-group > .btn + .btn {
    margin-left: 0;
}

.nb-tags-wrap .select2-container {
    width: 100% !important;
}

.nb-tags-wrap select.form-select-sm + .select2-container--default .select2-selection--multiple {
    min-height: var(--kromeka-control-height) !important;
    padding: 0.3rem 0.55rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.95rem !important;
}

.nb-tags-wrap .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    border-radius: 999px !important;
    padding: 0.05rem 0.15rem 0.05rem 0.45rem !important;
    font-weight: 500;
}

.nb-tags-wrap .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--text-muted) !important;
    margin-right: 0 !important;
    margin-left: 0.15rem !important;
    order: 1;
}

.nb-tags-wrap .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--text-danger) !important;
}

[data-theme="dark"] .nb-tags-wrap .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: color-mix(in srgb, var(--kromeka-red) 40%, white) !important;
}

.nb-tags-wrap .select2-search__field::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

/* Embedded / tab notebook + other nb-editor-form: keep bounded editor */
.nb-editor-form .note-editor-surface:not(.nb-editor-surface) {
    min-height: 220px;
    max-height: 420px;
}

.notebook-edit-panel .note-editor-surface {
    min-height: 220px;
    max-height: 420px;
}

.nb-upload-dropzone {
    border: 1px dashed var(--border-color);
    border-radius: .5rem;
    background: var(--bg-card);
    min-height: 64px;
    padding: .75rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--text-muted);
}

.nb-upload-dropzone.is-dragover {
    background: var(--hover-bg);
    border-color: var(--kromeka-yellow);
}

.notebook-layout-compact .nb-upload-dropzone {
    min-height: 2.5rem;
    padding: 0.35rem 0.75rem;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.nb-attachments-section {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.nb-attachments-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-main);
}

.nb-attachments-hint {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.nb-upload-dropzone .nb-btn-primary {
    margin-left: auto;
}

#nb-attachment-upload-status:empty {
    display: none;
}

@media (max-width: 575.98px) {
    .nb-header-actions .nb-btn-primary,
    .nb-header-actions .nb-btn-secondary,
    .nb-btn-icon {
        min-height: 2.75rem;
    }

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

.notebook-layout-compact .nb-attachments {
    max-height: 140px;
}

.nb-attachments {
    border: 1px solid var(--border-color);
    border-radius: .5rem;
    background: var(--bg-card);
    padding: .3rem .6rem;
    max-height: 230px;
    overflow-y: auto;
}

.nb-attachment-row {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    border-bottom: 1px solid var(--border-color);
}

.nb-attachment-row:last-child {
    border-bottom: none;
}

.nb-attachment-file {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.nb-file-icon {
    color: var(--text-muted);
}

/* Notebook attachments — image thumbnail rows + inline-image controls. */
.nb-attachment-row--image {
    align-items: flex-start;
    padding: .35rem 0;
}

.nb-attachment-thumb-link {
    display: inline-block;
    line-height: 0;
    border-radius: .35rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-card-header);
    flex-shrink: 0;
}

.nb-attachment-thumb {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: cover;
}

.nb-attachment-thumb-link:hover .nb-attachment-thumb {
    opacity: 0.85;
}

.nb-attachment-actions {
    flex-shrink: 0;
}

.nb-btn-icon-secondary {
    color: var(--text-muted);
    border: 1px solid transparent;
    background: transparent;
}

.nb-btn-icon-secondary:hover,
.nb-btn-icon-secondary:focus {
    color: var(--text-accent);
    border-color: var(--border-color);
    background: var(--bg-card-header);
}

/* Inline images placed inside the contenteditable note body. */
.nb-editor-surface .nb-inline-image,
.note-editor-surface .nb-inline-image {
    max-width: 100%;
    max-height: 320px;
    height: auto;
    border-radius: .35rem;
    border: 1px solid var(--border-color);
    background: var(--bg-card-header);
    cursor: zoom-in;
    margin: .25rem 0;
}

.nb-editor-surface .nb-inline-image-link,
.note-editor-surface .nb-inline-image-link {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
}

.nb-filter-badge {
    background: var(--kromeka-dark);
    color: #fff;
    font-size: .78rem;
    font-weight: 500;
    padding: .3rem .6rem;
    border-radius: .35rem;
}

.nb-filter-badge .btn-close {
    filter: invert(1) grayscale(100%) brightness(190%);
    opacity: 0.78;
}

.nb-filter-badge .btn-close:hover {
    opacity: 1;
}

.nb-filter-badge .btn-close {
    filter: brightness(0) invert(1);
    opacity: .7;
}

.nb-filter-badge .btn-close:hover {
    opacity: 1;
}

.nb-node-badge {
    font-size: .7rem;
    background: var(--kromeka-grey);
    color: #fff;
    border-radius: .3rem;
    padding: .1rem .35rem;
    margin-left: .35rem;
    font-weight: 500;
}

@media (max-width: 991px) {
    .notebook-shell {
        grid-template-columns: 1fr;
    }
}

.nb-col-access { width: 120px; }
.nb-col-chefs { width: 90px; }
.nb-col-action { width: 40px; }

/* css/screens/042-main-dashboard-grid-cards-compact-rows-density.css */
/* ------------------------------------------------------------
   Main dashboard — grid, cards, compact rows, density
------------------------------------------------------------ */
.dashboard-page {
    --dashboard-gap: 24px;
    --dashboard-card-padding: 16px;
    --dashboard-item-min-height: 68px;
    --dashboard-item-padding-y: 12px;
}

.dashboard-page.dashboard-density-compact {
    --dashboard-card-padding: 12px;
    --dashboard-item-min-height: 52px;
    --dashboard-item-padding-y: 8px;
}

@media (max-width: 767.98px) {
    .dashboard-page {
        --dashboard-gap: 16px;
    }
}

.dashboard-header {
    margin-bottom: var(--dashboard-gap);
}

.dashboard-customize-button {
    min-height: 36px;
}

@media (max-width: 767.98px) {
    .dashboard-customize-button {
        min-height: 44px;
    }

    .dashboard-customize-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

.dashboard-grid {
    display: flex;
    flex-direction: column;
    gap: var(--dashboard-gap);
}

.dashboard-grid-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--dashboard-gap);
    align-items: start;
}

.dashboard-grid-cell {
    min-width: 0;
}

.dashboard-grid-cell--spacer {
    visibility: hidden;
    pointer-events: none;
    min-height: 0;
}

.dashboard-column {
    display: flex;
    flex-direction: column;
    gap: var(--dashboard-gap);
    min-width: 0;
}

@media (max-width: 767.98px) {
    .dashboard-grid-row {
        grid-template-columns: 1fr;
    }

    .dashboard-grid-cell--spacer {
        display: none;
    }
}

.dashboard-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background: var(--bg-card);
    color: var(--text-main);
    overflow: hidden;
    min-width: 0;
}

.dashboard-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: var(--dashboard-card-padding);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card-header);
    color: var(--text-card-header);
}

.dashboard-card-header .dashboard-card-title,
.dashboard-card-header .dashboard-card-title:link,
.dashboard-card-header .dashboard-card-title:visited,
.dashboard-card-header a.dashboard-card-title,
.dashboard-card-header a.dashboard-card-title:link,
.dashboard-card-header a.dashboard-card-title:visited {
    color: var(--text-card-header) !important;
}

.dashboard-card-header .dashboard-card-title:hover,
.dashboard-card-header .dashboard-card-title:focus-visible,
.dashboard-card-header a.dashboard-card-title:hover,
.dashboard-card-header a.dashboard-card-title:focus-visible {
    color: #ffffff !important;
    text-decoration: underline;
    text-decoration-color: var(--kromeka-yellow);
}

.dashboard-card-header--with-controls {
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.dashboard-card-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}

.dashboard-card-header .dashboard-scope-toggle.btn-outline-secondary {
    background-color: var(--card-header-btn-bg);
    color: var(--card-header-btn-text);
    border-color: var(--card-header-btn-border);
    font-size: 0.75rem;
    padding: 0.2rem 0.55rem;
    min-height: 1.75rem;
}

.dashboard-card-header .dashboard-scope-toggle.btn-outline-secondary:hover,
.dashboard-card-header .dashboard-scope-toggle.btn-outline-secondary:focus-visible {
    background-color: var(--card-header-btn-hover-bg);
    color: var(--card-header-btn-hover-text);
    border-color: var(--card-header-btn-hover-border);
}

[data-theme="dark"] .dashboard-card-header .dashboard-scope-toggle.btn-outline-secondary {
    color: var(--text-main);
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] .dashboard-card-header .dashboard-scope-toggle.btn-outline-secondary:hover,
[data-theme="dark"] .dashboard-card-header .dashboard-scope-toggle.btn-outline-secondary:focus-visible {
    background-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.dashboard-card-title {
    font-size: 1rem;
    font-weight: 600;
    min-width: 0;
    color: var(--text-card-header);
}

.dashboard-card-count {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--kromeka-light-grey);
    color: var(--kromeka-dark);
}

[data-theme="dark"] .dashboard-card-count {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-main);
}

.dashboard-card-list {
    display: flex;
    flex-direction: column;
}

.dashboard-card-list--scroll {
    overflow: auto;
    max-height: var(--dashboard-list-max-height, none);
}

.dashboard-priority-list {
    gap: 0;
}

.dashboard-priority-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0.55rem var(--dashboard-card-padding);
    color: var(--text-main);
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.12s ease;
}

.dashboard-priority-row:last-child {
    border-bottom: none;
}

.dashboard-priority-row:hover,
.dashboard-priority-row:focus-visible {
    background: rgba(245, 181, 31, 0.08);
    color: var(--text-main);
    outline: none;
}

.dashboard-priority-row__label {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    line-height: 1.35;
}

.dashboard-priority-row__count {
    flex-shrink: 0;
    min-width: 2rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--kromeka-light-grey);
    color: var(--kromeka-dark);
}

[data-theme="dark"] .dashboard-priority-row__count {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-main);
}

.dashboard-priority-row__chevron {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.dashboard-priority-row--emphasis .dashboard-priority-row__count {
    background: var(--kromeka-red);
    color: #fff;
}

.dashboard-priority-row--zero {
    opacity: 0.72;
}

.dashboard-priority-row--zero .dashboard-priority-row__count {
    font-weight: 600;
}

.dashboard-card-footer {
    padding: 0.65rem var(--dashboard-card-padding);
    border-top: 1px solid var(--border-color);
    font-size: 0.875rem;
}

.dashboard-card-footer a {
    color: var(--link-color);
    text-decoration: none;
    font-weight: 600;
}

.dashboard-card-footer a:hover,
.dashboard-card-footer a:focus {
    color: var(--link-hover-color);
}

.dashboard-card-footer--meta {
    border-top-style: dashed;
    color: var(--text-muted);
}

.dashboard-card-empty {
    padding: var(--dashboard-card-padding);
    text-align: center;
}

.dashboard-item,
.dashboard-item:link,
.dashboard-item:visited {
    display: block;
    padding: var(--dashboard-item-padding-y) var(--dashboard-card-padding);
    min-height: var(--dashboard-item-min-height);
    color: var(--text-main);
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.12s ease;
}

.dashboard-item:last-child {
    border-bottom: none;
}

.dashboard-item:hover,
.dashboard-item:focus-visible {
    background: rgba(245, 181, 31, 0.08);
    color: var(--text-main);
    outline: none;
}

.dashboard-item-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.dashboard-item-title {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.dashboard-density-compact .dashboard-item-title {
    font-size: 0.875rem;
}

.dashboard-item-meta {
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-density-compact .dashboard-item-meta {
    font-size: 0.75rem;
}

.dashboard-item .status-badge,
.dashboard-item .badge,
.dashboard-item .nc-status-badge {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.1;
    max-width: 100%;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: normal;
}

/* Generic status-badge on dashboard used white text with no fill — unreadable on light cards */
.dashboard-card .dashboard-item .status-badge:not([class*="status-"]):not(.nc-status-badge) {
    background: var(--kromeka-yellow);
    color: var(--kromeka-dark);
}

@media (max-width: 767.98px) {
    .dashboard-item-topline {
        flex-wrap: wrap;
    }

    .dashboard-item .status-badge,
    .dashboard-item .badge {
        margin-left: 0;
    }
}

/* css/screens/043-dashboard-personalization-ui-card-overflow.css */
/* ------------------------------------------------------------
   Dashboard personalization UI + card overflow
------------------------------------------------------------ */
.dashboard-settings-tabs .nav-link {
    border-radius: 999px;
    font-size: 0.85rem;
}

.dashboard-widget-list {
    gap: 0.45rem;
}

.dashboard-widget-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.45rem;
    margin-bottom: 0.5rem;
}

.dashboard-widget-drag {
    color: var(--text-muted);
    cursor: grab;
    user-select: none;
    font-size: 1.05rem;
}

.dashboard-widget-drag:active {
    cursor: grabbing;
}

.dashboard-widget-controls {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 220px;
    justify-content: flex-end;
}

.dashboard-widget-height {
    min-width: 140px;
}

.dashboard-widget-scroll {
    overflow: auto;
}

.kromeka-data-table-card > .card-body > .kromeka-hscroll-wrap {
    width: 100%;
}

/* Main dashboard — Products in Production: compact preview, no inner scroll box */
.dashboard-preview-list .list-group-item.dashboard-preview-row {
    border-color: var(--bs-border-color);
}

[data-theme="dark"] .dashboard-preview-list .list-group-item.dashboard-preview-row {
    border-color: rgba(255, 255, 255, 0.12);
}

.dashboard-preview-card .card-footer a {
    color: var(--link-color);
}

.dashboard-preview-card .card-footer a:hover,
.dashboard-preview-card .card-footer a:focus {
    color: var(--link-hover-color);
}

/* css/components/044-component-system-styles.css */
/* ============================================================
   Component System Styles
   ============================================================ */
.border-dashed {
    border-style: dashed !important;
}

.nav-pills .nav-link {
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
}

/* Inactive pill links (e.g. language tabs on CPQ/forms): follow theme — blue on light, accent yellow on dark */
.nav-pills .nav-link:not(.active) {
    color: var(--link-color);
}

.nav-pills .nav-link:not(.active):hover,
.nav-pills .nav-link:not(.active):focus {
    color: var(--link-hover-color);
}

.nav-pills .nav-link.active {
    background-color: var(--kromeka-red);
    color: #fff;
}

/* Tab bars that are not detail page tabs — same treatment as pills (department modals, etc.) */
.nav-tabs:not(.detail-tabs) .nav-link:not(.active) {
    color: var(--tab-inactive-text);
}

.nav-tabs:not(.detail-tabs) .nav-link:not(.active):hover,
.nav-tabs:not(.detail-tabs) .nav-link:not(.active):focus {
    color: var(--link-hover-color);
}

/* Dark theme: no Bootstrap primary-blue text on dark backgrounds */
[data-theme="dark"] .text-primary {
    color: var(--kromeka-yellow) !important;
}

/* Bootstrap danger red is about 2.8:1 on the dark card. Do not retint --bs-danger-rgb:
   that also fills .bg-danger, which keeps white text. */
[data-theme="dark"] :is(.text-danger, .link-danger, .invalid-feedback, .errorlist),
[data-theme="dark"] :is(a.text-danger, a.link-danger):is(:hover, :focus, :focus-visible) {
    color: var(--text-danger) !important;
}

[data-theme="dark"] a.btn-link,
[data-theme="dark"] .btn-link {
    color: var(--kromeka-yellow);
}

[data-theme="dark"] a.btn-link:hover,
[data-theme="dark"] .btn-link:hover {
    color: var(--link-hover-color);
}

/* css/screens/046-department-planning-workload-heatmap.css */
/* ============================================================
   Department Planning / Workload Heatmap
   ============================================================ */
.workload-table th,
.workload-table td {
    text-align: center;
    vertical-align: middle;
    min-width: 80px;
    font-size: 0.85rem;
}
.workload-table .user-cell {
    text-align: left;
    white-space: nowrap;
    min-width: 160px;
}
.workload-member-row {
    cursor: pointer;
}
/* Divider below built-in filter rows (Uncompleted Tasks) to separate from member rows */
.workload-table tbody tr[data-user-id="uncompleted"] td {
    border-bottom: 2px solid var(--kromeka-grey);
}
[data-theme="dark"] .workload-table tbody tr[data-user-id="uncompleted"] td,
[data-bs-theme="dark"] .workload-table tbody tr[data-user-id="uncompleted"] td {
    border-bottom-color: rgba(255, 255, 255, 0.3);
}
.workload-member-row-selected > td {
    background-color: rgba(245, 181, 31, 0.14);
}
[data-theme="dark"] .workload-member-row-selected > td {
    background-color: rgba(245, 181, 31, 0.22);
}
.workload-current-week {
    border-left: 1px solid var(--kromeka-yellow) !important;
    border-right: 1px solid var(--kromeka-yellow) !important;
    border-top: 1px solid var(--kromeka-yellow) !important;
    box-shadow: inset 1px 0 0 var(--kromeka-yellow), inset -1px 0 0 var(--kromeka-yellow);
}
.workload-current-week-col {
    border-left: 1px solid var(--kromeka-yellow) !important;
    border-right: 1px solid var(--kromeka-yellow) !important;
    box-shadow: inset 1px 0 0 var(--kromeka-yellow), inset -1px 0 0 var(--kromeka-yellow);
}
/*
 * Collapsed table borders: the previous cell's right edge wins the shared
 * groove, so the current-week left border alone never shows. Paint yellow on
 * the cell immediately before the current-week column (explicit prev class or
 * :has(+ …) so server- and JS-rendered tables both close the left edge).
 */
.workload-current-week-prev,
.workload-current-week-prev-col,
.workload-table th:has(+ .workload-current-week),
.workload-table td:has(+ .workload-current-week-col) {
    border-right: 1px solid var(--kromeka-yellow) !important;
    box-shadow: inset -1px 0 0 var(--kromeka-yellow);
}
.workload-table tbody tr:first-child .workload-current-week-col {
    border-top: 1px solid var(--kromeka-yellow) !important;
}
.workload-table tbody tr:last-child .workload-current-week-col {
    border-bottom: 1px solid var(--kromeka-yellow) !important;
}
.workload-week-header {
    cursor: pointer;
}
.workload-week-header.workload-week-selected {
    background-color: rgba(245, 181, 31, 0.20) !important;
    box-shadow: inset 0 -2px 0 var(--kromeka-yellow);
}
[data-theme="dark"] .workload-week-header.workload-week-selected {
    background-color: rgba(245, 181, 31, 0.28) !important;
}
.workload-week-cell.workload-week-selected-col {
    background-color: rgba(245, 181, 31, 0.08);
}
[data-theme="dark"] .workload-week-cell.workload-week-selected-col {
    background-color: rgba(245, 181, 31, 0.12);
}
/* General / Project Planning: Gantt week header click filters workload table only */
.gantt-weeks .gantt-week.gantt-week-drilldown {
    cursor: pointer;
}
.gantt-weeks .gantt-week.workload-week-selected {
    background-color: rgba(245, 181, 31, 0.20);
    box-shadow: inset 0 -2px 0 var(--kromeka-yellow);
}
[data-theme="dark"] .gantt-weeks .gantt-week.workload-week-selected {
    background-color: rgba(245, 181, 31, 0.28);
}
.workload-task-drilldown .table td,
.workload-task-drilldown .table th {
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 1px;
}
.workload-task-drilldown .table td a {
    text-decoration: none;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
.workload-task-drilldown .table td a:hover {
    text-decoration: underline;
}
.workload-task-name-combo {
    display: inline-block;
    max-width: 340px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}
.workload-project-link {
    display: inline-block;
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.workload-task-drilldown .table th:nth-last-child(2),
.workload-task-drilldown .table td:nth-last-child(2) {
    min-width: 86px;
    width: 86px;
}
.workload-task-drilldown .form-select {
    min-height: 32px;
}
.workload-task-status-checkbox {
    cursor: pointer;
}
.workload-task-status-checkbox:checked,
.wo-subtask-status-checkbox:checked,
.planning-task-check:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.workload-task-status-checkbox.task-status-ready:checked,
.quick-task-status-checkbox.task-status-ready:checked,
.planning-task-check.task-status-ready:checked {
    background-color: var(--kromeka-red);
    border-color: var(--kromeka-red);
}
.workload-task-status-checkbox.task-status-completed:checked,
.quick-task-status-checkbox.task-status-completed:checked,
.planning-task-check.task-status-completed:checked {
    background-color: var(--task-status-check-color, #3E9E5B);
    border-color: var(--task-status-check-color, #3E9E5B);
}
.wo-subtask-status-checkbox {
    cursor: pointer;
}
.wo-subtask-status-checkbox.task-status-ready:checked {
    background-color: var(--kromeka-red);
    border-color: var(--kromeka-red);
}
.wo-subtask-status-checkbox.task-status-completed:checked {
    background-color: var(--task-status-check-color, #3E9E5B);
    border-color: var(--task-status-check-color, #3E9E5B);
}

.workload-wo-group-header td {
    background-color: var(--kromeka-light-grey);
    font-size: 0.85rem;
    padding: 0.35rem 0.5rem;
    border-bottom: 2px solid var(--kromeka-grey);
    user-select: none;
}
.wo-group-chevron {
    transition: transform 0.15s ease;
    font-size: 0.75rem;
}
[data-theme="dark"] .workload-wo-group-header td,
[data-bs-theme="dark"] .workload-wo-group-header td {
    background-color: var(--bg-card);
    border-bottom-color: var(--border-color);
}

.workload-wo-subtask-row td {
    font-size: 0.82rem;
    background-color: #fafafa;
}
[data-theme="dark"] .workload-wo-subtask-row td,
[data-bs-theme="dark"] .workload-wo-subtask-row td {
    background-color: var(--bg-body);
}
.workload-wo-subtask-row [data-col-key="task_name"] {
    padding-left: 1.5rem;
}
.workload-wo-subtask-name {
    font-size: 0.82rem;
}
.workload-task-drilldown tr.workload-auto-plan-blocked {
    --workload-blocked-row-bg: color-mix(in srgb, var(--kromeka-red) 10%, #ffffff);
}
[data-theme="dark"] .workload-task-drilldown tr.workload-auto-plan-blocked,
[data-bs-theme="dark"] .workload-task-drilldown tr.workload-auto-plan-blocked {
    --workload-blocked-row-bg: color-mix(in srgb, var(--kromeka-red) 32%, var(--bg-card));
}
.workload-task-drilldown tr.workload-auto-plan-blocked > td {
    background-color: var(--workload-blocked-row-bg) !important;
    box-shadow: inset 3px 0 0 var(--kromeka-red);
}
.workload-task-drilldown tr.workload-auto-plan-blocked > td.kromeka-frozen-col {
    background-color: var(--workload-blocked-row-bg) !important;
}
.workload-auto-plan-blocked-name {
    color: var(--text-danger);
    font-weight: 600;
}
.workload-auto-plan-blocked-name::before {
    content: "\F469";
    font-family: "bootstrap-icons";
    margin-right: 0.35rem;
    font-weight: 400;
    opacity: 0.9;
}
.workload-auto-plan-legend-marker {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 2px;
    background-color: rgba(175, 22, 30, 0.35);
    vertical-align: middle;
    margin-right: 0.25rem;
}
[data-theme="dark"] .workload-auto-plan-legend-marker,
[data-bs-theme="dark"] .workload-auto-plan-legend-marker {
    background-color: rgba(240, 128, 128, 0.55);
}
.workload-column-settings-menu {
    min-width: 220px;
    max-width: 280px;
    max-height: 320px;
    overflow: auto;
}
.workload-column-settings-menu .kromeka-column-borders-option {
    font-size: 0.8125rem;
    line-height: 1.3;
}
.workload-column-settings-menu .kromeka-column-borders-option .form-check-label {
    font-weight: 400;
}
.workload-column-settings-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 2px 0;
    font-size: 0.875rem;
    cursor: pointer;
}
/* Light theme: show a clear border on the row under the pointer (gear column menu). */
:root:not([data-theme="dark"]) .workload-column-settings-menu .workload-column-settings-item {
    border: 1px solid transparent;
    border-radius: 0.25rem;
    padding: 2px 5px;
    box-sizing: border-box;
}
:root:not([data-theme="dark"]) .workload-column-settings-menu .workload-column-settings-item:hover {
    border-color: var(--border-color, #ced4da);
    background-color: var(--hover-bg, rgba(0, 0, 0, 0.04));
}
.workload-column-settings-item .form-check-input {
    margin-top: 0;
}
.workload-task-drilldown td[data-inline-field]:not([data-inline-disabled]) .inline-cell-display {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}
.workload-task-drilldown td[data-inline-field][data-inline-disabled] {
    opacity: 0.75;
}
.workload-cell {
    border-radius: 4px;
    padding: 4px 6px;
    font-weight: 600;
}
.workload-cell.load-none { background: var(--bs-gray-100); color: var(--bs-gray-500); }
.workload-cell.load-light { background: #d4edda; color: #155724; }
.workload-cell.load-normal { background: #cce5ff; color: #004085; }
.workload-cell.load-heavy { background: #fff3cd; color: #856404; }
.workload-cell.load-over { background: #f8d7da; color: #721c24; }
[data-bs-theme="dark"] .workload-cell.load-none { background: var(--bs-gray-800); color: var(--bs-gray-500); }
[data-bs-theme="dark"] .workload-cell.load-light { background: #1b4332; color: #95d5b2; }
[data-bs-theme="dark"] .workload-cell.load-normal { background: #1b3a5c; color: #90caf9; }
[data-bs-theme="dark"] .workload-cell.load-heavy { background: #5c4a1b; color: #ffe082; }
[data-bs-theme="dark"] .workload-cell.load-over { background: #5c1b1b; color: #ef9a9a; }
[data-theme="dark"] .workload-cell,
[data-bs-theme="dark"] .workload-cell {
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .workload-cell.load-none,
[data-bs-theme="dark"] .workload-cell.load-none { background: #242424; color: #f1f1f1; }
[data-theme="dark"] .workload-cell.load-light,
[data-bs-theme="dark"] .workload-cell.load-light { background: #1f3b35; color: #d4ece1; }
[data-theme="dark"] .workload-cell.load-normal,
[data-bs-theme="dark"] .workload-cell.load-normal { background: #22364c; color: #d8e8fb; }
[data-theme="dark"] .workload-cell.load-heavy,
[data-bs-theme="dark"] .workload-cell.load-heavy { background: #4f421f; color: #f5e3a4; }
[data-theme="dark"] .workload-cell.load-over,
[data-bs-theme="dark"] .workload-cell.load-over { background: #5a2b32; color: #ffd9df; }

.dept-planning-chef-icon {
    font-size: 0.7rem;
}

/* css/components/047-notification-bell-dropdown.css */
/* ============================================================
   Notification Bell Dropdown
   ============================================================ */
.notif-dropdown {
    width: min(26rem, calc(100vw - 2rem));
    max-height: 32rem;
    overflow-y: auto;
    padding-bottom: 0.25rem;
    background: var(--bg-card);
    color: var(--text-main);
}


.kromeka-app-navbar .nav-link:has(.nav-unread-badge) {
    position: relative;
    padding-right: 1.35rem;
}

.nav-unread-badge {
    position: absolute;
    top: 0.3rem;
    right: 0.1rem;
    margin-left: 0;
    font-size: 0.65rem;
    line-height: 1.15;
    min-width: 1.15rem;
    pointer-events: none;
}

.kromeka-app-navbar__actions .nav-link .bi-ui-checks {
    font-size: 1.05em;
    vertical-align: -0.1em;
}

#bookmarkNavDropdown {
    min-width: 2rem;
}

@media (min-width: 1400px) {
    #bookmarkNavDropdown {
        text-align: center;
    }
}

.bookmark-nav-link {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bookmark-display-name-cell {
    min-width: 220px;
    cursor: text;
    outline: none;
}

.bookmark-display-name-cell:focus {
    background-color: var(--input-hover-bg);
    box-shadow: inset 0 0 0 1px var(--kromeka-yellow);
}

.bookmark-cell-saving {
    opacity: 0.7;
}

#notif-bell {
    position: relative;
}

.notif-company-dot {
    position: absolute;
    right: 0.15rem;
    bottom: 0.35rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--kromeka-yellow);
    box-shadow: 0 0 0 2px var(--navbar-bg);
    pointer-events: none;
}

.notif-dropdown__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.notif-dropdown__tabs,
.notif-page-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.notif-page-tabs {
    margin-bottom: 0.75rem;
}

.notif-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0.4rem 0.75rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    text-decoration: none;
}

.notif-tab.is-active {
    color: var(--text-main);
    border-bottom-color: var(--kromeka-red);
}

.notif-tab-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--kromeka-yellow);
}

.notif-section-label,
.notif-day-label {
    padding: 0.55rem 0.75rem 0.2rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.notif-action-block {
    margin: 0.35rem 0.5rem 0.5rem;
    border-left: 3px solid var(--kromeka-red);
    background: color-mix(in srgb, var(--kromeka-yellow) 12%, var(--bg-card));
}

.notif-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
}

.notif-row--unread {
    background: color-mix(in srgb, var(--kromeka-yellow) 18%, var(--bg-card));
}

.notif-row__link,
.notif-group__summary {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    color: var(--text-main);
    text-decoration: none;
}

.notif-group__summary {
    cursor: pointer;
    list-style: none;
}

.notif-group__summary::-webkit-details-marker {
    display: none;
}

.notif-row__icon {
    margin-top: 0.15rem;
    color: var(--text-muted);
}

.notif-row__body,
.notif-group__label {
    flex: 1 1 auto;
    min-width: 0;
}

.notif-row__title,
.notif-group__label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-main);
}

.notif-row__target,
.notif-row__message,
.notif-time {
    display: block;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.notif-row__message {
    white-space: pre-line;
}

.notif-row__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    margin-left: auto;
}

.notif-row__done {
    display: flex;
    align-items: center;
    padding-right: 0.5rem;
}

.notif-row__done .btn,
.notif-mark-done {
    min-height: 44px;
}

.notif-new-badge {
    background: var(--kromeka-red);
    color: var(--text-card-header);
}

.notif-group {
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
}

.notif-group.notif-row--unread {
    background: color-mix(in srgb, var(--kromeka-yellow) 18%, var(--bg-card));
}

.notif-group__items .notif-row {
    padding-left: 0.75rem;
}

.notif-empty {
    margin: 0;
    padding: 1.25rem 0.75rem;
    text-align: center;
    color: var(--text-muted);
}

.notif-empty .bi {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1.75rem;
}

.notif-filter-select {
    width: auto;
    min-width: 10rem;
}

.notif-center .card-body > .notif-row:last-child,
.notif-dropdown .notif-row:last-child {
    border-bottom: 0;
}
.notif-dropdown-title {
    font-size: inherit;
    font-weight: 600;
    color: var(--text-main);
}
.notif-dropdown .dropdown-item.notif-item {
    white-space: normal;
    padding: .35rem .75rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}
.notif-dropdown .dropdown-item.notif-item:last-child {
    border-bottom: none;
}
.notif-dropdown .notif-unread {
    background: rgba(var(--bs-primary-rgb), .06);
}
.notif-dropdown .notif-read {
    opacity: .7;
}
.notif-row .notif-time,
.notif-group .notif-time {
    font-size: 0.8125rem;
}

/* Full notification list page */
.notif-unread-item {
    background: rgba(var(--bs-primary-rgb), .06) !important;
    border-left: 3px solid var(--bs-primary) !important;
}

/* Dark mode adjustments */
[data-theme="dark"] .notif-dropdown .notif-unread,
[data-bs-theme="dark"] .notif-dropdown .notif-unread {
    background: rgba(255, 255, 255, .05);
}
[data-theme="dark"] .notif-unread-item,
[data-bs-theme="dark"] .notif-unread-item {
    background: rgba(255, 255, 255, .05) !important;
}

/* CPQ offer item info popover: wider box for description and technical details */
.offer-item-tooltip .tooltip-inner,
.offer-item-info-popover .popover-body {
    max-width: 420px;
    text-align: left;
}

.offer-item-info-popover {
    max-width: 440px;
}

/* CPQ offer version — page header (title, chips, totals, actions) */
.cpq-offer-version-page-header__main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}

.cpq-offer-version-page-header__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.cpq-offer-version-page-header__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-top: 0.4rem;
}

.cpq-offer-version-page-header__context {
    margin-top: 0.35rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.cpq-offer-version-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.625rem;
    padding: 0.15rem 0.55rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
}

.cpq-offer-version-chip--code {
    background: var(--kromeka-dark-grey);
    color: var(--text-card-header);
    border-color: transparent;
}

.cpq-offer-version-chip--catalog {
    background: color-mix(in srgb, var(--kromeka-yellow) 20%, var(--bg-card));
    color: var(--text-main);
    border-color: color-mix(in srgb, var(--kromeka-yellow) 40%, var(--border-color));
}

.cpq-offer-version-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem 0.85rem;
    margin-left: auto;
}

.cpq-offer-version-page-header__totals {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.cpq-offer-version-total {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.875rem;
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    background: var(--bg-card);
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.cpq-offer-version-total__label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.6875rem;
}

.cpq-offer-version-total strong {
    color: var(--text-main);
    font-weight: 600;
}

.cpq-offer-version-page-header__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.cpq-offer-version-page-header__buttons .btn-sm {
    min-height: 1.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* CPQ offer detail: URL hash targets stay visible below the top of the viewport after redirect */
[id^="cpq-offer-version-"],
tr[id^="cpq-offer-item-"] {
    scroll-margin-top: 1.25rem;
}

/* Inline sm control rows — one shared height for inputs, selects, Select2, and buttons */
:is(.cpq-offer-version-meta-form, .cpq-offer-version-add-item-form) {
    --kromeka-control-row-sm-height: calc(1.5em + 0.5rem + 2px);
}

:is(.cpq-offer-version-meta-form, .cpq-offer-version-add-item-form) .form-control-sm,
:is(.cpq-offer-version-meta-form, .cpq-offer-version-add-item-form) .form-select.form-select-sm {
    min-height: var(--kromeka-control-row-sm-height);
    height: var(--kromeka-control-row-sm-height);
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 400;
    border-width: 1px;
    border-radius: var(--bs-border-radius-sm, 0.25rem);
    box-shadow: none;
    transform: none;
}

:is(.cpq-offer-version-meta-form, .cpq-offer-version-add-item-form) .form-select.form-select-sm {
    padding-right: 1.75rem;
    background-position: right 0.5rem center;
    background-size: 12px 10px;
}

:is(.cpq-offer-version-meta-form, .cpq-offer-version-add-item-form) .form-select.form-select-sm:hover,
:is(.cpq-offer-version-meta-form, .cpq-offer-version-add-item-form) .form-select.form-select-sm:active {
    transform: none;
    box-shadow: none;
    border-width: 1px;
}

:is(.cpq-offer-version-meta-form, .cpq-offer-version-add-item-form) .form-select.form-select-sm:focus {
    transform: none;
    border-width: 1px;
    box-shadow: 0 0 0 0.25rem rgba(245, 181, 31, 0.25);
}

:is(.cpq-offer-version-meta-form, .cpq-offer-version-add-item-form) .btn-sm {
    min-height: var(--kromeka-control-row-sm-height);
    height: var(--kromeka-control-row-sm-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    white-space: nowrap;
}

:is(.cpq-offer-version-meta-form, .cpq-offer-version-add-item-form) select.form-select-sm + .select2-container {
    height: var(--kromeka-control-row-sm-height) !important;
}

.cpq-offer-version-add-item-form select.form-select-sm + .select2-container--default .select2-selection--single {
    min-height: var(--kromeka-control-row-sm-height) !important;
    height: var(--kromeka-control-row-sm-height) !important;
    padding: 0 1.75rem 0 0.5rem !important;
    display: flex !important;
    align-items: center !important;
}

.cpq-offer-version-add-item-form select.form-select-sm + .select2-container--default .select2-selection--single .select2-selection__rendered {
    display: flex !important;
    align-items: center !important;
    line-height: 1.5 !important;
    min-height: 0 !important;
    padding: 0 0.25rem 0 0 !important;
}

.cpq-offer-version-add-item-form select.form-select-sm + .select2-container--default .select2-selection--single .select2-selection__clear {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0 !important;
    margin-right: 0.25rem !important;
    line-height: 1 !important;
    height: 1em !important;
    position: static !important;
}

.cpq-offer-version-add-item-form select.form-select-sm + .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
}

/* Offer version header — status / title / catalog / language / notes toolbar */
.cpq-offer-version-meta-form .cpq-offer-version-meta-field {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.cpq-offer-version-meta-form .cpq-offer-version-meta-field--notes {
    overflow: visible;
}

.cpq-offer-version-meta-form .cpq-offer-version-meta-field > .form-label {
    flex: 0 0 auto;
    margin-bottom: 0;
    white-space: nowrap;
    color: var(--text-muted);
}

.cpq-offer-version-meta-form .cpq-offer-version-meta-field > .form-control-sm,
.cpq-offer-version-meta-form .cpq-offer-version-meta-field > .form-select-sm,
.cpq-offer-version-meta-form .cpq-offer-version-meta-field > .cpq-offer-version-meta-readonly,
.cpq-offer-version-meta-form .cpq-offer-version-meta-field > .select2-container {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
}

.cpq-offer-version-meta-form .cpq-offer-version-meta-readonly {
    min-height: var(--kromeka-control-row-sm-height);
    height: var(--kromeka-control-row-sm-height);
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--bs-border-radius-sm, 0.25rem);
    background-color: var(--bg-body);
    color: var(--text-main);
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.offer-version-layout-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.offer-version-layout-label {
    flex: 0 0 auto;
    font-weight: 600;
    font-size: 0.875rem;
    min-width: 6.5rem;
}

.offer-version-layout-filename {
    flex: 0 1 auto;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
}

.offer-version-layout-upload-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 12rem;
    min-width: 0;
}

.offer-version-layout-remove-form {
    flex: 0 0 auto;
}

.offer-version-layout-file-input {
    flex: 1 1 10rem;
    min-width: 8rem;
    max-width: 18rem;
}

.cpq-offer-version-add-item-bar {
    padding: 0.65rem 0.75rem;
    background-color: var(--bg-card);
}

.cpq-offer-version-add-item-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
}

.cpq-offer-version-add-item-label {
    flex: 0 0 100%;
    margin-bottom: 0;
    font-size: 0.8125rem;
    font-weight: 600;
}

.cpq-offer-add-layout-preview {
    flex: 0 0 100%;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.25;
    white-space: normal;
    word-break: break-word;
}

@media (min-width: 768px) {
    .cpq-offer-version-add-item-label {
        flex: 0 0 auto;
        width: auto;
        margin-bottom: 0.25rem;
    }

    .cpq-offer-version-add-item-form {
        display: grid;
        grid-template-columns: minmax(12rem, 1fr) minmax(4.5rem, 6rem) minmax(4.5rem, 6rem) auto;
        grid-template-rows: auto auto auto;
        column-gap: 0.75rem;
        row-gap: 0.25rem;
        align-items: start;
    }

    .cpq-offer-version-add-item-form.cpq-offer-version-add-item-form--with-layout {
        grid-template-columns: minmax(12rem, 1fr) minmax(4.5rem, 6rem) minmax(4.5rem, 6rem) minmax(6.5rem, 9rem) auto;
    }

    .cpq-offer-version-add-item-definition,
    .cpq-offer-version-add-item-quantity,
    .cpq-offer-version-add-item-lines,
    .cpq-offer-version-add-item-layout {
        display: flex;
        align-items: center;
        min-height: var(--kromeka-control-row-sm-height);
    }

    .cpq-offer-version-add-item-layout {
        align-items: stretch;
    }

    .cpq-offer-add-layout-preview {
        flex: none;
        margin-top: 0;
    }

    .cpq-offer-version-add-item-definition .select2-container {
        width: 100% !important;
    }

    .cpq-offer-version-add-item-label:nth-of-type(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .cpq-offer-version-add-item-definition {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
    }

    .cpq-offer-version-add-item-label:nth-of-type(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .cpq-offer-version-add-item-quantity {
        grid-column: 2;
        grid-row: 2;
    }

    .cpq-offer-add-lines-label {
        grid-column: 3;
        grid-row: 1;
    }

    .cpq-offer-version-add-item-lines {
        grid-column: 3;
        grid-row: 2;
    }

    .cpq-offer-add-layout-label {
        grid-column: 4;
        grid-row: 1;
    }

    .cpq-offer-version-add-item-layout {
        grid-column: 4;
        grid-row: 2;
    }

    .cpq-offer-add-layout-preview {
        grid-column: 4;
        grid-row: 3;
    }

    .cpq-offer-version-add-item-submit {
        grid-column: 4;
        grid-row: 2;
        align-self: start;
        white-space: nowrap;
    }

    .cpq-offer-version-add-item-form--with-layout .cpq-offer-version-add-item-submit {
        grid-column: 5;
    }
}

[data-theme="dark"] .cpq-offer-version-add-item-bar {
    background-color: var(--bg-card);
}

/* CPQ offer version item table: footer totals — labels share a bottom baseline; values align on one row */
.cpq-offer-version-items-table tfoot.cpq-offer-version-items-tfoot tr.cpq-offer-version-items-totals > td {
    border-top: 2px solid var(--border-color);
    vertical-align: top;
    padding-top: 0.4rem;
    padding-bottom: 0.45rem;
}

.cpq-offer-version-items-totals .cpq-offer-version-totals-cell {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.25rem;
    min-width: 0;
    width: max-content;
    max-width: 100%;
}

.cpq-offer-version-items-totals .cpq-offer-version-totals-value.cpq-offer-version-totals-version-heading {
    font-weight: 400;
}

.cpq-offer-version-items-totals .cpq-offer-version-totals-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.25;
    min-height: 1.25rem;
    display: flex;
    align-items: flex-end;
    align-self: stretch;
    white-space: nowrap;
}

.cpq-offer-version-items-totals .cpq-offer-version-totals-label--empty {
    min-height: 1.25rem;
    margin: 0;
    padding: 0;
}

.cpq-offer-version-items-totals .cpq-offer-version-totals-value {
    font-weight: 600;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cpq-offer-version-items-totals .cpq-offer-version-totals-value--spacer {
    visibility: hidden;
    min-height: 1.3em;
}

.cpq-offer-version-items-totals .cpq-offer-version-totals-cell--action {
    align-items: center;
}

.cpq-offer-version-items-totals .cpq-offer-version-totals-value--action {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-weight: 400;
}

/* Price List items: keep Title readable without locking user-chosen widths */
.cpq-offer-price-list-table th[data-col-key="title"],
.cpq-offer-price-list-table td[data-col-key="title"] {
    min-width: 7rem;
}
.cpq-offer-price-list-table tbody td[data-col-key="title"] .cpq-offer-price-list-title-band {
    gap: 0.35rem;
}
.cpq-offer-price-list-table tbody td[data-col-key="title"] .cpq-offer-item-title-display {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cpq-offer-item-title-field {
    text-transform: uppercase;
}
.cpq-offer-item-drag-handle,
.cpq-offer-item-info-btn {
    flex: 0 0 auto;
    line-height: 1;
    color: var(--text-muted);
    text-decoration: none;
}
.cpq-offer-item-drag-handle {
    cursor: grab;
}
.cpq-offer-item-drag-handle:active {
    cursor: grabbing;
}
.cpq-offer-item-info-btn:hover,
.cpq-offer-item-info-btn:focus-visible,
.cpq-offer-item-drag-handle:hover,
.cpq-offer-item-drag-handle:focus-visible {
    color: var(--kromeka-yellow);
}
.cpq-offer-price-list-table tbody tr.cpq-offer-item-row--ghost {
    opacity: 0.55;
    background: var(--bg-card-header);
}
.cpq-offer-price-list-table tbody tr.cpq-offer-item-row--just-added > *,
.cpq-offer-price-list-table tbody tr.cpq-offer-item-row--just-added td:not(.kromeka-sheet-cell-selected):not(.kromeka-sheet-cell-active):not(.kromeka-sheet-cell-editing) .form-control,
.cpq-offer-price-list-table tbody tr.cpq-offer-item-row--just-added td:not(.kromeka-sheet-cell-selected):not(.kromeka-sheet-cell-active):not(.kromeka-sheet-cell-editing) .kromeka-sheet-input {
    background-color: color-mix(in srgb, var(--kromeka-yellow) 28%, var(--bg-card, #fff)) !important;
    color: var(--text-main);
}
.cpq-offer-price-list-reorder-feedback {
    font-size: 0.875rem;
    position: sticky;
    top: 0;
    z-index: 7;
}

.cpq-offer-price-list-reorder-feedback.alert-secondary {
    background: var(--bg-card-header);
    color: var(--text-card-header);
}

.cpq-offer-price-list-table th[data-col-key="optional"],
.cpq-offer-price-list-table td[data-col-key="optional"] {
    min-width: 4rem;
    text-align: center;
}

.cpq-offer-price-list-table th.cpq-offer-select-col,
.cpq-offer-price-list-table td.cpq-offer-select-col {
    width: 2.5rem;
    min-width: 2.5rem;
    max-width: 2.75rem;
    text-align: center;
    vertical-align: middle;
}

.cpq-offer-price-list-select-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: var(--text-main);
}

.cpq-offer-price-list-select-bar #cpq-offer-price-list-select-count {
    font-weight: 600;
    white-space: nowrap;
}

.cpq-offer-item-optional-cell .form-check-input {
    margin-top: 0;
    float: none;
}

/* Price list body: one shared control band so inputs, checkbox, totals, and actions share a line */
.cpq-offer-price-list-table {
    --kromeka-control-row-sm-height: calc(1.5em + 0.5rem + 2px);
}

.cpq-offer-price-list-table tbody td[data-col-key] {
    vertical-align: middle;
    white-space: normal;
    overflow: visible;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.cpq-offer-price-list-control-band {
    display: flex;
    align-items: center;
    min-height: var(--kromeka-control-row-sm-height);
    min-width: 0;
    width: 100%;
}

.cpq-offer-price-list-control-band--center {
    justify-content: center;
}

.cpq-offer-price-list-cell-caption {
    display: inline;
    margin-top: 0;
    margin-inline-start: 0.35rem;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
}

.cpq-offer-price-list-table.kromeka-data-table thead th[data-col-key="actions"],
.cpq-offer-price-list-table.kromeka-data-table tbody td[data-col-key="actions"] {
    width: 7.5rem;
    min-width: 7.5rem;
    max-width: 7.5rem;
    box-sizing: border-box;
}

.cpq-offer-price-list-table tbody td[data-col-key="actions"] .table-action-buttons {
    width: auto;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

/* CPQ offer version — Technical tab: one-line preview, expand to edit */
.cpq-offer-tech-table .cpq-offer-tech-cell {
    vertical-align: top;
    max-width: 22rem;
}

.cpq-offer-tech-table .cpq-offer-tech-preview {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    min-height: calc(1.5rem + 0.5rem);
    line-height: 1.5rem;
    padding: 0.25rem 0.35rem;
    border-radius: 0.25rem;
    color: var(--text-main);
}

.cpq-offer-tech-table .cpq-offer-tech-preview:hover {
    background-color: var(--hover-bg);
}

.cpq-offer-tech-table .cpq-offer-tech-cell.is-expanded .cpq-offer-tech-preview {
    display: none !important;
}

.cpq-offer-tech-table .cpq-offer-tech-editor {
    min-width: 12rem;
}

.cpq-offer-tech-table .cpq-offer-tech-editor textarea {
    min-height: 6rem;
    resize: vertical;
}

.cpq-offer-tech-table .cpq-offer-tech-cell:not(.is-expanded) .cpq-offer-tech-editor {
    display: none !important;
}

.cpq-offer-tech-table .cpq-offer-tech-cell.is-expanded .cpq-offer-tech-editor {
    display: block !important;
}

/* css/components/048-component-library-collapsible-category-groups.css */
/* ------------------------------------------------------------
   Component Library: collapsible category groups
------------------------------------------------------------ */
.component-category-header,
.cpq-table-group-header {
    cursor: pointer;
}

/* Theme-aware group header (avoid Bootstrap .table-secondary light strip in dark mode). */
.cpq-table-group-header > th,
.cpq-table-group-header > td {
    background-color: var(--kromeka-data-table-thead-bg) !important;
    color: var(--kromeka-data-table-thead-text) !important;
    border-color: var(--border-color);
}

.cpq-table-group-header:hover > th,
.cpq-table-group-header:hover > td {
    background-color: var(--hover-bg) !important;
}

.component-category-header .component-category-toggle,
.cpq-table-group-header .price-catalog-group-toggle {
    color: var(--kromeka-data-table-thead-text) !important;
}

.component-category-header .component-category-toggle:hover,
.cpq-table-group-header .price-catalog-group-toggle:hover {
    color: var(--text-accent) !important;
}

.cpq-table-group-header .price-catalog-group-toggle strong {
    color: inherit;
}

/* Project list — cross-tab search section divider between active and inactive rows. */
.kromeka-project-list-section-row > td {
    background-color: var(--kromeka-data-table-thead-bg) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color);
    cursor: default;
}

.cpq-table-group-header .text-muted {
    color: color-mix(in srgb, var(--kromeka-data-table-thead-text) 68%, transparent) !important;
}

/* Group row toggles sit on the dark data-table header strip — never Bootstrap blue. */
.cpq-table-group-header .cpq-group-toggle {
    color: var(--kromeka-data-table-thead-text) !important;
}

.cpq-table-group-header .cpq-group-toggle:hover,
.cpq-table-group-header .cpq-group-toggle:focus-visible {
    color: var(--kromeka-data-table-thead-sort-link-hover) !important;
}

.cpq-table-group-header .cpq-group-toggle strong,
.cpq-table-group-header .cpq-group-toggle > span:not(.text-muted) {
    color: inherit;
}

.cpq-table-group-header .cpq-group-chevron {
    color: var(--kromeka-data-table-thead-sort-icon);
}

/* css/components/049-data-card-table-sections-with-title-helper-row-y.css */
/* ------------------------------------------------------------
   Data card — table sections with title, helper row, yellow divider
------------------------------------------------------------ */
.data-card > .card-header.data-card-header {
    border-bottom: none;
}

.data-card-title-row {
    padding: 12px 15px 0;
}

.data-card-title-row .cpq-component-categories-card-toggle {
    text-transform: none;
}

.data-card-title-group {
    gap: 0;
}

.data-card-title {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-card-header);
    text-transform: none;
    letter-spacing: normal;
}

.data-card-subtitle {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-muted);
    text-transform: none;
}

.data-card-count {
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: none;
}

.data-card-toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 15px 12px;
}

.data-card-description {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
    text-transform: none;
    min-width: 0;
}

.data-card-description strong {
    color: var(--text-card-header);
    font-weight: 600;
}

.data-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.data-card-actions .btn {
    min-height: 36px;
    min-width: 36px;
}

.data-card-divider {
    height: 2px;
    background: var(--kromeka-yellow);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .data-card-toolbar-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .data-card-description {
        white-space: normal;
    }

    .data-card-actions .btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* CPQ Component Library: collapsible “Component categories” card (table inside) */
.cpq-component-categories-card-chevron {
    transition: transform 0.15s ease;
}

.cpq-component-categories-card-toggle[aria-expanded="false"] .cpq-component-categories-card-chevron {
    transform: rotate(-90deg);
}

/* Work order edit — collapsible Change history card header */
.wo-history-chevron {
    transition: transform 0.15s ease;
}

.wo-history-toggle[aria-expanded="false"] .wo-history-chevron {
    transform: rotate(-90deg);
}

/* Component Library — browse libraries filter rows (no list-group-item parent hover). */
#cpq-library-explorer .cpq-library-explorer-group {
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
}

#cpq-library-explorer .cpq-library-explorer-group:last-child {
    border-bottom: none;
}

.cpq-library-explorer-library-row,
.cpq-library-explorer-subrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 8px 0 0;
}

.cpq-explorer-toggle-spacer {
    display: inline-block;
    width: 1.5rem;
}

.cpq-explorer-group-toggle {
    color: var(--text-muted);
    line-height: 1;
    min-width: 1.5rem;
    min-height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cpq-explorer-group-toggle:hover,
.cpq-explorer-group-toggle:focus-visible {
    color: var(--text-main);
}

.cpq-explorer-group-toggle[aria-expanded="false"] .cpq-explorer-chevron {
    transform: rotate(-90deg);
}

.cpq-explorer-chevron {
    transition: transform 0.15s ease;
}

.cpq-library-explorer-subs.cpq-explorer-subs--collapsed {
    display: none;
}

.cpq-library-row-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.cpq-library-row-actions .dropdown .btn {
    min-width: 2rem;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

.cpq-explorer-row--inactive .cpq-library-filter-target,
.cpq-explorer-row--inactive .cpq-subcategory-filter-target {
    opacity: 0.72;
}

.cpq-explorer-row--inactive .cpq-library-name,
.cpq-explorer-row--inactive .cpq-subcategory-name {
    font-weight: 500;
}

.cpq-library-explorer-subrow {
    padding-left: 12px;
}

.cpq-library-filter-target,
.cpq-subcategory-filter-target {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--text-main);
    text-decoration: none;
}

.cpq-library-filter-target:hover,
.cpq-subcategory-filter-target:hover,
.cpq-library-filter-target:focus-visible,
.cpq-subcategory-filter-target:focus-visible {
    background: var(--hover-bg);
    color: var(--text-main);
    outline: none;
}

.cpq-library-filter-target.is-active,
.cpq-subcategory-filter-target.is-active {
    background: color-mix(in srgb, var(--kromeka-yellow) 14%, transparent);
    box-shadow: inset 3px 0 0 var(--kromeka-yellow);
    font-weight: 600;
}

.cpq-library-name,
.cpq-subcategory-name {
    font-weight: 600;
}

.cpq-subcategory-reopen-hint {
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.3;
    margin-top: 0.15rem;
}

.cpq-attribute-links-list {
    max-width: 100%;
}

.cpq-attribute-link-row {
    background: var(--bg-card);
    color: var(--text-main);
}

.cpq-attribute-drag-handle {
    cursor: grab;
    line-height: 1;
    min-width: 1.25rem;
    text-align: center;
    user-select: none;
}

.cpq-attribute-drag-handle:active {
    cursor: grabbing;
}

.cpq-attribute-link-actions .form-check {
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
}

#cpq-attribute-order-feedback.text-success {
    color: var(--kromeka-dark);
}

[data-theme="dark"] #cpq-attribute-order-feedback.text-success {
    color: var(--text-main);
}

.cpq-subcategory-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--text-main);
    text-decoration: none;
    white-space: nowrap;
}

.cpq-subcategory-filter-chip:hover,
.cpq-subcategory-filter-chip:focus-visible {
    background: var(--hover-bg);
    color: var(--text-main);
    outline: none;
}

.cpq-subcategory-filter-chip.is-active {
    border-color: var(--kromeka-yellow);
    background: color-mix(in srgb, var(--kromeka-yellow) 14%, transparent);
    font-weight: 600;
}

.cpq-subcategory-filter-chip--more {
    border-style: dashed;
    color: var(--text-muted);
}

.cpq-library-table-filter-link {
    color: var(--text-main);
}

.cpq-library-table-filter-link:hover,
.cpq-library-table-filter-link:focus-visible {
    color: var(--kromeka-yellow);
    outline: none;
}

.cpq-component-main-table .table thead th {
    white-space: nowrap;
}

.cpq-sub-group-header td {
    background-color: var(--bg-card-header, var(--kromeka-light-grey));
}
.cpq-lib-group-header td {
    font-size: 0.95rem;
}

/* Group header rows — label and chevron vertically centered in the bar. */
.cpq-component-main-table .cpq-table-group-header > td {
    vertical-align: middle;
}

.cpq-component-main-table .cpq-table-group-header .cpq-group-toggle {
    display: inline-flex;
    align-items: center;
    line-height: 1.35;
    min-height: 1.75rem;
}

.cpq-component-main-table .cpq-table-group-header .cpq-group-chevron {
    line-height: 1;
}

.cpq-component-data-row.cpq-component-row--highlight > td {
    background-color: rgba(245, 181, 31, 0.18);
}
.cpq-inline-editable-cell {
    cursor: text;
    position: relative;
}
.cpq-inline-editable-cell:hover {
    outline: 1px dashed var(--kromeka-grey);
    outline-offset: -1px;
}
.cpq-inline-editable-cell::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    opacity: 0;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23878787' viewBox='0 0 16 16'%3E%3Cpath d='M12.146.854a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325'/%3E%3C/svg%3E");
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.cpq-inline-editable-cell:hover::after {
    opacity: 0.85;
}
.cpq-inline-cell--saving {
    outline: 1px solid var(--kromeka-grey);
}
.cpq-inline-cell--saved {
    outline: 1px solid var(--kromeka-yellow);
}
.cpq-inline-cell--error {
    outline: 1px solid var(--kromeka-red);
}
.cpq-inline-feedback {
    display: block;
    color: var(--text-muted);
    margin-top: 0.15rem;
}
.cpq-inline-cell--error .cpq-inline-feedback {
    color: var(--text-danger);
}

/* Configurable Items tab — live row editing feedback. */
.cpq-row-excluded {
    opacity: 0.6;
}
.cpq-row-excluded td .fw-semibold {
    text-decoration: line-through;
}
.cpq-configurable-table tr.cpq-cfg-saving {
    background: rgba(245, 181, 31, 0.12);
}
.cpq-configurable-table tr.cpq-cfg-saved {
    background: rgba(25, 135, 84, 0.12);
    transition: background 0.4s ease;
}
.cpq-configurable-table tr.cpq-cfg-error {
    background: rgba(220, 53, 69, 0.15);
}
.cpq-configurable-table option.cpq-cfg-option-disabled,
.cpq-configurable-table .cpq-cfg-option-disabled {
    color: var(--kromeka-grey);
    text-decoration: line-through;
}
.cpq-configurable-table select.cpq-cfg-select-invalid {
    border-color: var(--kromeka-red);
    box-shadow: 0 0 0 0.15rem rgba(175, 22, 30, 0.2);
}

/* Compact spreadsheet-style parameter grid */
.cpq-configurable-table.kromeka-sheet-table.table-hover > tbody > tr:hover > *,
.cpq-configurable-table.kromeka-sheet-table > tbody > tr:hover > td:not(.kromeka-sheet-cell-selected):not(.kromeka-sheet-cell-active):not(.kromeka-sheet-cell-copied):not(.kromeka-sheet-cell-editing) {
    --bs-table-bg-state: transparent;
    background-color: transparent;
    box-shadow: none;
}
.cpq-configurable-table.kromeka-data-table > tbody > tr.cpq-cfg-data-row > td {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    vertical-align: middle;
}
.cpq-configurable-table.kromeka-data-table > thead > tr > th {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}
.cpq-configurable-table .cpq-cfg-input.form-control,
.cpq-configurable-table .cpq-cfg-input.form-select {
    min-height: 1.75rem;
    height: 1.75rem;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    font-size: 0.8125rem;
    line-height: 1.25;
}
.cpq-configurable-table .select2-container--default .select2-selection--single {
    min-height: 1.75rem;
    height: 1.75rem;
}
.cpq-configurable-table .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.55rem;
    font-size: 0.8125rem;
    padding-left: 0.4rem;
}
.cpq-configurable-table .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 1.65rem;
}
.cpq-configurable-table td.cpq-cfg-layout-code-cell {
    white-space: nowrap;
    min-width: 7rem;
    max-width: 12rem;
}
.cpq-configurable-table .cpq-cfg-layout-code {
    font-size: 0.8125rem;
    color: var(--text-main);
}
.cpq-configurable-table .cpq-cfg-layout-code-input {
    width: 100%;
    min-width: 6rem;
}
.cpq-configurable-table td.cpq-cfg-type-cell,
.cpq-configurable-table td.cpq-cfg-title-cell {
    white-space: nowrap;
    max-width: 14rem;
    min-width: 8rem;
}
.cpq-configurable-table td.cpq-cfg-section-cell {
    min-width: 8.5rem;
    max-width: 16rem;
}
.cpq-configurable-table .cpq-cfg-section-input,
.cpq-configurable-table .cpq-cfg-section-display {
    width: 100%;
    min-width: 7rem;
}
.cpq-configurable-table .cpq-cfg-section-display {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-main);
}
.cpq-configurable-table .cpq-cfg-type-label {
    font-size: 0.8125rem;
}
.cpq-configurable-table .cpq-cfg-title-input,
.cpq-configurable-table .cpq-cfg-title-display {
    width: 100%;
    min-width: 7rem;
    text-transform: uppercase;
}
.cpq-configurable-table .cpq-cfg-title-display {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-main);
}
.cpq-configurable-table tr.cpq-cfg-row--just-added > td {
    background-color: color-mix(in srgb, var(--kromeka-yellow) 28%, var(--bg-card, #fff));
    color: var(--text-main);
}
.cpq-cfg-add-item-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--kromeka-surface-border, var(--border-color));
    background-color: var(--bg-card);
}
.cpq-cfg-add-item-btn.cpq-cfg-reset-saving,
.cpq-cfg-add-item-btn:disabled {
    opacity: 0.65;
    pointer-events: none;
}
@media (max-width: 575.98px) {
    .cpq-cfg-add-item-bar .cpq-cfg-add-item-btn {
        width: 100%;
    }
}
.cpq-configurable-table td.cpq-cfg-cell-selected {
    outline: 1px solid rgba(175, 22, 30, 0.45);
    outline-offset: -1px;
    background: rgba(175, 22, 30, 0.06);
}
.cpq-configurable-table td.cpq-cfg-cell-active {
    outline: 2px solid var(--kromeka-red);
    outline-offset: -2px;
    background: rgba(245, 181, 31, 0.14);
}
[data-theme="dark"] .cpq-configurable-table td.cpq-cfg-cell-selected {
    background: rgba(245, 181, 31, 0.08);
    outline-color: rgba(245, 181, 31, 0.45);
}
[data-theme="dark"] .cpq-configurable-table td.cpq-cfg-cell-active {
    outline-color: var(--kromeka-yellow);
    background: rgba(245, 181, 31, 0.16);
}
.cpq-configurable-items-panel-host kbd,
.cpq-cfg-definition-group kbd {
    font-size: 0.75em;
    padding: 0.1em 0.35em;
    border: 1px solid var(--kromeka-grey);
    border-radius: 0.25rem;
    background: var(--kromeka-light-grey);
    color: var(--kromeka-dark);
}
[data-theme="dark"] .cpq-configurable-items-panel-host kbd,
[data-theme="dark"] .cpq-cfg-definition-group kbd {
    background: var(--bg-card-header, #2c2c2a);
    color: var(--text-main);
    border-color: var(--kromeka-dark-grey);
}
.cpq-attr-match-kind,
.cpq-attr-match-kind-select {
    max-width: 12rem;
    min-width: 9rem;
}
.inline-eligibility-editor {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.25rem;
    min-width: 13.5rem;
}
.inline-eligibility-editor .inline-eligibility-op {
    max-width: 8.75rem;
    min-width: 7.25rem;
    flex: 0 1 auto;
}
.inline-eligibility-editor .inline-eligibility-value,
.inline-eligibility-editor .inline-eligibility-min,
.inline-eligibility-editor .inline-eligibility-max {
    max-width: 5rem;
    min-width: 3.5rem;
    flex: 1 1 3.5rem;
}
.inline-eligibility-editor .inline-eligibility-between-sep {
    flex: 0 0 auto;
    color: var(--text-muted);
    line-height: 1;
}
.inline-eligibility-editor .inline-eligibility-clear {
    line-height: 1;
    min-width: 1.75rem;
    min-height: 1.75rem;
    padding: 0.1rem 0.35rem;
    flex: 0 0 auto;
}
.inline-eligibility-editor .inline-eligibility-clear .bi {
    font-size: 0.85rem;
}
td[data-eligibility="1"] {
    min-width: 14rem;
}

.cpq-workbench-table.kromeka-sheet-table td[data-sheet-cell] {
    vertical-align: middle;
}
.cpq-workbench-table.kromeka-sheet-table td[data-inline-field="name"] .kromeka-sheet-input {
    min-width: 0;
}
.cpq-workbench-table.kromeka-data-table tbody td[data-col-key="actions"] .table-action-buttons {
    width: auto;
    flex-wrap: nowrap;
}

/* Dense sheet grids: funnel + title on one line. Do not use flex order. */
.kromeka-data-table.kromeka-data-table--compact-header thead th[data-col-key] {
    height: auto;
    min-height: 0;
    padding: 0.15rem 0.3rem;
    vertical-align: middle;
}

.kromeka-data-table.kromeka-data-table--compact-header thead th[data-col-key] .kromeka-th-label-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    min-height: 0;
    height: auto;
    gap: 0.2rem;
}

.kromeka-data-table.kromeka-data-table--compact-header thead th[data-col-key] .kromeka-th-actions {
    min-height: 0;
    max-height: none;
}

.kromeka-data-table.kromeka-data-table--compact-header thead th[data-col-key] .kromeka-th-actions:empty {
    display: none;
}

.kromeka-data-table.kromeka-data-table--compact-header thead th[data-col-key] .kromeka-th-label-wrap > .kromeka-th-label,
.kromeka-data-table.kromeka-data-table--compact-header thead th[data-col-key] .kromeka-th-label-wrap > .sortable-link,
.kromeka-data-table.kromeka-data-table--compact-header thead th[data-col-key] .kromeka-th-label-wrap > .kromeka-th-sort-link,
.kromeka-data-table.kromeka-data-table--compact-header thead th[data-col-key] .kromeka-th-label-wrap > .nc-th-label,
.kromeka-data-table.kromeka-data-table--compact-header thead th[data-col-key] .kromeka-th-label-wrap > .pp-th-label,
.kromeka-data-table.kromeka-data-table--compact-header thead th[data-col-key] .kromeka-th-label-wrap > .wo-list-th-vertical-label {
    align-self: center;
    justify-self: start;
    width: auto;
    text-align: left;
    white-space: nowrap;
}

.cpq-workbench-add-panel {
    background: var(--bg-card, #fff);
}
.cpq-workbench-add-form .form-label {
    color: var(--text-muted);
}
[data-theme="dark"] .cpq-workbench-add-panel {
    background: var(--bg-card);
}
.cpq-configurable-table .cpq-cfg-expand-col {
    width: auto;
    min-width: 5.75rem;
    max-width: none;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
    white-space: nowrap;
}
.cpq-configurable-table .cpq-cfg-row-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    line-height: 1.2;
}
.cpq-configurable-table .cpq-cfg-row-expand:hover,
.cpq-configurable-table .cpq-cfg-row-expand:focus-visible {
    color: var(--kromeka-dark);
    border-color: var(--kromeka-yellow);
}
[data-theme="dark"] .cpq-configurable-table .cpq-cfg-row-expand:hover,
[data-theme="dark"] .cpq-configurable-table .cpq-cfg-row-expand:focus-visible {
    color: var(--text-main);
}
.cpq-cfg-bom-subcategory {
    font-weight: 600;
}
.cpq-cfg-bom-row--override {
    background: rgba(245, 181, 31, 0.08);
}
/* Dark theme forces table cells transparent — keep override tint on the cells. */
.cpq-cfg-bom-row--override > td {
    background-color: rgba(245, 181, 31, 0.08) !important;
}
.cpq-cfg-bom-table tbody tr.cpq-cfg-bom-row--override > td.kromeka-frozen-col {
    background-color: rgba(245, 181, 31, 0.08) !important;
}
[data-theme="dark"] .cpq-cfg-bom-row--override > td {
    background-color: rgba(245, 181, 31, 0.12) !important;
}
[data-theme="dark"] .cpq-cfg-bom-table tbody tr.cpq-cfg-bom-row--override > td.kromeka-frozen-col,
[data-bs-theme="dark"] .cpq-cfg-bom-table tbody tr.cpq-cfg-bom-row--override > td.kromeka-frozen-col {
    background-color: rgba(245, 181, 31, 0.12) !important;
}
.cpq-configurable-table tr.cpq-cfg-row--manual-pricing > td {
    background-color: rgba(245, 181, 31, 0.10) !important;
}
[data-theme="dark"] .cpq-configurable-table tr.cpq-cfg-row--manual-pricing > td,
[data-bs-theme="dark"] .cpq-configurable-table tr.cpq-cfg-row--manual-pricing > td {
    background-color: rgba(245, 181, 31, 0.16) !important;
    color: var(--text-main);
}
.cpq-configurable-table tr.cpq-cfg-row--zero-cost > td {
    box-shadow: inset 4px 0 0 var(--kromeka-red);
}
.cpq-cfg-pricing-cell {
    min-width: 7.5rem;
    vertical-align: middle;
}
.cpq-cfg-pricing-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    justify-content: center;
}
.cpq-cfg-pricing-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    white-space: normal;
    text-align: left;
    line-height: 1.2;
}
.cpq-cfg-pricing-badge--manual {
    background-color: var(--kromeka-yellow);
    color: var(--kromeka-dark);
}
.cpq-cfg-pricing-badge--automatic {
    background-color: transparent;
    color: var(--text-main);
    border: 1px solid var(--border-color, var(--kromeka-grey));
}
.cpq-cfg-pricing-badge--zero-cost {
    background-color: var(--kromeka-red);
    color: #ffffff;
}
.cpq-cfg-pricing-explanation {
    color: var(--text-muted);
    max-width: 48rem;
}
.cpq-cfg-restore-automatic-btn,
.cpq-cfg-restore-all-btn,
.cpq-cfg-refresh-catalog-btn,
.cpq-cfg-recalculate-all-qty-btn {
    white-space: nowrap;
}
.cpq-cfg-restore-automatic-btn.cpq-cfg-reset-saving,
.cpq-cfg-restore-automatic-btn:disabled,
.cpq-cfg-restore-all-btn.cpq-cfg-reset-saving,
.cpq-cfg-restore-all-btn:disabled,
.cpq-cfg-recalculate-all-qty-btn.cpq-cfg-reset-saving,
.cpq-cfg-recalculate-all-qty-btn:disabled {
    opacity: 0.65;
    pointer-events: none;
}
@media (max-width: 575.98px) {
    .cpq-cfg-restore-automatic-btn,
    .cpq-cfg-restore-all-btn,
    .cpq-cfg-recalculate-all-qty-btn {
        width: 100%;
    }
    .cpq-cfg-pricing-status {
        justify-content: flex-start;
    }
}
.cpq-cfg-component-prices-table code,
.cpq-cfg-bom-table code {
    color: var(--text-accent);
    background-color: transparent;
}

.cpq-cfg-component-prices-card .table th,
.cpq-cfg-component-prices-card .table td {
    vertical-align: middle;
}
.cpq-cfg-parameters-table-card .table-responsive {
    container-type: inline-size;
    container-name: cpq-cfg-params;
}
.cpq-configurable-table tr.cpq-cfg-detail-row:not(.cpq-cfg-list-detail-row) > td {
    padding-left: 0;
    padding-right: 0;
}
.cpq-cfg-bom-panel {
    position: sticky;
    left: 0;
    z-index: 4;
    box-sizing: border-box;
    width: var(--cpq-cfg-bom-panel-width, calc(100cqw - 0.5rem));
    max-width: var(--cpq-cfg-bom-panel-width, calc(100cqw - 0.5rem));
    padding: 0.5rem 0.75rem;
    background-color: var(--bg-card);
    color: var(--text-main);
}
.cpq-cfg-bom-panel .table-responsive {
    max-height: min(70vh, 32rem);
    overflow: auto;
}
.cpq-cfg-bom-panel .cpq-cfg-bom-table.table {
    width: max-content;
    min-width: max-content;
    max-width: none;
    margin-bottom: 0;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}
.cpq-cfg-bom-table thead {
    position: sticky;
    top: 0;
    z-index: 3;
    isolation: isolate;
    background-color: var(--kromeka-data-table-thead-bg);
    color: var(--kromeka-data-table-thead-text);
}
.cpq-cfg-bom-table thead th,
.cpq-configurable-table.kromeka-data-table .cpq-cfg-bom-panel .cpq-cfg-bom-table thead th[data-col-key] {
    background-color: var(--kromeka-data-table-thead-bg);
    background-clip: padding-box;
    color: var(--kromeka-data-table-thead-text);
    box-shadow:
        inset 0 0 0 9999px var(--kromeka-data-table-thead-bg),
        inset 0 -1px 0 0 color-mix(in srgb, var(--kromeka-data-table-thead-text) 22%, transparent);
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cpq-configurable-table.kromeka-data-table .cpq-cfg-bom-panel .cpq-cfg-bom-table thead th[data-col-key] .kromeka-th-label-wrap {
    display: block;
    min-height: 0;
    height: auto;
    width: auto;
    grid-template-rows: none;
}
.cpq-configurable-table.kromeka-data-table .cpq-cfg-bom-panel .cpq-cfg-bom-table thead th[data-col-key] .kromeka-th-actions {
    display: none;
}
.cpq-cfg-bom-table tfoot {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background-color: var(--bg-card);
}
.cpq-cfg-bom-table tfoot th {
    background-color: var(--bg-card);
    background-clip: padding-box;
    color: var(--text-main);
}
.cpq-cfg-bom-table th,
.cpq-cfg-bom-table td {
    vertical-align: middle;
    text-align: right;
    white-space: nowrap;
    padding: 0.18rem 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cpq-cfg-bom-panel .cpq-cfg-bom-table.resizable-table thead th[data-col-key] {
    max-width: none;
}
.cpq-cfg-bom-table th[data-col-key="component"],
.cpq-cfg-bom-table td[data-col-key="component"] {
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
}
.cpq-cfg-bom-table .cpq-cfg-component-amount-input {
    width: 100%;
    min-width: 5rem;
    max-width: none;
    margin-left: auto;
    margin-right: 0;
}
.cpq-cfg-component-amount-input,
.cpq-cfg-component-price-input {
    max-width: 7rem;
    margin-left: auto;
}
.cpq-cfg-component-amount-input.cpq-cfg-price-saving,
.cpq-cfg-component-price-input.cpq-cfg-price-saving {
    opacity: 0.7;
}
.cpq-cfg-component-amount-input.cpq-cfg-price-saved,
.cpq-cfg-component-price-input.cpq-cfg-price-saved {
    border-color: var(--bs-success);
}
.cpq-cfg-component-amount-input.cpq-cfg-price-error,
.cpq-cfg-component-price-input.cpq-cfg-price-error {
    border-color: var(--kromeka-red);
}
.cpq-cfg-bom-table .cpq-cfg-bom-totals-row th,
.cpq-cfg-bom-table .cpq-cfg-bom-totals-row td {
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}
.cpq-cfg-bom-table .cpq-cfg-bom-totals-row th {
    border-top-width: 2px;
    font-weight: 600;
    color: var(--text-muted);
}
.cpq-cfg-bom-table .cpq-cfg-bom-totals-row th:nth-child(2) {
    color: var(--text-main);
}
.cpq-cfg-bom-table .cpq-cfg-bom-totals-row + .cpq-cfg-bom-totals-row th,
.cpq-cfg-bom-table .cpq-cfg-bom-totals-row + .cpq-cfg-bom-totals-row td {
    border-top-width: 1px;
}
.cpq-cfg-bom-table .cpq-cfg-recalculate-line-btn {
    padding: 0.15rem 0.4rem;
    line-height: 1;
    color: var(--text-main);
    border-color: var(--border-color);
}
.cpq-cfg-bom-table .cpq-cfg-recalculate-line-btn:hover,
.cpq-cfg-bom-table .cpq-cfg-recalculate-line-btn:focus-visible {
    color: var(--text-main);
    border-color: var(--kromeka-yellow);
    background-color: transparent;
}
.cpq-cfg-bom-table .cpq-cfg-recalculate-line-btn .bi {
    font-size: 0.95rem;
}
.cpq-cfg-recalculate-line-btn.cpq-cfg-reset-saving .bi {
    animation: inline-cell-spin 1.2s linear infinite;
}
[data-theme="dark"] .cpq-cfg-bom-table .cpq-cfg-recalculate-line-btn,
[data-bs-theme="dark"] .cpq-cfg-bom-table .cpq-cfg-recalculate-line-btn {
    color: var(--text-main);
    border-color: var(--border-color);
}
[data-theme="dark"] .cpq-cfg-bom-table .cpq-cfg-bom-totals-row > th,
[data-bs-theme="dark"] .cpq-cfg-bom-table .cpq-cfg-bom-totals-row > th {
    color: var(--text-muted);
}
[data-theme="dark"] .cpq-cfg-bom-table .cpq-cfg-bom-totals-row > th:nth-child(2),
[data-bs-theme="dark"] .cpq-cfg-bom-table .cpq-cfg-bom-totals-row > th:nth-child(2) {
    color: var(--text-main);
}
.cpq-configurable-table tr.cpq-cfg-incomplete .cpq-cfg-input[data-required="1"]:invalid,
.cpq-configurable-table tr.cpq-cfg-incomplete select.cpq-cfg-input[data-required="1"]:invalid {
    border-color: var(--kromeka-grey);
}
.cpq-configurable-table tr.cpq-cfg-detail-row > td {
    border-top: none;
}
.cpq-configurable-table .cpq-cfg-list-cell {
    min-width: 9.5rem;
    max-width: 14rem;
    vertical-align: middle;
    white-space: nowrap;
}
.cpq-configurable-table .cpq-cfg-list-cell-inner {
    flex-wrap: nowrap;
    min-width: 0;
}
.cpq-configurable-table .cpq-cfg-list-summary {
    flex: 0 0 auto;
    color: var(--text-main);
    white-space: nowrap;
}
.cpq-configurable-table tr.cpq-cfg-list-detail-row > td.cpq-cfg-list-editor-cell {
    background: var(--bg-card);
    color: var(--text-main);
}
.cpq-cfg-list-editor {
    position: sticky;
    left: 0;
    z-index: 2;
    width: min(100%, var(--kromeka-readable-max-width), calc(100vw - 2rem));
    color: var(--text-main);
    background: var(--bg-card);
    min-width: 0;
}
.cpq-cfg-list-editor:has(.cpq-component-list-picker) {
    width: 100%;
    max-width: 100%;
}
.cpq-cfg-list-editor h3 {
    color: var(--text-main);
}
.cpq-cfg-list-editor .cpq-component-list-picker {
    background: var(--bg-card);
    color: var(--text-main);
}
@media (max-width: 575.98px) {
    .cpq-configurable-table .cpq-cfg-list-cell {
        max-width: none;
    }
    .cpq-configurable-table .cpq-cfg-list-cell-inner {
        flex-wrap: wrap;
    }
    .cpq-cfg-list-editor .cpq-component-list-picker__toolbar {
        gap: 0.35rem;
    }
}

/* Configurable Items — separate component-prices block from parameters table + controls. */
.cpq-cfg-component-prices-card {
    border-bottom: 1px solid var(--border-color);
}

.cpq-cfg-component-prices-deferred {
    padding: 0.25rem 0 0.5rem;
}

.cpq-cfg-load-component-prices-btn:disabled {
    cursor: wait;
}

.cpq-cfg-parameters-table-card {
    border-top: 3px solid var(--kromeka-yellow) !important;
}

.cpq-cfg-parameters-table-card > .card-header {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}
/* Theme-aware subcategory strip — match .cpq-table-group-header (beats dark transparent cells). */
.cpq-cfg-subcategory-header > td {
    background-color: var(--kromeka-data-table-thead-bg) !important;
    color: var(--kromeka-data-table-thead-text) !important;
    border-color: var(--border-color);
    border-top-width: 2px;
    vertical-align: middle;
}
.cpq-cfg-subcategory-header .text-muted {
    color: color-mix(in srgb, var(--kromeka-data-table-thead-text) 68%, transparent) !important;
}
.cpq-cfg-subcategory-header .cpq-cfg-subcategory-total-cost,
.cpq-cfg-subcategory-header .cpq-cfg-subcategory-total-list {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--kromeka-data-table-thead-text) !important;
}
.cpq-cfg-component-prices-card .cpq-cfg-subcategory-toggle {
    color: var(--kromeka-data-table-thead-text) !important;
    line-height: 1;
}
.cpq-cfg-component-prices-card .cpq-cfg-subcategory-toggle:hover,
.cpq-cfg-component-prices-card .cpq-cfg-subcategory-toggle:focus-visible {
    color: var(--kromeka-data-table-thead-sort-link-hover) !important;
}
.cpq-cfg-component-prices-card .cpq-cfg-subcategory-chevron {
    font-size: 0.95rem;
    transition: transform 0.15s ease;
    color: var(--kromeka-data-table-thead-sort-icon);
}
.cpq-cfg-component-prices-card .cpq-cfg-subcategory-toggle[aria-expanded="false"] .cpq-cfg-subcategory-chevron {
    transform: rotate(-90deg);
}
/* Outline actions on dark data-table header strips (Reset to catalog, etc.). */
.cpq-cfg-subcategory-header .btn.btn-outline-secondary,
.cpq-table-group-header .btn.btn-outline-secondary {
    color: var(--kromeka-data-table-thead-text);
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
}
.cpq-cfg-subcategory-header .btn.btn-outline-secondary:hover,
.cpq-cfg-subcategory-header .btn.btn-outline-secondary:focus-visible,
.cpq-table-group-header .btn.btn-outline-secondary:hover,
.cpq-table-group-header .btn.btn-outline-secondary:focus-visible {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.55);
}
.cpq-cfg-component-prices-card .cpq-cfg-component-prices-toggle {
    color: var(--text-main);
    line-height: 1;
}
.cpq-cfg-component-prices-card .cpq-cfg-component-prices-chevron {
    font-size: 1rem;
    transition: transform 0.15s ease;
    display: inline-block;
}
.cpq-cfg-component-prices-card .cpq-cfg-component-prices-toggle[aria-expanded="true"] .cpq-cfg-component-prices-chevron {
    transform: rotate(90deg);
}
.cpq-cfg-component-prices-card--panel-collapsed .cpq-cfg-component-prices-chevron {
    transform: none;
}
.cpq-cfg-subcategory-detail.collapsing,
.cpq-cfg-subcategory-detail.collapse:not(.show),
.cpq-cfg-subcategory-detail.is-collapsed {
    display: none !important;
}
.cpq-cfg-subcategory-header {
    cursor: pointer;
}
.cpq-cfg-subcategory-header .cpq-cfg-reset-subcategory-btn,
.cpq-cfg-subcategory-header .cpq-cfg-reset-qty-btn {
    cursor: pointer;
}
.cpq-cfg-component-qty-input {
    min-width: 4.5rem;
    max-width: 7rem;
    margin-left: auto;
}
.cpq-cfg-component-qty-cell .cpq-cfg-reset-qty-btn {
    white-space: nowrap;
}
.cpq-cfg-always-fullbleed {
    max-width: none;
}
.cpq-configurable-items-panel-host.cpq-cfg-always-fullbleed .cpq-cfg-definition-group,
.cpq-configurable-items-panel-host.cpq-cfg-always-fullbleed .cpq-cfg-component-prices-card,
.cpq-configurable-items-panel-host.cpq-cfg-always-fullbleed .cpq-cfg-parameters-table-card {
    max-width: none;
}
.cpq-cfg-reset-subcategory-btn.cpq-cfg-reset-saving,
.cpq-cfg-reset-qty-btn.cpq-cfg-reset-saving,
.cpq-cfg-recalculate-line-btn.cpq-cfg-reset-saving {
    opacity: 0.65;
    pointer-events: none;
}

/* Configurable Items tab — shared content-driven header grid. */
.table-responsive .cpq-configurable-table.kromeka-data-table {
    width: max-content;
    min-width: 100%;
}

.cpq-configurable-table.kromeka-data-table > thead > tr {
    height: auto;
}

.cpq-configurable-table.kromeka-data-table > thead > tr > th[data-col-key] {
    height: auto;
    min-height: 0;
    max-height: none;
    box-sizing: border-box;
    padding: 0.3rem 0.4rem;
    text-align: center;
    vertical-align: top;
    overflow: visible;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.15;
}

.cpq-configurable-table.kromeka-data-table > thead > tr > th[data-col-key] .cpq-cfg-th-unit {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: color-mix(in srgb, var(--kromeka-data-table-thead-text) 72%, transparent);
}

.cpq-configurable-table.kromeka-data-table > thead > tr > th[data-col-key] .text-danger {
    margin-left: 0.1rem;
}

.cpq-configurable-table.kromeka-data-table > thead > tr > th[data-col-key="unit_cost"],
.cpq-configurable-table.kromeka-data-table > thead > tr > th[data-col-key="unit_list"],
.cpq-configurable-table.kromeka-data-table > tbody > tr > td[data-col-key="unit_cost"],
.cpq-configurable-table.kromeka-data-table > tbody > tr > td[data-col-key="unit_list"] {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

.cpq-configurable-table.kromeka-data-table > thead > tr > th[data-col-key="price_list"],
.cpq-configurable-table.kromeka-data-table > tbody > tr > td[data-col-key="price_list"] {
    text-align: center !important;
    vertical-align: middle;
}

.cpq-configurable-table.kromeka-data-table > thead > tr > th[data-col-key="actions"],
.cpq-configurable-table.kromeka-data-table > tbody > tr > td[data-col-key="actions"] {
    width: 7.5rem;
    min-width: 7.5rem;
    max-width: 7.5rem;
    box-sizing: border-box;
}

.cpq-configurable-table tbody td[data-col-key="actions"] .table-action-buttons {
    width: auto;
    flex-wrap: nowrap;
    justify-content: center !important;
}

.cpq-configurable-table .cpq-cfg-expand-col {
    width: 3rem;
    min-width: 3rem;
}

/* Configurable Items — structured parameter cell tooltips (Bootstrap). */
.cpq-cfg-param-tooltip .tooltip-inner {
    max-width: min(22rem, 90vw);
    padding: 0.55rem 0.7rem;
    text-align: left;
    line-height: 1.35;
}

.cpq-cfg-param-tooltip .cpq-cfg-tooltip-label {
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 0.2rem;
    color: var(--text-card-header, #fff);
}

.cpq-cfg-param-tooltip .cpq-cfg-tooltip-value {
    font-size: 0.84rem;
    font-weight: 500;
    word-break: break-word;
}

.cpq-cfg-param-tooltip .cpq-cfg-tooltip-meta {
    margin-top: 0.25rem;
    font-size: 0.72rem;
    opacity: 0.85;
}

.cpq-cfg-param-tooltip .cpq-cfg-tooltip-help {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    font-size: 0.74rem;
    opacity: 0.92;
    word-break: break-word;
}

/* Parameter values table — click-to-edit cells share the inline-cell look. */
.cpq-parameter-values-table .cpq-param-value-inline-cell {
    cursor: pointer;
    position: relative;
}
.cpq-parameter-values-table .cpq-param-value-inline-cell:hover {
    outline: 1px dashed var(--kromeka-grey);
    outline-offset: -1px;
}
.cpq-param-value-cell--saving {
    outline: 1px solid var(--kromeka-grey) !important;
}
.cpq-param-value-cell--saved {
    outline: 1px solid var(--kromeka-yellow) !important;
}
.cpq-param-value-cell--error {
    outline: 1px solid var(--kromeka-red) !important;
}
.cpq-param-value-feedback {
    color: var(--text-muted);
}
.cpq-param-value-cell--error .cpq-param-value-feedback {
    color: var(--text-danger);
}

/* Product Definition — Parameters tab row reorder */
.cpq-parameters-table__drag-col {
    width: 2.25rem;
    padding-left: 0.35rem;
    padding-right: 0.15rem;
    vertical-align: middle;
}

.cpq-parameters-drag-handle {
    cursor: grab;
    color: var(--text-muted);
    line-height: 1;
}

.cpq-parameters-drag-handle:active {
    cursor: grabbing;
}

.cpq-parameters-table__row--ghost {
    opacity: 0.55;
    background: var(--bg-card-header);
}

.cpq-parameters-reorder-feedback {
    font-size: 0.875rem;
}

.cpq-parameters-table__actions .btn-outline-secondary {
    min-width: 2.25rem;
}

.cpq-parameters-table__row--selectable {
    cursor: pointer;
}

.cpq-parameters-table__row--selectable:focus-visible {
    outline: 2px solid var(--kromeka-yellow);
    outline-offset: -2px;
}

.cpq-parameters-table__row.table-active {
    --bs-table-bg-state: var(--bg-card-header);
}

.cpq-parameters-detail-card--loading,
.cpq-workspace-configure-modal--loading .modal-body {
    opacity: 0.85;
}

.cpq-subcategory-add-bar {
    padding: 0.65rem 0.75rem;
    background-color: var(--bg-card);
}

.cpq-subcategory-add-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.75rem;
}

.cpq-subcategory-add-label {
    flex: 0 0 100%;
    margin-bottom: 0;
    font-size: 0.8125rem;
    font-weight: 600;
}

@media (min-width: 768px) {
    .cpq-subcategory-add-label {
        flex: 0 0 auto;
        width: auto;
        margin-bottom: 0.25rem;
    }

    .cpq-subcategory-add-form {
        display: grid;
        grid-template-columns: minmax(12rem, 1.4fr) minmax(8rem, 10rem) minmax(5rem, 7rem) auto auto;
        grid-template-rows: auto auto;
        column-gap: 0.75rem;
        row-gap: 0.25rem;
        align-items: end;
    }

    .cpq-subcategory-add-field--subcategory,
    .cpq-subcategory-add-field--mode,
    .cpq-subcategory-add-field--qty,
    .cpq-subcategory-add-field--required {
        display: flex;
        align-items: center;
        min-height: var(--kromeka-control-row-sm-height);
    }

    .cpq-subcategory-add-field--subcategory .select2-container {
        width: 100% !important;
    }

    .cpq-subcategory-add-submit {
        grid-column: -1;
        grid-row: 2;
        justify-self: end;
        align-self: end;
    }
}

.cpq-subcategories-table__row--selectable {
    cursor: pointer;
}

.cpq-component-list-picker__scroll {
    margin-bottom: 0.5rem;
}
.cpq-component-list-picker__table {
    width: 100%;
    min-width: 36rem;
    color: var(--text-main);
    background: var(--bg-card);
}
.cpq-component-list-picker--priced .cpq-component-list-picker__table {
    min-width: 46rem;
}
.cpq-component-list-picker--params .cpq-component-list-picker__table {
    min-width: 52rem;
}
.cpq-component-list-picker__table thead,
.kromeka-data-table .cpq-component-list-picker__table thead,
.kromeka-data-table .cpq-component-list-picker__table thead tr {
    position: static;
    isolation: auto;
    background-color: var(--bg-card-header);
    color: var(--text-main);
    box-shadow: none;
    --bs-table-bg: var(--bg-card-header);
    --bs-table-color: var(--text-main);
    --bs-table-accent-bg: var(--bg-card-header);
    --bs-table-bg-state: var(--bg-card-header);
}
.cpq-component-list-picker__table thead th,
.kromeka-data-table .cpq-component-list-picker__table thead th {
    white-space: nowrap;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-main);
    vertical-align: middle;
    background-color: var(--bg-card-header);
    background-clip: padding-box;
    box-shadow: none;
    border-bottom: 1px solid var(--border-color);
}
.cpq-component-list-picker__table thead th.cpq-component-list-picker__col-param {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
}
.kromeka-data-table .cpq-component-list-picker__table tbody td,
.kromeka-data-table .cpq-component-list-picker__table tfoot td {
    max-width: none;
    overflow: visible;
    white-space: normal;
    color: var(--text-main);
    background-color: var(--bg-card);
}
.cpq-component-list-picker__col-component {
    min-width: 18rem;
}
.cpq-component-list-picker__col-qty {
    width: 5.5rem;
    min-width: 5.5rem;
    max-width: 6.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.cpq-component-list-picker__col-qty .form-control {
    width: 5.5rem;
    max-width: 5.5rem;
    margin-left: auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.cpq-component-list-picker__col-param {
    min-width: 6rem;
}
.cpq-component-list-picker__col-param--editable {
    min-width: 12rem;
}
.cpq-component-list-picker__col-param--editable .cpq-component-list-picker__param {
    min-width: 11rem;
}
.cpq-component-list-picker__col-param--editable[data-param-type="number"],
.cpq-component-list-picker__col-param--editable[data-param-type="integer"],
.cpq-component-list-picker__col-param--editable[data-param-type="decimal"],
.cpq-component-list-picker__col-param--editable[data-param-type="boolean"] {
    min-width: 5.5rem;
}
.cpq-component-list-picker__col-param--editable[data-param-type="boolean"] {
    min-width: 6.5rem;
}
.cpq-component-list-picker__col-param--editable[data-param-type="number"] .cpq-component-list-picker__param,
.cpq-component-list-picker__col-param--editable[data-param-type="integer"] .cpq-component-list-picker__param,
.cpq-component-list-picker__col-param--editable[data-param-type="decimal"] .cpq-component-list-picker__param,
.cpq-component-list-picker__col-param--editable[data-param-type="boolean"] .cpq-component-list-picker__param {
    min-width: 4.5rem;
    max-width: 6.5rem;
    width: 100%;
}
.cpq-component-list-picker__col-param[data-param-type="number"],
.cpq-component-list-picker__col-param[data-param-type="integer"],
.cpq-component-list-picker__col-param[data-param-type="decimal"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.cpq-component-list-picker__param[data-param-type="number"],
.cpq-component-list-picker__param[data-param-type="integer"],
.cpq-component-list-picker__param[data-param-type="decimal"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.cpq-component-list-picker__col-param .invalid-feedback,
.cpq-component-list-picker__extra .invalid-feedback {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
    max-width: 11rem;
}
.cpq-component-list-picker__col-param--editable[data-param-type="number"] .invalid-feedback,
.cpq-component-list-picker__col-param--editable[data-param-type="integer"] .invalid-feedback,
.cpq-component-list-picker__col-param--editable[data-param-type="decimal"] .invalid-feedback,
.cpq-component-list-picker__col-param--editable[data-param-type="boolean"] .invalid-feedback {
    max-width: 6.5rem;
}
.cpq-component-list-picker__col-money {
    min-width: 6.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cpq-component-list-picker__col-actions {
    width: 5.5rem;
    min-width: 5.5rem;
    vertical-align: middle;
}
.cpq-component-list-picker__select-wrap {
    position: relative;
    min-width: 18rem;
    width: 100%;
}
.cpq-component-list-picker__select-wrap .form-select {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.cpq-component-list-picker__select-wrap .select2-container {
    width: 100% !important;
    max-width: 100%;
}
.cpq-component-list-picker__select-wrap .select2-container .select2-selection--single {
    overflow: hidden;
}
.cpq-component-list-picker__select-wrap .select2-container .select2-selection__rendered {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cpq-component-list-picker__actions {
    justify-content: flex-end;
}
.cpq-component-list-picker__line--blank .cpq-component-list-picker__remove,
.cpq-component-list-picker__line--blank .cpq-component-list-picker__duplicate,
.cpq-component-list-picker__line--blank .cpq-subcategory-multi-picker__remove {
    display: none;
}
.cpq-component-list-picker .cpq-offer-item-drag-handle {
    display: none;
}
.cpq-component-list-picker[data-cpq-reorder="1"] .cpq-component-list-picker__col-component {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.cpq-component-list-picker[data-cpq-reorder="1"] .cpq-component-list-picker__select-wrap {
    flex: 1 1 auto;
    min-width: 0;
}
.cpq-component-list-picker[data-cpq-reorder="1"] .cpq-offer-item-drag-handle {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    cursor: grab;
    touch-action: none;
    user-select: none;
    color: var(--text-muted);
    line-height: 1;
    text-decoration: none;
}
.cpq-component-list-picker[data-cpq-reorder="1"] .cpq-offer-item-drag-handle:active {
    cursor: grabbing;
}
.cpq-component-list-picker[data-cpq-reorder="1"] .cpq-component-list-picker__line--blank .cpq-offer-item-drag-handle {
    display: none;
}
.cpq-component-list-picker__table .cpq-component-list-picker__line--ghost > tr > td {
    opacity: 0.55;
    background: var(--bg-card-header);
}
.cpq-component-list-picker__param,
.cpq-component-list-picker__param-ro {
    min-width: 0;
}
.cpq-component-list-picker__param-ro {
    color: var(--text-main);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.cpq-component-list-picker__extras-row > td {
    background: var(--bg-card);
    color: var(--text-main);
    padding-top: 0.15rem;
    padding-bottom: 0.45rem;
}
.cpq-component-list-picker__extras summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.8rem;
}
.cpq-component-list-picker__extra {
    display: grid;
    grid-template-columns: minmax(6rem, 10rem) minmax(6rem, 1fr);
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.25rem;
    color: var(--text-main);
    font-size: 0.85rem;
}
.cpq-component-list-picker__param.is-invalid {
    border-color: var(--kromeka-red);
}
.cpq-component-list-picker__unit-cost,
.cpq-component-list-picker__unit-list,
.cpq-component-list-picker__line-list,
.cpq-component-list-picker__total-cost,
.cpq-component-list-picker__total-list {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-main);
    font-size: 0.85rem;
}
.cpq-component-list-picker__totals {
    font-weight: 600;
    color: var(--text-main);
    border-top: 1px solid var(--border-color);
}
.cpq-component-list-picker__totals td {
    border-top-width: 2px;
}
.cpq-component-list-picker__totals-label {
    color: var(--text-muted);
    font-size: 0.8rem;
}
.cpq-component-list-picker__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.cpq-component-list-picker__toolbar .cpq-component-list-picker__template-select,
.cpq-component-list-picker__toolbar .cpq-component-list-picker__template-name {
    flex: 1 1 9rem;
    min-width: 8rem;
    max-width: 16rem;
    color: var(--text-main);
    background-color: var(--bg-card);
}
.cpq-component-list-picker__template-feedback {
    flex: 1 1 100%;
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-main);
    white-space: pre-line;
}
.cpq-component-list-picker__template-feedback--error {
    color: var(--text-danger);
}

.cpq-subcategory-auto-preview ul {
    margin-bottom: 0;
}

.cpq-parameters-table__actions-cell {
    cursor: default;
}

.cpq-parameters-table__drag-col,
.cpq-parameters-table__drag-col .cpq-parameters-drag-handle {
    cursor: grab;
}

.cpq-parameter-catalog-table thead th:not(.cpq-parameter-catalog-table__key),
.cpq-parameter-catalog-table tbody td:not(.cpq-parameter-catalog-table__key) {
    text-align: center;
}

.cpq-parameter-catalog-table__key,
.cpq-parameter-catalog-table thead th.cpq-parameter-catalog-table__key {
    text-align: left;
}

.cpq-parameter-catalog-table__key code {
    color: var(--text-accent);
    background-color: transparent;
    font-size: 0.9em;
}

.cpq-parameter-catalog-row {
    cursor: pointer;
}

.cpq-parameter-catalog-row > td {
    transition: background-color 0.12s ease;
}

.cpq-parameter-catalog-row:hover > td {
    background-color: var(--hover-bg);
}

.cpq-parameter-catalog-row--selected > td {
    background-color: var(--notebook-select-bg, rgba(175, 22, 30, 0.08));
    box-shadow: inset 3px 0 0 var(--kromeka-yellow);
}

.cpq-parameter-catalog-row--selected:hover > td {
    background-color: color-mix(in srgb, var(--kromeka-yellow) 16%, var(--bg-card));
}

[data-theme="dark"] .cpq-parameter-catalog-row--selected > td,
[data-bs-theme="dark"] .cpq-parameter-catalog-row--selected > td {
    background-color: rgba(245, 181, 31, 0.14);
}

.cpq-parameter-catalog-row__values .fw-semibold {
    color: var(--text-accent);
}

.cpq-parameter-values-table thead th:not(.cpq-parameter-values-table__value),
.cpq-parameter-values-table tbody td:not(.cpq-parameter-values-table__value) {
    text-align: center;
}

.cpq-parameter-values-table__value,
.cpq-parameter-values-table thead th.cpq-parameter-values-table__value {
    text-align: left;
}

.cpq-parameter-catalog__actions {
    min-width: auto;
    width: 1%;
    white-space: nowrap;
}

.cpq-parameter-catalog-table .table-action-buttons,
.cpq-parameter-values-table .table-action-buttons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
}

.cpq-parameter-catalog-table .table-action-buttons .btn.table-action-icon-btn,
.cpq-parameter-values-table .table-action-buttons .btn.table-action-icon-btn {
    padding: 0.25rem 0.45rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
}

.cpq-parameter-catalog-table td[data-inline-field] .inline-cell-display,
.cpq-parameter-values-table td[data-inline-field] .inline-cell-display {
    display: inline-block;
    max-width: 100%;
}

.cpq-parameter-catalog-table tbody td:not(.cpq-parameter-catalog-table__key) a,
.cpq-parameter-values-table tbody td:not(.cpq-parameter-values-table__value) a {
    color: var(--text-accent);
    font-weight: 600;
}

.cpq-parameter-catalog-table tbody td:not(.cpq-parameter-catalog-table__key) a:hover,
.cpq-parameter-catalog-table tbody td:not(.cpq-parameter-catalog-table__key) a:focus-visible,
.cpq-parameter-values-table tbody td:not(.cpq-parameter-values-table__value) a:hover,
.cpq-parameter-values-table tbody td:not(.cpq-parameter-values-table__value) a:focus-visible {
    color: var(--link-color);
}

.cpq-parameter-configure-trigger.btn-link {
    color: var(--text-main);
}

.cpq-parameter-configure-trigger.btn-link:hover,
.cpq-parameter-configure-trigger.btn-link:focus {
    color: var(--kromeka-yellow);
}

.cpq-offer-item-title-display.btn-link {
    color: inherit;
    font-weight: inherit;
}

.cpq-offer-item-title-display.btn-link:hover,
.cpq-offer-item-title-display.btn-link:focus,
.cpq-offer-item-title-display.btn-link:focus-visible {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

[data-theme="dark"] .cpq-offer-item-title-display.btn-link,
[data-theme="dark"] .cpq-offer-item-title-display.btn-link:hover,
[data-theme="dark"] .cpq-offer-item-title-display.btn-link:focus,
[data-theme="dark"] .cpq-offer-item-title-display.btn-link:focus-visible {
    color: var(--text-main);
}

/* Component Library — long-text columns (same interaction model as nonconformity list) */
.cpq-component-main-table .nc-longtext-td {
    vertical-align: middle;
}

.cpq-component-main-table .cpq-inline-editable-cell .cpq-inline-display {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
}

.cpq-component-main-table td[data-col-key="code"] .badge {
    vertical-align: middle;
}

.cpq-component-main-table td[data-col-key="name"].nc-longtext-td,
.cpq-component-main-table td[data-col-key="description"].nc-longtext-td,
.cpq-component-main-table td[data-col-key="technical_details"].nc-longtext-td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
    max-width: 360px;
    vertical-align: middle;
}

.cpq-component-main-table td[data-col-key="name"].nc-longtext-td {
    max-width: 280px;
}

/* Component library: three icon-only row actions — keep column no wider than the button group */
.cpq-component-main-table.kromeka-data-table thead th[data-col-key="actions"],
.cpq-component-main-table.kromeka-data-table tbody td[data-col-key="actions"] {
    width: 5.5rem;
    min-width: 5.5rem;
    max-width: 5.5rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.cpq-component-main-table.kromeka-data-table tbody td[data-col-key="actions"] .table-action-buttons {
    width: auto;
    flex-wrap: nowrap;
}

/* Component Library main table — center headers and cells except Code (first column). */
.cpq-component-main-table.kromeka-data-table tbody td[data-col-key] {
    vertical-align: middle;
}

.cpq-component-main-table.kromeka-data-table thead th[data-col-key]:not([data-col-key="code"]),
.cpq-component-main-table.kromeka-data-table tbody td[data-col-key]:not([data-col-key="code"]) {
    text-align: center;
    vertical-align: middle;
}

.cpq-component-main-table.kromeka-data-table thead th[data-col-key="code"],
.cpq-component-main-table.kromeka-data-table tbody td[data-col-key="code"] {
    text-align: left;
}

.cpq-component-main-table.kromeka-data-table tbody td[data-col-key]:not([data-col-key="code"]).nc-longtext-td .nc-longtext-td__inner {
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 0;
}

.cpq-component-main-table.kromeka-data-table tbody td[data-col-key]:not([data-col-key="code"]) .table-action-buttons {
    justify-content: center;
}

.cpq-component-main-table td[data-col-key="name"].nc-longtext-td .nc-line-clamp,
.cpq-component-main-table td[data-col-key="description"].nc-longtext-td .nc-line-clamp,
.cpq-component-main-table td[data-col-key="technical_details"].nc-longtext-td .nc-line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* CPQ: offline translation toolbar on definition/component forms.
   Use theme card surface (dark: #2c2c2a via --bg-card), not --kromeka-light-grey,
   so the bar matches adjacent .card blocks in both themes. */
.kromeka-cpq-translate-panel {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
}

.kromeka-cpq-translate-panel .form-label {
    color: var(--text-main);
}

/* css/screens/050-work-order-form-header-grid.css */
/* ============================================================
   Work order form — header grid
   ============================================================ */

#workorder-form .wo-header-group + .wo-header-group {
    margin-top: 1rem;
}

#workorder-form .wo-header-group .form-label {
    margin-bottom: 0.35rem;
}

#workorder-form .wo-header-grid .form-control,
#workorder-form .wo-header-grid .form-select,
#workorder-form .wo-header-grid select.form-control,
#workorder-form .wo-header-grid .select2-container,
#workorder-form .wo-header-grid .select2-container .select2-selection,
#workorder-form .wo-header-grid .flatpickr-wrapper,
#workorder-form .wo-header-grid .flatpickr-input {
    width: 100% !important;
    max-width: none;
    min-width: 0;
}

#workorder-form .wo-party-pair > * {
    flex: 1 1 0;
    min-width: 0;
}

/* Hide number-input spinners on the work order form */
#workorder-form input[type="number"]::-webkit-inner-spin-button,
#workorder-form input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#workorder-form input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.wo-step-col-na { width: 48px; }
.wo-step-col-step { min-width: 160px; }
.wo-step-col-dept { min-width: 120px; }
.wo-step-col-date { min-width: 104px; }
.wo-step-col-hours { width: 74px; }
.wo-step-col-assign { min-width: 180px; }
.wo-step-col-check { width: 72px; }

/* css/screens/052-work-order-template-editor-sub-task-steps-milest.css */
/* ------------------------------------------------------------
 * Work order template editor — sub-task steps & milestone blocks
 * ------------------------------------------------------------ */
.wo-tpl-editor-block.wo-tpl-subtask-block,
.wo-tpl-editor-block.wo-tpl-milestone-block {
    background-color: var(--bg-card);
}

.wo-tpl-editor-block .wo-tpl-step-heading {
    color: var(--text-main);
}

.wo-tpl-block-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: var(--kromeka-card-header-pad-y) var(--kromeka-card-header-pad-x);
    background-color: var(--bg-card-header);
    color: var(--text-card-header);
    border-bottom: 2px solid var(--kromeka-yellow);
}

.wo-tpl-block-title {
    font-weight: 600;
}

.wo-tpl-block-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.wo-tpl-header-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    margin: 0;
    padding-left: 0;
}

.wo-tpl-header-switch .form-check-input {
    float: none;
    flex: 0 0 auto;
    margin: 0;
}

.wo-tpl-block-header .kromeka-formset-action {
    justify-content: flex-end;
}

.wo-tpl-section-title {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.wo-tpl-editor-block .wo-tpl-editor-subsection {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.wo-tpl-summary-note {
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.75rem;
    border-left: 2px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.875rem;
}

.wo-tpl-summary-note:has(span:empty) {
    display: none;
}

.wo-tpl-editor-block .input-group > select.form-control {
    width: 1%;
    flex: 1 1 auto;
}

.wo-tpl-status-col-remove {
    width: 5.5rem;
}

.wo-tpl-status-col-color,
.wo-tpl-status-col-active {
    width: 5rem;
}

.wo-tpl-status-col-order {
    width: 6rem;
}

.wo-tpl-editor-block .form-label,
.wo-tpl-editor-block .form-check-label {
    color: var(--text-main);
}

.wo-tpl-editor-block .wo-tpl-block-header .form-check-label,
.wo-tpl-editor-block .wo-tpl-block-header .wo-tpl-block-title {
    color: var(--text-card-header);
}

.wo-tpl-editor-block select.form-control,
.wo-tpl-editor-block .form-control {
    min-width: 0;
}

.wo-tpl-editor-block select.form-control {
    width: 100%;
}

.wo-tpl-cell-remove {
    min-width: 4.5rem;
}

/* Wide structured HTML tooltips (template editor field hints) */
.tooltip.wo-template-field-tooltip {
    --bs-tooltip-max-width: 22rem;
    --bs-tooltip-bg: var(--bg-card, #fff);
    --bs-tooltip-color: var(--text-main, #212529);
}

.tooltip.wo-template-field-tooltip .tooltip-inner {
    max-width: 22rem;
    text-align: start;
    padding: 0.65rem 0.85rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
}

.tooltip.wo-template-field-tooltip .tooltip-inner p {
    margin-bottom: 0.35rem;
}

.tooltip.wo-template-field-tooltip .tooltip-inner ul {
    margin-bottom: 0;
}

[data-theme="dark"] .tooltip.wo-template-field-tooltip,
[data-bs-theme="dark"] .tooltip.wo-template-field-tooltip {
    --bs-tooltip-bg: var(--bg-card, #2c2c2a);
    --bs-tooltip-color: var(--text-main, #e0e0e0);
}

[data-theme="dark"] .tooltip.wo-template-field-tooltip .tooltip-inner,
[data-bs-theme="dark"] .tooltip.wo-template-field-tooltip .tooltip-inner {
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.45);
}

/* css/screens/053-work-order-list-table.css */
/* ============================================================
   Work Order list table
   ============================================================ */

/* Name / description body cells: ellipsis uses the full resizable column
   width (no fixed 200px cap; inner block is width:100% with min-w-0). */
.wo-list-table.kromeka-data-table td[data-col-key="name"] > span,
.wo-list-table.kromeka-data-table td[data-col-key="description"] > span {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* WO list: tall header chrome; vertical labels come from data-kromeka-header-orientation="vertical". */
.wo-list-table thead tr {
    height: 150px;
}

.wo-list-table thead th[data-col-key]:not([data-col-key="actions"]) {
    vertical-align: top;
    height: 150px;
    box-sizing: border-box;
    padding: 0.3rem 3px 0.2rem;
    text-align: center;
    overflow: visible;
    font-size: 0.78rem;
}

.wo-list-table.kromeka-data-table thead th[data-col-key] .kromeka-th-label-wrap {
    min-height: 0;
    height: 100%;
    padding-top: 2px;
}

/* Flag icon breaks vertical rhythm; keep meaning in link title only */
.wo-list-table thead th[data-col-key="prod_start"] .wo-list-th-prod-flag {
    display: none;
}

/* Sub-task column headers: fixed narrow width with vertical text */
.wo-list-table .wo-subtask-col {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    font-size: 0.78rem;
    vertical-align: top;
    overflow: visible;
    padding: 0.3rem 2px 0.2rem;
    text-align: center;
}

/* Lock sub-task body cells to match header width */
.wo-list-table td.wo-subtask-cell {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
}

/* Actions column: scrolls with the table (not sticky). Min width matches
   data-col-locked-width on the WO list actions <th>. Body cells need overflow
   visible so global .kromeka-data-table tbody td[data-col-key] rules do not
   clip the icon buttons. */
.wo-list-table thead th[data-col-key="actions"],
.wo-list-table td[data-col-key="actions"] {
    min-width: 100px;
}
.wo-list-table td[data-col-key="actions"] {
    overflow: visible;
    max-width: none;
}

/* Horizontal scroll arrow buttons for wide tables */
.table-scroll-wrapper {
    position: relative;
}

.table-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    opacity: 0.65;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transition: opacity 0.15s;
}

.table-scroll-btn:hover {
    opacity: 1;
}

.table-scroll-btn-left {
    left: 4px;
}

.table-scroll-btn-right {
    right: 4px;
}

/* Pre-Production view: use top toolbar column buttons; hide midpoint arrows */
.table-scroll-wrapper--milestones .table-scroll-btn {
    display: none !important;
}

/* Milestone table: min width from --wo-ms-cols (set on table in template) */
.wo-list-table[data-wo-view="milestones"] {
    width: max-content;
    min-width: max(100%, max(1400px, calc(var(--wo-ms-cols, 12) * 72px)));
}

/* Milestone body/header cells: enough room for date + completion button */
.wo-list-table[data-wo-view="milestones"] td[data-col-key^="ms_"],
.wo-list-table[data-wo-view="milestones"] th[data-col-key^="ms_"] {
    min-width: 6.5rem;
}
.wo-ms-cell {
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    padding: 2px 4px !important;
}

.wo-list-table[data-wo-view="milestones"] td.wo-ms-plan,
.wo-list-table[data-wo-view="milestones"] th[data-col-smart-link="1"] {
    min-width: 8.75rem;
}

.wo-list-table thead th[data-col-key^="ms_"] .kromeka-th-actions {
    position: relative;
}

/* Keep the funnel on the column centre. The source icon sits just to its left. */
.wo-ms-source-icon {
    position: absolute;
    right: calc(100% + 0.15rem);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: help;
    line-height: 1;
}

.wo-list-table[data-wo-view="milestones"] td.wo-ms-plan-done_late {
    white-space: normal;
}

/* Compact row height for milestone body cells */
.wo-list-table[data-wo-view="milestones"] tbody td {
    padding: 3px 4px;
    font-size: 0.82rem;
}

/* Milestone view: editable cells get a subtle dashed bottom border */
.wo-ms-editable {
    cursor: pointer;
    border-bottom: 1px dashed var(--bs-border-color, #dee2e6) !important;
}
.wo-ms-editable:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

/* The value editor sits beside the completion circle and must not push it out. */
.wo-ms-cell.inline-cell-editing {
    overflow: visible;
}
.wo-ms-cell .wo-ms-cell-content {
    display: inline-block;
    vertical-align: middle;
    max-width: calc(100% - 1.1rem);
}
.wo-ms-cell .inline-cell-editor {
    width: 6.2rem;
    max-width: 100%;
    min-width: 0;
    padding: 0.05rem 0.25rem;
}

.wo-bulk-col-date { width: 120px; }
.wo-bulk-col-dept { width: 150px; }
.wo-bulk-col-hours { width: 80px; }
.wo-bulk-col-check { width: 50px; }
.wo-bulk-col-type { width: 100px; }
.wo-bulk-col-milestone-date { width: 140px; }

/* css/screens/054-milestone-deadline-colour-coding.css */
/* ============================================================
   Milestone deadline colour coding
   ============================================================ */
.wo-ms-completed { background-color: var(--wo-ms-plan-done-bg) !important; }
.wo-ms-delayed   { background-color: var(--wo-ms-plan-delayed-bg) !important; }
/* Due today and due within 7 days both use the highlight band; due_today kept
   in sync in case a cell still carries the class. */
.wo-ms-due_today { background-color: var(--wo-ms-plan-upcoming-bg) !important; }
.wo-ms-due_soon  { background-color: var(--wo-ms-plan-upcoming-bg) !important; }

/* Smart sub-task link. Outline stays visible when the row hover shadow covers the border. */
.wo-ms-plan-not_planned { color: var(--wo-ms-plan-alert-text); }
.wo-ms-plan-not_applicable { color: var(--text-muted); }
.wo-ms-plan-upcoming { background-color: var(--wo-ms-plan-upcoming-bg) !important; }
.wo-ms-plan-delayed { background-color: var(--wo-ms-plan-delayed-bg) !important; }
.wo-ms-plan-done_on_time {
    background-color: var(--wo-ms-plan-done-bg) !important;
    outline: 2px solid var(--wo-ms-plan-done-border);
    outline-offset: -2px;
}
.wo-ms-plan-done_late {
    background-color: var(--wo-ms-plan-done-bg) !important;
    outline: 2px solid var(--wo-ms-plan-late-border);
    outline-offset: -2px;
}
/* Drawn line, not text-decoration: the font strike sits below the middle of digits
   and steps down through the smaller week label. */
.wo-ms-plan-struck {
    position: relative;
    display: inline-flex;
    align-items: center;
    column-gap: 0.25em;
}
.wo-ms-plan-struck::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background-color: currentColor;
    transform: translateY(-50%);
    pointer-events: none;
}
.wo-ms-plan-week { font-size: 0.75em; }
.wo-ms-plan-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
}
.wo-ms-plan-wait {
    margin-left: 0.2rem;
    font-size: 0.75rem;
}

/* Completion toggle button inside milestone cells */
.wo-ms-complete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    border: none;
    background: none;
    padding: 0 1px;
    font-size: 0.65rem;
    color: var(--bs-secondary, #6c757d);
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.15s, color 0.15s;
    vertical-align: middle;
}
.wo-ms-complete-btn:hover { opacity: 1; }
.wo-ms-complete-btn.wo-ms-done {
    color: #198754;
    opacity: 1;
}
.wo-ms-complete-btn--readonly,
.wo-ms-complete-btn:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}
[data-theme="dark"] .wo-ms-complete-btn--readonly,
[data-theme="dark"] .wo-ms-complete-btn:disabled {
    color: var(--text-muted);
}
td:hover > .wo-ms-complete-btn:not(:disabled) { opacity: 0.85; }

/* css/components/055-generic-column-navigation-buttons-prev-next.css */
/* ============================================================
   Generic column navigation buttons (Prev/Next)
   ============================================================ */
.kromeka-col-nav-wrap {
    flex-shrink: 0;
}

/* css/components/056-generic-expand-compact-mode-for-all-kromeka-data.css */
/* ============================================================
   Generic expand/compact mode for all kromeka data tables
   ============================================================
   In expanded (wide) mode the card's width and left offset are
   set by JS (clientWidth-based) to avoid the 100vw scrollbar
   bug. CSS only handles overflow and layout adjustments.
   In compact mode: nothing changes — the default layout applies. */
html:has(.kromeka-table-expanded) {
    overflow-x: hidden;
}
.kromeka-table-expanded {
    border-radius: 0 !important;
    max-width: none !important;
}
.kromeka-table-expanded .kromeka-data-table-responsive,
.kromeka-table-expanded .table-responsive {
    overflow-x: auto;
}
.kromeka-table-expanded-table {
    width: max-content !important;
    table-layout: auto !important;
}
.kromeka-table-expanded-table thead th[data-col-key] {
    white-space: nowrap;
    max-width: none;
}

/* Legacy fixed viewport scrollbar — replaced by .kromeka-hscroll-sticky pocket. */
.kromeka-sticky-scrollbar {
    display: none !important;
}

/* css/components/057-frozen-pinned-columns.css */
/* ============================================================
   Frozen (pinned) columns
   ============================================================
   Dark theme zeros tbody/tfoot cell backgrounds. Sticky freeze cells
   must stay fully opaque or scrolled columns show through, and sticky
   left offsets need a 1px overlap or hairline gaps appear between
   pinned columns. Pinned header intersections use the shared thead
   tokens so body values cannot paint through the corner cell.
   */
.kromeka-data-table tbody td.kromeka-frozen-col,
.kromeka-data-table tfoot td.kromeka-frozen-col,
.cpq-cfg-bom-table tbody td.kromeka-frozen-col {
    background-color: var(--bg-card, #fff) !important;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 9999px var(--bg-card, #fff);
    z-index: 5;
    isolation: isolate;
}

.kromeka-data-table thead th.kromeka-frozen-col,
.cpq-cfg-bom-table thead th.kromeka-frozen-col {
    background-color: var(--kromeka-data-table-thead-bg) !important;
    background-clip: padding-box;
    color: var(--kromeka-data-table-thead-text);
    z-index: 5;
}

.kromeka-data-table.table-hover > tbody > tr:hover > td.kromeka-frozen-col,
.kromeka-data-table.table-striped > tbody > tr:nth-of-type(odd) > td.kromeka-frozen-col,
.kromeka-data-table.table-striped > tbody > tr:nth-of-type(even) > td.kromeka-frozen-col {
    background-color: var(--bg-card, #fff) !important;
    box-shadow: inset 0 0 0 9999px var(--bg-card, #fff);
}

[data-theme="dark"] .kromeka-data-table tbody td.kromeka-frozen-col,
[data-theme="dark"] .kromeka-data-table tfoot td.kromeka-frozen-col,
[data-theme="dark"] .kromeka-data-table.table-hover > tbody > tr:hover > td.kromeka-frozen-col,
[data-theme="dark"] .kromeka-data-table.table-striped > tbody > tr:nth-of-type(odd) > td.kromeka-frozen-col,
[data-theme="dark"] .kromeka-data-table.table-striped > tbody > tr:nth-of-type(even) > td.kromeka-frozen-col,
[data-theme="dark"] .cpq-cfg-bom-table tbody td.kromeka-frozen-col {
    background-color: var(--bg-card, #2c2c2a) !important;
    box-shadow: inset 0 0 0 9999px var(--bg-card, #2c2c2a);
}

[data-theme="dark"] .kromeka-data-table thead th.kromeka-frozen-col,
[data-theme="dark"] .cpq-cfg-bom-table thead th.kromeka-frozen-col {
    background-color: var(--kromeka-data-table-thead-bg) !important;
}

/*
 * Sheet selection/editing uses position:relative and z-index 3/4.
 * Frozen cells must keep sticky stacking so scrolled sheet cells cannot
 * paint through or over the pinned band.
 */
.kromeka-data-table td.kromeka-frozen-col.kromeka-sheet-cell-active,
.kromeka-data-table td.kromeka-frozen-col.kromeka-sheet-cell-editing,
.kromeka-data-table td.kromeka-frozen-col.kromeka-sheet-cell-selected,
.kromeka-data-table td.kromeka-frozen-col.kromeka-sheet-cell-copied,
.kromeka-data-table td.kromeka-frozen-col.kromeka-sheet-cell-readonly-active,
.cpq-cfg-bom-table td.kromeka-frozen-col.kromeka-sheet-cell-active,
.cpq-cfg-bom-table td.kromeka-frozen-col.kromeka-sheet-cell-editing,
.cpq-cfg-bom-table td.kromeka-frozen-col.kromeka-sheet-cell-selected,
.cpq-cfg-bom-table td.kromeka-frozen-col.kromeka-sheet-cell-copied,
.cpq-cfg-bom-table td.kromeka-frozen-col.kromeka-sheet-cell-readonly-active {
    position: sticky !important;
    z-index: 5;
}

.kromeka-data-table td.kromeka-frozen-col.kromeka-sheet-cell-selected,
.cpq-cfg-bom-table td.kromeka-frozen-col.kromeka-sheet-cell-selected {
    background: color-mix(in srgb, var(--kromeka-yellow) 38%, var(--bg-card)) !important;
    box-shadow:
        inset 0 0 0 9999px color-mix(in srgb, var(--kromeka-yellow) 38%, var(--bg-card)),
        inset 0 0 0 1px color-mix(in srgb, var(--kromeka-yellow) 80%, transparent);
}

.kromeka-data-table td.kromeka-frozen-col.kromeka-sheet-cell-editing,
.kromeka-data-table td.kromeka-frozen-col.kromeka-sheet-cell-copied,
.cpq-cfg-bom-table td.kromeka-frozen-col.kromeka-sheet-cell-editing,
.cpq-cfg-bom-table td.kromeka-frozen-col.kromeka-sheet-cell-copied {
    background: var(--bg-card, #fff) !important;
    box-shadow: inset 0 0 0 9999px var(--bg-card, #fff);
}

[data-theme="dark"] .kromeka-data-table td.kromeka-frozen-col.kromeka-sheet-cell-selected,
[data-theme="dark"] .cpq-cfg-bom-table td.kromeka-frozen-col.kromeka-sheet-cell-selected {
    background: color-mix(in srgb, var(--kromeka-yellow) 32%, var(--bg-card, #2c2c2a)) !important;
    box-shadow:
        inset 0 0 0 9999px color-mix(in srgb, var(--kromeka-yellow) 32%, var(--bg-card, #2c2c2a)),
        inset 0 0 0 1px color-mix(in srgb, var(--kromeka-yellow) 70%, transparent);
}

[data-theme="dark"] .kromeka-data-table td.kromeka-frozen-col.kromeka-sheet-cell-editing,
[data-theme="dark"] .kromeka-data-table td.kromeka-frozen-col.kromeka-sheet-cell-copied,
[data-theme="dark"] .cpq-cfg-bom-table td.kromeka-frozen-col.kromeka-sheet-cell-editing,
[data-theme="dark"] .cpq-cfg-bom-table td.kromeka-frozen-col.kromeka-sheet-cell-copied {
    background: var(--bg-card, #2c2c2a) !important;
    box-shadow: inset 0 0 0 9999px var(--bg-card, #2c2c2a);
}

/* Right edge of the last frozen column.
   Use border-right (not only outer shadow) so the seam stays visible inside
   overflow:auto wrappers. Thead has its own rule so the sticky header's
   bottom hairline box-shadow does not wipe out the freeze seam.
   A solid outer box-shadow strip seals any sub-pixel gap so scrolled
   columns cannot peek through (works even when the cell clips overflow). */
.kromeka-data-table tbody td.kromeka-frozen-col--edge,
.pp-table tbody td.pp-frozen--edge,
.cpq-cfg-bom-table tbody td.kromeka-frozen-col--edge {
    border-right: 3px solid rgba(29, 29, 27, 0.55) !important;
    box-shadow:
        inset 0 0 0 9999px var(--bg-card, #fff),
        inset -14px 0 16px -12px rgba(0, 0, 0, 0.2),
        3px 0 0 0 var(--bg-card, #fff) !important;
}

.kromeka-data-table thead th.kromeka-frozen-col--edge,
.pp-table thead th.pp-frozen--edge,
.cpq-cfg-bom-table thead th.kromeka-frozen-col--edge {
    border-right: 3px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow:
        inset 0 0 0 9999px var(--kromeka-data-table-thead-bg),
        inset -12px 0 14px -10px rgba(0, 0, 0, 0.35),
        inset 0 -1px 0 0 color-mix(in srgb, var(--kromeka-data-table-thead-text) 22%, transparent),
        3px 0 0 0 var(--kromeka-data-table-thead-bg) !important;
}

[data-theme="dark"] .kromeka-data-table tbody td.kromeka-frozen-col--edge,
[data-theme="dark"] .pp-table tbody td.pp-frozen--edge,
[data-theme="dark"] .cpq-cfg-bom-table tbody td.kromeka-frozen-col--edge {
    border-right: 3px solid rgba(237, 237, 237, 0.45) !important;
    box-shadow:
        inset 0 0 0 9999px var(--bg-card, #2c2c2a),
        inset -14px 0 18px -12px rgba(0, 0, 0, 0.7),
        3px 0 0 0 var(--bg-card, #2c2c2a) !important;
}

[data-theme="dark"] .kromeka-data-table thead th.kromeka-frozen-col--edge,
[data-theme="dark"] .pp-table thead th.pp-frozen--edge,
[data-theme="dark"] .cpq-cfg-bom-table thead th.kromeka-frozen-col--edge {
    border-right: 3px solid rgba(237, 237, 237, 0.4) !important;
    box-shadow:
        inset 0 0 0 9999px var(--kromeka-data-table-thead-bg),
        inset -12px 0 14px -10px rgba(0, 0, 0, 0.6),
        inset 0 -1px 0 0 color-mix(in srgb, var(--kromeka-data-table-thead-text) 22%, transparent),
        3px 0 0 0 var(--kromeka-data-table-thead-bg) !important;
}
/* Freeze toggle buttons in column settings menu */
.kromeka-freeze-toggle {
    color: var(--bs-secondary);
    line-height: 1;
    font-size: 0.85rem;
}
.kromeka-freeze-toggle:hover { color: var(--bs-primary); }
.kromeka-freeze-toggle[disabled] {
    opacity: 0.3;
    pointer-events: none;
}

/* css/components/058-sub-task-status-box-state-machine.css */
/* ============================================================
   Sub-task status box state machine
   ============================================================
   Each work-order sub-task cell shows one of these visual states:

   wo-box-skipped       — Step not included (is_applicable=False or
                          missing sub-task). Dash icon, low opacity.
   wo-box-unassigned    — Unchecked, no assignee. Red circle icon.
   wo-box-assigned      — Unchecked, has assignee. Person icon,
                          color from DepartmentMembership.color.
   wo-box-user-checked  — Completed by user, pending chef review
                          (requires_chef_check=True only). Green
                          hollow check icon (distinct from chef fill).
   wo-box-completed     — Fully done (2-state step completed by user,
                          or conceptually done). Green filled check.
   wo-box-chef-checked  — Chef-approved (3-state step). Same 26px box as
                          user-checked; filled green circle and white
                          check (via .wo-subtask-chef-marker).

   Transitions happen via POST to /api/wo-subtask/<id>/toggle/ and
   are reflected client-side in workorder_list.html JS.
   ============================================================ */

/* Sub-task box: small rounded rectangle with department-colored border */
.wo-subtask-box {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
    background: transparent;
    padding: 0;
    line-height: 1;
}

.wo-subtask-box:hover {
    transform: scale(1.15);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.wo-subtask-box:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* Work order edit — legacy assignment still shown, needs review */
.wo-sub-unified-assignment.wo-sub-assignment-needs-review {
    border-color: var(--kromeka-yellow);
}
.wo-sub-assignment-warning {
    color: var(--kromeka-dark);
    line-height: 1.35;
}
[data-theme="dark"] .wo-sub-assignment-warning,
[data-bs-theme="dark"] .wo-sub-assignment-warning {
    color: var(--kromeka-yellow);
}

/* Status fills */
.wo-subtask-box.wo-box-unchecked i {
    color: var(--kromeka-grey);
}

.wo-subtask-box.wo-box-unassigned {
    background: color-mix(in srgb, var(--kromeka-status-danger) 12%, transparent);
}
.wo-subtask-box.wo-box-unassigned i {
    color: var(--kromeka-status-danger);
}

.wo-subtask-box.wo-box-assigned {
    color: var(--kromeka-status-info);
}
.wo-subtask-box.wo-box-assigned i {
    color: inherit;
}

.wo-subtask-box.wo-box-user-checked {
    background: color-mix(in srgb, var(--kromeka-success) 12%, transparent);
}
.wo-subtask-box.wo-box-user-checked i {
    color: var(--kromeka-success);
}

.wo-subtask-box.wo-box-chef-checked {
    background: color-mix(in srgb, var(--kromeka-success) 12%, transparent);
    border: none;
}

/* Chef marker: same footprint as bi-check-circle on user-checked cells */
.wo-subtask-chef-marker {
    position: relative;
    width: 1em;
    height: 1em;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wo-subtask-chef-marker__disc {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background: var(--kromeka-success);
    z-index: 0;
}

.wo-subtask-chef-marker .wo-subtask-chef-check {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 0.65em;
    font-weight: 700;
    line-height: 1;
}

.wo-subtask-box.wo-box-completed {
    background: color-mix(in srgb, var(--kromeka-success) 12%, transparent);
}
.wo-subtask-box.wo-box-completed i {
    color: var(--kromeka-success);
}

.wo-subtask-box.wo-box-skipped {
    background: transparent;
    cursor: default;
    opacity: 0.35;
    font-size: 0.7rem;
    color: var(--kromeka-grey, #878787);
}
.wo-subtask-box.wo-box-skipped:hover {
    transform: none;
    box-shadow: none;
}

.wo-subtask-cell {
    vertical-align: middle;
}

/* Predecessor column: layered chef marker (grey ring — no dept color here) */
.wo-chef-check-inline.wo-subtask-chef-marker--inline {
    box-sizing: border-box;
    display: inline-flex;
    vertical-align: middle;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 4px;
    border: 2px solid var(--kromeka-grey, #878787);
    background: transparent;
}

.wo-chef-check-inline.wo-subtask-chef-marker--inline .wo-subtask-chef-marker__disc {
    width: 62%;
    height: 62%;
    max-width: 12px;
    max-height: 12px;
}

.wo-chef-check-inline.wo-subtask-chef-marker--inline .wo-subtask-chef-check {
    font-size: 0.65rem;
}

/* Compact sub-task header tooltips */
.wo-list-table thead .wo-subtask-col span {
    cursor: help;
}

/* Sortable column header links */
.sortable-link {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.sortable-link:hover {
    color: var(--text-accent);
}
.sortable-link.active {
    color: var(--text-accent);
    font-weight: 600;
}

/* css/components/059-fullscreen-panel-removed-app-shell-is-full-width.css */
/* ============================================================
 * Fullscreen panel removed — app shell is full width by default.
 * ============================================================ */

/* css/screens/060-production-planning-table-gantt-combined-view.css */
/* ============================================================
   PRODUCTION PLANNING — Table + Gantt combined view
   ============================================================ */

.production-planning-card .card-body {
    padding: 0;
}

/* Always-on workbench shell (mirrors Product Generator / SPC). */
body.pp-page-active,
body.wm-page-active {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
}

body.pp-page-active > .kromeka-app-content,
body.wm-page-active > .kromeka-app-content {
    max-width: none;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: 0;
    padding-bottom: 0;
    gap: 0;
}

body.pp-page-active > .kromeka-app-content > .kromeka-app-content-inner,
body.wm-page-active > .kromeka-app-content > .kromeka-app-content-inner {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

body.pp-page-active > footer,
body.wm-page-active > footer {
    flex-shrink: 0;
    margin-top: 0 !important;
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
}

body.pp-page-active > footer p,
body.wm-page-active > footer p {
    margin-bottom: 0;
    font-size: 0.7rem;
    line-height: 1.15;
}

body.pp-page-active .kromeka-app-navbar,
body.wm-page-active .kromeka-app-navbar {
    margin-bottom: 0 !important;
    flex-shrink: 0;
}

body.pp-page-active .kromeka-nav-back-breadcrumb-row,
body.wm-page-active .kromeka-nav-back-breadcrumb-row {
    margin-bottom: 0 !important;
    flex-shrink: 0;
    min-height: 0;
    padding: 0.2rem 0;
    gap: 0.4rem !important;
    align-items: center !important;
    border-bottom: 1px solid color-mix(in srgb, var(--kromeka-grey) 40%, transparent);
}

[data-theme="dark"] body.pp-page-active .kromeka-nav-back-breadcrumb-row,
[data-theme="dark"] body.wm-page-active .kromeka-nav-back-breadcrumb-row {
    border-bottom-color: var(--kromeka-dark-grey);
}

body.pp-page-active .messages-container,
body.wm-page-active .messages-container {
    margin-bottom: 0.25rem !important;
    flex-shrink: 0;
}

body.pp-page-active .pp-page {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-top: 0.15rem;
}

body.pp-page-active .production-planning-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    margin-bottom: 0;
}

body.pp-page-active .production-planning-card > .card-header,
body.pp-page-active .production-planning-card > .pp-production-planning-subnav,
body.pp-page-active .production-planning-card > .pp-page-footer {
    flex-shrink: 0;
}

body.pp-page-active .pp-tab-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.pp-page-active .pp-tab-pane.active {
    flex: 1 1 auto;
    min-height: 0;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
}

body.pp-page-active .pp-planning-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.pp-page-active .pp-filters {
    flex-shrink: 0;
}

/* JS inserts .kromeka-hscroll-wrap around #pp-scroll-container. That wrap must
   take the remaining height; otherwise the table grows to full content height,
   body overflow:hidden clips it, and neither the table nor Next/Previous work. */
body.pp-page-active .pp-planning-body > .kromeka-hscroll-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.pp-page-active .pp-scroll-container,
body.pp-page-active .kromeka-hscroll-wrap > .pp-scroll-container.kromeka-hscroll-main {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
}

body.pp-page-active .pp-tab-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

body.pp-page-active .pp-sheet-hint {
    flex-shrink: 0;
}

/* Keep pagination above the viewport-docked horizontal scroll pocket (z-index 1040). */
body.pp-page-active .pp-page-footer {
    flex-shrink: 0;
    position: relative;
    z-index: 1050;
    background: var(--bg-card, #fff);
}

body.pp-page-active .pp-per-page-select {
    width: auto;
}

/* Breadcrumb row: back button + trail share one vertical centerline */
.kromeka-nav-back-breadcrumb-row {
    margin-bottom: 1rem;
}

/* List pages move the back button onto the title row and often have no trail. */
.kromeka-nav-back-breadcrumb-row:not(:has(*)) {
    display: none;
}

.kromeka-nav-back-breadcrumb-row > :not(.kromeka-nav-back) {
    flex: 1 1 auto;
    min-width: 0;
}

.kromeka-nav-back-breadcrumb-row .breadcrumb {
    margin-bottom: 0;
}

.kromeka-nav-back-breadcrumb-row nav.mb-3 {
    margin-bottom: 0 !important;
}

/* Full-page Unplanned report: same tab strip rhythm as Production Planning card */
.pp-production-planning-subnav-shell {
    background-color: var(--bs-tertiary-bg, #f0f0f0);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    border-bottom: 2px solid var(--kromeka-yellow);
}

[data-theme="dark"] .pp-production-planning-subnav-shell {
    background-color: var(--bg-card-header, #2a2a2a);
    border-color: var(--border-color, #444);
}

/* Scroll container: constrained to viewport; horizontal uses sticky pocket when wrapped. */
.pp-scroll-container {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 260px);
    position: relative;
}

.pp-table.kromeka-sheet-table td[data-sheet-cell] {
    cursor: cell;
    vertical-align: middle;
}

/* Editable sheet cells: quiet gray border at rest. Yellow is reserved for
   active/selected focus (kromeka-sheet-cell-active), not every editable box. */
.pp-table.kromeka-sheet-table .kromeka-sheet-input,
.pp-table.kromeka-sheet-table .pp-inline-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    /* Cap editors to the row preset so Deadline / Drawing / QTY never stretch a row. */
    height: calc(var(--kromeka-row-h) - 2 * var(--kromeka-row-pad-y));
    max-height: calc(var(--kromeka-row-h) - 2 * var(--kromeka-row-pad-y));
    border: 1px solid color-mix(in srgb, var(--kromeka-grey) 55%, var(--border-color, #dee2e6));
    border-radius: 2px;
    background: var(--bg-card, #fff);
    color: var(--text-main, #333);
    padding: var(--kromeka-row-input-pad-y) 0.25rem;
    font-size: inherit;
    line-height: 1.2;
    box-shadow: none;
}

.pp-table.kromeka-sheet-table .kromeka-sheet-input:hover,
.pp-table.kromeka-sheet-table .pp-inline-input:hover {
    border-color: color-mix(in srgb, var(--kromeka-grey) 75%, var(--kromeka-dark, #1d1d1b));
}

.pp-table.kromeka-sheet-table .kromeka-sheet-input:focus,
.pp-table.kromeka-sheet-table .pp-inline-input:focus {
    border-color: var(--kromeka-yellow);
    outline: none;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--kromeka-yellow) 45%, transparent);
}

.pp-table.kromeka-sheet-table select.kromeka-sheet-input {
    padding-right: 1.25rem;
}

/* Number cells (QTY, MNF H, ASM H, …): hide browser spinners — they waste
   narrow column space and nobody uses them for sheet entry. */
.pp-table.kromeka-sheet-table input[type="number"].kromeka-sheet-input::-webkit-outer-spin-button,
.pp-table.kromeka-sheet-table input[type="number"].kromeka-sheet-input::-webkit-inner-spin-button,
.pp-table.kromeka-sheet-table input[type="number"].pp-inline-input::-webkit-outer-spin-button,
.pp-table.kromeka-sheet-table input[type="number"].pp-inline-input::-webkit-inner-spin-button,
.kromeka-sheet-table input[type="number"].kromeka-sheet-input::-webkit-outer-spin-button,
.kromeka-sheet-table input[type="number"].kromeka-sheet-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pp-table.kromeka-sheet-table input[type="number"].kromeka-sheet-input,
.pp-table.kromeka-sheet-table input[type="number"].pp-inline-input,
.kromeka-sheet-table input[type="number"].kromeka-sheet-input {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Flatpickr altInput is the visible date field; it often keeps Bootstrap
   form-control padding and misses .kromeka-sheet-input rules. Tighten it
   so dd/mm/yyyy fits without empty left space or a clipped year. */
.pp-table.kromeka-sheet-table td[data-sheet-editor="date"],
.pp-table.kromeka-sheet-table td.pp-prod-start-cell[data-sheet-cell],
.pp-table.kromeka-sheet-table td.pp-prod-finish-cell[data-sheet-cell],
.pp-table.kromeka-sheet-table td.pp-col-deadline[data-sheet-cell],
.pp-table.kromeka-sheet-table td.pp-ms-cell[data-sheet-editor="date"] {
    padding: var(--kromeka-row-pad-y) 2px !important;
}

/* Hide Flatpickr wire input so focus/layout use only the visible alt field. */
.pp-table.kromeka-sheet-table input.flatpickr-input:not(.flatpickr-alt-input) {
    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;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.pp-table.kromeka-sheet-table input.flatpickr-alt-input,
.pp-table.kromeka-sheet-table .flatpickr-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.pp-table.kromeka-sheet-table .flatpickr-wrapper {
    display: block;
    width: 100%;
}

.pp-table.kromeka-sheet-table input.flatpickr-alt-input,
.pp-table.kromeka-sheet-table input.flatpickr-alt-input.form-control,
.pp-table.kromeka-sheet-table input.flatpickr-alt-input.form-control-sm {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    /* Match sheet inputs: Deadline box height is the visual benchmark for Compact. */
    height: calc(var(--kromeka-row-h) - 2 * var(--kromeka-row-pad-y)) !important;
    max-height: calc(var(--kromeka-row-h) - 2 * var(--kromeka-row-pad-y)) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: var(--kromeka-row-input-pad-y) 0.2rem !important;
    border: 1px solid color-mix(in srgb, var(--kromeka-grey) 55%, var(--border-color, #dee2e6)) !important;
    border-radius: 2px !important;
    background: var(--bg-card, #fff) !important;
    color: var(--text-main, #333) !important;
    font-size: inherit !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    text-align: left;
}

.pp-table.kromeka-sheet-table input.flatpickr-alt-input:focus,
.pp-table.kromeka-sheet-table input.flatpickr-alt-input.form-control:focus {
    border-color: var(--kromeka-yellow) !important;
    outline: none !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--kromeka-yellow) 45%, transparent) !important;
}

.pp-table.kromeka-sheet-table td.kromeka-sheet-cell-active .kromeka-sheet-input,
.pp-table.kromeka-sheet-table td.kromeka-sheet-cell-active .pp-inline-input,
.pp-table.kromeka-sheet-table td.kromeka-sheet-cell-active input.flatpickr-alt-input {
    border-color: var(--kromeka-yellow);
}

.pp-sheet-hint {
    background: var(--bg-card, #fff);
    color: var(--text-muted, #878787);
}

/* Planning: table wrapper anchors the Gantt body underlay (behind tbody, above scroll). */
.pp-planning-table-wrap {
    position: relative;
    display: inline-block;
    min-width: 100%;
    vertical-align: top;
}

.pp-planning-table-wrap > .pp-table {
    position: relative;
    z-index: 1;
}

.pp-gantt-body-underlay {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: inset 2px 0 0 var(--border-color, #dee2e6);
    /* One continuous day grid for the whole Gantt body (DAY_WIDTH 28px in JS). */
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 27px,
        var(--border-color, #dee2e6) 27px,
        var(--border-color, #dee2e6) 28px
    );
    background-size: 28px 100%;
}

.pp-gantt-underlay-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.pp-table {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    font-size: 0.8rem;
    /* Defaults match the "normal" preset so the grid is sized correctly even
       before a saved row height is applied. See KromekaRowHeight. */
    --kromeka-row-h: 30px;
    --kromeka-row-pad-y: 3px;
    --kromeka-row-input-pad-y: 0.15rem;
}

.pp-table thead {
    position: sticky;
    top: 0;
    z-index: 150;
}

/* Header row height for vertical labels */
.pp-table thead tr {
    height: 140px;
}

/* Explicit th height so inner .pp-th-stack height:100% resolves (tr height alone is unreliable for %). */
.pp-table thead tr.pp-header-row > th {
    height: 140px;
    box-sizing: border-box;
}

.pp-table th {
    background: var(--kromeka-data-table-thead-bg);
    color: var(--kromeka-data-table-thead-text);
    border-bottom: 2px solid var(--border-color, #dee2e6);
    padding: 6px 4px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    vertical-align: top;
    user-select: none;
}

.pp-table th[data-sort] {
    cursor: pointer;
}

/* Dark header bar: hover tint stays on thead strip */
.pp-table thead th[data-sort]:hover {
    background: color-mix(in srgb, var(--kromeka-data-table-thead-bg) 88%, #000000);
}

.pp-table thead .sortable-link {
    color: var(--kromeka-data-table-thead-sort-link) !important;
    font-weight: 600;
}

.pp-table thead .sortable-link:hover {
    color: var(--kromeka-data-table-thead-sort-link-hover) !important;
    text-decoration: underline !important;
}

.pp-table thead .sortable-link.active {
    color: var(--kromeka-data-table-thead-sort-link-hover) !important;
}

.pp-table thead .sortable-link:focus {
    outline: 1px dotted var(--kromeka-yellow);
    outline-offset: 2px;
}

/* Vertical column headers: rotation on inner span only */
.pp-th-cell {
    position: relative;
    vertical-align: top;
    text-align: center;
    padding: 4px 2px !important;
}

/* Stack: funnel first; thead th uses vertical-align: top so every stack starts at the same Y */
.pp-table thead th .pp-th-stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    /* Match shared kromeka-data-table header: funnel row (~1.375rem) then label. */
    gap: 0.15rem;
    padding-top: 2px;
    padding-bottom: 1px;
}

.pp-table thead th .pp-th-stack .pp-filter-btn {
    position: static;
    transform: none;
    left: auto;
    flex-shrink: 0;
    width: 1.375rem;
    height: 1.375rem;
    min-height: 1.375rem;
}

/* Below funnel: fill remaining header height and vertically center label/sort. */
.pp-table thead th .pp-th-stack > *:not(.pp-filter-btn) {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.pp-table thead th {
    position: sticky;
    top: 0;
    z-index: 30;
}

.pp-filterable-th {
    position: relative;
}

.pp-filter-btn {
    position: absolute;
    top: 2px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    z-index: 3;
    padding: 0;
    width: 18px;
    height: 18px;
    line-height: 1;
    color: var(--kromeka-data-table-filter-icon);
    border-radius: 0.35rem;
    text-decoration: none;
}

.pp-filter-btn:hover,
.pp-filter-btn:focus {
    color: var(--kromeka-data-table-filter-icon);
    background: color-mix(in srgb, var(--kromeka-data-table-filter-icon) 14%, transparent);
    text-decoration: none;
}

.pp-filter-btn.pp-filter-active {
    color: var(--kromeka-data-table-filter-icon);
    background: color-mix(in srgb, var(--kromeka-data-table-filter-icon) 20%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--kromeka-data-table-filter-icon) 42%, transparent),
        0 0 8px var(--kromeka-data-table-filter-glow);
}

.pp-filter-btn.pp-filter-active:hover,
.pp-filter-btn.pp-filter-active:focus {
    color: var(--kromeka-data-table-filter-icon);
    background: color-mix(in srgb, var(--kromeka-data-table-filter-icon) 24%, transparent);
    text-decoration: none;
}

.pp-sort-indicator {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--kromeka-data-table-filter-icon);
    font-size: 0.75rem;
    line-height: 1;
    pointer-events: none;
}

.pp-table thead .pp-frozen .pp-sort-indicator {
    z-index: 55;
}

.pp-sort-active {
    background: color-mix(in srgb, var(--kromeka-data-table-filter-icon) 12%, var(--kromeka-data-table-thead-bg)) !important;
}

[data-theme="dark"] .pp-sort-active {
    background: color-mix(in srgb, var(--kromeka-data-table-filter-icon) 12%, var(--kromeka-data-table-thead-bg)) !important;
}

.pp-filter-menu {
    position: absolute;
    top: 22px;
    right: 2px;
    z-index: 1065;
    width: 220px;
    min-width: 220px;
    max-width: calc(100vw - 16px);
    max-height: 340px;
    overflow: auto;
    padding: 0.5rem;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 0.5rem;
    background: var(--bg-card, #fff);
    color: var(--text-main, #333);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.18);
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
}

.pp-filter-menu .form-select,
.pp-filter-menu .form-control {
    font-size: 0.75rem;
}

.pp-filter-menu .btn-sm {
    font-size: 0.72rem;
    padding: 0.18rem 0.45rem;
}

.pp-filter-chips {
    border-bottom: 1px solid var(--border-color, #dee2e6);
    background: var(--bg-card, #fff);
}

.pp-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 999px;
    background: color-mix(in srgb, var(--kromeka-yellow) 16%, transparent);
    color: var(--text-main, #333);
    font-size: 0.75rem;
}

.pp-col-dragging {
    opacity: 0.55;
}

.pp-col-drop-target {
    outline: 2px solid var(--kromeka-yellow);
    outline-offset: -2px;
}

.pp-autofit-measure {
    font: 600 0.75rem/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.pp-th-label {
    display: inline-block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    word-break: normal;
    text-overflow: clip;
    max-height: 120px;
    max-width: 2.8rem;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
}

/* Fixed row height per density preset: every body row is the same tall.
   Content that would wrap or resize is clamped (ellipsis / overflow hidden). */
.pp-table tbody tr {
    height: var(--kromeka-row-h);
    max-height: var(--kromeka-row-h);
}

.pp-table td {
    box-sizing: border-box;
    height: var(--kromeka-row-h);
    max-height: var(--kromeka-row-h);
    padding: var(--kromeka-row-pad-y) 6px;
    border-bottom: 1px solid var(--border-color, #dee2e6);
    white-space: nowrap;
    vertical-align: middle;
    overflow: hidden;
    background: var(--bg-card, #fff);
    z-index: 0;
}

/* Save-feedback bubbles sit below the cell; do not clip them. */
.pp-table td.kromeka-cell-message-host {
    overflow: visible;
}

/* Faint zebra striping so wide rows stay easy to track horizontally. */
.pp-table {
    --pp-row-zebra-bg: color-mix(in srgb, var(--kromeka-light-grey) 55%, var(--bg-card, #fff));
}

.pp-table tbody tr.pp-row:nth-child(odd) > td:not(.pp-gantt-cell) {
    background: var(--pp-row-zebra-bg);
}

.pp-table tbody tr.pp-row:nth-child(odd) > td.pp-frozen:not(.pp-gantt-cell) {
    background: var(--pp-row-zebra-bg) !important;
}

.pp-table tbody tr:hover td {
    background: var(--hover-bg, #f8f9fa);
}

.pp-table tbody tr:hover > td.pp-frozen:not(.pp-gantt-cell) {
    background: var(--hover-bg, #f8f9fa) !important;
}

.pp-table tbody tr.pp-row:nth-child(odd) > td.pp-frozen.kromeka-sheet-cell-selected:not(.pp-gantt-cell),
.pp-table tbody tr:hover > td.pp-frozen.kromeka-sheet-cell-selected:not(.pp-gantt-cell),
.pp-table td.pp-frozen.kromeka-sheet-cell-selected {
    background: color-mix(in srgb, var(--kromeka-yellow) 38%, var(--bg-card)) !important;
}

.pp-table tbody tr.pp-row:nth-child(odd) > td.pp-frozen.kromeka-sheet-cell-readonly-active:not(.pp-gantt-cell),
.pp-table tbody tr:hover > td.pp-frozen.kromeka-sheet-cell-readonly-active:not(.pp-gantt-cell),
.pp-table td.pp-frozen.kromeka-sheet-cell-readonly-active {
    background: color-mix(in srgb, var(--kromeka-grey) 22%, var(--bg-card, #fff)) !important;
}

.pp-table td.pp-frozen.kromeka-sheet-cell-copied,
.pp-table td.pp-frozen.kromeka-sheet-cell-editing {
    background: var(--bg-card, #fff) !important;
}

/* Frozen columns */
.pp-frozen {
    position: sticky;
    z-index: 40;
    background: var(--bg-card, #fff) !important;
}

.pp-table thead .pp-frozen {
    position: sticky !important;
    top: 0 !important;
    z-index: 120 !important;
    background: var(--bg-card-header, #f8f9fa) !important;
}

.pp-table thead .pp-select-col.pp-frozen {
    z-index: 130 !important;
    background: var(--bg-card-header, #f8f9fa) !important;
}

.pp-table thead .pp-frozen .pp-filter-btn {
    z-index: 85;
}

/* Horizontal offsets for frozen columns are applied by production-planning.js (applyPpFrozenColumns). */
.pp-col-wo { min-width: 60px; }
.pp-col-rev { min-width: 32px; }
.pp-col-item { min-width: 72px; }
.pp-col-name { min-width: 130px; }

.pp-col-party { min-width: 56px; }
.pp-col-project { min-width: 56px; }
.pp-col-projname { min-width: 90px; }
.pp-col-drawing { min-width: 64px; }
.pp-col-deadline { min-width: 7.5rem; }
.pp-col-qty { min-width: 32px; text-align: center; }
.pp-col-desc { min-width: 80px; }
.pp-col-customer { min-width: 80px; }
.pp-col-milestone { min-width: 44px; text-align: center; }

/* Date milestones (Plan Mnf / Plan Asm / linked dates): the date value or its
   editor uses the full cell width, and the completion marker is pinned to the
   right edge so both stay on one line at any column width. */
.pp-col-milestone.pp-ms-cell-date {
    position: relative;
    min-width: 7.5rem;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
}

.pp-ms-cell-date .pp-ms-value {
    display: inline-block;
    vertical-align: middle;
    color: var(--text-main);
}

.pp-ms-cell-date .pp-ms-check-btn {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    padding: 0;
    line-height: 1;
}

/* Reserve room for the marker so it never overlaps the date text. */
.pp-ms-cell-date[data-ms-has-marker="1"] .pp-ms-value {
    padding-right: 1.25rem;
}

.pp-table.kromeka-sheet-table td.pp-ms-cell-date[data-ms-has-marker="1"] input.flatpickr-alt-input,
.pp-table.kromeka-sheet-table td.pp-ms-cell-date[data-ms-has-marker="1"] .kromeka-sheet-input {
    padding-right: 1.25rem !important;
}

/* Manual-text milestones (e.g. Notes): wider column, single-line clamp so
   rows stay a uniform height at every density preset. */
.pp-col-milestone.pp-ms-cell-text {
    min-width: 100px;
    max-width: 180px;
    text-align: start;
    white-space: nowrap;
    vertical-align: middle;
    overflow: hidden;
}

.pp-ms-cell-text .pp-ms-value {
    display: block;
    text-align: start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Truncated Description / Notes: full text via selectable popover. */
.pp-text-preview-cell .pp-text-preview {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    color: var(--text-main);
}

.pp-ms-cell-text .pp-text-preview {
    white-space: nowrap;
    display: block;
    text-overflow: ellipsis;
}

.popover.pp-text-popover {
    max-width: min(36rem, 92vw);
    z-index: 1080;
}

.popover.pp-text-popover .popover-body {
    white-space: pre-wrap;
    max-height: 70vh;
    overflow: auto;
    user-select: text;
    cursor: text;
    color: var(--kromeka-dark);
}

[data-theme="dark"] .popover.pp-text-popover .popover-body {
    color: var(--text-main);
}

.pp-text-popover-actions {
    margin-top: 0.5rem;
    display: flex;
    justify-content: flex-end;
}

.pp-text-popover-copy {
    font-size: 0.75rem;
}

/* Notes editors stay inside the row preset — no vertical resize that
   would make one work-order row taller than the rest. Full text stays
   available via the Description/Notes popover. */
.pp-ms-text-input {
    height: calc(var(--kromeka-row-h) - 2 * var(--kromeka-row-pad-y));
    max-height: calc(var(--kromeka-row-h) - 2 * var(--kromeka-row-pad-y));
    min-height: 0;
    resize: none;
    overflow: auto;
    width: 100%;
    box-sizing: border-box;
}

.pp-col-hours { min-width: 40px; text-align: right; }
.pp-col-date { min-width: 7.5rem; }
.pp-col-week { min-width: 44px; text-align: center; }
.pp-col-status { min-width: 90px; }
.pp-col-team { min-width: 100px; }

.pp-col-status {
    position: relative;
}

.pp-col-status.pp-status-saving::after,
.pp-col-status.pp-status-saved::after,
.pp-col-status.pp-status-error::after {
    position: absolute;
    top: 2px;
    right: 4px;
    z-index: 3;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

.pp-col-status.pp-status-saving::after {
    content: "...";
    color: var(--kromeka-yellow);
}

.pp-col-status.pp-status-saved::after {
    content: "✓";
    color: #198754;
}

.pp-col-status.pp-status-error::after {
    content: "!";
    color: var(--text-danger);
}

.pp-team-cell[data-team-editable="1"] {
    cursor: pointer;
}

.pp-team-cell[data-team-editable="1"]:hover {
    background: var(--hover-bg, #e9ecef) !important;
}

.pp-team-inline-select {
    min-width: 90px;
    font-size: 0.75rem;
    padding: var(--kromeka-row-input-pad-y) 6px;
    box-sizing: border-box;
    height: calc(var(--kromeka-row-h) - 2 * var(--kromeka-row-pad-y));
    max-height: calc(var(--kromeka-row-h) - 2 * var(--kromeka-row-pad-y));
}

/* Fixed-width sub-task checkmark columns — never resizable */
.pp-col-check {
    min-width: 28px !important;
    max-width: 28px !important;
    width: 28px !important;
    padding: var(--kromeka-row-pad-y) 1px !important;
    text-align: center !important;
    overflow: hidden !important;
}

/* Select column */
.pp-select-col {
    width: 2rem;
    min-width: 2rem;
    max-width: 2rem;
    text-align: center;
    padding: var(--kromeka-row-pad-y) 2px !important;
}

/* Gantt header and cells: use inset shadow for the frozen/timeline seam so
 * .pp-gantt-weeks shares the same horizontal origin as tbody .pp-gantt-cell
 * (a real border-left would inset the flex grid ~2px vs the body underlay). */
.pp-table thead th.pp-gantt-header {
    padding: 0 !important;
    vertical-align: bottom;
    border-left: none;
    box-shadow: inset 2px 0 0 var(--border-color, #dee2e6);
    background: var(--kromeka-dark);
    color: #fff;
}

.pp-gantt-weeks {
    display: flex;
    position: relative;
    align-items: stretch;
    height: 100%;
    min-height: 100%;
    /* Same 28px rhythm as .pp-gantt-body-underlay + DAY_WIDTH in production-planning.js */
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 27px,
        var(--border-color, #dee2e6) 27px,
        var(--border-color, #dee2e6) 28px
    );
    background-size: 28px 100%;
}

.pp-gantt-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 1px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    border-right: none;
    padding: 2px 1px;
    font-size: 0.68rem;
    line-height: 1.2;
    color: #fff;
}

.pp-gantt-day-label {
    color: #fff;
    font-weight: 700;
}

.pp-gantt-day-date {
    font-weight: 700;
    color: #fff;
}

.pp-gantt-week-num {
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--kromeka-yellow);
    margin-bottom: 0;
    text-shadow: none;
    /* Week markers only render on Mondays. Allow them to overflow the
       28px day cell horizontally so labels like "W20"/"W48" never wrap to
       a second line ("W2" / "0"). */
    white-space: nowrap;
    overflow: visible;
    width: max-content;
    position: relative;
    z-index: 2;
}

.pp-gantt-weekend {
    background: color-mix(in srgb, var(--bg-secondary, #e9ecef) 60%, transparent);
}

.pp-gantt-holiday {
    background: color-mix(in srgb, var(--kromeka-red) 12%, transparent);
}

.pp-gantt-week-start {
    border-left: 2px solid var(--kromeka-red);
}

.pp-gantt-today {
    background: color-mix(in srgb, var(--kromeka-yellow) 22%, transparent);
    box-shadow:
        inset 2px 0 0 var(--kromeka-red),
        inset -2px 0 0 var(--kromeka-red),
        inset 0 -3px 0 var(--kromeka-red);
    position: relative;
    z-index: 1;
}

.pp-gantt-cell {
    padding: 0 !important;
    border-left: 2px solid var(--border-color, #dee2e6);
    position: relative;
    /* Timeline cell follows the same fixed row-height preset as data cells. */
    height: var(--kromeka-row-h);
    max-height: var(--kromeka-row-h);
}

.pp-table tbody tr.pp-row > td.pp-gantt-cell {
    background: transparent !important;
    border-left: none !important;
}

.pp-table tbody tr:hover > td.pp-gantt-cell {
    background: var(--hover-bg, #f8f9fa) !important;
}

.pp-gantt-bars {
    position: relative;
    height: 100%;
}

/* Gantt bars */
.pp-gantt-bar {
    position: absolute;
    border-radius: 3px;
    opacity: 0.9;
    transition: opacity 0.15s;
}

.pp-gantt-bar:hover {
    opacity: 1;
    z-index: 5;
}

.pp-bar-manufacturing {
    background: var(--kromeka-red);
}

.pp-bar-assembly {
    background: #3498db;
}

.pp-bar-completed {
    background: #198754 !important;
    opacity: 0.7;
}

/* Milestones */
.pp-gantt-milestone {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
}

.pp-milestone-diamond {
    display: inline-block;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    border: 2px solid;
}

.pp-milestone-deadline .pp-milestone-diamond {
    background: var(--kromeka-yellow);
    border-color: var(--kromeka-yellow);
}

.pp-milestone-prod-start .pp-milestone-diamond {
    background: var(--kromeka-red);
    border-color: var(--kromeka-red-dark);
}

.pp-milestone-plan-prod .pp-milestone-diamond {
    background: #e67e22;
    border-color: var(--kromeka-dark);
}

.pp-milestone-plan-asm .pp-milestone-diamond {
    background: #2980b9;
    border-color: var(--kromeka-dark);
}

[data-theme="dark"] .pp-milestone-plan-prod .pp-milestone-diamond {
    background: #f39c12;
    border-color: var(--kromeka-dark);
}

[data-theme="dark"] .pp-milestone-plan-asm .pp-milestone-diamond {
    background: #5dade2;
    border-color: var(--kromeka-dark);
}

/* Today line */
.pp-gantt-today-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--kromeka-red);
    z-index: 8;
    opacity: 0.6;
}

/* Milestone checkmark buttons */
.pp-ms-check-btn {
    background: none;
    border: none;
    padding: 0 2px;
    cursor: pointer;
    color: var(--text-muted, #6c757d);
    font-size: 0.85rem;
    vertical-align: middle;
}

.pp-ms-check-btn.pp-ms-done {
    color: #198754;
}

.pp-ms-check-btn:hover {
    color: var(--text-accent);
}

/* Status select styling */
.pp-status-select {
    font-size: 0.75rem;
    padding: var(--kromeka-row-input-pad-y) 6px;
    min-width: 90px;
    box-sizing: border-box;
    height: calc(var(--kromeka-row-h) - 2 * var(--kromeka-row-pad-y));
    max-height: calc(var(--kromeka-row-h) - 2 * var(--kromeka-row-pad-y));
}

/* Team select styling */
.pp-team-select {
    font-size: 0.75rem;
    padding: var(--kromeka-row-input-pad-y) 6px;
    min-width: 80px;
    box-sizing: border-box;
    height: calc(var(--kromeka-row-h) - 2 * var(--kromeka-row-pad-y));
    max-height: calc(var(--kromeka-row-h) - 2 * var(--kromeka-row-pad-y));
}

/* Sub-task box reuse from WO list — shrink with Compact so checks fit the row. */
.pp-col-check .wo-subtask-box {
    box-sizing: border-box;
    --pp-check-size: min(22px, calc(var(--kromeka-row-h) - 2 * var(--kromeka-row-pad-y) - 2px));
    width: var(--pp-check-size);
    height: var(--pp-check-size);
    border-radius: 4px;
    border: 2px solid currentColor;
    background: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
}

/* PP: chef-approved = dept border + transparent inner + green disc + white check */
.pp-col-check .wo-subtask-box.wo-box-chef-checked {
    background: transparent !important;
}

.pp-col-check .wo-subtask-box.wo-box-chef-checked .wo-subtask-chef-check {
    color: #fff !important;
    font-size: 0.72rem;
    font-weight: 700;
}

.pp-col-check .wo-subtask-box.wo-box-chef-checked .wo-subtask-chef-marker__disc {
    max-width: 14px;
    max-height: 14px;
}

.pp-col-check .wo-subtask-box.wo-box-user-checked {
    background: transparent !important;
}
.pp-col-check .wo-subtask-box.wo-box-user-checked i {
    color: var(--kromeka-success) !important;
}

/* Production start date cell */
.pp-prod-start-cell {
    cursor: pointer;
}

.pp-prod-start-cell:hover {
    background: var(--hover-bg, #e9ecef) !important;
}

/* Editable milestone cells (Production Planning) */
.pp-ms-cell[data-ms-editable="1"] {
    cursor: pointer;
}

.pp-ms-cell[data-ms-editable="1"]:hover {
    background: var(--hover-bg, #e9ecef) !important;
}

.pp-ms-cell.pp-ms-editing {
    outline: 2px solid var(--kromeka-yellow);
}

.workload-column-settings-item .pp-freeze-toggle {
    border: none;
    background: transparent;
    color: inherit;
    line-height: 1;
}

/* Column borders toggle */
.pp-table.pp-table-show-col-borders th,
.pp-table.pp-table-show-col-borders td {
    border-right: 1px solid var(--border-color, #dee2e6) !important;
}

.pp-table.pp-table-show-col-borders tbody td.pp-gantt-cell {
    border-right: none !important;
    background-image: none !important;
}

.pp-table.pp-table-show-col-borders .pp-gantt-day {
    border-right: none !important;
}

/* Weekend/holiday column stripes in Gantt body rows */
.pp-gantt-col-weekend,
.pp-gantt-col-holiday {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
}

.pp-gantt-col-weekend {
    background: color-mix(in srgb, var(--bg-secondary, #e9ecef) 40%, transparent);
}

.pp-gantt-col-holiday {
    background: color-mix(in srgb, var(--kromeka-red) 10%, transparent);
}

/* Inline editable cells */
td[data-edit-field] {
    cursor: pointer;
}

td[data-edit-field]:not(.pp-frozen) {
    position: relative;
}

td[data-edit-field]:hover {
    background: var(--hover-bg, #f0f0f0) !important;
    outline: 1px dashed var(--kromeka-yellow);
    outline-offset: -1px;
}

td[data-edit-field].pp-editing {
    padding: 1px 2px !important;
}

td[data-edit-field] .pp-inline-input {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--kromeka-grey) 55%, var(--border-color, #dee2e6));
    background: var(--bg-card, #fff);
    color: var(--text-main, #333);
    font-size: inherit;
    padding: 2px 4px;
    border-radius: 3px;
    outline: none;
    box-sizing: border-box;
}

td[data-edit-field] .pp-inline-input:focus {
    border-color: var(--kromeka-yellow);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--kromeka-yellow) 35%, transparent);
}

.pp-filters-toggle {
    display: none;
}

@media (min-width: 992px) and (min-height: 37.51rem) {
    .pp-filters-collapse.collapse {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }
}

/* Short screens and compact widths scroll the document. A locked
   100dvh body lets filters consume the viewport and squeeze the table
   to nothing. Inactive panes stay hidden. */
@media (max-width: 991.98px), (max-height: 37.5rem) {
    body.pp-page-active {
        display: block;
        height: auto;
        max-height: none;
        overflow: visible;
    }

    body.pp-page-active > .kromeka-app-content,
    body.pp-page-active > .kromeka-app-content > .kromeka-app-content-inner,
    body.pp-page-active .pp-page,
    body.pp-page-active .production-planning-card,
    body.pp-page-active .pp-tab-content,
    body.pp-page-active .pp-tab-pane.active,
    body.pp-page-active .pp-planning-body,
    body.pp-page-active .pp-planning-body > .kromeka-hscroll-wrap {
        display: block !important;
        height: auto;
        max-height: none;
        overflow: visible;
        flex: none;
    }

    body.pp-page-active .pp-tab-pane:not(.active) {
        display: none !important;
    }

    body.pp-page-active .pp-scroll-container,
    body.pp-page-active .kromeka-hscroll-wrap > .pp-scroll-container.kromeka-hscroll-main,
    body.pp-page-active .pp-tab-scroll,
    body.pp-page-active .pp-allocation-container {
        display: block;
        min-height: 18rem;
        max-height: clamp(18rem, 55vh, 40rem);
        max-height: clamp(18rem, 55dvh, 40rem);
        overflow: auto;
    }

    .pp-filters-toggle {
        display: inline-flex;
        margin-bottom: 0.35rem;
    }

    .pp-filters .form-control,
    .pp-filters .form-select {
        font-size: 1rem;
    }
}

.pp-gear-menu {
    max-height: 420px;
    overflow-y: auto;
    min-width: 200px;
}

.pp-select-bar {
    z-index: 1060;
    background: var(--kromeka-dark);
    color: var(--navbar-text);
}

.pp-select-bar.d-flex {
    display: none !important;
}

/* css/components/061-inline-cell-messages-kromekainlinesavefeedback-m.css */
/* ------------------------------------------------------------
   Inline cell messages (KromekaInlineSaveFeedback.message)
   Shared explanation bubble for grid cells that could not save.
   Anchored to the cell, wraps long text, readable in both themes.
   ------------------------------------------------------------ */
.kromeka-cell-message-host {
    position: relative;
}

.kromeka-cell-message {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 1070;
    display: block;
    width: max-content;
    max-width: min(22rem, 60vw);
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border-color, #dee2e6);
    border-left: 3px solid var(--kromeka-red);
    border-radius: 3px;
    background: var(--bg-card, #fff);
    color: var(--text-main, #1d1d1b);
    font-size: 0.7rem;
    line-height: 1.35;
    white-space: normal;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    pointer-events: none;
}

.kromeka-cell-message--warning {
    border-left-color: var(--kromeka-yellow);
}

.kromeka-cell-message .bi {
    color: var(--text-danger);
}

.kromeka-cell-message--warning .bi {
    color: var(--kromeka-yellow);
}

[data-theme="dark"] .kromeka-cell-message {
    background: var(--bg-card);
    color: var(--text-main);
}

/* Toast host sits above modals. Multi-line messages keep their line breaks. */
.kromeka-toast-host {
    z-index: 1090;
}

.kromeka-toast-body {
    white-space: pre-line;
}

.kromeka-toast-body a {
    color: inherit;
}

/* Filters section — .kromeka-filter-bar supplies toolbar surface + label contrast */
.pp-filters.kromeka-filter-bar .form-label {
    font-size: 0.72rem;
    margin-bottom: 0.25rem;
}

/* css/components/062-pp-tab-backlog.css */
/* ---- Backlog / Capacity heatmap ---- */
#pp-tab-backlog {
    --pp-backlog-party-partial: #76cfe4;
    --pp-backlog-party-full: #0f7f9b;
    --pp-backlog-noparty-partial: #f6bb63;
    --pp-backlog-noparty-full: #df7418;
    --pp-backlog-idle: #878787;
    --pp-backlog-nonworking: #000000;
}

.pp-backlog-table {
    font-size: 0.78rem;
    border-collapse: separate;
    border-spacing: 0;
}

.pp-backlog-team-header {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    white-space: nowrap;
}

.pp-backlog-hc-header {
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    text-align: center;
}

.pp-backlog-total-header,
.pp-backlog-end-header {
    width: 70px;
    min-width: 70px;
    max-width: 70px;
    text-align: center;
    white-space: nowrap;
}

.pp-backlog-week-header {
    /* 7 day-cells * 22px pill width = 154px. Fixed so the week label lands
       in the centre and never wraps when shifting the visible range. */
    min-width: 154px;
    text-align: center;
    font-weight: 600;
    font-size: 0.7rem;
    vertical-align: middle;
    padding: 5px 4px;
    white-space: nowrap;
}

.pp-backlog-day-header {
    /* Fixed pill width (matches BACKLOG_DAY_WIDTH in production-planning.js)
       so day cells stay the same size when paging Prev/Next. */
    width: 22px;
    min-width: 22px;
    max-width: 22px;
    text-align: center;
    font-weight: 600;
    font-size: 0.66rem;
    line-height: 1.15;
    white-space: nowrap;
    vertical-align: middle;
    padding: 4px 2px;
}

.pp-backlog-day-header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 2.35rem;
}

.pp-backlog-team-header,
.pp-backlog-hc-header,
.pp-backlog-total-header,
.pp-backlog-end-header,
.pp-backlog-team-name,
.pp-backlog-table tbody td:nth-child(2),
.pp-backlog-total-cell,
.pp-backlog-end-cell {
    position: sticky;
    background: var(--bg-card, var(--bs-body-bg));
}

.pp-backlog-team-header,
.pp-backlog-team-name {
    left: 0;
    z-index: 50;
}

.pp-backlog-hc-header,
.pp-backlog-table tbody td:nth-child(2) {
    left: 150px;
    z-index: 51;
}

.pp-backlog-total-header,
.pp-backlog-total-cell {
    left: 192px;
    z-index: 52;
}

.pp-backlog-end-header,
.pp-backlog-end-cell {
    left: 262px;
    z-index: 53;
}

.pp-backlog-table thead th {
    z-index: 35;
    background: var(--kromeka-data-table-thead-bg);
    color: var(--kromeka-data-table-thead-text);
}

.pp-backlog-table thead .pp-backlog-team-header {
    z-index: 56;
}

.pp-backlog-table thead .pp-backlog-hc-header {
    z-index: 57;
}

.pp-backlog-table thead .pp-backlog-total-header {
    z-index: 58;
}

.pp-backlog-table thead .pp-backlog-end-header {
    z-index: 59;
}

.pp-backlog-team-name {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-backlog-table tbody td:nth-child(2) {
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    text-align: center;
}

.pp-backlog-total-cell,
.pp-backlog-end-cell {
    width: 70px;
    min-width: 70px;
    max-width: 70px;
    text-align: center;
    white-space: nowrap;
    font-weight: 600;
}

.pp-backlog-end-header,
.pp-backlog-end-cell {
    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.18);
}

.pp-backlog-cell {
    text-align: center;
    font-size: 0.74rem;
    padding: 3px 2px !important;
    vertical-align: middle;
    /* Match BACKLOG_DAY_WIDTH in production-planning.js — fixed pill width
       so cells never resize when paging the visible range. */
    width: 22px;
    min-width: 22px;
    max-width: 22px;
    height: 24px;
    white-space: nowrap;
    border-color: color-mix(in srgb, var(--border-color) 80%, transparent) !important;
    background: var(--bg-card, var(--bs-body-bg));
    overflow: hidden;
}

td.pp-backlog-cell[data-bl-risk-cell="1"] {
    cursor: pointer;
}

.pp-backlog-cell--risk {
    border-color: color-mix(in srgb, var(--border-color) 80%, transparent) !important;
    outline: 0;
}

/* Overtime risk: red ring follows the pill (not the table cell) */
.pp-backlog-cell--risk .pp-backlog-load-track,
.pp-backlog-cell--risk .pp-backlog-nonworking-mark {
    box-shadow:
        0 0 0 2px var(--kromeka-red),
        inset 0 0 0 1px color-mix(in srgb, var(--border-color) 70%, transparent);
}

.pp-backlog-cell--risk.pp-backlog-today .pp-backlog-load-track,
.pp-backlog-cell--risk.pp-backlog-today .pp-backlog-nonworking-mark {
    box-shadow:
        0 0 0 3px var(--kromeka-red),
        inset 0 0 0 1px color-mix(in srgb, var(--border-color) 70%, transparent);
}

.pp-backlog-load-track {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--pp-backlog-idle) 22%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-color) 70%, transparent);
}

.pp-backlog-load-track-empty {
    background: color-mix(in srgb, var(--pp-backlog-idle) 35%, transparent);
}

.pp-backlog-load-segment {
    height: 100%;
    min-width: 3px;
}

/* Two-bucket coloring per chef rules:
   BLUE  = Party + planned in window (firm commitment, ready to run)
   ORANGE = Needs attention: party-without-dates, no-party-without-dates,
           or no-party-with-dates. */
.pp-backlog-load-party {
    background: var(--pp-backlog-party-full);
}

.pp-backlog-load-noparty {
    background: var(--pp-backlog-noparty-full);
}

.pp-backlog-loaded {
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 27px,
        color-mix(in srgb, var(--border-color) 45%, transparent) 27px,
        color-mix(in srgb, var(--border-color) 45%, transparent) 28px
    );
}

.pp-backlog-idle {
    background: color-mix(in srgb, var(--pp-backlog-idle) 12%, transparent);
}

.pp-backlog-nonworking {
    background: color-mix(in srgb, var(--pp-backlog-nonworking) 12%, transparent);
}

.pp-backlog-nonworking-mark {
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: var(--pp-backlog-nonworking);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 20%, var(--pp-backlog-nonworking));
}

.pp-backlog-overtime-flag {
    color: var(--text-danger);
    font-size: 0.56rem;
    font-weight: 700;
}

.pp-backlog-legend {
    font-size: 0.8rem;
    color: var(--text-main);
    font-weight: 600;
}

.pp-backlog-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.pp-backlog-legend-line {
    display: inline-block;
    flex-shrink: 0;
    width: 2.2rem;
    height: 0.55rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--kromeka-dark) 25%, transparent);
}

.pp-backlog-risk-border {
    background: transparent;
    border: 2px solid var(--kromeka-red);
}

.pp-backlog-risk-badge {
    cursor: pointer;
}

.pp-backlog-risk-badge:focus-visible {
    outline: 2px solid var(--kromeka-yellow);
    outline-offset: 2px;
}

/* Missing-hours list: WOs that cannot be drawn in the heatmap because
   their Manufacturing or Assembly subtask has 0 planned hours. The chef
   is expected to fill those hours so the items show up in Backlog. */
.pp-backlog-no-hours-badge {
    cursor: pointer;
}

.pp-backlog-no-hours-badge:focus-visible {
    outline: 2px solid var(--kromeka-yellow);
    outline-offset: 2px;
}

.pp-backlog-no-hours {
    border-top: 1px dashed color-mix(in srgb, var(--border-color) 70%, transparent);
    padding-top: 0.75rem;
}

.pp-backlog-no-hours-table th,
.pp-backlog-no-hours-table td {
    vertical-align: middle;
    font-size: 0.85rem;
}

.pp-bl-no-hours-th-party,
.pp-bl-no-hours-td-party {
    width: 28px;
    text-align: center;
}

/* Planned badge — clickable affordance to open the Allocation tab. */
.pp-backlog-planned-badge {
    cursor: pointer;
}

.pp-backlog-planned-badge:focus-visible {
    outline: 2px solid var(--kromeka-yellow);
    outline-offset: 2px;
}

/* Allocation tab — per-team weekly breakdown grid. Mfg vs Asm get a left
   accent strip so the chef can scan roles at a glance; OT entries reuse
   the brand red border treatment. */
.pp-allocation-container {
    overflow: auto;
    position: relative;
    max-height: calc(100vh - 280px);
    width: 100%;
    min-width: 0;
}

/* Full-page Production Planning layout: fill remaining tab height so the
   week grid can scroll horizontally across the whole backlog window. */
body.pp-page-active #pp-tab-allocation > .pp-tab-scroll {
    display: flex;
    flex-direction: column;
}

body.pp-page-active .pp-allocation-container {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

.pp-allocation-table {
    table-layout: fixed;
    min-width: max-content;
    width: max-content;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
    --pp-allocation-row-border: color-mix(in srgb, var(--border-color) 85%, var(--kromeka-dark));
}

[data-theme="dark"] .pp-allocation-table {
    --pp-allocation-row-border: rgba(255, 255, 255, 0.16);
}

.pp-allocation-table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid var(--pp-allocation-row-border);
}

.pp-allocation-table tbody td {
    vertical-align: top;
    border-bottom: 1px solid var(--pp-allocation-row-border);
    background: var(--bg-card);
}

.pp-allocation-table tbody tr:last-child td {
    border-bottom-width: 1px;
}

/* Corner + frozen team column.
   Beat Bootstrap `.table > :not(caption) > * > *` color so dark header
   backgrounds never keep body (--text-main) black/dark text. */
.pp-allocation-table > thead > tr > th.pp-allocation-team-header,
.pp-allocation-table > tbody > tr > td.pp-allocation-team-cell {
    position: sticky;
    left: 0;
    width: 220px;
    min-width: 220px;
    max-width: 220px;
    box-shadow: 3px 0 0 color-mix(in srgb, var(--kromeka-dark) 18%, transparent);
}

.pp-allocation-table > thead > tr > th.pp-allocation-team-header {
    top: 0;
    z-index: 40;
    background: var(--bg-card-header) !important;
    color: var(--text-card-header) !important;
    padding: 8px 10px;
    min-height: 44px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}

.pp-allocation-table > tbody > tr > td.pp-allocation-team-cell {
    z-index: 15;
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    padding: 10px 8px;
    min-height: 96px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Week header row — reserved height, never shares space with body items */
.pp-allocation-table > thead > tr > th.pp-allocation-week-header {
    position: sticky;
    top: 0;
    z-index: 20;
    width: 220px;
    min-width: 220px;
    min-height: 44px;
    padding: 6px 8px;
    text-align: left;
    background: var(--bg-card-header) !important;
    color: var(--text-card-header) !important;
    box-shadow: 0 2px 0 var(--pp-allocation-row-border);
}

.pp-allocation-week-header-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 36px;
    justify-content: flex-end;
}

.pp-allocation-week-num {
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-card-header) !important;
}

.pp-allocation-week-date {
    font-size: 0.75rem;
    line-height: 1.2;
    color: color-mix(in srgb, var(--text-card-header) 82%, transparent) !important;
}

.pp-allocation-week-num--current {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--kromeka-yellow);
}

.pp-allocation-week-cell {
    position: relative;
    z-index: 1;
    width: 220px;
    min-width: 220px;
    min-height: 96px;
    padding: 8px;
    background: var(--bg-card);
}

.pp-allocation-entry-list {
    margin: 0;
}

.pp-allocation-entry {
    border-left: 3px solid color-mix(in srgb, var(--border-color) 60%, transparent);
    padding: 2px 6px;
    margin-bottom: 2px;
    border-radius: 2px;
}

.pp-allocation-entry--mfg {
    border-left-color: var(--pp-backlog-party-full);
}

.pp-allocation-entry--asm {
    border-left-color: var(--pp-backlog-noparty-full);
}

.pp-allocation-entry--ot {
    box-shadow: inset 0 0 0 1px var(--kromeka-red);
}

.pp-allocation-print-header {
    display: none;
}

@media print {
    body * {
        visibility: hidden;
    }

    #pp-tab-allocation,
    #pp-tab-allocation * {
        visibility: visible;
    }

    #pp-tab-allocation {
        display: block !important;
        opacity: 1 !important;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    .navbar,
    .breadcrumb,
    .card-header,
    .pp-production-planning-subnav,
    .pp-allocation-screen-actions,
    .btn,
    #pp-select-bar,
    #pp-scroll-container,
    #pp-tab-planning,
    #pp-tab-backlog,
    #pp-tab-overtime {
        display: none !important;
    }

    .pp-allocation-print-header {
        display: block !important;
        visibility: visible;
        margin-bottom: 0.75rem;
        color: var(--kromeka-dark);
    }

    .pp-allocation-container {
        overflow: visible !important;
        max-height: none !important;
    }

    .pp-allocation-team-header,
    .pp-allocation-team-cell {
        position: static;
        box-shadow: none;
    }

    .pp-allocation-week-header {
        position: static;
    }
}

/* Overtime tab table — keep dense, brand-styled. */
.pp-overtime-table th,
.pp-overtime-table td {
    vertical-align: middle;
    font-size: 0.85rem;
}

.pp-backlog-today {
    outline: 0;
    box-shadow:
        inset 2px 0 0 var(--kromeka-red),
        inset -2px 0 0 var(--kromeka-red);
}

.pp-backlog-day-header.pp-backlog-today {
    color: var(--text-card-header);
    box-shadow:
        inset 0 -3px 0 var(--kromeka-red),
        inset 2px 0 0 var(--kromeka-red),
        inset -2px 0 0 var(--kromeka-red);
}

.pp-backlog-cell--risk.pp-backlog-today {
    outline: 0;
}

.pp-backlog-tooltip {
    position: fixed;
    z-index: 10050;
    max-width: min(28rem, calc(100vw - 24px));
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, visibility 0.12s ease;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.pp-backlog-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Instant 3-line tooltip used by the chef on the MNF H / ASM H / TOTAL H
   column headers. No filler words and no entry delay so the chef can
   sample multiple columns by moving the pointer across them. */
.pp-instant-tooltip {
    position: fixed;
    z-index: 10060;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    /* No transition delay: appear immediately on hover. */
    transition: opacity 0.05s ease, visibility 0.05s ease;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 0.8125rem;
    line-height: 1.45;
    padding: 0.45rem 0.7rem;
    min-width: 9rem;
    max-width: min(20rem, calc(100vw - 24px));
}

.pp-instant-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}

.pp-instant-tooltip-title {
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 0.2rem;
    color: var(--text-card-header);
    background: var(--kromeka-dark-grey);
    margin: -0.45rem -0.7rem 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 8px 8px 0 0;
}

.pp-instant-tooltip-line {
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

.pp-backlog-tooltip-header {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: var(--kromeka-dark-grey);
    color: var(--text-card-header);
    border-radius: 10px 10px 0 0;
}

.pp-backlog-tooltip-dot {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin-top: 0.2rem;
    border-radius: 50%;
    background: var(--kromeka-grey);
    border: 2px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.pp-backlog-tooltip-dot--risk {
    background: var(--kromeka-red);
}

.pp-backlog-tooltip-status {
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.pp-backlog-tooltip-title,
.pp-backlog-tooltip-risk-title {
    font-weight: 600;
    word-break: break-word;
}

.pp-backlog-tooltip-body {
    padding: 0.55rem 0.85rem 0.75rem;
}

.pp-backlog-tooltip-kv {
    display: grid;
    grid-template-columns: minmax(7rem, 42%) 1fr;
    gap: 0.25rem 0.75rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border-color);
    align-items: start;
}

.pp-backlog-tooltip-k {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.75rem;
}

.pp-backlog-tooltip-v {
    word-break: break-word;
}

.pp-backlog-tooltip-risk-group {
    margin-top: 0.6rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--border-color);
}

.pp-backlog-tooltip-list {
    margin-top: 0.35rem;
}

.pp-backlog-tooltip-list-item {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.15rem 0;
}

.pp-backlog-tooltip-muted {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.pp-backlog-risk-report-table th,
.pp-backlog-risk-report-table td {
    white-space: normal;
}

.pp-backlog-risk-page-table th,
.pp-backlog-risk-page-table td,
.pp-backlog-risk-report-table td {
    white-space: normal;
    vertical-align: top;
}

.pp-backlog-risk-group-row {
    background: color-mix(in srgb, var(--kromeka-red) 8%, var(--bg-card));
}

.pp-backlog-risk-detail-table {
    font-size: 0.82rem;
}

.pp-backlog-risk-detail-table thead th {
    color: var(--text-muted);
    font-weight: 600;
}

.pp-backlog-risk-filter-card .card-body {
    padding: 1rem 1.15rem;
}

.pp-backlog-risk-filter-form .form-label {
    color: var(--text-muted);
    font-weight: 600;
}

.pp-backlog-risk-filter-actions {
    padding-top: 1.45rem;
}

@media (max-width: 767.98px) {
    .pp-backlog-risk-filter-actions {
        justify-content: flex-start !important;
        padding-top: 0;
    }
}

.pp-backlog-risk-report-ot {
    color: var(--text-danger);
}

.pp-backlog-risk-report-empty {
    background: color-mix(in srgb, var(--kromeka-yellow) 22%, transparent);
    border-color: color-mix(in srgb, var(--kromeka-yellow) 55%, var(--border-color));
    color: var(--kromeka-dark);
}

[data-theme="dark"] .pp-backlog-risk-report-empty {
    background: color-mix(in srgb, var(--kromeka-yellow) 18%, var(--bg-card));
    border-color: color-mix(in srgb, var(--kromeka-yellow) 55%, var(--border-color));
    color: var(--text-main);
}

@media (max-width: 991.98px), (max-height: 37.5rem) {
    body.pp-page-active .pp-allocation-container {
        min-height: 18rem;
        max-height: clamp(18rem, 55vh, 40rem);
        max-height: clamp(18rem, 55dvh, 40rem);
        overflow: auto;
    }
}

/* css/components/063-data-theme-dark-pp-table-th.css */
/* ---- Dark theme overrides ---- */
[data-theme="dark"] .pp-table th {
    background: var(--bg-card-header);
    color: var(--text-card-header);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .pp-table {
    --pp-row-zebra-bg: var(--table-striped-bg, #323230);
}

[data-theme="dark"] .pp-table td {
    background: var(--bg-card);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .pp-table tbody tr.pp-row:nth-child(odd) > td:not(.pp-gantt-cell) {
    background: var(--pp-row-zebra-bg);
}

[data-theme="dark"] .pp-frozen {
    background: var(--bg-card) !important;
}

[data-theme="dark"] .pp-table tbody tr.pp-row:nth-child(odd) > td.pp-frozen:not(.pp-gantt-cell) {
    background: var(--pp-row-zebra-bg) !important;
}

[data-theme="dark"] .pp-table thead .pp-frozen {
    background: var(--kromeka-data-table-thead-bg) !important;
    color: var(--kromeka-data-table-thead-text) !important;
}

[data-theme="dark"] .pp-table tbody tr:hover td {
    background: var(--hover-bg);
}

[data-theme="dark"] .pp-table tbody tr:hover > td.pp-frozen:not(.pp-gantt-cell) {
    background: var(--hover-bg) !important;
}

[data-theme="dark"] .pp-table tbody tr.pp-row:nth-child(odd) > td.pp-frozen.kromeka-sheet-cell-selected:not(.pp-gantt-cell),
[data-theme="dark"] .pp-table tbody tr:hover > td.pp-frozen.kromeka-sheet-cell-selected:not(.pp-gantt-cell),
[data-theme="dark"] .pp-table td.pp-frozen.kromeka-sheet-cell-selected {
    background: color-mix(in srgb, var(--kromeka-yellow) 32%, var(--bg-card, #2c2c2a)) !important;
}

[data-theme="dark"] .pp-table tbody tr.pp-row:nth-child(odd) > td.pp-frozen.kromeka-sheet-cell-readonly-active:not(.pp-gantt-cell),
[data-theme="dark"] .pp-table tbody tr:hover > td.pp-frozen.kromeka-sheet-cell-readonly-active:not(.pp-gantt-cell),
[data-theme="dark"] .pp-table td.pp-frozen.kromeka-sheet-cell-readonly-active {
    background: color-mix(in srgb, var(--kromeka-grey) 28%, var(--bg-card, #2c2c2a)) !important;
}

[data-theme="dark"] .pp-table td.pp-frozen.kromeka-sheet-cell-copied,
[data-theme="dark"] .pp-table td.pp-frozen.kromeka-sheet-cell-editing {
    background: var(--bg-card, #2c2c2a) !important;
}

[data-theme="dark"] .pp-table tbody tr.pp-row > td.pp-gantt-cell {
    background: transparent !important;
}

[data-theme="dark"] .pp-table tbody tr:hover > td.pp-gantt-cell {
    background: var(--hover-bg) !important;
}

[data-theme="dark"] .pp-filter-menu {
    background: var(--bg-card);
    color: var(--text-main);
    border-color: var(--border-color);
}

[data-theme="dark"] .pp-filter-chips {
    background: var(--bg-card);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .pp-filter-chip {
    color: var(--text-main);
    border-color: var(--border-color);
}

[data-theme="dark"] .pp-team-cell[data-team-editable="1"]:hover {
    background: var(--hover-bg) !important;
}

[data-theme="dark"] .pp-ms-cell[data-ms-editable="1"]:hover {
    background: var(--hover-bg) !important;
}

[data-theme="dark"] .pp-table thead th.pp-gantt-header,
[data-bs-theme="dark"] .pp-table thead th.pp-gantt-header {
    background: var(--kromeka-data-table-thead-bg);
    color: var(--kromeka-data-table-thead-text);
    box-shadow: inset 2px 0 0 var(--border-color);
}

[data-theme="dark"] .pp-gantt-day {
    border-right: none;
    color: var(--text-main);
}

[data-theme="dark"] .pp-gantt-day-label,
[data-theme="dark"] .pp-gantt-day-date {
    color: var(--text-main);
}

[data-theme="dark"] .pp-gantt-week-num {
    color: var(--kromeka-yellow);
    text-shadow: none;
}

[data-theme="dark"] .pp-gantt-weekend {
    background: color-mix(in srgb, var(--bg-secondary) 40%, transparent);
}

[data-theme="dark"] .pp-gantt-holiday {
    background: color-mix(in srgb, var(--kromeka-red) 8%, transparent);
}

[data-theme="dark"] .pp-gantt-col-weekend {
    background: color-mix(in srgb, var(--bg-secondary) 25%, transparent);
}

[data-theme="dark"] .pp-gantt-col-holiday {
    background: color-mix(in srgb, var(--kromeka-red) 6%, transparent);
}

[data-theme="dark"] .pp-table.pp-table-show-col-borders th,
[data-theme="dark"] .pp-table.pp-table-show-col-borders td {
    border-right-color: var(--border-color) !important;
}

[data-theme="dark"] .pp-table.pp-table-show-col-borders .pp-gantt-day {
    border-right: none !important;
}

[data-theme="dark"] .pp-gantt-weeks {
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 27px,
        var(--border-color) 27px,
        var(--border-color) 28px
    );
    background-size: 28px 100%;
}

[data-theme="dark"] .pp-gantt-today,
[data-bs-theme="dark"] .pp-gantt-today {
    background: color-mix(in srgb, var(--kromeka-yellow) 16%, var(--bg-card-header, #2c2c2a));
    box-shadow:
        inset 2px 0 0 var(--kromeka-red),
        inset -2px 0 0 var(--kromeka-red),
        inset 0 -3px 0 var(--kromeka-red);
}

[data-theme="dark"] .pp-gantt-body-underlay {
    box-shadow: inset 2px 0 0 var(--border-color);
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 27px,
        var(--border-color) 27px,
        var(--border-color) 28px
    );
    background-size: 28px 100%;
}

[data-theme="dark"] .pp-col-name,
[data-theme="dark"] .pp-gantt-header,
[data-theme="dark"] .pp-gantt-cell {
    border-color: var(--border-color);
}

[data-theme="dark"] .pp-gantt-week-start {
    border-left-color: var(--kromeka-red);
}

[data-theme="dark"] .pp-ms-check-btn {
    color: var(--text-muted);
}

[data-theme="dark"] .pp-ms-check-btn.pp-ms-done {
    color: #4caf50;
}

[data-theme="dark"] .pp-backlog-table thead th,
[data-theme="dark"] .pp-backlog-team-header,
[data-theme="dark"] .pp-backlog-hc-header,
[data-theme="dark"] .pp-backlog-total-header,
[data-theme="dark"] .pp-backlog-end-header {
    background: var(--kromeka-data-table-thead-bg);
    color: var(--kromeka-data-table-thead-text);
}

[data-theme="dark"] .pp-backlog-team-name,
[data-theme="dark"] .pp-backlog-table tbody td:nth-child(2),
[data-theme="dark"] .pp-backlog-total-cell,
[data-theme="dark"] .pp-backlog-end-cell {
    background: var(--bg-card);
}

[data-theme="dark"] .pp-backlog-idle {
    background: color-mix(in srgb, var(--kromeka-dark-grey) 28%, transparent);
    color: #fff;
}

/* Busy cells: same base tint as idle so only the bar reads as “load” (not a lighter cell block). */
[data-theme="dark"] .pp-backlog-loaded {
    background: color-mix(in srgb, var(--kromeka-dark-grey) 28%, transparent);
    background-image: none;
    color: #fff;
}

[data-theme="dark"] .pp-backlog-nonworking {
    background: color-mix(in srgb, var(--pp-backlog-nonworking) 16%, transparent);
    color: #fff;
}

[data-theme="dark"] .pp-backlog-nonworking-mark {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 35%, var(--pp-backlog-nonworking));
}

[data-theme="dark"] .pp-backlog-cell--risk .pp-backlog-nonworking-mark {
    box-shadow:
        0 0 0 2px var(--kromeka-red),
        inset 0 0 0 1px color-mix(in srgb, #fff 35%, var(--pp-backlog-nonworking));
}

[data-theme="dark"] .pp-backlog-cell--risk.pp-backlog-today .pp-backlog-nonworking-mark {
    box-shadow:
        0 0 0 3px var(--kromeka-red),
        inset 0 0 0 1px color-mix(in srgb, #fff 35%, var(--pp-backlog-nonworking));
}

[data-bs-theme="dark"] .pp-backlog-cell--risk .pp-backlog-nonworking-mark {
    box-shadow:
        0 0 0 2px var(--kromeka-red),
        inset 0 0 0 1px color-mix(in srgb, #fff 35%, var(--pp-backlog-nonworking));
}

[data-bs-theme="dark"] .pp-backlog-cell--risk.pp-backlog-today .pp-backlog-nonworking-mark {
    box-shadow:
        0 0 0 3px var(--kromeka-red),
        inset 0 0 0 1px color-mix(in srgb, #fff 35%, var(--pp-backlog-nonworking));
}

/* Black holiday swatch: keep legend pill visible on dark card backgrounds */
[data-theme="dark"] .pp-backlog-legend .pp-backlog-legend-line.pp-backlog-nonworking-mark {
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #fff 35%, var(--pp-backlog-nonworking)),
        0 0 0 1px var(--border-color);
}

.wo-ms-text-value {
    max-width: 120px;
}

/* Weekly Meetings — ISO week label when it is the calendar “current” week */
.weekly-meetings-week-current {
    font-weight: 700;
    border-bottom: 2px solid var(--kromeka-red);
    padding-bottom: 1px;
    text-decoration: none;
}

/* Summary strip above the table (light page background in light theme) */
html:not([data-theme="dark"]) .weekly-meetings-week-current {
    color: var(--kromeka-dark);
}

[data-theme="dark"] .weekly-meetings-week-current {
    color: var(--text-main);
}

/* Table header: dark thead strip — current week must use light text (all themes) */
.weekly-meetings-table thead .weekly-meetings-week-current {
    color: var(--kromeka-data-table-thead-text);
}

/* css/screens/064-weekly-meetings-week-toolbar.css */
/* ---- Week controls embedded in the table toolbar ---- */
.weekly-meetings-week-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    min-width: 0;
}

.weekly-meetings-week-toolbar__weeks {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.4rem;
    min-width: 0;
}

.weekly-meetings-week-toolbar__value {
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
}

.weekly-meetings-week-toolbar__dates {
    white-space: nowrap;
}

.weekly-meetings-week-toolbar__scope .nav-link {
    font-size: 0.8125rem;
}

.weekly-meetings-sheet-hint {
    border-top: 1px solid color-mix(in srgb, var(--kromeka-grey) 35%, transparent);
}

[data-theme="dark"] .weekly-meetings-sheet-hint {
    border-top-color: var(--kromeka-dark-grey);
}

@media (max-width: 575.98px) {
    .weekly-meetings-week-toolbar {
        align-items: stretch;
        width: 100%;
    }

    .weekly-meetings-week-toolbar .btn-group {
        width: 100%;
    }
}

/* Mobile cards: notes are rich HTML, so cap their height instead of letting a
   long note push the rest of the card off screen. */
.weekly-meetings-mobile-note {
    max-height: 9rem;
    overflow: auto;
    overflow-wrap: anywhere;
}

/* Weekly Meetings */
.weekly-meetings-page {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Always-on workbench: table fills remaining viewport height. */
body.wm-page-active .weekly-meetings-page {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-top: 0.15rem;
}

body.wm-page-active .weekly-meetings-page > .mb-2 {
    flex-shrink: 0;
}

body.wm-page-active .weekly-meetings-page .kromeka-data-table-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 0;
    border-radius: 0;
}

body.wm-page-active .weekly-meetings-page .kromeka-data-table-card > .card-header {
    flex-shrink: 0;
}

body.wm-page-active .weekly-meetings-page .kromeka-data-table-card > .card-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.wm-page-active .weekly-meetings-page .weekly-meetings-table-wrapper,
body.wm-page-active .weekly-meetings-page .table-responsive {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.weekly-meetings-page .kromeka-data-table-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Keep table horizontal scroll inside the wrapper; add right inset so edit icons are not flush to the edge. */
.weekly-meetings-page .weekly-meetings-table-wrapper,
.table-responsive:has(.weekly-meetings-table) {
    overflow-x: auto;
    padding-right: max(1.5rem, 24px);
    scroll-padding-right: max(1.5rem, 24px);
    box-sizing: border-box;
}

/* Weekly meetings: keep container horizontal inset on small screens (default table card goes edge-to-edge). */
@media (max-width: 767.98px) {
    .weekly-meetings-page .kromeka-data-table-card {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
        border-left: 1px solid var(--border-color);
        border-right: 1px solid var(--border-color);
        border-radius: var(--bs-card-border-radius, 0.375rem);
    }
}

@media (max-width: 575.98px) {
    .weekly-meetings-page .weekly-meetings-table-wrapper,
    .table-responsive:has(.weekly-meetings-table) {
        padding-right: max(1.25rem, 20px);
        scroll-padding-right: max(1.25rem, 20px);
    }
}

/* Column widths come from auto-fit on load, capped per column by
   data-kromeka-col-max-width on the table. No table-wide min-width: the grid
   should be as wide as its content needs and no wider. */
.weekly-meetings-table.kromeka-data-table {
    max-width: none;
}

/* Past the cap a value wraps instead of being clipped to an ellipsis, so no
   note, project name, or customer is ever hidden. `anywhere` keeps the cap
   honest when a single token (a URL, a long code) is wider than the column.
   `max-width: none` undoes the ellipsis trick from kromeka-data-table; the
   cap stays a JS-applied width so manual resize can still exceed it. */
.weekly-meetings-table.kromeka-data-table tbody td[data-col-key],
.weekly-meetings-table.kromeka-data-table tfoot td[data-col-key] {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: none;
}

.weekly-meetings-table th[data-col-key="project_id"] {
    font-size: 0.95rem;
}

.weekly-meetings-table td[data-col-key="project_id"] {
    font-size: 1.125rem;
    line-height: 1.3;
}

.weekly-meetings-table td[data-col-key="project_id"] .badge-project-id {
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.4rem 0.6rem;
    letter-spacing: 0.02em;
}

/* Note columns are multi-line, so their text starts at the top of tall rows.
   Their usable floor is data-col-min-width on the header, not a CSS min-width,
   so auto-fit and manual resize both know about it. */
.weekly-meetings-table th[data-col-key="important_notes"],
.weekly-meetings-table td[data-col-key="important_notes"],
.weekly-meetings-table th[data-col-key="previous_week_notes"],
.weekly-meetings-table td[data-col-key="previous_week_notes"],
.weekly-meetings-table th[data-col-key="selected_week_notes"],
.weekly-meetings-table td[data-col-key="selected_week_notes"] {
    box-sizing: border-box;
    vertical-align: top;
    padding-right: 0.75rem;
}

.weekly-meetings-table .weekly-meeting-note-cell .nc-longtext-td__inner {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
}

.weekly-meetings-table .weekly-meeting-note-cell .weekly-meeting-note-display {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    max-height: 8rem;
    overflow: auto;
    white-space: normal;
    word-break: break-word;
}

.weekly-meetings-table .weekly-meeting-note-cell .weekly-meeting-note-display p,
.weekly-meetings-table .weekly-meeting-note-cell .weekly-meeting-note-display div,
.weekly-meetings-mobile-note p,
.weekly-meetings-mobile-note div,
.weekly-meeting-note-editor-surface p,
.weekly-meeting-note-editor-surface div {
    margin: 0;
    padding: 0;
}

.weekly-meeting-note-date-picker-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.weekly-meeting-note-editor-surface {
    line-height: 1.4;
}

.weekly-meetings-table .weekly-meeting-note-cell--editable:hover .nc-longtext-edit,
.weekly-meetings-table .weekly-meeting-note-cell--editable:focus-within .nc-longtext-edit {
    opacity: 1;
}

.weekly-meetings-table .weekly-meeting-note-cell .nc-longtext-edit {
    flex-shrink: 0;
    opacity: 0.65;
    color: var(--kromeka-yellow);
}

.weekly-meeting-note-editor-surface {
    min-height: 14rem;
    max-height: 50vh;
    overflow-y: auto;
}

#weeklyMeetingNoteModal .modal-dialog.weekly-meeting-note-modal {
    max-width: min(96vw, 1280px);
    width: 96vw;
}

#weeklyMeetingNoteModal .modal-body {
    min-height: 28rem;
}

#weeklyMeetingNoteModal .weekly-meeting-note-editor-surface {
    min-height: 22rem;
    max-height: min(68vh, 40rem);
    font-size: 1.05rem;
    line-height: 1.45;
}

#weeklyMeetingNoteModal .modal-title {
    font-size: 1.15rem;
}

.weekly-meeting-note-editor-surface ul,
.weekly-meeting-note-editor-surface ol,
.weekly-meetings-table .weekly-meeting-note-display ul,
.weekly-meetings-table .weekly-meeting-note-display ol,
.weekly-meetings-mobile-note ul,
.weekly-meetings-mobile-note ol {
    margin: 0.25rem 0;
    padding-left: 1.25rem;
}

/* css/components/065-section.css */
/* ---- Excel-like grid layer (KromekaSheetNav) ---- */

/* Only Project Status is inline-editable; everything else is navigable and
   copyable, so the cursor must not promise an editor that does not exist. */
.weekly-meetings-table.kromeka-sheet-table td[data-sheet-cell] {
    cursor: cell;
}

.weekly-meetings-table.kromeka-sheet-table td[data-sheet-readonly="1"] {
    cursor: default;
}

.weekly-meetings-table.kromeka-sheet-table td.weekly-meeting-note-cell--editable {
    cursor: pointer;
}

/* Grid cells clip their content for ellipsis (kromeka-data-table). Two cases
   must escape that clip, or the UI looks broken: the refusal / failure bubble
   (otherwise the action seems to do nothing) and the open status dropdown.
   Selectors match the specificity of `.kromeka-data-table tbody td[data-col-key]`
   on purpose — a weaker selector silently loses to it. */
.weekly-meetings-table tbody td.kromeka-cell-message-host,
.weekly-meetings-table tbody td[data-col-key="status"] {
    overflow: visible;
}

.weekly-project-status-cell {
    min-width: 10.5rem;
}

.weekly-status-cell__inner {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

/* Phase colour without duplicating the palette: the dot takes its background
   from the shared `status-*` classes. It carries no text, so it adds a scanning
   cue on top of the select label rather than being a colour-only indicator. */
.weekly-status-dot {
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--kromeka-dark) 25%, transparent);
}

[data-theme="dark"] .weekly-status-dot {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--kromeka-light-grey) 35%, transparent);
}

.weekly-meetings-table select.weekly-status-select {
    width: 100%;
    min-width: 6.5rem;
    font-size: 0.75rem;
    padding-left: 0.4rem;
    padding-right: 1.5rem;
    background-position: right 0.35rem center;
    border-color: var(--border-color);
    cursor: pointer;
}

.weekly-meetings-table select.weekly-status-select:focus {
    border-color: var(--kromeka-yellow);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--kromeka-yellow) 45%, transparent);
}

.weekly-meeting-celebration {
    position: fixed;
    top: 5rem;
    left: 50%;
    z-index: 2060;
    transform: translateX(-50%);
    max-width: min(34rem, calc(100vw - 2rem));
    padding: 0.85rem 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-card);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.22);
    color: var(--text-main);
    font-weight: 600;
    text-align: center;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.weekly-meeting-celebration-hide {
    opacity: 0;
    transform: translateX(-50%) translateY(-0.75rem);
}

.weekly-meeting-confetti {
    position: fixed;
    inset: 0;
    z-index: 2050;
    overflow: hidden;
    pointer-events: none;
}

.weekly-meeting-confetti-piece {
    position: absolute;
    top: -1rem;
    width: 0.5rem;
    height: 0.85rem;
    border-radius: 0.15rem;
    animation-name: weeklyMeetingConfettiFall;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.weekly-meeting-confetti-red {
    background: var(--kromeka-red);
}

.weekly-meeting-confetti-yellow {
    background: var(--kromeka-yellow);
}

.weekly-meeting-confetti-dark {
    background: var(--kromeka-dark);
}

.weekly-meeting-confetti-grey {
    background: var(--kromeka-grey);
}

@keyframes weeklyMeetingConfettiFall {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate3d(0, 100vh, 0) rotate(540deg);
    }
}

/* css/components/066-list-filter-toolbar-reusable-nc-filter.css */
/* ------------------------------------------------------------
   List filter toolbar (reusable .nc-filter-*)
   Deliberate grid layout for quality nonconformities and similar list pages.
   Scoped to .kromeka-data-table-card .card-header so labels match dark header.
   ------------------------------------------------------------ */
.nc-filter-form {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    max-width: 100%;
}

.nc-filter-grid {
    display: grid;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-gutter: stable;
    padding-bottom: 0.65rem;
    grid-template-columns:
        minmax(190px, 1.35fr)
        repeat(3, minmax(180px, 1fr))
        minmax(130px, 0.75fr)
        repeat(2, minmax(150px, 0.85fr))
        minmax(90px, 0.45fr)
        auto;
    gap: 0.6rem;
    align-items: end;
}

/* Filter strip scroll bar sits below inputs; separate from reset/gear row */
.kromeka-data-table-card .card-header .nc-card-header-actions {
    margin-top: 0.25rem;
    padding-top: 0.6rem;
}

.nc-filter-field {
    min-width: 0;
}

.kromeka-data-table-card .card-header .nc-filter-field .form-label {
    display: flex;
    align-items: flex-end;
    min-height: 1.25rem;
    margin-bottom: 0.35rem;
    line-height: 1.1;
    text-transform: uppercase;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--toolbar-label-text);
}

.kromeka-data-table-card .card-header .nc-filter-field .form-control,
.kromeka-data-table-card .card-header .nc-filter-field .form-select {
    height: var(--toolbar-control-height);
    min-height: var(--toolbar-control-height);
    font-size: var(--toolbar-control-font-size);
    border-radius: var(--toolbar-control-radius);
    padding: 0.25rem 0.5rem;
    border-width: 1px;
    box-shadow: none;
}

.kromeka-data-table-card .card-header .nc-filter-field .form-select {
    padding-right: 2rem;
    background-size: 14px 10px;
}

.kromeka-data-table-card .card-header .nc-filter-field .flatpickr-alt-input.form-control {
    height: var(--toolbar-control-height);
    min-height: var(--toolbar-control-height);
    font-size: var(--toolbar-control-font-size);
    border-radius: var(--toolbar-control-radius);
}

.nc-filter-action {
    display: flex;
    align-items: flex-end;
}

.nc-filter-action .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    height: var(--toolbar-control-height);
    min-height: var(--toolbar-control-height);
    font-size: var(--toolbar-control-font-size);
    border-radius: var(--toolbar-control-radius);
    padding: 0.25rem 0.85rem;
    line-height: 1.2;
}

/* Nonconformity list: mobile filter collapse; at md+ panel must stay visible regardless of .show. */
@media (min-width: 768px) {
    #ncMobileFilters.collapse,
    #ncMobileFilters.collapsing,
    #ncMobileFilters.collapse.show {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }
}

@media (max-width: 1199.98px) {
    .nc-filter-grid {
        grid-template-columns: repeat(4, minmax(150px, 1fr));
    }
}

@media (max-width: 767.98px) {
    .nc-filter-grid {
        grid-template-columns: 1fr;
        overflow-x: visible;
        padding-bottom: 0;
    }

    .nc-filter-action .btn {
        width: 100%;
    }

    /* Summary KPI row: keep cards inset inside padded container (avoid row bleed to screen edge) */
    .nc-summary-strip {
        margin-left: 0;
        margin-right: 0;
    }

    .nc-summary-strip > .col {
        padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
        padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    }
}

/* Nonconformity list: row accents and status badges */
.nc-nc-row--overdue {
    box-shadow: inset 4px 0 0 var(--kromeka-red);
}

.nc-nc-row--returned {
    box-shadow: inset 4px 0 0 var(--kromeka-yellow);
}

.nc-nc-row--action-me {
    background-color: rgba(245, 181, 31, 0.12);
}

[data-theme="dark"] .nc-nc-row--action-me {
    background-color: rgba(245, 181, 31, 0.08);
}

.nc-status-badge {
    font-weight: 500;
}

.nc-status-badge--open,
.nc-status-badge--returned_for_revision {
    background-color: rgba(245, 181, 31, 0.25);
    color: var(--kromeka-dark);
}

[data-theme="dark"] .nc-status-badge--open,
[data-theme="dark"] .nc-status-badge--returned_for_revision {
    background-color: rgba(245, 181, 31, 0.2);
    color: var(--text-main);
}

.nc-status-badge--correction_ready {
    background-color: color-mix(in srgb, var(--kromeka-status-info) 18%, transparent);
    color: var(--kromeka-dark);
}

[data-theme="dark"] .nc-status-badge--correction_ready {
    background-color: color-mix(in srgb, var(--kromeka-status-info) 40%, transparent);
    color: var(--text-main);
}

.nc-status-badge--closed {
    background-color: color-mix(in srgb, var(--kromeka-success) 20%, transparent);
    color: var(--kromeka-dark);
}

[data-theme="dark"] .nc-status-badge--closed {
    background-color: color-mix(in srgb, var(--kromeka-success) 40%, transparent);
    color: var(--text-main);
}

.nc-status-badge--not_nonconformity,
.nc-status-badge--cancelled {
    background-color: var(--kromeka-light-grey);
    color: var(--kromeka-dark);
}

[data-theme="dark"] .nc-status-badge--not_nonconformity,
[data-theme="dark"] .nc-status-badge--cancelled {
    background-color: var(--kromeka-dark-grey);
    color: var(--text-main);
}

.nc-status-badge--muted {
    background-color: var(--kromeka-light-grey);
    color: var(--kromeka-dark);
}

[data-theme="dark"] .nc-status-badge--muted {
    background-color: var(--kromeka-dark-grey);
    color: var(--text-muted);
}

.nc-status-badge--challenge_pending {
    background-color: rgba(175, 22, 30, 0.15);
    color: var(--kromeka-dark);
}

[data-theme="dark"] .nc-status-badge--challenge_pending {
    background-color: rgba(175, 22, 30, 0.35);
    color: var(--text-main);
}

.nc-status-badge--rejected {
    background-color: rgba(175, 22, 30, 0.15);
    color: var(--kromeka-dark);
}

[data-theme="dark"] .nc-status-badge--rejected {
    background-color: rgba(175, 22, 30, 0.35);
    color: var(--text-main);
}

.nc-evidence-cell-inner {
    min-width: 0;
}

.nc-evidence-counts-link {
    color: var(--text-accent);
    text-decoration: underline;
    text-underline-offset: 0.12em;
    line-height: 1.25;
}

.nc-evidence-counts-line {
    white-space: nowrap;
}

.nc-return-feedback-pre {
    white-space: pre-wrap;
    color: var(--text-main);
}

.nc-event-timeline {
    margin: 0;
    padding: 0;
}

.nc-event-timeline__item {
    position: relative;
    display: flex;
    gap: 0.75rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--kromeka-grey);
}

[data-theme="dark"] .nc-event-timeline__item {
    border-color: var(--kromeka-dark-grey);
}

.nc-event-timeline__item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.nc-event-timeline__marker {
    flex-shrink: 0;
    width: 2rem;
    text-align: center;
    font-size: 1.15rem;
    color: var(--text-accent);
}

.nc-event-timeline__body {
    min-width: 0;
}

.nc-event-timeline__text {
    white-space: pre-wrap;
    color: var(--text-main);
}

/* Nonconformity list — readable long-text cells */
.nc-longtext-td {
    vertical-align: top;
}

.nonconformity-table td.nc-current-action-cell {
    white-space: normal;
    word-break: break-word;
    min-width: 0;
}

.nc-longtext-td__inner {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    min-height: 2.75rem;
}

.nc-longtext-td--editable:hover,
.nc-longtext-td--editable:focus-within {
    background-color: var(--kromeka-light-grey);
}

[data-theme="dark"] .nc-longtext-td--editable:hover,
[data-theme="dark"] .nc-longtext-td--editable:focus-within {
    background-color: rgba(255, 255, 255, 0.06);
}

.nc-line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    color: var(--text-main);
    flex: 1;
    min-width: 0;
    outline: none;
}

/* Nonconformity list long-text: wrap at column width and preserve newlines from the edit modal. */
.nc-longtext-td .nc-line-clamp {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Nonconformity list — narrative columns: cap visual width, clamp lines; full text via title / modal. */
.nonconformity-table td[data-col-key="description"].nc-longtext-td,
.nonconformity-table td[data-col-key="root_cause"].nc-longtext-td,
.nonconformity-table td[data-col-key="corrective_action"].nc-longtext-td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

.nonconformity-table td[data-col-key="description"].nc-longtext-td {
    max-width: 520px;
}

.nonconformity-table td[data-col-key="root_cause"].nc-longtext-td,
.nonconformity-table td[data-col-key="corrective_action"].nc-longtext-td {
    max-width: 420px;
}

.nonconformity-table td[data-col-key="description"].nc-longtext-td .nc-line-clamp,
.nonconformity-table td[data-col-key="root_cause"].nc-longtext-td .nc-line-clamp,
.nonconformity-table td[data-col-key="corrective_action"].nc-longtext-td .nc-line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.nonconformity-table td[data-col-key="root_cause"].nc-longtext-td .nc-line-clamp {
    white-space: pre-line;
}

.nc-longtext-edit {
    flex-shrink: 0;
    color: var(--text-accent);
    opacity: 0.55;
}

.nc-longtext-td--editable:hover .nc-longtext-edit,
.nc-longtext-td--editable:focus-within .nc-longtext-edit {
    opacity: 1;
}

.popover.nc-text-popover {
    max-width: min(36rem, 92vw);
}

.popover.nc-text-popover .popover-body {
    white-space: pre-wrap;
    max-height: 70vh;
    overflow: auto;
    color: var(--kromeka-dark);
}

[data-theme="dark"] .popover.nc-text-popover .popover-body {
    color: var(--text-main);
}

/* Nonconformity — correction form field hierarchy */
.nc-correction-root-note .form-label {
    color: var(--text-muted, var(--kromeka-grey));
    font-weight: 500;
}

.nc-correction-root-note-input {
    min-height: 64px;
    height: 72px;
    max-height: 120px;
    resize: vertical;
}

.nc-correction-corrective-action {
    margin-top: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color, rgba(135, 135, 135, 0.25));
}

.nc-correction-corrective-action .form-label {
    font-weight: 600;
}

.nc-correction-corrective-action-input {
    min-height: 130px;
    resize: vertical;
}

[data-theme="dark"] .nc-correction-corrective-action {
    border-top-color: var(--kromeka-dark-grey);
}

@media (max-width: 575.98px) {
    .nc-correction-root-note-input {
        max-height: 96px;
    }
}

/* Nonconformity — Root Causes three-panel manager */
.nc-root-cause-manager {
    display: grid;
    grid-template-columns: 1fr 1.75fr;
    gap: 0;
    border: 1px solid var(--kromeka-grey);
    background: var(--bg-card);
}

[data-theme="dark"] .nc-root-cause-manager {
    border-color: var(--kromeka-dark-grey);
}

.nc-rc-panel {
    min-height: 420px;
    border-right: 1px solid var(--kromeka-grey);
    display: flex;
    flex-direction: column;
}

[data-theme="dark"] .nc-rc-panel {
    border-right-color: var(--kromeka-dark-grey);
}

.nc-rc-panel:last-child {
    border-right: 0;
}

.nc-rc-panel__header {
    /* Match Processes / Root Causes headers that include a btn-sm */
    min-height: calc(var(--kromeka-btn-height-sm) + 1.3rem);
    padding: 0.65rem 0.75rem;
    font-weight: 600;
    border-bottom: 1px solid var(--kromeka-grey);
    color: var(--text-card-header);
    background: var(--bg-card-header);
    box-sizing: border-box;
}

[data-theme="dark"] .nc-rc-panel__header {
    border-bottom-color: var(--kromeka-dark-grey);
}

/* Light theme: readable outline actions on dark header strips (Root Causes manager) */
html:not([data-theme="dark"]) .nc-rc-panel__header .btn.btn-outline-secondary {
    color: var(--toolbar-label-text);
    border-color: rgba(255, 255, 255, 0.55);
    background-color: rgba(255, 255, 255, 0.08);
}

html:not([data-theme="dark"]) .nc-rc-panel__header .btn.btn-outline-secondary:hover,
html:not([data-theme="dark"]) .nc-rc-panel__header .btn.btn-outline-secondary:focus-visible {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.8);
}

.nc-rc-panel__body {
    flex: 1 1 auto;
    overflow-y: auto;
}

.nc-rc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--kromeka-grey) 35%, transparent);
    color: var(--text-main);
    text-decoration: none;
    line-height: 1.5;
    min-height: calc(0.55rem * 2 + 1.5em);
    box-sizing: border-box;
}

/* Department rows are text-only; Processes / Root Causes use global .btn-sm (34px min-height),
   which made those rows visibly taller. Compact icon actions to match text row height. */
.nc-root-cause-manager .nc-rc-row .btn.btn-sm {
    min-height: 1.5rem;
    width: 1.5rem;
    padding: 0;
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    line-height: 1;
    flex-shrink: 0;
}

.nc-root-cause-manager .nc-rc-row .btn.btn-sm .bi {
    font-size: 0.875rem;
    line-height: 1;
}

.nc-root-cause-manager .nc-rc-row form.d-inline {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.nc-rc-row.is-selected {
    border-left: 3px solid var(--kromeka-yellow);
    padding-left: calc(0.75rem - 3px);
    background: color-mix(in srgb, var(--kromeka-yellow) 12%, transparent);
}

.nc-rc-row.is-inactive {
    opacity: 0.55;
}

.nc-rc-row.is-inactive .flex-grow-1,
.nc-rc-row.is-inactive > a {
    text-decoration: line-through;
}

@media (max-width: 991.98px) {
    .nc-root-cause-manager {
        grid-template-columns: 1fr;
    }

    .nc-rc-panel {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--kromeka-grey);
    }

    .nc-rc-panel:last-child {
        border-bottom: 0;
    }
}

/* Nonconformity correction — evidence gallery */
.nc-evidence-gallery-card {
    border-color: var(--kromeka-grey);
}

[data-theme="dark"] .nc-evidence-gallery-card {
    border-color: var(--kromeka-dark-grey);
    background-color: var(--bg-card);
}

.nc-evidence-gallery-icon-wrap {
    color: var(--kromeka-dark-grey);
}

[data-theme="dark"] .nc-evidence-gallery-icon-wrap {
    color: var(--text-muted);
}

.nc-evidence-gallery-anchor {
    border-radius: 0.25rem;
    overflow: hidden;
    background-color: var(--kromeka-light-grey);
}

[data-theme="dark"] .nc-evidence-gallery-anchor {
    background-color: var(--kromeka-dark-grey);
}

a.nc-evidence-gallery-anchor {
    display: block;
    color: inherit;
    text-decoration: none;
}

a.nc-evidence-gallery-anchor:hover {
    color: inherit;
}

a.nc-evidence-gallery-anchor:focus-visible {
    outline: 0.15rem solid var(--kromeka-yellow);
    outline-offset: 0.12rem;
}

img.nc-evidence-thumb {
    display: block;
    width: 100%;
    max-height: 14rem;
    object-fit: contain;
    object-position: center;
}

/* Flex-column card bodies blockify flex items (inline-flex → block), which drops
   btn text centering. Force flex on the Drive action so label stays centered. */
.nc-evidence-gallery-card .card-body > a.btn.btn-outline-secondary {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--kromeka-btn-height-sm);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    flex-shrink: 0;
}

.nc-evidence-gallery-card .card-body > a.btn.btn-outline-secondary:hover,
.nc-evidence-gallery-card .card-body > a.btn.btn-outline-secondary:focus,
.nc-evidence-gallery-card .card-body > a.btn.btn-outline-secondary:focus-visible {
    text-decoration: none;
}

@media (max-width: 575.98px) {
    .nc-evidence-gallery-card .card-body > a.btn.btn-outline-secondary {
        min-height: 2.75rem;
    }
}

/* CPQ — Product Definition offer behavior help panel */
.cpq-offer-behavior-field #pd-offer-behavior-help-panel .card {
    background: var(--bg-card);
    color: var(--text-main);
}

.cpq-offer-behavior-field #pd-offer-behavior-help-panel .border-bottom {
    border-color: var(--border-color, rgba(0, 0, 0, 0.12)) !important;
}

/* CPQ — Product Definition edit (semantic cards, tooltip help triggers) */
.cpq-product-definition-edit .btn-cpq-pd-help {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--kromeka-dark-grey);
    line-height: 1;
    vertical-align: middle;
}

[data-theme="dark"] .cpq-product-definition-edit .btn-cpq-pd-help {
    color: var(--text-muted);
}

.cpq-product-definition-edit .btn-cpq-pd-help:hover,
.cpq-product-definition-edit .btn-cpq-pd-help:focus-visible {
    color: var(--text-accent);
}

.cpq-product-definition-edit .input-group > .input-group-text {
    min-width: 3.25rem;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

/* CPQ — Product Definition quick create (identity + English name only) */
.cpq-pd-create-page {
    max-width: 44rem;
}

.cpq-pd-create-card .card-header {
    background-color: var(--bg-card-header);
    color: var(--text-card-header);
}

.cpq-pd-create-form .cpq-offer-behavior-field {
    max-width: 100%;
}

/* CPQ — Product definition documentation tab */
.cpq-definition-main-preview-wrap {
    max-height: 14rem;
}

.cpq-definition-main-preview {
    max-height: 14rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.cpq-definition-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: 0.75rem;
}

.cpq-definition-media-tile {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5rem;
}

.cpq-definition-media-tile__preview-link {
    display: block;
    min-width: 0;
}

.cpq-definition-media-tile__preview,
.cpq-definition-media-tile__placeholder {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 4px;
    background: var(--bg-body);
}

.cpq-definition-media-tile__preview {
    display: block;
    object-fit: cover;
}

.cpq-definition-media-tile__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 2rem;
}

.cpq-definition-media-tile__name,
.cpq-definition-media-tile__title {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cpq-definition-media-tile__name {
    color: var(--text-main);
}

.cpq-definition-media-tile__title {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.cpq-definition-media-tile__meta:empty {
    display: none;
}

.cpq-definition-media-tile .cpq-definition-media-tile__actions {
    margin-top: auto;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.cpq-definition-media-tile--add {
    border-style: dashed;
}

.cpq-definition-media-add-form {
    margin: 0;
}

.cpq-definition-media-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    aspect-ratio: 1;
    margin: 0;
    border-radius: 4px;
    background: var(--bg-body);
    color: var(--text-muted);
    text-align: center;
    cursor: pointer;
}

.cpq-definition-media-add:hover,
.cpq-definition-media-add:focus-within {
    color: var(--text-main);
}

.cpq-definition-media-tile--add > .btn {
    width: 100%;
    margin-top: auto;
}

.cpq-definition-docs-actions-col {
    min-width: 8.5rem;
}

.cpq-definition-docs-matrix th:first-child,
.cpq-definition-docs-matrix td:first-child {
    min-width: 10.5rem;
}

.cpq-definition-docs-matrix th:not(:first-child),
.cpq-definition-docs-matrix td:not(:first-child) {
    min-width: 6.5rem;
}

.cpq-definition-docs-advanced summary {
    cursor: pointer;
}

.cpq-definition-header-thumb-wrap {
    flex: 0 0 auto;
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.25rem;
    overflow: hidden;
    background: var(--bg-card-header);
}

.cpq-definition-header-thumb {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    display: block;
}

.cpq-definition-main-badge {
    vertical-align: middle;
}

.cpq-definition-link-chip {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.cpq-definition-link-list {
    max-height: 18rem;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cpq-definition-link-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.875rem;
}

.cpq-definition-link-row--file {
    padding-left: 1.5rem;
}

.cpq-definition-link-status {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.cpq-definition-link-status--replace {
    color: var(--bs-danger, #b02a37);
}

/* CPQ — Product Definition tab navigation (responsive: one row / two rows / menu) */
.cpq-definition-import-file {
    max-width: 22rem;
    width: 100%;
}

.cpq-definition-tabs-wrap {
    container-type: inline-size;
    container-name: cpq-def-tabs;
    border-bottom: 2px solid var(--border-color);
}

.cpq-definition-tabs-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem;
}

.cpq-definition-tabs {
    flex: 1 1 auto;
    flex-wrap: wrap;
    border-bottom: none;
    margin-bottom: 0;
    min-width: 0;
}

.cpq-definition-tabs .nav-item {
    flex-shrink: 0;
}

/* Force second row before Legacy / Documents / Presets / Usage (hidden on wide layouts). */
.cpq-definition-tabs-break {
    flex-basis: 100%;
    width: 100%;
    height: 0;
    padding: 0;
    margin: 0;
    border: none;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    list-style: none;
}

.cpq-definition-tabs-menu {
    display: none;
    flex-shrink: 0;
    align-self: center;
    margin-bottom: 0.35rem;
}

.cpq-definition-tabs-menu-btn {
    max-width: min(100%, 14rem);
}

.cpq-definition-tabs-menu-current {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.cpq-definition-tabs-menu-list .dropdown-item.active {
    font-weight: 600;
}

/* Wide: all tabs on one row. */
@container cpq-def-tabs (min-width: 1200px) {
    .cpq-definition-tabs {
        flex-wrap: nowrap;
    }

    .cpq-definition-tabs-break {
        display: none;
    }
}

/* Medium: primary row + secondary row. */
@container cpq-def-tabs (min-width: 576px) and (max-width: 1199px) {
    .cpq-definition-tabs-break {
        display: list-item;
    }
}

/* Narrow: section menu only. */
@container cpq-def-tabs (max-width: 575px) {
    .cpq-definition-tabs {
        display: none;
    }

    .cpq-definition-tabs-menu {
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .cpq-definition-tabs-menu-btn {
        width: 100%;
        max-width: none;
        justify-content: space-between;
    }
}

.cpq-legacy-subnav {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.cpq-allowed-components-builder .card.cpq-allowed-available-panel {
    border-color: var(--border-color);
}

.cpq-allowed-components-builder .card.cpq-allowed-selected-panel .card-header {
    background: var(--bg-card-header);
}

.cpq-workspace-intro {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    color: var(--text-main);
}

.cpq-workspace-advanced summary {
    cursor: pointer;
    color: var(--text-main);
}

.cpq-workspace-tab-help {
    border: 0 !important;
    text-decoration: none !important;
    min-width: 2.25rem;
}

.cpq-workspace-tab-help:focus-visible {
    outline: 2px solid var(--kromeka-yellow);
    outline-offset: 2px;
}

/* CPQ — workspace rule panels: predictable vertical stack (avoid legacy list/radio overlap) */
.cpq-workspace-rule-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cpq-workspace-rule-stack .row {
    margin-bottom: 0;
}

.cpq-workspace-rule-stack ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.cpq-workspace-rule-stack ul li {
    display: block;
    margin-bottom: 0.5rem;
}

.cpq-workspace-rule-stack ul li:last-child {
    margin-bottom: 0;
}

/* CPQ Configuration Builder — parameter tree + detail panel */
.cpq-config-builder-always-item {
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
}

.cpq-config-builder-always-link {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--text-main);
    font-weight: 600;
}

.cpq-config-builder-always-link:hover {
    background: var(--kromeka-light-grey);
    color: var(--kromeka-dark);
}

.cpq-config-builder-always-link.active {
    background: var(--kromeka-light-grey);
    border-left: 3px solid var(--kromeka-yellow);
    padding-left: calc(1rem - 3px);
}

[data-theme="dark"] .cpq-config-builder-always-link:hover,
[data-theme="dark"] .cpq-config-builder-always-link.active {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-main);
}

.cpq-config-builder-tree-card .card-body {
    max-height: min(70vh, 720px);
    overflow-y: auto;
}

.cpq-config-builder-param-group {
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
}

.cpq-config-builder-param-group:last-child {
    border-bottom: 0;
}

.cpq-config-builder-param-summary {
    list-style: none;
    cursor: pointer;
    padding: 0.65rem 1rem;
    margin: 0;
}

.cpq-config-builder-param-summary::-webkit-details-marker {
    display: none;
}

.cpq-config-builder-param-link {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-decoration: none;
    color: var(--text-main);
}

.cpq-config-builder-param-link:hover {
    color: var(--text-accent);
}

.cpq-config-builder-param-link.active {
    font-weight: 600;
}

.cpq-config-builder-param-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.cpq-config-builder-value-link {
    display: block;
    padding: 0.45rem 1rem 0.45rem 1.75rem;
    text-decoration: none;
    color: var(--text-main);
    border-left: 3px solid transparent;
}

.cpq-config-builder-value-link:hover {
    background: var(--kromeka-light-grey);
    color: var(--kromeka-dark);
}

.cpq-config-builder-value-link.active {
    border-left-color: var(--kromeka-red);
    background: var(--kromeka-light-grey);
    font-weight: 600;
}

[data-theme="dark"] .cpq-config-builder-value-link:hover,
[data-theme="dark"] .cpq-config-builder-value-link.active {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-main);
}

.cpq-config-builder-panel-card {
    min-height: 320px;
}

@media (max-width: 991.98px) {
    .cpq-config-builder-tree-card .card-body {
        max-height: none;
    }
}

/* CPQ definition — parameter row: stacked Edit / Deactivate share one column width */
/* Form labels with optional info popover (long help off the layout grid) */
.kromeka-field-label-with-help {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

label.form-label.kromeka-field-label-with-help,
label.form-check-label.kromeka-field-label-with-help {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.kromeka-per-page-select {
    width: auto;
}

.kromeka-page-number-input {
    width: 5rem;
}

.kromeka-field-help-btn {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    padding: 0;
    line-height: 1;
    font-size: 1rem;
}

.kromeka-field-help-btn:hover,
.kromeka-field-help-btn:focus-visible {
    color: var(--kromeka-yellow);
}

.kromeka-parameter-template-picker {
    vertical-align: middle;
}

.kromeka-parameter-template-picker-btn {
    margin-inline-start: 0.15rem;
}

.kromeka-parameter-template-picker-menu {
    min-width: min(22rem, calc(100vw - 2rem));
    max-width: min(26rem, calc(100vw - 2rem));
    max-height: min(32rem, 75vh);
    overflow: auto;
    padding-top: 0;
}

.kromeka-parameter-template-picker-heading {
    border-bottom: 1px solid var(--border-color);
    white-space: normal;
}

.kromeka-parameter-template-picker-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    white-space: normal;
}

.kromeka-parameter-template-picker-label {
    flex: 1 1 auto;
    min-width: 0;
}

.kromeka-parameter-template-picker-key,
.kromeka-parameter-template-picker [data-if-preview] {
    flex: 0 0 auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

[data-theme="dark"] .kromeka-parameter-template-picker-menu {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .kromeka-parameter-template-picker-item:hover,
[data-theme="dark"] .kromeka-parameter-template-picker-item:focus {
    background-color: rgba(245, 181, 31, 0.12);
    color: var(--text-main);
}

.kromeka-parameter-template-picker-branch-list {
    margin-top: 0.35rem;
    max-height: 10rem;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: var(--bg-card);
    color: var(--text-main);
}

.kromeka-parameter-template-picker-branch-list .kromeka-parameter-template-picker-item {
    padding: 0.4rem 0.75rem;
    color: var(--text-main);
}

.kromeka-plaintext-format-toolbar {
    align-items: center;
}

.kromeka-offer-text-actions {
    align-items: center;
}

.kromeka-offer-text-template-select {
    width: auto;
    min-width: 10rem;
}

.kromeka-offer-text-save-bar {
    min-height: 2rem;
}

.kromeka-offer-text-save-status {
    color: var(--text-muted);
}

.kromeka-offer-text-save-status[data-state="unsaved"] {
    color: var(--text-main);
    font-weight: 600;
}

.kromeka-offer-text-save-status[data-state="saving"] {
    color: var(--text-main);
}

.kromeka-offer-text-save-status[data-state="saved"] {
    color: var(--text-muted);
}

.kromeka-offer-text-save-status[data-state="error"] {
    color: var(--text-danger);
    font-weight: 600;
}

.kromeka-offer-payment-sets #cpq-payment-set-select {
    min-width: 14rem;
}

.kromeka-parameter-template-picker-btn-toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 31px;
    min-height: 31px;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--bs-border-radius-sm);
    background-color: var(--bg-card);
    color: var(--text-main);
}

.kromeka-parameter-template-picker-btn-toolbar:hover,
.kromeka-parameter-template-picker-btn-toolbar:focus-visible {
    color: var(--kromeka-dark);
    background-color: var(--kromeka-yellow);
    border-color: var(--kromeka-yellow);
}

[data-theme="dark"] .kromeka-parameter-template-picker-btn-toolbar {
    color: var(--text-main);
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .kromeka-parameter-template-picker-btn-toolbar:hover,
[data-theme="dark"] .kromeka-parameter-template-picker-btn-toolbar:focus-visible {
    color: var(--kromeka-dark);
    background-color: var(--kromeka-yellow);
    border-color: var(--kromeka-yellow);
}

.popover.kromeka-field-help-popover {
    max-width: min(22rem, calc(100vw - 2rem));
    z-index: 1090;
}

.popover.kromeka-field-help-popover .popover-header {
    font-weight: 600;
}

.popover.kromeka-field-help-popover .popover-body {
    white-space: pre-line;
    color: var(--text-main);
}

[data-theme="dark"] .popover.kromeka-field-help-popover {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .popover.kromeka-field-help-popover .popover-header {
    background-color: var(--bg-card-header);
    color: var(--text-card-header);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .popover.kromeka-field-help-popover .popover-body {
    color: var(--text-main);
}

#component-pricing-section .form-label {
    margin-bottom: 0.25rem;
}

/* css/screens/067-list-page-overview-panels-projects-cpq-offers.css */
/* ------------------------------------------------------------
   List page overview panels (Projects, CPQ Offers)
   ------------------------------------------------------------ */
.kromeka-list-overview .card-body {
    max-height: 28rem;
    overflow-y: auto;
}

.kromeka-list-overview--collapsed .kromeka-list-overview__toggle-label-expanded,
.kromeka-list-overview:not(.kromeka-list-overview--collapsed) .kromeka-list-overview__toggle-label-collapsed {
    display: none;
}

.kromeka-overview-kpi {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    padding: 0.65rem 0.75rem;
    height: 100%;
}

a.kromeka-overview-kpi--link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.kromeka-overview-kpi--link:hover,
a.kromeka-overview-kpi--link:focus-visible {
    border-color: var(--kromeka-yellow);
    box-shadow: 0 0 0 1px var(--kromeka-yellow);
    color: inherit;
}

a.kromeka-overview-kpi--link:focus-visible {
    outline: 2px solid var(--kromeka-yellow);
    outline-offset: 2px;
}

.kromeka-overview-kpi--emphasis {
    border-color: var(--kromeka-red);
}

a.kromeka-overview-kpi--link.kromeka-overview-kpi--active {
    border-color: var(--kromeka-yellow);
    box-shadow: 0 0 0 2px var(--kromeka-yellow);
}

.kromeka-overview-kpi__value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
}

.kromeka-overview-chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    padding: 0.75rem;
    height: 100%;
}

.kromeka-overview-bars__row + .kromeka-overview-bars__row {
    margin-top: 0.55rem;
}

.kromeka-overview-bars__link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease;
}

.kromeka-overview-bars__row--linkable .kromeka-overview-bars__link:hover,
.kromeka-overview-bars__row--linkable .kromeka-overview-bars__link:focus-visible {
    background: color-mix(in srgb, var(--kromeka-yellow) 12%, transparent);
    color: inherit;
}

.kromeka-overview-bars__row--linkable .kromeka-overview-bars__link:focus-visible {
    outline: 2px solid var(--kromeka-yellow);
    outline-offset: 2px;
}

/* Tab + thin bar on one baseline; count aligned right */
.kromeka-overview-bars__line {
    display: flex;
    align-items: flex-end;
    gap: 0.65rem;
}

/* Fixed label column: longest project status (MANUFACTURING) at sm badge size */
.kromeka-overview-bars__segment {
    display: grid;
    grid-template-columns: 10.5rem minmax(2.5rem, 1fr);
    align-items: flex-end;
    flex: 1 1 auto;
    min-width: 0;
    column-gap: 0;
}

.kromeka-overview-bars__label {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
}

.kromeka-overview-bars__count {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    padding-bottom: 0.05rem;
}

/* Flag tab: full-width label column, left-aligned text; bars start on shared line */
.kromeka-overview-bars__tab {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0.28rem 0.55rem 0.22rem 0.5rem;
    border-radius: 0.5rem 0.5rem 0 0;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.kromeka-overview-bars__tab.status-badge {
    border-radius: 0.5rem 0.5rem 0 0;
}

.kromeka-overview-bars__tab--plain {
    background-color: var(--kromeka-dark-grey);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
}

[data-theme="dark"] .kromeka-overview-bars__tab--plain {
    background-color: var(--kromeka-grey);
    color: var(--kromeka-dark);
}

.kromeka-overview-bar-track {
    flex: 1 1 auto;
    height: 0.32rem;
    margin-bottom: 0.12rem;
    background: var(--kromeka-light-grey);
    border-radius: 50rem;
    overflow: hidden;
    min-width: 2.5rem;
}

[data-theme="dark"] .kromeka-overview-bar-track {
    background: rgba(255, 255, 255, 0.12);
}

.kromeka-overview-bar-fill {
    height: 100%;
    min-width: 0;
    border-radius: 0 50rem 50rem 0;
    background: var(--kromeka-grey);
}

.kromeka-overview-bar-fill--visible {
    min-width: 0.35rem;
}

.kromeka-overview-bar-fill.kromeka-overview-bar-neutral,
.kromeka-overview-bar-neutral {
    background: var(--kromeka-dark-grey);
}

.kromeka-overview-bar-fill.status-planning,
.kromeka-overview-bar-fill.status-engineering,
.kromeka-overview-bar-fill.status-manufacturing,
.kromeka-overview-bar-fill.status-installation,
.kromeka-overview-bar-fill.status-startup,
.kromeka-overview-bar-fill.status-revisions,
.kromeka-overview-bar-fill.status-finish,
.kromeka-overview-bar-fill.status-on_hold,
.kromeka-overview-bar-fill.status-draft,
.kromeka-overview-bar-fill.status-sent,
.kromeka-overview-bar-fill.status-accepted,
.kromeka-overview-bar-fill.status-rejected,
.kromeka-overview-bar-fill.status-cancelled {
    /* Reuse status badge background colors on bar fills */
}

.kromeka-overview-bar-fill.status-planning { background-color: var(--kromeka-status-neutral); }
.kromeka-overview-bar-fill.status-engineering { background-color: var(--kromeka-status-info); }
.kromeka-overview-bar-fill.status-manufacturing { background-color: var(--kromeka-status-progress); }
.kromeka-overview-bar-fill.status-installation { background-color: var(--kromeka-status-installation); }
.kromeka-overview-bar-fill.status-startup { background-color: var(--kromeka-status-startup); }
.kromeka-overview-bar-fill.status-revisions { background-color: var(--kromeka-status-revision-bg); }
.kromeka-overview-bar-fill.status-finish { background-color: var(--kromeka-success); }
.kromeka-overview-bar-fill.status-on_hold { background-color: var(--kromeka-status-danger); }
.kromeka-overview-bar-fill.status-draft { background-color: var(--kromeka-status-neutral); }
.kromeka-overview-bar-fill.status-sent { background-color: var(--kromeka-status-info); }
.kromeka-overview-bar-fill.status-accepted { background-color: var(--kromeka-success); }
.kromeka-overview-bar-fill.status-rejected { background-color: var(--kromeka-status-danger); }
.kromeka-overview-bar-fill.status-cancelled { background-color: var(--kromeka-status-muted); }

@media (max-width: 575.98px) {
    .kromeka-list-overview .card-body {
        max-height: none;
    }
}

/* Nonconformity — department performance dashboard (closed tab) */
.nc-dept-dashboard__table th,
.nc-dept-dashboard__table td {
    vertical-align: middle;
}

.nc-dept-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    background: var(--bg-card);
    white-space: nowrap;
}

.nc-dept-badge--good {
    border-color: var(--kromeka-success);
    color: var(--kromeka-success);
}

.nc-dept-badge--warning {
    border-color: var(--kromeka-yellow);
    color: var(--kromeka-dark);
}

[data-theme="dark"] .nc-dept-badge--warning {
    color: var(--kromeka-yellow);
}

.nc-dept-badge--bad {
    border-color: var(--kromeka-red);
    color: var(--text-danger);
}

.nc-dept-heat {
    font-variant-numeric: tabular-nums;
}

.nc-dept-heat--0 {
    color: var(--text-muted);
}

.nc-dept-heat--1 {
    background: color-mix(in srgb, var(--kromeka-light-grey) 55%, transparent);
}

.nc-dept-heat--2 {
    background: color-mix(in srgb, var(--kromeka-yellow) 35%, var(--bg-card));
}

.nc-dept-heat--3 {
    background: color-mix(in srgb, var(--kromeka-red) 22%, var(--bg-card));
    font-weight: 600;
}

[data-theme="dark"] .nc-dept-heat--1 {
    background: color-mix(in srgb, var(--kromeka-dark-grey) 45%, transparent);
}

[data-theme="dark"] .nc-dept-heat--2 {
    background: color-mix(in srgb, var(--kromeka-yellow) 28%, var(--bg-card));
}

[data-theme="dark"] .nc-dept-heat--3 {
    background: color-mix(in srgb, var(--kromeka-red) 30%, var(--bg-card));
}

/* Customer official logo previews */
.customer-logo-preview {
    display: block;
    max-width: 160px;
    max-height: 72px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.customer-logo-preview--header {
    margin-left: auto;
    margin-right: 0;
}

.customer-logo-preview--empty {
    width: 160px;
    height: 72px;
    border: 1px dashed var(--border-color);
    border-radius: 0.375rem;
    background: var(--bg-card);
}

.customer-logo-header {
    max-width: 100%;
}

@media (max-width: 767.98px) {
    .customer-logo-preview,
    .customer-logo-preview--empty {
        max-width: 120px;
        max-height: 56px;
        width: 120px;
        height: 56px;
    }

    .customer-logo-preview--header {
        margin-left: 0;
    }
}

/* CPQ component picker panel */
.cpq-component-picker-panel .cpq-picker-available {
    max-height: 20rem;
    overflow-y: auto;
}

.cpq-component-picker-panel .cpq-picker-staging {
    min-height: 8rem;
}

.cpq-component-picker-panel .cpq-picker-lib-group summary,
.cpq-component-picker-panel .cpq-picker-sub-group summary {
    cursor: pointer;
}

.cpq-component-picker-panel .cpq-picker-tree .btn-link {
    font-size: 0.8125rem;
}

/* Compact static columns and inputs on CPQ offer screens. */
.cpq-offer-contact-col-primary {
    width: 60px;
}

.cpq-offer-contact-col-remove {
    width: 50px;
}

.cpq-offer-item-work-order-input {
    max-width: 180px;
}

.cpq-workbench-order-input {
    max-width: 6rem;
}

/* css/screens/068-general-planning-v2-company-overview.css */
/* ============================================================
   General Planning V2 — company overview
   ============================================================ */
.planning-v2-summary-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 0.375rem;
    background: var(--bg-card, #fff);
    color: var(--text-main, #1d1d1b);
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.planning-v2-summary-card:hover,
.planning-v2-summary-card:focus {
    border-color: var(--kromeka-yellow);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--kromeka-yellow) 35%, transparent);
}

.planning-v2-summary-card--active,
.planning-v2-summary-card--active:hover,
.planning-v2-summary-card--active:focus {
    border-color: var(--kromeka-yellow);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--kromeka-yellow) 45%, transparent);
}

.planning-v2-summary-card__label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted, #575756);
}

.planning-v2-summary-card__value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-accent);
}

.planning-v2-tabs .nav-link.active {
    font-weight: 600;
}

.planning-v2-portfolio-list {
    overflow: visible;
    min-width: 0;
}

.planning-v2-root {
    --planning-v2-label-w: 220px;
}

.planning-v2-portfolio-board {
    --planning-v2-header-h: 2.75rem;
    --planning-v2-row-h: 3rem;
    --planning-v2-child-row-h: 1.75rem;
    --planning-v2-label-w: 220px;
    max-height: max(18rem, calc(100dvh - 21.25rem));
    overflow-x: auto;
    overflow-y: auto;
    scrollbar-width: auto;
    min-width: 0;
}

.planning-v2-portfolio-board__inner {
    min-width: 100%;
}

.planning-v2-portfolio-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: var(--planning-v2-row-h);
    min-height: var(--planning-v2-row-h);
    max-height: var(--planning-v2-row-h);
    box-sizing: border-box;
    border-bottom: 1px solid var(--border-color, #dee2e6);
}

.planning-v2-portfolio-row--header {
    height: var(--planning-v2-header-h);
    min-height: var(--planning-v2-header-h);
    max-height: var(--planning-v2-header-h);
    position: sticky;
    top: 0;
    z-index: 8;
    background: var(--kromeka-data-table-thead-bg, #575756);
    box-shadow: 0 2px 0 color-mix(in srgb, var(--kromeka-yellow) 65%, transparent);
}

.planning-v2-portfolio-row--child {
    height: var(--planning-v2-child-row-h);
    min-height: var(--planning-v2-child-row-h);
    max-height: var(--planning-v2-child-row-h);
}

.planning-v2-portfolio-board__label-cell {
    flex: 0 0 var(--planning-v2-label-w);
    width: var(--planning-v2-label-w);
    min-width: var(--planning-v2-label-w);
    max-width: var(--planning-v2-label-w);
    position: sticky;
    left: 0;
    z-index: 6;
    background: var(--bg-card, #fff);
    border-right: 1px solid var(--border-color, #dee2e6);
    box-shadow: 2px 0 4px color-mix(in srgb, var(--kromeka-dark) 8%, transparent);
    box-sizing: border-box;
}

.planning-v2-portfolio-row--header .planning-v2-portfolio-board__label-cell {
    z-index: 12;
    background: var(--kromeka-data-table-thead-bg, #575756);
    box-shadow: 2px 0 4px color-mix(in srgb, var(--kromeka-dark) 18%, transparent);
}

.planning-v2-portfolio-row--header .planning-v2-portfolio-board__track-cell {
    z-index: 5;
    background: var(--kromeka-data-table-thead-bg, #575756);
}

.planning-v2-portfolio-row--child .planning-v2-portfolio-board__label-cell {
    background: color-mix(in srgb, var(--bg-card, #fff) 92%, var(--kromeka-light-grey));
}

[data-theme="dark"] .planning-v2-portfolio-row--child .planning-v2-portfolio-board__label-cell {
    background: color-mix(in srgb, var(--bg-card, #2c2c2a) 94%, var(--kromeka-dark));
}

.planning-v2-portfolio-board__track-cell {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    overflow: hidden;
    z-index: 0;
    isolation: isolate;
}

.planning-v2-portfolio-row--child .planning-v2-portfolio-board__track-cell {
    background: color-mix(in srgb, var(--bg-card, #fff) 92%, var(--kromeka-light-grey));
}

[data-theme="dark"] .planning-v2-portfolio-row--child .planning-v2-portfolio-board__track-cell {
    background: color-mix(in srgb, var(--bg-card, #2c2c2a) 94%, var(--kromeka-dark));
}

.planning-v2-portfolio-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.45rem;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
}

.planning-v2-portfolio-label:hover {
    background: var(--hover-bg, #f8f9fa);
}

.planning-v2-portfolio-label--header {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    cursor: default;
    background: var(--kromeka-data-table-thead-bg, #575756);
    color: var(--kromeka-data-table-thead-text, #fff);
    border-bottom: 2px solid var(--kromeka-yellow);
}

.planning-v2-portfolio-label--header:hover {
    background: var(--kromeka-data-table-thead-bg, #575756);
}

.planning-v2-portfolio-label__text {
    flex: 1 1 auto;
    min-width: 0;
}

.planning-v2-portfolio-label__line1 {
    font-size: 0.74rem;
    line-height: 1.25;
    font-weight: 600;
    color: var(--text-main);
}

.planning-v2-portfolio-label__line2 {
    font-size: 0.68rem;
    line-height: 1.2;
    color: var(--text-muted);
}

.planning-v2-portfolio-expand-btn {
    width: 22px;
    height: 22px;
    min-width: 22px;
    padding: 0;
    flex-shrink: 0;
}

.planning-v2-portfolio-label--child {
    padding-left: 1.35rem;
    cursor: default;
}

.planning-v2-portfolio-label--child:hover {
    background: transparent;
}

.planning-v2-dept-swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--kromeka-dark) 25%, transparent);
}

.planning-v2-portfolio-label__dept-name {
    font-size: 0.68rem;
    line-height: 1.2;
    color: var(--text-main);
    min-width: 0;
}

.planning-v2-timeline__empty {
    position: absolute;
    left: 0.35rem;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.65rem;
    color: var(--text-muted);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.planning-v2-timeline__marker--prod {
    background: var(--kromeka-yellow);
    border-color: var(--kromeka-dark);
}

.planning-v2-week-header-row {
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    background: var(--kromeka-data-table-thead-bg, #575756);
    border-bottom: 2px solid var(--kromeka-yellow);
}

.planning-v2-week-header {
    display: flex;
    flex-direction: row;
    position: relative;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 27px,
        color-mix(in srgb, var(--kromeka-data-table-thead-text, #fff) 18%, transparent) 27px,
        color-mix(in srgb, var(--kromeka-data-table-thead-text, #fff) 18%, transparent) 28px
    );
}

.planning-v2-week-cell {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    color: var(--kromeka-data-table-thead-text, #fff);
    border-right: 1px solid color-mix(in srgb, var(--kromeka-data-table-thead-text, #fff) 12%, transparent);
    box-sizing: border-box;
}

.planning-v2-week-cell__num {
    font-size: 0.72rem;
    font-weight: 700;
}

.planning-v2-week-cell__date {
    font-size: 0.62rem;
    opacity: 0.85;
}


.planning-v2-risk-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.35rem;
    border-radius: 0.2rem;
    white-space: nowrap;
}

.planning-v2-risk-badge--late {
    background: var(--kromeka-red);
    color: #fff;
}

.planning-v2-risk-badge--at_risk {
    background: color-mix(in srgb, var(--kromeka-red) 75%, #000);
    color: #fff;
}

.planning-v2-risk-badge--watch {
    background: var(--kromeka-yellow);
    color: var(--kromeka-dark);
}

.planning-v2-risk-badge--healthy {
    background: #198754;
    color: #fff;
}

.planning-v2-risk-badge--missing_data {
    background: var(--kromeka-grey);
    color: #fff;
}

.planning-v2-timeline {
    position: relative;
    height: 100%;
    min-width: 0;
    min-height: 0;
    background-color: color-mix(in srgb, var(--bg-card-header, #575756) 10%, transparent);
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 27px,
        var(--border-color, #dee2e6) 27px,
        var(--border-color, #dee2e6) 28px
    );
    overflow: hidden;
}

.planning-v2-timeline__segment {
    position: absolute;
    top: 4px;
    height: calc(100% - 8px);
    border-radius: 2px;
    min-width: 3px;
}

.planning-v2-timeline__segment--striped {
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        color-mix(in srgb, currentColor 25%, transparent) 4px,
        color-mix(in srgb, currentColor 25%, transparent) 8px
    );
    border: 1px solid currentColor;
}

.planning-v2-timeline__segment--risk {
    box-shadow: inset 0 0 0 2px var(--kromeka-red);
}

.planning-v2-timeline__marker {
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: var(--kromeka-yellow);
    border: 1px solid var(--kromeka-dark);
    z-index: 2;
}

.planning-v2-timeline__marker--deadline {
    width: 12px;
    height: 12px;
    background: var(--kromeka-red);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--kromeka-red-dark);
    z-index: 4;
}

[data-theme="dark"] .planning-v2-timeline__marker--deadline {
    border-color: #fff;
}

.planning-v2-timeline__today {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--kromeka-red);
    z-index: 3;
    pointer-events: none;
}

.planning-v2-timeline__today--header {
    top: 0;
    height: 100%;
}

.planning-v2-heatmap-wrap {
    max-height: max(18rem, calc(100dvh - 22.5rem));
    overflow: auto;
}

.planning-v2-heatmap thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--kromeka-data-table-thead-bg, #575756);
    color: var(--kromeka-data-table-thead-text, #fff);
}

.planning-v2-heatmap tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg-card, #fff);
    color: var(--text-main);
}

.planning-v2-heatmap th,
.planning-v2-heatmap td {
    font-size: 0.75rem;
    white-space: nowrap;
    vertical-align: middle;
}

.planning-v2-heatmap .planning-v2-heat-cell {
    min-width: 3.5rem;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
}

.planning-v2-heat-cell--ok { background: color-mix(in srgb, #198754 22%, transparent); color: var(--text-main); }
.planning-v2-heat-cell--near { background: color-mix(in srgb, var(--kromeka-yellow) 35%, transparent); color: var(--kromeka-dark); }
.planning-v2-heat-cell--over { background: color-mix(in srgb, var(--kromeka-red) 28%, transparent); color: var(--text-main); }
.planning-v2-heat-cell--idle { background: color-mix(in srgb, var(--kromeka-grey) 15%, transparent); color: var(--text-muted); }
.planning-v2-heat-cell--no_capacity { background: color-mix(in srgb, var(--kromeka-grey) 25%, transparent); color: var(--text-muted); }

.planning-v2-critical-group + .planning-v2-critical-group {
    margin-top: 1.25rem;
}

.planning-v2-critical-item {
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 0.375rem;
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.5rem;
    background: var(--bg-card, #fff);
}

.planning-v2-drawer .list-group-item {
    font-size: 0.9rem;
}

.planning-v2-filters-toggle {
    display: none;
}

.planning-v2-filters-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.35rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--kromeka-red);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.planning-v2-filters-count[hidden] {
    display: none !important;
}

#planning-v2-timeline-nav {
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

#planning-v2-portfolio-meta {
    flex: 1 1 10rem;
    min-width: 0;
}

/* Wide, tall windows keep the filter form in the page.
   Compact width or short height uses the Filters disclosure. */
@media (min-width: 992px) and (min-height: 37.51rem) {
    .planning-v2-filters-collapse.collapse {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }
}

@media (max-width: 991.98px), (max-height: 37.5rem) {
    body[data-page="planning-overview-v2"] nav[aria-label="breadcrumb"] {
        margin-bottom: 0.5rem !important;
    }

    body[data-page="planning-overview-v2"] > footer {
        margin-top: 0.75rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .planning-v2-page-header {
        margin-bottom: 0.75rem;
    }

    .planning-v2-root,
    .planning-v2-portfolio-board {
        --planning-v2-label-w: 180px;
    }

    .planning-v2-filters-toggle {
        display: inline-flex;
        margin-bottom: 0.5rem;
    }

    .planning-v2-filters .form-control,
    .planning-v2-filters .form-select {
        font-size: 1rem;
    }

    .planning-v2-summary-row {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0.35rem;
        margin-left: 0;
        margin-right: 0;
    }

    .planning-v2-summary-row > [class*="col"] {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        padding: 0;
    }

    .planning-v2-summary-card {
        flex-direction: row;
        align-items: baseline;
        gap: 0.4rem;
        padding: 0.35rem 0.6rem;
        white-space: nowrap;
    }

    .planning-v2-summary-card__value {
        font-size: 1rem;
    }

    .planning-v2-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .planning-v2-tabs .nav-link {
        white-space: nowrap;
    }

    .planning-v2-portfolio-board:has(.planning-v2-portfolio-row),
    .planning-v2-heatmap-wrap:has(.planning-v2-heatmap) {
        height: clamp(18rem, 55vh, 40rem);
        height: clamp(18rem, 55dvh, 40rem);
        min-height: 18rem;
        max-height: none;
    }
}

/* css/screens/069-dashboard-required-widgets-task-rows.css */
/* ============================================================
   Dashboard — required widgets + task rows
   ============================================================ */
.dashboard-customize-widget-list--sortable .dashboard-customize-widget-row {
    cursor: default;
}

.dashboard-customize-drag-handle {
    display: inline-flex;
    align-items: center;
    padding-top: 0.15rem;
    cursor: grab;
    touch-action: none;
}

.dashboard-customize-drag-handle:active {
    cursor: grabbing;
}

.dashboard-customize-widget-list--sortable .sortable-ghost {
    opacity: 0.45;
}

.dashboard-card-list .dashboard-task-row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    flex-shrink: 0;
    padding: var(--dashboard-item-padding-y) var(--dashboard-card-padding);
    border-bottom: 1px solid var(--border-color);
}

.dashboard-card-list .dashboard-task-row:last-child {
    border-bottom: none;
}

.dashboard-card-list .dashboard-task-row--overdue {
    background: color-mix(in srgb, var(--kromeka-red) 8%, transparent);
    border-radius: 0.25rem;
    box-shadow: inset 3px 0 0 var(--kromeka-red);
}

.dashboard-task-main {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    color: var(--text-main, #1d1d1b);
    text-decoration: none;
}

.dashboard-task-main:hover {
    color: var(--text-accent);
}

.dashboard-task-title {
    display: block;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dashboard-task-meta,
.dashboard-task-source {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8125rem;
    color: var(--text-muted, #878787);
    margin-top: 0.25rem;
}

.dashboard-task-meta-line {
    display: block;
    line-height: 1.35;
}

.dashboard-task-meta-line--status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.35rem;
}

.dashboard-task-source {
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dashboard-task-meta-sep {
    color: var(--text-muted, #878787);
}

.dashboard-task-row--completed .dashboard-task-title {
    color: var(--text-muted, #878787);
    font-weight: 500;
}

.dashboard-task-meta--completed {
    font-size: 0.75rem;
}

.tasks-queue-row--completed .tasks-queue-title--completed {
    text-decoration: line-through;
    text-decoration-color: var(--kromeka-grey, #878787);
}

.tasks-queue-mobile-card--completed {
    opacity: 0.92;
}

.task-reopen-control {
    flex: 0 0 auto;
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--kromeka-grey, #878787);
    border-radius: 0.375rem;
    background: transparent;
    color: var(--text-main, #1d1d1b);
    cursor: pointer;
    white-space: nowrap;
}

.task-reopen-control:hover:not(:disabled) {
    border-color: var(--kromeka-red);
    color: var(--text-accent);
}

.task-reopen-control:disabled,
.task-reopen-control.is-loading {
    opacity: 0.55;
    cursor: not-allowed;
}

.tasks-queue-table__actions .task-reopen-control {
    margin-right: 0.25rem;
}

[data-theme="dark"] .task-reopen-control {
    color: var(--text-main);
    border-color: var(--kromeka-grey);
}

/* Compact right-side complete action (dashboard only; not a checked-looking box). */
.dashboard-task-complete-control {
    flex: 0 0 auto;
    margin-top: 0.1rem;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--kromeka-grey, #878787);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    align-self: center;
}

.dashboard-task-complete-control__icon {
    font-size: 1.25rem;
    line-height: 1;
}

.dashboard-task-complete-control:hover:not(:disabled) {
    color: var(--text-accent);
    background: color-mix(in srgb, var(--kromeka-red) 10%, transparent);
}

.dashboard-task-complete-control:focus-visible {
    outline: 2px solid var(--kromeka-yellow);
    outline-offset: 2px;
}

.dashboard-task-complete-control.is-loading .dashboard-task-complete-control__icon {
    visibility: hidden;
}

.dashboard-task-complete-control.is-loading::after {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--kromeka-grey);
    border-top-color: var(--kromeka-red);
    border-radius: 50%;
    animation: task-complete-spin 0.65s linear infinite;
}

[data-theme="dark"] .dashboard-task-row {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .dashboard-task-main {
    color: var(--text-main);
}

[data-theme="dark"] .dashboard-task-complete-control {
    color: var(--text-muted);
}

[data-theme="dark"] .dashboard-task-complete-control:hover:not(:disabled) {
    color: var(--kromeka-yellow);
    background: rgba(255, 255, 255, 0.08);
}

/* css/screens/070-task-complete-control-dashboard-tasks-queue.css */
/* ============================================================
   Task complete control (dashboard + tasks queue)
   ============================================================ */
.task-complete-control {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    padding: 0;
    border: 2px solid var(--kromeka-grey, #878787);
    border-radius: 0.375rem;
    background: var(--bg-card, #fff);
    color: var(--kromeka-dark, #1d1d1b);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.task-complete-control:hover:not(:disabled) {
    border-color: var(--kromeka-red);
    color: var(--text-accent);
}

.task-complete-control:focus-visible {
    outline: 2px solid var(--kromeka-yellow);
    outline-offset: 2px;
}

.task-complete-control:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.task-complete-control.is-loading {
    pointer-events: none;
}

.task-complete-control.is-loading .bi-check-lg {
    visibility: hidden;
}

.task-complete-control.is-loading::after {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--kromeka-grey);
    border-top-color: var(--kromeka-red);
    border-radius: 50%;
    animation: task-complete-spin 0.65s linear infinite;
}

@keyframes task-complete-spin {
    to {
        transform: rotate(360deg);
    }
}

.task-overdue-label {
    color: var(--text-danger);
    font-weight: 600;
}

.tasks-queue-due-today {
    font-weight: 600;
    color: var(--kromeka-dark);
}

[data-theme="dark"] .task-complete-control {
    background: var(--bg-card);
    color: var(--text-main);
    border-color: var(--kromeka-grey);
}

/* Dashboard: override shared .task-complete-control box (compact outline action on the right). */
.dashboard-task-row .dashboard-task-complete-control.task-complete-control {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--kromeka-grey, #878787);
}

.dashboard-task-row .dashboard-task-complete-control.task-complete-control:hover:not(:disabled) {
    border: none;
    color: var(--text-accent);
    background: color-mix(in srgb, var(--kromeka-red) 10%, transparent);
}

.dashboard-task-row .task-complete-control.is-loading .dashboard-task-complete-control__icon,
.dashboard-task-row .dashboard-task-complete-control.is-loading .dashboard-task-complete-control__icon {
    visibility: hidden;
}

[data-theme="dark"] .dashboard-task-row .dashboard-task-complete-control.task-complete-control {
    background: transparent;
    border: none;
    color: var(--text-muted);
}

[data-theme="dark"] .tasks-queue-due-today {
    color: var(--text-main);
}

.tasks-queue-due-cell--editable {
    cursor: pointer;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease;
}

.tasks-queue-due-cell--editable:hover,
.tasks-queue-due-cell--editable:focus-visible {
    background: color-mix(in srgb, var(--kromeka-yellow) 18%, transparent);
    outline: none;
}

.tasks-queue-due-cell--editable:focus-visible {
    box-shadow: 0 0 0 2px var(--kromeka-yellow);
}

.tasks-queue-due-edit-icon {
    opacity: 0;
    color: var(--kromeka-grey);
    font-size: 0.85em;
    transition: opacity 0.15s ease;
}

.tasks-queue-due-cell--editable:hover .tasks-queue-due-edit-icon,
.tasks-queue-due-cell--editable:focus-visible .tasks-queue-due-edit-icon,
.tasks-queue-due-cell--editable.tasks-queue-due-cell--saving .tasks-queue-due-edit-icon {
    opacity: 1;
}

.tasks-queue-due-cell--saving {
    opacity: 0.65;
    pointer-events: none;
}

.tasks-queue-due-inline-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

[data-theme="dark"] .tasks-queue-due-cell--editable:hover,
[data-theme="dark"] .tasks-queue-due-cell--editable:focus-visible {
    background: color-mix(in srgb, var(--kromeka-yellow) 12%, var(--bg-card));
}

@media (max-width: 767.98px) {
    .task-complete-control {
        width: 2.75rem;
        height: 2.75rem;
        min-width: 2.75rem;
    }

    .dashboard-task-complete-control {
        width: 2.75rem;
        height: 2.75rem;
        min-width: 2.75rem;
        min-height: 2.75rem;
    }
}

/* css/screens/071-tasks-work-queue-tasks.css */
/* ============================================================
   Tasks page (/tasks/)
   ============================================================ */
.tasks-tabs .tasks-tab__count {
    display: inline-block;
    min-width: 1.25rem;
    margin-left: 0.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--hover-bg);
    color: var(--text-main);
    font-size: 0.75rem;
    line-height: 1.4;
}

.tasks-tabs .btn-primary .tasks-tab__count {
    background: color-mix(in srgb, var(--action-primary-text) 20%, transparent);
    color: var(--action-primary-text);
}

.tasks-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.tasks-filters__search {
    flex: 1 1 16rem;
    min-width: 0;
}

.tasks-filters__clear {
    align-self: flex-end;
    padding-bottom: 0.35rem;
}

.tasks-inline-add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
}

.tasks-inline-add #tasks-inline-title {
    flex: 1 1 14rem;
    min-width: 0;
}

.tasks-inline-add #tasks-inline-due {
    flex: 0 1 9rem;
}

.tasks-inline-add #tasks-inline-error,
.tasks-inline-add #tasks-inline-status {
    flex: 1 1 100%;
}

.tasks-list {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    overflow: hidden;
}

.tasks-group__heading,
.tasks-group__toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    padding: 0.65rem 1rem;
    background: var(--hover-bg);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.tasks-group__toggle {
    cursor: pointer;
    min-height: 2.75rem;
}

.tasks-group__toggle:focus-visible {
    outline: 2px solid var(--kromeka-yellow);
    outline-offset: -2px;
}

.tasks-group__count {
    color: var(--text-main);
    font-weight: 600;
    letter-spacing: 0;
}

.tasks-group__chevron {
    transition: transform 0.15s ease;
}

.tasks-group__toggle[aria-expanded="true"] .tasks-group__chevron {
    transform: rotate(90deg);
}

.tasks-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
}

.tasks-group__items .tasks-row:last-child {
    border-bottom: 0;
}

.tasks-row:hover {
    background: var(--hover-bg);
}

.tasks-row--done {
    color: var(--text-muted);
}

.tasks-row__check,
.tasks-row__due {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
}

.tasks-row__open {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.35rem 0.25rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    min-height: 2.75rem;
}

.tasks-row__open:focus-visible {
    outline: 2px solid var(--kromeka-yellow);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

.tasks-row__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
}

.tasks-row__name {
    font-weight: 600;
    color: var(--text-main);
}

.tasks-row__name--done {
    color: var(--text-muted);
    text-decoration: line-through;
}

.tasks-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
    max-width: 100%;
}

.tasks-row__desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 24rem;
}

.tasks-row__due-chip {
    font-size: 0.8125rem;
    white-space: nowrap;
    color: var(--text-main);
}

.tasks-row__due-chip--today {
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: var(--kromeka-status-revision-bg);
    color: var(--kromeka-status-revision-text);
    font-weight: 600;
}

.tasks-row__due-chip--late .task-overdue-label {
    font-weight: 700;
}

.tasks-queue-due-cell--editable {
    cursor: pointer;
    border-radius: 0.25rem;
}

.tasks-queue-due-cell--editable:hover,
.tasks-queue-due-cell--editable:focus-visible {
    outline: 2px solid var(--kromeka-yellow);
    outline-offset: 2px;
}

.tasks-row__done-icon {
    color: var(--kromeka-success);
    font-size: 1.25rem;
}

.tasks-row__done-label {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.tasks-urgent-tag,
.tasks-priority-flag {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}

.tasks-urgent-tag {
    background: var(--kromeka-red);
    color: var(--action-primary-text);
}

.tasks-priority-flag--high {
    background: color-mix(in srgb, var(--kromeka-red) 70%, var(--kromeka-yellow));
    color: var(--action-primary-text);
}

.task-complete-control--round {
    border-radius: 50%;
}

.tasks-empty {
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.tasks-empty__icon {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 2rem;
    color: var(--text-muted);
}

.tasks-empty__title {
    margin: 0 0 0.25rem;
    font-weight: 600;
    color: var(--text-main);
}

.tasks-empty__hint {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.tasks-cap-notice {
    margin: 0.75rem 0 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.tasks-drawer-panel {
    width: min(28rem, 100vw);
}

.tasks-drawer__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.tasks-drawer__kind,
.tasks-drawer__section {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tasks-drawer__title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--text-main);
}

.tasks-drawer__props {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
    margin: 0 0 1rem;
}

.tasks-drawer__props dt {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.tasks-drawer__props dd {
    margin: 0.1rem 0 0;
    color: var(--text-main);
}

.tasks-drawer__description,
.tasks-drawer__note {
    color: var(--text-main);
    font-size: 0.9375rem;
}

.tasks-drawer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.tasks-drawer__edit {
    margin-bottom: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

.tasks-drawer__activity {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--text-main);
    font-size: 0.875rem;
}

.tasks-drawer__activity li + li {
    margin-top: 0.35rem;
}

.tasks-status-badge {
    background: var(--bg-card-header);
    color: var(--text-card-header);
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
}

.task-reject-control {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    padding: 0;
    border: 2px solid var(--kromeka-grey);
    border-radius: 0.375rem;
    background: var(--bg-card);
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.task-reject-control:hover:not(:disabled) {
    border-color: var(--kromeka-red);
    color: var(--text-danger);
}

.task-reject-control:focus-visible {
    outline: 2px solid var(--kromeka-yellow);
    outline-offset: 2px;
}

.task-reject-control:disabled,
.task-reject-control.is-loading {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.task-reject-control.is-loading .bi-x-lg {
    visibility: hidden;
}

.task-reject-control.is-loading::after {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--kromeka-grey);
    border-top-color: var(--kromeka-red);
    border-radius: 50%;
    animation: task-complete-spin 0.65s linear infinite;
}

@media (max-width: 767.98px) {
    .tasks-row {
        align-items: flex-start;
        gap: 0.5rem;
    }

    .tasks-row__open,
    .task-complete-control--round,
    .task-reject-control,
    .tasks-inline-add .btn,
    .tasks-tabs .btn {
        min-height: 2.75rem;
        min-width: 2.75rem;
    }

    .tasks-inline-add #tasks-inline-due,
    .tasks-inline-add #tasks-inline-title {
        flex: 1 1 100%;
    }

    .tasks-drawer__props {
        grid-template-columns: 1fr;
    }
}

/* css/components/072-quick-filter-template-cards-saved-list-filter-sh.css */
/* ------------------------------------------------------------
   Quick filter template cards (saved list filter shortcuts)
   ------------------------------------------------------------ */
.kromeka-quick-filter-strip__scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
}

.kromeka-qft-card {
    flex: 0 0 auto;
    min-width: 12rem;
    max-width: 16rem;
}

.kromeka-qft-card__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 0.375rem;
    background: var(--bg-card, #fff);
    min-height: 100%;
}

[data-theme="dark"] .kromeka-qft-card__inner,
[data-bs-theme="dark"] .kromeka-qft-card__inner {
    background: var(--bg-card, #2c2c2a);
    border-color: var(--border-color, #444);
}

.kromeka-qft-card--shared .kromeka-qft-card__inner {
    border-left: 3px solid var(--kromeka-yellow);
}

.kromeka-qft-card--review .kromeka-qft-card__inner {
    border-color: color-mix(in srgb, var(--kromeka-yellow) 55%, var(--border-color, #dee2e6));
}

.kromeka-qft-card__menu {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.kromeka-qft-card__inner:hover .kromeka-qft-card__menu,
.kromeka-qft-card__menu:focus-within {
    opacity: 1;
}

.kromeka-qft-card__title {
    font-size: 0.9rem;
    padding-right: 1.25rem;
    color: var(--text-main, var(--kromeka-dark));
}

.kromeka-qft-card__summary {
    line-height: 1.3;
    color: var(--text-muted, var(--kromeka-grey));
}

.kromeka-qft-card__review {
    color: var(--kromeka-yellow);
}

[data-theme="dark"] .kromeka-qft-card__review,
[data-bs-theme="dark"] .kromeka-qft-card__review {
    color: var(--kromeka-yellow);
}

.kromeka-qft-card__apply {
    min-height: 2.75rem;
    align-self: stretch;
}

.kromeka-qft-card__field {
    margin-top: 0.125rem;
}

.kromeka-qft-card__field .form-control,
.kromeka-qft-card__field .form-select {
    min-height: 2.25rem;
}

.kromeka-quick-filter-strip__empty:not(.d-none) {
    flex: 1 1 100%;
}

@media (max-width: 575.98px) {
    .kromeka-qft-card {
        min-width: 85vw;
        max-width: 85vw;
    }

    .kromeka-qft-card__menu {
        opacity: 1;
    }

    .kromeka-qft-card__apply {
        min-height: 3rem;
    }
}

/* css/screens/074-shipment-board-workspace.css */
/* ----- Board layout ----- */
.shipment-board-workspace {
    display: grid;
    grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
    gap: 1rem;
    /* Top-align so the transport board grows downward with its contents while
       the available-packages panel stays pinned at the top. */
    align-items: flex-start;
    min-height: 420px;
    max-height: min(72vh, 900px);
}

.shipment-board-unassigned-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.shipment-board-unassigned-panel > .shipment-board-column {
    flex: 1 1 auto;
    min-height: 0;
    max-width: none;
    width: 100%;
}

.shipment-board-unassigned-panel > .shipment-board-column--project-packages {
    flex: 1 1 auto;
}

.shipment-project-package-summary {
    margin: 0.75rem 0.75rem 0;
    font-size: 0.875rem;
}

.shipment-project-package-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.shipment-project-package-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.45rem 0.25rem;
    border: 1px solid var(--border-color, rgba(135, 135, 135, 0.25));
    border-radius: 0.375rem;
    background: var(--bg-body);
    text-align: center;
}

.shipment-project-package-stat__value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-main);
}

.shipment-project-package-stat__label {
    font-size: 0.7rem;
    line-height: 1.2;
    color: var(--text-muted, var(--kromeka-grey));
}

.shipment-project-package-summary__projects {
    margin-top: 0.5rem;
    padding-left: 1.1rem;
    font-size: 0.8125rem;
    color: var(--text-muted, var(--kromeka-grey));
}

.shipment-project-package-section {
    padding: 0.5rem 0.75rem 0;
}

.shipment-project-package-section__title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted, var(--kromeka-grey));
    margin: 0.5rem 0 0.35rem;
}

.shipment-project-package-section__count {
    font-weight: 600;
    letter-spacing: 0;
}

.shipment-project-package-section--folded > summary {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    margin-bottom: 0;
    cursor: pointer;
    list-style: none;
}

.shipment-project-package-section--folded > summary::-webkit-details-marker {
    display: none;
}

.shipment-fold-chevron {
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}

.shipment-project-package-section--folded[open] .shipment-fold-chevron {
    transform: rotate(90deg);
}

.shipment-package-ref__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
}

.shipment-package-ref__identity {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.shipment-package-ref__status {
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--text-muted, var(--kromeka-grey));
    text-align: right;
}

.shipment-package-ref__status a {
    color: var(--text-main);
    font-weight: 600;
}

.shipment-board-unassigned-panel > .shipment-board-column--staging {
    flex: 1.4 1 auto;
}

.shipment-board-transport-panel {
    min-width: 0;
    min-height: 0;
    /* Horizontal scrolling is handled by the inner transport scroll row; the panel
       itself grows vertically with its content so the page scrolls (no
       nested vertical scroll trap on the board). */
    overflow: visible;
    border: 1px solid var(--border-color, rgba(135, 135, 135, 0.25));
    border-radius: 0.5rem;
    background: var(--bg-body);
    padding: 0.75rem;
}

/* Shipment transport scroll pocket — shared rules in .kromeka-hscroll-* block above. */

.shipment-panel-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Container cards must show every package: no internal vertical scroll, the
   card grows as tall as its contents. */
.shipment-panel-scroll--container {
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
}

.shipment-board-columns {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    min-height: 100%;
}

.shipment-board-columns--transport {
    overflow-x: visible;
    overflow-y: visible;
    padding-bottom: 0.25rem;
}

.shipment-board-column {
    flex: 0 0 320px;
    max-width: 320px;
    background: var(--bg-card);
    border: 1px solid var(--border-color, rgba(135, 135, 135, 0.35));
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    min-height: 160px;
}

.shipment-board-column--unassigned {
    border-style: dashed;
}

.shipment-board-column.is-checked {
    border-color: var(--kromeka-yellow);
    box-shadow: 0 0 0 1px var(--kromeka-yellow) inset;
}

.shipment-board-column.is-active-target {
    border-color: var(--kromeka-red);
    box-shadow: 0 0 0 2px var(--kromeka-red);
}

.shipment-board-column.is-active-target .shipment-active-badge {
    display: inline-flex;
}

.shipment-active-badge {
    display: none;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--kromeka-red);
    color: #fff;
    white-space: nowrap;
}

.shipment-container-head {
    cursor: pointer;
}

.shipment-container-head:focus-visible {
    outline: 2px solid var(--kromeka-yellow);
    outline-offset: 2px;
}

.shipment-container-head-row {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
}

.shipment-container-drag-handle {
    cursor: grab;
    color: var(--text-muted);
    align-items: center;
    padding: 0.15rem 0.1rem;
    flex: 0 0 auto;
}

.shipment-container-drag-handle:active {
    cursor: grabbing;
}

.shipment-container-order-mobile {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 0 0 auto;
}

.shipment-package-select {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
    cursor: pointer;
}

.shipment-package-select-input {
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
    cursor: pointer;
}

.shipment-batch-foot .shipment-batch-move-btn:disabled {
    opacity: 0.65;
}

.shipment-batch-hint.is-warning {
    color: var(--text-danger);
}

.shipment-board-column--add {
    flex: 0 0 200px;
    max-width: 200px;
    border: none;
    background: transparent;
    min-height: 160px;
}

.shipment-add-container-tile {
    width: 100%;
    height: 100%;
    min-height: 160px;
    border: 2px dashed var(--kromeka-grey);
    border-radius: 0.5rem;
    background: transparent;
    color: var(--text-muted);
    font-weight: 500;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.shipment-add-container-tile:hover,
.shipment-add-container-tile:focus-visible {
    border-color: var(--kromeka-red);
    color: var(--text-main);
}

/* css/screens/075-body-kromeka-shipment-detail-page.css */
/* ----- Shipment detail page shell (footer below workspace) ----- */
body.kromeka-shipment-detail-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.kromeka-shipment-detail-page > .kromeka-app-content {
    flex: 1 0 auto;
    width: 100%;
}

body.kromeka-shipment-detail-page > footer {
    flex-shrink: 0;
    margin-top: auto;
}

body.kromeka-shipment-detail-page .shipment-board-workspace {
    min-height: max(420px, calc(100vh - 20rem));
    max-height: none;
}

body.kromeka-shipment-detail-page .shipment-board-transport-panel {
    max-height: none;
}

/* Desktop: keep the available-packages panel pinned and self-scrolling while
   the transport board grows and the page scrolls vertically. Scoped to wide
   screens so the mobile board rules (below) stay in control on small screens. */
@media (min-width: 768px) {
    body.kromeka-shipment-detail-page .shipment-board-unassigned-panel {
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
    }
}

.shipment-column-head {
    padding: 0.6rem 0.75rem 0.4rem;
    border-bottom: 1px solid var(--border-color, rgba(135, 135, 135, 0.25));
}

.shipment-column-title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    color: var(--text-main);
}

.shipment-column-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.shipment-column-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.4rem;
    align-items: center;
}

.shipment-column-empty {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
    padding: 1.25rem 0.75rem;
    border: 1px dashed var(--border-color, rgba(135, 135, 135, 0.35));
    border-radius: 0.375rem;
    margin: 0.25rem;
}

/* ----- Packages tab: list beside the open package ----- */
.shipment-packages-panes {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    min-height: 320px;
}

.shipment-packages-list {
    flex: 0 0 280px;
    max-width: 320px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    max-height: 70vh;
    overflow: auto;
}

.shipment-packages-list-link {
    display: block;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    color: var(--text-main);
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
}

.shipment-packages-list-link:hover,
.shipment-packages-list-link:focus {
    background: var(--bg-secondary);
    color: var(--text-main);
}

.shipment-packages-list-link.is-selected {
    background: rgba(175, 22, 30, 0.12);
    box-shadow: inset 2px 0 0 var(--kromeka-red);
}

[data-theme="dark"] .shipment-packages-list-link.is-selected,
[data-bs-theme="dark"] .shipment-packages-list-link.is-selected {
    background: rgba(245, 181, 31, 0.12);
    box-shadow: inset 2px 0 0 var(--kromeka-yellow);
}

.shipment-packages-detail {
    flex: 1;
    min-width: 0;
}

.shipment-packages-search {
    max-width: 28rem;
}

.shipment-packages-file {
    width: 12rem;
    max-width: 100%;
}

.shipment-package-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}

.shipment-package-photo {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5rem;
    min-width: 0;
}

.shipment-package-photo__thumb,
.shipment-package-photo__placeholder {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 4px;
    background: var(--bg-body);
}

.shipment-package-photo__thumb {
    object-fit: cover;
}

.shipment-package-photo__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 2rem;
}

.shipment-package-photo__name {
    display: block;
    margin-top: 0.35rem;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .shipment-packages-panes {
        display: block;
    }

    .shipment-packages-list {
        flex: none;
        max-width: none;
        width: 100%;
        max-height: 240px;
        margin-bottom: 1rem;
    }

    .shipment-packages-file {
        width: 100%;
    }
}

/* css/screens/076-package-quick-add-panel.css */
/* ----- Packages list quick-add panel ----- */
.package-quick-add-panel {
    border-color: var(--border-color, rgba(135, 135, 135, 0.35));
}

.package-quick-add-panel .package-quick-add-readonly {
    background: var(--bg-body);
    color: var(--text-muted);
    height: calc(1.5em + 0.5rem + 2px);
    min-height: calc(1.5em + 0.5rem + 2px);
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.package-quick-add-panel .package-quick-add-dims input {
    min-width: 0;
}

.package-quick-add-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.package-quick-add-section {
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-color, rgba(135, 135, 135, 0.35));
    border-radius: 0.5rem;
    background: var(--bg-body);
}

.package-quick-add-section__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main, var(--kromeka-dark));
    margin: 0 0 0.75rem;
}

.package-quick-add-section__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: var(--kromeka-red);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.package-wo-picker {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.package-wo-picker__search {
    max-width: none;
}

.package-wo-picker__results {
    border: 1px solid var(--border-color, var(--kromeka-grey));
    border-radius: 0.375rem;
    background: var(--bg-card, #fff);
    max-height: 14rem;
    overflow-y: auto;
    box-shadow: 0 0.35rem 0.85rem rgba(0, 0, 0, 0.08);
}

.package-wo-picker__result {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--border-color, rgba(135, 135, 135, 0.2));
    background: transparent;
    color: var(--text-main, var(--kromeka-dark));
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.package-wo-picker__result:last-child {
    border-bottom: 0;
}

.package-wo-picker__result:hover,
.package-wo-picker__result:focus {
    background: rgba(245, 181, 31, 0.15);
    color: var(--text-main, var(--kromeka-dark));
    outline: none;
}

.package-wo-picker__results-empty {
    padding: 0.65rem 0.75rem;
}

.package-wo-picker__selected-wrap {
    border-top: 1px dashed var(--border-color, var(--kromeka-grey));
    padding-top: 0.65rem;
}

.package-wo-picker__selected-label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
}

.package-wo-picker__selected-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.package-wo-picker__selected-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.375rem;
    background: var(--bg-card, var(--kromeka-light-grey));
    border: 1px solid var(--border-color, rgba(135, 135, 135, 0.25));
}

.package-wo-picker__qty-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.package-wo-picker__qty-label {
    color: var(--text-muted, var(--kromeka-grey));
    white-space: nowrap;
}

.package-wo-picker__qty {
    width: 4.25rem;
    min-height: 1.875rem;
    text-align: center;
}

.package-wo-picker__qty-total {
    color: var(--text-muted, var(--kromeka-grey));
    white-space: nowrap;
    font-weight: 600;
}

.package-wo-picker__selected-text {
    flex: 1 1 auto;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-main, var(--kromeka-dark));
    word-break: break-word;
}

.package-wo-picker__remove {
    flex: 0 0 auto;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0;
    line-height: 1;
}

.package-quick-add-actions .btn {
    min-width: 10rem;
}

[data-theme="dark"] .package-quick-add-section {
    background: var(--bg-card);
    border-color: var(--kromeka-grey);
}

[data-theme="dark"] .package-wo-picker__results {
    background: var(--bg-card);
    box-shadow: 0 0.35rem 0.85rem rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .package-wo-picker__result {
    color: var(--text-main);
}

[data-theme="dark"] .package-wo-picker__result:hover,
[data-theme="dark"] .package-wo-picker__result:focus {
    color: var(--text-main);
}

[data-theme="dark"] .package-wo-picker__selected-item {
    background: var(--bg-body);
}

[data-theme="dark"] .package-wo-picker__selected-text {
    color: var(--text-main);
}

/* Package list — logistics status badges (readable in light and dark themes) */
.package-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.5rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
    vertical-align: middle;
}

.package-status-badge--unassigned {
    background-color: var(--kromeka-light-grey);
    color: var(--kromeka-dark);
    border-color: var(--kromeka-grey);
}

[data-theme="dark"] .package-status-badge--unassigned {
    background-color: var(--kromeka-dark-grey);
    color: var(--text-main);
    border-color: var(--kromeka-grey);
}

.package-status-badge--on_shipment {
    background-color: rgba(245, 181, 31, 0.22);
    color: var(--kromeka-dark);
    border-color: rgba(245, 181, 31, 0.65);
}

[data-theme="dark"] .package-status-badge--on_shipment {
    background-color: rgba(245, 181, 31, 0.18);
    color: var(--text-main);
    border-color: rgba(245, 181, 31, 0.45);
}

.package-status-badge--on_truck {
    background-color: rgba(245, 181, 31, 0.38);
    color: var(--kromeka-dark);
    border-color: var(--kromeka-yellow);
}

[data-theme="dark"] .package-status-badge--on_truck {
    background-color: rgba(245, 181, 31, 0.3);
    color: var(--kromeka-dark);
    border-color: var(--kromeka-yellow);
}

.package-status-badge--shipped {
    background-color: rgba(175, 22, 30, 0.12);
    color: var(--link-color);
    border-color: rgba(175, 22, 30, 0.35);
}

[data-theme="dark"] .package-status-badge--shipped {
    background-color: rgba(175, 22, 30, 0.28);
    color: var(--text-main);
    border-color: rgba(175, 22, 30, 0.5);
}

.package-status-badge--delivered {
    background-color: var(--kromeka-dark-grey);
    color: #fff;
    border-color: var(--kromeka-grey);
}

[data-theme="dark"] .package-status-badge--delivered {
    background-color: #4a4a48;
    color: var(--text-main);
    border-color: var(--kromeka-grey);
}

.package-list-table.kromeka-data-table tbody tr:hover .package-status-badge {
    /* Keep badge readable on row hover — explicit fills above row background */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .package-list-table.kromeka-data-table tbody tr:hover .package-status-badge {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Package list — multiline work order / item / product columns */
.package-list-table .package-wo-lines-cell {
    min-width: 7rem;
    max-width: 14rem;
    vertical-align: top;
}

.package-list-table .package-wo-lines-cell .package-wo-lines-stack {
    max-height: 8.5rem;
    overflow-y: auto;
    scrollbar-width: thin;
}

.package-wo-lines-stack {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.package-wo-line {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--text-main, var(--kromeka-dark));
    word-break: break-word;
}

.package-wo-line__value {
    font-weight: 500;
}

.package-wo-usage {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--kromeka-dark-grey);
    white-space: nowrap;
}

[data-theme="dark"] .package-wo-usage {
    color: var(--text-muted);
}

.package-wo-lines-trigger {
    cursor: pointer;
    border-radius: 0.25rem;
    padding: 0.1rem 0.15rem;
    margin: -0.1rem -0.15rem;
}

.package-wo-lines-trigger:hover,
.package-wo-lines-trigger:focus {
    outline: 2px solid var(--kromeka-yellow);
    outline-offset: 1px;
}

.package-list-table tbody tr:hover .package-wo-line {
    color: var(--text-main, var(--kromeka-dark));
}

.popover.package-wo-popover {
    --bs-popover-max-width: min(36rem, 92vw);
    z-index: 1080;
    border-color: var(--border-color, var(--kromeka-grey));
    background-color: var(--bg-card, #fff);
    color: var(--text-main, var(--kromeka-dark));
}

.popover.package-wo-popover .popover-header {
    background-color: var(--bg-card-header, var(--kromeka-light-grey));
    color: var(--text-card-header, var(--kromeka-dark));
    border-bottom-color: var(--border-color, var(--kromeka-grey));
    font-weight: 700;
}

.popover.package-wo-popover .popover-body {
    color: var(--text-main, var(--kromeka-dark));
    padding: 0.5rem 0.65rem;
}

.package-wo-popover-table th,
.package-wo-popover-table td {
    color: var(--text-main, var(--kromeka-dark));
    font-size: 0.8125rem;
    vertical-align: top;
    padding: 0.2rem 0.45rem 0.2rem 0;
}

.package-wo-popover-table th {
    font-weight: 700;
    white-space: nowrap;
}

[data-theme="dark"] .popover.package-wo-popover {
    background-color: var(--bg-card);
    border-color: var(--kromeka-grey);
}

[data-theme="dark"] .popover.package-wo-popover .popover-header {
    background-color: var(--bg-card-header);
    color: var(--text-card-header);
}

[data-theme="dark"] .package-wo-popover-table th,
[data-theme="dark"] .package-wo-popover-table td {
    color: var(--text-main);
}

.shipment-package-list {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-height: 60px;
}

.shipment-column-foot {
    padding: 0.5rem 0.75rem 0.75rem;
}

/* css/screens/077-shipment-package-card.css */
/* ----- Package cards ----- */
.shipment-package-card {
    background: var(--bg-body);
    border: 1px solid var(--border-color, rgba(135, 135, 135, 0.35));
    border-radius: 0.45rem;
    padding: 0.55rem 0.65rem;
}

.shipment-package-card.is-checked {
    border-color: var(--kromeka-yellow);
}

.shipment-package-card.is-selected {
    border-color: var(--kromeka-red);
    box-shadow: 0 0 0 1px var(--kromeka-red);
    background: color-mix(in srgb, var(--kromeka-red) 6%, var(--bg-body));
}

[data-theme="dark"] .shipment-package-card.is-selected,
[data-bs-theme="dark"] .shipment-package-card.is-selected {
    background: color-mix(in srgb, var(--kromeka-red) 18%, var(--bg-body));
}

.shipment-select-all {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: var(--text-main);
    cursor: pointer;
}

.shipment-available-toolbar--section-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0.75rem 0;
}

.shipment-available-toolbar--section-top .shipment-project-package-section__title {
    margin: 0;
}

.shipment-container-summary {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.78rem;
}

.shipment-board-plan-preview {
    padding: 0.5rem 0.75rem 0;
}

.shipment-board-plan-floor {
    position: relative;
    width: 100%;
    aspect-ratio: calc(var(--plan-len, 1) / var(--plan-wid, 1));
    max-height: 120px;
    border: 1px solid var(--border-color, rgba(135, 135, 135, 0.45));
    border-radius: 0.35rem;
    background: var(--kromeka-light-grey);
    overflow: hidden;
}

[data-theme="dark"] .shipment-board-plan-floor,
[data-bs-theme="dark"] .shipment-board-plan-floor {
    background: color-mix(in srgb, var(--kromeka-light-grey) 25%, var(--bg-card));
}

.shipment-board-plan-pkg {
    position: absolute;
    box-sizing: border-box;
    border: 1px solid var(--kromeka-dark-grey);
    background: color-mix(in srgb, var(--kromeka-yellow) 55%, #fff);
    color: var(--kromeka-dark);
    font-size: 0.55rem;
    line-height: 1.1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1px;
}

[data-theme="dark"] .shipment-board-plan-pkg,
[data-bs-theme="dark"] .shipment-board-plan-pkg {
    background: color-mix(in srgb, var(--kromeka-yellow) 28%, var(--bg-card));
    color: var(--text-main);
    border-color: var(--kromeka-yellow);
}

.shipment-board-plan-pkg.is-level-2 {
    border-style: dashed;
    border-color: var(--kromeka-red);
}

.shipment-board-plan-pkg-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.shipment-package-card--ghost {
    opacity: 0.45;
}

.shipment-package-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.shipment-package-number {
    font-size: 0.85rem;
    color: var(--text-main);
    white-space: nowrap;
}

.shipment-drag-handle {
    cursor: grab;
    color: var(--text-muted);
    align-items: center;
}

.shipment-drag-handle:active {
    cursor: grabbing;
}

.shipment-check-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--kromeka-yellow);
    color: var(--kromeka-dark);
    white-space: nowrap;
}

.shipment-package-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.shipment-package-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.4rem;
}

.shipment-meta-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--kromeka-light-grey);
    color: var(--kromeka-dark);
    white-space: nowrap;
}

[data-theme="dark"] .shipment-meta-chip,
[data-bs-theme="dark"] .shipment-meta-chip {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-main);
}

.shipment-meta-chip.is-over {
    background: var(--kromeka-red);
    color: #fff;
}

.shipment-package-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.shipment-package-footer-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.shipment-icon-btn {
    color: var(--text-muted);
    border: 1px solid transparent;
    padding: 0.2rem 0.45rem;
    line-height: 1;
    min-height: 30px;
}

.shipment-icon-btn:hover,
.shipment-icon-btn:focus-visible {
    color: var(--text-main);
    border-color: var(--border-color, rgba(135, 135, 135, 0.45));
}

.shipment-checklist-toggle {
    border: 1px solid var(--border-color, rgba(135, 135, 135, 0.35));
    background: transparent;
    color: var(--text-main);
    border-radius: 0.35rem;
    font-size: 0.78rem;
}

.shipment-checklist-toggle.is-complete {
    border-color: var(--kromeka-yellow);
    color: var(--text-main);
    font-weight: 600;
}

.shipment-checklist-toggle .shipment-chevron {
    transition: transform 0.15s ease;
}

.shipment-checklist-toggle[aria-expanded="true"] .shipment-chevron {
    transform: rotate(180deg);
}

/* css/screens/078-shipment-checklist.css */
/* ----- Checklist items ----- */
.shipment-checklist {
    margin-top: 0.5rem;
}

.shipment-item-list {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.shipment-item {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.45rem 0.5rem;
    border: 1px solid var(--border-color, rgba(135, 135, 135, 0.25));
    border-radius: 0.35rem;
}

.shipment-item.is-checked {
    border-color: var(--kromeka-yellow);
    background: rgba(245, 181, 31, 0.08);
}

.shipment-item-check {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    flex: 1 1 auto;
    cursor: pointer;
    margin-bottom: 0;
    min-height: 30px;
}

.shipment-item-check .form-check-input {
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
    margin-top: 0.1rem;
    cursor: pointer;
}

.shipment-item-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.shipment-item-desc {
    font-size: 0.82rem;
    color: var(--text-main);
}

.shipment-item.is-checked .shipment-item-desc {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    opacity: 0.8;
}

.shipment-item-qty {
    font-weight: 600;
    margin-left: 0.2rem;
}

.shipment-part-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--kromeka-dark-grey);
    color: #fff;
    margin-left: 0.25rem;
    white-space: nowrap;
}

.shipment-item-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.shipment-item-actions {
    display: flex;
    gap: 0.15rem;
    flex: 0 0 auto;
}

.shipment-item-empty {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
    padding: 0.6rem 0.4rem;
}

/* css/screens/081-shipment-plan-wrap.css */
/* ----- Loading plan ----- */
.shipment-plan-wrap {
    overflow: auto;
    border: 1px solid var(--border-color, rgba(135, 135, 135, 0.35));
    border-radius: 0.5rem;
    background: var(--bg-card);
    padding: 1rem;
}

.shipment-plan-floor {
    position: relative;
    background-color: var(--bg-body);
    background-image:
        linear-gradient(0deg, rgba(135, 135, 135, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(135, 135, 135, 0.18) 1px, transparent 1px);
    /* background-size is set by shipment-load-plan.js (1 m grid at the active scale) */
    border: 2px solid var(--kromeka-dark-grey);
    border-radius: 4px;
}

[data-theme="dark"] .shipment-plan-floor,
[data-bs-theme="dark"] .shipment-plan-floor {
    border-color: var(--kromeka-grey);
}

.shipment-plan-cab {
    position: absolute;
    left: -26px;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.shipment-plan-box {
    position: absolute;
    border: 1px solid var(--kromeka-dark-grey);
    border-radius: 3px;
    background: rgba(245, 181, 31, 0.85);
    color: var(--kromeka-dark);
    font-size: 0.68rem;
    line-height: 1.15;
    padding: 2px 4px;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.shipment-plan-box.is-level-2,
.shipment-plan-box.is-stacked {
    background: rgba(175, 22, 30, 0.85);
    color: #fff;
    border-style: dashed;
}

.shipment-plan-box.is-stack-warning {
    outline: 2px dashed var(--kromeka-yellow);
    outline-offset: 1px;
}

.shipment-plan-box.is-colliding {
    outline: 2px solid var(--kromeka-red);
    background: rgba(175, 22, 30, 0.55);
    color: #fff;
}

.shipment-plan-box.is-selected {
    outline: 2px solid var(--kromeka-red);
}

.shipment-plan-box .shipment-plan-box-kg {
    font-weight: 600;
    display: block;
}

.shipment-plan-side {
    min-width: 240px;
}

.shipment-plan-pool-card {
    border: 1px solid var(--border-color, rgba(135, 135, 135, 0.35));
    border-radius: 0.4rem;
    padding: 0.45rem 0.6rem;
    margin-bottom: 0.4rem;
    background: var(--bg-card);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-main);
}

.shipment-plan-pool-card.is-missing-dims {
    border-style: dashed;
    color: var(--text-muted);
}

.shipment-plan-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.shipment-plan-legend-l2 {
    color: var(--text-danger);
    font-weight: 600;
}

.shipment-multiplan-truck-warnings {
    width: 100%;
}

.shipment-plan-warning-list {
    width: 100%;
    margin: 0.35rem 0 0;
    padding: 0.4rem 0.65rem;
    list-style: none;
    border-left: 3px solid var(--kromeka-yellow);
    background: var(--bg-body);
    border-radius: 0.25rem;
    color: var(--text-main);
    font-size: 0.8rem;
}

.shipment-plan-warning-list li + li {
    margin-top: 0.2rem;
}

/* Sticky action bar so Back to shipment / Save plan stay reachable while
   scrolling down a long vertical stack of trucks/containers. */
.shipment-multiplan-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg-body);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color, rgba(135, 135, 135, 0.25));
}

/* css/screens/082-same-mental-model-as-the-shipment-board-packages.css */
/* ----- Generalized loading plan (pool left, trucks right) -----
   Same mental model as the shipment board: packages on the left,
   transport units stacked vertically on the right with canvases. */
.shipment-multiplan-workspace {
    display: grid;
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    min-height: 0;
}

.shipment-multiplan-pool-panel {
    min-width: 0;
}

.shipment-multiplan-pool {
    background: var(--bg-card);
    border: 1px solid var(--border-color, rgba(135, 135, 135, 0.35));
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    max-height: calc(100vh - 7rem);
    overflow: hidden;
}

.shipment-multiplan-pool-head {
    flex: 0 0 auto;
    padding: 0.75rem 0.75rem 0.5rem;
    border-bottom: 1px solid var(--border-color, rgba(135, 135, 135, 0.25));
}

.shipment-multiplan-pool-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.75rem;
}

.shipment-multiplan-pool-empty {
    padding: 0.5rem 0;
}

.shipment-multiplan-pool-missing {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border-color, rgba(135, 135, 135, 0.35));
}

.shipment-multiplan-trucks-panel {
    min-width: 0;
}

.shipment-multiplan-trucks {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
    min-width: 0;
}

.shipment-multiplan-truck {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-color, rgba(135, 135, 135, 0.35));
    border-radius: 0.5rem;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Desktop: keep the package pool visible while scrolling trucks */
@media (min-width: 992px) {
    .shipment-multiplan-pool-panel {
        position: sticky;
        top: 5.5rem;
        align-self: start;
    }
}

.shipment-multiplan {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.shipment-multiplan-truck.is-drop-target {
    border-color: var(--kromeka-red);
    box-shadow: inset 0 0 0 2px var(--kromeka-red);
}

.shipment-multiplan-truck-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.shipment-multiplan-truck-title {
    font-size: 0.95rem;
    color: var(--text-main);
    margin-right: auto;
}

.shipment-multiplan-truck-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    width: 100%;
}

.shipment-multiplan-floor-wrap {
    position: relative;
    margin-left: 1.5rem;
    width: calc(100% - 1.5rem);
    min-height: 180px;
}

.loading-plan-canvas {
    min-height: 180px;
    max-width: 100%;
}

.shipment-multiplan-needdims {
    border: 1px dashed var(--border-color, rgba(135, 135, 135, 0.5));
    border-radius: 0.45rem;
    padding: 0.75rem;
    min-width: 320px;
}

.shipment-multiplan-pool.is-drop-target {
    border-color: var(--kromeka-red);
    box-shadow: inset 0 0 0 2px var(--kromeka-red);
}

/* Pool list: vertical stack in the side panel */
.shipment-multiplan-pool #planPool,
.shipment-multiplan-pool #planMissingDims {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-content: start;
}

.shipment-multiplan-pool .shipment-plan-pool-card {
    margin-bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
}

.shipment-multiplan-pool .shipment-plan-pool-assign {
    max-width: none;
    width: 100%;
}

.shipment-plan-pool-info {
    min-width: 0;
    flex: 1 1 auto;
    cursor: grab;
}

.shipment-plan-pool-assign {
    flex: 0 0 auto;
    max-width: 9rem;
}

.shipment-plan-pool-card.is-dragging-src,
.shipment-plan-box.is-dragging-src {
    opacity: 0.35;
}

.shipment-plan-drag-ghost {
    position: fixed;
    z-index: 1080;
    pointer-events: none;
    background: rgba(245, 181, 31, 0.9);
    border: 1px solid var(--kromeka-dark-grey);
    border-radius: 3px;
    color: var(--kromeka-dark);
    font-size: 0.68rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

@media (max-width: 991.98px) {
    .shipment-multiplan-workspace {
        grid-template-columns: 1fr;
    }

    .shipment-multiplan-pool-panel {
        position: static;
        max-height: none;
    }

    .shipment-multiplan-pool {
        max-height: min(48vh, 520px);
    }

    /* If the to-scale canvas is wider than a narrow card, scroll it inside the
       card instead of forcing a horizontal scroll on the whole page. */
    .shipment-multiplan-floor-wrap {
        overflow-x: auto;
        overflow-y: visible;
    }
}

.shipment-plan-dim-field {
    width: 5rem;
}

/* css/components/084-media-max-width-767-98px.css */
/* ----- Mobile board behaviour ----- */
@media (max-width: 991.98px), (max-height: 37.5rem) {
    .shipment-board-workspace {
        display: flex;
        flex-direction: column;
        max-height: none;
        min-height: 0;
        gap: 0.85rem;
    }

    .shipment-board-unassigned-panel {
        max-height: 40rem;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 0.15rem;
    }

    .shipment-board-unassigned-panel > .shipment-board-column {
        flex: 0 0 auto;
        min-height: 200px;
    }

    .shipment-board-unassigned-panel .shipment-panel-scroll {
        max-height: none;
        overflow: visible;
    }

    .shipment-board-transport-panel {
        max-height: none;
        overflow: visible;
    }

    .shipment-board-sticky-scroll {
        display: none !important;
    }

    body.kromeka-shipment-detail-page .shipment-board-transport-scroll {
        scrollbar-width: auto;
    }

    body.kromeka-shipment-detail-page .shipment-board-transport-scroll::-webkit-scrollbar {
        display: initial;
        height: initial;
    }

    .shipment-board-columns,
    .shipment-board-columns--transport {
        flex-direction: column;
        overflow-x: visible;
    }

    .shipment-board-column,
    .shipment-board-column--add {
        flex: 1 1 auto;
        max-width: none;
        width: 100%;
    }

    .shipment-panel-scroll--container {
        max-height: none;
        overflow: visible;
    }

    .shipment-package-select-input {
        width: 1.6rem;
        height: 1.6rem;
    }

    .shipment-add-container-tile {
        min-height: 64px;
        padding: 0.6rem;
    }

    .shipment-add-container-tile .fs-3 {
        display: inline !important;
        font-size: 1rem !important;
        margin-right: 0.4rem;
    }

    .shipment-item-check .form-check-input {
        width: 1.6rem;
        height: 1.6rem;
    }

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

/* Login / password-reset auth cards */
.auth-card-header {
    background-color: var(--kromeka-dark);
    border-bottom: 4px solid var(--kromeka-red);
}

/* css/components/085-messages-app-telegram-whatsapp-style-shell.css */
/* Messages inbox and shared conversation component. */

body.msg-app-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

body.msg-app-page > .kromeka-app-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body.msg-app-page > .kromeka-app-content > .kromeka-app-content-inner {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

.msg-app-shell {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    overflow: hidden;
}

.msg-app-pane {
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.msg-app-pane-threads {
    border-right: 1px solid var(--border-color);
    position: relative;
}

.msg-list-head {
    padding: 0.85rem 0.85rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.msg-list-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.msg-list-title {
    margin: 0;
    font-size: 1.15rem;
    color: var(--text-main);
}

.msg-filters {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
}

.msg-filter {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-main);
    border-radius: 999px;
    min-height: 36px;
    padding: 0.2rem 0.7rem;
    white-space: nowrap;
}

.msg-filter.is-active {
    background: var(--action-primary-bg);
    border-color: var(--action-primary-bg);
    color: var(--action-primary-text);
}

.msg-push-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background: var(--hover-bg);
    color: var(--text-main);
}

.msg-push-banner-text {
    margin: 0;
    font-size: 0.875rem;
}

.msg-push-banner-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.msg-thread-list {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.msg-thread {
    width: 100%;
    display: flex;
    gap: 0.7rem;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-main);
    padding: 0.7rem 0.85rem;
    min-height: 64px;
}

.msg-thread.is-active,
.msg-thread:hover {
    background: var(--hover-bg);
}

.msg-avatar {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg-card-header);
    color: var(--action-primary-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex: 0 0 auto;
}

.msg-presence {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--kromeka-grey, #8a8a86);
    border: 2px solid var(--bg-card);
}

.msg-presence.is-online {
    background: var(--kromeka-success);
}

.msg-thread-body,
.msg-thread-top,
.msg-thread-bottom {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
}

.msg-thread-body {
    flex-direction: column;
    gap: 0.15rem;
}

.msg-thread-top,
.msg-thread-bottom {
    justify-content: space-between;
    gap: 0.5rem;
}

.msg-thread-title,
.msg-thread-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-thread-title {
    font-weight: 600;
}

.msg-thread-time,
.msg-thread-preview {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.msg-unread {
    min-width: 1.3rem;
    height: 1.3rem;
    border-radius: 999px;
    background: var(--kromeka-red);
    color: var(--action-primary-text);
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.3rem;
}

.msg-list-empty {
    color: var(--text-muted);
    padding: 1.5rem 0.85rem;
}

.msg-conversation {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    position: relative;
    background: var(--bg-card);
    color: var(--text-main);
}

.msg-conversation-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 56px;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
}

.msg-conversation-heading {
    min-width: 0;
    flex: 1 1 auto;
}

.msg-conversation-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
}

.msg-conversation-subtitle,
.msg-typing {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.msg-back,
.msg-members-btn,
.msg-send,
.msg-attach,
.msg-jump,
.msg-fab {
    min-width: 44px;
    min-height: 44px;
}

.msg-back,
.msg-members-btn,
.msg-send,
.msg-attach {
    border: 0;
    background: transparent;
    color: var(--text-main);
    border-radius: 999px;
}

.msg-send,
.msg-fab {
    background: var(--action-primary-bg);
    color: var(--action-primary-text);
    border: 0;
}

.msg-back {
    display: none;
}

.msg-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.msg-day,
.msg-new-divider {
    align-self: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--hover-bg);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    margin: 0.4rem 0;
}

.msg-new-divider {
    color: var(--text-accent);
}

.msg-bubble {
    position: relative;
    max-width: min(78%, 38rem);
    align-self: flex-start;
    background: var(--hover-bg);
    color: var(--text-main);
    border-radius: 0.85rem;
    padding: 0.45rem 0.65rem 0.35rem;
}

.msg-bubble.is-own {
    align-self: flex-end;
    background: var(--action-primary-bg);
    color: var(--action-primary-text);
}

.msg-bubble.is-grouped {
    margin-top: -0.15rem;
}

.msg-bubble.is-deleted {
    opacity: 0.75;
    font-style: italic;
}

.msg-bubble.is-failed {
    outline: 1px solid var(--kromeka-red);
}

.msg-bubble-author,
.msg-bubble-meta,
.msg-seen,
.msg-quote {
    font-size: 0.75rem;
}

.msg-bubble-author {
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.msg-bubble-text {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.msg-bubble-meta,
.msg-seen {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
    opacity: 0.85;
    margin-top: 0.15rem;
}

.msg-quote {
    border-left: 3px solid currentColor;
    padding-left: 0.4rem;
    margin-bottom: 0.3rem;
    opacity: 0.9;
}

.msg-file {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
    color: inherit;
}

.msg-file--image img {
    max-width: 220px;
    max-height: 180px;
    border-radius: 0.5rem;
    display: block;
}

.msg-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.msg-reaction,
.msg-tool,
.msg-sheet-action,
.msg-sheet-reaction {
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    border-radius: 999px;
    min-height: 32px;
    padding: 0.1rem 0.45rem;
}

.msg-reaction.is-mine {
    border-color: var(--kromeka-red);
}

.msg-toolbar {
    display: none;
    position: absolute;
    top: -0.4rem;
    right: 0.3rem;
    gap: 0.2rem;
}

.msg-bubble:hover .msg-toolbar,
.msg-bubble:focus-within .msg-toolbar {
    display: flex;
}

.msg-react-picker {
    display: inline-flex;
    gap: 0.1rem;
}

.msg-add-results {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.msg-compose {
    border-top: 1px solid var(--border-color);
    padding: 0.5rem 0.65rem calc(0.5rem + env(safe-area-inset-bottom));
    background: var(--bg-card);
}

.chat-compose-form--dragover {
    outline: 2px dashed var(--kromeka-yellow);
}

.msg-compose-row {
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
}

.msg-compose textarea {
    flex: 1 1 auto;
    resize: none;
    max-height: 8rem;
    min-height: 44px;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: var(--bg-card);
    color: var(--text-main);
    padding: 0.55rem 0.75rem;
}

.msg-reply {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
    color: var(--text-muted);
}

.msg-jump {
    position: absolute;
    right: 1rem;
    bottom: 5.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--bg-card-header);
    color: var(--action-primary-text);
    padding: 0.35rem 0.75rem;
}

.msg-members {
    border-bottom: 1px solid var(--border-color);
    padding: 0.6rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.msg-member {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
}

.msg-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    z-index: 5;
}

.msg-sheet-reactions {
    display: flex;
    gap: 0.35rem;
}

.msg-sheet-reaction,
.msg-sheet-action {
    min-height: 44px;
}

.msg-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 1rem;
}

.msg-fab {
    display: none;
    position: absolute;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    width: 52px;
    height: 52px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    z-index: 2;
}

.chat-panel-slot,
.msg-conversation--compact {
    min-height: 28rem;
    height: 70vh;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    overflow: hidden;
}

.chat-panel-slot--fill,
.chat-panel-slot--fill .msg-conversation--compact {
    height: 100%;
    min-height: 0;
}

/* Project and customer log: the tab header sits above the frame, so the
   visible pane fills the remaining column instead of 100% of the column. */
.kromeka-log-panel {
    min-height: 0;
}

.kromeka-log-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-shrink: 0;
}

.kromeka-log-panel-header h5 {
    margin: 0;
    min-width: 0;
    color: var(--text-main);
}

.kromeka-log-panel-header .kromeka-segmented {
    flex: 0 0 auto;
}

.kromeka-log-panel-header .kromeka-segmented__item {
    min-height: 44px;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
}

.kromeka-log-panel-header .kromeka-side-note-count {
    font-variant-numeric: tabular-nums;
}

.kromeka-side-notes {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    color: var(--text-main);
}

.kromeka-side-notes__list,
.kromeka-side-notes__reader {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.kromeka-side-notes__rows {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.kromeka-side-note-row {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0.7rem 0.9rem;
    text-align: left;
    color: var(--text-main);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

.kromeka-side-note-row:hover,
.kromeka-side-note-row:focus-visible {
    background: var(--hover-bg);
}

.kromeka-side-note-row__title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    font-weight: 600;
}

.kromeka-side-note-row__title-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kromeka-side-note-row__lock {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.kromeka-side-note-row__meta,
.kromeka-side-notes__meta,
.kromeka-side-notes__more {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.kromeka-side-note-row__meta {
    display: block;
    margin-top: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kromeka-side-notes__more {
    flex-shrink: 0;
    margin: 0;
    padding: 0.65rem 0.9rem;
    border-top: 1px solid var(--border-color);
}

.kromeka-side-notes__empty {
    margin: auto;
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--text-muted);
}

.kromeka-side-notes__reader-top,
.kromeka-side-notes__reader-foot {
    flex-shrink: 0;
    padding: 0.5rem 1rem 0.75rem;
}

.kromeka-side-notes__reader-top {
    border-bottom: 1px solid var(--border-color);
}

.kromeka-side-notes__reader-foot {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.kromeka-side-notes__reader-foot .btn {
    width: 100%;
}

.kromeka-side-notes__back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    margin-bottom: 0.15rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    cursor: pointer;
}

.kromeka-side-notes__back:hover,
.kromeka-side-notes__back:focus-visible {
    color: var(--text-accent);
}

.kromeka-side-notes__title {
    margin: 0;
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 600;
}

.kromeka-side-notes__meta {
    margin: 0.2rem 0 0;
}

.kromeka-side-note-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0.9rem 1rem;
    color: var(--text-main);
    font-family: var(--note-font-family);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.kromeka-side-note-body :is(h1, h2, h3, h4) {
    margin: 0.75rem 0 0.25rem;
    color: var(--text-main);
    font-size: 1rem;
    line-height: 1.35;
}

.kromeka-side-note-body p,
.kromeka-side-note-body ul,
.kromeka-side-note-body ol {
    margin: 0 0 0.6rem;
}

.kromeka-side-note-body p:last-child,
.kromeka-side-note-body ul:last-child,
.kromeka-side-note-body ol:last-child {
    margin-bottom: 0;
}

.kromeka-side-note-body ul,
.kromeka-side-note-body ol {
    padding-left: 1.25rem;
}

.kromeka-side-note-body table {
    width: max-content;
    min-width: 100%;
    margin: 0.5rem 0;
    border-collapse: collapse;
}

.kromeka-side-note-body th,
.kromeka-side-note-body td {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    vertical-align: top;
}

.kromeka-side-note-body th {
    background: var(--bg-secondary);
    font-weight: 600;
}

.kromeka-side-note-body a {
    color: var(--text-accent);
}

.kromeka-side-note-body.is-loading {
    color: var(--text-muted);
}

.kromeka-side-note-body img,
.kromeka-side-note-body video,
.kromeka-side-note-body iframe {
    max-width: 100%;
    height: auto;
}

@media (min-width: 992px) {
    .kromeka-dashboard-log-column {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .kromeka-dashboard-log-column .kromeka-log-pane:not([hidden]) {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 28rem;
    }

    .kromeka-dashboard-log-column .chat-panel-slot--fill,
    .kromeka-dashboard-log-column .kromeka-side-notes {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
    }
}

@media (max-width: 991.98px) {
    .kromeka-dashboard-log-column .chat-panel-slot--fill,
    .kromeka-dashboard-log-column .chat-panel-slot--fill .msg-conversation--compact,
    .kromeka-dashboard-log-column .kromeka-side-notes {
        height: 70vh;
        min-height: 20rem;
    }
}

.kromeka-message-toast-host {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: min(360px, calc(100vw - 2rem));
    pointer-events: none;
}

.kromeka-message-toast {
    pointer-events: auto;
    cursor: pointer;
    margin: 0;
    color: var(--text-main);
    background: var(--bg-card);
}

.message-recipient-picker { position: relative; }
.message-recipient-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; min-height: 1.75rem; margin-bottom: 0.45rem; }
.message-recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 0.82rem;
}
.message-recipient-chip-meta { color: var(--text-muted); font-size: 0.74rem; }
.message-recipient-chip-remove { border: 0; background: transparent; color: var(--text-muted); min-width: 28px; min-height: 28px; }
.message-recipient-suggestions {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: calc(100% + 0.2rem);
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 0.45rem;
    background: var(--bg-card);
}
.message-recipient-suggestion {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-main);
    text-align: left;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
}
.message-recipient-suggestion:hover,
.message-recipient-suggestion:focus { background: var(--hover-bg); }
.message-recipient-suggestion-meta { color: var(--text-muted); font-size: 0.78rem; }

@media (max-width: 991.98px) {
    body.msg-app-page {
        height: var(--msg-vv-height, 100dvh);
        max-height: var(--msg-vv-height, 100dvh);
        transform: translateY(var(--msg-vv-offset, 0px));
    }

    .msg-app-shell {
        display: flex;
        flex-direction: column;
        height: auto;
        border: 0;
        border-radius: 0;
    }

    .msg-app-pane-chat {
        display: none;
    }

    .msg-app-shell.is-chat-open .msg-app-pane-threads {
        display: none;
    }

    .msg-app-shell.is-chat-open .msg-app-pane-chat {
        display: flex;
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        overflow: hidden;
    }

    .msg-app-shell.is-chat-open .msg-conversation {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }

    .msg-back,
    .msg-fab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .msg-new-desktop {
        display: none;
    }

    .msg-toolbar {
        display: none !important;
    }

    .msg-conversation-header {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .msg-filter,
    .msg-thread {
        min-height: 44px;
    }
}

@media (min-width: 992px) {
    .msg-sheet {
        display: none !important;
    }
}

/* css/screens/086-cpq-definition-classification-taxonomy-dialog.css */
/* ------------------------------------------------------------
   CPQ definition classification taxonomy dialog
   ------------------------------------------------------------ */
.cpq-taxonomy-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.cpq-taxonomy-table-wrap {
    max-height: min(50vh, 28rem);
    overflow: auto;
    margin-bottom: 0.75rem;
}

.cpq-taxonomy-col-sort {
    width: 5.5rem;
}

.cpq-taxonomy-col-active {
    min-width: 7rem;
}

.cpq-taxonomy-col-actions {
    min-width: 11rem;
}

.cpq-taxonomy-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.cpq-taxonomy-row-inactive td {
    opacity: 0.72;
}

.cpq-taxonomy-add-row {
    border-top: 1px solid var(--kromeka-light-grey);
    padding-top: 0.75rem;
}

[data-theme="dark"] .cpq-taxonomy-add-row {
    border-top-color: var(--kromeka-dark-grey);
}

.cpq-taxonomy-tabs .nav-link {
    color: var(--text-main);
}

.cpq-taxonomy-tabs .nav-link.active {
    color: var(--text-accent);
    border-color: var(--kromeka-light-grey) var(--kromeka-light-grey) transparent;
}

[data-theme="dark"] .cpq-taxonomy-tabs .nav-link.active {
    border-color: var(--kromeka-dark-grey) var(--kromeka-dark-grey) transparent;
}

/* css/components/087-product-categories-page-main-tabs-and-nested-sub.css */
/* ------------------------------------------------------------
   Product categories page — main tabs and nested sub list
   ------------------------------------------------------------ */
.product-category-tabs {
    overflow-x: auto;
    margin-bottom: 1rem;
}

.product-category-tabs .detail-tabs.kromeka-detail-tabs {
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
    margin-bottom: 0;
}

.product-category-subs {
    margin-top: 0.25rem;
    padding: 1rem;
    border: 1px solid var(--kromeka-surface-border);
    border-left: 4px solid var(--kromeka-red);
    border-radius: 0.5rem;
    background: var(--bg-card);
    color: var(--text-main);
}

.product-category-sub-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.product-category-sub {
    padding: 0.75rem;
    border: 1px solid var(--kromeka-surface-border);
    border-radius: 0.375rem;
    background: var(--bg-body);
}

.product-category-add-sub {
    border-top: 1px solid var(--kromeka-surface-border);
    padding-top: 0.75rem;
}

.product-category-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--text-muted);
}

.product-category-row--inactive {
    opacity: 0.72;
}

/* css/components/088-shared-page-chrome-dense-toolbar-meta-stat-strip.css */
/* ============================================================
   Shared page chrome — dense toolbar meta + stat strip
   Used by CPQ offer pages; safe for any detail/list page.
   ============================================================ */

.kromeka-page-toolbar__identity {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

/* Primary orientation under the title (customer, version code, etc.). */
.kromeka-page-toolbar__identity-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.45rem;
    min-width: 0;
    max-width: 100%;
}

.kromeka-page-toolbar__identity-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    max-width: 100%;
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

.kromeka-page-toolbar__identity-text {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

a.kromeka-page-toolbar__identity-link {
    color: var(--text-main);
    text-decoration: none;
}

a.kromeka-page-toolbar__identity-link:hover,
a.kromeka-page-toolbar__identity-link:focus {
    color: var(--text-main);
    text-decoration: underline;
}

.kromeka-page-toolbar__identity-item i {
    flex: 0 0 auto;
    font-size: 0.95rem;
    color: var(--text-accent);
}

.kromeka-page-toolbar__identity-sep {
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
}

/* Muted page context under the title/identity line (before meta chips). */
.kromeka-page-toolbar__subtitle {
    margin: 0;
    max-width: 42rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.35;
}

.kromeka-page-toolbar__subtitle p {
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Small context chips next to a page title (status, catalog, date). */
.kromeka-page-toolbar__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
}

.kromeka-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 22rem;
    padding: 0.05rem 0.4rem;
    border: 1px solid color-mix(in srgb, var(--kromeka-grey) 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--kromeka-grey) 10%, transparent);
    color: var(--text-main);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kromeka-meta-chip i {
    color: var(--text-muted);
}

.kromeka-meta-chip--emphasis {
    max-width: 28rem;
    padding: 0.15rem 0.55rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.kromeka-meta-chip--emphasis i {
    color: var(--text-accent);
}

[data-theme="dark"] .kromeka-meta-chip {
    border-color: var(--kromeka-dark-grey);
    background: color-mix(in srgb, var(--kromeka-dark-grey) 45%, transparent);
    color: var(--text-main);
}

/* Compact KPI row: replaces oversized overview cards. */
.kromeka-stat-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.kromeka-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.05rem;
    flex: 1 1 8.5rem;
    min-width: 7.5rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--kromeka-grey) 40%, transparent);
    border-left: 3px solid var(--kromeka-red);
    border-radius: 0.25rem;
    background: var(--bg-card);
    color: var(--text-main);
    text-decoration: none;
}

a.kromeka-stat:hover,
a.kromeka-stat:focus-visible {
    border-color: var(--kromeka-red);
    color: var(--text-main);
}

[data-theme="dark"] .kromeka-stat {
    border-color: var(--kromeka-dark-grey);
    border-left-color: var(--kromeka-yellow);
}

[data-theme="dark"] a.kromeka-stat:hover,
[data-theme="dark"] a.kromeka-stat:focus-visible {
    border-color: var(--kromeka-yellow);
}

.kromeka-stat__label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.25;
}

.kromeka-stat__value {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-main);
    overflow-wrap: anywhere;
}

.kromeka-stat__hint {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Single thin segmented bar for a status distribution. */
.kromeka-segment-bar {
    display: flex;
    width: 100%;
    height: 0.5rem;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--kromeka-grey) 22%, transparent);
}

.kromeka-segment-bar__part {
    height: 100%;
    min-width: 2px;
}

/* Segment + legend swatch colors reuse the status badge palette. */
.kromeka-segment-bar__part.status-draft,
.kromeka-segment-legend__swatch.status-draft { background-color: var(--kromeka-status-neutral); }
.kromeka-segment-bar__part.status-sent,
.kromeka-segment-legend__swatch.status-sent,
.kromeka-segment-bar__part.status-issued,
.kromeka-segment-legend__swatch.status-issued { background-color: var(--kromeka-status-info); }
.kromeka-segment-bar__part.status-accepted,
.kromeka-segment-legend__swatch.status-accepted { background-color: var(--kromeka-success); }
.kromeka-segment-bar__part.status-rejected,
.kromeka-segment-legend__swatch.status-rejected { background-color: var(--kromeka-status-danger); }
.kromeka-segment-bar__part.status-cancelled,
.kromeka-segment-legend__swatch.status-cancelled,
.kromeka-segment-bar__part.status-archived,
.kromeka-segment-legend__swatch.status-archived { background-color: var(--kromeka-status-muted); }

.kromeka-segment-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin-top: 0.35rem;
}

.kromeka-segment-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--text-main);
}

.kromeka-segment-legend__swatch {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 0.15rem;
    flex-shrink: 0;
}

.kromeka-segment-legend__count {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    .kromeka-stat {
        flex-basis: 100%;
    }
}

/* css/screens/089-offer-files-module-layout-slots-dropzone-tag-fil.css */
/* ============================================================
   Offer files module — layout slots, dropzone, tag filter, rows.
   Used at offer request scope and offer version scope.
   ============================================================ */

.kromeka-panel {
    border: 1px solid var(--kromeka-grey);
    border-radius: 0.3rem;
    background: var(--bg-card);
    overflow: hidden;
}

[data-theme="dark"] .kromeka-panel {
    border-color: var(--kromeka-dark-grey);
}

/* Panel headers are normally stacked; files panels want a single row. */
.kromeka-panel__header.flex-row {
    flex-direction: row;
}

.offer-files__slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 0.75rem;
    padding: 0.75rem;
    align-items: stretch;
}

.offer-files__slot {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--kromeka-grey) 40%, transparent);
    border-radius: 0.25rem;
    background: var(--bg-card);
    min-width: 0;
    height: 100%;
}

[data-theme="dark"] .offer-files__slot {
    border-color: var(--kromeka-dark-grey);
}

.offer-files__slot-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    flex-shrink: 0;
}

.offer-files__slot-title {
    font-weight: 600;
    color: var(--text-main);
    min-width: 0;
    line-height: 1.3;
}

.offer-files__slot-filename {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
}

.offer-files__slot-status {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2.6em;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.offer-files__slot-meta,
.offer-files__slot-empty,
.offer-files__slot-description {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0;
}

.offer-files__slot-empty {
    min-height: 2.6em;
}

.offer-files__slot-description {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.offer-files__slot-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    margin-top: auto;
    flex-shrink: 0;
}

.offer-files__slot-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    min-width: 0;
}

.offer-files__slot-desc-label {
    color: var(--text-main);
}

.offer-files__slot-file-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.offer-files__slot-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.offer-files__slot-browse {
    flex: 0 0 auto;
    margin-bottom: 0;
    cursor: pointer;
}

.offer-files__slot-selected-name {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-main);
    background-color: var(--input-bg);
    border-color: var(--input-border);
    cursor: default;
}

.offer-files__slot-selected-name:focus {
    box-shadow: none;
}

.offer-files__multi-upload-list {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--text-main);
}

.offer-files__multi-upload-list li {
    margin-bottom: 0.35rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.offer-files__multi-upload-slot {
    font-weight: 600;
}

.offer-files__multi-upload-filename {
    color: var(--text-muted);
}

.offer-files__slot-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.offer-files__slot-remove-form {
    flex: 0 0 auto;
    display: inline-flex;
}

.offer-files__slot-form .form-control {
    min-width: 0;
}

.offer-files__upload-body,
.offer-files__filters-body {
    padding: 0.75rem;
}

.offer-files__dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 1.1rem 0.75rem;
    border: 2px dashed color-mix(in srgb, var(--kromeka-grey) 55%, transparent);
    border-radius: 0.35rem;
    background: color-mix(in srgb, var(--kromeka-grey) 8%, transparent);
    cursor: pointer;
    text-align: center;
}

.offer-files__dropzone:hover,
.offer-files__dropzone:focus-visible,
.offer-files__dropzone.is-dragover {
    border-color: var(--kromeka-red);
    background: color-mix(in srgb, var(--kromeka-red) 8%, transparent);
    outline: none;
}

[data-theme="dark"] .offer-files__dropzone {
    border-color: var(--kromeka-dark-grey);
    background: color-mix(in srgb, var(--kromeka-dark-grey) 35%, transparent);
}

[data-theme="dark"] .offer-files__dropzone:hover,
[data-theme="dark"] .offer-files__dropzone:focus-visible,
[data-theme="dark"] .offer-files__dropzone.is-dragover {
    border-color: var(--kromeka-yellow);
    background: color-mix(in srgb, var(--kromeka-yellow) 12%, transparent);
}

.offer-files__dropzone-icon {
    font-size: 1.4rem;
    color: var(--text-muted);
}

.offer-files__dropzone-text {
    color: var(--text-main);
    font-size: 0.875rem;
}

.offer-files__dropzone-link {
    text-decoration: underline;
    font-weight: 600;
}

.offer-files__dropzone-hint {
    font-size: 0.7rem;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

/* The real input stays reachable for keyboard/AT but is visually hidden. */
.offer-files__file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.offer-files__upload-fields,
.offer-files__filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.offer-files__upload-fields {
    align-items: flex-start;
}

.offer-files__filter-row {
    margin-top: 0;
    align-items: flex-end;
}

.offer-files__upload-field,
.offer-files__filter-field {
    flex: 1 1 13rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.offer-files__upload-submit,
.offer-files__filter-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}

.offer-files__upload-submit-label {
    visibility: hidden;
}

.offer-files__upload-hint {
    margin-top: 0.35rem;
}

.offer-files__tag-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.7rem;
    padding-top: 0.6rem;
    border-top: 1px solid color-mix(in srgb, var(--kromeka-grey) 30%, transparent);
}

[data-theme="dark"] .offer-files__tag-bar {
    border-top-color: var(--kromeka-dark-grey);
}

.offer-files__tag-bar-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

.offer-files__tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--kromeka-grey) 50%, transparent);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 0.75rem;
    line-height: 1.4;
    cursor: pointer;
}

.offer-files__tag-chip:hover {
    border-color: var(--kromeka-red);
}

.offer-files__tag-chip.is-active {
    background: var(--kromeka-red);
    border-color: var(--kromeka-red);
    color: #ffffff;
}

.offer-files__tag-chip.is-active .offer-files__tag-count {
    color: rgba(255, 255, 255, 0.85);
}

.offer-files__archive-facet {
    border-color: color-mix(in srgb, var(--kromeka-yellow) 55%, var(--border-color));
}

.offer-files__archive-facet.is-active {
    background: var(--kromeka-yellow);
    border-color: var(--kromeka-yellow);
    color: var(--kromeka-dark);
}

.offer-files__archive-facet.is-active .offer-files__tag-count {
    color: var(--kromeka-dark);
}

[data-theme="dark"] .offer-files__archive-facet {
    border-color: color-mix(in srgb, var(--kromeka-yellow) 45%, var(--border-color));
}

[data-theme="dark"] .offer-files__archive-facet.is-active {
    background: var(--kromeka-yellow);
    border-color: var(--kromeka-yellow);
    color: var(--kromeka-dark);
}

.files-archive-facet.is-active {
    background: var(--kromeka-yellow);
    border-color: var(--kromeka-yellow);
    color: var(--kromeka-dark);
}

.files-row-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
}

[data-theme="dark"] .offer-files__tag-chip {
    border-color: var(--kromeka-dark-grey);
}

[data-theme="dark"] .offer-files__tag-chip:hover {
    border-color: var(--kromeka-yellow);
}

[data-theme="dark"] .offer-files__tag-chip.is-active {
    background: var(--kromeka-yellow);
    border-color: var(--kromeka-yellow);
    color: var(--kromeka-dark);
}

[data-theme="dark"] .offer-files__tag-chip.is-active .offer-files__tag-count {
    color: color-mix(in srgb, var(--kromeka-dark) 75%, transparent);
}

.offer-files__tag-count {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.offer-files__tag-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.offer-files__tag-hint {
    font-size: 0.7rem;
    color: var(--text-muted);
    flex: 1 1 12rem;
    min-width: 0;
}

.offer-files__row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--kromeka-grey) 28%, transparent);
}

.offer-files__row:last-child {
    border-bottom: 0;
}

[data-theme="dark"] .offer-files__row {
    border-bottom-color: var(--kromeka-dark-grey);
}

.offer-files__thumb {
    flex: 0 0 3rem;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--kromeka-grey) 35%, transparent);
    border-radius: 0.25rem;
    background: color-mix(in srgb, var(--kromeka-grey) 10%, transparent);
    overflow: hidden;
}

.offer-files__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.offer-files__thumb-icon {
    font-size: 1.25rem;
    color: var(--text-muted);
}

.offer-files__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.offer-files__name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.offer-files__name {
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.offer-files__description,
.offer-files__meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.offer-files__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.offer-files__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.02rem 0.4rem;
    border: 1px solid var(--kromeka-grey);
    border-radius: 999px;
    font-size: 0.7rem;
    color: var(--text-main);
}

.offer-files__tags-empty {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Scope badges: which version a file belongs to, and layout slot kind. */
.offer-files__scope,
.offer-files__kind {
    display: inline-flex;
    align-items: center;
    padding: 0.02rem 0.4rem;
    border-radius: 0.2rem;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.offer-files__scope {
    background: var(--kromeka-light-grey);
    color: var(--kromeka-dark);
}

[data-theme="dark"] .offer-files__scope {
    background: var(--kromeka-dark-grey);
    color: var(--kromeka-light-grey);
}

.offer-files__kind {
    background: var(--kromeka-red);
    color: #ffffff;
}

.offer-files__tag-edit {
    font-size: 0.7rem;
}

.offer-files__tag-editor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
}

.offer-files__tag-editor .form-control {
    flex: 1 1 12rem;
    min-width: 0;
}

.offer-files__actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-self: center;
    gap: 0.3rem;
}

.offer-files__empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--text-muted);
}

@media (max-width: 575.98px) {
    .offer-files__row {
        flex-wrap: wrap;
    }

    .offer-files__actions {
        width: 100%;
    }
}

/* css/components/090-shared-mobile-card-stack-for-list-pages-d-md-non.css */
/* ------------------------------------------------------------
   Shared mobile card stack for list pages (d-md-none companion
   to the desktop kromeka-data-table).
   ------------------------------------------------------------ */

.kromeka-mobile-cards {
    border-top: 1px solid var(--border-color);
}

.kromeka-mobile-card {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
}

.kromeka-mobile-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.kromeka-mobile-card__title {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.kromeka-mobile-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.kromeka-mobile-card__row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

/* Long values (notes, descriptions) need the full card width, so the label
   sits above the value instead of stealing a fixed 6.5rem column. */
.kromeka-mobile-card__row--stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
}

.kromeka-mobile-card__label {
    flex: 0 0 6.5rem;
    color: var(--text-muted);
}

.kromeka-mobile-card__row--stacked .kromeka-mobile-card__label {
    flex: 0 0 auto;
}

.kromeka-mobile-card__value {
    min-width: 0;
    overflow-wrap: anywhere;
}

.kromeka-mobile-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

/* Tab nav sizing when used directly under a dense toolbar. */
.detail-tabs.kromeka-detail-tabs {
    gap: 4px 14px;
    margin-bottom: 1rem;
}

.detail-tabs.kromeka-detail-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 6px 0;
}

/* css/screens/091-smart-product-creator-three-panel-linking-worksp.css */
/* ============================================================
   Smart Product Creator — three-panel linking workspace
   ============================================================ */

/* Fill the viewport: one dense chrome band (back + title + actions),
   then the three-panel workspace claims all leftover height. */
body.spc-page-active {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
}

body.spc-page-active > .kromeka-app-content {
    max-width: none;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: 0;
    padding-bottom: 0;
    gap: 0;
}

body.spc-page-active > .kromeka-app-content > .kromeka-app-content-inner {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

body.spc-page-active > footer {
    flex-shrink: 0;
    margin-top: 0 !important;
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
}

body.spc-page-active > footer p {
    margin-bottom: 0;
    font-size: 0.7rem;
    line-height: 1.15;
}

body.spc-page-active .kromeka-app-navbar {
    margin-bottom: 0 !important;
    flex-shrink: 0;
}

/* Yellow strip: back button + title + primary actions in one row. */
body.spc-page-active .kromeka-nav-back-breadcrumb-row {
    margin-bottom: 0 !important;
    flex-shrink: 0;
    min-height: 0;
    padding: 0.2rem 0;
    gap: 0.4rem !important;
    align-items: center !important;
    border-bottom: 1px solid color-mix(in srgb, var(--kromeka-grey) 40%, transparent);
}

[data-theme="dark"] body.spc-page-active .kromeka-nav-back-breadcrumb-row {
    border-bottom-color: var(--kromeka-dark-grey);
}

body.spc-page-active .kromeka-nav-back-breadcrumb-row .kromeka-nav-back {
    padding: 0.2rem 0.45rem;
    min-height: 1.85rem;
    line-height: 1;
}

body.spc-page-active .messages-container {
    margin-bottom: 0.25rem !important;
    flex-shrink: 0;
}

.spc-page {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.2rem;
}

/* Canonical name is .kromeka-page-toolbar (shared across pages);
   .spc-* selectors stay so the Smart Product Creator markup is untouched. */
.kromeka-page-toolbar,
.spc-page-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 0.6rem;
    margin: 0;
    padding: 0;
    min-width: 0;
    width: 100%;
}

.kromeka-page-toolbar__title,
.spc-page-toolbar__title {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    flex: 0 1 auto;
}

.kromeka-page-title,
.spc-page-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-accent);
    white-space: nowrap;
}

.kromeka-page-toolbar__actions,
.spc-page-toolbar__actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    min-width: 0;
    flex: 1 1 auto;
}

.kromeka-page-toolbar__actions .btn,
.spc-page-toolbar__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.45rem;
    min-height: 1.85rem;
    font-size: 0.8125rem;
    line-height: 1.2;
    white-space: nowrap;
}

.kromeka-page-toolbar__btn-label,
.spc-page-toolbar__btn-label {
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .kromeka-page-toolbar,
    .spc-page-toolbar {
        flex-wrap: wrap;
    }

    .kromeka-page-toolbar__actions,
    .spc-page-toolbar__actions {
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .kromeka-page-toolbar__btn-label,
    .spc-page-toolbar__btn-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .kromeka-page-toolbar__actions .btn,
    .spc-page-toolbar__actions .btn {
        min-width: 2rem;
        justify-content: center;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }
}

.spc-feedback {
    flex-shrink: 0;
    margin-bottom: 0 !important;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

.kromeka-page-toolbar__info,
.spc-info-btn {
    color: var(--text-muted);
    vertical-align: baseline;
    line-height: 1;
}

.kromeka-page-toolbar__info:hover,
.kromeka-page-toolbar__info:focus-visible,
.spc-info-btn:hover,
.spc-info-btn:focus-visible {
    color: var(--kromeka-yellow);
}

html:not([data-theme="dark"]) .kromeka-page-toolbar__info:hover,
html:not([data-theme="dark"]) .kromeka-page-toolbar__info:focus-visible {
    color: var(--text-accent);
}

.spc-mobile-tabs {
    flex-shrink: 0;
    margin-bottom: 0;
}

.spc-workspace {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.2fr;
    gap: 0;
    border: 1px solid var(--kromeka-grey);
    background: var(--bg-card);
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    margin-bottom: 0;
}

[data-theme="dark"] .spc-workspace {
    border-color: var(--kromeka-dark-grey);
}

.spc-panel {
    min-height: 0;
    border-right: 1px solid var(--kromeka-grey);
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
}

[data-theme="dark"] .spc-panel {
    border-right-color: var(--kromeka-dark-grey);
}

.spc-panel:last-child {
    border-right: 0;
}

.kromeka-panel__header,
.spc-panel__header {
    padding: 0.4rem 0.55rem;
    font-weight: 600;
    border-bottom: 1px solid var(--kromeka-grey);
    color: var(--text-card-header);
    background: var(--bg-card-header);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex-shrink: 0;
}

[data-theme="dark"] .kromeka-panel__header,
[data-theme="dark"] .spc-panel__header {
    border-bottom-color: var(--kromeka-dark-grey);
}

html:not([data-theme="dark"]) .kromeka-panel__header .btn.btn-outline-secondary,
html:not([data-theme="dark"]) .spc-panel__header .btn.btn-outline-secondary {
    color: var(--toolbar-label-text);
    border-color: rgba(255, 255, 255, 0.55);
    background-color: rgba(255, 255, 255, 0.08);
}

html:not([data-theme="dark"]) .kromeka-panel__header .btn.btn-outline-secondary:hover,
html:not([data-theme="dark"]) .kromeka-panel__header .btn.btn-outline-secondary:focus-visible,
html:not([data-theme="dark"]) .spc-panel__header .btn.btn-outline-secondary:hover,
html:not([data-theme="dark"]) .spc-panel__header .btn.btn-outline-secondary:focus-visible {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.8);
}

.spc-panel__header .spc-search {
    background: var(--bg-card);
    color: var(--text-main);
    border-color: color-mix(in srgb, var(--kromeka-grey) 55%, transparent);
}

.spc-panel__title-link {
    color: inherit;
    text-decoration: none;
}

.spc-panel__title-link:hover,
.spc-panel__title-link:focus-visible {
    color: inherit;
    text-decoration: underline;
}

.spc-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: flex-end;
}

.spc-panel__body {
    flex: 1 1 auto;
    overflow-y: auto;
    /* Viewport-fill layout: grow with the panel; do not force a tall floor. */
    min-height: 0;
}

.spc-row,
.spc-sub,
.spc-product {
    border-bottom: 1px solid color-mix(in srgb, var(--kromeka-grey) 35%, transparent);
    color: var(--text-main);
}

.spc-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
}

.spc-row.is-dragging,
.spc-sub.is-dragging {
    opacity: 0.55;
}

.spc-row.is-locked {
    opacity: 0.72;
}

.spc-row__main {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    min-width: 0;
    flex: 1 1 auto;
}

.spc-row__title-btn {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    text-align: left;
    color: inherit;
    min-width: 0;
}

.spc-row__title-btn:hover strong,
.spc-row__title-btn:focus-visible strong {
    color: var(--text-accent);
}

.spc-row__meta {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.35;
    word-break: break-word;
}

.spc-drag-handle {
    color: var(--text-muted);
    cursor: grab;
    user-select: none;
    line-height: 1.2;
    padding-top: 0.1rem;
}

/* Shared expandable list-row height across Parameters, Components, and Products panels. */
.spc-param-group__summary,
.spc-library__summary,
.spc-product__summary {
    padding: 0.45rem 0.65rem;
    align-items: center;
    line-height: 1.3;
}

.spc-param-group {
    border-bottom: 1px solid color-mix(in srgb, var(--kromeka-grey) 35%, transparent);
}

.spc-param-group__summary {
    display: flex;
    gap: 0.35rem;
    cursor: pointer;
    list-style: none;
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.9rem;
}

.spc-param-group__summary::-webkit-details-marker {
    display: none;
}

.spc-param-group__summary::before {
    content: '▸';
    color: var(--text-muted);
    font-size: 0.75rem;
    transition: transform 0.15s ease;
}

.spc-param-group[open] > .spc-param-group__summary::before {
    transform: rotate(90deg);
}

.spc-param-group__body .spc-param-row {
    padding-left: 1.35rem;
}

.spc-param-row.is-merge-target {
    outline: 2px solid var(--kromeka-yellow);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--kromeka-yellow) 12%, transparent);
}

.spc-badge {
    flex-shrink: 0;
    font-size: 0.72rem;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    background: color-mix(in srgb, var(--kromeka-grey) 25%, transparent);
    color: var(--text-main);
}

.spc-library {
    border-bottom: 1px solid color-mix(in srgb, var(--kromeka-grey) 35%, transparent);
}

.spc-library__summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-main);
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.spc-library__summary-main {
    min-width: 0;
}

.spc-library__actions,
.spc-sub__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.spc-sub__actions {
    margin-left: auto;
}

/* Beat global .btn-sm min-height (34px) so library rows match Parameters/Products. */
.spc-library__summary .btn.spc-library__add-sub.btn-sm,
.spc-library__summary .btn.spc-edit-name.btn-sm,
.spc-sub__head .btn.spc-sub__add-comp.btn-sm,
.spc-sub__head .btn.spc-edit-name.btn-sm {
    min-height: 0;
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    line-height: 1.2;
}

.spc-library__summary::-webkit-details-marker {
    display: none;
}

.spc-library__summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 0.35rem;
    color: var(--text-muted);
}

.spc-library[open] > .spc-library__summary::before {
    content: '▾';
}

.spc-sub {
    padding: 0.5rem 0.75rem 0.65rem;
    margin: 0 0.35rem 0.35rem;
    border: 1px solid transparent;
    border-radius: 0.35rem;
    background: color-mix(in srgb, var(--bg-body) 55%, var(--bg-card));
}

.spc-sub__head {
    display: flex;
    gap: 0.4rem;
    align-items: flex-start;
    margin-bottom: 0.35rem;
}

.spc-drop-zone,
.spc-product {
    position: relative;
}

.spc-drop-zone.is-drop-target,
.spc-sub.is-drop-target,
.spc-product.is-drop-target,
.spc-detail-drop.is-drop-target {
    outline: 2px dashed var(--kromeka-yellow);
    outline-offset: 1px;
    background: color-mix(in srgb, var(--kromeka-yellow) 12%, var(--bg-card));
}

.spc-drop-hint {
    display: none;
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.spc-drop-zone.is-drop-target .spc-drop-hint,
.spc-sub.is-drop-target .spc-drop-hint,
.spc-product.is-drop-target .spc-drop-hint,
.spc-detail-drop.is-drop-target .spc-drop-hint {
    display: block;
    color: var(--kromeka-dark);
}

[data-theme="dark"] .spc-drop-zone.is-drop-target .spc-drop-hint,
[data-theme="dark"] .spc-sub.is-drop-target .spc-drop-hint,
[data-theme="dark"] .spc-product.is-drop-target .spc-drop-hint,
[data-theme="dark"] .spc-detail-drop.is-drop-target .spc-drop-hint {
    color: var(--kromeka-yellow);
}

.spc-formula-param-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.cpq-formula-builder {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cpq-formula-builder__chips {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 16rem;
    overflow: auto;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 0.375rem;
    background: var(--bg-card);
}

.cpq-formula-chip-group__title {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted, #6c757d);
}

.cpq-formula-chip {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8rem;
}

button.cpq-formula-reference-insert {
    text-align: left;
    white-space: normal;
}

.spc-formula-help-box {
    font-size: 0.875rem;
}

.spc-formula-help-box code {
    color: var(--text-accent);
}

.spc-formula-ac {
    position: absolute;
    z-index: 1080;
    max-height: 12rem;
    overflow: auto;
    width: min(100%, 22rem);
    margin-top: 0.15rem;
}

#spc-formula-expression {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.spc-formula-preview {
    background: var(--bg-card);
}

.spc-formula-preview__result-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.35rem;
}

.spc-formula-preview__result-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.spc-formula-preview__result-value {
    font-size: 1.15rem;
    color: var(--text-main);
}

.spc-formula-preview__trace {
    min-height: 1.25rem;
}

.spc-formula-reference-modal .modal-body {
    background: var(--bg-card);
    color: var(--text-main);
}

/* Second modal stacked over an already-open modal (formula function reference). */
.kromeka-stacked-modal {
    z-index: 1065;
}

.modal-backdrop.kromeka-stacked-modal-backdrop {
    z-index: 1060;
}

.spc-formula-reference__syntax {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.82em;
    word-break: break-word;
}

.spc-formula-reference__table th {
    white-space: nowrap;
}

.spc-formula-reference__table td {
    vertical-align: top;
}

.spc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}

.spc-chip {
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--kromeka-grey) 55%, transparent);
    background: var(--bg-card);
    color: var(--text-main);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    font-size: 0.78rem;
    line-height: 1.35;
    max-width: 100%;
    word-break: break-word;
}

.spc-chip:hover,
.spc-chip:focus-visible {
    border-color: var(--kromeka-red);
    color: var(--text-accent);
}

[data-theme="dark"] .spc-chip:hover,
[data-theme="dark"] .spc-chip:focus-visible {
    border-color: var(--kromeka-yellow);
}

.spc-chip__meta {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.spc-chip-row-label {
    color: var(--text-muted);
    font-size: 0.68rem;
    margin-left: 0.2rem;
}

.spc-product {
    padding: 0;
    border: 1px solid transparent;
    /* Keep the same row separators as Parameters (.spc-row); the transparent
       border above is for drop-target / active outline and must not erase them. */
    border-bottom-color: color-mix(in srgb, var(--kromeka-grey) 35%, transparent);
}

.spc-product.is-active {
    background: color-mix(in srgb, var(--kromeka-yellow) 10%, var(--bg-card));
    border-color: color-mix(in srgb, var(--kromeka-yellow) 45%, transparent);
}

.spc-product__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.2rem 0.45rem;
    color: var(--text-main);
}

.spc-product__summary::-webkit-details-marker {
    display: none;
}

.spc-product__summary::before {
    content: '▸';
    color: var(--text-muted);
    flex-shrink: 0;
    line-height: 1.2;
}

.spc-product[open] > .spc-product__summary::before {
    content: '▾';
}

.spc-product__summary-main {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.4rem;
    min-width: 0;
    flex: 0 1 auto;
}

.spc-product__code {
    font-weight: 700;
    color: var(--text-main);
}

.spc-product__name {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.3;
    word-break: break-word;
}

.spc-product__counts {
    flex: 0 0 auto;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.3;
    white-space: nowrap;
}

.spc-product__body {
    padding: 0 0.55rem 0.45rem 1.35rem;
}

.spc-product__chips {
    gap: 0.2rem;
}

.spc-product__chips .spc-chip {
    padding: 0.1rem 0.4rem;
    font-size: 0.72rem;
}

.spc-product__actions {
    margin-top: 0.35rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}

.spc-product__actions .btn {
    min-height: 44px;
}

.spc-product .spc-drop-hint {
    margin: 0.3rem 0 0;
    font-size: 0.72rem;
}

.spc-panel[data-spc-panel="products"] .spc-panel__body.spc-products-pane,
.spc-products-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

.spc-products-list {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 5.5rem;
}

.spc-detail {
    border-top: 1px solid var(--kromeka-grey);
    background: var(--bg-card);
    height: 18rem;
    min-height: 10rem;
    max-height: 75%;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: relative;
}

[data-theme="dark"] .spc-detail {
    border-top-color: var(--kromeka-dark-grey);
}

.spc-detail__resize {
    height: 0.55rem;
    cursor: ns-resize;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--kromeka-grey) 35%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--kromeka-grey) 45%, transparent);
    position: relative;
}

.spc-detail__resize::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2.5rem;
    height: 0.2rem;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: var(--kromeka-grey);
}

.spc-detail__resize:hover,
.spc-detail__resize:focus-visible {
    background: color-mix(in srgb, var(--kromeka-yellow) 35%, transparent);
}

.spc-detail__resize:hover::after,
.spc-detail__resize:focus-visible::after {
    background: var(--kromeka-yellow);
}

.spc-detail__header {
    padding: 0.4rem 0.75rem 0.25rem;
    font-weight: 600;
    color: var(--text-main);
    flex-shrink: 0;
}

.spc-detail__tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0 0.5rem;
    flex-shrink: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--kromeka-grey) 35%, transparent);
}

.spc-detail__tab {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.4rem 0.65rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.spc-detail__tab:hover {
    color: var(--text-main);
}

.spc-detail__tab.is-active {
    color: var(--text-accent);
    border-bottom-color: var(--kromeka-red);
}

[data-theme="dark"] .spc-detail__tab.is-active {
    border-bottom-color: var(--kromeka-yellow);
}

.spc-detail__actions {
    padding: 0.35rem 0.75rem;
    flex-shrink: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--kromeka-grey) 30%, transparent);
}

.spc-detail__hint {
    max-width: 70%;
}

.spc-detail__body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.spc-detail-row,
.spc-formula-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--kromeka-grey) 30%, transparent);
    color: var(--text-main);
}

.spc-detail-row__actions,
.spc-formula-row__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    flex-shrink: 0;
}

body.spc-resizing {
    cursor: ns-resize;
    user-select: none;
}

body.spc-resizing iframe {
    pointer-events: none;
}

.spc-comp-grid-dialog {
    --bs-modal-width: min(96vw, 1600px);
}

.spc-comp-grid-dialog.is-expanded {
    --bs-modal-width: 100vw;
    max-width: 100%;
    width: 100%;
    height: 100%;
    margin: 0;
}

.spc-comp-grid-modal {
    min-height: 0;
}

.spc-comp-grid-dialog.is-expanded .spc-comp-grid-modal {
    height: 100%;
    min-height: 100%;
    border-radius: 0;
}

.spc-comp-grid-modal .modal-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.spc-comp-grid-modal .modal-header,
.spc-comp-grid-modal .modal-footer,
.spc-comp-grid-modal .spc-comp-grid-pager {
    flex-shrink: 0;
}

/* Grid area keeps a readable floor so an empty sub-category still shows the Add row and the
   scroll pocket, and the compact modal hugs its content instead of leaving a tall empty panel.
   Scoped selector beats .table-responsive:has(.kromeka-data-table) on max-height. */
.spc-comp-grid-modal .spc-comp-grid-scroll {
    min-height: 9rem;
    max-height: calc(90vh - 16rem);
    overflow: auto;
    flex: 1 1 auto;
}

.spc-comp-grid-dialog.is-expanded .spc-comp-grid-scroll {
    max-height: none;
}

@media (max-width: 991.98px) {
    #spc-comp-grid-expand {
        display: none;
    }
}

.spc-comp-grid-feedback {
    white-space: pre-line;
}

/* "Add existing components" picker: bounded scroll list of catalog matches. */
.spc-attach-comp-results {
    max-height: 22rem;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background: var(--bg-card);
}

.spc-attach-comp-item {
    padding: 0.4rem 0.65rem 0.4rem 2.1rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
}

.spc-attach-comp-item:last-child {
    border-bottom: 0;
}

.spc-attach-comp-item .form-check-label {
    display: block;
    color: var(--text-main);
    cursor: pointer;
}

.spc-attach-comp-name {
    display: block;
}

.spc-attach-comp-meta {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.spc-comp-grid-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
}

.spc-comp-grid-pager[hidden] {
    display: none !important;
}

.spc-comp-grid-pager-range {
    color: var(--text-muted);
}

.spc-comp-grid-pager-nav,
.spc-comp-grid-pager-size {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.spc-comp-grid-page-input {
    width: 3.5rem;
}

.spc-comp-grid-page-size {
    width: auto;
}

@media (max-width: 575.98px) {
    .spc-comp-grid-pager {
        flex-direction: column;
        align-items: stretch;
    }
}

/*
 * Header: thead sticks to the top so every column label, including Actions,
 * stays visible while scrolling down. Actions th also sticks right so the
 * locked column header stays in the corner. Body Actions cells stay at
 * z-index 5, below this header (7 / 8).
 * Covering inset shadow matches .pp-unplanned-report-table so rows never bleed through.
 */
.spc-comp-grid-table.kromeka-data-table thead.spc-comp-grid-sticky-head,
.spc-comp-grid-table.kromeka-data-table thead {
    position: sticky;
    top: 0;
    z-index: 7;
    isolation: isolate;
    background-color: var(--kromeka-data-table-thead-bg);
}

.spc-comp-grid-table.kromeka-data-table thead tr {
    background-color: var(--kromeka-data-table-thead-bg);
}

.spc-comp-grid-table.kromeka-data-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: var(--kromeka-data-table-thead-bg) !important;
    color: var(--kromeka-data-table-thead-text) !important;
    box-shadow:
        inset 0 0 0 9999px var(--kromeka-data-table-thead-bg),
        inset 0 -1px 0 0 color-mix(in srgb, var(--kromeka-data-table-thead-text) 22%, transparent);
}

.spc-comp-grid-table.kromeka-data-table thead th.spc-comp-grid-actions-col {
    position: sticky;
    top: 0;
    right: 0;
    z-index: 8;
    background-color: var(--kromeka-data-table-thead-bg) !important;
    box-shadow:
        inset 0 0 0 9999px var(--kromeka-data-table-thead-bg),
        inset 0 -1px 0 0 color-mix(in srgb, var(--kromeka-data-table-thead-text) 22%, transparent),
        -6px 0 8px -4px color-mix(in srgb, var(--kromeka-dark) 28%, transparent);
}

.spc-comp-grid-table.kromeka-data-table thead th.spc-comp-grid-actions-col .kromeka-th-label,
.spc-comp-grid-table.kromeka-data-table thead th.spc-comp-grid-actions-col .kromeka-th-label-wrap > .kromeka-th-label {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

.spc-comp-grid-sortable {
    cursor: pointer;
}

.spc-comp-grid-sort-ind {
    font-size: 0.7em;
    color: var(--kromeka-yellow);
    margin-left: 0.15rem;
}

.spc-comp-grid-add-row {
    background: color-mix(in srgb, var(--kromeka-yellow) 18%, var(--bg-card));
}

.spc-comp-grid-add-row > td {
    border-top: 2px dashed color-mix(in srgb, var(--kromeka-yellow) 55%, var(--border-color));
}

.spc-comp-grid-add-row > td:not(.spc-comp-grid-actions-col) {
    background: inherit;
}

/* Shared-component marker next to Code: text badge plus tooltip, never colour alone. */
.spc-comp-grid-code-cell {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.spc-comp-grid-code-cell .spc-sheet-input {
    flex: 1 1 auto;
    min-width: 0;
}

.spc-comp-grid-shared-badge {
    flex: 0 0 auto;
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--kromeka-dark);
    background: var(--kromeka-light-grey);
    cursor: help;
    line-height: 1.2;
    white-space: nowrap;
}

[data-theme="dark"] .spc-comp-grid-shared-badge,
[data-bs-theme="dark"] .spc-comp-grid-shared-badge {
    color: var(--kromeka-dark);
    background: var(--kromeka-yellow);
    border-color: var(--kromeka-yellow);
}

.spc-comp-grid-row-actions {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
}

/* Parameter detail modal: fill the window; scroll values; pin add/edit form */
.spc-param-detail-dialog {
    max-width: min(96vw, 900px);
    margin: 0.75rem auto;
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
}

.spc-param-detail-modal {
    height: calc(100vh - 1.5rem);
    height: calc(100dvh - 1.5rem);
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    display: flex;
    flex-direction: column;
}

.spc-param-detail-modal > .modal-header,
.spc-param-detail-modal > .modal-footer {
    flex: 0 0 auto;
}

.spc-param-detail-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.spc-param-detail-identity,
#spc-param-detail-feedback,
#spc-param-detail-meta-readonly {
    flex: 0 0 auto;
}

.spc-param-values-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.spc-param-values-heading {
    flex: 0 0 auto;
}

.spc-param-values-scroll {
    flex: 1 1 auto;
    min-height: 12rem;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background: var(--bg-card);
}

.spc-param-values-scroll .list-group {
    border-radius: 0;
}

.spc-param-values-scroll .list-group-item {
    border-left: 0;
    border-right: 0;
    color: var(--text-main);
    background: var(--bg-card);
}

.spc-param-values-scroll .list-group-item:first-child {
    border-top: 0;
}

.spc-param-values-scroll .list-group-item:last-child {
    border-bottom: 0;
}

.spc-param-value-form {
    flex: 0 0 auto;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .spc-param-values-scroll {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .spc-param-values-scroll .list-group-item {
    color: var(--text-main);
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .spc-param-value-form {
    border-top-color: var(--border-color);
}

.spc-comp-grid-table {
    --spc-sheet-border: color-mix(in srgb, var(--kromeka-grey) 40%, transparent);
    width: max-content;
    min-width: 100%;
    max-width: none;
}

.spc-comp-grid-table th,
.spc-comp-grid-table td {
    white-space: nowrap;
    vertical-align: middle;
    border-color: var(--spc-sheet-border);
    min-width: 7rem;
    padding: 0.2rem 0.35rem;
}

.spc-comp-grid-table th:first-child,
.spc-comp-grid-table td:first-child {
    min-width: 8rem;
}

/*
 * Sheet cells are inputs, not ellipsized list text. Global
 * .kromeka-data-table tbody td[data-col-key] { max-width: 0; overflow: hidden }
 * clips those controls into a sliver; Actions already opted out, which left
 * only the Add button visible. Keep min-width so columns scroll instead.
 */
.spc-comp-grid-table.kromeka-data-table tbody td[data-col-key] {
    overflow: visible;
    text-overflow: unset;
    max-width: none;
    min-height: 2.25rem;
}

.spc-comp-grid-table tbody tr[data-kromeka-filter-empty-row] td {
    white-space: normal;
    min-width: 0;
    max-width: none;
}

.spc-comp-grid-modal .kromeka-filter-chips {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
}

.spc-comp-grid-modal [data-kromeka-filter-count-host] {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
}

/* Sticky Actions: locked ~120px; header+body pin right together; opaque covering fill */
.spc-comp-grid-actions-col {
    min-width: 120px;
    width: 120px;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

.spc-comp-grid-table th.spc-comp-grid-actions-col,
.spc-comp-grid-table td.spc-comp-grid-actions-col {
    min-width: 120px;
    width: 120px;
}

.spc-comp-grid-table td.spc-comp-grid-actions-col {
    position: sticky;
    right: 0;
    z-index: 5;
    background-color: var(--bg-card) !important;
    box-shadow:
        inset 0 0 0 9999px var(--bg-card),
        -6px 0 8px -4px color-mix(in srgb, var(--kromeka-dark) 28%, transparent);
}

.spc-comp-grid-table .spc-comp-grid-actions-col .table-action-icon-btn {
    position: relative;
    z-index: 1;
    padding: 0.2rem 0.35rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.spc-comp-grid-table .spc-comp-grid-actions-col .table-action-icon-btn .bi {
    font-size: 1rem;
    line-height: 1;
    color: inherit;
}

.spc-comp-grid-add-row .spc-comp-grid-actions-col {
    background-color: color-mix(in srgb, var(--kromeka-yellow) 18%, var(--bg-card)) !important;
    box-shadow:
        inset 0 0 0 9999px color-mix(in srgb, var(--kromeka-yellow) 18%, var(--bg-card)),
        -6px 0 8px -4px color-mix(in srgb, var(--kromeka-dark) 28%, transparent);
}

.spc-comp-grid-row.is-saved > .spc-comp-grid-actions-col {
    background-color: color-mix(in srgb, var(--kromeka-yellow) 12%, var(--bg-card)) !important;
    box-shadow:
        inset 0 0 0 9999px color-mix(in srgb, var(--kromeka-yellow) 12%, var(--bg-card)),
        -6px 0 8px -4px color-mix(in srgb, var(--kromeka-dark) 28%, transparent);
}

.spc-comp-grid-row.is-error > .spc-comp-grid-actions-col {
    background-color: color-mix(in srgb, var(--kromeka-red) 12%, var(--bg-card)) !important;
    box-shadow:
        inset 0 0 0 9999px color-mix(in srgb, var(--kromeka-red) 12%, var(--bg-card)),
        -6px 0 8px -4px color-mix(in srgb, var(--kromeka-dark) 28%, transparent);
}

.spc-comp-grid-table .spc-sheet-input {
    min-width: 5.5rem;
    min-height: 1.75rem;
    padding: 0.15rem 0.35rem;
    font-size: 0.8125rem;
    line-height: 1.25;
}

/* Multi-value attribute list: wider than the cell so long names stay readable. */
.spc-comp-grid-multi-dropdown {
    min-width: 22rem !important;
    max-width: calc(100vw - 2rem);
}

.spc-comp-grid-multi-dropdown .select2-results__option {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Passive components stay in the catalog but must be obvious in the grid. */
.spc-comp-grid-table tbody tr.spc-comp-grid-row.is-passive > td {
    background: color-mix(in srgb, var(--kromeka-red) 16%, var(--bg-card));
}

.spc-comp-grid-table tbody tr.spc-comp-grid-row.is-passive > td:first-child {
    box-shadow: inset 3px 0 0 var(--kromeka-red);
}

.spc-comp-grid-table tbody tr.spc-comp-grid-row.is-passive td[data-col-key="is_active"] .spc-sheet-input {
    color: var(--text-danger);
    font-weight: 600;
}

/* Shared Excel-like sheet selection (KromekaSheetNav defaults) */
.kromeka-sheet-cell-selected,
.cpq-configurable-table td.kromeka-sheet-cell-selected,
.cpq-parameters-table td.kromeka-sheet-cell-selected {
    background: color-mix(in srgb, var(--kromeka-yellow) 38%, var(--bg-card)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kromeka-yellow) 80%, transparent);
}

[data-theme="dark"] .kromeka-sheet-cell-selected,
[data-theme="dark"] .cpq-configurable-table td.kromeka-sheet-cell-selected,
[data-theme="dark"] .cpq-parameters-table td.kromeka-sheet-cell-selected {
    background: color-mix(in srgb, var(--kromeka-yellow) 32%, var(--bg-card, #2c2c2a)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kromeka-yellow) 70%, transparent);
}

.kromeka-sheet-cell-active,
.cpq-configurable-table td.kromeka-sheet-cell-active,
.cpq-parameters-table td.kromeka-sheet-cell-active {
    outline: 2px solid var(--kromeka-yellow);
    outline-offset: -2px;
    z-index: 3;
    position: relative;
}

/* Edit mode: drop the selected-cell wash so the blinking caret is obvious. */
.kromeka-sheet-cell-editing,
.kromeka-sheet-cell-editing.kromeka-sheet-cell-selected,
.kromeka-sheet-cell-editing.kromeka-sheet-cell-active,
.cpq-configurable-table td.kromeka-sheet-cell-editing,
.cpq-parameters-table td.kromeka-sheet-cell-editing {
    background: var(--bg-card, #fff) !important;
    box-shadow: inset 0 0 0 2px var(--kromeka-dark);
    outline: 2px solid var(--kromeka-yellow);
    outline-offset: -2px;
    z-index: 4;
    position: relative;
}

[data-theme="dark"] .kromeka-sheet-cell-editing,
[data-theme="dark"] .kromeka-sheet-cell-editing.kromeka-sheet-cell-selected,
[data-theme="dark"] .kromeka-sheet-cell-editing.kromeka-sheet-cell-active,
[data-theme="dark"] .cpq-configurable-table td.kromeka-sheet-cell-editing,
[data-theme="dark"] .cpq-parameters-table td.kromeka-sheet-cell-editing {
    background: var(--bg-card, #2c2c2a) !important;
    box-shadow: inset 0 0 0 2px var(--kromeka-yellow);
    outline-color: var(--kromeka-yellow);
}

.kromeka-sheet-cell-editing .kromeka-sheet-input,
.kromeka-sheet-cell-editing .spc-sheet-input,
.kromeka-sheet-cell-editing .cpq-cfg-input,
.kromeka-sheet-cell-editing input.flatpickr-alt-input {
    background: var(--bg-card, #fff);
    color: var(--text-main, #333);
    caret-color: var(--kromeka-dark);
}

[data-theme="dark"] .kromeka-sheet-cell-editing .kromeka-sheet-input,
[data-theme="dark"] .kromeka-sheet-cell-editing .spc-sheet-input,
[data-theme="dark"] .kromeka-sheet-cell-editing .cpq-cfg-input,
[data-theme="dark"] .kromeka-sheet-cell-editing input.flatpickr-alt-input {
    background: var(--bg-card, #2c2c2a);
    color: var(--text-main, #ededed);
    caret-color: var(--text-main, #ededed);
}

/* Clipboard source after Ctrl/Cmd+C — stays while navigating/pasting (Excel-like).
   Copied never inherits the live yellow fill. Dashed red is the source marker;
   yellow outline is only the destination cursor. */
.kromeka-sheet-cell-copied {
    outline: 2px dashed var(--kromeka-red);
    outline-offset: -2px;
    z-index: 2;
    position: relative;
}

.kromeka-sheet-cell-copied.kromeka-sheet-cell-selected,
.kromeka-sheet-cell-copied.kromeka-sheet-cell-selected.kromeka-sheet-cell-active {
    background: var(--bg-card, #fff) !important;
    box-shadow: none;
    outline: 2px dashed var(--kromeka-red);
    outline-offset: -2px;
}

[data-theme="dark"] .kromeka-sheet-cell-copied.kromeka-sheet-cell-selected,
[data-theme="dark"] .kromeka-sheet-cell-copied.kromeka-sheet-cell-selected.kromeka-sheet-cell-active {
    background: var(--bg-card, #2c2c2a) !important;
}

.kromeka-sheet-cell-copied.kromeka-sheet-cell-active,
.kromeka-sheet-cell-copied.kromeka-sheet-cell-readonly-active {
    outline: 2px dashed var(--kromeka-red);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 2px var(--kromeka-yellow);
    z-index: 3;
}

[data-theme="dark"] .kromeka-sheet-cell-copied {
    outline-color: color-mix(in srgb, var(--kromeka-red) 85%, #fff);
}

.kromeka-sheet-cell-editing.kromeka-sheet-cell-copied,
.kromeka-sheet-cell-editing.kromeka-sheet-cell-copied.kromeka-sheet-cell-selected,
.kromeka-sheet-cell-editing.kromeka-sheet-cell-copied.kromeka-sheet-cell-active {
    background: var(--bg-card, #fff) !important;
    box-shadow: inset 0 0 0 2px var(--kromeka-dark);
    outline: 2px solid var(--kromeka-yellow);
    outline-offset: -2px;
    z-index: 4;
}

[data-theme="dark"] .kromeka-sheet-cell-editing.kromeka-sheet-cell-copied,
[data-theme="dark"] .kromeka-sheet-cell-editing.kromeka-sheet-cell-copied.kromeka-sheet-cell-selected,
[data-theme="dark"] .kromeka-sheet-cell-editing.kromeka-sheet-cell-copied.kromeka-sheet-cell-active {
    background: var(--bg-card, #2c2c2a) !important;
    box-shadow: inset 0 0 0 2px var(--kromeka-yellow);
    outline-color: var(--kromeka-yellow);
}

/* Read-only navigable cells: gray focus so users see position without implying edit. */
.kromeka-sheet-cell-readonly-active {
    outline: 2px solid color-mix(in srgb, var(--kromeka-grey) 75%, var(--kromeka-dark, #1d1d1b));
    outline-offset: -2px;
    z-index: 2;
    position: relative;
    background: color-mix(in srgb, var(--kromeka-grey) 22%, var(--bg-card, #fff)) !important;
    color: var(--text-main, #333);
}

[data-theme="dark"] .kromeka-sheet-cell-readonly-active {
    outline-color: color-mix(in srgb, var(--kromeka-grey) 80%, #fff);
    background: color-mix(in srgb, var(--kromeka-grey) 28%, var(--bg-card, #2c2c2a)) !important;
    color: var(--text-main, #ededed);
}

.pp-table td[data-sheet-readonly="1"] {
    cursor: default;
}

.kromeka-sheet-table.kromeka-sheet-dragging,
.kromeka-sheet-table.kromeka-sheet-dragging * {
    user-select: none;
}

/* A disabled control must not swallow the click that selects its cell. */
td[data-sheet-cell] input:disabled,
td[data-sheet-cell] select:disabled,
td[data-sheet-cell] textarea:disabled {
    pointer-events: none;
}

.kromeka-sheet-table .kromeka-sheet-input {
    min-width: 4.5rem;
}

/* Production Planning: column widths own sizing; do not force 4.5rem min on every input. */
.pp-table.kromeka-sheet-table .kromeka-sheet-input,
.pp-table.kromeka-sheet-table .pp-inline-input {
    min-width: 0;
}

.kromeka-sheet-table select.kromeka-sheet-input.kromeka-sheet-select-open {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 40;
    min-width: 12rem;
    width: max(100%, 12rem);
    max-height: 16rem;
    background: var(--bg-card, #fff);
    color: var(--text-main, #333);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--kromeka-dark, #1d1d1b) 35%, transparent);
}

.kromeka-sheet-table td.kromeka-sheet-select-host,
.pp-table.kromeka-sheet-table td.pp-team-cell {
    position: relative;
    overflow: visible;
}

.pp-table.kromeka-sheet-table select.pp-team-inline-select {
    min-width: 5.5rem;
    width: 100%;
    cursor: pointer;
}

.kromeka-sheet-cell-saving .kromeka-sheet-input {
    opacity: 0.7;
}

.kromeka-sheet-cell-saved {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kromeka-yellow) 70%, transparent);
}

.kromeka-sheet-cell-error {
    box-shadow: inset 0 0 0 1px var(--kromeka-red);
}

.cpq-parameters-table td[data-sheet-cell] {
    min-width: 5.5rem;
    vertical-align: middle;
}

.cpq-parameters-table__name-cell {
    cursor: pointer;
}

.cpq-parameters-table__name-cell:hover .fw-semibold {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.spc-comp-grid-row.is-saving .spc-sheet-input {
    opacity: 0.7;
}

.spc-comp-grid-row.is-saved {
    background: color-mix(in srgb, var(--kromeka-yellow) 12%, var(--bg-card));
}

.spc-comp-grid-row.is-error {
    background: color-mix(in srgb, var(--kromeka-red) 12%, var(--bg-card));
}

.spc-mobile-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
    flex-shrink: 0;
}

.spc-mobile-tab {
    appearance: none;
    border: 1px solid var(--kromeka-grey);
    background: var(--bg-card);
    color: var(--text-main);
    padding: 0.35rem 0.35rem;
    border-radius: 0.3rem;
    font-weight: 600;
    font-size: 0.875rem;
    min-height: 2.25rem;
}

.spc-mobile-tab.is-active {
    border-color: var(--kromeka-red);
    color: #fff;
    background: var(--kromeka-red);
}

[data-theme="dark"] .spc-mobile-tab.is-active {
    border-color: var(--kromeka-yellow);
    color: var(--kromeka-dark);
    background: var(--kromeka-yellow);
}

@media (max-width: 991.98px) {
    .spc-workspace {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .spc-panel {
        border-right: 0;
        border-bottom: 1px solid var(--kromeka-grey);
        display: none;
        min-height: 0;
    }

    [data-theme="dark"] .spc-panel {
        border-bottom-color: var(--kromeka-dark-grey);
    }

    .spc-panel.is-mobile-active {
        display: flex;
        flex: 1 1 auto;
        min-height: clamp(18rem, 55vh, 40rem);
        min-height: clamp(18rem, 55dvh, 40rem);
        overflow: auto;
    }

    .spc-panel:last-child {
        border-bottom: 0;
    }

    /* Products tab full-width: list | setup side-by-side */
    .spc-panel[data-spc-panel="products"].is-mobile-active .spc-products-pane {
        display: grid;
        grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        align-items: stretch;
    }

    .spc-panel[data-spc-panel="products"].is-mobile-active .spc-products-list {
        flex: none;
        min-height: 0;
        height: 100%;
        overflow-y: auto;
        border-right: 1px solid color-mix(in srgb, var(--kromeka-grey) 45%, transparent);
    }

    [data-theme="dark"] .spc-panel[data-spc-panel="products"].is-mobile-active .spc-products-list {
        border-right-color: var(--kromeka-dark-grey);
    }

    .spc-panel[data-spc-panel="products"].is-mobile-active .spc-detail {
        border-top: 0;
        height: auto;
        max-height: none;
        min-height: 0;
        flex: none;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .spc-panel[data-spc-panel="products"].is-mobile-active .spc-detail__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    .spc-panel[data-spc-panel="products"].is-mobile-active .spc-detail__resize {
        display: none;
    }

    .spc-panel[data-spc-panel="products"].is-mobile-active .spc-product__body {
        padding-left: 0.55rem;
    }

    .spc-panel[data-spc-panel="products"].is-mobile-active .spc-product__chips {
        display: none;
    }

    .spc-panel[data-spc-panel="products"].is-mobile-active .spc-drop-hint {
        display: none;
    }
}

@media (max-width: 575.98px) {
    /* Phone: stack list above setup; keep dense cards */
    .spc-panel[data-spc-panel="products"].is-mobile-active .spc-products-pane {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
    }

    .spc-panel[data-spc-panel="products"].is-mobile-active .spc-products-list {
        flex: 0 1 38%;
        max-height: 40%;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--kromeka-grey) 45%, transparent);
    }

    [data-theme="dark"] .spc-panel[data-spc-panel="products"].is-mobile-active .spc-products-list {
        border-bottom-color: var(--kromeka-dark-grey);
    }

    .spc-panel[data-spc-panel="products"].is-mobile-active .spc-detail {
        flex: 1 1 auto;
        min-height: 12rem;
        border-top: 0;
    }

    .spc-panel[data-spc-panel="products"].is-mobile-active .spc-product__chips {
        display: flex;
    }
}

@media (max-width: 991.98px), (max-height: 37.5rem) {
    body.spc-page-active {
        display: block;
        height: auto;
        max-height: none;
        overflow: visible;
    }

    body.spc-page-active > .kromeka-app-content,
    body.spc-page-active > .kromeka-app-content > .kromeka-app-content-inner,
    body.spc-page-active .spc-page,
    body.spc-page-active .spc-workspace {
        height: auto;
        max-height: none;
        overflow: visible;
        flex: none;
    }

    body.spc-page-active .modal-content {
        max-height: calc(100dvh - 1rem);
        overflow: auto;
    }
}

@media (max-height: 37.5rem) {
    .spc-panel[data-spc-panel="products"].is-mobile-active .spc-products-pane {
        display: flex;
        flex-direction: column;
    }

    .spc-panel[data-spc-panel="products"].is-mobile-active .spc-products-list,
    .spc-panel[data-spc-panel="products"].is-mobile-active .spc-detail {
        max-height: none;
        height: auto;
        flex: 0 1 auto;
        overflow: visible;
    }
}

/* css/screens/092-smart-product-creator-import-export-hub.css */
/* ------------------------------------------------------------
   Smart Product Creator — Import / Export hub
   ------------------------------------------------------------ */
.spc-io-choice {
    text-align: left;
    min-height: 44px;
}

.spc-io-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--kromeka-light-grey);
    color: var(--text-main);
}

[data-theme="dark"] .spc-io-summary-row {
    border-bottom-color: var(--kromeka-dark-grey);
}

.spc-io-summary-label {
    color: var(--text-muted);
}

.spc-io-summary-value {
    font-weight: 600;
    color: var(--text-main);
}

.spc-io-review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.65rem;
}

.spc-io-review-card {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    min-height: 7rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--kromeka-grey);
    border-radius: 0.375rem;
    background: var(--bg-card);
    color: var(--text-main);
}

.spc-io-review-card.is-kept {
    border-left-color: var(--kromeka-yellow);
}

.spc-io-review-card.has-problems {
    border-left-color: var(--kromeka-red);
}

.spc-io-review-card__count {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-main);
}

.spc-io-review-card__label {
    font-weight: 600;
    color: var(--text-main);
}

.spc-io-review-card__help {
    margin-top: auto;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.3;
}

.spc-io-coverage {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background: var(--bg-card);
    color: var(--text-muted);
}

.spc-io-options {
    display: grid;
    gap: 0.65rem;
}

.spc-io-option {
    min-height: 4.5rem;
    margin: 0;
    padding: 0.75rem 0.75rem 0.75rem 2.4rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background: var(--bg-card);
    color: var(--text-main);
    cursor: pointer;
}

.spc-io-option.is-selected {
    border-color: var(--kromeka-yellow);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--kromeka-yellow) 35%, transparent);
}

.spc-io-option .form-check-input {
    margin-top: 0.2rem;
    margin-left: -1.55rem;
}

.spc-io-option .form-check-input:checked {
    border-color: var(--kromeka-red);
    background-color: var(--kromeka-red);
}

.spc-io-option .form-check-input:focus {
    border-color: var(--kromeka-yellow);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--kromeka-yellow) 30%, transparent);
}

.spc-io-option .form-check-label {
    display: block;
    cursor: pointer;
}

.spc-io-option__title,
.spc-io-option__help {
    display: block;
}

.spc-io-option__title {
    font-weight: 600;
    color: var(--text-main);
}

.spc-io-option__help {
    margin-top: 0.2rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.spc-io-details {
    color: var(--text-main);
}

.spc-io-details > summary {
    display: list-item;
    min-height: 44px;
    padding: 0.6rem 0;
    cursor: pointer;
    color: var(--text-main);
    font-weight: 600;
}

.spc-io-message-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    max-height: 220px;
    overflow: auto;
}

.spc-io-conflict-samples {
    max-height: 16rem;
    overflow: auto;
    padding-right: 0.25rem;
}

.spc-io-error-panel {
    background: var(--bg-card);
    color: var(--text-main);
}

.spc-io-error-panel__copy {
    flex: 1 1 18rem;
    min-width: 0;
}

.spc-io-clamp {
    overflow-wrap: anywhere;
}

.spc-io-expand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 0 0.35rem;
    border: 0;
    background: transparent;
    color: var(--text-main);
    font-weight: 600;
    text-decoration: underline;
    vertical-align: baseline;
}

.spc-io-expand:hover,
.spc-io-expand:focus {
    color: var(--text-accent);
}

.spc-io-result-counts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem 1rem;
    margin: 0 0 1rem;
}

.spc-io-result-counts dt {
    margin: 0;
    color: var(--text-muted);
}

.spc-io-result-counts dd {
    margin: 0;
    font-weight: 600;
    color: var(--text-main);
    text-align: right;
}

#spc-io-step-result.is-failed #spc-io-result-title {
    color: var(--text-danger);
}

.spc-io-message {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
    border-left: 3px solid var(--kromeka-grey);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 0.9rem;
}

.spc-io-message-error {
    border-left-color: var(--kromeka-red);
}

.spc-io-message-warning {
    border-left-color: var(--kromeka-yellow);
}

.spc-io-message-info {
    border-left-color: var(--kromeka-grey);
}

.spc-io-missing-subs-panel {
    background: var(--bg-card);
    color: var(--text-main);
}

.spc-io-missing-subs-table th,
.spc-io-missing-subs-table td {
    color: var(--text-main);
    vertical-align: top;
}

.spc-io-missing-subs-table textarea.form-control {
    min-height: 44px;
}

.spc-io-missing-sub-name {
    font-weight: 600;
    color: var(--text-main);
    overflow-wrap: anywhere;
}

#spcIoHubModal [data-spc-io-action].is-loading {
    pointer-events: none;
}

@media (max-width: 575.98px) {
    .spc-io-review-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #spcIoHubModal .spc-io-step .btn {
        min-height: 44px;
    }

    .spc-io-error-panel [data-spc-io-download-errors] {
        width: 100%;
    }
}

/* css/components/093-shared-table-row-height-presets-kromekarowheight.css */
/* ------------------------------------------------------------
   Shared table row-height presets (KromekaRowHeight)
   A table opts in with data-row-height="compact|normal|comfortable"
   and consumes the variables in its own cell rules, so density is
   defined once instead of per page.
   ------------------------------------------------------------ */
[data-row-height="compact"] {
    /* Compact ≈ Deadline Flatpickr alt-input outer height (0 pad around the box). */
    --kromeka-row-h: 20px;
    --kromeka-row-pad-y: 0px;
    --kromeka-row-input-pad-y: 0;
}

[data-row-height="normal"] {
    --kromeka-row-h: 30px;
    --kromeka-row-pad-y: 3px;
    --kromeka-row-input-pad-y: 0.15rem;
}

[data-row-height="comfortable"] {
    --kromeka-row-h: 38px;
    --kromeka-row-pad-y: 6px;
    --kromeka-row-input-pad-y: 0.3rem;
}

/* Row-height picker inside a column-settings (gear) menu. */
.kromeka-row-height-group {
    width: 100%;
}

/* Bootstrap's .btn-outline-secondary.active fill is not brand-safe on dark
   surfaces, so the selected preset uses brand red with white text. */
.kromeka-row-height-btn[aria-pressed="true"],
.kromeka-row-height-btn[aria-pressed="true"]:hover,
.kromeka-row-height-btn[aria-pressed="true"]:focus {
    background-color: var(--kromeka-red);
    border-color: var(--kromeka-red);
    color: #fff;
}

/* css/components/094-integration-api-system-admin-keys-request-log.css */
/* ------------------------------------------------------------
   Integration API System Admin (keys + request log)
   ------------------------------------------------------------ */
.kromeka-api-key-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    min-width: 7.5rem;
}

.kromeka-api-key-actions .btn,
.kromeka-api-key-actions form {
    width: 100%;
    margin: 0;
}

.kromeka-api-log-path {
    max-width: 28rem;
    overflow-wrap: anywhere;
}

.kromeka-api-log-json {
    max-height: 28rem;
    overflow: auto;
    margin: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-body);
    color: var(--text-main);
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.8125rem;
}

.kromeka-api-example:last-child {
    margin-bottom: 0 !important;
}

.kromeka-api-example .kromeka-api-log-json {
    max-height: 12rem;
}

.kromeka-api-log-meta dt {
    color: var(--text-muted);
    font-weight: 500;
}

.kromeka-api-log-meta dd {
    color: var(--text-main);
}

.kromeka-api-status-2xx,
.kromeka-api-status-4xx,
.kromeka-api-status-5xx,
.kromeka-api-status-other,
.kromeka-api-status-ok {
    color: #fff;
}

.kromeka-api-status-2xx,
.kromeka-api-status-ok {
    background-color: var(--kromeka-dark);
    color: var(--kromeka-yellow);
}

.kromeka-api-status-4xx {
    background-color: var(--kromeka-red);
    color: #fff;
}

.kromeka-api-status-5xx,
.kromeka-api-status-other {
    background-color: var(--kromeka-dark-grey);
    color: #fff;
}

[data-theme="dark"] .kromeka-api-status-2xx,
[data-theme="dark"] .kromeka-api-status-ok {
    background-color: var(--kromeka-yellow);
    color: var(--kromeka-dark);
}

/* css/screens/095-offer-version-price-list-items-workspace-focus-m.css */
/* ============================================================
 * Offer version Price List — items workspace (focus mode)
 * Hides page chrome so Add Item + table + Cost/Price totals
 * fill the viewport. Not the removed table-fullscreen system.
 * ============================================================ */

.cpq-offer-items-focus-bar {
    display: none;
}

body.cpq-offer-items-focus {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
}

html:has(body.cpq-offer-items-focus) {
    height: 100%;
    overflow: hidden;
}

body.cpq-offer-items-focus > .kromeka-app-navbar,
body.cpq-offer-items-focus > footer,
body.cpq-offer-items-focus .kromeka-nav-back-breadcrumb-row,
body.cpq-offer-items-focus .cpq-offer-version-heading,
body.cpq-offer-items-focus .kromeka-stat-strip,
body.cpq-offer-items-focus .cpq-offer-version-settings,
body.cpq-offer-items-focus .kromeka-detail-tabs,
body.cpq-offer-items-focus .offer-files__slots,
body.cpq-offer-items-focus .cpq-offer-items-card > .card-footer,
body.cpq-offer-items-focus .cpq-offer-items-card > .card-body > p {
    display: none !important;
}

body.cpq-offer-items-focus > .kromeka-app-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    overflow: hidden;
}

body.cpq-offer-items-focus > .kromeka-app-content > .kromeka-app-content-inner {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.cpq-offer-items-focus .cpq-offer-items-focus-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-shrink: 0;
    padding: 0.4rem 0.75rem;
    margin-bottom: 0.5rem;
    background-color: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--kromeka-surface-border, var(--border-color));
    border-radius: 0.25rem;
}

body.cpq-offer-items-focus .cpq-offer-items-pane {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cpq-offer-items-workspace > .cpq-configurable-items-workspace {
    display: none;
}

body.cpq-offer-focus-configure .cpq-offer-items-pane {
    display: none !important;
}

body.cpq-offer-focus-configure .cpq-offer-items-workspace > .cpq-configurable-items-workspace {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

body.cpq-offer-items-focus.cpq-offer-focus-configure .cpq-offer-items-pane {
    display: none !important;
}

body.cpq-offer-items-focus.cpq-offer-focus-configure .cpq-offer-items-workspace > .cpq-configurable-items-workspace {
    display: flex;
    flex: 1 1 0%;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

body.cpq-offer-items-focus.cpq-offer-focus-configure [data-cpq-offer-items-summary-btn] {
    display: none !important;
}

body.cpq-offer-items-focus .cpq-offer-items-focus-bar__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex-shrink: 0;
}

body.cpq-offer-items-focus .cpq-offer-items-focus-bar__identity {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
}

body.cpq-offer-items-focus .cpq-offer-items-focus-bar__offer {
    font-weight: 700;
    color: var(--text-main);
}

body.cpq-offer-items-focus .cpq-offer-items-focus-bar__version {
    color: var(--text-muted);
    font-size: 0.875rem;
}

body.cpq-offer-items-focus .cpq-offer-items-workspace {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.cpq-offer-items-focus .cpq-offer-items-card {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 0.75rem !important;
    overflow: hidden;
}

body.cpq-offer-items-focus .cpq-offer-items-card > .card-header {
    flex-shrink: 0;
}

body.cpq-offer-items-focus .cpq-offer-items-card > .card-body {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.cpq-offer-items-focus .cpq-offer-version-add-item-bar {
    flex-shrink: 0;
}

/* JS wraps .table-responsive in .kromeka-hscroll-wrap; the wrap must take
   leftover height or the table keeps max-height: calc(100vh - 250px) and
   paints over Cost/Price Summary. Same pattern as Production Planning. */
body.cpq-offer-items-focus .cpq-offer-items-card .kromeka-hscroll-wrap {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.cpq-offer-items-focus .cpq-offer-items-card .table-responsive,
body.cpq-offer-items-focus .cpq-offer-items-card .kromeka-hscroll-wrap > .table-responsive.kromeka-hscroll-main {
    flex: 1 1 0%;
    min-height: 0;
    max-height: none;
    overflow: auto;
}

body.cpq-offer-items-focus .cpq-offer-items-financial {
    flex: 0 0 auto;
    min-height: 0;
    max-height: 45vh;
    overflow: auto;
    margin-bottom: 0 !important;
}

body.cpq-offer-items-focus .cpq-offer-items-financial > [class*="col-"] {
    min-height: 0;
    overflow: auto;
}

body.cpq-offer-items-focus .cpq-offer-items-financial .card {
    min-height: 0;
    overflow: auto;
}

body.cpq-offer-items-focus.cpq-offer-items-summary-collapsed .cpq-offer-items-financial {
    display: none !important;
}

body.cpq-offer-items-focus.cpq-offer-items-summary-collapsed .cpq-offer-items-card {
    margin-bottom: 0 !important;
}

.cpq-offer-builder-mode-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    min-width: 0;
}

body.cpq-offer-items-focus .cpq-offer-builder-mode-bar,
body.cpq-configurable-items-focus .cpq-offer-builder-mode-bar {
    flex-shrink: 0;
}

.cpq-offer-builder-mode-bar .cpq-cfg-focus-tabs {
    display: none;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: thin;
}

.cpq-offer-builder-mode-bar .cpq-cfg-focus-tabs::-webkit-scrollbar {
    height: 0.35rem;
}

.cpq-offer-builder-mode-bar .cpq-cfg-focus-tabs::-webkit-scrollbar-thumb {
    background-color: var(--kromeka-grey);
    border-radius: 0.25rem;
}

body.cpq-offer-focus-configure .cpq-offer-builder-mode-bar .cpq-cfg-focus-tabs,
body.cpq-offer-builder-mode-prices .cpq-offer-builder-mode-bar .cpq-cfg-focus-tabs {
    display: flex;
}

.cpq-offer-builder-mode-bar .cpq-cfg-focus-tab {
    flex: 0 0 auto;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-main);
    background-color: var(--bg-card);
    border-color: var(--kromeka-surface-border, var(--border-color));
}

.cpq-offer-focus-view-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
}

body.cpq-offer-focus-configure .cpq-offer-focus-view-tabs::after {
    content: "";
    width: 1px;
    height: 1.25rem;
    margin-left: 0.2rem;
    background-color: var(--kromeka-surface-border, var(--border-color));
    flex: 0 0 auto;
    align-self: center;
}

.cpq-offer-focus-view-tab {
    flex: 0 0 auto;
    color: var(--text-main);
    background-color: var(--bg-card);
    border-color: var(--kromeka-surface-border, var(--border-color));
}

.cpq-offer-focus-view-tab[aria-selected="true"],
body.cpq-offer-items-focus .cpq-offer-focus-view-tab[aria-selected="true"],
body.cpq-configurable-items-focus .cpq-offer-focus-view-tab[aria-selected="true"],
.cpq-offer-builder-mode-bar .cpq-cfg-focus-tab[aria-selected="true"] {
    background-color: var(--kromeka-red);
    border-color: var(--kromeka-red);
    color: #fff;
}

@media (max-width: 991.98px), (max-height: 37.5rem) {
    html:has(body.cpq-offer-items-focus),
    body.cpq-offer-items-focus {
        height: auto;
        max-height: none;
        overflow: auto;
    }

    body.cpq-offer-items-focus > .kromeka-app-content,
    body.cpq-offer-items-focus > .kromeka-app-content > .kromeka-app-content-inner,
    body.cpq-offer-items-focus .cpq-offer-items-pane,
    body.cpq-offer-items-focus .cpq-offer-items-workspace,
    body.cpq-offer-items-focus .cpq-offer-items-card,
    body.cpq-offer-items-focus .cpq-offer-items-card > .card-body,
    body.cpq-offer-items-focus .cpq-offer-items-card .kromeka-hscroll-wrap {
        height: auto;
        max-height: none;
        overflow: visible;
        flex: none;
    }

    body.cpq-offer-items-focus .cpq-offer-items-card .table-responsive,
    body.cpq-offer-items-focus .cpq-offer-items-card .kromeka-hscroll-wrap > .table-responsive.kromeka-hscroll-main {
        min-height: 18rem;
        max-height: clamp(18rem, 55vh, 40rem);
        max-height: clamp(18rem, 55dvh, 40rem);
        overflow: auto;
    }

    body.cpq-offer-items-focus .cpq-offer-items-focus-bar,
    body.cpq-configurable-items-focus .cpq-cfg-focus-bar {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    body.cpq-offer-items-focus .cpq-offer-items-focus-bar__identity {
        flex: 1 1 12rem;
        min-width: 0;
        max-width: 100%;
    }

    body.cpq-offer-items-focus .cpq-offer-items-focus-bar__offer,
    body.cpq-offer-items-focus .cpq-offer-items-focus-bar__version {
        overflow-wrap: anywhere;
    }

    body.cpq-offer-items-focus .cpq-offer-items-focus-bar__actions,
    body.cpq-offer-items-focus [data-cpq-offer-items-focus-btn] {
        flex-shrink: 0;
    }
}

/* css/components/096-configurable-items-workspace-focus-mode.css */
/* ============================================================
 * Configurable Items workspace (focus mode)
 * Hides page chrome; one product-type group at a time with tabs.
 * ============================================================ */

.cpq-cfg-focus-bar {
    display: none;
}

body.cpq-configurable-items-focus {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
}

html:has(body.cpq-configurable-items-focus) {
    height: 100%;
    overflow: hidden;
}

body.cpq-configurable-items-focus > .kromeka-app-navbar,
body.cpq-configurable-items-focus > footer,
body.cpq-configurable-items-focus .kromeka-nav-back-breadcrumb-row,
body.cpq-configurable-items-focus .cpq-offer-version-heading,
body.cpq-configurable-items-focus .kromeka-stat-strip,
body.cpq-configurable-items-focus .cpq-offer-version-settings,
body.cpq-configurable-items-focus .kromeka-detail-tabs,
body.cpq-configurable-items-focus .cpq-cfg-tab-intro {
    display: none !important;
}

.cpq-cfg-parameters-focus-btn {
    flex: 0 0 auto;
}

body.cpq-configurable-items-focus > .kromeka-app-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    overflow: hidden;
}

body.cpq-configurable-items-focus > .kromeka-app-content > .kromeka-app-content-inner {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.cpq-configurable-items-focus .cpq-cfg-focus-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-shrink: 0;
    padding: 0.4rem 0.75rem;
    margin-bottom: 0.5rem;
    background-color: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--kromeka-surface-border, var(--border-color));
    border-radius: 0.25rem;
}

body.cpq-configurable-items-focus .cpq-cfg-focus-bar__identity {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
    flex-shrink: 0;
}

body.cpq-configurable-items-focus .cpq-cfg-focus-bar__offer {
    font-weight: 700;
    color: var(--text-main);
}

body.cpq-configurable-items-focus .cpq-cfg-focus-bar__version {
    color: var(--text-muted);
    font-size: 0.875rem;
}

body.cpq-configurable-items-focus .cpq-cfg-focus-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: thin;
}

body.cpq-configurable-items-focus .cpq-cfg-focus-tab {
    flex: 0 0 auto;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-main);
    background-color: var(--bg-card);
    border-color: var(--kromeka-surface-border, var(--border-color));
}

body.cpq-configurable-items-focus .cpq-cfg-focus-tab[aria-selected="true"] {
    background-color: var(--kromeka-red);
    border-color: var(--kromeka-red);
    color: #fff;
}

body.cpq-configurable-items-focus .cpq-cfg-focus-bar__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

body.cpq-configurable-items-focus .cpq-configurable-items-workspace {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.cpq-configurable-items-focus .cpq-configurable-items-panel-host,
body.cpq-configurable-items-focus #cpq-cfg-groups-host {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.cpq-configurable-items-focus #cpq-cfg-definition-load-feedback,
body.cpq-configurable-items-focus #cpq-cfg-restore-all-feedback {
    flex-shrink: 0;
}

body.cpq-configurable-items-focus .cpq-cfg-definition-group:not(.cpq-cfg-definition-group--focus-active) {
    display: none !important;
}

body.cpq-configurable-items-focus .cpq-cfg-definition-group--focus-active {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 0 !important;
}

body.cpq-configurable-items-focus .cpq-cfg-definition-group--focus-active > .card-header {
    display: none !important;
}

body.cpq-configurable-items-focus .cpq-cfg-definition-group--focus-active > .cpq-cfg-definition-body {
    display: flex !important;
    flex: 1 1 0%;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

body.cpq-configurable-items-focus .cpq-cfg-definition-group--focus-active .cpq-cfg-parameters-table-card {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.cpq-configurable-items-focus .cpq-cfg-definition-group--focus-active .cpq-cfg-parameters-table-card > .card-header {
    flex-shrink: 0;
}

body.cpq-configurable-items-focus .cpq-cfg-definition-group--focus-active .cpq-cfg-parameters-table-card > .card-body {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.cpq-configurable-items-focus .cpq-cfg-definition-group--focus-active .cpq-cfg-add-item-bar,
body.cpq-configurable-items-focus .cpq-cfg-definition-group--focus-active .cpq-cfg-add-item-feedback {
    flex: 0 0 auto;
}

/* The horizontal-scroll wrap sits between the card and the table.
   It has to take the leftover height, and the table inside it has to
   scroll, or the rows are clipped and there is no vertical scrollbar. */
body.cpq-configurable-items-focus .cpq-cfg-definition-group--focus-active .kromeka-hscroll-wrap {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.cpq-configurable-items-focus .cpq-cfg-definition-group--focus-active .table-responsive,
body.cpq-configurable-items-focus .cpq-cfg-definition-group--focus-active .kromeka-hscroll-wrap > .table-responsive.kromeka-hscroll-main {
    flex: 1 1 0%;
    min-height: 0;
    max-height: none;
    overflow: auto;
}

body.cpq-offer-builder-grouped .cpq-cfg-definition-group:not(.cpq-cfg-definition-group--focus-active) {
    display: none !important;
}

body.cpq-offer-focus-configure:not(.cpq-offer-builder-mode-prices) .cpq-cfg-component-prices-card {
    display: none !important;
}

body.cpq-offer-builder-mode-prices .cpq-cfg-parameters-table-card {
    display: none !important;
}

body.cpq-offer-builder-mode-prices .cpq-cfg-component-prices-card {
    display: block;
}

tr.cpq-offer-item-row--selected > td:first-child,
tr.cpq-cfg-data-row--selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--kromeka-red);
}

.cpq-offer-configure-drawer.offcanvas.offcanvas-end {
    width: min(44rem, 100vw);
}

@media (min-width: 992px) {
    .cpq-offer-configure-drawer.offcanvas.offcanvas-end {
        width: min(52rem, 92vw);
    }
}

#configure-drawer-master-link {
    margin-top: 0.35rem;
}

@media (max-width: 991.98px), (max-height: 37.5rem) {
    html:has(body.cpq-configurable-items-focus),
    body.cpq-configurable-items-focus {
        height: auto;
        max-height: none;
        overflow: auto;
    }

    body.cpq-configurable-items-focus > .kromeka-app-content,
    body.cpq-configurable-items-focus > .kromeka-app-content > .kromeka-app-content-inner,
    body.cpq-configurable-items-focus .cpq-cfg-definition-group--focus-active > .cpq-cfg-definition-body,
    body.cpq-configurable-items-focus .cpq-cfg-definition-group--focus-active .cpq-cfg-parameters-table-card,
    body.cpq-configurable-items-focus .cpq-cfg-definition-group--focus-active .cpq-cfg-parameters-table-card > .card-body {
        height: auto;
        max-height: none;
        overflow: visible;
        flex: none;
    }

    body.cpq-configurable-items-focus .cpq-cfg-definition-group--focus-active .table-responsive,
    body.cpq-configurable-items-focus .cpq-cfg-definition-group--focus-active .kromeka-hscroll-wrap {
        min-height: 18rem;
        max-height: clamp(18rem, 55vh, 40rem);
        max-height: clamp(18rem, 55dvh, 40rem);
        overflow: auto;
    }

    body.cpq-configurable-items-focus .cpq-cfg-focus-bar {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    body.cpq-configurable-items-focus .cpq-cfg-focus-bar__identity {
        flex: 1 1 12rem;
        min-width: 0;
        max-width: 100%;
        flex-shrink: 1;
    }

    body.cpq-configurable-items-focus .cpq-cfg-focus-bar__offer,
    body.cpq-configurable-items-focus .cpq-cfg-focus-bar__version {
        overflow-wrap: anywhere;
    }
}

#configure-modal-body .cpq-offer-configure-form {
    padding-top: 0.25rem;
}

/* css/screens/097-offer-version-price-list-alternating-row-colors.css */
/* ============================================================
 * Offer version Price List — alternating row colors
 * Inputs inherit the row tint so stripes stay visible.
 * ============================================================ */

.cpq-offer-price-list-table {
    --cpq-offer-items-row-odd-bg: color-mix(in srgb, var(--kromeka-light-grey) 55%, var(--bg-card, #fff));
    --cpq-offer-items-row-even-bg: var(--bg-card, #fff);
}

[data-theme="dark"] .cpq-offer-price-list-table {
    --cpq-offer-items-row-odd-bg: var(--table-striped-bg, #323230);
    --cpq-offer-items-row-even-bg: var(--bg-card, #2c2c2a);
}

.cpq-offer-price-list-table tbody tr:nth-of-type(odd) > *,
[data-theme="dark"] .table.table-striped.cpq-offer-price-list-table > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--cpq-offer-items-row-odd-bg);
}

.cpq-offer-price-list-table tbody tr:nth-of-type(even) > *,
[data-theme="dark"] .table.table-striped.cpq-offer-price-list-table > tbody > tr:nth-of-type(even) > * {
    background-color: var(--cpq-offer-items-row-even-bg);
}

.cpq-offer-price-list-table tbody tr:nth-of-type(odd) td:not(.kromeka-sheet-cell-selected):not(.kromeka-sheet-cell-active):not(.kromeka-sheet-cell-editing) .form-control,
.cpq-offer-price-list-table tbody tr:nth-of-type(odd) td:not(.kromeka-sheet-cell-selected):not(.kromeka-sheet-cell-active):not(.kromeka-sheet-cell-editing) .kromeka-sheet-input {
    background-color: var(--cpq-offer-items-row-odd-bg) !important;
}

.cpq-offer-price-list-table tbody tr:nth-of-type(even) td:not(.kromeka-sheet-cell-selected):not(.kromeka-sheet-cell-active):not(.kromeka-sheet-cell-editing) .form-control,
.cpq-offer-price-list-table tbody tr:nth-of-type(even) td:not(.kromeka-sheet-cell-selected):not(.kromeka-sheet-cell-active):not(.kromeka-sheet-cell-editing) .kromeka-sheet-input {
    background-color: var(--cpq-offer-items-row-even-bg) !important;
}

.cpq-offer-price-list-table tfoot tr > * {
    background-color: var(--bg-card, #fff);
}

[data-theme="dark"] .cpq-offer-price-list-table tfoot tr > * {
    background-color: var(--bg-card, #2c2c2a);
}

#cpq-offer-current-version > .card-header {
    min-height: calc((var(--kromeka-card-header-pad-y) * 2) + 34px);
    flex-wrap: nowrap;
}

.cpq-current-version-create {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.cpq-current-version-create-label {
    margin: 0;
    color: var(--toolbar-label-text);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.cpq-current-version-source {
    min-width: 8.5rem;
    width: 12rem;
    max-width: 16rem;
    height: 34px;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.cpq-current-version-create .btn {
    min-height: 34px;
    flex: 0 0 auto;
}

.cpq-current-version-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.25rem;
    padding: 0.1rem 0.15rem;
    margin: 0;
    color: inherit;
    text-decoration: none;
    border-radius: var(--bs-border-radius, 0.375rem);
}

.cpq-current-version-summary:hover,
.cpq-current-version-summary:focus-visible {
    background-color: var(--hover-bg);
    color: inherit;
}

.cpq-current-version-id,
.cpq-current-version-fact {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.cpq-current-version-fact-label {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.cpq-current-version-fact-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cpq-current-version-open {
    margin-left: auto;
}

@media (max-width: 767.98px) {
    #cpq-offer-current-version > .card-header {
        flex-wrap: wrap;
    }

    .cpq-current-version-create {
        width: 100%;
    }

    .cpq-current-version-source {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
    }

    .cpq-current-version-open {
        margin-left: 0;
    }
}

/* ============================================================
 * Unit cost / Unit list price
 * The input keeps the plain number. This label shows €4,870
 * until the cell is in edit mode.
 * ============================================================ */

.kromeka-money-cell {
    position: relative;
}

.kromeka-money-display {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 11ch;
    max-width: 11ch;
    height: 100%;
    margin: 0;
    padding: 0.25rem 0.5rem;
    border: var(--bs-border-width, 1px) solid transparent;
    border-radius: var(--bs-border-radius-sm, 0.25rem);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-main);
    background: transparent;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    z-index: 1;
}

.cpq-offer-price-list-table td:not(.kromeka-sheet-cell-editing) input.kromeka-money-input {
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: transparent;
}

.cpq-offer-price-list-table td:not(.kromeka-sheet-cell-editing) input.kromeka-money-input::selection {
    background-color: transparent;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.cpq-offer-price-list-table td.kromeka-sheet-cell-editing .kromeka-money-display {
    display: none;
}

/* css/components/099-color-swatches.css */
/* Data-driven colors. The template sets --kromeka-swatch; size lives here. */

[style*="--kromeka-swatch"] {
    background-color: var(--kromeka-swatch);
}

.kromeka-swatch {
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
    flex-shrink: 0;
}

.kromeka-swatch--xs {
    width: 12px;
    height: 12px;
}

.kromeka-swatch--sm {
    width: 18px;
    height: 18px;
}

.kromeka-swatch--md {
    width: 20px;
    height: 20px;
}

.kromeka-swatch--lg {
    width: 32px;
    height: 32px;
    cursor: pointer;
}

/* css/screens/100-product-workspace.css */
/* Shared product and work order header. */

.product-workspace {
    margin-bottom: 1.5rem;
}

.product-workspace__heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem 1.5rem;
    margin-bottom: 0.75rem;
}

.product-workspace__title {
    margin-bottom: 0.25rem;
}

.product-workspace__status {
    flex: 0 0 auto;
}

.product-workspace__codes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin: 0;
}

.product-workspace__codes > div {
    min-width: 7rem;
}

.product-workspace__codes dt {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.product-workspace__codes dd {
    margin: 0;
    color: var(--text-main);
    font-weight: 600;
}

.product-workspace__revisions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.product-workspace__revision,
.product-workspace__new-revision .btn {
    min-height: 44px;
}

.product-workspace__revision {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    color: var(--text-main);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    text-decoration: none;
}

.product-workspace__revision.is-active {
    border-color: var(--kromeka-red);
    font-weight: 600;
}

.product-workspace__new-revision {
    margin: 0;
}

@media (max-width: 575.98px) {
    .product-workspace__codes {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .product-workspace__codes > div {
        min-width: 0;
    }
}

.product-definition-diff-col-field {
    width: 20%;
}

.product-definition-diff-col-value {
    width: 40%;
}

.product-definition-diff-value {
    white-space: pre-wrap;
}

.product-field-file-preview {
    max-width: 200px;
    max-height: 200px;
    border-radius: 4px;
}

/* css/components/101-system-administration-and-permission-matrix.css */
/* ------------------------------------------------------------
   System Administration workspace and the department
   permission matrix. These rules lived in the messages
   stylesheet until 5.0.0; they belong with the screens
   that use them.
   ------------------------------------------------------------ */

/* System Administration workspace */
.system-admin-workspace {
    min-width: 0;
}

.system-admin-nav {
    max-width: 100%;
    margin-bottom: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.system-admin-nav__list.detail-tabs {
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
    margin-bottom: 0;
}

.system-admin-nav .nav-link {
    min-height: 2.75rem;
}

.system-admin-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.system-admin-section-meta {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.system-admin-info-btn {
    min-width: var(--kromeka-btn-height-sm);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.system-admin-info-panel {
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
    max-height: 24rem;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background: var(--bg-card);
    color: var(--text-main);
}

.system-admin-info-panel code {
    color: var(--text-main);
}

.system-admin-storage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1rem;
}

.system-admin-storage__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
}

.system-admin-storage__switch {
    display: inline-flex;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    overflow: hidden;
    background: var(--bg-card);
}

.system-admin-storage__switch .nav-link {
    border: 0;
    border-radius: 0;
    min-height: var(--kromeka-btn-height-sm);
    padding: 0.25rem 0.85rem;
    color: var(--text-main);
    background: transparent;
}

.system-admin-storage__switch .nav-link:hover,
.system-admin-storage__switch .nav-link:focus-visible {
    color: var(--text-main);
    background: var(--hover-bg);
}

.system-admin-storage__switch .nav-link.active {
    color: #ffffff;
    background: var(--kromeka-red);
}

.system-admin-status-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-main);
}

.system-admin-backup-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.system-admin-backup-actions form {
    margin: 0;
}

.system-admin-backup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
}

.system-admin-backup-overlay__spinner {
    width: 3rem;
    height: 3rem;
}

@media (max-width: 767.98px) {
    .system-admin-info-btn,
    .system-admin-storage__switch .nav-link,
    .system-admin-backup-actions .btn {
        min-height: 2.75rem;
        min-width: 2.75rem;
    }
}

/* Department permission matrix (System Admin) */
.permission-matrix {
    min-width: 0;
}

.permission-matrix-filters-card,
.permission-matrix-main-card,
.permission-matrix-preview {
    border-color: var(--border-color);
    background: var(--bg-card);
}

.permission-matrix-preview-summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
}

.permission-matrix-preview-summary::-webkit-details-marker {
    display: none;
}

.permission-matrix-preview-summary::before {
    content: '\F285';
    font-family: 'bootstrap-icons';
    color: var(--text-muted);
    line-height: 1;
    transition: transform 0.15s ease;
}

.permission-matrix-preview[open] > .permission-matrix-preview-summary::before {
    transform: rotate(90deg);
}

.permission-matrix-filters-card > .card-body,
.permission-matrix-main-card > .card-body {
    padding: 0.5rem 0.75rem;
}

.permission-matrix-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.permission-matrix-toolbar-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
}

.permission-matrix-toolbar-label {
    margin: 0;
    color: var(--text-main);
    white-space: nowrap;
}

.permission-matrix-toolbar-btn {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
}

.permission-matrix-copy-field {
    flex: 0 0 14rem;
    width: 14rem;
    max-width: 100%;
}

.permission-matrix-copy-field .form-select,
.permission-matrix-copy-field .select2-container {
    width: 100% !important;
    max-width: 100%;
}

.permission-matrix-copy-field .form-select {
    min-height: var(--kromeka-btn-height-sm);
    height: var(--kromeka-btn-height-sm);
}

.permission-matrix-copy-field .select2-container--default .select2-selection--single {
    min-height: var(--kromeka-btn-height-sm) !important;
    height: var(--kromeka-btn-height-sm) !important;
}

#perm-matrix-feedback.d-none {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

#perm-matrix-feedback:not(.d-none) {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

@media (max-width: 767.98px) {
    .permission-matrix-toolbar-group {
        flex-wrap: wrap;
        width: 100%;
    }

    .permission-matrix-copy-field {
        flex: 1 1 100%;
        width: 100%;
    }

    .permission-matrix-copy-field .form-select {
        min-height: 2.75rem;
        height: 2.75rem;
    }

    .permission-matrix-copy-field .select2-container--default .select2-selection--single {
        min-height: 2.75rem !important;
        height: 2.75rem !important;
    }
}

.permission-matrix-table-wrap {
    max-height: 32rem;
    overflow: auto;
    border: 1px solid var(--kromeka-light-grey);
    border-radius: 0.375rem;
}

.permission-matrix-table {
    --bs-table-bg: var(--bg-card);
    --bs-table-color: var(--text-main);
    --bs-table-border-color: var(--border-color);
    --bs-table-hover-bg: transparent;
    --bs-table-hover-color: var(--text-main);
    color: var(--text-main);
}

.permission-matrix-table.table > :not(caption) > * > * {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    background-color: var(--bg-card);
    color: var(--text-main);
}

.permission-matrix-table.table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--bg-card-header);
    color: var(--text-card-header);
    border-bottom-width: 1px;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: inset 0 -1px 0 var(--border-color);
}

.permission-matrix-table tbody .perm-matrix-row--group > td {
    background-color: color-mix(in srgb, var(--kromeka-light-grey) 65%, var(--bg-card));
}

.permission-matrix-table tbody tr:hover > td {
    background-color: color-mix(in srgb, var(--kromeka-yellow) 14%, var(--bg-card));
}

.perm-matrix-row--group .perm-matrix-label {
    font-weight: 600;
}

[data-theme="dark"] .permission-matrix-table-wrap {
    border-color: var(--kromeka-dark-grey);
}

[data-theme="dark"] .permission-matrix-table tbody .perm-matrix-row--group > td {
    background-color: color-mix(in srgb, var(--bg-card-header) 55%, var(--bg-card));
}

[data-theme="dark"] .permission-matrix-table tbody tr:hover > td {
    background-color: color-mix(in srgb, var(--kromeka-yellow) 16%, var(--bg-card));
}

.permission-matrix-table .perm-matrix-name {
    min-width: 12rem;
}

.permission-matrix-check-col {
    width: 3.25rem;
}

.permission-matrix-actions-col {
    width: 7.75rem;
}

.perm-matrix-label {
    color: var(--text-main);
}

.perm-matrix-unsupported {
    color: var(--text-muted);
}

.perm-matrix-check-hit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    min-width: 1.75rem;
    min-height: 1.75rem;
}

.perm-matrix-toggle,
.perm-matrix-toggle-spacer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem;
    padding: 0;
}

.perm-matrix-toggle {
    color: var(--kromeka-dark);
    text-decoration: none;
    line-height: 1;
}

[data-theme="dark"] .perm-matrix-toggle {
    color: var(--text-main);
}

.perm-matrix-row-actions {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
}

.perm-matrix-indent {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding-left: calc(var(--perm-depth, 0) * 0.875rem);
}

@media (max-width: 767.98px) {
    .permission-matrix-toolbar-btn,
    .permission-matrix .btn-group > .btn,
    .permission-matrix-table-toolbar .btn,
    .perm-matrix-toggle,
    .perm-matrix-check-hit,
    .permission-matrix .btn.table-action-icon-btn {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    .perm-matrix-toggle-spacer {
        width: 2.75rem;
        flex-basis: 2.75rem;
    }

    .permission-matrix-actions-col {
        width: 9.5rem;
    }
}

.permission-matrix-preview-output {
    background: var(--bg-card);
    border: 1px solid var(--kromeka-light-grey);
    border-radius: 0.375rem;
    padding: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-main);
    white-space: pre-wrap;
}

[data-theme="dark"] .permission-matrix-preview-output {
    border-color: var(--kromeka-dark-grey);
}