/* ═══════════════════════════════════════════════════════════════════════════
   KNM.RazorComponents — Main CSS (Bootstrap 5.3 compatible)

   Override via:
   • CssClass parameters on each component/builder
   • CSS custom properties (--knm-*)
   • Direct class override on .knm-* selectors

   All colors reference Bootstrap 5.3 --bs-* variables with hardcoded fallbacks.
   Dark mode: supported via [data-bs-theme="dark"].
   ═══════════════════════════════════════════════════════════════════════════ */

@import url("css/phosphor.css");
@import url("css/phosphor-thin.css");
@import url("css/phosphor-light.css");
@import url("css/phosphor-bold.css");
@import url("css/phosphor-fill.css");
@import url("css/phosphor-duotone.css");

/* ─── CSS Custom Properties (all overridable) ─────────────────────────────── */

/* Remove default focus box-shadow from all KNM elements */
*:focus {
    box-shadow: none !important;
}

:root {
    /* Global theming — override these to match your app theme */
    --knm-primary: var(--bs-primary, #0d6efd);
    --knm-primary-rgb: var(--bs-primary-rgb, 13, 110, 253);
    --knm-secondary: var(--bs-secondary, #6c757d);
    --knm-success: var(--bs-success, #198754);
    --knm-danger: var(--bs-danger, #dc3545);
    --knm-warning: var(--bs-warning, #ffc107);
    --knm-info: var(--bs-info, #0dcaf0);
    --knm-focus-color: var(--knm-primary);
    --knm-focus-shadow: rgba(var(--knm-primary-rgb, 13, 110, 253), .15);
    --knm-border-radius: var(--bs-border-radius, .375rem);

    /* Input — outline label layout */
    --knm-input-padding-x: 1rem;
    --knm-input-padding-y: .5rem;
    --knm-input-placeholder-color: var(--bs-secondary-color, #6c757d);
    --knm-input-top-position: 14px;
    --knm-input-label-z-index: 5;
    --knm-input-bg: var(--bs-body-bg, #fff);
    --knm-input-top-position-outline: -8px;
    --knm-input-outline-border-color: var(--knm-focus-color);
    --knm-input-border-color: var(--bs-border-color, #ced4da);
    --knm-input-border-width: 1px;
    --knm-input-border-radius: var(--knm-border-radius);
    --knm-input-outline-border-size: .125rem;
    --knm-input-outline-anim-duration: .3s;
    --knm-input-outline-transition: linear;

    /* Grid */
    --knm-grid-sort-color: var(--bs-secondary-color, #6c757d);
    --knm-grid-export-color: var(--bs-success, #198754);
    --knm-grid-filter-z-index: 1000;
    --knm-grid-columns-z-index: 2001;
    --knm-grid-backdrop-bg: rgba(0, 0, 0, 0.5);
    --knm-grid-image-max-height: 60px;
    --knm-grid-row-height: 42px;
    --knm-grid-accordion-transition: 0.2s ease;
    --knm-grid-loading-bg: rgba(255, 255, 255, 0.65);
    --knm-grid-accent: var(--knm-primary, var(--bs-primary, #0d6efd));
    --knm-grid-accent-subtle: rgba(var(--knm-primary-rgb, 13, 110, 253), 0.08);
    --knm-grid-header-bg: var(--bs-body-bg);
    --knm-grid-border: var(--bs-border-color);
    --knm-grid-radius: var(--bs-border-radius-lg, 0.5rem);
    --knm-grid-fixed-header-offset: 0px;
    --knm-grid-header-hover-bg: var(--knm-grid-accent-subtle);
    --knm-grid-header-hover-color: var(--knm-grid-accent);

    /* Language Selector */
    --knm-langsel-gap: 0.5rem;
    --knm-langsel-radius: 0.375rem;
    --knm-langsel-flag-radius: 2px;
    --knm-langsel-item-padding-y: 0.375rem;
    --knm-langsel-item-padding-x: 0.625rem;
    --knm-langsel-item-bg: transparent;
    --knm-langsel-item-hover-bg: var(--bs-secondary-bg, #e9ecef);
    --knm-langsel-item-active-bg: var(--knm-primary, #0d6efd);
    --knm-langsel-item-active-color: #fff;
    --knm-langsel-text-color: var(--bs-body-color, #212529);
    --knm-langsel-border-color: var(--bs-border-color, #dee2e6);
    --knm-langsel-flag-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);

    /* Breadcrumb */
    --knm-breadcrumb-color: var(--knm-primary, #0d6efd);
    --knm-breadcrumb-hover-color: var(--bs-primary-text-emphasis, #0a58ca);
    --knm-breadcrumb-active-color: var(--bs-secondary-color, #6c757d);
    --knm-breadcrumb-separator-color: var(--bs-secondary-color, #6c757d);
    --knm-breadcrumb-page-header-gap: 0.25rem;
    --knm-breadcrumb-page-header-margin-bottom: 1.25rem;
    --knm-breadcrumb-page-title-color: var(--bs-body-color, #212529);
    --knm-breadcrumb-page-title-font-size: 1.5rem;
    --knm-breadcrumb-page-title-font-weight: 600;

    /* Form (global, not scoped) */
    --knm-form-label-color: var(--bs-body-color, #212529);
    --knm-form-label-font-weight: 600;
    --knm-form-label-font-size: 0.875rem;
    --knm-form-required-color: var(--bs-danger, #dc3545);
    --knm-form-input-border-color: var(--bs-border-color, #dee2e6);
    --knm-form-input-focus-border: var(--knm-primary, #0d6efd);
    --knm-form-input-focus-shadow: rgba(var(--knm-primary-rgb, 13, 110, 253), 0.1);
    --knm-form-input-disabled-bg: var(--bs-secondary-bg, #e9ecef);
    --knm-form-input-radius: var(--bs-border-radius, 0.375rem);
    --knm-form-group-title-color: var(--bs-body-color, #212529);
    --knm-form-group-border-color: var(--bs-border-color, #dee2e6);
    --knm-form-validation-color: var(--bs-danger, #dc3545);

    /* OTP */
    --knm-otp-border: var(--bs-border-color, #dee2e6);
    --knm-otp-radius: var(--bs-border-radius, 0.375rem);
    --knm-otp-bg: var(--bs-body-bg, #fff);
    --knm-otp-color: var(--bs-body-color, #212529);
    --knm-otp-caret: var(--knm-primary, #0d6efd);
    --knm-otp-focus-border: var(--knm-primary, #0d6efd);
    --knm-otp-focus-shadow: rgba(var(--knm-primary-rgb, 13, 110, 253), 0.25);
    --knm-otp-disabled-bg: var(--bs-secondary-bg, #e9ecef);
    --knm-otp-placeholder: var(--bs-secondary-color, #6c757d);
    --knm-otp-separator-color: var(--bs-secondary-color, #6c757d);

    /* Select / Dropdown (shared across DataGrid page-size, KNMInput Select, etc.) */
    --knm-select-bg: var(--bs-body-bg, #fff);
    --knm-select-color: var(--bs-body-color, #212529);
    --knm-select-border: var(--bs-border-color, #dee2e6);
    --knm-select-radius: var(--knm-border-radius, 0.375rem);
    --knm-select-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    --knm-select-hover-bg: var(--knm-grid-accent-subtle, rgba(var(--knm-primary-rgb, 13, 110, 253), 0.08));
    --knm-select-hover-color: var(--bs-body-color, #212529);
    --knm-select-active-bg: var(--knm-grid-accent-subtle, rgba(var(--knm-primary-rgb, 13, 110, 253), 0.08));
    --knm-select-active-color: var(--knm-primary, #0d6efd);

    /* Audit Footer */
    --knm-audit-border-color: var(--bs-border-color, #dee2e6);
    --knm-audit-bg: var(--bs-tertiary-bg, #f8f9fa);
    --knm-audit-color: var(--bs-secondary-color, #6c757d);
    --knm-audit-label-color: var(--bs-body-color, #212529);
    --knm-audit-radius: var(--bs-border-radius, 0.375rem);
    --knm-audit-font-size: 0.75rem;
    --knm-audit-padding: 0.4rem 0.6rem;
    --knm-audit-gap: 0.75rem;
    --knm-audit-icon-color: var(--knm-audit-color);
    --knm-audit-created-color: var(--bs-success, #198754);
    --knm-audit-updated-color: var(--bs-primary, #0d6efd);
    --knm-audit-sep-opacity: 0.5;

    /* Toast */
    --knm-toast-min-width: 320px;
    --knm-toast-max-width: 420px;
    --knm-toast-bg: var(--bs-body-bg, #fff);
    --knm-toast-color: var(--bs-body-color, #212529);
    --knm-toast-border-radius: var(--bs-border-radius-lg, 0.5rem);
    --knm-toast-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --knm-toast-gap: 0.75rem;
    --knm-toast-padding: 0.875rem 1rem;
    --knm-toast-z-index: 1090;
    --knm-toast-success-color: var(--bs-success, #198754);
    --knm-toast-error-color: var(--bs-danger, #dc3545);
    --knm-toast-warning-color: var(--bs-warning, #ffc107);
    --knm-toast-info-color: var(--bs-info, #0dcaf0);

    /* Alert dialog */
    --knm-alert-max-width: 480px;
    --knm-alert-bg: var(--bs-body-bg, #fff);
    --knm-alert-color: var(--bs-body-color, #212529);
    --knm-alert-border-radius: var(--bs-border-radius-lg, 0.5rem);
    --knm-alert-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --knm-alert-backdrop-bg: rgba(0, 0, 0, 0.5);
    --knm-alert-z-index: 1100;
    --knm-alert-icon-size: 3.5rem;

    /* Modal (custom features only — structural styling from Bootstrap) */
    --knm-modal-margin: 1.75rem;
    --knm-modal-loading-bg: rgba(255, 255, 255, 0.9);

    /* Accordion */
    --knm-accordion-bg: var(--bs-body-bg, #fff);
    --knm-accordion-color: var(--bs-body-color, #212529);
    --knm-accordion-border-color: var(--bs-border-color, #dee2e6);
    --knm-accordion-btn-bg: var(--bs-body-bg, #fff);
    --knm-accordion-btn-color: var(--bs-body-color, #212529);
    --knm-accordion-btn-focus-border: var(--knm-primary, #0d6efd);
    --knm-accordion-btn-focus-shadow: rgba(var(--knm-primary-rgb, 13, 110, 253), 0.25);
    --knm-accordion-active-bg: var(--bs-primary-bg-subtle, #cfe2ff);
    --knm-accordion-active-color: var(--bs-primary-text-emphasis, #052c65);
    --knm-accordion-transition: 0.3s ease;
    --knm-accordion-radius: var(--bs-border-radius, 0.375rem);

    /* Progress Bar */
    --knm-progress-height: 1rem;
    --knm-progress-bg: var(--bs-secondary-bg, #e9ecef);
    --knm-progress-radius: var(--bs-border-radius, 0.375rem);
    --knm-progress-transition: 0.3s ease;
    --knm-progress-primary: var(--knm-primary, #0d6efd);
    --knm-progress-success: var(--bs-success, #198754);
    --knm-progress-danger: var(--bs-danger, #dc3545);
    --knm-progress-warning: var(--bs-warning, #ffc107);
    --knm-progress-info: var(--bs-info, #0dcaf0);
    --knm-progress-circular-size: 48px;
    --knm-progress-circular-stroke: 4;
    --knm-progress-circular-track: var(--bs-secondary-bg, #e9ecef);

    /* Skeleton */
    --knm-skeleton-bg: var(--bs-secondary-bg, #e9ecef);
    --knm-skeleton-highlight: var(--bs-tertiary-bg, #f8f9fa);
    --knm-skeleton-radius: var(--bs-border-radius, 0.375rem);
    --knm-skeleton-text-height: 0.875rem;
    --knm-skeleton-text-gap: 0.5rem;
    --knm-skeleton-rect-height: 120px;
    --knm-skeleton-circle-size: 48px;
    --knm-skeleton-avatar-size: 40px;
    --knm-skeleton-pulse-duration: 1.5s;
    --knm-skeleton-wave-duration: 1.8s;

    /* Avatar */
    --knm-avatar-bg-primary: var(--knm-primary, #0d6efd);
    --knm-avatar-bg-secondary: var(--bs-secondary, #6c757d);
    --knm-avatar-bg-success: var(--bs-success, #198754);
    --knm-avatar-bg-danger: var(--bs-danger, #dc3545);
    --knm-avatar-bg-warning: var(--bs-warning, #ffc107);
    --knm-avatar-bg-info: var(--bs-info, #0dcaf0);
    --knm-avatar-color: #fff;
    --knm-avatar-warning-color: #212529;
    --knm-avatar-border-color: var(--bs-body-bg, #fff);
    --knm-avatar-border-width: 2px;
    --knm-avatar-font-weight: 600;
    --knm-avatar-status-online: #198754;
    --knm-avatar-status-offline: #6c757d;
    --knm-avatar-status-away: #ffc107;
    --knm-avatar-status-busy: #dc3545;
    --knm-avatar-group-overlap: -0.5rem;
    --knm-avatar-group-overflow-bg: var(--bs-secondary, #6c757d);
    --knm-avatar-group-overflow-color: #fff;

    /* TreeView */
    --knm-tree-font-size: 0.875rem;
    --knm-tree-color: var(--bs-body-color, #212529);
    --knm-tree-gap: 0.375rem;
    --knm-tree-indent: 1.25rem;
    --knm-tree-node-padding: 0.2rem 0.5rem;
    --knm-tree-radius: var(--bs-border-radius-sm, 0.25rem);
    --knm-tree-hover-bg: var(--bs-tertiary-bg, #f8f9fa);
    --knm-tree-selected-bg: var(--bs-primary-bg-subtle, #cfe2ff);
    --knm-tree-selected-color: var(--bs-primary-text-emphasis, #052c65);
    --knm-tree-disabled-opacity: 0.5;
    --knm-tree-toggle-color: var(--bs-secondary-color, #6c757d);
    --knm-tree-icon-color: var(--bs-secondary-color, #6c757d);
    --knm-tree-spinner-color: var(--knm-primary, #0d6efd);
    --knm-tree-transition: 0.2s ease;

    /* Drawer */
    --knm-drawer-bg: var(--bs-body-bg, #fff);
    --knm-drawer-border-color: var(--bs-border-color, #dee2e6);
    --knm-drawer-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --knm-drawer-backdrop-bg: rgba(0, 0, 0, 0.5);
    --knm-drawer-z-index: 1045;
    --knm-drawer-transition: 0.3s ease;

    /* Menu — uses Bootstrap .dropdown-menu, only animation custom */

    /* ColorPicker */
    --knm-colorpicker-bg: var(--bs-body-bg, #fff);
    --knm-colorpicker-border-color: var(--bs-border-color, #dee2e6);
    --knm-colorpicker-radius: var(--bs-border-radius, 0.375rem);
    --knm-colorpicker-gap: 0.75rem;
    --knm-colorpicker-padding: 0.75rem;
    --knm-colorpicker-preview-height: 2.5rem;
    --knm-colorpicker-columns: 6;
    --knm-colorpicker-swatch-size: 2rem;
    --knm-colorpicker-swatch-gap: 0.375rem;
    --knm-colorpicker-swatch-radius: 0.25rem;
    --knm-colorpicker-swatch-hover-border: var(--bs-secondary-color, #6c757d);
    --knm-colorpicker-selected-border: var(--knm-primary, #0d6efd);
    --knm-colorpicker-selected-shadow: rgba(var(--knm-primary-rgb, 13, 110, 253), 0.25);
    --knm-colorpicker-hex-color: var(--bs-secondary-color, #6c757d);
    --knm-colorpicker-slider-thumb-bg: #fff;
    --knm-colorpicker-slider-thumb-border: #333;
    --knm-colorpicker-slider-thumb-shadow: rgba(0, 0, 0, 0.3);
    --knm-colorpicker-checkerboard-color: #ccc;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INPUT — Label/Outline layout
   ═══════════════════════════════════════════════════════════════════════════ */

.form-label-group {
    position: relative;
    margin-bottom: 1rem;
}

    .form-label-group label {
        margin: 0;
        pointer-events: none;
    }

    .form-label-group input,
    .form-label-group textarea,
    .form-label-group label,
    .form-label-group:not(.in-border).form-label-group:not(.outline) select,
    .form-label-group:not(.in-border).form-label-group:not(.outline) div.form-control {
        padding: var(--knm-input-padding-y) var(--knm-input-padding-x);
    }

    .form-label-group label {
        position: absolute;
        top: 50%;
        left: 0;
        display: block;
        width: 100%;
        margin-bottom: 0;
        color: var(--knm-input-placeholder-color);
        border-radius: var(--bs-border-radius, .25rem);
        transition: all .2s ease-in-out;
        transform-origin: 0 0;
        transform: translateY(-50%);
        text-align: left;
        z-index: var(--knm-input-label-z-index);
    }

    .form-label-group input.is-invalid ~ label {
        color: var(--bs-form-invalid-color, #dc3545);
    }

    .form-label-group.form-control {
        padding: 0;
    }

        .form-label-group.form-control input {
            border: none;
            height: 99%;
        }

    .form-label-group textarea ~ label {
        top: 0;
        transform: translateY(0);
    }

    .form-label-group.transparent input::-webkit-input-placeholder,
    .form-label-group.transparent input:-ms-input-placeholder,
    .form-label-group.transparent input::-ms-input-placeholder,
    .form-label-group.transparent input::-moz-placeholder {
        color: transparent;
    }

    .form-label-group.transparent input::placeholder,
    .form-label-group.transparent textarea::placeholder {
        color: transparent;
    }

    .form-label-group input:not(:placeholder-shown),
    .form-label-group input:focus,
    .form-label-group textarea:not(:placeholder-shown),
    .form-label-group textarea:focus {
        padding-top: calc(var(--knm-input-padding-y) + var(--knm-input-padding-y) * (2 / 3));
        padding-bottom: calc(var(--knm-input-padding-y) / 3);
    }

    .form-label-group:not(.in-border).form-label-group:not(.outline) select,
    .form-label-group:not(.in-border).form-label-group:not(.outline) div.form-control {
        padding-bottom: 0;
    }

    .form-label-group input:not(:placeholder-shown) ~ label,
    .form-label-group input:focus ~ label,
    .form-label-group textarea:not(:placeholder-shown) ~ label,
    .form-label-group textarea:focus ~ label,
    .form-label-group select ~ label,
    .form-label-group div.form-control ~ label {
        font-size: 1em;
        top: var(--knm-input-top-position);
        transform: translateY(-50%) scale(.7);
        visibility: visible;
    }

    .form-label-group input.form-control-lg:not(:placeholder-shown) ~ label,
    .form-label-group input.form-control-lg:focus ~ label {
        top: calc(2px + var(--knm-input-top-position));
    }

    .form-label-group input.form-control-sm:not(:placeholder-shown) ~ label,
    .form-label-group input.form-control-sm:focus ~ label {
        top: calc(2px - var(--knm-input-top-position));
    }

    .form-label-group input:focus::placeholder,
    .form-label-group textarea:focus::placeholder {
        visibility: hidden;
        color: rgba(255, 255, 255, 0);
        transition-delay: 0s;
        opacity: 0;
        text-shadow: none;
    }

    .form-label-group input::placeholder,
    .form-label-group textarea::placeholder {
        transition-delay: .2s;
        color: rgba(255, 255, 255, 0);
        opacity: 0;
    }

    .form-label-group .intl-tel-input label,
    .form-label-group .iti label {
        margin-left: 42px;
    }

    .form-label-group .intl-tel-input input:focus::placeholder,
    .form-label-group .iti input:focus::placeholder {
        visibility: visible;
        color: var(--knm-input-placeholder-color);
        opacity: 1;
    }

/* ─── Fix: floating label with input-group adornments ─────────────────── */
/* When PrefixIcon/SuffixIcon wraps the input in .input-group, the label
   becomes a sibling of .input-group instead of .input — duplicate the
   sibling selectors so floating labels keep working. */

    .form-label-group .input-group .form-control:not(:placeholder-shown),
    .form-label-group .input-group .form-control:focus {
        padding-top: calc(var(--knm-input-padding-y) + var(--knm-input-padding-y) * (2 / 3));
        padding-bottom: calc(var(--knm-input-padding-y) / 3);
    }

    .form-label-group .input-group ~ label,
    .form-label-group .input-group:focus-within ~ label,
    .form-label-group .knm-password-wrapper ~ label,
    .form-label-group .knm-password-wrapper:focus-within ~ label,
    .form-label-group .knm-adornment-wrapper ~ label,
    .form-label-group .knm-adornment-wrapper:focus-within ~ label {
        pointer-events: none;
    }

    .form-label-group .input-group:focus-within ~ label,
    .form-label-group .input-group:has(.form-control:not(:placeholder-shown)) ~ label,
    .form-label-group .knm-password-wrapper:focus-within ~ label,
    .form-label-group .knm-password-wrapper:has(.form-control:not(:placeholder-shown)) ~ label,
    .form-label-group .knm-adornment-wrapper:focus-within ~ label,
    .form-label-group .knm-adornment-wrapper:has(.form-control:not(:placeholder-shown)) ~ label {
        font-size: 1em;
        top: var(--knm-input-top-position);
        transform: translateY(-50%) scale(.7);
        visibility: visible;
    }

    .form-label-group .input-group:focus-within ~ label ~ .form-text,
    .form-label-group .input-group:has(.form-control:focus) ~ label ~ .form-text {
        visibility: visible;
    }

/* Borderless variant: input-group adornment fix */
.form-label-group.borderless .input-group:focus-within ~ label,
.form-label-group.borderless .input-group:has(.form-control:not(:placeholder-shown)) ~ label {
    top: 0;
    transform: translateY(-50%) scale(.75);
    transform-origin: left top;
    color: var(--knm-input-outline-border-color, var(--knm-primary, #0d6efd));
}

/* In-border variant: input-group adornment fix */
.form-label-group.in-border .input-group:focus-within ~ span label,
.form-label-group.in-border .input-group:has(.form-control:not(:placeholder-shown)) ~ span label {
    top: 0;
    transform: translateY(-50%);
    font-size: .75rem;
    color: var(--knm-input-outline-border-color, var(--knm-primary, #0d6efd));
    background-color: var(--knm-input-bg, var(--bs-body-bg, #fff));
    padding: 0 .25rem;
}

/* Filled variant: input-group inside filled layout */
.form-label-group.filled .input-group .form-control {
    background-color: transparent;
    border: none;
}

/* Floating (Bootstrap form-floating): input-group fix */
.form-floating .input-group > .form-control:focus ~ label,
.form-floating .input-group > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .input-group:focus-within ~ label,
.form-floating > .input-group:has(.form-control:not(:placeholder-shown)) ~ label {
    opacity: .65;
    transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
}

/* ─── Fix: floating label with password-wrapper / adornment-wrapper ────── */
/* Same problem as input-group: the wrapper div breaks input ~ label sibling
   selectors. Duplicate all relevant selectors using :has() and :focus-within. */

    .form-label-group .knm-password-wrapper .form-control:not(:placeholder-shown),
    .form-label-group .knm-password-wrapper .form-control:focus,
    .form-label-group .knm-adornment-wrapper .form-control:not(:placeholder-shown),
    .form-label-group .knm-adornment-wrapper .form-control:focus {
        padding-top: calc(var(--knm-input-padding-y) + var(--knm-input-padding-y) * (2 / 3));
        padding-bottom: calc(var(--knm-input-padding-y) / 3);
    }

    .form-label-group .knm-password-wrapper:focus-within ~ label,
    .form-label-group .knm-password-wrapper:has(.form-control:not(:placeholder-shown)) ~ label,
    .form-label-group .knm-adornment-wrapper:focus-within ~ label,
    .form-label-group .knm-adornment-wrapper:has(.form-control:not(:placeholder-shown)) ~ label {
        font-size: 1em;
        top: var(--knm-input-top-position);
        transform: translateY(-50%) scale(.7);
        visibility: visible;
    }

    .form-label-group .knm-password-wrapper:focus-within ~ label ~ .form-text,
    .form-label-group .knm-adornment-wrapper:focus-within ~ label ~ .form-text {
        visibility: visible;
    }

/* Borderless: password/adornment wrapper fix */
.form-label-group.borderless .knm-password-wrapper:focus-within ~ label,
.form-label-group.borderless .knm-password-wrapper:has(.form-control:not(:placeholder-shown)) ~ label,
.form-label-group.borderless .knm-adornment-wrapper:focus-within ~ label,
.form-label-group.borderless .knm-adornment-wrapper:has(.form-control:not(:placeholder-shown)) ~ label {
    top: 0;
    transform: translateY(-50%) scale(.75);
    transform-origin: left top;
    color: var(--knm-input-outline-border-color, var(--knm-primary, #0d6efd));
}

/* In-border: password/adornment wrapper fix */
.form-label-group.in-border .knm-password-wrapper:focus-within ~ span label,
.form-label-group.in-border .knm-password-wrapper:has(.form-control:not(:placeholder-shown)) ~ span label,
.form-label-group.in-border .knm-adornment-wrapper:focus-within ~ span label,
.form-label-group.in-border .knm-adornment-wrapper:has(.form-control:not(:placeholder-shown)) ~ span label {
    top: 0;
    transform: translateY(-50%);
    font-size: .75rem;
    color: var(--knm-input-outline-border-color, var(--knm-primary, #0d6efd));
    background-color: var(--knm-input-bg, var(--bs-body-bg, #fff));
    padding: 0 .25rem;
}

/* Filled: password/adornment wrapper fix */
.form-label-group.filled .knm-password-wrapper .form-control,
.form-label-group.filled .knm-adornment-wrapper .form-control {
    background-color: transparent;
    border: none;
}

.form-label-group.filled .knm-password-wrapper:focus-within ~ label,
.form-label-group.filled .knm-password-wrapper:has(.form-control:not(:placeholder-shown)) ~ label,
.form-label-group.filled .knm-adornment-wrapper:focus-within ~ label,
.form-label-group.filled .knm-adornment-wrapper:has(.form-control:not(:placeholder-shown)) ~ label {
    font-size: 1em;
    top: var(--knm-input-top-position);
    transform: translateY(-50%) scale(.7);
    visibility: visible;
}

/* Floating (Bootstrap form-floating): password/adornment wrapper fix
   Bootstrap expects .form-control as direct child of .form-floating.
   When wrapped in knm-password-wrapper or knm-adornment-wrapper, we must
   replicate all form-floating styles: input padding/height, label position,
   and label raised state. */

/* 1. Input inside wrapper: same padding & height as .form-floating > .form-control */
.form-floating > .knm-password-wrapper > .form-control:not(textarea),
.form-floating > .knm-adornment-wrapper > .form-control:not(textarea) {
    height: calc(3.5rem + calc(var(--bs-border-width, 1px) * 2));
    min-height: calc(3.5rem + calc(var(--bs-border-width, 1px) * 2));
    padding: 1.625rem .75rem .625rem;
    line-height: 1.25;
}

/* 1b. Textarea in form-floating: override Bootstrap's forced height, respect rows */
.form-floating > textarea.form-control,
.form-floating > .knm-adornment-wrapper > textarea.form-control {
    height: auto;
    min-height: auto;
    padding: 1.625rem .75rem .625rem;
    line-height: 1.5;
}

/* 2. Password wrapper: extra padding-right for the eye toggle */
.form-floating > .knm-password-wrapper > .form-control {
    padding-right: 2.5rem;
}

/* 3. Adornment padding overrides for prefix/suffix */
.form-floating > .knm-adornment-wrapper--prefix > .form-control {
    padding-left: 2.25rem;
}
.form-floating > .knm-adornment-wrapper--suffix > .form-control {
    padding-right: 2.25rem;
}

/* 4. Wrapper must fill the form-floating area */
.form-floating > .knm-password-wrapper,
.form-floating > .knm-adornment-wrapper {
    position: relative;
    width: 100%;
}

/* 5. Label sibling of wrapper: replicate Bootstrap label base positioning */
.form-floating > .knm-password-wrapper ~ label,
.form-floating > .knm-adornment-wrapper ~ label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height: 100%;
    padding: 1rem .75rem;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    border: var(--bs-border-width, 1px) solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
}

/* 6. Placeholder visible at rest — positioned to the right of the label */
.form-floating > .knm-password-wrapper .form-control::placeholder,
.form-floating > .knm-adornment-wrapper .form-control::placeholder {
    color: var(--bs-secondary-color, #6c757d);
}

/* Password wrapper: placeholder at right, offset for eye toggle */
.form-floating > .knm-password-wrapper input::placeholder {
    position: absolute;
    right: 2.5rem;
    top: 15px;
}
.form-floating > .knm-password-wrapper input:focus::placeholder {
    position: relative;
    top: 0;
    left: 0;
    right: auto;
}

/* Suffix only: placeholder at right, offset for suffix icon */
.form-floating > .knm-adornment-wrapper--suffix:not(.knm-adornment-wrapper--prefix) input::placeholder {
    position: absolute;
    right: 2.5rem;
    top: 15px;
}
.form-floating > .knm-adornment-wrapper--suffix:not(.knm-adornment-wrapper--prefix) input:focus::placeholder {
    position: relative;
    top: 0;
    left: 0;
    right: auto;
}

/* Prefix only: placeholder at right (no suffix to avoid) */
.form-floating > .knm-adornment-wrapper--prefix:not(.knm-adornment-wrapper--suffix) input::placeholder {
    position: absolute;
    right: .75rem;
    top: 15px;
}
.form-floating > .knm-adornment-wrapper--prefix:not(.knm-adornment-wrapper--suffix) input:focus::placeholder {
    position: relative;
    top: 0;
    left: 0;
    right: auto;
}

/* Prefix + Suffix: placeholder at right, before suffix */
.form-floating > .knm-adornment-wrapper--prefix.knm-adornment-wrapper--suffix input::placeholder {
    position: absolute;
    right: 2.5rem;
    top: 15px;
}
.form-floating > .knm-adornment-wrapper--prefix.knm-adornment-wrapper--suffix input:focus::placeholder {
    position: relative;
    top: 0;
    left: 0;
    right: auto;
}

/* 7. Label raised state: only on focus or when input has a value */
.form-floating > .knm-password-wrapper:focus-within ~ label,
.form-floating > .knm-password-wrapper:has(.form-control:not(:placeholder-shown)) ~ label,
.form-floating > .knm-adornment-wrapper:focus-within ~ label,
.form-floating > .knm-adornment-wrapper:has(.form-control:not(:placeholder-shown)) ~ label {
    opacity: .65;
    transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
}

/* 8. Floating: prefix — shift label right past the prefix icon/text */
.form-floating > .knm-adornment-wrapper--prefix ~ label {
    left: 3rem;
}
.form-floating > .knm-adornment-wrapper--prefix:focus-within ~ label,
.form-floating > .knm-adornment-wrapper--prefix:has(.form-control:not(:placeholder-shown)) ~ label {
    left: 0;
}

/* 9. Adornment icons in form-floating: align vertically with input text (not center) */
.form-floating > .knm-adornment-wrapper .knm-adornment-prefix,
.form-floating > .knm-adornment-wrapper .knm-adornment-suffix {
    top: 50%;
}

/* 10. Validation icon shift: move Bootstrap's background-image icon left
       so it does not overlap password toggle or suffix adornments */
.knm-password-wrapper > .form-control.is-valid,
.knm-password-wrapper > .form-control.is-invalid,
.knm-adornment-wrapper--suffix > .form-control.is-valid,
.knm-adornment-wrapper--suffix > .form-control.is-invalid {
    background-position: right 2.5rem center;
}

/* Also adjust the eye toggle / suffix color on validation state */
.knm-password-wrapper:has(.is-invalid) .knm-password-toggle {
    color: var(--bs-form-invalid-border-color, #dc3545);
}
.knm-password-wrapper:has(.is-valid) .knm-password-toggle {
    color: var(--bs-form-valid-border-color, #198754);
}

/* Rounded: input-group — border on container, none on children */
.knm-input-rounded .input-group {
    border: 1px solid var(--bs-border-color, #ccc);
    border-radius: 25px;
    overflow: hidden;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.knm-input-rounded .input-group:focus-within {
    box-shadow: 0 0 0 0.15rem var(--knm-input-focus-color, var(--knm-primary, #0d6efd));
    border-color: var(--knm-input-focus-color, var(--knm-primary, #0d6efd));
}

.knm-input-rounded .input-group .form-control,
.knm-input-rounded .input-group .form-control:focus {
    border: none;
    box-shadow: none;
    outline: none;
}

.knm-input-rounded .input-group .input-group-text {
    background: none;
    border: none;
}

/* SuffixAsButton reset for ALL layouts that use the input-group path
   (Vertical / Horizontal / Rounded). Floating / Bordered / Filled / Borderless
   use the knm-adornment-wrapper path and are handled by the
   button.knm-adornment-suffix--btn rule further down. */
.input-group .knm-suffix-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--bs-secondary-color, #6c757d);
    padding: 0 0.75rem;
    transition: color 0.15s;
}

.input-group .knm-suffix-btn:hover,
.input-group .knm-suffix-btn:focus {
    color: var(--knm-primary, #0d6efd);
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
}

/* SuffixButtonVariant modifier classes — tint the icon color only.
   For full button styling (bg/border/padding/size) use SuffixButtonCssClass with a Bootstrap class.
   Variant is a quick semantic accent; CssClass is full personalization. */
.knm-suffix-btn--primary,
.knm-suffix-btn--outlineprimary    { color: var(--knm-primary, #0d6efd) !important; }
.knm-suffix-btn--secondary,
.knm-suffix-btn--outlinesecondary  { color: var(--knm-secondary, #6c757d) !important; }
.knm-suffix-btn--success,
.knm-suffix-btn--outlinesuccess    { color: var(--knm-success, #198754) !important; }
.knm-suffix-btn--danger,
.knm-suffix-btn--outlinedanger     { color: var(--knm-danger, #dc3545) !important; }
.knm-suffix-btn--warning,
.knm-suffix-btn--outlinewarning    { color: var(--knm-warning, #ffc107) !important; }
.knm-suffix-btn--info,
.knm-suffix-btn--outlineinfo       { color: var(--knm-info, #0dcaf0) !important; }
.knm-suffix-btn--light,
.knm-suffix-btn--outlinelight      { color: var(--knm-light, #f8f9fa) !important; }
.knm-suffix-btn--dark,
.knm-suffix-btn--outlinedark       { color: var(--knm-dark, #212529) !important; }
.knm-suffix-btn--link              { color: var(--knm-primary, #0d6efd) !important; text-decoration: underline; }
.knm-suffix-btn--transparent       { color: inherit !important; }

/* Hover darkening on variant icons */
.knm-suffix-btn[class*="knm-suffix-btn--"]:hover { filter: brightness(0.85); }

/* KNMButton Transparent variant */
.btn-transparent {
    background-color: transparent;
    border-color: transparent;
    color: inherit;
}
.btn-transparent:hover {
    background-color: rgba(0, 0, 0, .05);
}

/* Rounded: password wrapper — same pattern */
.knm-input-rounded .knm-password-wrapper {
    border: 1px solid var(--bs-border-color, #ccc);
    border-radius: 25px;
    overflow: hidden;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.knm-input-rounded .knm-password-wrapper:focus-within {
    box-shadow: 0 0 0 0.15rem var(--knm-input-focus-color, var(--knm-primary, #0d6efd));
    border-color: var(--knm-input-focus-color, var(--knm-primary, #0d6efd));
}

.knm-input-rounded .knm-password-wrapper .form-control {
    border: none;
    box-shadow: none;
    padding-left: 1.25rem;
}

/* ─── Outline variant ─────────────────────────────────────────────────────── */

.form-label-group.outline span {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    margin-bottom: 0;
    color: var(--knm-input-placeholder-color);
    border-radius: var(--bs-border-radius, .25rem);
    transition: all .2s var(--knm-input-outline-transition);
    transform-origin: 0 0;
    text-align: left;
    z-index: var(--knm-input-label-z-index);
    height: 100%;
    flex-wrap: wrap;
    pointer-events: none;
}

.form-label-group.outline input.border-danger ~ span { --knm-input-border-color: var(--bs-danger, #dc3545); }
.form-label-group.outline input.border-primary ~ span { --knm-input-border-color: var(--knm-primary, #0d6efd); }
.form-label-group.outline input.border-secondary ~ span { --knm-input-border-color: var(--bs-secondary, #6c757d); }
.form-label-group.outline input.border-success ~ span { --knm-input-border-color: var(--bs-success, #198754); }
.form-label-group.outline input.border-info ~ span { --knm-input-border-color: var(--bs-info, #0dcaf0); }
.form-label-group.outline input.border-warning ~ span { --knm-input-border-color: var(--bs-warning, #ffc107); }
.form-label-group.outline input.border-light ~ span { --knm-input-border-color: var(--bs-light, #f8f9fa); }
.form-label-group.outline input.border-dark ~ span { --knm-input-border-color: var(--bs-dark, #212529); }
.form-label-group.outline input.border-white ~ span { --knm-input-border-color: #fff; }
.form-label-group.outline input.is-invalid ~ span { --knm-input-border-color: var(--bs-form-invalid-border-color, #dc3545); }

.form-label-group.outline input:focus,
.form-label-group.outline textarea:focus,
.form-label-group.outline select:focus {
    box-shadow: none;
}

.form-label-group.outline input:not(:placeholder-shown) ~ span,
.form-label-group.outline input:focus ~ span,
.form-label-group.outline textarea:not(:placeholder-shown) ~ span,
.form-label-group.outline textarea:focus ~ span,
.form-label-group.outline select ~ span {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    margin-bottom: 0;
    color: var(--knm-input-placeholder-color);
    border-radius: var(--bs-border-radius, .25rem);
    transition: all var(--knm-input-outline-anim-duration) var(--knm-input-outline-transition);
    transform-origin: 0 0;
    text-align: left;
    z-index: var(--knm-input-label-z-index);
    height: 100%;
    flex-wrap: wrap;
}

.form-label-group.outline input ~ span::after,
.form-label-group.outline textarea ~ span::after,
.form-label-group.outline select ~ span::after {
    transition: all var(--knm-input-outline-anim-duration) var(--knm-input-outline-transition);
    content: " ";
    width: 1px;
    flex: 1 0 auto;
    border: var(--knm-input-outline-border-size) solid var(--knm-input-border-color);
    border-left: none;
    position: relative;
    right: 0;
    height: 100%;
    visibility: hidden;
    border-radius: 0 var(--bs-border-radius, .25rem) var(--bs-border-radius, .25rem) 0;
    flex-grow: 1;
    flex-basis: 0;
    max-width: 1px;
}

.form-label-group.outline input:not(:placeholder-shown) ~ span::after,
.form-label-group.outline input:focus ~ span::after,
.form-label-group.outline textarea:not(:placeholder-shown) ~ span::after,
.form-label-group.outline textarea:focus ~ span::after,
.form-label-group.outline select ~ span::after {
    height: 100%;
    border: 1px solid var(--knm-input-border-color);
    border-left: none;
    content: " ";
    display: block;
    position: relative;
    background: transparent;
    z-index: -1;
    border-radius: 0 var(--bs-border-radius, .25rem) var(--bs-border-radius, .25rem) 0;
    width: 100%;
    max-width: 100%;
    flex-grow: 1;
    flex-basis: 0;
    transition: all var(--knm-input-outline-anim-duration) var(--knm-input-outline-transition);
    visibility: visible;
}

.form-label-group.outline input:not(:placeholder-shown) ~ span::before,
.form-label-group.outline input:focus ~ span::before,
.form-label-group.outline textarea:not(:placeholder-shown) ~ span::before,
.form-label-group.outline textarea:focus ~ span::before,
.form-label-group.outline select ~ span::before {
    height: 100%;
    border: 1px solid var(--knm-input-border-color);
    border-right: none;
    content: " ";
    display: block;
    position: relative;
    background: transparent;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: var(--bs-border-radius, .25rem) 0 0 var(--bs-border-radius, .25rem);
    width: 100%;
    flex: 0 0 9px;
    transition: all var(--knm-input-outline-anim-duration) var(--knm-input-outline-transition);
}

.form-label-group.outline label {
    position: relative;
    top: 50%;
    left: 0;
    display: block;
    width: auto;
    margin-bottom: 0;
    color: var(--knm-input-placeholder-color);
    border-radius: var(--bs-border-radius, .25rem);
    transition: all var(--knm-input-outline-anim-duration) var(--knm-input-outline-transition);
    text-align: left;
    z-index: var(--knm-input-label-z-index);
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
    flex: 0 0 auto;
    margin-right: auto;
}

.form-label-group.outline input.is-invalid ~ label {
    color: var(--bs-form-invalid-color, #dc3545);
}

.form-label-group.outline input:not(:placeholder-shown) ~ span label,
.form-label-group.outline input:focus ~ span label,
.form-label-group.outline textarea:not(:placeholder-shown) ~ span label,
.form-label-group.outline textarea:focus ~ span label,
.form-label-group.outline select ~ span label {
    transform: none;
    top: var(--knm-input-top-position-outline);
    font-size: .6rem;
    padding: var(--knm-input-padding-y) calc(var(--knm-input-padding-x) / 3);
    padding-top: 0;
    color: var(--knm-input-placeholder-color);
    margin: 0;
    margin-right: auto;
}

.form-label-group.outline input.is-invalid:not(:placeholder-shown) ~ span label,
.form-label-group.outline input.is-invalid:focus ~ span label,
.form-label-group.outline textarea.is-invalid:not(:placeholder-shown) ~ span label,
.form-label-group.outline textarea.is-invalid:focus ~ span label,
.form-label-group.outline select.is-invalid ~ span label {
    color: var(--bs-form-invalid-color, #dc3545);
}

.form-label-group.outline input:not(:placeholder-shown),
.form-label-group.outline input:focus,
.form-label-group.outline textarea:not(:placeholder-shown),
.form-label-group.outline textarea:focus,
.form-label-group.outline select {
    border-top-color: transparent !important;
    border-bottom-color: var(--knm-input-border-color);
    border-bottom-width: 1px;
    transition: all var(--knm-input-outline-anim-duration) var(--knm-input-outline-transition);
}

.form-label-group.outline input,
.form-label-group.outline textarea,
.form-label-group.outline label,
.form-label-group.outline select {
    background-color: transparent;
    transition: all var(--knm-input-outline-anim-duration) var(--knm-input-outline-transition);
}

.form-label-group.outline select ~ span::after,
.form-label-group.outline select ~ span::before {
    border-color: var(--knm-input-border-color);
}

.form-label-group.outline input,
.form-label-group.outline label {
    padding: var(--knm-input-padding-y) var(--knm-input-padding-x);
}

.form-label-group.outline select {
    border-bottom-color: var(--knm-input-border-color);
}

    .form-label-group.outline select ~ span label {
        color: var(--knm-input-placeholder-color);
    }

/* Outline border color variants */
.form-label-group.outline.border-danger { --knm-input-outline-border-color: var(--bs-danger, #dc3545); }
.form-label-group.outline.border-primary { --knm-input-outline-border-color: var(--knm-primary, #0d6efd); }
.form-label-group.outline.border-secondary { --knm-input-outline-border-color: var(--bs-secondary, #6c757d); }
.form-label-group.outline.border-success { --knm-input-outline-border-color: var(--bs-success, #198754); }
.form-label-group.outline.border-info { --knm-input-outline-border-color: var(--bs-info, #0dcaf0); }
.form-label-group.outline.border-warning { --knm-input-outline-border-color: var(--bs-warning, #ffc107); }
.form-label-group.outline.border-light { --knm-input-outline-border-color: var(--bs-light, #f8f9fa); }
.form-label-group.outline.border-dark { --knm-input-outline-border-color: var(--bs-dark, #212529); }
.form-label-group.outline.border-white { --knm-input-outline-border-color: #fff; }

.form-label-group.outline input:focus ~ span::before,
.form-label-group.outline textarea:focus ~ span::before,
.form-label-group.outline input:focus ~ span::after,
.form-label-group.outline textarea:focus ~ span::after,
.form-label-group.outline select:focus ~ span::after,
.form-label-group.outline select:focus ~ span::before,
.form-label-group.outline select:focus ~ span label {
    border-color: var(--knm-input-outline-border-color);
    color: var(--knm-input-outline-border-color) !important;
    border-width: var(--knm-input-outline-border-size);
    transition: all var(--knm-input-outline-anim-duration) var(--knm-input-outline-transition);
}

.form-label-group.outline select:focus,
.form-label-group.outline input:focus,
.form-label-group.outline textarea:focus {
    border-bottom-color: var(--knm-input-outline-border-color) !important;
    border-bottom-width: var(--knm-input-outline-border-size);
    transition: all .2s var(--knm-input-outline-transition);
}

.form-label-group.outline input:focus ~ span label,
.form-label-group.outline textarea:focus ~ span label,
.form-label-group.outline select:focus ~ span label {
    color: var(--knm-input-outline-border-color) !important;
}

/* ITI container fix */
.form-label-group.outline .iti__flag-container span {
    position: relative;
    display: inline;
}

/* ─── Bordered variant (Material Design — label floats into top border) ──── */

.form-label-group.in-border {
    position: relative;
    margin-bottom: 1rem;
    border: var(--knm-input-border-width, 1px) solid var(--knm-input-border-color);
    border-radius: var(--knm-input-border-radius, .375rem);
    padding: 0;
    background-color: var(--knm-input-bg, var(--bs-body-bg, #fff));
    transition: border-color var(--knm-input-outline-anim-duration, .2s) ease;
}

.form-label-group.in-border:focus-within {
    border-color: var(--knm-input-outline-border-color, var(--knm-primary, #0d6efd));
    box-shadow: 0 0 0 .2rem rgba(var(--knm-primary-rgb, 13, 110, 253), .15);
}

.form-label-group.in-border input,
.form-label-group.in-border textarea,
.form-label-group.in-border select,
.form-label-group.in-border div.form-control {
    border: none;
    background: transparent;
    padding: calc(var(--knm-input-padding-y, .375rem) + .5rem) var(--knm-input-padding-x, .75rem) var(--knm-input-padding-y, .375rem);
    width: 100%;
    outline: none;
    box-shadow: none;
}

.form-label-group.in-border input:focus,
.form-label-group.in-border textarea:focus,
.form-label-group.in-border select:focus,
.form-label-group.in-border div.form-control:focus {
    box-shadow: none;
}

.form-label-group.in-border span {
    position: static;
    pointer-events: none;
    display: block;
    height: 0;
    overflow: visible;
}

.form-label-group.in-border label {
    position: absolute;
    top: 50%;
    left: var(--knm-input-padding-x, .75rem);
    transform: translateY(-50%);
    margin: 0;
    pointer-events: none;
    color: var(--knm-input-placeholder-color, #6c757d);
    transition: all var(--knm-input-outline-anim-duration, .2s) ease;
    background-color: transparent;
    padding: 0 .25rem;
    font-size: 1rem;
    width: auto;
    z-index: 1;
}

.form-label-group.in-border input:not(:placeholder-shown) ~ span label,
.form-label-group.in-border input:focus ~ span label,
.form-label-group.in-border textarea:not(:placeholder-shown) ~ span label,
.form-label-group.in-border textarea:focus ~ span label,
.form-label-group.in-border select ~ span label,
.form-label-group.in-border div.form-control ~ span label {
    top: 0;
    transform: translateY(-50%);
    font-size: .75rem;
    color: var(--knm-input-outline-border-color, var(--knm-primary, #0d6efd));
    background-color: var(--knm-input-bg, var(--bs-body-bg, #fff));
    padding: 0 .25rem;
    padding: 0 .25rem;
}

.form-label-group.in-border input::placeholder,
.form-label-group.in-border textarea::placeholder {
    color: transparent;
    transition-delay: .2s;
}

.form-label-group.in-border input:focus::placeholder,
.form-label-group.in-border textarea:focus::placeholder {
    color: var(--knm-input-placeholder-color, #6c757d);
    transition-delay: 0s;
}

/* Bordered: is-invalid — label, border, and icon color */
.form-label-group.in-border input.is-invalid ~ span label,
.form-label-group.in-border textarea.is-invalid ~ span label,
.form-label-group.in-border select.is-invalid ~ span label {
    color: var(--bs-form-invalid-border-color, #dc3545);
}

.form-label-group.in-border:has(.is-invalid) {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

.form-label-group.in-border:has(.is-invalid):focus-within {
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .15);
}

/* Bordered: is-valid — label, border, and icon color */
.form-label-group.in-border input.is-valid ~ span label,
.form-label-group.in-border textarea.is-valid ~ span label,
.form-label-group.in-border select.is-valid ~ span label {
    color: var(--bs-form-valid-border-color, #198754);
}

.form-label-group.in-border:has(.is-valid) {
    border-color: var(--bs-form-valid-border-color, #198754);
}

.form-label-group.in-border:has(.is-valid):focus-within {
    box-shadow: 0 0 0 .2rem rgba(25, 135, 84, .15);
}

/* Bordered: password-wrapper / adornment-wrapper validation — propagate through wrapper */
.form-label-group.in-border:has(.knm-password-wrapper .is-invalid),
.form-label-group.in-border:has(.knm-adornment-wrapper .is-invalid) {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}
.form-label-group.in-border:has(.knm-password-wrapper .is-valid),
.form-label-group.in-border:has(.knm-adornment-wrapper .is-valid) {
    border-color: var(--bs-form-valid-border-color, #198754);
}

/* Bordered: label color when wrapped input is invalid/valid (input ~ span label won't work) */
.form-label-group.in-border:has(.knm-password-wrapper .is-invalid) span label,
.form-label-group.in-border:has(.knm-adornment-wrapper .is-invalid) span label {
    color: var(--bs-form-invalid-border-color, #dc3545);
}
.form-label-group.in-border:has(.knm-password-wrapper .is-valid) span label,
.form-label-group.in-border:has(.knm-adornment-wrapper .is-valid) span label {
    color: var(--bs-form-valid-border-color, #198754);
}

/* Bordered: eye toggle / suffix icon color on validation */
.form-label-group.in-border .knm-password-wrapper .is-invalid ~ .knm-password-toggle,
.form-label-group.in-border .knm-adornment-wrapper .is-invalid ~ .knm-adornment-suffix {
    color: var(--bs-form-invalid-border-color, #dc3545);
}
.form-label-group.in-border .knm-password-wrapper .is-valid ~ .knm-password-toggle,
.form-label-group.in-border .knm-adornment-wrapper .is-valid ~ .knm-adornment-suffix {
    color: var(--bs-form-valid-border-color, #198754);
}

/* Bordered: prefix — shift label right + extra input padding */
.form-label-group.in-border .knm-adornment-wrapper--prefix ~ span label {
    left: 3rem;
}
/* TODO: Bordered prefix padding — selector non matcha, da investigare con DevTools */
.form-label-group.in-border .knm-adornment-wrapper--prefix input,
.form-label-group.in-border .knm-adornment-wrapper--prefix textarea,
.form-label-group.in-border .knm-adornment-wrapper--prefix select {
    padding-left: 3.5rem !important;
}
.form-label-group.in-border .knm-adornment-wrapper--suffix .form-control {
    padding-right: 2.25rem;
}

/* Bordered: hide Bootstrap validation icon inside input (border itself shows state) */
.form-label-group.in-border .form-control.is-valid,
.form-label-group.in-border .form-control.is-invalid {
    background-image: none;
    padding-right: var(--knm-input-padding-x, .75rem);
}

/* ─── Borderless variant (Material Design — underline only) ────────────── */

.form-label-group.borderless {
    position: relative;
    margin-bottom: 1rem;
}

.form-label-group.borderless input,
.form-label-group.borderless textarea,
.form-label-group.borderless select,
.form-label-group.borderless div.form-control {
    border: none;
    border-bottom: var(--knm-input-border-width, 1px) solid var(--knm-input-border-color, #ced4da);
    border-radius: 0;
    background-color: transparent;
    padding: calc(var(--knm-input-padding-y, .375rem) + .5rem) 0 var(--knm-input-padding-y, .375rem);
    width: 100%;
    outline: none;
    box-shadow: none;
    transition: border-color var(--knm-input-outline-anim-duration, .2s) ease;
}

.form-label-group.borderless input:focus,
.form-label-group.borderless textarea:focus,
.form-label-group.borderless select:focus,
.form-label-group.borderless div.form-control:focus {
    box-shadow: none;
    border-bottom-color: var(--knm-input-outline-border-color, var(--knm-primary, #0d6efd));
    border-bottom-width: 2px;
}

.form-label-group.borderless label {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    margin: 0;
    pointer-events: none;
    color: var(--knm-input-placeholder-color, #6c757d);
    transition: all var(--knm-input-outline-anim-duration, .2s) ease;
    font-size: 1rem;
}

.form-label-group.borderless textarea ~ label {
    top: var(--knm-input-padding-y, .375rem);
    transform: none;
}

.form-label-group.borderless input:not(:placeholder-shown) ~ label,
.form-label-group.borderless input:focus ~ label,
.form-label-group.borderless textarea:not(:placeholder-shown) ~ label,
.form-label-group.borderless textarea:focus ~ label,
.form-label-group.borderless select ~ label,
.form-label-group.borderless div.form-control ~ label {
    top: 0;
    transform: translateY(-50%) scale(.75);
    transform-origin: left top;
    color: var(--knm-input-outline-border-color, var(--knm-primary, #0d6efd));
}

.form-label-group.borderless input::placeholder,
.form-label-group.borderless textarea::placeholder {
    color: transparent;
    transition-delay: .2s;
}

.form-label-group.borderless input:focus::placeholder,
.form-label-group.borderless textarea:focus::placeholder {
    color: var(--knm-input-placeholder-color, #6c757d);
    transition-delay: 0s;
}

.form-label-group.borderless input.is-invalid ~ label {
    color: var(--bs-form-invalid-color, #dc3545);
}

/* Borderless: prefix — shift label right past the prefix icon/text */
.form-label-group.borderless .knm-adornment-wrapper--prefix ~ label {
    left: 3rem;
}

/* Borderless: is-invalid — underline + label color */
.form-label-group.borderless input.is-invalid,
.form-label-group.borderless textarea.is-invalid,
.form-label-group.borderless select.is-invalid {
    border-bottom-color: var(--bs-form-invalid-border-color, #dc3545);
}
.form-label-group.borderless:has(.is-invalid) label {
    color: var(--bs-form-invalid-border-color, #dc3545);
}

/* Borderless: is-valid — underline + label color */
.form-label-group.borderless input.is-valid,
.form-label-group.borderless textarea.is-valid,
.form-label-group.borderless select.is-valid {
    border-bottom-color: var(--bs-form-valid-border-color, #198754);
}
.form-label-group.borderless:has(.is-valid) label {
    color: var(--bs-form-valid-border-color, #198754);
}

/* Borderless: password-wrapper propagation */
.form-label-group.borderless .knm-password-wrapper .is-invalid ~ .knm-password-toggle {
    color: var(--bs-form-invalid-border-color, #dc3545);
}
.form-label-group.borderless .knm-password-wrapper .is-valid ~ .knm-password-toggle {
    color: var(--bs-form-valid-border-color, #198754);
}

/* Borderless: hide validation icon — underline already shows state */
.form-label-group.borderless .form-control.is-valid,
.form-label-group.borderless .form-control.is-invalid {
    background-image: none;
}

/* ─── Rounded variant — same as Vertical but with rounded corners ───── */

.knm-input-rounded .form-control,
.knm-input-rounded .form-select {
    border-radius: 25px;
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--bs-border-color, #ccc);
}

.knm-input-rounded .form-control:focus,
.knm-input-rounded .form-select:focus {
    box-shadow: 0 0 0 0.15rem var(--knm-input-focus-color, var(--knm-primary, #0d6efd));
    border-color: var(--knm-input-focus-color, var(--knm-primary, #0d6efd));
}

/* Rounded: is-invalid — border + focus ring color */
.knm-input-rounded .form-control.is-invalid,
.knm-input-rounded .form-select.is-invalid {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}
.knm-input-rounded .form-control.is-invalid:focus {
    box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, .25);
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

/* Rounded: is-valid — border + focus ring color */
.knm-input-rounded .form-control.is-valid,
.knm-input-rounded .form-select.is-valid {
    border-color: var(--bs-form-valid-border-color, #198754);
}
.knm-input-rounded .form-control.is-valid:focus {
    box-shadow: 0 0 0 0.15rem rgba(25, 135, 84, .25);
    border-color: var(--bs-form-valid-border-color, #198754);
}

/* Rounded: input-group validation — propagate to container border */
.knm-input-rounded .input-group:has(.is-invalid) {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}
.knm-input-rounded .input-group:has(.is-valid) {
    border-color: var(--bs-form-valid-border-color, #198754);
}

/* Rounded: password-wrapper validation — border on wrapper + toggle color */
.knm-input-rounded .knm-password-wrapper:has(.is-invalid) {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}
.knm-input-rounded .knm-password-wrapper:has(.is-valid) {
    border-color: var(--bs-form-valid-border-color, #198754);
}
.knm-input-rounded .knm-password-wrapper .is-invalid ~ .knm-password-toggle {
    color: var(--bs-form-invalid-border-color, #dc3545);
}
.knm-input-rounded .knm-password-wrapper .is-valid ~ .knm-password-toggle {
    color: var(--bs-form-valid-border-color, #198754);
}

/* Rounded: textarea — reduced radius for multi-line fields */
.knm-input-rounded textarea.form-control {
    border-radius: 0.75rem;
}

.knm-input-rounded .form-control::placeholder {
    color: #BFBFBF;
}

.knm-input-rounded .input-group {
    border-radius: 25px;
    overflow: hidden;
}

/* ─── Filled variant (Material Design — tinted background with underline) ── */

.form-label-group.filled {
    position: relative;
    margin-bottom: 0;
}

.form-label-group.filled .form-control,
.form-label-group.filled .form-select {
    background-color: var(--knm-input-filled-bg, rgba(0, 0, 0, 0.06));
    border: none;
    border-bottom: 2px solid var(--knm-input-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, .375rem) var(--bs-border-radius, .375rem) 0 0;
    padding: 1.25rem .75rem .375rem;
    /* height: calc(2.5rem + 2px); */
    min-height: calc(2.5rem + 2px);
    transition: border-color .15s ease, background-color .15s ease;
}

.form-label-group.filled .form-control::placeholder,
.form-label-group.filled .form-select::placeholder {
    color: var(--knm-input-filled-placeholder, #333);
    opacity: 1;
}

.form-label-group.filled .form-control:focus,
.form-label-group.filled .form-select:focus {
    background-color: var(--knm-input-filled-bg-focus, rgba(0, 0, 0, 0.09));
    border-bottom-color: var(--knm-primary, #0d6efd);
    box-shadow: none;
}

/* Filled: password-wrapper — give wrapper the filled background/border */
.form-label-group.filled .knm-password-wrapper {
    background-color: var(--knm-input-filled-bg, rgba(0, 0, 0, 0.06));
    border-bottom: 2px solid var(--knm-input-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, .375rem) var(--bs-border-radius, .375rem) 0 0;
    transition: border-color .15s ease, background-color .15s ease;
}
.form-label-group.filled .knm-password-wrapper .form-control {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 1.25rem .75rem .375rem;
    padding-right: 2.5rem;
    min-height: calc(2.5rem + 2px);
    box-shadow: none;
}
.form-label-group.filled .knm-password-wrapper:focus-within {
    background-color: var(--knm-input-filled-bg-focus, rgba(0, 0, 0, 0.09));
    border-bottom-color: var(--knm-primary, #0d6efd);
}
.form-label-group.filled .knm-password-wrapper .knm-password-toggle {
    top: 50%;
}

/* Filled: adornment-wrapper — same treatment as password-wrapper */
.form-label-group.filled .knm-adornment-wrapper {
    background-color: var(--knm-input-filled-bg, rgba(0, 0, 0, 0.06));
    border-bottom: 2px solid var(--knm-input-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, .375rem) var(--bs-border-radius, .375rem) 0 0;
    transition: border-color .15s ease, background-color .15s ease;
}
.form-label-group.filled .knm-adornment-wrapper .form-control {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 1.25rem .75rem .375rem;
    min-height: calc(2.5rem + 2px);
    box-shadow: none;
}
.form-label-group.filled .knm-adornment-wrapper--prefix .form-control {
    padding-left: 2.25rem;
}
.form-label-group.filled .knm-adornment-wrapper--suffix .form-control {
    padding-right: 2.25rem;
}
.form-label-group.filled .knm-adornment-wrapper:focus-within {
    background-color: var(--knm-input-filled-bg-focus, rgba(0, 0, 0, 0.09));
    border-bottom-color: var(--knm-primary, #0d6efd);
}

.form-label-group.filled label {
    position: absolute;
    top: .25rem;
    left: .75rem;
    font-size: .7rem;
    color: var(--bs-secondary-color, #6c757d);
    pointer-events: none;
    transition: all .15s ease;
}

/* Filled: shift label right when there's a prefix */
.form-label-group.filled .knm-adornment-wrapper--prefix ~ label {
    left: 3rem;
}

/* Filled: prefix/suffix icons positioned below the label area */
.form-label-group.filled .knm-adornment-prefix,
.form-label-group.filled .knm-adornment-suffix {
    top: 60%;
}

/* Filled: is-invalid — bottom border + label color */
.form-label-group.filled .form-control.is-invalid,
.form-label-group.filled .form-select.is-invalid {
    border-bottom-color: var(--bs-form-invalid-border-color, #dc3545);
    background-color: var(--knm-input-filled-bg, rgba(0, 0, 0, 0.06));
}
.form-label-group.filled:has(.is-invalid) label {
    color: var(--bs-form-invalid-border-color, #dc3545);
}

/* Filled: is-valid — bottom border + label color */
.form-label-group.filled .form-control.is-valid,
.form-label-group.filled .form-select.is-valid {
    border-bottom-color: var(--bs-form-valid-border-color, #198754);
    background-color: var(--knm-input-filled-bg, rgba(0, 0, 0, 0.06));
}
.form-label-group.filled:has(.is-valid) label {
    color: var(--bs-form-valid-border-color, #198754);
}

/* Filled: password-wrapper validation propagation */
.form-label-group.filled .knm-password-wrapper .is-invalid ~ .knm-password-toggle {
    color: var(--bs-form-invalid-border-color, #dc3545);
}
.form-label-group.filled .knm-password-wrapper .is-valid ~ .knm-password-toggle {
    color: var(--bs-form-valid-border-color, #198754);
}

/* Filled: keep filled background on validation (Bootstrap resets it) */
.form-label-group.filled .form-control.is-valid,
.form-label-group.filled .form-control.is-invalid {
    background-color: var(--knm-input-filled-bg, rgba(0, 0, 0, 0.06));
}

[data-bs-theme="dark"] .form-label-group.filled .form-control,
[data-bs-theme="dark"] .form-label-group.filled .form-select {
    background-color: var(--knm-input-filled-bg, rgba(255, 255, 255, 0.08));
}

[data-bs-theme="dark"] .form-label-group.filled .form-control:focus,
[data-bs-theme="dark"] .form-label-group.filled .form-select:focus {
    background-color: var(--knm-input-filled-bg-focus, rgba(255, 255, 255, 0.12));
}

/* Password input group (legacy — kept for backwards compat) */
.input-group-password .input-group-text {
    background-color: transparent;
}

.input-group-password .form-control {
    border-right: 0;
}

/* Hide native browser password reveal button (Edge, Chrome) */
.input-group-password input[type="password"]::-ms-reveal,
.input-group-password input[type="password"]::-ms-clear,
.input-group-password input[type="password"]::-webkit-credentials-auto-fill-button {
    display: none !important;
}

.knm-password-wrapper input[type="password"]::-ms-reveal,
.knm-password-wrapper input[type="password"]::-ms-clear,
.knm-password-wrapper input[type="password"]::-webkit-credentials-auto-fill-button {
    display: none !important;
}

/* ─── Password eye toggle (absolute-positioned, works in all layouts) ─── */
.knm-password-wrapper {
    position: relative;
    width: 100%;
}

.knm-password-wrapper .form-control {
    padding-right: 2.5rem;
}

.knm-password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--bs-secondary-color, #6c757d);
    padding: 0;
    z-index: 2;
    line-height: 1;
    font-size: 1.1rem;
}

.knm-password-toggle:hover {
    color: var(--bs-body-color, #212529);
}

.knm-password-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ─── Adornment wrapper (absolute-positioned prefix/suffix for non-Vertical layouts) ─── */
.knm-adornment-wrapper {
    position: relative;
    width: 100%;
}

.knm-adornment-prefix,
.knm-adornment-suffix {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary-color, #6c757d);
    z-index: 2;
    pointer-events: none;
    line-height: 1;
    font-size: 0.9rem;
}

.knm-adornment-prefix {
    left: 0.75rem;
}

.knm-adornment-suffix {
    right: 0.75rem;
}

/* Suffix as clickable button: override pointer-events and add hover style */
button.knm-adornment-suffix--btn {
    pointer-events: auto;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    z-index: 3;
}
button.knm-adornment-suffix--btn:hover {
    color: var(--knm-primary, #0d6efd);
}

.knm-adornment-wrapper--prefix .form-control,
.knm-adornment-wrapper--prefix .form-select {
    padding-left: 2.25rem;
}

.knm-adornment-wrapper--suffix .form-control,
.knm-adornment-wrapper--suffix .form-select {
    padding-right: 2.25rem;
}

/* When both prefix and suffix present in password wrapper */
.knm-adornment-wrapper--prefix.knm-adornment-wrapper--suffix .form-control {
    padding-left: 2.25rem;
    padding-right: 2.25rem;
}

/* ─── ColorPicker dropdown (swatch button + popover picker) ─────────── */
.knm-color-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.knm-color-swatch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    text-align: left;
}

.knm-color-swatch__preview {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--bs-border-radius, 0.25rem);
    border: 1px solid var(--bs-border-color, #dee2e6);
    flex-shrink: 0;
}

.knm-color-swatch__label {
    font-family: monospace;
    font-size: 0.875rem;
    color: var(--bs-body-color, #212529);
}

.knm-color-dropdown__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1049;
    background: transparent;
    cursor: default;
}

.knm-color-dropdown__panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    margin-top: 0.25rem;
    background-color: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    box-shadow: var(--bs-box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
    padding: 0;
    /* min-width: 260px; */
}

/* ─── TextArea auto-expand with field-sizing CSS ─────────────────────── */
.knm-textarea-autosize {
    min-height: calc(var(--knm-textarea-min-rows, 3) * 1.5em + 1rem);
    max-height: calc(var(--knm-textarea-max-rows, 10) * 1.5em + 1rem);
    overflow-y: auto;
    resize: vertical;
}

.custom-input-group-text {
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color, #212529);
    text-align: center;
    white-space: nowrap;
    background-color: transparent;
    border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, .375rem);
}

/* Utility: no paragraph margin */
p { margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   GRID — DataTable-inspired
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Grid container (Bootstrap-native wrapper) ── */
.knm-grid {
    border: 1px solid var(--knm-grid-border);
    border-radius: var(--knm-grid-radius);
    overflow: hidden;
    background: var(--bs-body-bg);
}

/* ── Toolbar ── */
.knm-grid .knm-grid-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--knm-grid-border);
    background: var(--bs-tertiary-bg);
    flex-wrap: wrap;
}
.knm-grid .knm-grid-toolbar .form-control {
    max-width: 220px;
    height: 32px;
    font-size: 0.8125rem;
}
.knm-grid .knm-grid-toolbar .btn {
    height: 32px;
    font-size: 0.8125rem;
    padding: 0 0.625rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.knm-grid-toolbar-spacer { flex: 1; }

/* Column chooser dropdown */
.knm-grid-columns-menu,
.knm-grid-columns-dropdown {
    max-height: 18rem;
    overflow: auto;
    z-index: var(--knm-grid-columns-z-index);
}

/* ── Scroll container ── */
.knm-grid .knm-grid-scroll {
    overflow: auto;
    max-height: var(--knm-grid-scroll-height, none);
}

/* ── Table header (Bootstrap-native) ── */
.knm-grid table { margin-bottom: 0; }
.knm-grid thead th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
    border-bottom-width: 2px;
    user-select: none;
    vertical-align: middle;
    background: var(--knm-grid-header-bg);
    position: sticky;
    top: 0;
    z-index: 2;
}
.knm-grid thead th.sortable { cursor: pointer; }
.knm-grid thead th.sortable:hover {
    color: var(--knm-grid-header-hover-color);
    background: var(--knm-grid-header-hover-bg);
}
.knm-grid tbody td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
    font-size: 0.8125rem;
    height: var(--knm-grid-row-height);
}
.knm-grid tbody tr { transition: background-color 0.15s ease; }

/* ── Sticky header (explicit opt-in with higher z-index) ── */
.knm-grid-sticky-thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--knm-grid-header-bg, var(--bs-body-bg));
    box-shadow: 0 1px 0 var(--bs-border-color, #dee2e6);
}
[data-bs-theme="dark"] .knm-grid-sticky-thead th {
    background: var(--knm-grid-header-bg, var(--bs-body-bg, #212529));
}

/* ── Bottom header (tfoot styled as thead) ── */
.knm-grid-tfoot-header th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
    border-top-width: 2px;
    user-select: none;
    vertical-align: middle;
    background: var(--knm-grid-header-bg);
}
.knm-grid-tfoot-header th.sortable { cursor: pointer; }
.knm-grid-tfoot-header th.sortable:hover {
    color: var(--knm-grid-header-hover-color);
    background: var(--knm-grid-header-hover-bg);
}

/* ── Sticky bottom header ── */
.knm-grid-sticky-tfoot th {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--knm-grid-header-bg, var(--bs-body-bg));
    box-shadow: 0 -1px 0 var(--bs-border-color, #dee2e6);
}
[data-bs-theme="dark"] .knm-grid-sticky-tfoot th {
    background: var(--knm-grid-header-bg, var(--bs-body-bg, #212529));
}

/* Table header (legacy) */
.knm-grid-thead {
    z-index: 1;
}

.knm-grid-th-accordion,
.knm-grid-accordion-th {
    width: 40px;
}

.knm-grid-th-actions,
.knm-grid-action-th {
    width: 80px;
    max-width: 150px;
}

/* ── Column header grouping ── */
.knm-grid-header-group-cell {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--knm-grid-accent);
    border-bottom: 2px solid var(--knm-grid-accent) !important;
    padding: 0.375rem 0.75rem;
    background: var(--knm-grid-header-bg);
}
.knm-grid-header-group-cell.border-bottom-0 {
    border-bottom: none !important;
}

/* ── FixedHeader clone (DataTables.js-style) ── */
.knm-grid-fixed-header-clone {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    background: var(--bs-body-bg);
    border-bottom: 2px solid var(--knm-grid-border, var(--bs-border-color));
    pointer-events: auto;
}
[data-bs-theme="dark"] .knm-grid-fixed-header-clone {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.knm-grid-fixed-header-clone table {
    margin-bottom: 0;
}

/* ── Grid search input sizing ── */
.knm-grid-search-input {
    max-width: 220px;
}

/* ── Sort indicator (Bootstrap-native) ── */
.knm-grid-sort-icon {
    color: var(--knm-grid-sort-color);
    font-weight: 500;
    font-size: 0.625rem;
    opacity: 0.5;
    margin-left: 0.25rem;
}
.knm-grid th.sorted .knm-grid-sort-icon { opacity: 1; color: var(--knm-grid-accent); }

/* Column filter dropdown (legacy) */
.knm-grid-column-filter,
.knm-grid-topfilter-panel {
    z-index: var(--knm-grid-filter-z-index);
    min-width: 200px;
}

/* ── Filter popover icon in header ── */
.knm-grid-filter-icon {
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
    padding: 2px;
    line-height: 1;
}

.knm-grid-th-filterable:hover .knm-grid-filter-icon,
.knm-grid-filter-icon--active {
    opacity: 1 !important;
}

.knm-grid-filter-icon--active {
    color: var(--knm-primary, #0d6efd);
}

.knm-grid-filter-icon:hover {
    color: var(--knm-primary, #0d6efd);
}

/* ── Filter popover panel ── */
.knm-grid-filter-popover {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    min-width: 220px;
    max-width: 280px;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0;
    margin-top: 4px;
    cursor: default;
    font-weight: normal;
}

.knm-grid-filter-popover__body {
    padding: 0.75rem;
}

.knm-grid-filter-popover__label {
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0.2rem;
    color: var(--bs-secondary-color, #6c757d);
}

.knm-grid-filter-popover__footer {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
}

/* ── Filter backdrop (click-outside) ── */
.knm-grid-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: transparent;
}

/* ── Dark mode ── */
[data-bs-theme="dark"] .knm-grid-filter-popover {
    background: var(--bs-body-bg, #212529);
    border-color: var(--bs-border-color, #495057);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Accordion */
.knm-grid-accordion-icon,
.knm-grid-accordion-caret {
    cursor: pointer;
    transition: transform var(--knm-grid-accordion-transition);
}

.knm-grid-accordion-icon.rotate-90,
.rotate-90 {
    transform: rotate(90deg);
}

/* Action column */
.knm-grid-td-actions,
.knm-grid-action-td {
    white-space: nowrap;
    padding: 0;
    margin: 0;
}

/* Accordion content */
.knm-grid-accordion-td {
    background-color: var(--bs-tertiary-bg, var(--bs-body-bg));
}

.knm-grid-accordion-body,
.accordion-content {
    width: 100%;
    overflow-x: auto;
    display: block;
    background-color: var(--bs-body-bg);
}

.knm-grid-accordion-content,
.knm-grid-accordion-inner {
    min-width: 0;
}

/* Sticky bottom */
.knm-grid-sticky-bottom,
.knm-grid-sticky-bottom-header,
.sticky-bottom-header {
    position: sticky;
    bottom: 0;
    background-color: var(--bs-table-bg, var(--bs-body-bg, #fff));
    z-index: 0;
}

.knm-grid-sticky-column,
.knm-grid-sticky-nowrap {
    white-space: nowrap;
}

.knm-grid-sticky-actions,
.knm-grid-sticky-action {
    white-space: nowrap;
    width: 80px;
}

/* Grid modal (inline delete confirm etc.) */
.knm-grid-modal-backdrop {
    background-color: var(--knm-grid-backdrop-bg);
    z-index: 9999;
}

.knm-grid-modal-dialog {
    z-index: 10000;
}

/* Image cells */
.knm-grid-image {
    max-width: 100%;
    max-height: var(--knm-grid-image-max-height);
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.knm-grid-image-svg {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .knm-grid-image-svg svg {
        max-width: 100%;
        max-height: 100%;
    }

/* Frozen columns */
.knm-grid-frozen {
    position: sticky;
    z-index: 2;
    background-color: var(--bs-table-bg, var(--bs-body-bg, #fff));
}
[data-bs-theme="dark"] .knm-grid-frozen {
    background-color: var(--bs-table-bg, var(--bs-body-bg, #212529));
}
.knm-grid-frozen--right {
    border-left: 2px solid var(--knm-border-color, #dee2e6);
}
.knm-grid-frozen:not(.knm-grid-frozen--right) {
    border-right: 2px solid var(--knm-border-color, #dee2e6);
}
thead .knm-grid-frozen {
    z-index: 3;
}

/* ── Grid: Row reorder drag handle ── */
.knm-grid-th-reorder,
.knm-grid-td-reorder {
    width: 32px;
    max-width: 32px;
    text-align: center;
    padding: 0.25rem !important;
}
.knm-grid-reorder-handle {
    cursor: grab;
    opacity: 0.4;
    font-size: 1rem;
    transition: opacity 0.15s;
}
.knm-grid-reorder-handle:hover {
    opacity: 1;
}
.knm-grid-td-reorder[draggable="true"]:active .knm-grid-reorder-handle {
    cursor: grabbing;
}

/* ── Grid: Group header row ── */
.knm-grid-group-header td {
    background-color: var(--bs-tertiary-bg, #f0f0f0);
    border-bottom: 2px solid var(--bs-border-color, #dee2e6);
    font-size: 0.9rem;
}
.knm-grid-group-header:hover td {
    background-color: var(--bs-secondary-bg, #e2e6ea);
}

/* ── Grid: Multi-level group header indentation ── */
.knm-grid-group-header td[style*="padding-left"] {
    font-size: 0.85rem;
}

/* ── Grid: Inline edit row ── */
.knm-grid-inline-editing td {
    background-color: var(--bs-warning-bg-subtle, #fff3cd) !important;
}
.knm-grid-inline-editing .form-control-sm,
.knm-grid-inline-editing .form-select-sm {
    padding: 0.1rem 0.35rem;
    font-size: inherit;
    height: 26px;
    line-height: 1;
    border: 1px solid var(--bs-border-color, #dee2e6);
}

/* ── Cell edit overlay (Bootstrap-native) ── */
.knm-grid-cell-editing {
    position: relative;
    background: var(--knm-grid-accent-subtle) !important;
}
.knm-grid-cell-editing input,
.knm-grid-cell-editing select {
    position: absolute;
    inset: 3px;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    padding: 0.15rem 0.5rem;
    font-size: inherit;
    border: 2px solid var(--knm-grid-accent);
    border-radius: 4px;
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--knm-primary-rgb, 13, 110, 253), 0.15);
    background: var(--bs-body-bg);
    z-index: 1;
}
.knm-grid-cell-editing .form-check-input {
    position: relative;
    z-index: 1;
}
.knm-grid-cell-editing .d-inline-flex {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

/* ── Grid: Group footer row ── */
.knm-grid-group-footer td {
    background-color: var(--bs-tertiary-bg, #f0f0f0);
    border-top: 1px dashed var(--bs-border-color, #dee2e6);
    font-size: 0.8125rem;
}

/* Server-side loading overlay */
.knm-grid-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: var(--knm-grid-filter-z-index, 1000);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--knm-grid-loading-bg, rgba(255, 255, 255, 0.65));
    border-radius: inherit;
    pointer-events: all;
}
[data-bs-theme="dark"] .knm-grid-loading-overlay {
    background-color: var(--knm-grid-loading-bg, rgba(0, 0, 0, 0.45));
}

/* Infinite scroll sentinel */
.knm-grid-infinite-sentinel {
    min-height: 1px;
}

/* ── Tree grid ── */
.knm-grid-tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    font-size: 0.7rem;
    color: var(--bs-body-color);
    margin-right: 0.25rem;
    border-radius: 3px;
    transition: background-color 0.15s;
    vertical-align: middle;
}
.knm-grid-tree-toggle:hover {
    background: var(--knm-grid-accent-subtle, rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1));
    color: var(--knm-grid-accent, var(--bs-primary, #0d6efd));
}
.knm-grid-tree-spacer {
    display: inline-block;
    width: 20px;
    margin-right: 0.25rem;
}
@keyframes knm-spin {
    to { transform: rotate(360deg); }
}
.knm-spin {
    animation: knm-spin 0.8s linear infinite;
}

/* Row ellipsis overflow */
.rowEllipsis {
    max-width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Table responsive */
.table-responsive {
    position: relative;
    width: 100%;
}

/* ── Grid Responsive Priority (DataTables-style) ──────────────────────── */
/* Priority 2: hide below large (992px) */
@media (max-width: 991.98px) {
    .knm-grid-col-rp-2 { display: none !important; }
}
/* Priority 3: hide below medium (768px) */
@media (max-width: 767.98px) {
    .knm-grid-col-rp-3 { display: none !important; }
}
/* Priority 4+: hide below small (576px) */
@media (max-width: 575.98px) {
    .knm-grid-col-rp-4 { display: none !important; }
}

/* ── Responsive expand button ── */
.knm-grid-expand-cell {
    width: 36px;
    padding: 0 !important;
    text-align: center;
}
.knm-grid-expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: var(--knm-grid-accent);
    color: #fff;
    font-size: 0.75rem;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.15s;
    line-height: 1;
}
.knm-grid-expand-btn:hover {
    background: var(--knm-primary, var(--bs-primary, #0d6efd));
    transform: scale(1.1);
}
.knm-grid-expand-btn.expanded {
    transform: rotate(90deg);
    background: var(--bs-danger, #dc3545);
}
.knm-grid-expand-btn.expanded:hover {
    transform: rotate(90deg) scale(1.1);
}

/* ── Accordion toggle column ── */
.knm-grid-th-expand,
.knm-grid-td-expand {
    width: 30px;
    max-width: 30px;
    padding: 0 !important;
    text-align: center;
}

/* ── Responsive detail row ── */
.knm-grid-detail-row td {
    padding: 0 !important;
    background: var(--bs-tertiary-bg) !important;
    border-bottom: 2px solid var(--knm-grid-accent);
}
.knm-grid-detail-content {
    padding: 0.75rem 1rem 0.75rem 3rem;
}
.knm-grid-detail-content dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1rem;
    margin: 0;
    font-size: 0.8125rem;
}
.knm-grid-detail-content dt {
    color: var(--bs-secondary-color);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-top: 0.125rem;
}
.knm-grid-detail-content dd { margin: 0; }

/* ── Footer / Pagination (Bootstrap-native) ── */
.knm-grid-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.875rem;
    border-top: 1px solid var(--knm-grid-border);
    background: var(--bs-tertiary-bg);
    font-size: 0.8125rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.knm-grid-footer { overflow: visible; }
.knm-grid-footer .pagination { margin: 0; }
.knm-grid-page-info { color: var(--bs-secondary-color); }

/* Rounded layout: circular pagination buttons (KNMButton-based) */
.knm-layout-rounded .knm-grid-footer .btn {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.75rem;
    line-height: 1;
}

/* ── Page size custom dropdown ── */
.knm-grid-pagesize {
    position: relative;
    display: inline-block;
}
.knm-grid-pagesize__btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid var(--knm-select-border);
    border-radius: var(--knm-select-radius);
    background: var(--knm-select-bg);
    color: var(--knm-select-color);
    padding: 0.15rem 0.5rem;
    font-size: 0.8125rem;
    cursor: pointer;
    height: 30px;
    line-height: 1;
}
.knm-grid-pagesize__btn i { font-size: 0.625rem; }
.knm-grid-pagesize__btn:hover { border-color: var(--knm-select-active-color); }
.knm-grid-pagesize__dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    min-width: 100%;
    background-color: var(--knm-select-bg);
    border: 1px solid var(--knm-select-border);
    border-radius: var(--knm-select-radius);
    box-shadow: var(--knm-select-shadow);
    z-index: 1050;
    overflow: hidden;
    margin-bottom: 2px;
}
[data-bs-theme="dark"] .knm-grid-pagesize__dropdown {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.knm-grid-pagesize__option {
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    cursor: pointer;
    text-align: center;
    color: var(--knm-select-color);
    background-color: var(--knm-select-bg);
}
.knm-grid-pagesize__option:hover {
    background-color: var(--knm-select-hover-bg);
    color: var(--knm-select-hover-color);
}
.knm-grid-pagesize__option--active {
    background-color: var(--knm-select-active-bg);
    color: var(--knm-select-active-color);
    font-weight: 600;
}
/* Layout overrides */
.knm-layout-rounded .knm-grid-pagesize__btn { border-radius: 50rem; }
.knm-layout-rounded .knm-grid-pagesize__dropdown { border-radius: 0.75rem; }

/* ── Bulk action bar (Bootstrap-native) ── */
.knm-grid .knm-grid-bulk-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--knm-grid-accent-subtle);
    border-bottom: 1px solid var(--knm-grid-accent);
    font-size: 0.8125rem;
}

/* ── Print styles ── */
@media print {
    .knm-grid-toolbar, .knm-grid-bulk-bar, .knm-grid-footer,
    .knm-grid-expand-cell, .knm-grid-th-check, .knm-grid-td-check,
    .knm-grid-th-reorder, .knm-grid-td-reorder,
    .knm-grid-th-actions, .knm-grid-td-actions { display: none !important; }
    .knm-grid { border: none; border-radius: 0; }
    .knm-grid .knm-grid-scroll { max-height: none !important; overflow: visible !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM — Global styles (auto-generated form in Grid modal)
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-auto-form {
    width: 100%;
}

.knm-form-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.knm-form-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .knm-form-field.col-span-1  { grid-column: span 1; }
    .knm-form-field.col-span-2  { grid-column: span 2; }
    .knm-form-field.col-span-3  { grid-column: span 3; }
    .knm-form-field.col-span-4  { grid-column: span 4; }
    .knm-form-field.col-span-5  { grid-column: span 5; }
    .knm-form-field.col-span-6  { grid-column: span 6; }
    .knm-form-field.col-span-7  { grid-column: span 7; }
    .knm-form-field.col-span-8  { grid-column: span 8; }
    .knm-form-field.col-span-9  { grid-column: span 9; }
    .knm-form-field.col-span-10 { grid-column: span 10; }
    .knm-form-field.col-span-11 { grid-column: span 11; }
    .knm-form-field.col-span-12 { grid-column: span 12; }

.knm-form-label {
    font-weight: var(--knm-form-label-font-weight);
    margin-bottom: 0.5rem;
    color: var(--knm-form-label-color);
    font-size: var(--knm-form-label-font-size);
}

.knm-required-indicator {
    color: var(--knm-form-required-color);
}

.knm-form-input,
.knm-form-select,
.knm-form-textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--knm-form-input-border-color);
    border-radius: var(--knm-form-input-radius);
    font-size: 0.875rem;
    color: var(--bs-body-color, #212529);
    background-color: var(--bs-body-bg, #fff);
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .knm-form-input:focus,
    .knm-form-select:focus,
    .knm-form-textarea:focus {
        outline: none;
        border-color: var(--knm-form-input-focus-border);
        box-shadow: 0 0 0 3px var(--knm-form-input-focus-shadow);
    }

    .knm-form-input:disabled,
    .knm-form-select:disabled,
    .knm-form-textarea:disabled {
        background-color: var(--knm-form-input-disabled-bg);
        cursor: not-allowed;
    }

.knm-checkbox-label {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    cursor: pointer;
}

.knm-form-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
    cursor: pointer;
}

.knm-validation-error {
    color: var(--knm-form-validation-color);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.knm-form-group-section {
    margin-bottom: 2rem;
}

.knm-form-group-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--knm-form-group-title-color);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--knm-form-group-border-color);
}

@media (max-width: 767.98px) {
    .knm-form-field {
        grid-column: span 12 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL — Global styles (KNMModal inline in knm.razorcomponents.css)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fullscreen toggle button */
.knm-modal-fullscreen-btn i { font-size: 0.875rem; }

/* Extra-extra-large size (Bootstrap doesn't have this) */
.knm-modal-xxl { max-width: 82.5rem; }

/* Adaptive width (custom) */
.knm-modal-adaptive {
    max-width: min(90vw, 82.5rem);
}

/* Backdrop style variants (custom) */
.knm-modal-backdrop-dark  { background: rgba(0, 0, 0, .75) !important; }
.knm-modal-backdrop-light { background: rgba(0, 0, 0, .25) !important; }
.knm-modal-backdrop-blur  { background: rgba(0, 0, 0, .3) !important; backdrop-filter: blur(5px); }

/* Animations (custom — Bootstrap doesn't provide slide/zoom) */
.knm-modal-fade {
    opacity: 0;
    transition: opacity var(--knm-modal-anim-duration, .2s) ease-out;
}

    .knm-modal-fade.show { opacity: 1; }

.knm-modal-slide {
    opacity: 0;
    transform: translateY(-1rem);
    transition: transform var(--knm-modal-anim-duration, .2s) ease-out, opacity var(--knm-modal-anim-duration, .2s) ease-out;
}

    .knm-modal-slide.show {
        opacity: 1;
        transform: translateY(0);
    }

.knm-modal-zoom {
    opacity: 0;
    transform: scale(.95);
    transition: transform var(--knm-modal-anim-duration, .2s) ease-out, opacity var(--knm-modal-anim-duration, .2s) ease-out;
}

    .knm-modal-zoom.show {
        opacity: 1;
        transform: scale(1);
    }

.modal.d-block.show:not(.knm-modal-fade):not(.knm-modal-slide):not(.knm-modal-zoom) {
    animation: knm-modal-slidein 0.3s ease-out;
}

@keyframes knm-modal-slidein {
    from { opacity: 0; transform: translateY(-50px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Loading overlay */
.modal.d-block.loading .modal-content {
    opacity: 0.7;
    pointer-events: none;
}

.knm-modal-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--knm-modal-loading-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    border-radius: var(--bs-modal-inner-border-radius, .5rem);
}

/* Modal position classes (custom — Bootstrap only has centered) */
.knm-modal-top {
    position: absolute;
    top: var(--knm-modal-margin);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: 100%;
}

.knm-modal-bottom {
    position: absolute;
    bottom: var(--knm-modal-margin);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: 100%;
}

.knm-modal-left {
    position: absolute;
    top: var(--knm-modal-margin);
    left: var(--knm-modal-margin);
    transform: none;
    margin: 0;
    width: 100%;
}

.knm-modal-right {
    position: absolute;
    top: var(--knm-modal-margin);
    right: var(--knm-modal-margin);
    left: auto;
    transform: none;
    margin: 0;
    width: 100%;
}

.knm-modal-center-left {
    position: absolute;
    top: 50%;
    left: var(--knm-modal-margin);
    transform: translateY(-50%);
    margin: 0;
    width: 100%;
}

.knm-modal-center-right {
    position: absolute;
    top: 50%;
    right: var(--knm-modal-margin);
    left: auto;
    transform: translateY(-50%);
    margin: 0;
    width: 100%;
}

.knm-modal-top-left {
    position: absolute;
    top: var(--knm-modal-margin);
    left: var(--knm-modal-margin);
    transform: none;
    margin: 0;
    width: 100%;
}

.knm-modal-top-right {
    position: absolute;
    top: var(--knm-modal-margin);
    right: var(--knm-modal-margin);
    left: auto;
    transform: none;
    margin: 0;
    width: 100%;
}

.knm-modal-bottom-left {
    position: absolute;
    bottom: var(--knm-modal-margin);
    left: var(--knm-modal-margin);
    top: auto;
    transform: none;
    margin: 0;
    width: 100%;
}

.knm-modal-bottom-right {
    position: absolute;
    bottom: var(--knm-modal-margin);
    right: var(--knm-modal-margin);
    left: auto;
    top: auto;
    transform: none;
    margin: 0;
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE (Bootstrap 5.3 data-bs-theme="dark")
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   INPUT — Floating label fixes (from KNMInput.razor.css)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Password eye-toggle button */
.custom-input-group-text.b-r-right {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background-color: var(--bs-secondary-bg, #e9ecef);
    border: 1px solid var(--bs-border-color, #ced4da);
    border-left: none;
    border-radius: 0 var(--bs-border-radius, 0.375rem) var(--bs-border-radius, 0.375rem) 0;
    line-height: 1.5;
    color: var(--bs-body-color, #212529);
    user-select: none;
    transition: background-color 0.15s ease-in-out;
}

.custom-input-group-text.b-r-right:hover {
    background-color: var(--bs-tertiary-bg, #dee2e6);
}

/* Floating label fix for Date/DateTime/Time/Month/Week/Select */
.form-floating.knm-has-value > label {
    opacity: .65;
    transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-floating > input[type="date"],
.form-floating > input[type="datetime-local"],
.form-floating > input[type="time"],
.form-floating > input[type="month"],
.form-floating > input[type="week"] {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   OTP — KNMOTP component
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-otp-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.knm-otp-input {
    width: 3rem;
    height: 3rem;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    padding: 0;
    border: 2px solid var(--knm-otp-border);
    border-radius: var(--knm-otp-radius);
    background-color: var(--knm-otp-bg);
    color: var(--knm-otp-color);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    caret-color: var(--knm-otp-caret);
}

.knm-otp-input:focus {
    border-color: var(--knm-otp-focus-border);
    box-shadow: 0 0 0 0.2rem var(--knm-otp-focus-shadow);
    outline: none;
}

.knm-otp-input:disabled {
    background-color: var(--knm-otp-disabled-bg);
    opacity: 0.65;
    cursor: not-allowed;
}

.knm-otp-input::placeholder {
    color: var(--knm-otp-placeholder);
    opacity: 0.5;
}

.knm-otp-separator {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--knm-otp-separator-color);
    user-select: none;
}

@media (max-width: 575.98px) {
    .knm-otp-input {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }
}

/* ── OTP Style Variants ─────────────────────────────────────────────────── */

/* Underline — Material Design style, bottom border only */
.knm-otp-input--underline {
    border: none;
    border-bottom: 2px solid var(--knm-otp-border, #dee2e6);
    border-radius: 0;
    background: transparent;
}

.knm-otp-input--underline:focus {
    border-color: var(--knm-primary, #0d6efd);
    box-shadow: 0 1px 0 0 var(--knm-primary, #0d6efd);
    border-radius: 0;
}

/* Borderless — no visible border, flat style */
.knm-otp-input--borderless {
    border: none;
    background: var(--knm-otp-borderless-bg, #f8f9fa);
    border-radius: var(--knm-border-radius, 0.375rem);
}

.knm-otp-input--borderless:focus {
    box-shadow: none;
    background: var(--knm-otp-borderless-focus-bg, #e9ecef);
}

/* Rounded — pill-style inputs */
.knm-otp-input--rounded {
    border-radius: 50%;
}

.knm-otp-input--rounded:focus {
    border-color: var(--knm-otp-focus-border);
    box-shadow: 0 0 0 0.2rem var(--knm-otp-focus-shadow);
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUDIT FOOTER — KnmAuditFooter component
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-audit-footer {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: var(--knm-audit-padding);
    border-top: 1px solid var(--knm-audit-border-color);
    background-color: var(--knm-audit-bg);
    font-size: var(--knm-audit-font-size);
    color: var(--knm-audit-color);
    border-radius: 0 0 var(--knm-audit-radius) var(--knm-audit-radius);
}

.knm-audit-footer__entries {
    display: flex;
    flex-wrap: wrap;
    gap: var(--knm-audit-gap);
    align-items: center;
}

.knm-audit-footer__entries > .knm-audit-footer__item + .knm-audit-footer__item {
    margin-left: auto;
}

.knm-audit-footer__item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.knm-audit-footer__item > i {
    color: var(--knm-audit-icon-color);
}

.knm-audit-footer__created > i {
    color: var(--knm-audit-created-color);
}

.knm-audit-footer__updated > i {
    color: var(--knm-audit-updated-color);
}

.knm-audit-footer__label {
    font-weight: 500;
    color: var(--knm-audit-label-color);
}

.knm-audit-footer__value {
    color: var(--knm-audit-color);
}

.knm-audit-footer__sep {
    opacity: var(--knm-audit-sep-opacity);
}

.knm-audit-footer__custom {
    border-top: 1px dashed var(--knm-audit-border-color);
    padding-top: 0.25rem;
    margin-top: 0.1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM GENERATOR — Section dividers, grid, groups (from KnmFormGenerator)
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-form-generator {
    width: 100%;
}

.knm-form-section-divider {
    position: relative;
    text-align: center;
    margin: 0.75rem 0 0.25rem;
    grid-column: 1 / -1;
}

.knm-form-section-divider hr {
    border: none;
    border-top: 1px solid var(--knm-form-group-border-color);
    margin: 0;
}

.knm-form-section-title {
    position: relative;
    top: -0.7em;
    background: var(--bs-body-bg, #fff);
    padding: 0 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOAST CONTAINER — Positions
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-toast-container {
    position: fixed;
    z-index: var(--knm-toast-z-index);
    display: flex;
    flex-direction: column;
    gap: var(--knm-toast-gap);
    pointer-events: none;
    padding: 1rem;
}

/* ─── 9 position variants ─────────────────────────────────────────────── */
.knm-toast-container--top-left      { top: 0; left: 0; align-items: flex-start; }
.knm-toast-container--top-center    { top: 0; left: 50%; transform: translateX(-50%); align-items: center; }
.knm-toast-container--top-right     { top: 0; right: 0; align-items: flex-end; }
.knm-toast-container--center-left   { top: 50%; left: 0; transform: translateY(-50%); align-items: flex-start; }
.knm-toast-container--center        { top: 50%; left: 50%; transform: translate(-50%, -50%); align-items: center; }
.knm-toast-container--center-right  { top: 50%; right: 0; transform: translateY(-50%); align-items: flex-end; }
.knm-toast-container--bottom-left   { bottom: 0; left: 0; align-items: flex-start; flex-direction: column-reverse; }
.knm-toast-container--bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; }
.knm-toast-container--bottom-right  { bottom: 0; right: 0; align-items: flex-end; flex-direction: column-reverse; }

/* ═══════════════════════════════════════════════════════════════════════════
   TOAST — Individual item
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-toast {
    display: flex;
    align-items: flex-start;
    min-width: var(--knm-toast-min-width);
    max-width: var(--knm-toast-max-width);
    padding: var(--knm-toast-padding);
    background: var(--knm-toast-bg);
    color: var(--knm-toast-color);
    border-radius: var(--knm-toast-border-radius);
    box-shadow: var(--knm-toast-shadow);
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    border-left: 4px solid transparent;
}

.knm-toast--enter {
    animation: knm-toast-slide-in 0.3s ease-out;
}

@keyframes knm-toast-slide-in {
    from { opacity: 0; transform: translateX(100%); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Bottom containers slide from bottom */
.knm-toast-container--bottom-left .knm-toast--enter,
.knm-toast-container--bottom-center .knm-toast--enter,
.knm-toast-container--bottom-right .knm-toast--enter {
    animation-name: knm-toast-slide-up;
}

@keyframes knm-toast-slide-up {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Left containers slide from left */
.knm-toast-container--top-left .knm-toast--enter,
.knm-toast-container--center-left .knm-toast--enter,
.knm-toast-container--bottom-left .knm-toast--enter {
    animation-name: knm-toast-slide-in-left;
}

@keyframes knm-toast-slide-in-left {
    from { opacity: 0; transform: translateX(-100%); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Center containers fade in */
.knm-toast-container--center .knm-toast--enter,
.knm-toast-container--top-center .knm-toast--enter,
.knm-toast-container--bottom-center .knm-toast--enter {
    animation-name: knm-toast-fade-in;
}

@keyframes knm-toast-fade-in {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

/* ─── Type variants (border-left color) ───────────────────────────────── */
.knm-toast--success { border-left-color: var(--knm-toast-success-color); }
.knm-toast--error   { border-left-color: var(--knm-toast-error-color); }
.knm-toast--warning { border-left-color: var(--knm-toast-warning-color); }
.knm-toast--info    { border-left-color: var(--knm-toast-info-color); }

/* ─── Icon ────────────────────────────────────────────────────────────── */
.knm-toast__icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    margin-right: 0.75rem;
    line-height: 1;
    margin-top: 0.125rem;
}

.knm-toast--success .knm-toast__icon { color: var(--knm-toast-success-color); }
.knm-toast--error   .knm-toast__icon { color: var(--knm-toast-error-color); }
.knm-toast--warning .knm-toast__icon { color: var(--knm-toast-warning-color); }
.knm-toast--info    .knm-toast__icon { color: var(--knm-toast-info-color); }

/* ─── Body ────────────────────────────────────────────────────────────── */
.knm-toast__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.knm-toast__title {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.3;
}

.knm-toast__message {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--bs-secondary-color, #6c757d);
}

/* ─── Close button ────────────────────────────────────────────────────── */
.knm-toast__close {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0.25rem;
    margin-left: 0.5rem;
    cursor: pointer;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.875rem;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.knm-toast__close:hover { opacity: 1; }

/* ─── Progress bar ────────────────────────────────────────────────────── */
.knm-toast__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: currentColor;
    opacity: 0.3;
    transform-origin: left;
    animation: knm-toast-progress linear forwards;
}

.knm-toast--success .knm-toast__progress { color: var(--knm-toast-success-color); }
.knm-toast--error   .knm-toast__progress { color: var(--knm-toast-error-color); }
.knm-toast--warning .knm-toast__progress { color: var(--knm-toast-warning-color); }
.knm-toast--info    .knm-toast__progress { color: var(--knm-toast-info-color); }

@keyframes knm-toast-progress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALERT DIALOG
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-alert-backdrop {
    position: fixed;
    inset: 0;
    background: var(--knm-alert-backdrop-bg);
    z-index: var(--knm-alert-z-index);
    animation: knm-alert-backdrop-in 0.2s ease-out;
}

@keyframes knm-alert-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.knm-alert {
    position: fixed;
    inset: 0;
    z-index: calc(var(--knm-alert-z-index) + 1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.knm-alert__content {
    position: relative;
    width: 100%;
    max-width: var(--knm-alert-max-width);
    background: var(--knm-alert-bg);
    color: var(--knm-alert-color);
    border-radius: var(--knm-alert-border-radius);
    box-shadow: var(--knm-alert-shadow);
    padding: 2rem 1.5rem 1.5rem;
    text-align: center;
    animation: knm-alert-pop-in 0.25s ease-out;
    overflow: hidden;
}

@keyframes knm-alert-pop-in {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

/* ─── Close button ────────────────────────────────────────────────────── */
.knm-alert__close.btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    padding: 0;
    min-width: auto;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 1rem;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.knm-alert__close:hover { opacity: 1; }

/* ─── Animated Icon ───────────────────────────────────────────────────── */
.knm-alert-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5em;
    height: 5em;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    border: 0.25em solid transparent;
    box-sizing: content-box;
}

/* ── SUCCESS ────────────────────────────────────────────── */
.knm-alert-icon--success {
    border-color: var(--bs-success, #198754);
    animation: knm-alert-icon-flip 0.5s;
}

.knm-alert-icon__ring {
    position: absolute;
    inset: -0.375em;
    border-radius: 50%;
    border: 0.25em solid rgba(25, 135, 84, 0.3);
}

.knm-alert-icon__line {
    display: block;
    position: absolute;
    height: 0.3125em;
    border-radius: 0.125em;
    background-color: var(--bs-success, #198754);
}

.knm-alert-icon__line--tip {
    top: 2.875em;
    left: 0.875em;
    width: 1.5625em;
    transform: rotate(45deg);
    animation: knm-alert-success-tip 0.75s;
}

.knm-alert-icon__line--long {
    top: 2.375em;
    right: 0.5em;
    width: 2.9375em;
    transform: rotate(-45deg);
    animation: knm-alert-success-long 0.75s;
}

@keyframes knm-alert-success-tip {
    0%   { top: 1.1875em; left: 0.0625em; width: 0; }
    54%  { top: 1.0625em; left: 0.125em;  width: 0; }
    70%  { top: 2.1875em; left: -0.375em; width: 3.125em; }
    84%  { top: 3em;      left: 1.3125em; width: 1.0625em; }
    100% { top: 2.875em;  left: 0.875em;  width: 1.5625em; }
}

@keyframes knm-alert-success-long {
    0%   { top: 3.375em; right: 2.875em; width: 0; }
    65%  { top: 3.375em; right: 2.875em; width: 0; }
    84%  { top: 2.1875em; right: 0;      width: 3.4375em; }
    100% { top: 2.375em;  right: 0.5em;  width: 2.9375em; }
}

/* ── ERROR ──────────────────────────────────────────────── */
.knm-alert-icon--error {
    border-color: var(--bs-danger, #dc3545);
    animation: knm-alert-icon-flip 0.5s;
}

.knm-alert-icon__x-line {
    display: block;
    position: absolute;
    top: 2.3125em;
    width: 2.9375em;
    height: 0.3125em;
    border-radius: 0.125em;
    background-color: var(--bs-danger, #dc3545);
}

.knm-alert-icon__x-line--left  { transform: rotate(45deg); }
.knm-alert-icon__x-line--right { transform: rotate(-45deg); }

.knm-alert-icon--error .knm-alert-icon__x-line--left,
.knm-alert-icon--error .knm-alert-icon__x-line--right {
    animation: knm-alert-error-x 0.5s;
}

@keyframes knm-alert-error-x {
    0%   { margin-top: 1.625em; transform: scale(0.4) rotate(45deg); opacity: 0; }
    50%  { margin-top: 1.625em; transform: scale(0.4) rotate(45deg); opacity: 0; }
    80%  { margin-top: -0.375em; transform: scale(1.15) rotate(45deg); }
    100% { margin-top: 0; transform: scale(1) rotate(45deg); opacity: 1; }
}

.knm-alert-icon--error .knm-alert-icon__x-line--right {
    animation-name: knm-alert-error-x-right;
}

@keyframes knm-alert-error-x-right {
    0%   { margin-top: 1.625em; transform: scale(0.4) rotate(-45deg); opacity: 0; }
    50%  { margin-top: 1.625em; transform: scale(0.4) rotate(-45deg); opacity: 0; }
    80%  { margin-top: -0.375em; transform: scale(1.15) rotate(-45deg); }
    100% { margin-top: 0; transform: scale(1) rotate(-45deg); opacity: 1; }
}

/* ── WARNING ────────────────────────────────────────────── */
.knm-alert-icon--warning {
    border-color: var(--bs-warning, #ffc107);
    color: var(--bs-warning, #ffc107);
    animation: knm-alert-icon-flip 0.5s;
}

/* ── INFO ───────────────────────────────────────────────── */
.knm-alert-icon--info {
    border-color: var(--bs-info, #0dcaf0);
    color: var(--bs-info, #0dcaf0);
    animation: knm-alert-icon-flip 0.5s;
}

/* ── QUESTION ──────────────────────────────────────────── */
.knm-alert-icon--question {
    border-color: var(--bs-purple, #6f42c1);
    color: var(--bs-purple, #6f42c1);
    animation: knm-alert-icon-flip 0.5s;
}

/* ── SECURITY ──────────────────────────────────────────── */
.knm-alert-icon--security {
    border-color: var(--knm-alert-security-color, #6366f1);
    animation: knm-alert-icon-flip 0.5s;
    overflow: visible;
}

.knm-alert-icon__shield {
    width: 4.5em;
    height: 4.5em;
}

.knm-alert-icon__shield-outer {
    animation: knm-alert-shield-pulse 3s ease-in-out infinite;
}

.knm-alert-icon__shield-inner {
    opacity: 0.9;
    animation: knm-alert-shield-glow 2s ease-in-out infinite;
}

/* ── Symbol (!, i, ?) ──────────────────────────────────── */
.knm-alert-icon__symbol {
    font-size: 3.75em;
    font-weight: 700;
    line-height: 1;
    font-family: inherit;
}

.knm-alert-icon--warning .knm-alert-icon__symbol {
    animation: knm-alert-wobble 0.5s;
}

.knm-alert-icon--info .knm-alert-icon__symbol {
    animation: knm-alert-wobble 0.8s;
}

.knm-alert-icon--question .knm-alert-icon__symbol {
    animation: knm-alert-question-flip 0.8s;
}

/* ── Shared keyframes ──────────────────────────────────── */
@keyframes knm-alert-icon-flip {
    0%   { transform: rotateX(100deg); opacity: 0; }
    100% { transform: rotateX(0deg);   opacity: 1; }
}

@keyframes knm-alert-wobble {
    0%   { transform: rotateZ(45deg);  opacity: 0; }
    25%  { transform: rotateZ(-25deg); opacity: 0.4; }
    50%  { transform: rotateZ(15deg);  opacity: 0.8; }
    75%  { transform: rotateZ(-5deg);  opacity: 1; }
    100% { transform: rotateZ(0);      opacity: 1; }
}

@keyframes knm-alert-question-flip {
    0%   { transform: rotateY(-360deg); }
    100% { transform: rotateY(0); }
}

@keyframes knm-alert-shield-pulse {
    0%, 100% { stroke-opacity: 0.1; }
    50%      { stroke-opacity: 0.25; }
}

@keyframes knm-alert-shield-glow {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

/* ─── Title & Message ─────────────────────────────────────────────────── */
.knm-alert__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.knm-alert__message {
    font-size: 0.9375rem;
    color: var(--bs-secondary-color, #6c757d);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

/* ─── Input field ─────────────────────────────────────────────────────── */
.knm-alert__input {
    margin-bottom: 1.25rem;
    text-align: left;
}

.knm-alert__input .form-control {
    text-align: center;
}

/* ─── Action buttons ──────────────────────────────────────────────────── */
.knm-alert__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.knm-alert__actions:has(:only-child) {
    justify-content: center;
}

.knm-alert__actions .btn {
    min-width: 5rem;
}

/* ─── Timer progress ──────────────────────────────────────────────────── */
.knm-alert__timer-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--knm-primary, #0d6efd);
    opacity: 0.4;
    transform-origin: left;
    animation: knm-toast-progress linear forwards;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: relative;
    transition: all 0.15s ease-in-out;
}

.knm-button__spinner { flex-shrink: 0; }
.knm-button__spinner + .knm-button__text { margin-left: 0.375rem; }

.knm-button--busy {
    cursor: wait;
    opacity: 0.75;
    pointer-events: none;
}

.knm-button--confirm {
    animation: knm-button-pulse 0.6s ease-in-out infinite alternate;
}

@keyframes knm-button-pulse {
    from { box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb, 220, 53, 69), 0.4); }
    to   { box-shadow: 0 0 0 6px rgba(var(--bs-danger-rgb, 220, 53, 69), 0); }
}

/* ── KNMButton — GlobalInputStyle variants ── */
.knm-style-rounded.btn,
.knm-style-rounded .btn { border-radius: 50rem; }

.knm-style-underline.btn,
.knm-style-underline .btn {
    border: none;
    border-bottom: 2px solid var(--knm-input-border-color, var(--bs-border-color));
    border-radius: 0;
}
.knm-style-underline.btn:hover,
.knm-style-underline .btn:hover {
    border-bottom-color: var(--knm-primary);
    background: rgba(var(--knm-primary-rgb, 13, 110, 253), 0.08);
}
.knm-style-underline.btn-primary,
.knm-style-underline .btn-primary {
    border: none;
    border-bottom: 2px solid var(--knm-primary);
}

.knm-style-borderless.btn,
.knm-style-borderless .btn {
    border: none;
    background: transparent;
    color: var(--bs-body-color);
}
.knm-style-borderless.btn:hover,
.knm-style-borderless .btn:hover {
    background: var(--bs-tertiary-bg);
}
.knm-style-borderless.btn-primary,
.knm-style-borderless .btn-primary {
    color: var(--knm-primary);
    background: transparent;
}
.knm-style-borderless.btn-primary:hover,
.knm-style-borderless .btn-primary:hover {
    background: rgba(var(--knm-primary-rgb, 13, 110, 253), 0.08);
}

/* ─── Toast/Alert responsive ──────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .knm-toast-container { padding: 0.5rem; }
    .knm-toast { min-width: 0; max-width: 100%; }
    .knm-alert__content { padding: 1.5rem 1rem 1rem; }
    .knm-alert__actions { flex-direction: column; }
    .knm-alert__actions .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCHEDULER
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --knm-scheduler-gutter-width: 56px;
    --knm-scheduler-row-height: 60px;
    --knm-scheduler-border-color: var(--bs-border-color, #dee2e6);
    --knm-scheduler-bg: var(--bs-body-bg, #fff);
    --knm-scheduler-today-bg: rgba(var(--knm-primary-rgb, 13, 110, 253), 0.06);
    --knm-scheduler-business-bg: rgba(25, 135, 84, 0.04);
    --knm-scheduler-event-radius: 4px;
    --knm-scheduler-now-color: var(--bs-danger, #dc3545);
    --knm-scheduler-outside-opacity: 0.4;
}

/* ─── Scheduler root ─────────────────────────────────────────────────── */
.knm-scheduler {
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--knm-scheduler-bg);
    border: 1px solid var(--knm-scheduler-border-color);
    border-radius: var(--bs-border-radius, 0.375rem);
    overflow: hidden;
    font-size: 0.875rem;
}
.knm-scheduler__body {
    flex: 1;
    overflow: auto;
    position: relative;
}

/* ─── Loading overlay ────────────────────────────────────────────────── */
.knm-scheduler__loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--knm-scheduler-loading-bg, rgba(255, 255, 255, 0.7));
    border-radius: inherit;
    pointer-events: none;
}
[data-bs-theme="dark"] .knm-scheduler__loading-overlay {
    background: var(--knm-scheduler-loading-bg, rgba(33, 37, 41, 0.7));
}
.knm-scheduler__loading-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--knm-scheduler-loading-spinner-track, rgba(0, 0, 0, 0.1));
    border-top-color: var(--knm-scheduler-loading-spinner-color, var(--knm-primary, #0d6efd));
    border-radius: 50%;
    animation: knm-scheduler-spin 0.8s linear infinite;
}
[data-bs-theme="dark"] .knm-scheduler__loading-spinner {
    border-color: var(--knm-scheduler-loading-spinner-track, rgba(255, 255, 255, 0.15));
    border-top-color: var(--knm-scheduler-loading-spinner-color, var(--knm-primary, #0d6efd));
}
@keyframes knm-scheduler-spin {
    to { transform: rotate(360deg); }
}

/* ─── Toolbar ────────────────────────────────────────────────────────── */
.knm-scheduler__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--knm-scheduler-border-color);
    background: var(--knm-scheduler-bg);
    flex-wrap: wrap;
}
.knm-scheduler__nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.knm-scheduler__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    text-transform: capitalize;
}
.knm-scheduler__views .btn { font-size: 0.75rem; }

/* Desktop: show button group, hide dropdown */
.knm-scheduler__views--desktop { display: flex; }
.knm-scheduler__views--mobile  { display: none; }

@media (max-width: 575.98px) {
    .knm-scheduler__views--desktop { display: none !important; }
    .knm-scheduler__views--mobile  { display: block !important; }
}

/* ─── Day View ───────────────────────────────────────────────────────── */
.knm-day-view { position: relative; }

.knm-day-view__allday {
    display: flex;
    border-bottom: 1px solid var(--knm-scheduler-border-color);
    min-height: 2.5rem;
}
.knm-day-view__allday-events {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px;
    cursor: pointer;
}

.knm-day-view__grid { position: relative; }

.knm-day-view__row {
    display: flex;
    border-bottom: 1px solid var(--knm-scheduler-border-color);
    min-height: var(--knm-scheduler-row-height);
    box-sizing: content-box;
    cursor: pointer;
}
.knm-day-view__row--business {
    background: var(--knm-scheduler-business-bg);
}
.knm-day-view__row:hover .knm-day-view__cell {
    background: rgba(0, 0, 0, 0.02);
}

.knm-day-view__time-gutter {
    width: var(--knm-scheduler-gutter-width);
    min-width: var(--knm-scheduler-gutter-width);
    padding: 4px 6px 0;
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
    text-align: right;
    border-right: 1px solid var(--knm-scheduler-border-color);
    flex-shrink: 0;
}
.knm-day-view__cell { flex: 1; }

/* Now indicator */
.knm-day-view__now {
    position: absolute;
    left: var(--knm-scheduler-gutter-width);
    right: 0;
    height: 2px;
    background: var(--knm-scheduler-now-color);
    z-index: 5;
    pointer-events: none;
}
.knm-day-view__now::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--knm-scheduler-now-color);
}

/* ─── Week View ──────────────────────────────────────────────────────── */
.knm-week-view { position: relative; }

.knm-week-view__header {
    display: flex;
    border-bottom: 2px solid var(--knm-scheduler-border-color);
}
.knm-week-view__day-header {
    flex: 1;
    text-align: center;
    padding: 0.375rem 0.25rem;
}
.knm-week-view__day-header--today {
    background: var(--knm-scheduler-today-bg);
}
.knm-week-view__day-name {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
}
.knm-week-view__day-number {
    font-weight: 600;
    font-size: 1.1rem;
}
.knm-week-view__day-number--today {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--knm-primary, #0d6efd);
    color: #fff;
}

/* All-day row */
.knm-week-view__allday-row {
    display: grid;
    border-bottom: 1px solid var(--knm-scheduler-border-color);
    min-height: 2rem;
    align-items: start;
    gap: 2px;
    padding: 2px 0;
}
.knm-week-view__allday-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
}
.knm-week-view__allday-cell {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px;
    border-left: 1px solid var(--knm-scheduler-border-color);
}

/* Time grid */
.knm-week-view__grid { position: relative; }
.knm-week-view__row {
    display: flex;
    border-bottom: 1px solid var(--knm-scheduler-border-color);
    min-height: var(--knm-scheduler-row-height);
    box-sizing: content-box;
}
/* Sub-slot targets inside cells for finer drag-drop snapping */
.knm-week-view__subslot,
.knm-day-view__subslot {
    flex: 1;
    min-height: 0;
}
.knm-week-view__subslot--mid,
.knm-day-view__subslot--mid {
    border-top: 1px dashed var(--knm-scheduler-border-color);
}
.knm-week-view__cell,
.knm-day-view__cell {
    display: flex;
    flex-direction: column;
}
.knm-week-view__row--business {
    background: var(--knm-scheduler-business-bg);
}
.knm-week-view__time-gutter {
    width: var(--knm-scheduler-gutter-width);
    min-width: var(--knm-scheduler-gutter-width);
    padding: 4px 6px 0;
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
    text-align: right;
    border-right: 1px solid var(--knm-scheduler-border-color);
    flex-shrink: 0;
}
.knm-week-view__cell {
    flex: 1;
    border-left: 1px solid var(--knm-scheduler-border-color);
    cursor: pointer;
}
.knm-week-view__cell:hover {
    background: rgba(0, 0, 0, 0.02);
}

/* Now indicator (week) */
.knm-week-view__now {
    position: absolute;
    height: 2px;
    background: var(--knm-scheduler-now-color);
    z-index: 5;
    pointer-events: none;
}

/* ─── Month View ─────────────────────────────────────────────────────── */
.knm-month-view {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.knm-month-view__header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 2px solid var(--knm-scheduler-border-color);
}
.knm-month-view__day-name {
    text-align: center;
    padding: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
}

/* ── Month body ── */
.knm-month-view__body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ── Week row ── */
.knm-month-view__week {
    display: flex;
    flex: 1;
    border-bottom: 1px solid var(--knm-scheduler-border-color);
}
.knm-month-view__week:last-child { border-bottom: none; }

/* ── Week content: day numbers + events + more ── */
.knm-month-view__week-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    /* 6 vertical day separators at 1/7, 2/7, ..., 6/7 */
    background-image:
        linear-gradient(var(--knm-scheduler-border-color), var(--knm-scheduler-border-color)),
        linear-gradient(var(--knm-scheduler-border-color), var(--knm-scheduler-border-color)),
        linear-gradient(var(--knm-scheduler-border-color), var(--knm-scheduler-border-color)),
        linear-gradient(var(--knm-scheduler-border-color), var(--knm-scheduler-border-color)),
        linear-gradient(var(--knm-scheduler-border-color), var(--knm-scheduler-border-color)),
        linear-gradient(var(--knm-scheduler-border-color), var(--knm-scheduler-border-color));
    background-size: 1px 100%;
    background-repeat: no-repeat;
    background-position:
        14.2857% 0, 28.5714% 0, 42.8571% 0,
        57.1429% 0, 71.4286% 0, 85.7143% 0;
}

/* ── Outside-month background overlay ── */
.knm-month-view__outside-bg {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    pointer-events: none;
    z-index: 0;
}
.knm-month-view__outside-col {
    background-color: var(--knm-scheduler-outside-bg, #f0f0f0);
}
[data-bs-theme="dark"] .knm-month-view__outside-col {
    background-color: var(--knm-scheduler-outside-bg, #1e1e1e);
}

/* ── Day number row ── */
.knm-month-view__week-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    position: relative;
    z-index: 1;
}
.knm-month-view__cell {
    border-right: 1px solid var(--knm-scheduler-border-color);
    padding: 2px 4px;
    cursor: pointer;
}
.knm-month-view__cell:last-child { border-right: none; }
.knm-month-view__cell:hover { background: rgba(0, 0, 0, 0.02); }
.knm-month-view__cell--today { background: var(--knm-scheduler-today-bg); }
.knm-month-view__cell--outside .knm-month-view__day-number {
    opacity: 0.4;
}
.knm-month-view__day-number {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 2px 4px;
    text-align: right;
}
.knm-month-view__day-number--today {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--knm-primary, #0d6efd);
    color: #fff;
    float: right;
}

/* ── Events grid overlay — fixed rows for uniform week height ── */
.knm-month-view__week-events {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(var(--knm-scheduler-max-events, 3), 1.4rem);
    gap: 1px 0;
    padding: 0 2px 2px;
    position: relative;
    z-index: 1;
}
.knm-month-view__week-events .knm-scheduler-event {
    min-height: 0;
    height: 100%;
    border-radius: 4px;
    margin: 0 1px;
    overflow: visible;
}

/* ── +N more row ── */
.knm-month-view__more-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    position: relative;
    z-index: 2;
}
.knm-month-view__more-cell {
    position: relative;
    padding: 0 4px;
}
.knm-month-view__more-link {
    font-size: 0.7rem;
    color: var(--knm-primary, #0d6efd);
    cursor: pointer;
}
.knm-month-view__more-link:hover { text-decoration: underline; }

/* ── Events overlay: CSS Grid with grid-column spanning ── */
.knm-month-view__week-events {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px 0;
    padding: 0 2px 2px;
}
.knm-month-view__week-events .knm-scheduler-event {
    min-height: 1.25rem;
    border-radius: 4px;
    overflow: visible;
    margin: 0 1px;
}

/* ── Month View: Week numbers ── */
.knm-month-view--with-week-numbers .knm-month-view__header {
    grid-template-columns: 32px repeat(7, 1fr);
}
.knm-month-view__week-number-header,
.knm-month-view__week-number {
    font-size: 0.7rem;
    color: var(--bs-secondary-color, #6c757d);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    border-right: 1px solid var(--bs-border-color, #dee2e6);
    border-bottom: 1px solid var(--knm-scheduler-border-color);
    font-weight: 600;
    min-width: 32px;
    width: 32px;
}

/* ── Multi-day event spanning — used by week-view allday row and month-view grid-column ── */
.knm-scheduler-event--spanning {
    border-radius: 4px;
    padding-left: 4px;
    padding-right: 4px;
    position: relative;
    z-index: 1;
}
/* Legacy span classes for week-view allday row compatibility */
.knm-scheduler-event--span-start {
    border-radius: 4px 0 0 4px;
    margin-left: 2px;
    margin-right: -1px;
    width: calc(100% + 1px);
}
.knm-scheduler-event--span-end {
    border-radius: 0 4px 4px 0;
    margin-left: -1px;
    margin-right: 2px;
    width: calc(100% + 1px);
}
.knm-scheduler-event--span-mid {
    margin-left: -1px;
    margin-right: -1px;
    width: calc(100% + 2px);
}

/* ── Month View: "+N more" popover ── */
.knm-month-view__more-popover {
    position: absolute;
    z-index: 1070;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background-color: #fff;
    background-color: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    min-width: 220px;
    max-width: 320px;
    max-height: 300px;
    overflow-y: auto;
}
.knm-month-view__more-popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
.knm-month-view__more-popover-body {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ── Scheduler: Event hover popover ── */
.knm-scheduler-popover {
    position: fixed;
    z-index: 1060;
    background: var(--bs-body-bg, #fff) !important;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    padding: 0;
    min-width: 220px;
    max-width: 320px;
    pointer-events: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
[data-bs-theme="dark"] .knm-scheduler-popover {
    background: var(--bs-body-bg, #212529) !important;
}
.knm-scheduler-popover__title {
    padding: 0.4rem 0.6rem;
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 8px 8px 0 0;
}
.knm-scheduler-popover__time {
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
}
.knm-scheduler-popover__desc {
    padding: 0.25rem 0.6rem 0.5rem;
    font-size: 0.75rem;
    color: var(--bs-body-color, #212529);
    border-top: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,0.1));
    white-space: normal;
    word-wrap: break-word;
}

/* ─── Agenda View ────────────────────────────────────────────────────── */
.knm-agenda-view { padding: 0.5rem; }
.knm-agenda-view__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    color: var(--bs-secondary-color, #6c757d);
}
.knm-agenda-view__empty i { font-size: 2.5rem; }

.knm-agenda-view__day-group { margin-bottom: 0.75rem; }
.knm-agenda-view__day-header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid var(--knm-scheduler-border-color);
    margin-bottom: 0.25rem;
}
.knm-agenda-view__day-header--today {
    background: var(--knm-scheduler-today-bg);
    border-radius: var(--bs-border-radius, 0.375rem);
}
.knm-agenda-view__day-name {
    font-weight: 600;
    text-transform: capitalize;
}
.knm-agenda-view__day-date {
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #6c757d);
}

.knm-agenda-view__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: var(--bs-border-radius, 0.375rem);
    cursor: pointer;
    transition: background 0.15s;
}
.knm-agenda-view__item:hover { background: rgba(0, 0, 0, 0.03); }

.knm-agenda-view__color-bar {
    width: 4px;
    align-self: stretch;
    border-radius: 2px;
    flex-shrink: 0;
}
.knm-agenda-view__time {
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #6c757d);
    min-width: 5rem;
    flex-shrink: 0;
}
.knm-agenda-view__details { flex: 1; min-width: 0; }
.knm-agenda-view__title {
    display: block;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.knm-agenda-view__desc {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Scheduler Events (shared) ──────────────────────────────────────── */
.knm-scheduler-event {
    border-radius: var(--knm-scheduler-event-radius);
    font-size: 0.75rem;
    line-height: 1.2;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.1s;
}
.knm-scheduler-event:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 10;
    overflow: visible;
}

.knm-scheduler-event--timed {
    position: absolute;
    background: var(--knm-primary, #0d6efd);
    color: #fff;
    padding: 2px 4px;
    border-left: 3px solid rgba(0, 0, 0, 0.2);
}
.knm-scheduler-event--allday {
    background: var(--knm-primary, #0d6efd);
    color: #fff;
    padding: 1px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.knm-scheduler-event--month {
    background: var(--knm-primary, #0d6efd);
    color: #fff;
    padding: 1px 4px;
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.knm-scheduler-event__time {
    font-size: 0.65rem;
    opacity: 0.85;
}
.knm-scheduler-event__title {
    font-weight: 500;
}

/* ─── Scheduler responsive ───────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .knm-scheduler__toolbar { flex-direction: column; align-items: stretch; text-align: center; }
    .knm-scheduler__nav { justify-content: center; }
    .knm-scheduler__views { justify-content: center; }
    .knm-month-view__week { min-height: 3.5rem; }
    .knm-month-view__cell { min-height: auto; }
    .knm-scheduler-event--month { font-size: 0.65rem; }
}

/* ─── Event Editor modal ────────────────────────────────────────────── */
/* Backdrop/header/close are now handled by KNMModal — the .knm-event-editor class
   is applied as DialogCssClass to scope grid layout and field styling inside the
   modal body. */

.knm-event-editor__body {
    padding: 1rem;
    overflow: visible;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
/* Fields that should span full width */
.knm-event-editor__field--full {
    grid-column: 1 / -1;
}

.knm-event-editor__field { display: flex; flex-direction: column; gap: 0.25rem; }
.knm-event-editor__field > label { font-size: 0.8125rem; font-weight: 500; }
.knm-event-editor__field--inline > label { flex-direction: row; display: flex; align-items: center; cursor: pointer; }

.knm-event-editor__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.knm-event-editor__colors {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.knm-event-editor__color-swatch {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
    padding: 0;
}

.knm-event-editor__color-swatch:hover { transform: scale(1.15); }
.knm-event-editor__color-swatch--active { border-color: var(--bs-body-color, #212529); transform: scale(1.15); }

.knm-event-editor__days {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.knm-event-editor__day-check {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    cursor: pointer;
}

.knm-event-editor__end-modes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.knm-event-editor__end-modes label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
}

/* Sits inside .modal-footer (KNMModal) — do not duplicate border/padding,
   just lay out Delete | Cancel+Save along the full width. */
.knm-event-editor__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}

.knm-event-editor__footer-end {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

@media (max-width: 575.98px) {
    .knm-event-editor { max-width: 100%; margin: 0.5rem; }
    .knm-event-editor__row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHART
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-chart {
    position: relative;
    width: 100%;
}

.knm-chart canvas {
    max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CAPTCHA
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-captcha {
    --knm-captcha-stroke: rgba(0, 0, 0, 0.8);

    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
}

.knm-captcha__description {
    font-size: 0.875rem;
    margin: 0;
    text-align: center;
    color: var(--bs-body-color, #212529);
}

.knm-captcha__shape-name {
    text-transform: capitalize;
}

.knm-captcha__canvas-wrapper {
    position: relative;
    line-height: 0;
}

.knm-captcha__canvas {
    --knm-captcha-scale-x: 1;
    --knm-captcha-scale-y: 1;

    border-radius: 3px;
    cursor: crosshair;
    background-size: auto;
    background-repeat: no-repeat;
    touch-action: none;
    transition: box-shadow 0.3s ease;
}

/* Success / Error glow */
.knm-captcha__canvas--valid {
    box-shadow: 0 0 20px rgba(25, 135, 84, 0.7);
}

.knm-captcha__canvas--invalid {
    box-shadow: 0 0 20px rgba(220, 53, 69, 0.7);
}

/* ─── Theme backgrounds ─────────────────────────────────────────────── */
.knm-captcha--blue .knm-captcha__canvas   { background-image: url('images/CaptchaBlue.png'); }
.knm-captcha--gold .knm-captcha__canvas   { background-image: url('images/CaptchaGold.png'); }
.knm-captcha--green .knm-captcha__canvas  { background-image: url('images/CaptchaGreen.png'); }
.knm-captcha--pink .knm-captcha__canvas   { background-image: url('images/CaptchaPink.png'); }
.knm-captcha--purple .knm-captcha__canvas { background-image: url('images/CaptchaPurple.png'); }
.knm-captcha--red .knm-captcha__canvas    { background-image: url('images/CaptchaRed.png'); }
.knm-captcha--sky .knm-captcha__canvas    { background-image: url('images/CaptchaSky.png'); }
.knm-captcha--steel .knm-captcha__canvas  { background-image: url('images/CaptchaSteel.png'); }

/* ─── Shape sprite positions (scaled via --knm-captcha-scale-*) ───── */
.knm-captcha__canvas.triangle     { background-position: calc(10px * var(--knm-captcha-scale-x)) calc(10px * var(--knm-captcha-scale-y)); }
.knm-captcha__canvas.x            { background-position: calc(-200px * var(--knm-captcha-scale-x)) calc(10px * var(--knm-captcha-scale-y)); }
.knm-captcha__canvas.rectangle    { background-position: calc(-400px * var(--knm-captcha-scale-x)) calc(10px * var(--knm-captcha-scale-y)); }
.knm-captcha__canvas.circle       { background-position: calc(-600px * var(--knm-captcha-scale-x)) calc(10px * var(--knm-captcha-scale-y)); }
.knm-captcha__canvas.check        { background-position: calc(10px * var(--knm-captcha-scale-x)) calc(-150px * var(--knm-captcha-scale-y)); }
.knm-captcha__canvas.caret        { background-position: calc(-200px * var(--knm-captcha-scale-x)) calc(-150px * var(--knm-captcha-scale-y)); }
.knm-captcha__canvas.zigzag       { background-position: calc(-400px * var(--knm-captcha-scale-x)) calc(-150px * var(--knm-captcha-scale-y)); }
.knm-captcha__canvas.arrow        { background-position: calc(-600px * var(--knm-captcha-scale-x)) calc(-150px * var(--knm-captcha-scale-y)); }
.knm-captcha__canvas.leftbracket  { background-position: calc(10px * var(--knm-captcha-scale-x)) calc(-300px * var(--knm-captcha-scale-y)); }
.knm-captcha__canvas.rightbracket { background-position: calc(-200px * var(--knm-captcha-scale-x)) calc(-300px * var(--knm-captcha-scale-y)); }
.knm-captcha__canvas.v            { background-position: calc(-400px * var(--knm-captcha-scale-x)) calc(-300px * var(--knm-captcha-scale-y)); }
.knm-captcha__canvas.delete       { background-position: calc(-600px * var(--knm-captcha-scale-x)) calc(-300px * var(--knm-captcha-scale-y)); }
.knm-captcha__canvas.star         { background-position: calc(-400px * var(--knm-captcha-scale-x)) calc(-450px * var(--knm-captcha-scale-y)); }
.knm-captcha__canvas.pigtail      { background-position: calc(-600px * var(--knm-captcha-scale-x)) calc(-450px * var(--knm-captcha-scale-y)); }

/* ─── Messages ──────────────────────────────────────────────────────── */
.knm-captcha__message {
    font-size: 0.8125rem;
    margin: 0;
    font-weight: 500;
}

.knm-captcha__message--success {
    color: var(--bs-success, #198754);
}

.knm-captcha__message--error {
    color: var(--bs-danger, #dc3545);
}

.knm-captcha__actions {
    display: flex;
    gap: 0.5rem;
}

/* ─── Captcha dark-mode stroke ─────────────────────────────────────── */
[data-bs-theme="dark"] .knm-captcha {
    --knm-captcha-stroke: rgba(255, 255, 255, 0.9);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE (Bootstrap 5.3 data-bs-theme="dark")
   ═══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] {
    --knm-modal-loading-bg: rgba(33, 37, 41, 0.9);
    --knm-grid-backdrop-bg: rgba(0, 0, 0, 0.7);
    --knm-audit-bg: var(--bs-tertiary-bg, #2b3035);
    --knm-audit-border-color: var(--bs-border-color, #495057);
    --knm-toast-bg: var(--bs-body-bg, #212529);
    --knm-toast-color: var(--bs-body-color, #e9ecef);
    --knm-toast-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
    --knm-alert-bg: var(--bs-body-bg, #212529);
    --knm-alert-color: var(--bs-body-color, #e9ecef);
    --knm-alert-backdrop-bg: rgba(0, 0, 0, 0.7);
    --knm-scheduler-bg: var(--bs-body-bg, #212529);
    --knm-scheduler-border-color: var(--bs-border-color, #495057);
    --knm-scheduler-today-bg: rgba(var(--knm-primary-rgb, 13, 110, 253), 0.1);
    --knm-scheduler-business-bg: rgba(25, 135, 84, 0.08);

    /* Captcha — dark mode: override defined via descendant selector below */

    /* Avatar — dark mode */
    --knm-avatar-border-color: var(--bs-body-bg, #212529);
    --knm-avatar-color: #fff;
    --knm-avatar-warning-color: #212529;
    --knm-avatar-group-overflow-bg: var(--bs-secondary, #6c757d);
    --knm-avatar-group-overflow-color: #e9ecef;
}

[data-bs-theme="dark"] .knm-form-section-title {
    background: var(--bs-body-bg, #212529);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Grid — Column Resize
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-grid-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    z-index: 1;
}

.knm-grid-resize-handle:hover,
.knm-grid-resize-handle--active {
    background: var(--knm-primary, #0d6efd);
    opacity: 0.5;
}

.knm-grid--resizing {
    cursor: col-resize;
    user-select: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Grid — Column Reorder
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-grid-th--dragging {
    opacity: 0.5;
}

.knm-grid-th--drop-target {
    border-left: 3px solid var(--knm-primary, #0d6efd) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Grid — Context Menu
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-grid-context-menu {
    position: fixed;
    z-index: 1060;
    min-width: 160px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 0.25rem 0;
}

[data-bs-theme="dark"] .knm-grid-context-menu {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.knm-grid-context-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    cursor: pointer;
    color: var(--bs-body-color);
    transition: background-color 0.1s ease;
}

.knm-grid-context-menu-item:hover {
    background: var(--bs-tertiary-bg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Scheduler — Event Drag & Drop
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-scheduler__event--dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.knm-scheduler__slot--drop-target {
    background: var(--knm-primary, #0d6efd) !important;
    opacity: 0.15;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Scheduler — Event Resize
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-scheduler__resize-handle {
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    cursor: ns-resize;
    background: transparent;
    z-index: 1;
}

.knm-scheduler__resize-handle--bottom {
    bottom: 0;
}

.knm-scheduler__resize-handle--top {
    top: 0;
}

.knm-scheduler__resize-handle:hover {
    background: var(--knm-primary, #0d6efd);
    opacity: 0.5;
}

.knm-scheduler__resize-handle--bottom:hover {
    border-radius: 0 0 var(--bs-border-radius, 0.25rem) var(--bs-border-radius, 0.25rem);
}

.knm-scheduler__resize-handle--top:hover {
    border-radius: var(--bs-border-radius, 0.25rem) var(--bs-border-radius, 0.25rem) 0 0;
}

.knm-scheduler__event--resizing {
    user-select: none;
    z-index: 10;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Scheduler — Slot Drag to Create
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-scheduler__slot--selecting {
    background: var(--knm-primary, #0d6efd) !important;
    opacity: 0.2;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BREADCRUMB — KNMBreadcrumb component
   ═══════════════════════════════════════════════════════════════════════════ */

nav[aria-label="breadcrumb"] .breadcrumb-item a {
    color: var(--knm-breadcrumb-color, var(--knm-primary, #0d6efd));
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

nav[aria-label="breadcrumb"] .breadcrumb-item a:hover {
    color: var(--knm-breadcrumb-hover-color, var(--bs-primary-text-emphasis, #0a58ca));
    text-decoration: underline;
}

nav[aria-label="breadcrumb"] .breadcrumb-item.active {
    color: var(--knm-breadcrumb-active-color, var(--bs-secondary-color, #6c757d));
}

nav[aria-label="breadcrumb"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--knm-breadcrumb-separator-color, var(--bs-secondary-color, #6c757d));
}

/* ─── Dark mode ──────────────────────────────────────────────────────── */

[data-bs-theme="dark"] nav[aria-label="breadcrumb"] .breadcrumb-item a {
    color: var(--knm-breadcrumb-color, var(--bs-primary, #6ea8fe));
}

[data-bs-theme="dark"] nav[aria-label="breadcrumb"] .breadcrumb-item a:hover {
    color: var(--knm-breadcrumb-hover-color, var(--bs-primary-text-emphasis, #9ec5fe));
}

[data-bs-theme="dark"] nav[aria-label="breadcrumb"] .breadcrumb-item.active {
    color: var(--knm-breadcrumb-active-color, var(--bs-secondary-color, #a7acb1));
}

[data-bs-theme="dark"] nav[aria-label="breadcrumb"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--knm-breadcrumb-separator-color, var(--bs-secondary-color, #a7acb1));
}

/* ─── Wrapper + Page Header ─────────────────────────────────────────── */

.knm-breadcrumb-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--knm-breadcrumb-page-header-gap, 0.25rem);
    margin-bottom: var(--knm-breadcrumb-page-header-margin-bottom, 1.25rem);
}

.knm-breadcrumb-page-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.knm-breadcrumb-page-header .knm-page-title {
    color: var(--knm-breadcrumb-page-title-color, var(--bs-body-color, #212529));
    font-size: var(--knm-breadcrumb-page-title-font-size, 1.5rem);
    font-weight: var(--knm-breadcrumb-page-title-font-weight, 600);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

[data-bs-theme="dark"] .knm-breadcrumb-page-header .knm-page-title {
    color: var(--knm-breadcrumb-page-title-color, var(--bs-body-color, #f8f9fa));
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABS — KNMTabs / KNMTab components
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --knm-tabs-border-color: var(--bs-border-color, #dee2e6);
    --knm-tabs-active-color: var(--knm-primary, #0d6efd);
    --knm-tabs-bg: transparent;
}

/* ─── Root wrapper ───────────────────────────────────────────────────── */
.knm-tabs {
    display: flex;
    flex-direction: column;
    background: var(--knm-tabs-bg);
}

/* Vertical layout: nav on left, content on right */
.knm-tabs--vertical {
    flex-direction: row;
}

/* ─── Scrollable nav wrapper ─────────────────────────────────────────── */
.knm-tabs__nav-scroll {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
    flex-shrink: 0;
}

/* Vertical: hide scrollbar, border separates nav from content */
.knm-tabs--vertical .knm-tabs__nav-scroll {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    white-space: normal;
    border-right: 1px solid var(--knm-tabs-border-color);
}

.knm-tabs--vertical .knm-tabs__nav-scroll::-webkit-scrollbar {
    display: none;
}

.knm-tabs__nav-scroll::-webkit-scrollbar {
    height: 4px;
}

.knm-tabs__nav-scroll::-webkit-scrollbar-thumb {
    background-color: var(--knm-tabs-border-color);
    border-radius: 2px;
}

.knm-tabs__nav-scroll .knm-tabs__nav {
    flex-wrap: nowrap;
}

/* ─── Navigation ─────────────────────────────────────────────────────── */
.knm-tabs__nav {
    border-bottom-color: var(--knm-tabs-border-color);
    flex-shrink: 0;
}

.knm-tabs--vertical .knm-tabs__nav {
    border-bottom: none;
    border-right: none;
    min-width: 10rem;
}

.knm-tabs--vertical .knm-tabs__nav .nav-link {
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius, 0.375rem) 0 0 var(--bs-border-radius, 0.375rem);
    border-right: none;
    text-align: left;
    white-space: nowrap;
    margin-right: -1px;
}

.knm-tabs--vertical .knm-tabs__nav .nav-link:hover:not(.active):not(.disabled) {
    border-color: var(--knm-tabs-border-color) transparent var(--knm-tabs-border-color) var(--knm-tabs-border-color);
}

.knm-tabs--vertical .knm-tabs__nav .nav-link.active {
    border-color: var(--knm-tabs-border-color);
    border-right-color: var(--knm-tabs-bg, var(--bs-body-bg, #fff));
    background-color: var(--knm-tabs-bg, var(--bs-body-bg, #fff));
}

/* ─── Tab button ─────────────────────────────────────────────────────── */
.knm-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.knm-tabs__tab.active {
    color: var(--knm-tabs-active-color);
    border-bottom-color: var(--knm-tabs-active-color);
}

.knm-tabs__tab:focus-visible {
    outline: 2px solid var(--knm-tabs-active-color);
    outline-offset: -2px;
}

/* ─── Close button ───────────────────────────────────────────────────── */
.knm-tabs__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    font-size: 0.625rem;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.15s, background-color 0.15s;
    line-height: 1;
}

.knm-tabs__close:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.1);
}

/* ─── Content panel ──────────────────────────────────────────────────── */
.knm-tabs__content {
    flex: 1;
    min-width: 0;
    padding: 1rem 0;
}

.knm-tabs--vertical .knm-tabs__content {
    padding: 0 1rem;
    overflow: auto;
}

.knm-tabs__panel {
    animation: knm-tabs-fade-in 0.2s ease-out;
}

@keyframes knm-tabs-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .knm-tabs--vertical {
        flex-direction: column;
    }

    .knm-tabs--vertical .knm-tabs__nav {
        border-right: none;
        border-bottom: 1px solid var(--knm-tabs-border-color);
        min-width: auto;
        flex-direction: row !important;
        overflow-x: auto;
    }

    .knm-tabs--vertical .knm-tabs__nav .nav-link {
        border-radius: var(--bs-border-radius, 0.375rem) var(--bs-border-radius, 0.375rem) 0 0;
        border-right: 1px solid transparent;
        margin-right: 0;
    }

    .knm-tabs--vertical .knm-tabs__content {
        padding: 1rem 0;
    }
}

/* ─── Dark mode ──────────────────────────────────────────────────────── */
[data-bs-theme="dark"] {
    --knm-tabs-border-color: var(--bs-border-color, #495057);
    --knm-tabs-active-color: var(--knm-primary, var(--bs-primary, #6ea8fe));
    --knm-tabs-bg: transparent;
}

[data-bs-theme="dark"] .knm-tabs__close:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BADGE — KNMBadge component
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --knm-badge-size: 1.25rem;
    --knm-badge-dot-size: 0.5rem;
    --knm-badge-offset: 0.15rem;
}

.knm-badge-wrapper {
    position: relative;
    display: inline-flex;
}

/* Overlay positioning for Bootstrap .badge inside wrapper */
.knm-badge-wrapper > .badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--knm-badge-size);
    height: var(--knm-badge-size);
    font-size: 0.7rem;
    z-index: 1;
    pointer-events: none;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.knm-badge--dot {
    min-width: var(--knm-badge-dot-size);
    width: var(--knm-badge-dot-size);
    height: var(--knm-badge-dot-size);
    padding: 0;
}

/* Position variants */
.knm-badge--top-right    { top: calc(-1 * var(--knm-badge-offset)); right: calc(-1 * var(--knm-badge-offset)); }
.knm-badge--top-left     { top: calc(-1 * var(--knm-badge-offset)); left: calc(-1 * var(--knm-badge-offset)); }
.knm-badge--bottom-right { bottom: calc(-1 * var(--knm-badge-offset)); right: calc(-1 * var(--knm-badge-offset)); }
.knm-badge--bottom-left  { bottom: calc(-1 * var(--knm-badge-offset)); left: calc(-1 * var(--knm-badge-offset)); }

/* ═══════════════════════════════════════════════════════════════════════════
   TOOLTIP — KNMTooltip component (pure CSS, no JS)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --knm-tooltip-bg: #212529;
    --knm-tooltip-color: #fff;
    --knm-tooltip-radius: 0.375rem;
    --knm-tooltip-font-size: 0.8125rem;
    --knm-tooltip-padding-x: 0.625rem;
    --knm-tooltip-padding-y: 0.375rem;
    --knm-tooltip-arrow-size: 5px;
    --knm-tooltip-max-width: 15rem;
    --knm-tooltip-z-index: 1080;
}

[data-bs-theme="dark"] {
    --knm-tooltip-bg: #f8f9fa;
    --knm-tooltip-color: #212529;
}

.knm-tooltip-wrapper {
    position: relative;
    display: inline-flex;
}

[data-knm-tooltip]::after {
    content: attr(data-knm-tooltip);
    position: absolute;
    z-index: var(--knm-tooltip-z-index);
    background: var(--knm-tooltip-bg);
    color: var(--knm-tooltip-color);
    font-size: var(--knm-tooltip-font-size);
    font-weight: 400;
    line-height: 1.4;
    padding: var(--knm-tooltip-padding-y) var(--knm-tooltip-padding-x);
    border-radius: var(--knm-tooltip-radius);
    white-space: nowrap;
    max-width: var(--knm-tooltip-max-width);
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Placement: top (default) */
[data-knm-tooltip-placement="top"]::after {
    bottom: calc(100% + var(--knm-tooltip-arrow-size) + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
}

/* Placement: bottom */
[data-knm-tooltip-placement="bottom"]::after {
    top: calc(100% + var(--knm-tooltip-arrow-size) + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
}

/* Placement: left */
[data-knm-tooltip-placement="left"]::after {
    right: calc(100% + var(--knm-tooltip-arrow-size) + 2px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
}

/* Placement: right */
[data-knm-tooltip-placement="right"]::after {
    left: calc(100% + var(--knm-tooltip-arrow-size) + 2px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
}

/* Show on hover */
[data-knm-tooltip]:hover::after {
    opacity: 1;
}

[data-knm-tooltip-placement="top"]:hover::after {
    transform: translateX(-50%) translateY(0);
}

[data-knm-tooltip-placement="bottom"]:hover::after {
    transform: translateX(-50%) translateY(0);
}

[data-knm-tooltip-placement="left"]:hover::after {
    transform: translateY(-50%) translateX(0);
}

[data-knm-tooltip-placement="right"]:hover::after {
    transform: translateY(-50%) translateX(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHIP — KNMChip component
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --knm-chip-height: 2rem;
    --knm-chip-font-size: 0.8125rem;
    --knm-chip-font-weight: 500;
    --knm-chip-border-radius: 10rem;
    --knm-chip-padding-x: 0.75rem;
    --knm-chip-gap: 0.375rem;
    --knm-chip-close-size: 1.125rem;

    --knm-chip-default-bg: var(--bs-secondary-bg, #e9ecef);
    --knm-chip-default-color: var(--bs-body-color, #212529);
    --knm-chip-default-border: var(--bs-border-color, #dee2e6);
    --knm-chip-primary-bg: rgba(var(--knm-primary-rgb, 13, 110, 253), 0.1);
    --knm-chip-primary-color: var(--knm-primary, #0d6efd);
    --knm-chip-primary-border: var(--knm-primary, #0d6efd);
    --knm-chip-success-bg: rgba(25, 135, 84, 0.1);
    --knm-chip-success-color: var(--bs-success, #198754);
    --knm-chip-success-border: var(--bs-success, #198754);
    --knm-chip-danger-bg: rgba(220, 53, 69, 0.1);
    --knm-chip-danger-color: var(--bs-danger, #dc3545);
    --knm-chip-danger-border: var(--bs-danger, #dc3545);
    --knm-chip-warning-bg: rgba(255, 193, 7, 0.1);
    --knm-chip-warning-color: var(--bs-warning, #ffc107);
    --knm-chip-warning-border: var(--bs-warning, #ffc107);
    --knm-chip-info-bg: rgba(13, 202, 240, 0.1);
    --knm-chip-info-color: var(--bs-info, #0dcaf0);
    --knm-chip-info-border: var(--bs-info, #0dcaf0);
}

[data-bs-theme="dark"] {
    --knm-chip-default-bg: var(--bs-secondary-bg, #343a40);
    --knm-chip-default-color: var(--bs-body-color, #dee2e6);
    --knm-chip-primary-bg: rgba(var(--knm-primary-rgb, 13, 110, 253), 0.2);
    --knm-chip-success-bg: rgba(25, 135, 84, 0.2);
    --knm-chip-danger-bg: rgba(220, 53, 69, 0.2);
    --knm-chip-warning-bg: rgba(255, 193, 7, 0.15);
    --knm-chip-info-bg: rgba(13, 202, 240, 0.15);
}

.knm-chip {
    display: inline-flex;
    align-items: center;
    height: var(--knm-chip-height);
    padding: 0 var(--knm-chip-padding-x);
    gap: var(--knm-chip-gap);
    font-size: var(--knm-chip-font-size);
    font-weight: var(--knm-chip-font-weight);
    line-height: 1;
    border-radius: var(--knm-chip-border-radius);
    border: 1px solid transparent;
    white-space: nowrap;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.knm-chip--clickable {
    cursor: pointer;
}

.knm-chip--clickable:hover {
    filter: brightness(0.92);
}

.knm-chip--clickable:focus-visible {
    outline: 2px solid var(--knm-primary, #0d6efd);
    outline-offset: 2px;
}

.knm-chip__icon {
    font-size: 1em;
    flex-shrink: 0;
}

.knm-chip__text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.knm-chip__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--knm-chip-close-size);
    height: var(--knm-chip-close-size);
    padding: 0;
    margin-left: 0.125rem;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    color: inherit;
    font-size: 0.625rem;
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
    line-height: 1;
}

.knm-chip__close:hover {
    background: rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] .knm-chip__close {
    background: rgba(255, 255, 255, 0.15);
}

[data-bs-theme="dark"] .knm-chip__close:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Color variants */
.knm-chip--default {
    background: var(--knm-chip-default-bg);
    color: var(--knm-chip-default-color);
    border-color: var(--knm-chip-default-border);
}

.knm-chip--primary {
    background: var(--knm-chip-primary-bg);
    color: var(--knm-chip-primary-color);
    border-color: var(--knm-chip-primary-border);
}

.knm-chip--success {
    background: var(--knm-chip-success-bg);
    color: var(--knm-chip-success-color);
    border-color: var(--knm-chip-success-border);
}

.knm-chip--danger {
    background: var(--knm-chip-danger-bg);
    color: var(--knm-chip-danger-color);
    border-color: var(--knm-chip-danger-border);
}

.knm-chip--warning {
    background: var(--knm-chip-warning-bg);
    color: var(--knm-chip-warning-color);
    border-color: var(--knm-chip-warning-border);
}

.knm-chip--info {
    background: var(--knm-chip-info-bg);
    color: var(--knm-chip-info-color);
    border-color: var(--knm-chip-info-border);
}

/* Selected state — solid background */
.knm-chip--selected.knm-chip--default  { background: var(--knm-chip-default-color); color: var(--knm-chip-default-bg); }
.knm-chip--selected.knm-chip--primary  { background: var(--knm-chip-primary-color); color: #fff; }
.knm-chip--selected.knm-chip--success  { background: var(--knm-chip-success-color); color: #fff; }
.knm-chip--selected.knm-chip--danger   { background: var(--knm-chip-danger-color);  color: #fff; }
.knm-chip--selected.knm-chip--warning  { background: var(--knm-chip-warning-color); color: #212529; }
.knm-chip--selected.knm-chip--info     { background: var(--knm-chip-info-color);    color: #212529; }

/* ── Chip sizes ────────────────────────────────── */
.knm-chip--sm {
    --knm-chip-height: 1.4rem;
    --knm-chip-font-size: 0.7rem;
    --knm-chip-padding-x: 0.5rem;
    --knm-chip-gap: 0.25rem;
    --knm-chip-close-size: 0.875rem;
}

.knm-chip--lg {
    --knm-chip-height: 2.5rem;
    --knm-chip-font-size: 0.9375rem;
    --knm-chip-padding-x: 1rem;
    --knm-chip-gap: 0.5rem;
    --knm-chip-close-size: 1.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Avatar
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    vertical-align: middle;
    border-radius: var(--bs-border-radius, 0.375rem);
    background: var(--knm-avatar-bg-primary);
    color: var(--knm-avatar-color);
    font-weight: var(--knm-avatar-font-weight);
    user-select: none;
}

/* Rounded modifier (fully circular) */
.knm-avatar--rounded {
    border-radius: 50%;
}

/* ─── Sizes ─────────────────────────────────────────────────────────────── */

.knm-avatar--sm {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
}

.knm-avatar--md {
    width: 40px;
    height: 40px;
    font-size: 0.875rem;
}

.knm-avatar--lg {
    width: 56px;
    height: 56px;
    font-size: 1.125rem;
}

.knm-avatar--xl {
    width: 80px;
    height: 80px;
    font-size: 1.5rem;
}

/* ─── Variant backgrounds ───────────────────────────────────────────────── */

.knm-avatar--primary   { background: var(--knm-avatar-bg-primary);   color: var(--knm-avatar-color); }
.knm-avatar--secondary { background: var(--knm-avatar-bg-secondary); color: var(--knm-avatar-color); }
.knm-avatar--success   { background: var(--knm-avatar-bg-success);   color: var(--knm-avatar-color); }
.knm-avatar--danger    { background: var(--knm-avatar-bg-danger);    color: var(--knm-avatar-color); }
.knm-avatar--warning   { background: var(--knm-avatar-bg-warning);   color: var(--knm-avatar-warning-color); }
.knm-avatar--info      { background: var(--knm-avatar-bg-info);      color: var(--knm-avatar-warning-color); }

/* ─── Image ─────────────────────────────────────────────────────────────── */

.knm-avatar__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ─── Initials ──────────────────────────────────────────────────────────── */

.knm-avatar__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: 0.025em;
    pointer-events: none;
}

/* ─── Status dot ────────────────────────────────────────────────────────── */

.knm-avatar__status {
    position: absolute;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    border: var(--knm-avatar-border-width) solid var(--knm-avatar-border-color);
    box-sizing: content-box;
}

/* Status dot sizes per avatar size */
.knm-avatar--sm .knm-avatar__status { width: 8px;  height: 8px; }
.knm-avatar--md .knm-avatar__status { width: 10px; height: 10px; }
.knm-avatar--lg .knm-avatar__status { width: 12px; height: 12px; }
.knm-avatar--xl .knm-avatar__status { width: 14px; height: 14px; }

/* Status colors */
.knm-avatar__status--online  { background: var(--knm-avatar-status-online); }
.knm-avatar__status--offline { background: var(--knm-avatar-status-offline); }
.knm-avatar__status--away    { background: var(--knm-avatar-status-away); }
.knm-avatar__status--busy    { background: var(--knm-avatar-status-busy); }

/* Ensure status dot is visible above image */
.knm-avatar--has-status {
    overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Avatar Group
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-avatar-group {
    display: inline-flex;
    align-items: center;
    flex-direction: row;
}

.knm-avatar-group > .knm-avatar,
.knm-avatar-group > .knm-avatar-group__overflow {
    border: var(--knm-avatar-border-width) solid var(--knm-avatar-border-color);
    box-shadow: 0 0 0 var(--knm-avatar-border-width) var(--knm-avatar-border-color);
}

.knm-avatar-group > .knm-avatar + .knm-avatar,
.knm-avatar-group > .knm-avatar + .knm-avatar-group__overflow,
.knm-avatar-group > .knm-avatar-group__overflow {
    margin-left: var(--knm-avatar-group-overlap);
}

.knm-avatar-group > .knm-avatar:hover {
    z-index: 1;
    transform: translateY(-2px);
    transition: transform 0.15s ease;
}

/* Overflow "+N" badge */
.knm-avatar-group__overflow {
    background: var(--knm-avatar-group-overflow-bg) !important;
    color: var(--knm-avatar-group-overflow-color) !important;
    cursor: default;
    z-index: 0;
}

/* ─── Dark mode — Avatar specific overrides ─────────────────────────────── */

[data-bs-theme="dark"] .knm-avatar__status {
    border-color: var(--bs-body-bg, #212529);
}

[data-bs-theme="dark"] .knm-avatar-group > .knm-avatar,
[data-bs-theme="dark"] .knm-avatar-group > .knm-avatar-group__overflow {
    border-color: var(--bs-body-bg, #212529);
    box-shadow: 0 0 0 var(--knm-avatar-border-width) var(--bs-body-bg, #212529);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCORDION — KNMAccordion / KNMAccordionItem components
   ═══════════════════════════════════════════════════════════════════════════ */

.accordion {
    --bs-accordion-bg: var(--knm-accordion-bg);
    --bs-accordion-color: var(--knm-accordion-color);
    --bs-accordion-border-color: var(--knm-accordion-border-color);
    --bs-accordion-btn-bg: var(--knm-accordion-btn-bg);
    --bs-accordion-btn-color: var(--knm-accordion-btn-color);
    --bs-accordion-btn-focus-border-color: var(--knm-accordion-btn-focus-border);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--knm-accordion-btn-focus-shadow);
    --bs-accordion-active-bg: var(--knm-accordion-active-bg);
    --bs-accordion-active-color: var(--knm-accordion-active-color);
    --bs-accordion-border-radius: var(--knm-accordion-radius);
}

.knm-accordion-disabled {
    opacity: 0.6;
    pointer-events: none;
}

.accordion-button {
    transition: background-color var(--knm-accordion-transition),
                color var(--knm-accordion-transition);
}

.accordion-button:not(.collapsed) {
    background-color: var(--knm-accordion-active-bg);
    color: var(--knm-accordion-active-color);
}

.accordion-button i {
    font-size: 1.1em;
}

/* ─── Dark mode ──────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .accordion {
    --knm-accordion-bg: var(--bs-body-bg, #212529);
    --knm-accordion-color: var(--bs-body-color, #dee2e6);
    --knm-accordion-border-color: var(--bs-border-color, #495057);
    --knm-accordion-btn-bg: var(--bs-body-bg, #212529);
    --knm-accordion-btn-color: var(--bs-body-color, #dee2e6);
    --knm-accordion-active-bg: var(--bs-primary-bg-subtle, #031633);
    --knm-accordion-active-color: var(--bs-primary-text-emphasis, #6ea8fe);
}

/* ─── Size: Small (compact) ──────────────────────────────────────────── */
.knm-accordion-sm .accordion-button {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    background-color: transparent;
    box-shadow: none;
}

.knm-accordion-sm .accordion-button:not(.collapsed) {
    background-color: var(--knm-accordion-active-bg);
    box-shadow: none;
}

.knm-accordion-sm .accordion-button::after {
    width: 0.875rem;
    height: 0.875rem;
    background-size: 0.875rem;
}

.knm-accordion-sm .accordion-button i {
    font-size: 0.95em;
}

.knm-accordion-sm .accordion-body {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

/* ─── Size: Large ────────────────────────────────────────────────────── */
.knm-accordion-lg .accordion-button {
    padding: 1.25rem 1.5rem;
    font-size: 1.125rem;
}

.knm-accordion-lg .accordion-button::after {
    width: 1.25rem;
    height: 1.25rem;
    background-size: 1.25rem;
}

.knm-accordion-lg .accordion-button i {
    font-size: 1.25em;
}

.knm-accordion-lg .accordion-body {
    padding: 1.25rem 1.5rem;
    font-size: 1.0625rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRESS BAR — KNMProgressBar component (Linear)
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-progress__label {
    white-space: nowrap;
    padding: 0 0.5rem;
}

/* Indeterminate linear */
.knm-progress--indeterminate .knm-progress__bar--indeterminate {
    width: 100% !important;
    animation: knm-progress-indeterminate 1.5s infinite ease-in-out;
    transform-origin: left;
}

@keyframes knm-progress-indeterminate {
    0%   { transform: translateX(-100%) scaleX(0.3); }
    50%  { transform: translateX(0%)    scaleX(0.5); }
    100% { transform: translateX(100%)  scaleX(0.3); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRESS BAR — KNMProgressBar component (Circular)
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-progress-circular {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.knm-progress-circular__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.knm-progress-circular__track {
    stroke: var(--knm-progress-circular-track);
}

.knm-progress-circular__fill {
    transition: stroke-dashoffset var(--knm-progress-transition);
}

.knm-progress-circular__fill--primary { stroke: var(--knm-progress-primary); }
.knm-progress-circular__fill--success { stroke: var(--knm-progress-success); }
.knm-progress-circular__fill--danger  { stroke: var(--knm-progress-danger); }
.knm-progress-circular__fill--warning { stroke: var(--knm-progress-warning); }
.knm-progress-circular__fill--info    { stroke: var(--knm-progress-info); }

.knm-progress-circular__label {
    position: absolute;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bs-body-color, #212529);
}

/* Indeterminate circular */
.knm-progress-circular--indeterminate .knm-progress-circular__svg {
    animation: knm-progress-circular-spin 1.4s linear infinite;
}

.knm-progress-circular--indeterminate .knm-progress-circular__fill {
    stroke-dasharray: 80 125.6;
    stroke-dashoffset: 0;
    animation: knm-progress-circular-dash 1.4s ease-in-out infinite;
}

@keyframes knm-progress-circular-spin {
    100% { transform: rotate(270deg); }
}

@keyframes knm-progress-circular-dash {
    0%   { stroke-dasharray: 1 125.6;  stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 90 125.6; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 1 125.6;  stroke-dashoffset: -125; }
}

/* ─── Dark mode ──────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .progress {
    --bs-progress-bg: var(--bs-secondary-bg, #343a40);
}

[data-bs-theme="dark"] .knm-progress-circular__label {
    color: var(--bs-body-color, #dee2e6);
}

[data-bs-theme="dark"] .knm-progress-circular__track {
    stroke: var(--bs-secondary-bg, #343a40);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SKELETON — KNMSkeleton component
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-skeleton {
    background-color: var(--knm-skeleton-bg);
    display: block;
}

.knm-skeleton-group {
    display: flex;
    flex-direction: column;
}

.knm-skeleton--text {
    border-radius: var(--knm-skeleton-radius);
}

.knm-skeleton--rect {
    border-radius: var(--knm-skeleton-radius);
}

.knm-skeleton--circle {
    border-radius: 50%;
}

.knm-skeleton--avatar {
    border-radius: 50%;
}

/* Pulse animation */
.knm-skeleton--pulse {
    animation: knm-skeleton-pulse var(--knm-skeleton-pulse-duration) ease-in-out infinite;
}

@keyframes knm-skeleton-pulse {
    0%   { opacity: 1; }
    50%  { opacity: 0.4; }
    100% { opacity: 1; }
}

/* Wave animation */
.knm-skeleton--wave {
    position: relative;
    overflow: hidden;
}

.knm-skeleton--wave::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        var(--knm-skeleton-highlight) 50%,
        transparent
    );
    animation: knm-skeleton-wave var(--knm-skeleton-wave-duration) linear infinite;
    transform: translateX(-100%);
}

@keyframes knm-skeleton-wave {
    100% { transform: translateX(100%); }
}

/* ─── Dark mode ──────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .knm-skeleton {
    --knm-skeleton-bg: var(--bs-secondary-bg, #343a40);
    --knm-skeleton-highlight: var(--bs-tertiary-bg, #2b3035);
}


/* ═══════════════════════════════════════════════════════════════════════════
   KNMAutocomplete
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --knm-autocomplete-bg: var(--bs-body-bg, #fff);
    --knm-autocomplete-border-color: var(--bs-border-color, #ced4da);
    --knm-autocomplete-border-radius: var(--bs-border-radius, 0.375rem);
    --knm-autocomplete-dropdown-bg: var(--bs-body-bg, #fff);
    --knm-autocomplete-dropdown-border: var(--bs-border-color, #dee2e6);
    --knm-autocomplete-dropdown-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    --knm-autocomplete-item-hover-bg: var(--bs-tertiary-bg, #f8f9fa);
    --knm-autocomplete-item-active-bg: var(--knm-primary, #0d6efd);
    --knm-autocomplete-item-active-color: #fff;
    --knm-autocomplete-highlight-color: var(--knm-primary, #0d6efd);
    --knm-autocomplete-max-height: 240px;
    --knm-autocomplete-z-index: 1050;
}

.knm-autocomplete {
    position: relative;
}

.knm-autocomplete-input {
    width: 100%;
}

.knm-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--knm-autocomplete-z-index);
    max-height: var(--knm-autocomplete-max-height);
    overflow-y: auto;
    margin: 0.125rem 0 0;
    padding: 0.25rem 0;
    list-style: none;
    background: var(--knm-autocomplete-dropdown-bg);
    border: 1px solid var(--knm-autocomplete-dropdown-border);
    border-radius: var(--knm-autocomplete-border-radius);
    box-shadow: var(--knm-autocomplete-dropdown-shadow);
}

.knm-autocomplete-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

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

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

.knm-autocomplete-highlight {
    font-weight: 700;
    color: var(--knm-autocomplete-highlight-color);
}

.knm-autocomplete-item--active .knm-autocomplete-highlight {
    color: inherit;
}

/* ─── Autocomplete multi-select chips ────────────────────────────────── */
.knm-autocomplete__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.375rem;
}

.knm-autocomplete__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.8125rem;
    background: var(--knm-primary, #0d6efd);
    color: #fff;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.4;
}

.knm-autocomplete__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    font-size: 0.625rem;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.knm-autocomplete__chip-remove:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}

/* ─── Autocomplete dark mode ─────────────────────────────────────────── */
[data-bs-theme="dark"] .knm-autocomplete {
    --knm-autocomplete-dropdown-bg: var(--bs-body-bg, #212529);
    --knm-autocomplete-dropdown-border: var(--bs-border-color, #495057);
    --knm-autocomplete-item-hover-bg: var(--bs-tertiary-bg, #2b3035);
    --knm-autocomplete-dropdown-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
}


/* ═══════════════════════════════════════════════════════════════════════════
   KNMStepper
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --knm-stepper-circle-size: 2.25rem;
    --knm-stepper-circle-bg: var(--bs-secondary-bg, #e9ecef);
    --knm-stepper-circle-color: var(--bs-secondary-color, #6c757d);
    --knm-stepper-circle-active-bg: var(--knm-primary, #0d6efd);
    --knm-stepper-circle-active-color: #fff;
    --knm-stepper-circle-completed-bg: var(--bs-success, #198754);
    --knm-stepper-circle-completed-color: #fff;
    --knm-stepper-connector-color: var(--bs-border-color, #dee2e6);
    --knm-stepper-connector-completed-color: var(--bs-success, #198754);
    --knm-stepper-connector-thickness: 2px;
    --knm-stepper-label-color: var(--bs-body-color, #212529);
    --knm-stepper-label-font-size: 0.85rem;
    --knm-stepper-optional-color: var(--bs-secondary-color, #6c757d);
    --knm-stepper-gap: 0.5rem;
    --knm-stepper-transition: 0.3s ease;
}

.knm-stepper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ─── Header (horizontal) ────────────────────────────────────────────── */
.knm-stepper--horizontal .knm-stepper-header {
    display: flex;
    align-items: center;
    gap: 0;
}

.knm-stepper-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--knm-stepper-gap);
    cursor: pointer;
    flex-shrink: 0;
}

.knm-stepper-circle {
    width: var(--knm-stepper-circle-size);
    height: var(--knm-stepper-circle-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    background: var(--knm-stepper-circle-bg);
    color: var(--knm-stepper-circle-color);
    transition: background-color var(--knm-stepper-transition), color var(--knm-stepper-transition);
}

.knm-stepper-step--active .knm-stepper-circle {
    background: var(--knm-stepper-circle-active-bg);
    color: var(--knm-stepper-circle-active-color);
    box-shadow: 0 0 0 3px rgba(var(--knm-primary-rgb, 13, 110, 253), 0.25);
}

.knm-stepper-step--completed .knm-stepper-circle {
    background: var(--knm-stepper-circle-completed-bg);
    color: var(--knm-stepper-circle-completed-color);
}

.knm-stepper-label {
    font-size: var(--knm-stepper-label-font-size);
    color: var(--knm-stepper-label-color);
    text-align: center;
    white-space: nowrap;
}

.knm-stepper-step--pending .knm-stepper-label {
    color: var(--knm-stepper-optional-color);
}

.knm-stepper-optional {
    display: block;
    font-size: 0.75rem;
    color: var(--knm-stepper-optional-color);
}

/* ─── Connector (horizontal) ─────────────────────────────────────────── */
.knm-stepper--horizontal .knm-stepper-connector {
    flex: 1;
    height: var(--knm-stepper-connector-thickness);
    background: var(--knm-stepper-connector-color);
    margin: 0 0.5rem;
    align-self: flex-start;
    margin-top: calc(var(--knm-stepper-circle-size) / 2 - var(--knm-stepper-connector-thickness) / 2);
    transition: background-color var(--knm-stepper-transition);
}

.knm-stepper-connector--completed {
    background: var(--knm-stepper-connector-completed-color) !important;
}

/* ─── Vertical orientation ───────────────────────────────────────────── */
.knm-stepper--vertical {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    gap: 0 1.5rem;
}

.knm-stepper--vertical .knm-stepper-header {
    display: flex;
    flex-direction: column;
    gap: 0;
    grid-row: 1 / 2;
    grid-column: 1;
}

.knm-stepper--vertical .knm-stepper-content {
    grid-row: 1 / 2;
    grid-column: 2;
    align-self: start;
}

.knm-stepper--vertical .knm-stepper-actions {
    grid-row: 2;
    grid-column: 1 / -1;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.knm-stepper--vertical .knm-stepper-step {
    flex-direction: row;
    align-items: center;
}

.knm-stepper--vertical .knm-stepper-label {
    text-align: left;
}

.knm-stepper--vertical .knm-stepper-connector {
    width: var(--knm-stepper-connector-thickness);
    height: 1.5rem;
    background: var(--knm-stepper-connector-color);
    margin-left: calc(var(--knm-stepper-circle-size) / 2 - var(--knm-stepper-connector-thickness) / 2);
    transition: background-color var(--knm-stepper-transition);
}

/* ─── Content & actions ──────────────────────────────────────────────── */
.knm-stepper-content {
    min-height: 4rem;
}

.knm-stepper-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

/* ─── Stepper dark mode ──────────────────────────────────────────────── */
[data-bs-theme="dark"] .knm-stepper {
    --knm-stepper-circle-bg: var(--bs-secondary-bg, #343a40);
    --knm-stepper-circle-color: var(--bs-secondary-color, #adb5bd);
    --knm-stepper-connector-color: var(--bs-border-color, #495057);
    --knm-stepper-label-color: var(--bs-body-color, #dee2e6);
    --knm-stepper-optional-color: var(--bs-secondary-color, #adb5bd);
}


/* ═══════════════════════════════════════════════════════════════════════════
   KNMDropzone
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --knm-dropzone-bg: var(--bs-body-bg, #fff);
    --knm-dropzone-border-color: var(--bs-border-color, #dee2e6);
    --knm-dropzone-border-style: dashed;
    --knm-dropzone-border-width: 2px;
    --knm-dropzone-border-radius: var(--bs-border-radius-lg, 0.5rem);
    --knm-dropzone-dragover-bg: rgba(var(--knm-primary-rgb, 13, 110, 253), 0.05);
    --knm-dropzone-dragover-border-color: var(--knm-primary, #0d6efd);
    --knm-dropzone-icon-size: 2.5rem;
    --knm-dropzone-icon-color: var(--bs-secondary-color, #6c757d);
    --knm-dropzone-text-color: var(--bs-body-color, #212529);
    --knm-dropzone-hint-color: var(--bs-secondary-color, #6c757d);
    --knm-dropzone-link-color: var(--knm-primary, #0d6efd);
    --knm-dropzone-padding: 1.5rem;
    --knm-dropzone-card-gap: 1rem;
    --knm-dropzone-card-min-width: 180px;
    --knm-dropzone-card-max-width: 220px;
    --knm-dropzone-card-border-radius: var(--bs-border-radius, 0.375rem);
    --knm-dropzone-transition: 0.2s ease;
}

/* ─── Main container (single box: cards + drop message) ─────────────── */
.knm-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 120px;
    padding: var(--knm-dropzone-padding);
    background: var(--knm-dropzone-bg);
    border: var(--knm-dropzone-border-width) var(--knm-dropzone-border-style) var(--knm-dropzone-border-color);
    border-radius: var(--knm-dropzone-border-radius);
    transition: background-color var(--knm-dropzone-transition), border-color var(--knm-dropzone-transition);
}

.knm-dropzone--dragover {
    background: var(--knm-dropzone-dragover-bg);
    border-color: var(--knm-dropzone-dragover-border-color);
    border-style: solid;
    box-shadow: 0 0 0 3px rgba(var(--knm-primary-rgb, 13, 110, 253), 0.2);
}

.knm-dropzone-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Full overlay when empty — click anywhere to browse */
.knm-dropzone:not(.knm-dropzone--has-files) .knm-dropzone-input--overlay {
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    cursor: pointer;
    z-index: 1;
}

/* When files exist, InputFile is hidden — "Add files" label triggers it */
.knm-dropzone--has-files .knm-dropzone-input--overlay {
    pointer-events: none;
}

/* ─── File cards grid (inside drop zone) ────────────────────────────── */
.knm-dropzone-cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--knm-dropzone-card-gap);
    width: 100%;
    position: relative;
    z-index: 2;
}

.knm-dropzone--list .knm-dropzone-cards {
    flex-direction: column;
}

.knm-dropzone--list .knm-dropzone-card {
    width: 100%;
    max-width: none;
}

/* ─── Single file card ──────────────────────────────────────────────── */
.knm-dropzone-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--knm-dropzone-card-max-width);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--knm-dropzone-card-border-radius);
    background: var(--bs-body-bg, #fff);
    overflow: hidden;
    animation: knm-dropzone-fadein 0.3s ease;
}

.knm-dropzone--list .knm-dropzone-card {
    flex-direction: row;
    align-items: center;
}

.knm-dropzone-card--completed {
    border-color: var(--bs-success, #198754);
}

.knm-dropzone-card--error {
    border-color: var(--bs-danger, #dc3545);
}

.knm-dropzone-card[draggable="true"] {
    cursor: grab;
}

.knm-dropzone-card[draggable="true"]:active {
    cursor: grabbing;
    opacity: 0.7;
}

@keyframes knm-dropzone-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Preview zone ──────────────────────────────────────────────────── */
.knm-dropzone-preview {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    background: var(--bs-tertiary-bg, #f8f9fa);
    overflow: hidden;
}

.knm-dropzone--list .knm-dropzone-preview {
    height: 56px;
    width: 56px;
    flex-shrink: 0;
}

.knm-dropzone-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.knm-dropzone-type-icon {
    width: 48px;
    height: 48px;
}

.knm-dropzone--list .knm-dropzone-type-icon {
    width: 36px;
    height: 36px;
}

.knm-dropzone-file-icon {
    font-size: 2rem;
    color: var(--knm-dropzone-icon-color);
}

.knm-dropzone--list .knm-dropzone-file-icon {
    font-size: 1.5rem;
}

/* Status badge overlay (top-right of preview) */
.knm-dropzone-status-badge {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #fff;
}

.knm-dropzone-status-badge--success {
    background: var(--bs-success, #198754);
}

.knm-dropzone-status-badge--error {
    background: var(--bs-danger, #dc3545);
}

/* ─── Details zone ──────────────────────────────────────────────────── */
.knm-dropzone-details {
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.knm-dropzone--list .knm-dropzone-details {
    flex: 1;
    min-width: 0;
}

.knm-dropzone-filename {
    font-weight: 600;
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bs-body-color, #212529);
}

.knm-dropzone-filesize {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.75rem;
}

.knm-dropzone-error-message {
    color: var(--bs-danger, #dc3545);
    font-size: 0.75rem;
    font-weight: 600;
}

/* ─── Progress bar ──────────────────────────────────────────────────── */
.knm-dropzone-progress {
    height: 4px;
    background: var(--bs-secondary-bg, #e9ecef);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.25rem;
}

.knm-dropzone-progress__bar {
    height: 100%;
    background: var(--knm-primary, #0d6efd);
    border-radius: 2px;
    transition: width 0.2s ease;
}

.knm-dropzone-card--completed .knm-dropzone-progress__bar {
    background: var(--bs-success, #198754);
}

/* ─── Template zone (consumer) ──────────────────────────────────────── */
.knm-dropzone-template {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

/* ─── Actions zone ──────────────────────────────────────────────────── */
.knm-dropzone-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.knm-dropzone-drag-handle {
    cursor: grab;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 1rem;
    padding: 0 0.25rem;
}

.knm-dropzone-drag-handle:active {
    cursor: grabbing;
}

/* ─── Drop message ──────────────────────────────────────────────────── */
.knm-dropzone-message {
    text-align: center;
    padding: 1rem 0;
    position: relative;
    z-index: 2;
}

/* Empty state: bigger message */
.knm-dropzone:not(.knm-dropzone--has-files) .knm-dropzone-message {
    padding: 2rem 0;
}

.knm-dropzone-message-icon {
    font-size: var(--knm-dropzone-icon-size);
    color: var(--knm-dropzone-icon-color);
    display: block;
    margin-bottom: 0.5rem;
}

.knm-dropzone-message-text {
    color: var(--knm-dropzone-text-color);
    margin: 0 0 0.25rem;
}

.knm-dropzone-browse-link {
    color: var(--knm-dropzone-link-color);
    cursor: pointer;
    text-decoration: underline;
    pointer-events: auto;
    position: relative;
    z-index: 3;
}

.knm-dropzone-message-hint {
    color: var(--knm-dropzone-hint-color);
    font-size: 0.8rem;
}

/* Compact "add more" bar when files exist */
.knm-dropzone-add-more {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--knm-dropzone-link-color);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    border: 1px dashed var(--bs-border-color, #dee2e6);
    border-radius: var(--knm-dropzone-card-border-radius);
    transition: border-color var(--knm-dropzone-transition);
    position: relative;
    z-index: 3;
}

.knm-dropzone-add-more:hover {
    border-color: var(--knm-dropzone-link-color);
}

/* ─── Separator between cards and message ────────────────────────────── */
.knm-dropzone--has-files .knm-dropzone-message {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--bs-border-color, #dee2e6);
}

/* ─── Dark mode ─────────────────────────────────────────────────────── */
/* Minimal / compact mode (single-line file input) */
.knm-dropzone.knm-dropzone-minimal {
    max-height: 45px !important;
    min-height: 45px !important;
    display: flex;
    padding: 0.5rem 1rem;
}

.knm-dropzone.knm-dropzone-minimal .knm-dropzone-input {
    padding: 0 !important;
}

.knm-dropzone.knm-dropzone-minimal .knm-dropzone-message {
    display: flex;
    gap: 2rem;
    vertical-align: middle !important;
    padding: 0;
}

.knm-dropzone.knm-dropzone-minimal .knm-dropzone-message .knm-dropzone-message-hint {
    padding-top: 0.5rem;
}

.knm-dropzone.knm-dropzone-minimal .knm-dropzone-message .knm-dropzone-message-text {
    padding-top: 0.2rem;
}

.knm-dropzone.knm-dropzone-minimal .knm-dropzone-message i {
    padding-top: 0;
    margin-top: -5px;
}

[data-bs-theme="dark"] .knm-dropzone {
    --knm-dropzone-bg: var(--bs-body-bg, #212529);
    --knm-dropzone-border-color: var(--bs-border-color, #495057);
    --knm-dropzone-dragover-bg: rgba(var(--knm-primary-rgb, 13, 110, 253), 0.1);
    --knm-dropzone-icon-color: var(--bs-secondary-color, #adb5bd);
    --knm-dropzone-text-color: var(--bs-body-color, #dee2e6);
    --knm-dropzone-hint-color: var(--bs-secondary-color, #adb5bd);
}

[data-bs-theme="dark"] .knm-dropzone-card {
    background: var(--bs-body-bg, #212529);
    border-color: var(--bs-border-color, #495057);
}

[data-bs-theme="dark"] .knm-dropzone-card--error {
    border-color: var(--bs-danger, #dc3545);
    background: rgba(220, 53, 69, 0.1);
}

[data-bs-theme="dark"] .knm-dropzone-actions {
    background: rgba(0, 0, 0, 0.15);
}

[data-bs-theme="dark"] .knm-dropzone-preview {
    background: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .knm-dropzone-filename {
    color: var(--bs-body-color, #dee2e6);
}

[data-bs-theme="dark"] .knm-dropzone-filesize {
    color: var(--bs-secondary-color, #adb5bd);
}

[data-bs-theme="dark"] .knm-dropzone-message-text {
    color: var(--bs-body-color, #dee2e6);
}

[data-bs-theme="dark"] .knm-dropzone-browse-link {
    color: var(--knm-primary, #6ea8fe);
}

[data-bs-theme="dark"] .knm-dropzone-add-more {
    color: var(--knm-primary, #6ea8fe);
    border-color: var(--bs-border-color, #495057);
}

[data-bs-theme="dark"] .knm-dropzone-template {
    border-color: var(--bs-border-color, #495057);
}

[data-bs-theme="dark"] .knm-dropzone-details {
    color: var(--bs-body-color, #dee2e6);
}


/* ═══════════════════════════════════════════════════════════════════════════
   KNMTimeline
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --knm-timeline-dot-size: 1rem;
    --knm-timeline-dot-bg: var(--bs-secondary-bg, #e9ecef);
    --knm-timeline-dot-border-color: var(--bs-border-color, #dee2e6);
    --knm-timeline-dot-border-width: 2px;
    --knm-timeline-connector-color: var(--bs-border-color, #dee2e6);
    --knm-timeline-connector-width: 2px;
    --knm-timeline-title-color: var(--bs-body-color, #212529);
    --knm-timeline-title-font-size: 1rem;
    --knm-timeline-title-font-weight: 600;
    --knm-timeline-subtitle-color: var(--bs-secondary-color, #6c757d);
    --knm-timeline-subtitle-font-size: 0.8rem;
    --knm-timeline-content-color: var(--bs-body-color, #212529);
    --knm-timeline-gap: 1.5rem;
    --knm-timeline-dot-icon-size: 0.6rem;

    /* Variant colors */
    --knm-timeline-primary: var(--knm-primary, #0d6efd);
    --knm-timeline-success: var(--bs-success, #198754);
    --knm-timeline-danger: var(--bs-danger, #dc3545);
    --knm-timeline-warning: var(--bs-warning, #ffc107);
    --knm-timeline-info: var(--bs-info, #0dcaf0);
}

/* ─── Vertical layout ────────────────────────────────────────────────── */
.knm-timeline--vertical {
    display: flex;
    flex-direction: column;
    padding-left: calc(var(--knm-timeline-dot-size) / 2);
}

.knm-timeline--vertical .knm-timeline-item {
    display: flex;
    gap: 1rem;
    position: relative;
    padding-bottom: var(--knm-timeline-gap);
}

.knm-timeline--vertical .knm-timeline-dot {
    width: var(--knm-timeline-dot-size);
    height: var(--knm-timeline-dot-size);
    min-width: var(--knm-timeline-dot-size);
    border-radius: 50%;
    background: var(--knm-timeline-dot-bg);
    border: var(--knm-timeline-dot-border-width) solid var(--knm-timeline-dot-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.knm-timeline--vertical .knm-timeline-dot i {
    font-size: var(--knm-timeline-dot-icon-size);
}

.knm-timeline--vertical .knm-timeline-connector {
    position: absolute;
    left: calc(var(--knm-timeline-dot-size) / 2 - var(--knm-timeline-connector-width) / 2);
    top: var(--knm-timeline-dot-size);
    bottom: 0;
    width: var(--knm-timeline-connector-width);
    background: var(--knm-timeline-connector-color);
}

.knm-timeline--vertical .knm-timeline-item:last-child .knm-timeline-connector {
    display: none;
}

.knm-timeline--vertical .knm-timeline-body {
    flex: 1;
    padding-top: 0;
}

/* ─── Alternate mode (CSS Grid) ─────────────────────────────────────── */
.knm-timeline--alternate.knm-timeline--vertical {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-left: 0;
}

.knm-timeline--alternate .knm-timeline-item {
    display: grid;
    grid-template-columns: 1fr var(--knm-timeline-dot-size) 1fr;
    gap: 0 1rem;
    position: relative;
    padding-bottom: var(--knm-timeline-gap);
    padding-left: 0;
}

/* Center the dot in the middle column */
.knm-timeline--alternate .knm-timeline-dot {
    position: relative;
    left: auto;
    transform: none;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    z-index: 1;
}

/* Connector runs down the center column */
.knm-timeline--alternate .knm-timeline-connector {
    position: absolute;
    left: 50% !important;
    transform: translateX(-50%);
    top: var(--knm-timeline-dot-size);
    bottom: 0;
    right: auto !important;
}

/* Odd items (1st, 3rd…) — content on the left, text right-aligned */
.knm-timeline--alternate .knm-timeline-item:nth-child(odd) .knm-timeline-body {
    grid-column: 1;
    grid-row: 1;
    text-align: right;
    padding-right: 0;
    padding-left: 0;
}

/* Even items (2nd, 4th…) — content on the right */
.knm-timeline--alternate .knm-timeline-item:nth-child(even) .knm-timeline-body {
    grid-column: 3;
    grid-row: 1;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
}

/* ─── Horizontal layout ──────────────────────────────────────────────── */
.knm-timeline--horizontal {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    overflow-x: auto;
    padding-top: calc(var(--knm-timeline-dot-size) / 2);
}

.knm-timeline--horizontal .knm-timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-right: var(--knm-timeline-gap);
    min-width: 8rem;
    text-align: center;
}

.knm-timeline--horizontal .knm-timeline-dot {
    width: var(--knm-timeline-dot-size);
    height: var(--knm-timeline-dot-size);
    min-width: var(--knm-timeline-dot-size);
    border-radius: 50%;
    background: var(--knm-timeline-dot-bg);
    border: var(--knm-timeline-dot-border-width) solid var(--knm-timeline-dot-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.knm-timeline--horizontal .knm-timeline-dot i {
    font-size: var(--knm-timeline-dot-icon-size);
}

.knm-timeline--horizontal .knm-timeline-connector {
    position: absolute;
    top: calc(var(--knm-timeline-dot-size) / 2 - var(--knm-timeline-connector-width) / 2);
    left: calc(50% + var(--knm-timeline-dot-size) / 2);
    right: 0;
    height: var(--knm-timeline-connector-width);
    background: var(--knm-timeline-connector-color);
}

.knm-timeline--horizontal .knm-timeline-item:last-child .knm-timeline-connector {
    display: none;
}

.knm-timeline--horizontal .knm-timeline-body {
    margin-top: 0.75rem;
}

/* ─── Title, subtitle, content ───────────────────────────────────────── */
.knm-timeline-title {
    font-size: var(--knm-timeline-title-font-size);
    font-weight: var(--knm-timeline-title-font-weight);
    color: var(--knm-timeline-title-color);
}

.knm-timeline-subtitle {
    font-size: var(--knm-timeline-subtitle-font-size);
    color: var(--knm-timeline-subtitle-color);
    margin-top: 0.125rem;
}

.knm-timeline-content {
    color: var(--knm-timeline-content-color);
    margin-top: 0.375rem;
}

/* ─── Variant colors ─────────────────────────────────────────────────── */
.knm-timeline-item--primary .knm-timeline-dot {
    background: var(--knm-timeline-primary);
    border-color: var(--knm-timeline-primary);
    color: #fff;
}
.knm-timeline-item--primary .knm-timeline-connector {
    background: var(--knm-timeline-primary);
}

.knm-timeline-item--success .knm-timeline-dot {
    background: var(--knm-timeline-success);
    border-color: var(--knm-timeline-success);
    color: #fff;
}
.knm-timeline-item--success .knm-timeline-connector {
    background: var(--knm-timeline-success);
}

.knm-timeline-item--danger .knm-timeline-dot {
    background: var(--knm-timeline-danger);
    border-color: var(--knm-timeline-danger);
    color: #fff;
}
.knm-timeline-item--danger .knm-timeline-connector {
    background: var(--knm-timeline-danger);
}

.knm-timeline-item--warning .knm-timeline-dot {
    background: var(--knm-timeline-warning);
    border-color: var(--knm-timeline-warning);
    color: #212529;
}
.knm-timeline-item--warning .knm-timeline-connector {
    background: var(--knm-timeline-warning);
}

.knm-timeline-item--info .knm-timeline-dot {
    background: var(--knm-timeline-info);
    border-color: var(--knm-timeline-info);
    color: #212529;
}
.knm-timeline-item--info .knm-timeline-connector {
    background: var(--knm-timeline-info);
}

/* ─── Timeline dark mode ─────────────────────────────────────────────── */
[data-bs-theme="dark"] .knm-timeline--vertical,
[data-bs-theme="dark"] .knm-timeline--horizontal {
    --knm-timeline-dot-bg: var(--bs-secondary-bg, #343a40);
    --knm-timeline-dot-border-color: var(--bs-border-color, #495057);
    --knm-timeline-connector-color: var(--bs-border-color, #495057);
    --knm-timeline-title-color: var(--bs-body-color, #dee2e6);
    --knm-timeline-subtitle-color: var(--bs-secondary-color, #adb5bd);
    --knm-timeline-content-color: var(--bs-body-color, #dee2e6);
}


/* ═══════════════════════════════════════════════════════════════════════════
   TreeView / Drawer / Menu / ColorPicker — Dark mode overrides
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── TreeView dark mode ────────────────────────────────────────────── */
[data-bs-theme="dark"] {
    --knm-tree-color: var(--bs-body-color, #dee2e6);
    --knm-tree-hover-bg: var(--bs-tertiary-bg, #2b3035);
    --knm-tree-selected-bg: rgba(var(--knm-primary-rgb, 13, 110, 253), 0.2);
    --knm-tree-selected-color: var(--knm-primary, var(--bs-primary, #6ea8fe));
    --knm-tree-toggle-color: var(--bs-secondary-color, #adb5bd);
    --knm-tree-icon-color: var(--bs-secondary-color, #adb5bd);
}

/* ─── Drawer dark mode ──────────────────────────────────────────────── */
[data-bs-theme="dark"] {
    --knm-drawer-bg: var(--bs-body-bg, #212529);
    --knm-drawer-border-color: var(--bs-border-color, #495057);
    --knm-drawer-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
    --knm-drawer-backdrop-bg: rgba(0, 0, 0, 0.65);
}

/* ─── Menu dark mode — handled by Bootstrap ───────────────────────── */

/* ─── ColorPicker dark mode ─────────────────────────────────────────── */
[data-bs-theme="dark"] {
    --knm-colorpicker-bg: var(--bs-body-bg, #212529);
    --knm-colorpicker-border-color: var(--bs-border-color, #495057);
    --knm-colorpicker-swatch-hover-border: var(--bs-secondary-color, #adb5bd);
    --knm-colorpicker-selected-shadow: rgba(var(--knm-primary-rgb, 13, 110, 253), 0.4);
    --knm-colorpicker-hex-color: var(--bs-secondary-color, #adb5bd);
    --knm-colorpicker-slider-thumb-bg: #2b3035;
    --knm-colorpicker-slider-thumb-border: #adb5bd;
    --knm-colorpicker-slider-thumb-shadow: rgba(0, 0, 0, 0.5);
    --knm-colorpicker-checkerboard-color: #495057;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCHEDULER — Timeline View (resource-based horizontal calendar)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --knm-sched-timeline-resource-width: 160px;
    --knm-sched-timeline-row-height: 48px;
    --knm-sched-timeline-slot-min-width: 80px;
    --knm-sched-timeline-group-bg: var(--bs-tertiary-bg, #f8f9fa);
}

.knm-timeline-view {
    display: flex;
    flex-direction: column;
    overflow: auto;
    position: relative;
}

/* ─── Time header ────────────────────────────────────────────────────── */
.knm-timeline-view__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--knm-scheduler-bg);
    border-bottom: 2px solid var(--knm-scheduler-border-color);
}

.knm-timeline-view__resource-gutter {
    width: var(--knm-sched-timeline-resource-width);
    min-width: var(--knm-sched-timeline-resource-width);
    padding: 6px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    border-right: 1px solid var(--knm-scheduler-border-color);
    display: flex;
    align-items: center;
    gap: 6px;
}

.knm-timeline-view__time-axis {
    display: flex;
    flex: 1;
    min-width: 0;
}

.knm-timeline-view__time-cell {
    flex: 1;
    min-width: var(--knm-sched-timeline-slot-min-width);
    text-align: center;
    padding: 6px 4px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--bs-secondary-color, #6c757d);
    border-left: 1px solid var(--knm-scheduler-border-color);
}

.knm-timeline-view__time-cell--business {
    background: var(--knm-scheduler-business-bg);
}

/* ─── Body ───────────────────────────────────────────────────────────── */
.knm-timeline-view__body {
    position: relative;
}

/* ─── Group ──────────────────────────────────────────────────────────── */
.knm-timeline-view__group {
    border-bottom: 1px solid var(--knm-scheduler-border-color);
}

.knm-timeline-view__group-header {
    background: var(--knm-sched-timeline-group-bg);
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color, #6c757d);
    border-bottom: 1px solid var(--knm-scheduler-border-color);
}

.knm-timeline-view__group-name {
    display: inline-block;
}

/* ─── Resource row ───────────────────────────────────────────────────── */
.knm-timeline-view__row {
    display: flex;
    min-height: var(--knm-sched-timeline-row-height);
    border-bottom: 1px solid var(--knm-scheduler-border-color);
}

.knm-timeline-view__row:hover {
    background: rgba(0, 0, 0, 0.015);
}

.knm-timeline-view__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.knm-timeline-view__resource-name {
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Track (event lane) ─────────────────────────────────────────────── */
.knm-timeline-view__track {
    flex: 1;
    position: relative;
    display: flex;
    min-width: 0;
}

.knm-timeline-view__slot {
    flex: 1;
    min-width: var(--knm-sched-timeline-slot-min-width);
    border-left: 1px solid var(--knm-scheduler-border-color);
    cursor: pointer;
}

.knm-timeline-view__slot--business {
    background: var(--knm-scheduler-business-bg);
}

.knm-timeline-view__slot:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* ─── Timeline event bar ─────────────────────────────────────────────── */
.knm-scheduler-event--timeline {
    position: absolute;
    top: 4px;
    bottom: 4px;
    background: var(--knm-primary, #0d6efd);
    color: #fff;
    padding: 2px 6px;
    border-left: 3px solid rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ─── Now indicator (vertical line) ──────────────────────────────────── */
.knm-timeline-view__now {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--knm-scheduler-now-color);
    z-index: 4;
    pointer-events: none;
}

.knm-timeline-view__now::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--knm-scheduler-now-color);
}

/* ─── Scheduler Timeline — dark mode ─────────────────────────────────── */
[data-bs-theme="dark"] {
    --knm-sched-timeline-group-bg: var(--bs-tertiary-bg, #2b3035);
}

[data-bs-theme="dark"] .knm-timeline-view__row:hover {
    background: rgba(255, 255, 255, 0.03);
}

[data-bs-theme="dark"] .knm-timeline-view__slot:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* ─── Scheduler Timeline — responsive ────────────────────────────────── */
@media (max-width: 575.98px) {
    :root {
        --knm-sched-timeline-resource-width: 100px;
        --knm-sched-timeline-slot-min-width: 60px;
    }
    .knm-timeline-view__resource-name { font-size: 0.7rem; }
    .knm-scheduler-event--timeline { font-size: 0.65rem; padding: 1px 3px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCHEDULER — Year View (12-month planner grid)
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-year-view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    padding: .75rem;
}

.knm-year-view__month {
    border: 1px solid var(--knm-scheduler-border-color);
    border-radius: var(--bs-border-radius, .375rem);
    overflow: hidden;
}

.knm-year-view__month-title {
    text-align: center;
    font-weight: 600;
    font-size: .8rem;
    padding: .4rem 0;
    text-transform: capitalize;
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-bottom: 1px solid var(--knm-scheduler-border-color);
}

.knm-year-view__month-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: .6rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
    padding: .2rem .25rem;
    border-bottom: 1px solid var(--knm-scheduler-border-color);
}

.knm-year-view__month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    font-size: .65rem;
}

.knm-year-view__day {
    position: relative;
    min-height: 3.2rem;
    padding: 1px 2px;
    cursor: pointer;
    border-right: 1px solid var(--knm-scheduler-border-color);
    border-bottom: 1px solid var(--knm-scheduler-border-color);
    overflow: hidden;
    transition: background .1s ease;
}

.knm-year-view__day:nth-child(7n) {
    border-right: none;
}

.knm-year-view__day:hover:not(.knm-year-view__day--empty) {
    background: var(--bs-tertiary-bg, rgba(0,0,0,.03));
}

.knm-year-view__day--empty {
    cursor: default;
    background: transparent;
}

.knm-year-view__day--today .knm-year-view__day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: var(--knm-primary, #0d6efd);
    color: #fff;
    font-weight: 600;
}

.knm-year-view__day-num {
    display: block;
    font-size: .65rem;
    line-height: 1;
    padding: 1px 0;
    color: var(--bs-body-color);
}

.knm-year-view__day-events {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.knm-year-view__event {
    font-size: .55rem;
    line-height: 1.3;
    padding: 0 3px;
    border-radius: 2px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.knm-year-view__event:hover {
    opacity: .85;
}

.knm-year-view__more {
    font-size: .5rem;
    color: var(--bs-secondary-color, #6c757d);
    padding: 0 2px;
    cursor: pointer;
}

.knm-year-view__more:hover {
    text-decoration: underline;
}

@media (max-width: 991.98px) {
    .knm-year-view {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .knm-year-view {
        grid-template-columns: 1fr;
    }
}

/* ─── Year Planner — horizontal 12-month timeline ────────────────────── */
.knm-yearplanner {
    --knm-yearplanner-label-width: 60px;
    --knm-yearplanner-label-ratio: calc(60 / var(--knm-yearplanner-total-width, 900));
    font-size: 0.75rem;
    overflow-x: auto;
    min-width: 0;
}
.knm-yearplanner__header,
.knm-yearplanner__row {
    display: grid;
    grid-template-columns: var(--knm-yearplanner-label-width) repeat(31, 1fr);
    position: relative;
    min-height: 28px;
    border-bottom: 1px solid var(--knm-scheduler-border-color);
}
.knm-yearplanner__row {
    min-height: 48px;
}
.knm-yearplanner__month-label {
    display: flex;
    align-items: center;
    padding: 0 0.375rem;
    font-weight: 600;
    font-size: 0.75rem;
    background: var(--knm-scheduler-bg);
    position: sticky;
    left: 0;
    z-index: 2;
    border-right: 1px solid var(--knm-scheduler-border-color);
}
.knm-yearplanner__day-header {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    color: var(--knm-muted-color, #6c757d);
    border-left: 1px solid var(--knm-scheduler-border-color);
}
.knm-yearplanner__cell {
    border-left: 1px solid var(--knm-scheduler-border-color);
    cursor: pointer;
    min-height: 100%;
}
.knm-yearplanner__cell:hover {
    background: var(--knm-cal-hover-bg, rgba(var(--knm-primary-rgb, 13,110,253), 0.1));
}
.knm-yearplanner__cell--weekend {
    background: var(--knm-scheduler-business-bg, rgba(0,0,0,0.02));
}
.knm-yearplanner__cell--today {
    background: var(--knm-cal-today-bg, rgba(var(--knm-primary-rgb, 13,110,253), 0.15));
}
.knm-yearplanner__cell--empty {
    background: var(--bs-tertiary-bg, #f8f9fa);
    cursor: default;
    pointer-events: none;
}
.knm-yearplanner__event {
    position: absolute;
    height: 20px;
    border-radius: 3px;
    padding: 0 4px;
    font-size: 0.6875rem;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    color: #fff;
    background-color: var(--knm-primary, #0d6efd);
    z-index: 1;
    margin-top: 2px;
}
.knm-yearplanner__event:hover {
    opacity: 0.85;
    z-index: 3;
}
.knm-yearplanner__event-title {
    pointer-events: none;
}

/* Responsive: on mobile, show as scrollable horizontal */
@media (max-width: 767.98px) {
    .knm-yearplanner {
        font-size: 0.625rem;
        --knm-yearplanner-label-width: 40px;
    }
    .knm-yearplanner__day-header {
        font-size: 0.5rem;
    }
    .knm-yearplanner__event {
        font-size: 0.5625rem;
        height: 16px;
        line-height: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CodeBlock — Syntax highlighted code display
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-code-block {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

/* Remove margin/radius when inside a card footer */
.card-footer .knm-code-block {
    margin-bottom: 0;
    border-radius: 0;
}

.knm-code-block__title {
    background: var(--bs-dark, #212529);
    color: var(--bs-light, #f8f9fa);
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.knm-code-block pre {
    margin: 0 !important;
    border-radius: 0 !important;
}

.knm-code-block pre code {
    font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
}

.knm-code-block__copy {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 5;
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 4px;
    color: rgba(255,255,255,0.7);
    padding: 4px 8px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s, color 0.2s;
}

.knm-code-block__copy:hover {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

/* If there's a title, push copy button to the right of the title bar */
.knm-code-block__title ~ .knm-code-block__copy { display: none; }
.knm-code-block:has(.knm-code-block__title) .knm-code-block__copy {
    top: auto;
    top: 0.4rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KNMCodePreview — Live preview + auto-captured source code
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-code-preview {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.knm-code-preview__title {
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.knm-code-preview__preview {
    padding: 1.5rem;
    position: relative;
}

.knm-code-preview__toggle {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.375rem 1rem;
    border: none;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.15s;
}

.knm-code-preview__toggle:hover {
    background: var(--bs-secondary-bg, #e9ecef);
}

.knm-code-preview__code {
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.knm-code-preview__code .knm-code-block {
    border: none;
    border-radius: 0;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ComponentExample — Live preview + code card
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-example {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.knm-example__header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.knm-example__title {
    font-weight: 600;
    font-size: 0.9rem;
}

.knm-example__desc {
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #6c757d);
}

.knm-example__preview {
    padding: 1.5rem;
    position: relative;
    min-height: 3rem;
}

.knm-example__toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 0.25rem 0.5rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.knm-example__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    color: var(--knm-primary, #0d6efd);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: background 0.2s;
}

.knm-example__btn:hover {
    background: rgba(var(--knm-primary-rgb, 13, 110, 253), 0.1);
}

.knm-example .knm-code-block {
    margin-bottom: 0;
    border-radius: 0;
}

[data-bs-theme="dark"] .knm-example {
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .knm-example__header,
[data-bs-theme="dark"] .knm-example__toolbar {
    background: var(--bs-tertiary-bg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAB — Floating Action Button
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --knm-fab-size-sm: 2.5rem;
    --knm-fab-size-md: 3.5rem;
    --knm-fab-size-lg: 4.5rem;
    --knm-fab-bg: var(--knm-primary, #0d6efd);
    --knm-fab-color: #fff;
    --knm-fab-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    --knm-fab-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.35);
    --knm-fab-action-size: 2.5rem;
    --knm-fab-gap: 0.75rem;
    --knm-fab-offset: 1.5rem;
    --knm-fab-icon-size-sm: 1rem;
    --knm-fab-icon-size-md: 1.35rem;
    --knm-fab-icon-size-lg: 1.75rem;
    --knm-fab-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --knm-fab-action-label-bg: var(--knm-surface, #fff);
    --knm-fab-action-label-color: var(--knm-text, #212529);
    --knm-fab-action-label-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

[data-bs-theme="dark"] {
    --knm-fab-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    --knm-fab-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.6);
    --knm-fab-action-label-bg: var(--knm-surface, #2b3035);
    --knm-fab-action-label-color: var(--knm-text, #dee2e6);
    --knm-fab-action-label-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Container — fixed positioning */
.knm-fab {
    position: fixed;
    z-index: 1050;
    display: flex;
    align-items: center;
    outline: none;
}

/* Contained mode — relative to parent instead of viewport */
.knm-fab--contained {
    position: relative;
    z-index: 10;
    inset: unset;
}

.knm-fab--top-left     { top: var(--knm-fab-offset); left: var(--knm-fab-offset); }
.knm-fab--top-right    { top: var(--knm-fab-offset); right: var(--knm-fab-offset); }
.knm-fab--bottom-left  { bottom: var(--knm-fab-offset); left: var(--knm-fab-offset); }
.knm-fab--bottom-right { bottom: var(--knm-fab-offset); right: var(--knm-fab-offset); }

/* Direction layout */
.knm-fab--dir-up    { flex-direction: column-reverse; align-items: center; }
.knm-fab--dir-down  { flex-direction: column; align-items: center; }
.knm-fab--dir-left  { flex-direction: row; align-items: center; }
.knm-fab--dir-right { flex-direction: row; align-items: center; }

/* Left: actions before button (use order to swap) */
.knm-fab--dir-left .knm-fab__actions { order: -1; }
.knm-fab--dir-left .knm-fab__btn    { order: 1; }

/* Main button */
.knm-fab__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    cursor: pointer;
    box-shadow: var(--knm-fab-shadow);
    transition: background-color var(--knm-fab-transition),
                box-shadow var(--knm-fab-transition),
                transform var(--knm-fab-transition);
    color: var(--knm-fab-color);
    font-weight: 500;
    white-space: nowrap;
    line-height: 1;
    flex-shrink: 0;
}

.knm-fab__btn:hover:not(:disabled) {
    box-shadow: var(--knm-fab-shadow-hover);
    transform: scale(1.05);
}

.knm-fab__btn:active:not(:disabled) {
    transform: scale(0.97);
}

.knm-fab__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.knm-fab__btn--open {
    box-shadow: var(--knm-fab-shadow-hover);
}

/* Focus ring for keyboard accessibility */
.knm-fab__btn:focus-visible {
    outline: 2px solid var(--knm-primary, #0d6efd);
    outline-offset: 3px;
}

.knm-fab-action__btn:focus-visible {
    outline: 2px solid var(--knm-primary, #0d6efd);
    outline-offset: 2px;
}

.knm-fab-action__btn:active:not(:disabled) {
    transform: scale(0.95);
}

/* Sizes */
.knm-fab__btn--sm {
    width: var(--knm-fab-size-sm);
    height: var(--knm-fab-size-sm);
    font-size: var(--knm-fab-icon-size-sm);
}

.knm-fab__btn--md {
    width: var(--knm-fab-size-md);
    height: var(--knm-fab-size-md);
    font-size: var(--knm-fab-icon-size-md);
}

.knm-fab__btn--lg {
    width: var(--knm-fab-size-lg);
    height: var(--knm-fab-size-lg);
    font-size: var(--knm-fab-icon-size-lg);
}

/* Pill shape: auto width for label */
.knm-fab__btn--pill.knm-fab__btn--sm { min-width: var(--knm-fab-size-sm); width: auto; padding: 0 1rem; }
.knm-fab__btn--pill.knm-fab__btn--md { min-width: var(--knm-fab-size-md); width: auto; padding: 0 1.25rem; }
.knm-fab__btn--pill.knm-fab__btn--lg { min-width: var(--knm-fab-size-lg); width: auto; padding: 0 1.5rem; }

/* Shapes */
.knm-fab__btn--round { border-radius: 50%; }
.knm-fab__btn--square { border-radius: 0.5rem; }
.knm-fab__btn--pill { border-radius: 999px; }

/* Icon rotation when open */
.knm-fab__icon {
    transition: transform var(--knm-fab-transition);
    display: inline-flex;
}

.knm-fab__icon--open {
    transform: rotate(45deg);
}

/* Label inside main button */
.knm-fab__label {
    font-size: 0.875rem;
}

/* Color variants */
.knm-fab__btn--primary   { background-color: var(--knm-primary, #0d6efd); color: #fff; }
.knm-fab__btn--secondary { background-color: var(--knm-secondary, #6c757d); color: #fff; }
.knm-fab__btn--success   { background-color: var(--knm-success, #198754); color: #fff; }
.knm-fab__btn--danger    { background-color: var(--knm-danger, #dc3545); color: #fff; }
.knm-fab__btn--warning   { background-color: var(--knm-warning, #ffc107); color: #212529; }
.knm-fab__btn--info      { background-color: var(--knm-info, #0dcaf0); color: #212529; }
.knm-fab__btn--light     { background-color: var(--knm-light, #f8f9fa); color: #212529; }
.knm-fab__btn--dark      { background-color: var(--knm-dark, #212529); color: #fff; }

.knm-fab__btn--outline-primary   { background-color: transparent; border: 2px solid var(--knm-primary, #0d6efd); color: var(--knm-primary, #0d6efd); }
.knm-fab__btn--outline-secondary { background-color: transparent; border: 2px solid var(--knm-secondary, #6c757d); color: var(--knm-secondary, #6c757d); }
.knm-fab__btn--outline-success   { background-color: transparent; border: 2px solid var(--knm-success, #198754); color: var(--knm-success, #198754); }
.knm-fab__btn--outline-danger    { background-color: transparent; border: 2px solid var(--knm-danger, #dc3545); color: var(--knm-danger, #dc3545); }
.knm-fab__btn--outline-warning   { background-color: transparent; border: 2px solid var(--knm-warning, #ffc107); color: var(--knm-warning, #ffc107); }
.knm-fab__btn--outline-info      { background-color: transparent; border: 2px solid var(--knm-info, #0dcaf0); color: var(--knm-info, #0dcaf0); }
.knm-fab__btn--outline-light     { background-color: transparent; border: 2px solid var(--knm-light, #f8f9fa); color: var(--knm-light, #f8f9fa); }
.knm-fab__btn--outline-dark      { background-color: transparent; border: 2px solid var(--knm-dark, #212529); color: var(--knm-dark, #212529); }

/* Backdrop for click-outside */
.knm-fab__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1049;
    background: transparent;
}

/* Speed dial actions container */
.knm-fab__actions {
    display: flex;
    gap: var(--knm-fab-gap);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--knm-fab-transition);
}

.knm-fab__actions--open {
    pointer-events: auto;
    opacity: 1;
}

/* Direction-specific layout for actions */
.knm-fab--dir-up .knm-fab__actions    { flex-direction: column; }
.knm-fab--dir-down .knm-fab__actions  { flex-direction: column; }

/* Horizontal directions: flex-based, actions slide naturally beside the button */
.knm-fab--dir-left .knm-fab__actions,
.knm-fab--dir-right .knm-fab__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.knm-fab--dir-left .knm-fab__actions  { margin-right: var(--knm-fab-gap); }
.knm-fab--dir-right .knm-fab__actions { margin-left: var(--knm-fab-gap); }

/* Individual action item */
.knm-fab-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity var(--knm-fab-transition), transform var(--knm-fab-transition);
}

/* Direction-specific transforms for closed state */
.knm-fab--dir-up .knm-fab-action    { transform: scale(0.4) translateY(1rem); }
.knm-fab--dir-down .knm-fab-action  { transform: scale(0.4) translateY(-1rem); }
.knm-fab--dir-left .knm-fab-action  { transform: scale(0.4) translateX(2rem); }
.knm-fab--dir-right .knm-fab-action { transform: scale(0.4) translateX(1rem); }

/* Open state for actions */
.knm-fab__actions--open .knm-fab-action {
    opacity: 1;
    transform: scale(1) translate(0);
}

/* Staggered animation delays */
.knm-fab__actions--open .knm-fab-action:nth-child(1) { transition-delay: 0.03s; }
.knm-fab__actions--open .knm-fab-action:nth-child(2) { transition-delay: 0.06s; }
.knm-fab__actions--open .knm-fab-action:nth-child(3) { transition-delay: 0.09s; }
.knm-fab__actions--open .knm-fab-action:nth-child(4) { transition-delay: 0.12s; }
.knm-fab__actions--open .knm-fab-action:nth-child(5) { transition-delay: 0.15s; }
.knm-fab__actions--open .knm-fab-action:nth-child(6) { transition-delay: 0.18s; }

/* Vertical direction: label to the side */
.knm-fab--dir-up .knm-fab-action,
.knm-fab--dir-down .knm-fab-action {
    flex-direction: row;
}

/* Horizontal direction: label above/below */
.knm-fab--dir-left .knm-fab-action,
.knm-fab--dir-right .knm-fab-action {
    flex-direction: column;
}

/* Position-aware label placement — only for vertical (Up/Down) directions */
.knm-fab--dir-up.knm-fab--bottom-right .knm-fab-action,
.knm-fab--dir-up.knm-fab--top-right .knm-fab-action,
.knm-fab--dir-down.knm-fab--bottom-right .knm-fab-action,
.knm-fab--dir-down.knm-fab--top-right .knm-fab-action {
    flex-direction: row-reverse;
}

/* Horizontal directions: label always below icon */
.knm-fab--dir-left .knm-fab-action,
.knm-fab--dir-right .knm-fab-action {
    flex-direction: column !important;
    text-align: center;
}

/* Radial direction — actions in a quarter-arc around the FAB */
.knm-fab--dir-radial { position: fixed; }
.knm-fab--dir-radial .knm-fab__actions {
    position: absolute;
    flex-direction: initial;
    gap: 0;
    width: 0;
    height: 0;
}
.knm-fab--dir-radial .knm-fab-action {
    position: absolute;
    transform: scale(0) !important;
}
.knm-fab--dir-radial .knm-fab__actions--open .knm-fab-action {
    transform: scale(1) !important;
}
/* Radial positions based on viewport corner — quarter arc */
/* Quarter-arc positions: ~90° spread, 5rem radius for clear separation */
.knm-fab--dir-radial.knm-fab--bottom-right .knm-fab-action:nth-child(1) { top: -7rem;   left: 0; }
.knm-fab--dir-radial.knm-fab--bottom-right .knm-fab-action:nth-child(2) { top: -5.5rem; left: -5rem; }
.knm-fab--dir-radial.knm-fab--bottom-right .knm-fab-action:nth-child(3) { top: -2.5rem; left: -7rem; }
.knm-fab--dir-radial.knm-fab--bottom-right .knm-fab-action:nth-child(4) { top: 0.5rem;  left: -7.5rem; }

.knm-fab--dir-radial.knm-fab--bottom-left .knm-fab-action:nth-child(1) { top: -7rem;   right: 0; }
.knm-fab--dir-radial.knm-fab--bottom-left .knm-fab-action:nth-child(2) { top: -5.5rem; right: -5rem; }
.knm-fab--dir-radial.knm-fab--bottom-left .knm-fab-action:nth-child(3) { top: -2.5rem; right: -7rem; }
.knm-fab--dir-radial.knm-fab--bottom-left .knm-fab-action:nth-child(4) { top: 0.5rem;  right: -7.5rem; }

.knm-fab--dir-radial.knm-fab--top-right .knm-fab-action:nth-child(1) { bottom: -7rem;   left: 0; }
.knm-fab--dir-radial.knm-fab--top-right .knm-fab-action:nth-child(2) { bottom: -5.5rem; left: -5rem; }
.knm-fab--dir-radial.knm-fab--top-right .knm-fab-action:nth-child(3) { bottom: -2.5rem; left: -7rem; }
.knm-fab--dir-radial.knm-fab--top-right .knm-fab-action:nth-child(4) { bottom: 0.5rem;  left: -7.5rem; }

.knm-fab--dir-radial.knm-fab--top-left .knm-fab-action:nth-child(1) { bottom: -7rem;   right: 0; }
.knm-fab--dir-radial.knm-fab--top-left .knm-fab-action:nth-child(2) { bottom: -5.5rem; right: -5rem; }
.knm-fab--dir-radial.knm-fab--top-left .knm-fab-action:nth-child(3) { bottom: -2.5rem; right: -7rem; }
.knm-fab--dir-radial.knm-fab--top-left .knm-fab-action:nth-child(4) { bottom: 0.5rem;  right: -7.5rem; }

/* Action button */
.knm-fab-action__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--knm-fab-action-size);
    height: var(--knm-fab-action-size);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: var(--knm-fab-shadow);
    transition: background-color var(--knm-fab-transition),
                box-shadow var(--knm-fab-transition),
                transform var(--knm-fab-transition);
    font-size: 1rem;
    color: #fff;
    flex-shrink: 0;
}

.knm-fab-action__btn:hover:not(:disabled) {
    box-shadow: var(--knm-fab-shadow-hover);
    transform: scale(1.1);
}

.knm-fab-action__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Action variant colors */
.knm-fab-action__btn--primary   { background-color: var(--knm-primary, #0d6efd); }
.knm-fab-action__btn--secondary { background-color: var(--knm-secondary, #6c757d); }
.knm-fab-action__btn--success   { background-color: var(--knm-success, #198754); }
.knm-fab-action__btn--danger    { background-color: var(--knm-danger, #dc3545); }
.knm-fab-action__btn--warning   { background-color: var(--knm-warning, #ffc107); color: #212529; }
.knm-fab-action__btn--info      { background-color: var(--knm-info, #0dcaf0); color: #212529; }
.knm-fab-action__btn--light     { background-color: var(--knm-light, #f8f9fa); color: #212529; }
.knm-fab-action__btn--dark      { background-color: var(--knm-dark, #212529); }

/* Action label tooltip */
.knm-fab-action__label {
    background: var(--knm-fab-action-label-bg);
    color: var(--knm-fab-action-label-color);
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: var(--knm-fab-action-label-shadow);
    pointer-events: none;
    line-height: 1.4;
}

.knm-fab-action--disabled {
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COLOR PICKER
   ═══════════════════════════════════════════════════════════════════════════ */

/* Compact mode (swatch button + dropdown) */
.knm-colorpicker-compact {
    position: relative;
}

.knm-cp-horizontal {
    display: block;
    width: 100%;
}

.knm-colorpicker-compact__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    background: var(--bs-body-bg, #fff);
    cursor: pointer;
    font-size: 0.875rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-height: 2.375rem;
}

.knm-colorpicker-compact__trigger:hover:not(:disabled) {
    border-color: var(--knm-primary, #0d6efd);
}

.knm-colorpicker-compact__trigger:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    background: var(--bs-secondary-bg, #e9ecef);
}

.knm-colorpicker-compact__swatch {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--bs-border-radius, 0.25rem);
    border: 1px solid rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.knm-colorpicker-compact__value {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--bs-body-color, #212529);
}

.knm-colorpicker-compact__caret {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.7rem;
    margin-left: auto;
    transition: transform 0.2s ease;
}

/* Rotate caret when the dropdown is open (matches KNMSelect behavior) */
.knm-colorpicker-compact--open .knm-colorpicker-compact__caret {
    transform: rotate(180deg);
}

/* Rounded layout: pill-shaped trigger */
.knm-cp-rounded .knm-colorpicker-compact__trigger.btn {
    border-radius: 50rem;
}

.knm-cp-rounded .knm-colorpicker-compact__swatch {
    border-radius: 50%;
}

.knm-colorpicker-compact__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1049;
}

.knm-colorpicker-compact__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    margin-top: 0.25rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: var(--bs-body-bg, #fff);
    padding: 0.75rem;
    /* Flex column so the internal picker content (preview / spectrum /
       swatches / hex-input) gets proper vertical spacing instead of
       collapsing into each other. */
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 220px;
    animation: knm-dtp-fadein 0.15s ease-out;
}

/* Viewport-aware flip: when there is not enough space below the trigger,
   open the dropdown upwards instead of downwards. */
.knm-colorpicker-compact--dropup .knm-colorpicker-compact__dropdown {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 0.25rem;
}

.knm-colorpicker {
    display: inline-flex;
    flex-direction: column;
    gap: var(--knm-colorpicker-gap, 0.75rem);
    padding: var(--knm-colorpicker-padding, 0.75rem);
    background-color: var(--knm-colorpicker-bg, var(--bs-body-bg, #fff));
    border: 1px solid var(--knm-colorpicker-border-color, var(--bs-border-color, #dee2e6));
    border-radius: var(--knm-colorpicker-radius, var(--bs-border-radius, 0.375rem));
}

/* Preview swatch */
.knm-colorpicker__preview {
    width: 100%;
    height: var(--knm-colorpicker-preview-height, 2.5rem);
    border-radius: var(--knm-colorpicker-radius, var(--bs-border-radius, 0.375rem));
    border: 1px solid var(--knm-colorpicker-border-color, var(--bs-border-color, #dee2e6));
    transition: background-color 0.15s ease;
}

/* Swatches grid */
.knm-colorpicker__swatches {
    display: grid;
    grid-template-columns: repeat(var(--knm-colorpicker-columns, 6), 1fr);
    gap: var(--knm-colorpicker-swatch-gap, 0.375rem);
}

.knm-colorpicker__swatch {
    width: var(--knm-colorpicker-swatch-size, 2rem);
    height: var(--knm-colorpicker-swatch-size, 2rem);
    border: 2px solid transparent;
    border-radius: var(--knm-colorpicker-swatch-radius, 0.25rem);
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.knm-colorpicker__swatch:hover {
    transform: scale(1.15);
    border-color: var(--knm-colorpicker-swatch-hover-border, var(--bs-secondary-color, #6c757d));
}

.knm-colorpicker__swatch--selected {
    border-color: var(--knm-colorpicker-selected-border, var(--knm-primary, #0d6efd));
    box-shadow: 0 0 0 2px var(--knm-colorpicker-selected-shadow, rgba(13, 110, 253, 0.25));
    transform: scale(1.1);
}

/* Hex input row */
.knm-colorpicker__hex-input {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.knm-colorpicker__hex-prefix {
    font-weight: 600;
    color: var(--knm-colorpicker-hex-color, var(--bs-secondary-color, #6c757d));
    font-family: var(--bs-font-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
}

.knm-colorpicker__hex-field {
    font-family: var(--bs-font-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    max-width: 6rem;
    letter-spacing: 0.05em;
}

/* Spectrum picker */
.knm-colorpicker__spectrum {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.knm-colorpicker__sb-area {
    position: relative;
    width: 100%;
    height: 150px;
    border-radius: var(--knm-colorpicker-swatch-radius, 0.25rem);
    cursor: crosshair;
    overflow: hidden;
}

.knm-colorpicker__sb-white {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #fff, transparent);
}

.knm-colorpicker__sb-black {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #000, transparent);
}

.knm-colorpicker__sb-cursor {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.knm-colorpicker__hue-slider {
    width: 100%;
    height: 12px;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 6px;
    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    outline: none;
    cursor: pointer;
}

.knm-colorpicker__hue-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--knm-colorpicker-slider-thumb-bg);
    border: 2px solid var(--knm-colorpicker-slider-thumb-border);
    box-shadow: 0 1px 3px var(--knm-colorpicker-slider-thumb-shadow);
    cursor: pointer;
}

.knm-colorpicker__hue-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--knm-colorpicker-slider-thumb-bg);
    border: 2px solid var(--knm-colorpicker-slider-thumb-border);
    box-shadow: 0 1px 3px var(--knm-colorpicker-slider-thumb-shadow);
    cursor: pointer;
}

/* Alpha slider */
.knm-colorpicker__alpha-track {
    position: relative;
    border-radius: 6px;
    background-image: linear-gradient(45deg, var(--knm-colorpicker-checkerboard-color) 25%, transparent 25%),
                      linear-gradient(-45deg, var(--knm-colorpicker-checkerboard-color) 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, var(--knm-colorpicker-checkerboard-color) 75%),
                      linear-gradient(-45deg, transparent 75%, var(--knm-colorpicker-checkerboard-color) 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}

.knm-colorpicker__alpha-slider {
    width: 100%;
    height: 12px;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 6px;
    background: linear-gradient(to right, transparent, var(--knm-alpha-color, #000));
    outline: none;
    cursor: pointer;
    position: relative;
}

.knm-colorpicker__alpha-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--knm-colorpicker-slider-thumb-bg);
    border: 2px solid var(--knm-colorpicker-slider-thumb-border);
    box-shadow: 0 1px 3px var(--knm-colorpicker-slider-thumb-shadow);
    cursor: pointer;
}

.knm-colorpicker__alpha-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--knm-colorpicker-slider-thumb-bg);
    border: 2px solid var(--knm-colorpicker-slider-thumb-border);
    box-shadow: 0 1px 3px var(--knm-colorpicker-slider-thumb-shadow);
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DRAWER
   ═══════════════════════════════════════════════════════════════════════════ */

/* Drawer panel (Overlay / Mini) */
.knm-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: var(--knm-drawer-z-index, 1045);
    background-color: var(--knm-drawer-bg, var(--bs-body-bg, #fff));
    border-right: 1px solid var(--knm-drawer-border-color, var(--bs-border-color, #dee2e6));
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform var(--knm-drawer-transition, 0.3s ease),
                width var(--knm-drawer-transition, 0.3s ease);
    box-shadow: var(--knm-drawer-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
}

/* Position: left */
.knm-drawer--left {
    left: 0;
    right: auto;
}

.knm-drawer--left.knm-drawer--overlay:not(.knm-drawer--open) {
    transform: translateX(-100%);
}

/* Position: right */
.knm-drawer--right {
    right: 0;
    left: auto;
    border-right: none;
    border-left: 1px solid var(--knm-drawer-border-color, var(--bs-border-color, #dee2e6));
}

.knm-drawer--right.knm-drawer--overlay:not(.knm-drawer--open) {
    transform: translateX(100%);
}

/* Open state (overlay) */
.knm-drawer--overlay.knm-drawer--open {
    transform: translateX(0);
}

/* Mini mode */
.knm-drawer--mini {
    transform: none !important;
}

/* Backdrop */
.knm-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--knm-drawer-z-index, 1045) - 1);
    background-color: var(--knm-drawer-backdrop-bg, rgba(0, 0, 0, 0.5));
    animation: knm-drawer-fade-in 0.2s ease;
}

@keyframes knm-drawer-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Push layout */
.knm-drawer-layout {
    display: flex;
    min-height: 100vh;
}

.knm-drawer-layout--right {
    flex-direction: row-reverse;
}

.knm-drawer-layout .knm-drawer {
    position: relative;
    z-index: auto;
    flex-shrink: 0;
    box-shadow: none;
    transition: width var(--knm-drawer-transition, 0.3s ease);
}

.knm-drawer-layout .knm-drawer--push:not(.knm-drawer--open) {
    width: 0 !important;
    overflow: hidden;
    border: none;
}

.knm-drawer-main {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MENU
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fade-in animation for dropdown menu */
.dropdown-menu.show {
    animation: knm-menu-fade-in 0.15s ease;
}

@keyframes knm-menu-fade-in {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TREE VIEW
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-treeview {
    font-size: var(--knm-tree-font-size, 0.875rem);
    color: var(--knm-tree-color, var(--bs-body-color, #212529));
    user-select: none;
}

.knm-treenode {
    line-height: 1.6;
}

.knm-treenode__row {
    display: flex;
    align-items: center;
    gap: var(--knm-tree-gap, 0.375rem);
    padding: var(--knm-tree-node-padding, 0.2rem 0.5rem);
    padding-left: calc(var(--knm-tree-depth, 0) * var(--knm-tree-indent, 1.25rem) + 0.5rem);
    border-radius: var(--knm-tree-radius, var(--bs-border-radius-sm, 0.25rem));
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.knm-treenode__row:hover {
    background-color: var(--knm-tree-hover-bg, var(--bs-tertiary-bg, #f8f9fa));
}

/* Selected state */
.knm-treenode--selected > .knm-treenode__row {
    background-color: var(--knm-tree-selected-bg, var(--bs-primary-bg-subtle, #cfe2ff));
    color: var(--knm-tree-selected-color, var(--bs-primary-text-emphasis, #052c65));
}

/* Disabled state */
.knm-treenode--disabled > .knm-treenode__row {
    opacity: var(--knm-tree-disabled-opacity, 0.5);
    cursor: not-allowed;
    pointer-events: none;
}

/* Expand/collapse toggle */
.knm-treenode__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--knm-tree-toggle-color, var(--bs-secondary-color, #6c757d));
    cursor: pointer;
    transition: transform var(--knm-tree-transition, 0.2s ease);
    flex-shrink: 0;
}

.knm-treenode__toggle:hover {
    color: var(--knm-tree-color, var(--bs-body-color, #212529));
}

.knm-treenode__toggle--expanded {
    transform: rotate(90deg);
}

.knm-treenode__toggle-spacer {
    display: inline-block;
    width: 1.25rem;
    flex-shrink: 0;
}

/* Checkbox */
.knm-treenode__checkbox {
    flex-shrink: 0;
    cursor: pointer;
}

/* Icon */
.knm-treenode__icon {
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--knm-tree-icon-color, var(--bs-secondary-color, #6c757d));
}

/* Text */
.knm-treenode__text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Loading spinner */
.knm-treenode__spinner {
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    color: var(--knm-tree-spinner-color, var(--knm-primary, #0d6efd));
}

/* Action buttons container — visible on hover */
.knm-treenode__actions {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--knm-tree-transition, 0.2s ease);
}

.knm-treenode__row:hover > .knm-treenode__actions {
    opacity: 1;
}

/* Individual action button */
.knm-treenode__action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--knm-tree-action-size, 1.5rem);
    height: var(--knm-tree-action-size, 1.5rem);
    padding: 0;
    border: none;
    border-radius: var(--knm-tree-radius, var(--bs-border-radius-sm, 0.25rem));
    background: transparent;
    color: var(--knm-tree-action-color, var(--bs-secondary-color, #6c757d));
    cursor: pointer;
    font-size: 0.8125rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.knm-treenode__action-btn:hover {
    background-color: var(--knm-tree-action-hover-bg, var(--bs-tertiary-bg, #f8f9fa));
    color: var(--knm-tree-action-hover-color, var(--bs-body-color, #212529));
}

.knm-treenode__action-btn--edit:hover {
    color: var(--knm-tree-action-edit-color, var(--knm-primary, #0d6efd));
}

.knm-treenode__action-btn--delete:hover {
    color: var(--knm-tree-action-delete-color, var(--bs-danger, #dc3545));
}

/* Children container */
.knm-treenode__children {
    /* Children indent is handled by --knm-tree-depth on each row */
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCHEDULER — Print / PDF styles
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
    /* Hide toolbar and navigation */
    .knm-scheduler__toolbar {
        display: none !important;
    }

    /* Remove scrollbars and overflow restrictions */
    .knm-scheduler,
    .knm-scheduler__body,
    .knm-timeline-view,
    .knm-week-view__grid,
    .knm-day-view__grid,
    .knm-month-view__body {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    /* Force white background for readability */
    .knm-scheduler,
    .knm-scheduler__body,
    .knm-day-view,
    .knm-week-view,
    .knm-month-view,
    .knm-agenda-view,
    .knm-timeline-view {
        background: #fff !important;
        color: #000 !important;
    }

    /* Show all events — remove "+N more" collapse */
    .knm-month-view__more {
        display: none !important;
    }

    .knm-month-view__cell {
        max-height: none !important;
        overflow: visible !important;
    }

    /* Events should break at page boundaries */
    .knm-scheduler-event {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .knm-month-view__week,
    .knm-agenda-view__day-group,
    .knm-timeline-view__row {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Remove interactive states */
    .knm-scheduler-event:hover {
        box-shadow: none !important;
        transform: none !important;
    }

    /* Hide now indicator in print */
    .knm-day-view__now,
    .knm-week-view__now,
    .knm-timeline-view__now {
        display: none !important;
    }

    /* Hide event editor backdrop */
    /* Ensure borders print */
    .knm-scheduler {
        border: 1px solid #dee2e6 !important;
    }
}

/* ─── KNMGauge ────────────────────────────────────────────────────────────── */

:root {
    --knm-gauge-color: var(--knm-primary, #0d6efd);
    --knm-gauge-track-color: var(--bs-secondary-bg, #e9ecef);
    --knm-gauge-text-color: var(--bs-body-color, #212529);
}

[data-bs-theme="dark"] {
    --knm-gauge-track-color: var(--bs-secondary-bg, #343a40);
    --knm-gauge-text-color: var(--bs-body-color, #dee2e6);
}

.knm-gauge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.knm-gauge__svg {
    overflow: visible;
}

.knm-gauge__track {
    stroke: var(--knm-gauge-track-color);
}

.knm-gauge__fill {
    stroke: var(--knm-gauge-color);
    transition: stroke-dashoffset 0.8s ease;
}

.knm-gauge__value {
    fill: var(--knm-gauge-text-color);
    font-size: 1.5rem;
    font-weight: 700;
    font-family: inherit;
}

.knm-gauge__label {
    color: var(--knm-gauge-text-color);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
    margin-top: 0.25rem;
    padding: 0.25rem 0.5rem;
    opacity: 0.8;
}

.knm-gauge__min,
.knm-gauge__max {
    fill: var(--knm-gauge-text-color);
    font-size: 0.75rem;
    opacity: 0.6;
    font-family: inherit;
    padding: 0 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KNMSplitter — Resizable split-pane layout
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --knm-splitter-gutter-color: var(--bs-border-color, #dee2e6);
    --knm-splitter-gutter-hover-color: var(--knm-primary, #0d6efd);
    --knm-splitter-gutter-size: 8px;
    --knm-splitter-gutter-handle-color: var(--bs-secondary-color, #6c757d);
    --knm-splitter-gutter-handle-hover-color: #fff;
    --knm-splitter-pane-bg: transparent;
    --knm-splitter-pane-color: var(--bs-body-color, #212529);
}

.knm-splitter {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    user-select: none;
}

.knm-splitter--horizontal {
    flex-direction: row;
}

.knm-splitter--vertical {
    flex-direction: column;
}

/* ─── Panes ──────────────────────────────────────────────────────────────── */

.knm-splitter__pane {
    overflow: auto;
    min-width: 0;
    color: var(--knm-splitter-pane-color);
    min-height: 0;
    background: var(--knm-splitter-pane-bg);
    transition: flex-basis 0.15s ease;
}

.knm-splitter--dragging .knm-splitter__pane {
    transition: none;
    pointer-events: none;
}

.knm-splitter--collapsed .knm-splitter__pane:first-child {
    flex-basis: 0 !important;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}

/* ─── Gutter ─────────────────────────────────────────────────────────────── */

.knm-splitter__gutter {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--knm-splitter-gutter-color);
    transition: background-color 0.15s ease;
    z-index: 1;
    touch-action: none;
}

.knm-splitter--horizontal > .knm-splitter__gutter {
    width: var(--knm-splitter-gutter-size);
    cursor: col-resize;
}

.knm-splitter--vertical > .knm-splitter__gutter {
    height: var(--knm-splitter-gutter-size);
    cursor: row-resize;
}

.knm-splitter__gutter:hover,
.knm-splitter__gutter:focus-visible {
    background: var(--knm-splitter-gutter-hover-color);
    outline: none;
}

.knm-splitter__gutter--dragging,
.knm-splitter__gutter--dragging:hover {
    background: var(--knm-splitter-gutter-hover-color);
    opacity: 0.85;
}

/* ─── Gutter handle (3 dots/lines) ───────────────────────────────────────── */

.knm-splitter__gutter-handle {
    display: flex;
    gap: 2px;
}

.knm-splitter--horizontal .knm-splitter__gutter-handle {
    flex-direction: column;
    align-items: center;
}

.knm-splitter--vertical .knm-splitter__gutter-handle {
    flex-direction: row;
    align-items: center;
}

.knm-splitter__gutter-handle > span {
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--knm-splitter-gutter-handle-color);
    transition: background-color 0.15s ease;
}

.knm-splitter__gutter:hover .knm-splitter__gutter-handle > span,
.knm-splitter__gutter:focus-visible .knm-splitter__gutter-handle > span {
    background: var(--knm-splitter-gutter-handle-hover-color);
}

.knm-splitter__gutter--dragging .knm-splitter__gutter-handle > span {
    background: var(--knm-splitter-gutter-handle-hover-color);
}

/* ─── Dark mode ──────────────────────────────────────────────────────────── */

[data-bs-theme="dark"] {
    --knm-splitter-gutter-color: var(--bs-border-color, #495057);
    --knm-splitter-gutter-hover-color: var(--knm-primary, #0d6efd);
    --knm-splitter-gutter-handle-color: var(--bs-secondary-color, #adb5bd);
    --knm-splitter-pane-bg: transparent;
}

[data-bs-theme="dark"] .knm-splitter__pane {
    color: var(--bs-body-color);
}

/* ═══════════════════════════════════════════════════════════════════
   KNMRichTextEditor
   ═══════════════════════════════════════════════════════════════════ */
:root {
    --knm-rte-border-color: #dee2e6;
    --knm-rte-bg: #fff;
    --knm-rte-toolbar-bg: #f8f9fa;
    --knm-rte-btn-hover-bg: #e9ecef;
    --knm-rte-btn-active-bg: #dee2e6;
    --knm-rte-btn-color: #495057;
    --knm-rte-content-color: #212529;
    --knm-rte-placeholder-color: #adb5bd;
    --knm-rte-focus-border-color: var(--knm-primary, #0d6efd);
}

[data-bs-theme="dark"] {
    --knm-rte-border-color: #495057;
    --knm-rte-bg: #212529;
    --knm-rte-toolbar-bg: #2b3035;
    --knm-rte-btn-hover-bg: #3a4046;
    --knm-rte-btn-active-bg: #495057;
    --knm-rte-btn-color: #dee2e6;
    --knm-rte-content-color: #f8f9fa;
    --knm-rte-placeholder-color: #6c757d;
}

.knm-rte {
    border: 1px solid var(--knm-rte-border-color);
    border-radius: 0.375rem;
    overflow: hidden;
    background: var(--knm-rte-bg);
    transition: border-color 0.15s ease;
}

.knm-rte--focused {
    border-color: var(--knm-rte-focus-border-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--knm-primary-rgb, 13, 110, 253), 0.15);
}

.knm-rte__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.125rem;
    padding: 0.375rem 0.5rem;
    background: var(--knm-rte-toolbar-bg);
    border-bottom: 1px solid var(--knm-rte-border-color);
    align-items: center;
}

.knm-rte__toolbar-group {
    display: flex;
    gap: 0.125rem;
    padding-right: 0.375rem;
    border-right: 1px solid var(--knm-rte-border-color);
}

.knm-rte__toolbar-group:last-child,
.knm-rte__toolbar-group--end {
    border-right: none;
    margin-left: auto;
}

.knm-rte__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 0.25rem;
    background: transparent;
    color: var(--knm-rte-btn-color);
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.knm-rte__btn:hover {
    background: var(--knm-rte-btn-hover-bg);
}

.knm-rte__btn--active {
    background: var(--knm-rte-btn-active-bg);
    color: var(--knm-rte-focus-border-color);
}

/* Table picker grid popover */
.knm-rte__table-picker {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: var(--knm-rte-bg);
    border: 1px solid var(--knm-rte-border-color);
    border-radius: var(--knm-rte-border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0.5rem;
}
.knm-rte__table-grid {
    display: grid;
    grid-template-columns: repeat(8, 20px);
    gap: 2px;
}
.knm-rte__table-cell {
    width: 20px;
    height: 20px;
    border: 1px solid var(--knm-rte-border-color);
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.1s;
}
.knm-rte__table-cell:hover,
.knm-rte__table-cell--active {
    background: var(--knm-primary, #0d6efd);
    border-color: var(--knm-primary, #0d6efd);
}
.knm-rte__table-label {
    text-align: center;
    font-size: 0.75rem;
    color: var(--knm-muted-color, #6c757d);
    margin-top: 0.25rem;
}

.knm-rte__content {
    padding: 0.75rem 1rem;
    color: var(--knm-rte-content-color);
    line-height: 1.6;
    outline: none;
    overflow-y: auto;
    word-wrap: break-word;
}

.knm-rte__content:empty::before {
    content: attr(data-placeholder);
    color: var(--knm-rte-placeholder-color);
    pointer-events: none;
}

.knm-rte__content--readonly {
    cursor: default;
    opacity: 0.7;
}

.knm-rte__content h1,
.knm-rte__content h2,
.knm-rte__content h3 { margin: 0.5em 0 0.25em; }

.knm-rte__content blockquote {
    border-left: 4px solid var(--knm-rte-border-color);
    margin: 0.5em 0;
    padding: 0.5em 1em;
    color: var(--knm-rte-placeholder-color);
}

.knm-rte__content pre {
    background: var(--knm-rte-toolbar-bg);
    border-radius: 0.25rem;
    padding: 0.75em 1em;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.875em;
    overflow-x: auto;
}

.knm-rte__content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.25rem;
}

.knm-rte__content a {
    color: var(--knm-rte-focus-border-color);
}

.knm-rte__source {
    width: 100%;
    border: none;
    padding: 0.75rem 1rem;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.875rem;
    color: var(--knm-rte-content-color);
    background: var(--knm-rte-bg);
    resize: vertical;
    outline: none;
}

@media (max-width: 576px) {
    .knm-rte__toolbar { gap: 0.0625rem; padding: 0.25rem; }
    .knm-rte__btn { width: 1.75rem; height: 1.75rem; font-size: 0.75rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KNMCarousel — Bootstrap .carousel overrides for translateX track layout
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --knm-carousel-arrow-bg: rgba(0, 0, 0, 0.5);
    --knm-carousel-arrow-color: #fff;
    --knm-carousel-arrow-size: 2.5rem;
    --knm-carousel-arrow-hover-bg: rgba(0, 0, 0, 0.75);
    --knm-carousel-indicator-color: rgba(255, 255, 255, 0.5);
    --knm-carousel-indicator-active-color: #fff;
    --knm-carousel-indicator-size: 0.625rem;
    --knm-carousel-caption-bg: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
    --knm-carousel-caption-color: #fff;
    --knm-carousel-transition-duration: 0.5s;
    --knm-carousel-transition-timing: ease;
}

/* ── Track override: flex layout for C#-managed translateX sliding ─────── */

.carousel .carousel-inner {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform var(--knm-carousel-transition-duration) var(--knm-carousel-transition-timing);
}

.carousel .carousel-item {
    display: block;
    flex: 0 0 100%;
    position: relative;
}

.carousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* ── No-transition mode (no Bootstrap equivalent) ──────────────────────── */

.knm-carousel-no-transition .carousel-inner {
    transition: none;
}

/* ── Fade mode ──────────────────────────────────────────────────────────── */

.carousel-fade .carousel-inner {
    position: relative;
    transform: none !important;
}

.carousel-fade .carousel-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--knm-carousel-transition-duration) var(--knm-carousel-transition-timing);
    pointer-events: none;
}

.carousel-fade .carousel-item.active {
    opacity: 1;
    position: relative;
    pointer-events: auto;
}

/* ── Caption override ──────────────────────────────────────────────────── */

.carousel .carousel-caption {
    background: var(--knm-carousel-caption-bg);
    color: var(--knm-carousel-caption-color);
    padding: 1.5rem 1rem 1rem;
}

.carousel .carousel-caption h5 {
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.carousel .carousel-caption p {
    margin: 0;
    font-size: 0.875rem;
    opacity: 0.9;
}

/* ── Arrow buttons (custom circular style) ─────────────────────────────── */

.carousel .carousel-control-prev,
.carousel .carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--knm-carousel-arrow-size);
    height: var(--knm-carousel-arrow-size);
    border: none;
    border-radius: 50%;
    background: var(--knm-carousel-arrow-bg);
    color: var(--knm-carousel-arrow-color);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    opacity: 0.8;
    padding: 0;
}

.carousel .carousel-control-prev:hover,
.carousel .carousel-control-next:hover {
    background: var(--knm-carousel-arrow-hover-bg);
    opacity: 1;
}

.carousel .carousel-control-prev:focus-visible,
.carousel .carousel-control-next:focus-visible {
    outline: 2px solid var(--knm-primary, #0d6efd);
    outline-offset: 2px;
}

.carousel .carousel-control-prev {
    left: 0.75rem;
}

.carousel .carousel-control-next {
    right: 0.75rem;
}

/* ── Indicators (custom dot style) ─────────────────────────────────────── */

.carousel .carousel-indicators {
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.25);
}

.carousel .carousel-indicators button {
    width: var(--knm-carousel-indicator-size);
    height: var(--knm-carousel-indicator-size);
    border: none;
    border-radius: 50%;
    background: var(--knm-carousel-indicator-color);
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s ease, transform 0.2s ease;
    text-indent: 0;
    opacity: 1;
}

.carousel .carousel-indicators button:hover {
    background: var(--knm-carousel-indicator-active-color);
    transform: scale(1.2);
}

.carousel .carousel-indicators button:focus-visible {
    outline: 2px solid var(--knm-primary, #0d6efd);
    outline-offset: 2px;
}

.carousel .carousel-indicators button.active {
    background: var(--knm-carousel-indicator-active-color);
    transform: scale(1.2);
}

/* ── Dark mode ──────────────────────────────────────────────────────────── */

[data-bs-theme="dark"] {
    --knm-carousel-arrow-bg: rgba(255, 255, 255, 0.15);
    --knm-carousel-arrow-color: #fff;
    --knm-carousel-arrow-hover-bg: rgba(255, 255, 255, 0.3);
    --knm-carousel-indicator-color: rgba(255, 255, 255, 0.35);
    --knm-carousel-indicator-active-color: #fff;
    --knm-carousel-caption-bg: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}

/* ═══════════════════════════════════════════════════════════════════════════
   KNMRating — Pure CSS rating with half-star support via overlapping icons
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --knm-rating-color: #ffc107;
    --knm-rating-empty-color: var(--bs-secondary-color, #d1d5db);
    --knm-rating-hover-color: #ffca2c;
    --knm-rating-gap: 2px;
    --knm-rating-transition: color 0.15s ease, transform 0.1s ease;
}

[data-bs-theme="dark"] {
    --knm-rating-color: #ffca2c;
    --knm-rating-empty-color: var(--bs-secondary-color, #6b7280);
    --knm-rating-hover-color: #ffd54f;
}

/* Container */
.knm-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--knm-rating-gap);
    line-height: 1;
    user-select: none;
}

.knm-rating:focus-visible {
    outline: 2px solid var(--knm-primary, #0d6efd);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Star wrapper — positioned relative so the fill overlay can stack on top */
.knm-rating__star {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--knm-rating-empty-color);
    transition: var(--knm-rating-transition);
}

/* Hover scale (interactive only) */
.knm-rating:not(.knm-rating--readonly) .knm-rating__star:hover {
    transform: scale(1.15);
}

/* Filled and half star — same color */
.knm-rating__star--filled,
.knm-rating__star--half {
    color: var(--knm-rating-color);
}

/* Filled overlay — sits absolutely on top of the empty icon */
.knm-rating__fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--knm-rating-color);
    overflow: hidden;
    pointer-events: none;
}

/* Half fill — clip to left 50% */
.knm-rating__fill--half {
    width: 50%;
}

/* Value display */
.knm-rating__value {
    margin-left: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--bs-body-color, #212529);
}

/* Size variants */
.knm-rating--sm .knm-rating__star {
    font-size: 1rem;
}

.knm-rating--sm .knm-rating__value {
    font-size: 0.8125rem;
}

.knm-rating--md .knm-rating__star {
    font-size: 1.5rem;
}

.knm-rating--md .knm-rating__value {
    font-size: 1rem;
}

.knm-rating--lg .knm-rating__star {
    font-size: 2rem;
}

.knm-rating--lg .knm-rating__value {
    font-size: 1.25rem;
}

/* Read-only mode */
.knm-rating--readonly .knm-rating__star {
    cursor: default;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   KNMToggle — Pure CSS toggle styles (inspired by csstoggles.github.io)
   All colors use --knm-toggle-* custom properties for easy override.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --knm-toggle-active: var(--knm-primary, #0d6efd);
    --knm-toggle-inactive: var(--bs-secondary-bg, #ccc);
    --knm-toggle-thumb: #fff;
    --knm-toggle-transition: 0.25s ease;
    --knm-toggle-disabled-opacity: 0.5;
}

/* ─── Base ─────────────────────────────────────────────────────────────── */

.knm-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
}

.knm-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.knm-toggle-label {
    position: relative;
    display: inline-block;
    cursor: pointer;
    transition: var(--knm-toggle-transition);
}

.knm-toggle-text {
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--bs-body-color, #212529);
}

.knm-toggle-disabled {
    opacity: var(--knm-toggle-disabled-opacity);
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIZES — track & thumb dimensions
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Small ─────────────────────────────────────────────────────────────── */
.knm-toggle-sm .knm-toggle-label { width: 32px; height: 18px; }
.knm-toggle-sm .knm-toggle-label::after { width: 14px; height: 14px; top: 2px; left: 2px; }
.knm-toggle-sm .knm-toggle-input:checked + .knm-toggle-label::after { transform: translateX(14px); }

/* ─── Medium (default) ──────────────────────────────────────────────────── */
.knm-toggle-md .knm-toggle-label { width: 48px; height: 26px; }
.knm-toggle-md .knm-toggle-label::after { width: 22px; height: 22px; top: 2px; left: 2px; }
.knm-toggle-md .knm-toggle-input:checked + .knm-toggle-label::after { transform: translateX(22px); }

/* ─── Large ─────────────────────────────────────────────────────────────── */
.knm-toggle-lg .knm-toggle-label { width: 64px; height: 34px; }
.knm-toggle-lg .knm-toggle-label::after { width: 30px; height: 30px; top: 2px; left: 2px; }
.knm-toggle-lg .knm-toggle-input:checked + .knm-toggle-label::after { transform: translateX(30px); }

/* ═══════════════════════════════════════════════════════════════════════════
   STYLE: Classic — Rounded pill, Google-style
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-toggle-classic .knm-toggle-label {
    background-color: var(--knm-toggle-inactive);
    border-radius: 999px;
}

.knm-toggle-classic .knm-toggle-label::after {
    content: "";
    position: absolute;
    background-color: var(--knm-toggle-thumb);
    border-radius: 50%;
    transition: var(--knm-toggle-transition);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.knm-toggle-classic .knm-toggle-input:checked + .knm-toggle-label {
    background-color: var(--knm-toggle-active);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STYLE: Neumorphic — Soft shadows, modern 3D
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-toggle-neumorphic .knm-toggle-label {
    background-color: var(--bs-body-bg, #e0e5ec);
    border-radius: 999px;
    box-shadow:
        inset 4px 4px 8px rgba(0,0,0,0.1),
        inset -4px -4px 8px rgba(255,255,255,0.7);
}

.knm-toggle-neumorphic .knm-toggle-label::after {
    content: "";
    position: absolute;
    background-color: var(--bs-body-bg, #e0e5ec);
    border-radius: 50%;
    transition: var(--knm-toggle-transition);
    box-shadow:
        3px 3px 6px rgba(0,0,0,0.15),
        -3px -3px 6px rgba(255,255,255,0.8);
}

.knm-toggle-neumorphic .knm-toggle-input:checked + .knm-toggle-label {
    box-shadow:
        inset 4px 4px 8px rgba(0,0,0,0.15),
        inset -4px -4px 8px rgba(255,255,255,0.5);
}

.knm-toggle-neumorphic .knm-toggle-input:checked + .knm-toggle-label::after {
    background-color: var(--knm-toggle-active);
    box-shadow:
        3px 3px 6px rgba(0,0,0,0.2),
        -2px -2px 4px rgba(255,255,255,0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STYLE: Outline — Border only, no fill
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-toggle-outline .knm-toggle-label {
    background-color: transparent;
    border: 2px solid var(--knm-toggle-inactive);
    border-radius: 999px;
}

.knm-toggle-outline .knm-toggle-label::after {
    content: "";
    position: absolute;
    background-color: var(--knm-toggle-inactive);
    border-radius: 50%;
    transition: var(--knm-toggle-transition);
}

/* Adjust for border thickness */
.knm-toggle-outline.knm-toggle-sm .knm-toggle-label::after { width: 10px; height: 10px; top: 2px; left: 2px; }
.knm-toggle-outline.knm-toggle-sm .knm-toggle-input:checked + .knm-toggle-label::after { transform: translateX(14px); }
.knm-toggle-outline.knm-toggle-md .knm-toggle-label::after { width: 16px; height: 16px; top: 3px; left: 3px; }
.knm-toggle-outline.knm-toggle-md .knm-toggle-input:checked + .knm-toggle-label::after { transform: translateX(22px); }
.knm-toggle-outline.knm-toggle-lg .knm-toggle-label::after { width: 22px; height: 22px; top: 4px; left: 4px; }
.knm-toggle-outline.knm-toggle-lg .knm-toggle-input:checked + .knm-toggle-label::after { transform: translateX(30px); }

.knm-toggle-outline .knm-toggle-input:checked + .knm-toggle-label {
    border-color: var(--knm-toggle-active);
}

.knm-toggle-outline .knm-toggle-input:checked + .knm-toggle-label::after {
    background-color: var(--knm-toggle-active);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STYLE: Square — Rectangular toggle
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-toggle-square .knm-toggle-label {
    background-color: var(--knm-toggle-inactive);
    border-radius: 4px;
}

.knm-toggle-square .knm-toggle-label::after {
    content: "";
    position: absolute;
    background-color: var(--knm-toggle-thumb);
    border-radius: 2px;
    transition: var(--knm-toggle-transition);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.knm-toggle-square .knm-toggle-input:checked + .knm-toggle-label {
    background-color: var(--knm-toggle-active);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STYLE: Minimal — Thin line track, floating circle
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-toggle-minimal .knm-toggle-label {
    background-color: transparent;
}

.knm-toggle-minimal .knm-toggle-label::before {
    content: "";
    position: absolute;
    border-radius: 999px;
    background-color: var(--knm-toggle-inactive);
    transition: var(--knm-toggle-transition);
}

/* Thin track sizing */
.knm-toggle-minimal.knm-toggle-sm .knm-toggle-label::before { width: 28px; height: 4px; top: 7px; left: 2px; }
.knm-toggle-minimal.knm-toggle-md .knm-toggle-label::before { width: 42px; height: 4px; top: 11px; left: 3px; }
.knm-toggle-minimal.knm-toggle-lg .knm-toggle-label::before { width: 56px; height: 6px; top: 14px; left: 4px; }

.knm-toggle-minimal .knm-toggle-label::after {
    content: "";
    position: absolute;
    background-color: var(--knm-toggle-inactive);
    border-radius: 50%;
    transition: var(--knm-toggle-transition);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.knm-toggle-minimal .knm-toggle-input:checked + .knm-toggle-label::before {
    background-color: color-mix(in srgb, var(--knm-toggle-active) 40%, transparent);
}

.knm-toggle-minimal .knm-toggle-input:checked + .knm-toggle-label::after {
    background-color: var(--knm-toggle-active);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STYLE: Text — ON/OFF labels inside track
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-toggle-text .knm-toggle-label {
    background-color: var(--knm-toggle-inactive);
    border-radius: 999px;
    overflow: hidden;
}

.knm-toggle-text .knm-toggle-label::after {
    content: "";
    position: absolute;
    background-color: var(--knm-toggle-thumb);
    border-radius: 50%;
    transition: var(--knm-toggle-transition);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    z-index: 2;
}

.knm-toggle-text .knm-toggle-on,
.knm-toggle-text .knm-toggle-off {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    z-index: 1;
    transition: opacity var(--knm-toggle-transition);
}

/* Text size by toggle size */
.knm-toggle-text.knm-toggle-sm .knm-toggle-on,
.knm-toggle-text.knm-toggle-sm .knm-toggle-off { font-size: 0.45rem; }
.knm-toggle-text.knm-toggle-md .knm-toggle-on,
.knm-toggle-text.knm-toggle-md .knm-toggle-off { font-size: 0.6rem; }
.knm-toggle-text.knm-toggle-lg .knm-toggle-on,
.knm-toggle-text.knm-toggle-lg .knm-toggle-off { font-size: 0.7rem; }

/* Wider track to fit text */
.knm-toggle-text.knm-toggle-sm .knm-toggle-label { width: 40px; }
.knm-toggle-text.knm-toggle-md .knm-toggle-label { width: 58px; }
.knm-toggle-text.knm-toggle-lg .knm-toggle-label { width: 76px; }

/* Text positioning */
.knm-toggle-text .knm-toggle-on {
    left: 6px;
    color: var(--knm-toggle-thumb);
    opacity: 0;
}

.knm-toggle-text .knm-toggle-off {
    right: 6px;
    color: var(--bs-body-color, #666);
    opacity: 1;
}

/* Wider thumb travel */
.knm-toggle-text.knm-toggle-sm .knm-toggle-input:checked + .knm-toggle-label::after { transform: translateX(22px); }
.knm-toggle-text.knm-toggle-md .knm-toggle-input:checked + .knm-toggle-label::after { transform: translateX(32px); }
.knm-toggle-text.knm-toggle-lg .knm-toggle-input:checked + .knm-toggle-label::after { transform: translateX(42px); }

.knm-toggle-text .knm-toggle-input:checked + .knm-toggle-label {
    background-color: var(--knm-toggle-active);
}

.knm-toggle-text .knm-toggle-input:checked + .knm-toggle-label .knm-toggle-on {
    opacity: 1;
}

.knm-toggle-text .knm-toggle-input:checked + .knm-toggle-label .knm-toggle-off {
    opacity: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STYLE: Icon — Checkmark (✓) and cross (✕)
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-toggle-icon .knm-toggle-label {
    background-color: var(--knm-toggle-inactive);
    border-radius: 999px;
}

.knm-toggle-icon .knm-toggle-label::before {
    content: "\2715"; /* ✕ */
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    font-weight: 700;
    color: var(--bs-body-color, #999);
    transition: opacity var(--knm-toggle-transition);
    z-index: 1;
}

.knm-toggle-icon.knm-toggle-sm .knm-toggle-label::before { font-size: 0.5rem; }
.knm-toggle-icon.knm-toggle-md .knm-toggle-label::before { font-size: 0.65rem; }
.knm-toggle-icon.knm-toggle-lg .knm-toggle-label::before { font-size: 0.8rem; }

.knm-toggle-icon .knm-toggle-label::after {
    content: "";
    position: absolute;
    background-color: var(--knm-toggle-thumb);
    border-radius: 50%;
    transition: var(--knm-toggle-transition);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    z-index: 2;
}

.knm-toggle-icon .knm-toggle-input:checked + .knm-toggle-label {
    background-color: var(--knm-toggle-active);
}

.knm-toggle-icon .knm-toggle-input:checked + .knm-toggle-label::before {
    content: "\2713"; /* ✓ */
    left: 6px;
    right: auto;
    color: var(--knm-toggle-thumb);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STYLE: Skeuomorphic — 3D depth shadows
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-toggle-skeuomorphic .knm-toggle-label {
    background: linear-gradient(180deg, #ddd 0%, #bbb 100%);
    border-radius: 999px;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.5);
}

[data-bs-theme="dark"] .knm-toggle-skeuomorphic .knm-toggle-label {
    background: linear-gradient(180deg, #444 0%, #333 100%);
    box-shadow:
        0 2px 4px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

.knm-toggle-skeuomorphic .knm-toggle-label::after {
    content: "";
    position: absolute;
    background: linear-gradient(180deg, #fff 0%, #eee 100%);
    border-radius: 50%;
    transition: var(--knm-toggle-transition);
    box-shadow:
        0 2px 4px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.8);
}

[data-bs-theme="dark"] .knm-toggle-skeuomorphic .knm-toggle-label::after {
    background: linear-gradient(180deg, #666 0%, #555 100%);
    box-shadow:
        0 2px 4px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.15);
}

.knm-toggle-skeuomorphic .knm-toggle-input:checked + .knm-toggle-label {
    background: linear-gradient(180deg, var(--knm-toggle-active) 0%, color-mix(in srgb, var(--knm-toggle-active) 80%, #000) 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STYLE: Fill — Inset shadow expansion animation
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-toggle-fill .knm-toggle-label {
    background-color: var(--knm-toggle-inactive);
    border-radius: 999px;
    box-shadow: inset 0 0 0 0 var(--knm-toggle-active);
    transition: box-shadow 0.35s ease, background-color 0.35s ease;
}

.knm-toggle-fill .knm-toggle-label::after {
    content: "";
    position: absolute;
    background-color: var(--knm-toggle-thumb);
    border-radius: 50%;
    transition: var(--knm-toggle-transition);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.knm-toggle-fill .knm-toggle-input:checked + .knm-toggle-label {
    background-color: var(--knm-toggle-active);
    box-shadow: inset 0 0 0 20px var(--knm-toggle-active);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — All toggle styles
   Uses [data-bs-theme="dark"] to adjust track/thumb for dark backgrounds.
   Active/checked color is preserved (user-customizable via --knm-toggle-active).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Classic — Dark mode ─────────────────────────────────────────────── */
[data-bs-theme="dark"] .knm-toggle-classic .knm-toggle-label {
    background-color: #4a4a4a;
}

[data-bs-theme="dark"] .knm-toggle-classic .knm-toggle-label::after {
    background-color: #e0e0e0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ─── Neumorphic — Dark mode ──────────────────────────────────────────── */
[data-bs-theme="dark"] .knm-toggle-neumorphic .knm-toggle-label {
    background-color: #2a2a2e;
    box-shadow:
        inset 4px 4px 8px rgba(0,0,0,0.4),
        inset -4px -4px 8px rgba(255,255,255,0.05);
}

[data-bs-theme="dark"] .knm-toggle-neumorphic .knm-toggle-label::after {
    background-color: #3a3a3e;
    box-shadow:
        3px 3px 6px rgba(0,0,0,0.4),
        -3px -3px 6px rgba(255,255,255,0.05);
}

[data-bs-theme="dark"] .knm-toggle-neumorphic .knm-toggle-input:checked + .knm-toggle-label {
    box-shadow:
        inset 4px 4px 8px rgba(0,0,0,0.5),
        inset -4px -4px 8px rgba(255,255,255,0.03);
}

[data-bs-theme="dark"] .knm-toggle-neumorphic .knm-toggle-input:checked + .knm-toggle-label::after {
    box-shadow:
        3px 3px 6px rgba(0,0,0,0.5),
        -2px -2px 4px rgba(255,255,255,0.05);
}

/* ─── Outline — Dark mode ─────────────────────────────────────────────── */
[data-bs-theme="dark"] .knm-toggle-outline .knm-toggle-label {
    border-color: #6c6c6c;
}

[data-bs-theme="dark"] .knm-toggle-outline .knm-toggle-label::after {
    background-color: #8a8a8a;
}

/* ─── Square — Dark mode ──────────────────────────────────────────────── */
[data-bs-theme="dark"] .knm-toggle-square .knm-toggle-label {
    background-color: #4a4a4a;
}

[data-bs-theme="dark"] .knm-toggle-square .knm-toggle-label::after {
    background-color: #e0e0e0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* ─── Minimal — Dark mode ─────────────────────────────────────────────── */
[data-bs-theme="dark"] .knm-toggle-minimal .knm-toggle-label::before {
    background-color: #555;
}

[data-bs-theme="dark"] .knm-toggle-minimal .knm-toggle-label::after {
    background-color: #8a8a8a;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

[data-bs-theme="dark"] .knm-toggle-minimal .knm-toggle-input:checked + .knm-toggle-label::before {
    background-color: color-mix(in srgb, var(--knm-toggle-active) 40%, transparent);
}

/* ─── Text — Dark mode ────────────────────────────────────────────────── */
[data-bs-theme="dark"] .knm-toggle-text .knm-toggle-label {
    background-color: #4a4a4a;
}

[data-bs-theme="dark"] .knm-toggle-text .knm-toggle-label::after {
    background-color: #e0e0e0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

[data-bs-theme="dark"] .knm-toggle-text .knm-toggle-off {
    color: #bbb;
}

/* ─── Icon — Dark mode ────────────────────────────────────────────────── */
[data-bs-theme="dark"] .knm-toggle-icon .knm-toggle-label {
    background-color: #4a4a4a;
}

[data-bs-theme="dark"] .knm-toggle-icon .knm-toggle-label::before {
    color: #bbb;
}

[data-bs-theme="dark"] .knm-toggle-icon .knm-toggle-label::after {
    background-color: #e0e0e0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ─── Fill — Dark mode ────────────────────────────────────────────────── */
[data-bs-theme="dark"] .knm-toggle-fill .knm-toggle-label {
    background-color: #4a4a4a;
    box-shadow: inset 0 0 0 0 var(--knm-toggle-active);
}

[data-bs-theme="dark"] .knm-toggle-fill .knm-toggle-label::after {
    background-color: #e0e0e0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ─── Toggle text color — Dark mode ───────────────────────────────────── */
[data-bs-theme="dark"] .knm-toggle-text-label {
    color: var(--bs-body-color, #dee2e6);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Focus visible ring (accessibility)
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-toggle-input:focus-visible + .knm-toggle-label {
    outline: 2px solid var(--knm-toggle-active);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Card — global style overrides ─────────────────────────────────────── */
.card.knm-style-rounded { border-radius: 1rem; }
.card.knm-style-borderless { border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.card.knm-style-underline { border: none; border-bottom: 2px solid var(--bs-border-color); border-radius: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   DIVIDER
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-divider { border-color: var(--bs-border-color); }
.knm-divider--vertical {
    display: inline-block;
    width: 1px;
    background: var(--bs-border-color);
    vertical-align: middle;
    height: 24px;
}
.knm-divider--with-text {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
}
.knm-divider--with-text::before,
.knm-divider--with-text::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bs-border-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
}
.knm-empty-state-icon {
    font-size: 3rem;
    color: var(--bs-secondary-color);
    opacity: 0.5;
    margin-bottom: 1rem;
}
.knm-empty-state-title {
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 0.5rem;
}
.knm-empty-state-description {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    max-width: 400px;
    margin-bottom: 1.5rem;
}
.knm-empty-state-actions { display: flex; gap: 0.5rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   LIST
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-list {
    display: flex;
    flex-direction: column;
}
.knm-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    transition: background-color 0.15s;
}
.knm-list-item:last-child { border-bottom: none; }
.knm-list-item--clickable { cursor: pointer; }
.knm-list-item--clickable:hover { background: var(--bs-tertiary-bg); }
.knm-list-item--active { background: rgba(var(--knm-primary-rgb, 13, 110, 253), 0.08); }

.knm-list-item-icon {
    font-size: 1.25rem;
    color: var(--bs-secondary-color);
    width: 2rem;
    text-align: center;
    flex-shrink: 0;
}
.knm-list-item-avatar { flex-shrink: 0; }
.knm-list-item-content { flex: 1; min-width: 0; }
.knm-list-item-primary {
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.4;
}
.knm-list-item-secondary {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
    line-height: 1.3;
}
.knm-list-item-action { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONFIRM DIALOG
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    animation: knm-confirm-fade-in 0.15s ease-out;
}

@keyframes knm-confirm-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.knm-confirm-dialog {
    background: var(--bs-body-bg);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 90%;
    animation: knm-confirm-scale-in 0.15s ease-out;
}

@keyframes knm-confirm-scale-in {
    from { transform: scale(0.95); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.knm-confirm-header {
    padding: 1rem 1.25rem 0;
}
.knm-confirm-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}
.knm-confirm-body {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}
.knm-confirm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0 1.25rem 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper (holds sidebar + edge toggle, overflow visible for the button) ── */
.knm-sidebar-wrapper {
    position: relative;
    height: 100%;
    flex-shrink: 0;
    overflow: visible;
    z-index: 20;
    /* toggle button sits on the edge — consumer controls container overflow */
}
.knm-sidebar-wrapper--right {
    margin-right: 0;
}

/* ── Sidebar itself ── */
.knm-sidebar {
    width: var(--knm-sidebar-width, 260px);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
    border-right: 1px solid var(--bs-border-color);
    transition: width 0.2s ease;
    overflow: hidden;
}
.knm-sidebar--right {
    border-right: none;
    border-left: 1px solid var(--bs-border-color);
}

/* ── Header ── */
.knm-sidebar-header {
    padding: 0.75rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    min-height: 48px;
    overflow: hidden;
}
.knm-sidebar-header-content {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
}

/* ── Toggle button (on the edge of the sidebar border) ── */
.knm-sidebar-toggle {
    position: absolute;
    top: 12px;
    right: -14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.625rem;
    z-index: 25;
    transition: background-color 0.15s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    padding: 0;
    line-height: 1;
}
.knm-sidebar-wrapper--right .knm-sidebar-toggle {
    right: auto;
    left: -14px;
}
.knm-sidebar-toggle:hover { background: var(--bs-tertiary-bg); }
.knm-sidebar-toggle:focus-visible { outline: 2px solid var(--knm-primary); outline-offset: 2px; }

/* ── Nav ── */
.knm-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.375rem;
}
.knm-sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    border-radius: var(--knm-border-radius, 0.375rem);
    color: var(--bs-body-color);
    text-decoration: none;
    font-size: 0.875rem;
    transition: background-color 0.15s;
    cursor: pointer;
}
.knm-sidebar-nav .nav-link:hover { background: var(--bs-tertiary-bg); }
.knm-sidebar-nav .nav-link i {
    flex-shrink: 0;
    width: 1.25rem;
    text-align: center;
    font-size: 1.1rem;
}

/* ── Footer ── */
.knm-sidebar-footer {
    padding: 0.75rem;
    border-top: 1px solid var(--bs-border-color-translucent);
    flex-shrink: 0;
    overflow: hidden;
    white-space: nowrap;
}

/* ══ Collapsed / Mini mode ══ */
.knm-sidebar--collapsed {
    width: var(--knm-sidebar-mini-width, 56px);
    transition: width 0.2s ease;
}
/* Hide text everywhere */
.knm-sidebar--collapsed .knm-sidebar-header-content span,
.knm-sidebar--collapsed .knm-sidebar-nav .nav-link span,
.knm-sidebar--collapsed .knm-sidebar-footer span {
    display: none;
}
.knm-sidebar--collapsed .knm-sidebar-header-content i {
    font-size: 1.5rem;
}
/* Header in collapsed: keep toggle in its fixed position */
.knm-sidebar--collapsed .knm-sidebar-header {
    padding: 0.625rem;
}
/* Center nav icons */
.knm-sidebar--collapsed .knm-sidebar-nav .nav-link {
    justify-content: center;
    padding: 0.625rem;
    gap: 0;
}

/* ── Hover expand in mini mode (VS Code style) ── */
/* Hover on the WRAPPER (not sidebar itself, because sidebar has overflow:hidden) */
.knm-sidebar-wrapper:not(.knm-sidebar--no-hover):hover .knm-sidebar--collapsed {
    width: var(--knm-sidebar-width, 260px);
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
    z-index: 30;
}
/* Show text again on hover */
.knm-sidebar-wrapper:not(.knm-sidebar--no-hover):hover .knm-sidebar--collapsed .knm-sidebar-header-content span,
.knm-sidebar-wrapper:not(.knm-sidebar--no-hover):hover .knm-sidebar--collapsed .knm-sidebar-nav .nav-link span,
.knm-sidebar-wrapper:not(.knm-sidebar--no-hover):hover .knm-sidebar--collapsed .knm-sidebar-footer span {
    display: inline;
}
.knm-sidebar-wrapper:not(.knm-sidebar--no-hover):hover .knm-sidebar--collapsed .knm-sidebar-header-content i {
    font-size: inherit;
}
.knm-sidebar-wrapper:not(.knm-sidebar--no-hover):hover .knm-sidebar--collapsed .knm-sidebar-header {
    padding: 0.75rem;
}
.knm-sidebar-wrapper:not(.knm-sidebar--no-hover):hover .knm-sidebar--collapsed .knm-sidebar-nav .nav-link {
    justify-content: flex-start;
    padding: 0.5rem 0.75rem;
    gap: 0.625rem;
}
[data-bs-theme="dark"] .knm-sidebar-wrapper:hover .knm-sidebar--collapsed {
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.3);
}

/* ── Right sidebar ── */
.knm-sidebar--right.knm-sidebar--collapsed:hover {
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
}
[data-bs-theme="dark"] .knm-sidebar--right.knm-sidebar--collapsed:hover {
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.3);
}

/* ── Mobile hamburger toggle ── */
.knm-sidebar-mobile-toggle {
    display: none; /* hidden on desktop */
}

/* ── Mobile backdrop ── */
.knm-sidebar-backdrop {
    display: none;
}
@media (max-width: 767.98px) {
    .knm-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1049;
    }
}

/* ── Mobile: sidebar becomes overlay ── */
@media (max-width: 767.98px) {
    .knm-sidebar-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        width: auto;
    }
    .knm-sidebar-wrapper--right {
        left: auto;
        right: 0;
        transform: translateX(100%);
    }
    /* When mobile-open, show the sidebar */
    .knm-sidebar-wrapper:has(.knm-sidebar--mobile-open) {
        transform: translateX(0);
    }
    .knm-sidebar-wrapper:has(.knm-sidebar--mobile-open) .knm-sidebar {
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
        width: var(--knm-sidebar-width, 260px);
    }
    .knm-sidebar-wrapper--right:has(.knm-sidebar--mobile-open) .knm-sidebar {
        box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
    }
    /* Hide the edge toggle on mobile */
    .knm-sidebar-toggle {
        display: none;
    }
    /* Show hamburger on mobile */
    .knm-sidebar-mobile-toggle {
        display: flex;
        position: fixed;
        bottom: 1rem;
        left: 1rem;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: none;
        background: var(--knm-primary, #0d6efd);
        color: #fff;
        font-size: 1.25rem;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 1051;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        transition: transform 0.15s;
    }
    .knm-sidebar-mobile-toggle:hover { transform: scale(1.05); }
    .knm-sidebar-mobile-toggle--right { left: auto; right: 1rem; }
    /* Reset collapsed state on mobile — always show full width when open */
    .knm-sidebar--collapsed {
        width: var(--knm-sidebar-width, 260px);
    }
    .knm-sidebar--collapsed .knm-sidebar-header-content span,
    .knm-sidebar--collapsed .knm-sidebar-nav .nav-link span,
    .knm-sidebar--collapsed .knm-sidebar-footer span {
        display: inline;
    }
    .knm-sidebar--collapsed .knm-sidebar-nav .nav-link {
        justify-content: flex-start;
        padding: 0.5rem 0.75rem;
        gap: 0.625rem;
    }
    /* Disable mini mode hover on mobile */
    .knm-sidebar--collapsed:hover {
        width: var(--knm-sidebar-width, 260px);
        box-shadow: none;
        transition-delay: 0s;
    }
    .knm-sidebar--collapsed:hover .knm-sidebar-header-content span,
    .knm-sidebar--collapsed:hover .knm-sidebar-nav .nav-link span,
    .knm-sidebar--collapsed:hover .knm-sidebar-footer span {
        display: none;
    }
}

/* GlobalInputStyle variants */
.knm-sidebar.knm-style-rounded { border-radius: 1rem; margin: 0.5rem; height: calc(100% - 1rem); }
.knm-sidebar.knm-style-borderless { border: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   MULTI-SELECT
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-multiselect {
    position: relative;
    width: 100%;
}
.knm-multiselect-control {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--knm-input-border-color, var(--bs-border-color));
    border-radius: var(--knm-border-radius);
    background: var(--knm-input-bg, var(--bs-body-bg));
    min-height: 38px;
    align-items: center;
    cursor: text;
    transition: border-color 0.15s;
}
.knm-multiselect--open .knm-multiselect-control,
.knm-multiselect-control:focus-within {
    border-color: var(--knm-primary);
    box-shadow: 0 0 0 3px var(--knm-focus-shadow);
}
.knm-multiselect-search {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    min-width: 60px;
    font-size: 0.875rem;
    padding: 0.15rem 0;
}
.knm-multiselect-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: var(--knm-primary);
    color: #fff;
    border-radius: 50rem;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}
.knm-multiselect-chip-remove {
    border: none;
    background: transparent;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    padding: 0;
    font-size: 0.6rem;
    line-height: 1;
}
.knm-multiselect-chip-remove:hover { opacity: 1; }

/* Chip + inline value editor row */
.knm-multiselect-chip-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.125rem 0;
}
.knm-multiselect-chip-value {
    flex: 1;
    min-width: 0;
}
.knm-multiselect-chip-value .form-control,
.knm-multiselect-chip-value input {
    height: auto;
    min-height: auto;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    border-radius: var(--knm-border-radius);
}

/* When using ItemValueTemplate, stack chips vertically */
.knm-multiselect-control:has(.knm-multiselect-chip-row) {
    flex-direction: column;
    align-items: stretch;
}

.knm-multiselect-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--knm-border-radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    max-height: 200px;
    overflow-y: auto;
    margin-top: 2px;
}
.knm-multiselect-option {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.1s;
}
.knm-multiselect-option:hover { background: var(--bs-tertiary-bg); }
.knm-multiselect-option--selected { background: rgba(var(--knm-primary-rgb, 13, 110, 253), 0.06); font-weight: 500; }
.knm-multiselect-empty {
    padding: 0.75rem;
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
}

/* Style variants */
.knm-multiselect.knm-style-rounded .knm-multiselect-control { border-radius: 50rem; }
.knm-multiselect.knm-style-underline .knm-multiselect-control {
    border: none;
    border-bottom: 2px solid var(--knm-input-border-color);
    border-radius: 0;
}
.knm-multiselect.knm-style-borderless .knm-multiselect-control {
    border: none;
    background: transparent;
}

/* ══════════════════════════════════════════════════════════════════
   KNMQRCode — QR code container
   ══════════════════════════════════════════════════════════════════ */

.knm-qrcode {
    /* ── QR Code CSS Variables ──
       Override these to theme QR codes without using the builder.
       Supports any CSS color: hex, rgb(), rgba(), hsl(), transparent, etc.
       Example:
         .my-brand-qr {
             --knm-qr-foreground: var(--my-brand-primary);
             --knm-qr-background: transparent;
             --knm-qr-outer-eye: var(--my-brand-accent);
         }
    */
    --knm-qr-foreground: var(--bs-body-color, #000000);
    --knm-qr-background: var(--bs-body-bg, #ffffff);
    /* --knm-qr-outer-eye: (inherits --knm-qr-foreground) */
    /* --knm-qr-inner-eye: (inherits --knm-qr-foreground) */
    /* --knm-qr-stroke: (none by default) */
    /* --knm-qr-eye-stroke: (none by default) */
    /* --knm-qr-gradient-start: (inherits --knm-qr-foreground) */
    /* --knm-qr-gradient-end: (inherits --knm-qr-foreground) */
    /* --knm-qr-logo-bg: (transparent by default) */
    /* --knm-qr-opacity: 1 */

    display: inline-block;
    line-height: 0;
    opacity: var(--knm-qr-opacity, 1);
}

.knm-qrcode svg {
    max-width: 100%;
    height: auto;
}

/* Layout integration */
.knm-layout-rounded .knm-qrcode svg { border-radius: 1rem; overflow: hidden; }
.knm-layout-bordered .knm-qrcode { border: 2px solid var(--bs-border-color, #dee2e6); padding: 0.5rem; border-radius: 0.375rem; }
.knm-layout-borderless .knm-qrcode { border: none; }
.knm-layout-filled .knm-qrcode { background-color: var(--knm-filled-bg, #f5f5f5); padding: 0.5rem; border-radius: 0.375rem; }

/* ══════════════════════════════════════════════════════════════════
   Form collapsible groups — edit-mode toggle sections
   ══════════════════════════════════════════════════════════════════ */

.knm-form-collapsible {
    margin: 1rem 0;
    width: 100%;
}

.knm-form-collapsible__toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 1px dashed var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    color: var(--knm-primary, #0d6efd);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.knm-form-collapsible__toggle:hover {
    background-color: rgba(var(--knm-primary-rgb, 13, 110, 253), 0.04);
    border-color: var(--knm-primary, #0d6efd);
}

.knm-form-collapsible__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.knm-form-collapsible__content--expanded {
    max-height: 1000px;
    opacity: 1;
    margin-top: 0.75rem;
}

/* Layout system integration */
.knm-layout-rounded .knm-form-collapsible__toggle { border-radius: 50rem; }
.knm-layout-borderless .knm-form-collapsible__toggle { border: none; border-bottom: 1px dashed var(--bs-border-color); border-radius: 0; }
.knm-layout-bordered .knm-form-collapsible__toggle { border-width: 2px; border-style: dashed; }
.knm-layout-filled .knm-form-collapsible__toggle { background-color: var(--knm-filled-bg, #f5f5f5); border: none; }

/* ══════════════════════════════════════════════════════════════════
   Layout system — driven by LayoutType via knm-layout-* wrapper class
   ══════════════════════════════════════════════════════════════════ */

/* ── Rounded ──────────────────────────────────────────────────── */
.knm-layout-rounded .btn,
.knm-layout-rounded .form-control,
.knm-layout-rounded .form-select,
.knm-layout-rounded .input-group > .form-control { border-radius: 50rem; }
.knm-layout-rounded textarea.form-control { border-radius: 1rem; }

.knm-layout-rounded .card { border-radius: 1rem; }
.knm-layout-rounded .modal-content { border-radius: 1rem; }
.knm-layout-rounded .accordion { border-radius: 0.75rem; overflow: hidden; }
.knm-layout-rounded .accordion-item:first-child { border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; }
.knm-layout-rounded .accordion-item:last-child { border-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem; }
.knm-layout-rounded .accordion-item:first-child .accordion-button { border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; }
.knm-layout-rounded .accordion-item:last-child .accordion-button.collapsed { border-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem; }
.knm-layout-rounded .accordion-button { border-radius: 0; }
.knm-layout-rounded .knm-stepper-header { border-radius: 1rem; }
.knm-layout-rounded .nav-tabs .nav-link,
.knm-layout-rounded .knm-tabs__btn { border-radius: 50rem; }
.knm-layout-rounded .knm-multiselect-control { border-radius: 50rem; }
.knm-layout-rounded .knm-autocomplete__input { border-radius: 50rem; }
.knm-layout-rounded .knm-rte { border-radius: 1rem; overflow: hidden; }
.knm-layout-rounded .knm-fab__btn { border-radius: 50rem; }
.knm-layout-rounded .dropdown-menu { border-radius: 1rem; }
.knm-layout-rounded .knm-sidebar { border-radius: 1rem; margin: 0.5rem; height: calc(100% - 1rem); }

/* ── Borderless ───────────────────────────────────────────────── */
.knm-layout-borderless .btn { border: none; box-shadow: none; }
.knm-layout-borderless .btn:hover { background-color: rgba(0,0,0,0.04); }
.knm-layout-borderless .card { border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.knm-layout-borderless .modal-content { border: none; }
.knm-layout-borderless .accordion { border: none; }
.knm-layout-borderless .accordion-item { border: none; }
.knm-layout-borderless .knm-multiselect-control { border: none; }
.knm-layout-borderless .knm-rte { border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.knm-layout-borderless .knm-sidebar { border: none; }
.knm-layout-borderless .form-control,
.knm-layout-borderless .form-select {
    border: none;
    border-bottom: 2px solid var(--bs-border-color, #dee2e6);
    border-radius: 0;
}
.knm-layout-borderless .form-control:focus,
.knm-layout-borderless .form-select:focus {
    border-bottom-color: var(--knm-primary, #0d6efd);
    box-shadow: none;
}

/* ── Bordered ─────────────────────────────────────────────────── */
.knm-layout-bordered .btn { border-width: 2px; }
.knm-layout-bordered .card { border-width: 2px; }
.knm-layout-bordered .modal-content { border-width: 2px; }
.knm-layout-bordered .accordion-item { border-width: 2px; }
.knm-layout-bordered .form-control,
.knm-layout-bordered .form-select { border-width: 2px; }
.knm-layout-bordered .knm-multiselect-control { border-width: 2px; }
.knm-layout-bordered .knm-rte { border-width: 2px; }
.knm-layout-bordered .knm-sidebar { border-width: 2px; }

/* ── Filled ───────────────────────────────────────────────────── */
.knm-layout-filled .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info) {
    background-color: var(--knm-filled-bg, #f5f5f5);
    border: none;
    border-bottom: 2px solid transparent;
}
.knm-layout-filled .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):hover {
    border-bottom-color: var(--knm-primary, #0d6efd);
}
.knm-layout-filled .card { background-color: var(--knm-filled-bg, #f5f5f5); }
.knm-layout-filled .form-control,
.knm-layout-filled .form-select {
    background-color: var(--knm-filled-bg, #f5f5f5);
    border: none;
    border-bottom: 2px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.25rem 0.25rem 0 0;
}
.knm-layout-filled .form-control:focus,
.knm-layout-filled .form-select:focus {
    border-bottom-color: var(--knm-primary, #0d6efd);
    box-shadow: none;
}
.knm-layout-filled .knm-multiselect-control {
    background-color: var(--knm-filled-bg, #f5f5f5);
    border: none;
    border-bottom: 2px solid var(--bs-border-color, #dee2e6);
}
.knm-layout-filled .knm-rte { background-color: var(--knm-filled-bg, #f5f5f5); }
.knm-layout-filled .accordion-item { background-color: var(--knm-filled-bg, #f5f5f5); }

/* ── Floating / Horizontal / Vertical ─────────────────────────── */
/* These primarily affect KNMInput label positioning (handled in Razor).
   No additional CSS overrides needed for other components — they use default Bootstrap. */

/* ── Backward compatibility: deprecated knm-style-* aliases ───── */
/* Components now emit knm-layout-* classes. These aliases ensure
   consumer CSS targeting the old knm-style-* still works.
   Will be removed in the next major version. */
.knm-style-rounded .btn,
.knm-style-rounded.btn { border-radius: 50rem; }
.knm-style-rounded .card,
.card.knm-style-rounded { border-radius: 1rem; }
.knm-style-rounded .knm-multiselect-control { border-radius: 50rem; }
.knm-style-rounded .knm-sidebar { border-radius: 1rem; margin: 0.5rem; height: calc(100% - 1rem); }

.knm-style-underline .btn,
.knm-style-underline.btn,
.knm-style-borderless .btn,
.knm-style-borderless.btn { border: none; box-shadow: none; }
.knm-style-borderless .card,
.card.knm-style-borderless { border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.knm-style-underline .card,
.card.knm-style-underline { border: none; border-bottom: 2px solid var(--bs-border-color); border-radius: 0; }
.knm-style-borderless .knm-sidebar { border: none; }
.knm-style-underline .knm-multiselect-control {
    border: none;
    border-bottom: 2px solid var(--bs-border-color);
}
.knm-style-borderless .knm-multiselect-control { border: none; }

/* ====================================================================
   KNMDateTimePicker — Calendar, Time Panel, Popup, Input
   ==================================================================== */

/* -- CSS Variables -- */
:root {
    --knm-cal-primary: var(--knm-primary, #0d6efd);
    --knm-cal-primary-rgb: var(--knm-primary-rgb, 13, 110, 253);
    --knm-cal-bg: var(--bs-body-bg, #fff);
    --knm-cal-color: var(--bs-body-color, #212529);
    --knm-cal-muted: var(--bs-secondary-color, #6c757d);
    --knm-cal-border: var(--bs-border-color, #dee2e6);
    --knm-cal-radius: var(--knm-border-radius, 0.375rem);
    --knm-cal-header-bg: linear-gradient(135deg, var(--knm-cal-primary) 0%, color-mix(in srgb, var(--knm-cal-primary) 70%, #000) 100%);
    --knm-cal-header-color: #fff;
    --knm-cal-today-bg: rgba(var(--knm-cal-primary-rgb), 0.12);
    --knm-cal-selected-bg: var(--knm-cal-primary);
    --knm-cal-selected-color: #fff;
    --knm-cal-hover-bg: rgba(var(--knm-cal-primary-rgb), 0.08);
    --knm-cal-weekend-color: var(--bs-danger, #dc3545);
    --knm-cal-other-opacity: 0.35;
    --knm-cal-range-bg: rgba(var(--knm-cal-primary-rgb), 0.10);
    --knm-cal-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    --knm-cal-cell-size: 2.25rem;
}

/* -- Calendar container -- */
.knm-cal {
    width: 280px;
    background: var(--knm-cal-bg);
    border-radius: var(--knm-cal-radius);
    overflow: hidden;
    font-size: 0.875rem;
}

.knm-cal--compact {
    width: 210px;
    font-size: 0.7rem;
    --knm-cal-cell-size: 1.5rem;
}

.knm-cal--compact .knm-cal__header {
    padding: 0.375rem 0.5rem;
}

.knm-cal--compact .knm-cal__header-day {
    font-size: 0.6rem;
}

.knm-cal--compact .knm-cal__header-date {
    font-size: 0.85rem;
}

.knm-cal--compact .knm-cal__nav {
    padding: 0.25rem 0.375rem;
}

.knm-cal--compact .knm-cal__nav-btn.btn {
    padding: 0.125rem 0.375rem;
    font-size: 0.7rem;
}

.knm-cal--compact .knm-cal__weekdays {
    padding: 0.125rem 0.25rem 0;
}

.knm-cal--compact .knm-cal__wd {
    font-size: 0.6rem;
    padding: 0.125rem 0;
}

.knm-cal--compact .knm-cal__days {
    padding: 0.125rem 0.25rem 0.25rem;
    gap: 0.0625rem;
}

.knm-cal--compact .knm-cal__footer {
    padding: 0.25rem 0.5rem;
}

.knm-cal--compact .knm-cal__months,
.knm-cal--compact .knm-cal__years {
    min-height: 10rem;
    padding: 0.25rem;
    gap: 0.25rem;
}

.knm-cal--compact .knm-cal__m,
.knm-cal--compact .knm-cal__y {
    height: 1.75rem;
    font-size: 0.7rem;
}

/* DateTime combo: wider to fit calendar + time side panel */
.knm-dtp-body + .knm-cal__footer {
    /* footer is sibling of body inside .knm-cal */
}

.knm-cal:has(.knm-dtp-body) {
    width: 390px;
}

/* -- Calendar header (accent gradient) -- */
.knm-cal__header {
    background: var(--knm-cal-header-bg);
    color: var(--knm-cal-header-color);
    padding: 0.75rem 1rem;
    text-align: center;
}

.knm-cal__header-day {
    display: block;
    font-size: 0.75rem;
    text-transform: capitalize;
    opacity: 0.85;
}

.knm-cal__header-date {
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 0.125rem;
}

/* -- Navigation bar -- */
.knm-cal__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.5rem 0.25rem;
}

.knm-cal__nav-btn.btn {
    min-width: auto;
    padding: 0.25rem 0.5rem;
}

.knm-cal__nav-title {
    font-weight: 600;
    font-size: 0.9375rem;
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.knm-cal__nav-title-month,
.knm-cal__nav-title-year {
    cursor: pointer;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    transition: background 0.15s;
}

.knm-cal__nav-title-month:hover,
.knm-cal__nav-title-year:hover {
    background: var(--knm-cal-hover-bg);
}

/* -- Fixed height content area (prevents resize on drill-down) -- */
.knm-cal__months,
.knm-cal__years {
    min-height: 16rem;
    align-content: center;
}

/* -- Weekday headers -- */
.knm-cal__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0.25rem 0.5rem 0;
    text-align: center;
}

.knm-cal__wd {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--knm-cal-muted);
    padding: 0.25rem 0;
    text-transform: capitalize;
}

/* -- Day cells -- */
.knm-cal__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0.25rem 0.5rem 0.5rem;
    gap: 0.125rem;
}

.knm-cal__d {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--knm-cal-cell-size);
    height: var(--knm-cal-cell-size);
    margin: 0 auto;
    border: none;
    border-radius: var(--knm-cal-radius);
    background: transparent;
    color: var(--knm-cal-color);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}

.knm-cal__d:hover:not(:disabled):not(.knm-cal__d--sel) {
    background: var(--knm-cal-hover-bg);
}

.knm-cal__d--today {
    background: var(--knm-cal-today-bg);
    font-weight: 700;
}

.knm-cal__d--sel {
    background: var(--knm-cal-selected-bg) !important;
    color: var(--knm-cal-selected-color) !important;
    font-weight: 600;
}

.knm-cal__d--other {
    opacity: var(--knm-cal-other-opacity);
}

.knm-cal__d--dis {
    opacity: 0.3;
    cursor: not-allowed;
    text-decoration: line-through;
}

.knm-cal__d--weekend {
    color: var(--knm-cal-weekend-color);
}

.knm-cal__d--weekend.knm-cal__d--other {
    color: var(--knm-cal-weekend-color);
}

/* -- Range selection -- */
.knm-cal__d--range {
    background: var(--knm-cal-range-bg);
    border-radius: 0;
}

.knm-cal__d--range-s {
    background: var(--knm-cal-selected-bg);
    color: var(--knm-cal-selected-color);
    border-radius: 50% 0 0 50%;
}

.knm-cal__d--range-e {
    background: var(--knm-cal-selected-bg);
    color: var(--knm-cal-selected-color);
    border-radius: 0 50% 50% 0;
}

/* -- Week number column (week picker mode) -- */
.knm-cal__weekdays--with-wn {
    grid-template-columns: 2rem repeat(7, 1fr);
}

.knm-cal__days--with-wn {
    grid-template-columns: 2rem repeat(7, 1fr);
}

.knm-cal__wn-header {
    color: var(--knm-cal-primary);
    font-weight: 700;
    font-size: 0.65rem;
}

.knm-cal__wn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--knm-cal-muted);
    cursor: pointer;
    border-radius: var(--knm-cal-radius);
    transition: background 0.15s, color 0.15s;
}

.knm-cal__wn:hover {
    background: var(--knm-cal-hover-bg);
    color: var(--knm-cal-primary);
}

.knm-cal__wn--sel {
    background: var(--knm-cal-selected-bg);
    color: var(--knm-cal-selected-color);
    font-weight: 700;
}

.knm-cal__wn--hover {
    background: var(--knm-cal-range-bg);
    color: var(--knm-cal-primary);
}

/* -- Week selection -- */
.knm-cal__d--week-hover {
    background: var(--knm-cal-range-bg);
    border-radius: 0;
}

.knm-cal__d--week-hover-s {
    border-radius: var(--knm-cal-radius) 0 0 var(--knm-cal-radius);
}

.knm-cal__d--week-hover-e {
    border-radius: 0 var(--knm-cal-radius) var(--knm-cal-radius) 0;
}

.knm-cal__d--week-sel {
    background: var(--knm-cal-range-bg);
    border-radius: 0;
    font-weight: 600;
}

.knm-cal__d--week-sel-s {
    background: var(--knm-cal-selected-bg);
    color: var(--knm-cal-selected-color);
    border-radius: var(--knm-cal-radius) 0 0 var(--knm-cal-radius);
    font-weight: 600;
}

.knm-cal__d--week-sel-e {
    background: var(--knm-cal-selected-bg);
    color: var(--knm-cal-selected-color);
    border-radius: 0 var(--knm-cal-radius) var(--knm-cal-radius) 0;
    font-weight: 600;
}

/* -- Rounded variant (circular day cells, pill buttons, extra radius) -- */
.knm-cal--rounded {
    border-radius: 1.75rem;
}

.knm-cal--rounded .knm-cal__header {
    border-radius: 1.75rem 1.75rem 0 0;
}

.knm-cal--rounded .knm-cal__footer {
    border-radius: 0 0 1.75rem 1.75rem;
}

/* Popup container follows the rounded inner shape */
.knm-datetimepicker--open.knm-layout-rounded .knm-dtp-popup {
    border-radius: 1.75rem;
}

.knm-datetimepicker--open.knm-layout-rounded .knm-dtp-dialog {
    border-radius: 1.75rem;
}

.knm-datetimepicker--open.knm-layout-material .knm-dtp-popup,
.knm-datetimepicker--open.knm-layout-material .knm-dtp-dialog {
    border-radius: 1rem;
}

.knm-datetimepicker--open.knm-layout-cupertino .knm-dtp-popup,
.knm-datetimepicker--open.knm-layout-cupertino .knm-dtp-dialog {
    border-radius: 0.875rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.knm-cal--rounded .knm-cal__d {
    border-radius: 50%;
}

.knm-cal--rounded .knm-cal__d--range {
    border-radius: 0;
}

.knm-cal--rounded .knm-cal__d--range-s {
    border-radius: 50% 0 0 50%;
}

.knm-cal--rounded .knm-cal__d--range-e {
    border-radius: 0 50% 50% 0;
}

.knm-cal--rounded .knm-cal__footer-btn.btn-primary {
    border-radius: 50rem;
}

.knm-cal--rounded .knm-cal__m,
.knm-cal--rounded .knm-cal__y {
    border-radius: 50rem;
}

.knm-cal--rounded .knm-cal__d--week-sel-s {
    border-radius: 50% 0 0 50%;
}

.knm-cal--rounded .knm-cal__d--week-sel-e {
    border-radius: 0 50% 50% 0;
}

.knm-cal--rounded .knm-cal__d--week-hover-s {
    border-radius: 50% 0 0 50%;
}

.knm-cal--rounded .knm-cal__d--week-hover-e {
    border-radius: 0 50% 50% 0;
}

/* -- Material Design 3 variant (Android) -- */
.knm-cal--material {
    border-radius: 1rem;
}

.knm-cal--material .knm-cal__header {
    border-radius: 1rem 1rem 0 0;
    background: var(--knm-cal-primary);
}

.knm-cal--material .knm-cal__d {
    border-radius: 50%;
}

.knm-cal--material .knm-cal__d--sel {
    background: var(--knm-cal-selected-bg) !important;
    color: var(--knm-cal-selected-color) !important;
}

.knm-cal--material .knm-cal__footer {
    border-radius: 0 0 1rem 1rem;
}

.knm-cal--material .knm-cal__footer-btn.btn-primary {
    border-radius: 50rem;
}

.knm-cal--material .knm-cal__m,
.knm-cal--material .knm-cal__y {
    border-radius: 50rem;
}

/* -- Cupertino variant (Apple iOS) -- */
.knm-cal--cupertino {
    border-radius: 0.875rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.knm-cal--cupertino .knm-cal__header {
    border-radius: 0.875rem 0.875rem 0 0;
    background: linear-gradient(180deg, rgba(var(--knm-cal-primary-rgb), 0.9) 0%, var(--knm-cal-primary) 100%);
    backdrop-filter: blur(8px);
}

.knm-cal--cupertino .knm-cal__d {
    border-radius: 50%;
}

.knm-cal--cupertino .knm-cal__d--sel {
    background: var(--knm-cal-selected-bg) !important;
    color: var(--knm-cal-selected-color) !important;
    box-shadow: 0 2px 6px rgba(var(--knm-cal-primary-rgb), 0.35);
}

.knm-cal--cupertino .knm-cal__d--today {
    font-weight: 800;
}

.knm-cal--cupertino .knm-cal__footer {
    border-radius: 0 0 0.875rem 0.875rem;
}

.knm-cal--cupertino .knm-cal__footer-btn.btn-primary {
    border-radius: 0.5rem;
}

.knm-cal--cupertino .knm-cal__m,
.knm-cal--cupertino .knm-cal__y {
    border-radius: 0.5rem;
}

/* -- Month cells -- */
.knm-cal__months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0.5rem;
    gap: 0.375rem;
}

.knm-cal__m {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    border: none;
    border-radius: var(--knm-cal-radius);
    background: transparent;
    color: var(--knm-cal-color);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.15s;
    text-transform: capitalize;
    padding: 0;
}

.knm-cal__m:hover {
    background: var(--knm-cal-hover-bg);
}

.knm-cal__m--sel {
    background: var(--knm-cal-selected-bg) !important;
    color: var(--knm-cal-selected-color) !important;
    font-weight: 600;
}

.knm-cal__m--cur {
    font-weight: 700;
    background: var(--knm-cal-today-bg);
}

/* -- Year cells -- */
.knm-cal__years {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0.5rem;
    gap: 0.375rem;
}

.knm-cal__y {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    border: none;
    border-radius: var(--knm-cal-radius);
    background: transparent;
    color: var(--knm-cal-color);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.15s;
    padding: 0;
}

.knm-cal__y:hover {
    background: var(--knm-cal-hover-bg);
}

.knm-cal__y--sel {
    background: var(--knm-cal-selected-bg) !important;
    color: var(--knm-cal-selected-color) !important;
    font-weight: 600;
}

.knm-cal__y--cur {
    font-weight: 700;
    background: var(--knm-cal-today-bg);
}

/* -- Footer (Today/Now button) -- */
.knm-cal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--knm-cal-border);
}

.knm-cal__footer-btn {
    font-size: 0.7rem;
    min-width: auto;
}

/* -- Input-group: unified outer border, no inner borders -- */
.knm-datetimepicker .input-group {
    border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.knm-datetimepicker .input-group:focus-within {
    border-color: var(--knm-primary, #0d6efd);
    box-shadow: 0 0 0 0.2rem rgba(var(--knm-cal-primary-rgb, 13, 110, 253), 0.15);
}

.knm-datetimepicker .input-group .form-control {
    border: none;
    box-shadow: none !important;
}

/* Rounded layout: pill-shaped input-group */
.knm-datetimepicker.knm-layout-rounded .input-group {
    border-radius: 50rem;
}

/* -- Input trigger button (calendar/clock icon in input-group) -- */
.knm-dtp-trigger.btn {
    background: none;
    border: none;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    padding: 0 0.75rem;
    font-size: 1.1rem;
    transition: color 0.15s;
}

.knm-dtp-trigger.btn:hover {
    color: var(--knm-primary, #0d6efd);
}

/* Accent variant — primary color by default */
.knm-dtp-trigger--accent.btn {
    color: var(--knm-cal-primary);
}

/* -- Validation states on input-group -- */
.knm-datetimepicker .input-group:has(.is-invalid) {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

.knm-datetimepicker .input-group:has(.is-invalid):focus-within {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
}

.knm-datetimepicker .input-group:has(.is-valid) {
    border-color: var(--bs-form-valid-border-color, #198754);
}

.knm-datetimepicker .input-group:has(.is-valid):focus-within {
    border-color: var(--bs-form-valid-border-color, #198754);
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.15);
}

/* Validation: shift Bootstrap SVG icon left to avoid trigger overlap */
/* Override global hide for Bordered/Borderless — re-enable with SVG */
.knm-datetimepicker .form-control.is-valid,
.knm-datetimepicker .form-control.is-invalid {
    background-position: right 2.5rem center !important;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
    background-repeat: no-repeat !important;
}

.knm-datetimepicker .form-control.is-valid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
}

.knm-datetimepicker .form-control.is-invalid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
}

/* Inside input-group: shift icon to fit before the trigger button */
.knm-datetimepicker .input-group .form-control.is-valid,
.knm-datetimepicker .input-group .form-control.is-invalid {
    background-position: right 0.5rem center !important;
}

/* Bordered/Borderless validation: border + label color */
.knm-datetimepicker .form-label-group.in-border:has(.is-invalid) {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

.knm-datetimepicker .form-label-group.in-border:has(.is-valid) {
    border-color: var(--bs-form-valid-border-color, #198754);
}

.knm-datetimepicker .form-label-group.in-border:has(.is-invalid) label {
    color: var(--bs-form-invalid-border-color, #dc3545);
}

.knm-datetimepicker .form-label-group.in-border:has(.is-valid) label {
    color: var(--bs-form-valid-border-color, #198754);
}

.knm-datetimepicker .form-label-group.borderless:has(.is-invalid) input {
    border-bottom-color: var(--bs-form-invalid-border-color, #dc3545);
}

.knm-datetimepicker .form-label-group.borderless:has(.is-valid) input {
    border-bottom-color: var(--bs-form-valid-border-color, #198754);
}

/* -- Overlay trigger button (for non-input-group layouts) -- */
.knm-dtp-trigger--overlay {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    border: none;
    background: transparent;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 1.1rem;
    transition: color 0.15s;
    z-index: 2;
}

.knm-dtp-trigger--overlay:hover:not(:disabled) {
    color: var(--knm-primary, #0d6efd);
}

.knm-dtp-trigger--overlay:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.knm-dtp-trigger--sm {
    font-size: 0.9rem;
    right: 0.375rem;
}

.knm-dtp-trigger--lg {
    font-size: 1.25rem;
    right: 0.625rem;
}

/* Input padding for overlay trigger + validation icon */
.knm-datetimepicker:has(.knm-dtp-trigger--overlay) .form-control {
    padding-right: 2.25rem !important;
}


/* Show input mask placeholder in bordered/borderless even unfocused */
.knm-datetimepicker .form-label-group.in-border input:placeholder-shown::placeholder,
.knm-datetimepicker .form-label-group.borderless input:placeholder-shown::placeholder {
    color: var(--knm-input-placeholder-color, #6c757d);
    opacity: 0.5;
}

/* Float label up when placeholder is shown (date inputs always need the mask visible) */
.knm-datetimepicker .form-label-group.in-border input:placeholder-shown ~ span label {
    top: 0;
    transform: translateY(-50%);
    font-size: .75rem;
    background-color: var(--knm-input-bg, var(--bs-body-bg, #fff));
    padding: 0 .25rem;
}

.knm-datetimepicker .form-label-group.borderless input:placeholder-shown ~ label {
    top: 0;
    transform: translateY(-50%) scale(.75);
    transform-origin: left top;
}

/* -- Range mode: single input "Start → End" + dual calendar popup -- */
.knm-dtp-range {
    position: relative;
}

.knm-dtp-range__display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    background: var(--bs-body-bg, #fff);
    cursor: pointer;
    font-size: 0.875rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-height: 2.375rem;
}

.knm-dtp-range__display--focus {
    border-color: var(--knm-primary, #0d6efd);
    box-shadow: 0 0 0 0.2rem rgba(var(--knm-cal-primary-rgb, 13, 110, 253), 0.15);
}

.knm-dtp-range__display.disabled {
    opacity: 0.65;
    pointer-events: none;
    background: var(--bs-secondary-bg, #e9ecef);
}

.knm-dtp-range__icon {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 1rem;
    flex-shrink: 0;
}

.knm-dtp-range__arrow {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.7rem;
    flex-shrink: 0;
}

.knm-dtp-range__placeholder {
    color: var(--bs-secondary-color, #6c757d);
    opacity: 0.6;
}

.knm-dtp-range__start,
.knm-dtp-range__end {
    white-space: nowrap;
}

/* Range display layout variants */
.knm-dtp-range__display--rounded {
    border-radius: 50rem;
}

.knm-dtp-range__display--bordered {
    border: none;
    box-shadow: none;
    padding: 0.375rem 0.75rem;
    width: 100%;
}

.knm-dtp-range__display--bordered:focus-within {
    box-shadow: none;
}

.knm-dtp-range__bordered-wrap {
    position: relative;
    border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.knm-dtp-range__bordered-wrap--focus {
    border-color: var(--knm-primary, #0d6efd);
    box-shadow: 0 0 0 0.2rem rgba(var(--knm-cal-primary-rgb, 13, 110, 253), 0.15);
}

.knm-dtp-range__bordered-wrap span {
    position: static;
    pointer-events: none;
    display: block;
    height: 0;
    overflow: visible;
}

.knm-dtp-range__bordered-wrap label {
    position: absolute;
    top: 0;
    left: 0.75rem;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: var(--knm-primary, #0d6efd);
    background-color: var(--bs-body-bg, #fff);
    padding: 0 0.25rem;
    margin: 0;
}

.knm-dtp-range__display--borderless {
    border: none;
    border-bottom: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
    border-radius: 0;
    padding: 0.375rem 0;
}

.knm-dtp-range__display--borderless.knm-dtp-range__display--focus {
    border-bottom-color: var(--knm-primary, #0d6efd);
    box-shadow: none;
}

.knm-dtp-range__display--filled {
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: none;
    border-bottom: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem) var(--bs-border-radius, 0.375rem) 0 0;
}

.knm-dtp-range__display--filled.knm-dtp-range__display--focus {
    border-bottom-color: var(--knm-primary, #0d6efd);
    box-shadow: none;
}

.knm-dtp-range__display--floating {
    border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    padding: 1rem 0.75rem 0.375rem;
}

.knm-dtp-range__floating-label {
    position: absolute;
    top: 0.25rem;
    left: 0.75rem;
    font-size: 0.65rem;
    color: var(--knm-primary, #0d6efd);
    pointer-events: none;
}

.knm-dtp-range__top-label {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.knm-dtp-range__top-label--filled {
    color: var(--knm-primary, #0d6efd);
}

/* Range validation states */
.knm-dtp-range--invalid {
    border-color: var(--bs-form-invalid-border-color, #dc3545) !important;
}

.knm-dtp-range--invalid.knm-dtp-range__display--focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15) !important;
}

.knm-dtp-range--valid {
    border-color: var(--bs-form-valid-border-color, #198754) !important;
}

.knm-dtp-range--valid.knm-dtp-range__display--focus {
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.15) !important;
}

/* Range validation icons (SVG background like Bootstrap) */
.knm-dtp-range__validation-icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    flex-shrink: 0;
    margin-left: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.knm-dtp-range__validation-icon--invalid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
}

.knm-dtp-range__validation-icon--valid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}

/* Bordered wrap validation */
.knm-dtp-range--invalid ~ .knm-dtp-range__bordered-wrap,
.knm-dtp-range__bordered-wrap:has(.knm-dtp-range--invalid) {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

.knm-dtp-range--valid ~ .knm-dtp-range__bordered-wrap,
.knm-dtp-range__bordered-wrap:has(.knm-dtp-range--valid) {
    border-color: var(--bs-form-valid-border-color, #198754);
}

/* Range popup: wider to fit two calendars */
.knm-dtp-range-popup {
    min-width: 580px;
}

/* Time-only range: narrower popup */
.knm-dtp-range-popup:has(.knm-dtp-range-time:first-child) {
    min-width: auto;
}

.knm-dtp-range-calendars {
    display: flex;
    gap: 0;
}

.knm-dtp-range-calendars .knm-cal {
    flex: 1 1 auto;
    border-radius: 0;
    width: 280px;
}

.knm-dtp-range-calendars .knm-cal--range-left {
    border-right: 1px solid var(--knm-cal-border, #dee2e6);
}

/* Hide headers in range calendars — use nav only */
.knm-dtp-range-calendars .knm-cal__header {
    display: none;
}

.knm-dtp-range-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--knm-cal-border, #dee2e6);
    gap: 1rem;
}

.knm-dtp-range-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
}

.knm-dtp-range-summary__item {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.knm-dtp-range-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.knm-dtp-range-actions .btn {
    font-size: 0.7rem;
}

/* Range time section (DateTime mode) */
.knm-dtp-range-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--knm-cal-border, #dee2e6);
}

.knm-dtp-range-time__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.knm-dtp-range-time__fields {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.knm-dtp-range-time__date {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
    min-width: 5rem;
    text-align: center;
}

.knm-dtp-range-time .knm-time {
    border-top: none;
    padding: 0.25rem;
}

.knm-dtp-range-time .knm-time__val {
    font-size: 1rem;
    min-width: 1.75rem;
}

.knm-dtp-range-time .knm-time__sep {
    font-size: 1rem;
    padding-top: 1.25rem;
}

.knm-dtp-range-time .knm-time__btn {
    width: 1.5rem;
    height: 1.25rem;
    font-size: 0.7rem;
}

/* -- DateTime combo: calendar + time side by side -- */
.knm-dtp-body {
    display: flex;
    align-items: stretch;
}

.knm-dtp-body__calendar {
    flex: 1 1 auto;
    min-width: 0;
}

/* ====================================================================
   KNMTimePanel
   ==================================================================== */

.knm-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.75rem;
    background: var(--knm-cal-bg);
    border-top: 1px solid var(--knm-cal-border);
}

/* Time panel inside calendar wrapper (TimeOnly mode) */
.knm-cal > .knm-time {
    border-top: none;
}

/* Side layout (DateTime combo mode) */
.knm-time--side {
    border-top: none;
    border-left: 1px solid var(--knm-cal-border);
    flex-direction: column;
    width: 110px;
    flex-shrink: 0;
    padding: 1rem 0.75rem;
    justify-content: center;
}

.knm-time--side .knm-time__col {
    flex-direction: column;
}

.knm-time--side .knm-time__sep {
    padding-top: 0;
    padding: 0.25rem 0;
}

.knm-time--compact {
    padding: 0.5rem;
}

.knm-time__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
}

.knm-time__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 1.75rem;
    border: none;
    border-radius: var(--knm-cal-radius);
    background: transparent;
    color: var(--knm-cal-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    padding: 0;
    font-size: 0.875rem;
}

.knm-time__btn:hover {
    background: var(--knm-cal-hover-bg);
    color: var(--knm-cal-primary);
}

.knm-time__val {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 2.5rem;
    text-align: center;
    color: var(--knm-cal-color);
    line-height: 1;
    padding: 0.25rem 0;
}

.knm-time__sep {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--knm-cal-muted);
    line-height: 1;
    padding-top: 1.75rem;
}

/* ====================================================================
   KNMDateTimePopup
   ==================================================================== */

.knm-datetimepicker {
    position: relative;
}

/* Disabled state: everything grey, no accent, not-allowed cursor */
.knm-datetimepicker:has(.form-control:disabled) {
    cursor: not-allowed;
}

.knm-datetimepicker:has(.form-control:disabled) .input-group {
    background: var(--bs-secondary-bg, #e9ecef);
    border-color: var(--bs-border-color, #dee2e6);
    opacity: 0.65;
}

.knm-datetimepicker:has(.form-control:disabled) .knm-dtp-trigger.btn {
    color: var(--bs-secondary-color, #6c757d);
    cursor: not-allowed;
    background: none;
}

.knm-datetimepicker:has(.form-control:disabled) .knm-dtp-trigger--overlay {
    color: var(--bs-secondary-color, #6c757d);
    cursor: not-allowed;
    background: none;
}

.knm-datetimepicker:has(.form-control:disabled) label {
    color: var(--bs-secondary-color, #6c757d);
}

/* Popup mode */
.knm-dtp-popup {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    margin-top: 0.25rem;
    border: 1px solid var(--knm-cal-border);
    border-radius: var(--knm-cal-radius);
    box-shadow: var(--knm-cal-shadow);
    background: var(--knm-cal-bg);
    display: none;
    overflow: hidden;
}

.knm-datetimepicker--open .knm-dtp-popup {
    display: block;
    animation: knm-dtp-fadein 0.15s ease-out;
}

.knm-datetimepicker--dropup .knm-dtp-popup {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 0.25rem;
}

/* Inline mode */
.knm-dtp-inline {
    margin-top: 0.5rem;
    border: 1px solid var(--knm-cal-border);
    border-radius: var(--knm-cal-radius);
    overflow: hidden;
}

.knm-dtp-inline .knm-cal {
    width: 100%;
}

/* Dialog mode */
.knm-dtp-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: knm-dtp-fadein 0.2s ease-out;
}

.knm-dtp-dialog {
    border: 1px solid var(--knm-cal-border);
    border-radius: calc(var(--knm-cal-radius) * 2);
    box-shadow: var(--knm-cal-shadow);
    background: var(--knm-cal-bg);
    overflow: hidden;
    max-width: 90vw;
}

@keyframes knm-dtp-fadein {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* -- Dark mode overrides -- */
[data-bs-theme="dark"] {
    --knm-cal-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    --knm-cal-other-opacity: 0.25;
}

/* ====================================================================
   KNMCheckbox
   ==================================================================== */

.knm-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.knm-checkbox--disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.knm-checkbox__box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--knm-border-radius, 0.25rem);
    background: transparent;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
    color: transparent;
    font-size: 0.75rem;
}

.knm-checkbox__box:hover:not(.knm-checkbox--disabled .knm-checkbox__box) {
    border-color: var(--knm-primary, #0d6efd);
}

/* Checked */
.knm-checkbox--checked .knm-checkbox__box {
    background: var(--knm-primary, #0d6efd);
    border-color: var(--knm-primary, #0d6efd);
    color: #fff;
}

/* Indeterminate */
.knm-checkbox--indeterminate .knm-checkbox__box {
    background: var(--knm-primary, #0d6efd);
    border-color: var(--knm-primary, #0d6efd);
    color: #fff;
}

/* Shapes */
.knm-checkbox--rounded .knm-checkbox__box {
    border-radius: 0.5rem;
}

.knm-checkbox--circle .knm-checkbox__box {
    border-radius: 50%;
}

/* Sizes */
.knm-checkbox--sm .knm-checkbox__box {
    width: 1rem;
    height: 1rem;
    font-size: 0.625rem;
    border-width: 1.5px;
}

.knm-checkbox--lg .knm-checkbox__box {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.875rem;
}

.knm-checkbox__label {
    font-size: 0.875rem;
    color: var(--bs-body-color, #212529);
}

.knm-checkbox--disabled .knm-checkbox__label {
    color: var(--bs-secondary-color, #6c757d);
}

/* Validation states */
.knm-checkbox--invalid .knm-checkbox__box {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

.knm-checkbox--invalid.knm-checkbox--checked .knm-checkbox__box {
    background: var(--bs-form-invalid-border-color, #dc3545);
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

.knm-checkbox--invalid .knm-checkbox__label {
    color: var(--bs-form-invalid-border-color, #dc3545);
}

.knm-checkbox--valid .knm-checkbox__box {
    border-color: var(--bs-form-valid-border-color, #198754);
}

.knm-checkbox--valid.knm-checkbox--checked .knm-checkbox__box {
    background: var(--bs-form-valid-border-color, #198754);
    border-color: var(--bs-form-valid-border-color, #198754);
}

/* Dark mode */
[data-bs-theme="dark"] .knm-checkbox__box {
    border-color: var(--bs-border-color, #495057);
}

/* ─── KNMSelect ─────────────────────────────────────────────────────── */

.knm-select {
    --knm-select-dropdown-bg: var(--bs-body-bg, #fff);
    --knm-select-dropdown-border: var(--bs-border-color, #dee2e6);
    --knm-select-dropdown-shadow: 0 4px 12px rgba(var(--knm-primary-rgb, 13, 110, 253), 0.12);
    --knm-select-dropdown-radius: var(--knm-border-radius, 0.375rem);
    --knm-select-option-hover-bg: rgba(var(--knm-primary-rgb, 13, 110, 253), 0.08);
    --knm-select-option-selected-bg: rgba(var(--knm-primary-rgb, 13, 110, 253), 0.12);
    --knm-select-option-selected-color: var(--knm-primary, var(--bs-primary, #0d6efd));
    --knm-select-chip-bg: rgba(var(--knm-primary-rgb, 13, 110, 253), 0.1);
    --knm-select-chip-color: var(--knm-primary, var(--bs-primary, #0d6efd));
    --knm-select-chip-radius: 1rem;
    --knm-select-arrow-color: var(--bs-secondary-color, #6c757d);
}

/* Trigger — form-control overrides for custom select content */
.knm-select .form-control {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    padding-right: 2.5rem !important;
    line-height: 1.5;
    min-height: calc(1.5em + 0.75rem + calc(var(--bs-border-width, 1px) * 2));
}
.knm-select .form-control-sm {
    min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width, 1px) * 2));
    font-size: 0.875rem;
}
.knm-select .form-control-lg {
    min-height: calc(1.5em + 1rem + calc(var(--bs-border-width, 1px) * 2));
    font-size: 1.25rem;
}

.knm-select .form-control:focus {
    border-color: var(--knm-primary, var(--bs-primary, #0d6efd));
    box-shadow: 0 0 0 0.2rem rgba(var(--knm-primary-rgb, 13, 110, 253), 0.15);
}

/* Validation states */
.knm-select .form-control.is-invalid {
    border-color: var(--bs-danger, #dc3545);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 2.5rem center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
.knm-select .form-control.is-invalid:focus {
    border-color: var(--bs-danger, #dc3545);
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
.knm-select .form-control.is-valid {
    border-color: var(--bs-success, #198754);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 2.5rem center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
.knm-select .form-control.is-valid:focus {
    border-color: var(--bs-success, #198754);
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}

/* Bordered — validation on container border */
.knm-select .form-label-group.in-border:has(.is-invalid) {
    border-color: var(--bs-danger, #dc3545);
}
.knm-select .form-label-group.in-border:has(.is-valid) {
    border-color: var(--bs-success, #198754);
}

/* Bordered — validation icons (re-add background-image over transparent bg) */
.knm-select .form-label-group.in-border > .form-control.is-invalid {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") no-repeat right 2.5rem center / calc(.75em + .375rem) calc(.75em + .375rem) !important;
}
.knm-select .form-label-group.in-border > .form-control.is-valid {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") no-repeat right 2.5rem center / calc(.75em + .375rem) calc(.75em + .375rem) !important;
}

/* Borderless — validation on bottom border + icons */
.knm-select .form-label-group.borderless > .form-control.is-invalid {
    border-bottom-color: var(--bs-danger, #dc3545) !important;
    border-bottom-width: 2px !important;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") no-repeat right 2.5rem center / calc(.75em + .375rem) calc(.75em + .375rem) !important;
}
.knm-select .form-label-group.borderless > .form-control.is-valid {
    border-bottom-color: var(--bs-success, #198754) !important;
    border-bottom-width: 2px !important;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") no-repeat right 2.5rem center / calc(.75em + .375rem) calc(.75em + .375rem) !important;
}

/* Filled — validation on bottom border */
.knm-select .form-label-group.filled > .form-control.is-invalid {
    border-bottom-color: var(--bs-danger, #dc3545) !important;
}
.knm-select .form-label-group.filled > .form-control.is-valid {
    border-bottom-color: var(--bs-success, #198754) !important;
}

/* Adornments — flat style (no background, no border separation) */
.knm-select .input-group .input-group-text {
    background: transparent;
    border: none;
    color: var(--bs-secondary-color, #6c757d);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.knm-select .input-group {
    border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
    border-radius: var(--knm-border-radius, 0.375rem);
    background: var(--bs-body-bg, #fff);
}
.knm-select .input-group .form-control {
    border: none !important;
    box-shadow: none !important;
}
.knm-select .input-group:focus-within {
    border-color: var(--knm-primary, var(--bs-primary, #0d6efd));
    box-shadow: 0 0 0 0.2rem rgba(var(--knm-primary-rgb, 13, 110, 253), 0.15);
}
/* Rounded — pill input-group */
.knm-select.knm-layout-rounded .input-group {
    border-radius: 50rem;
}
/* Validation on input-group border */
.knm-select .input-group:has(.is-invalid) {
    border-color: var(--bs-danger, #dc3545);
}
.knm-select .input-group:has(.is-invalid):focus-within {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
.knm-select .input-group:has(.is-valid) {
    border-color: var(--bs-success, #198754);
}
.knm-select .input-group:has(.is-valid):focus-within {
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}
/* Suffix button — no border separation */
.knm-select .input-group .btn {
    border: none;
    border-left: 1px solid var(--bs-border-color, #dee2e6);
}

/* Disabled state */
.knm-select .form-control[disabled] {
    background-color: var(--bs-secondary-bg, #e9ecef);
    opacity: 1;
    cursor: not-allowed;
    color: var(--bs-secondary-color, #6c757d);
}
.knm-select .form-control[disabled] .knm-select__arrow {
    color: var(--bs-secondary-color, #6c757d);
}
.knm-select .form-label-group.in-border > .form-control[disabled],
.knm-select .form-label-group.borderless > .form-control[disabled] {
    background: var(--bs-secondary-bg, #e9ecef) !important;
}

/* Value & Placeholder */
.knm-select__value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.knm-select__placeholder {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bs-secondary-color, #6c757d);
}

/* Arrow */
.knm-select__arrow {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--knm-select-arrow-color);
    transition: transform 0.2s ease;
    pointer-events: none;
    font-size: 0.75rem;
}

.knm-select__arrow--open {
    transform: translateY(-50%) rotate(180deg);
}

/* Clear button */
.knm-select__clear {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.75rem;
    opacity: 0.6;
    z-index: 2;
    pointer-events: auto;
    z-index: 1;
}

.knm-select__clear:hover {
    opacity: 1;
    color: var(--bs-danger, #dc3545);
}

/* Dropdown panel */
.knm-select__dropdown {
    border: 1px solid var(--knm-select-dropdown-border);
    border-radius: var(--knm-select-dropdown-radius);
    box-shadow: var(--knm-select-dropdown-shadow);
    background: var(--knm-select-dropdown-bg);
    padding: 0;
    margin-top: 2px;
    z-index: 1050;
    max-height: var(--knm-select-dropdown-max-h, 300px);
    width: var(--knm-select-dropdown-w, 100%);
    min-width: var(--knm-select-dropdown-min-w, max-content);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--knm-select-scrollbar-thumb, var(--knm-primary, var(--bs-primary, #0d6efd))) var(--knm-select-scrollbar-track, transparent);
}

.knm-select__dropdown::-webkit-scrollbar {
    width: 5px;
}
.knm-select__dropdown::-webkit-scrollbar-thumb {
    background: var(--knm-select-scrollbar-thumb, var(--knm-primary, var(--bs-primary, #0d6efd)));
    border-radius: 3px;
}
.knm-select__dropdown::-webkit-scrollbar-track {
    background: var(--knm-select-scrollbar-track, transparent);
}

/* ─── Grid layout (icon pickers, color pickers, emoji pickers) ──────────── */
/* IMPORTANT: only applies when the dropdown has .show, so Bootstrap's
   .dropdown-menu { display: none } stays in effect when closed. */
.knm-select__dropdown--grid.show {
    display: flex;
    flex-direction: column;
    padding: 0;
    list-style: none;
}
.knm-select__dropdown--grid .knm-select__option {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 36px;
    padding: 0;
    margin: 0;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 1.25rem;
    transition: background-color 150ms ease, transform 120ms ease;
}
.knm-select__dropdown--grid .knm-select__option:hover {
    transform: scale(1.1);
    background: var(--knm-hover-bg, #f1f3f5);
}
.knm-select__dropdown--grid .knm-select__option--highlighted {
    border-color: var(--knm-primary, #0d6efd);
    background: rgba(13, 110, 253, 0.1);
}
.knm-select__dropdown--grid .knm-select__option--selected {
    background: var(--knm-primary, #0d6efd) !important;
    color: #fff;
}
.knm-select__dropdown--grid .knm-select__check {
    display: none;
}

/* Non-virtualized grid: direct children of <ul> flow in a CSS grid (only when open). */
.knm-select__dropdown--grid.show:not(:has(.knm-select__virtual-wrapper--grid)) {
    display: grid;
    grid-template-columns: repeat(var(--knm-select-grid-cols, 8), 1fr);
    gap: 4px;
    padding: 8px;
}
.knm-select__dropdown--grid.show:not(:has(.knm-select__virtual-wrapper--grid)) > .knm-select__search,
.knm-select__dropdown--grid.show:not(:has(.knm-select__virtual-wrapper--grid)) > li:has(> hr),
.knm-select__dropdown--grid.show:not(:has(.knm-select__virtual-wrapper--grid)) > .knm-select__no-results {
    grid-column: 1 / -1;
}

/* Virtualized grid: Virtualize renders rows (one <div> per row),
   each row is itself a sub-grid. */
.knm-select__virtual-wrapper--grid {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    min-height: 0;
}
.knm-select__virtual-row {
    display: grid;
    gap: 4px;
    padding: 2px 0;
}
.knm-select__dropdown--grid .knm-select__check {
    display: none;
}

/* Search */
.knm-select__search {
    background: var(--knm-select-search-bg, rgba(var(--knm-primary-rgb, 13, 110, 253), 0.06));
}

/* Options */
.knm-select__option {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color 0.1s ease;
}

.knm-select__option:hover,
.knm-select__option--highlighted {
    background: var(--knm-select-option-hover-bg);
}

/* Checkbox accent color in multi-select */
.knm-select__option .form-check-input:checked {
    background-color: var(--knm-primary, var(--bs-primary, #0d6efd));
    border-color: var(--knm-primary, var(--bs-primary, #0d6efd));
}

.knm-select__option--selected {
    background: var(--knm-select-option-selected-bg);
    color: var(--knm-select-option-selected-color);
    font-weight: 500;
}

.knm-select__option--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.knm-select__check {
    color: var(--knm-select-option-selected-color);
}

/* Group header */
.knm-select__group {
    padding: 0.5rem 0.75rem 0.25rem;
    cursor: default;
}

/* Chips (multi-select) */
.knm-select__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: var(--knm-select-chip-bg);
    color: var(--knm-select-chip-color);
    border-radius: var(--knm-select-chip-radius);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    margin: 0.125rem;
}

.knm-select__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    font-size: 0.625rem;
    opacity: 0.7;
    line-height: 1;
}

.knm-select__chip-remove:hover {
    opacity: 1;
}

/* Multi-select trigger — wrap chips */
.knm-select--multi .form-control {
    flex-wrap: wrap;
    gap: 0.125rem;
    height: auto;
    min-height: calc(1.5em + 0.75rem + 2px);
}

/* No results */
.knm-select__no-results {
    list-style: none;
}

/* ─── KNMSelect Layout Overrides ────────────────────────────────────── */

/* Bordered — trigger inside form-label-group.in-border */
.knm-select.knm-layout-bordered .form-label-group.in-border {
    min-height: 3rem;
}
.knm-select .form-label-group.in-border > .form-control {
    border: none;
    background: transparent;
    padding: calc(var(--knm-input-padding-y, .375rem) + .5rem) var(--knm-input-padding-x, .75rem) var(--knm-input-padding-y, .375rem) !important;
    padding-right: 2.5rem !important;
    box-shadow: none;
}
.knm-layout-bordered .knm-select__value {
    padding-bottom: 1.5rem;
}
.knm-layout-bordered .knm-select__arrow {
    position: absolute !important;
    padding-bottom: 0.5rem;
}
.knm-layout-bordered .knm-select__clear {
    position: absolute !important;
    right: 2rem;
    padding-bottom: 0.5rem;
    pointer-events: auto !important;
    z-index: 2;
    cursor: pointer;
}
.knm-layout-bordered .knm-select__placeholder {
    padding-bottom: 1.5rem;
}

/* Borderless — underline only */
.knm-select .form-label-group.borderless > .form-control {
    border: none;
    border-bottom: var(--knm-input-border-width, 1px) solid var(--knm-input-border-color, #ced4da);
    border-radius: 0;
    background-color: transparent;
    padding: calc(var(--knm-input-padding-y, .375rem) + .5rem) 0 var(--knm-input-padding-y, .375rem) !important;
    padding-right: 2.5rem !important;
    box-shadow: none;
    transition: border-color var(--knm-input-outline-anim-duration, .2s) ease;
}
.knm-select .form-label-group.borderless > .form-control:focus {
    border-bottom-color: var(--knm-input-outline-border-color, var(--knm-primary, #0d6efd)) !important;
    border-bottom-width: 2px !important;
}

/* Filled — tinted background, bottom border */
.knm-select .form-label-group.filled > .form-control {
    background-color: var(--knm-input-filled-bg, rgba(0, 0, 0, 0.06));
    border: none;
    border-bottom: 2px solid var(--knm-input-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, .375rem) var(--bs-border-radius, .375rem) 0 0;
    padding: 1.25rem .75rem .375rem !important;
    padding-right: 2.5rem !important;
    min-height: calc(2.5rem + 2px);
}
.knm-select .form-label-group.filled > .form-control:focus {
    background-color: var(--knm-input-filled-bg-focus, rgba(0, 0, 0, 0.09)) !important;
    border-bottom-color: var(--knm-primary, #0d6efd) !important;
    box-shadow: none !important;
}
.knm-select .form-label-group.filled label {
    position: absolute;
    top: 1rem;
    left: .75rem;
    color: var(--bs-secondary-color, #6c757d);
    pointer-events: none;
    transition: all .15s ease;
}

/* Rounded — dropdown and chip border radius */
/* DropUp — dropdown opens above trigger */
.knm-select--dropup .knm-select__dropdown {
    bottom: 100%;
    top: auto;
    margin-bottom: 2px;
    margin-top: 0;
}

.knm-layout-rounded .knm-select__dropdown { border-radius: 1rem; }
.knm-layout-rounded .knm-select__chip { border-radius: 50rem; }

/* ─── KNMSelect Dark Mode ───────────────────────────────────────────── */

[data-bs-theme="dark"] .knm-select {
    --knm-select-dropdown-bg: var(--bs-body-bg, #212529);
    --knm-select-dropdown-border: var(--bs-border-color, #495057);
    --knm-select-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --knm-select-chip-bg: rgba(var(--knm-primary-rgb, 13, 110, 253), 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   NUMERIC INPUT — unified bordered container, 3 button layouts × 3 sizes
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --knm-numeric-btn-bg: var(--bs-secondary-bg, #e9ecef);
    --knm-numeric-btn-hover-bg: var(--bs-tertiary-bg, #dee2e6);
    --knm-numeric-btn-color: var(--bs-body-color, #212529);
    --knm-numeric-border-color: var(--bs-border-color, #dee2e6);
    --knm-numeric-focus-border-color: var(--knm-primary, #0d6efd);
    --knm-numeric-btn-disabled-opacity: 0.5;
    --knm-numeric-prefix-color: var(--bs-secondary-color, #6c757d);
    --knm-numeric-border-radius: var(--bs-border-radius, 0.375rem);
}

/* ─── Base: single bordered wrapper ─────────────────────────────── */
.knm-numeric {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--knm-numeric-border-color);
    border-radius: var(--knm-numeric-border-radius);
    background: var(--bs-body-bg, #fff);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    overflow: hidden;
}

.knm-numeric:focus-within {
    border-color: var(--knm-numeric-focus-border-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--knm-primary-rgb, 13, 110, 253), 0.25);
}

/* ─── Input: no border, grows to fill ───────────────────────────── */
.knm-numeric__input {
    border: none;
    background: transparent;
    outline: none;
    box-shadow: none !important;
    flex: 1;
    min-width: 0;
    text-align: right;
    padding: 0.375rem 0.5rem;
    font-size: inherit;
    color: var(--bs-body-color, #212529);
}

.knm-numeric__input:focus {
    box-shadow: none !important;
    outline: none;
}

.knm-numeric__input::placeholder {
    color: var(--bs-secondary-color, #6c757d);
}

.knm-numeric--split .knm-numeric__input {
    text-align: center;
}

/* ─── Prefix / Suffix ───────────────────────────────────────────── */
.knm-numeric__prefix,
.knm-numeric__suffix {
    color: var(--knm-numeric-prefix-color);
    font-size: 0.875em;
    white-space: nowrap;
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
    user-select: none;
    flex-shrink: 0;
}

.knm-numeric__prefix {
    border-right: 1px solid var(--knm-numeric-border-color);
    background: var(--knm-numeric-btn-bg);
}

.knm-numeric__suffix {
    border-left: 1px solid var(--knm-numeric-border-color);
    background: var(--knm-numeric-btn-bg);
}

/* ─── Split buttons (- left, + right, inside border) ────────────── */
.knm-numeric__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--knm-numeric-btn-bg);
    border: none;
    color: var(--knm-numeric-btn-color);
    cursor: pointer;
    padding: 0 0.75rem;
    font-size: 1rem;
    transition: background 0.15s;
    flex-shrink: 0;
}

.knm-numeric__btn--dec {
    border-right: 1px solid var(--knm-numeric-border-color);
}

.knm-numeric__btn--inc {
    border-left: 1px solid var(--knm-numeric-border-color);
}

.knm-numeric__btn:hover:not(:disabled) {
    background: var(--knm-numeric-btn-hover-bg);
}

.knm-numeric__btn:disabled {
    opacity: var(--knm-numeric-btn-disabled-opacity);
    cursor: not-allowed;
}

/* ─── Spinner (up/down stacked, inside border right) ────────────── */
.knm-numeric__spinner {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--knm-numeric-border-color);
    width: 2.25rem;
    flex-shrink: 0;
}

.knm-numeric__spin-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--knm-numeric-btn-bg);
    border: none;
    color: var(--knm-numeric-btn-color);
    cursor: pointer;
    padding: 0;
    font-size: 0.8rem;
    line-height: 1;
    transition: background 0.15s;
}

.knm-numeric__spin-btn:first-child {
    border-bottom: 1px solid var(--knm-numeric-border-color);
}

.knm-numeric__spin-btn:hover:not(:disabled) {
    background: var(--knm-numeric-btn-hover-bg);
}

.knm-numeric__spin-btn:disabled {
    opacity: var(--knm-numeric-btn-disabled-opacity);
    cursor: not-allowed;
}

/* ─── Sizes ─────────────────────────────────────────────────────── */
.knm-numeric--sm { font-size: 0.875rem; }
.knm-numeric--sm .knm-numeric__input { padding: 0.25rem 0.4rem; }
.knm-numeric--sm .knm-numeric__btn { padding: 0 0.5rem; font-size: 0.75rem; }
.knm-numeric--sm .knm-numeric__spinner { width: 1.5rem; }
.knm-numeric--sm .knm-numeric__spin-btn { font-size: 0.5rem; }

.knm-numeric--lg { font-size: 1.125rem; }
.knm-numeric--lg .knm-numeric__input { padding: 0.5rem 0.75rem; }
.knm-numeric--lg .knm-numeric__btn { padding: 0 0.85rem; font-size: 1rem; }
.knm-numeric--lg .knm-numeric__spinner { width: 2.25rem; }
.knm-numeric--lg .knm-numeric__spin-btn { font-size: 0.75rem; }

/* ─── Disabled ──────────────────────────────────────────────────── */
.knm-numeric--disabled {
    opacity: 0.65;
    pointer-events: none;
}

/* ─── Rounded variant ───────────────────────────────────────────── */
.knm-input-rounded .knm-numeric {
    border-radius: 2rem;
}

/* ─── Validation states ─────────────────────────────────────────── */
.knm-numeric:has(.is-invalid) {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}
.knm-numeric:has(.is-invalid):focus-within {
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
.knm-numeric:has(.is-valid) {
    border-color: var(--bs-form-valid-border-color, #198754);
}
.knm-numeric:has(.is-valid):focus-within {
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

/* ─── Dark mode ─────────────────────────────────────────────────── */
[data-bs-theme="dark"] .knm-numeric {
    background: var(--bs-body-bg, #212529);
    border-color: var(--bs-border-color, #495057);
}
[data-bs-theme="dark"] .knm-numeric__btn,
[data-bs-theme="dark"] .knm-numeric__spin-btn,
[data-bs-theme="dark"] .knm-numeric__prefix,
[data-bs-theme="dark"] .knm-numeric__suffix {
    background: var(--bs-tertiary-bg, #2b3035);
    border-color: var(--bs-border-color, #495057);
}
[data-bs-theme="dark"] .knm-numeric__btn:hover:not(:disabled),
[data-bs-theme="dark"] .knm-numeric__spin-btn:hover:not(:disabled) {
    background: var(--bs-secondary-bg, #3a3f44);
}

/* ═══════════════════════════════════════════════════════════════════════════
   INPUT MASK
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-inputmask .form-control {
    letter-spacing: 0.05em;
}

.knm-inputmask .form-control.is-valid {
    border-color: var(--bs-form-valid-border-color, #198754);
}

.knm-inputmask .form-control.is-invalid {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

/* Show mask placeholder in bordered/borderless even unfocused */
.knm-inputmask .form-label-group.in-border input:placeholder-shown::placeholder,
.knm-inputmask .form-label-group.borderless input:placeholder-shown::placeholder {
    color: var(--knm-input-placeholder-color, #6c757d);
    opacity: 0.5;
}

/* Float label up when placeholder is shown (mask inputs always need the format visible) */
.knm-inputmask .form-label-group.in-border input:placeholder-shown ~ span label {
    top: 0;
    transform: translateY(-50%);
    font-size: .75rem;
    background-color: var(--knm-input-bg, var(--bs-body-bg, #fff));
    padding: 0 .25rem;
}

.knm-inputmask .form-label-group.borderless input:placeholder-shown ~ label {
    top: 0;
    transform: translateY(-50%) scale(.75);
    transform-origin: left top;
}

/* InputMask adornments: float label when inside adornment wrapper */
.knm-inputmask .form-label-group.in-border .knm-adornment-wrapper ~ span label {
    top: 0;
    transform: translateY(-50%);
    font-size: .75rem;
    background-color: var(--knm-input-bg, var(--bs-body-bg, #fff));
    padding: 0 .25rem;
}

.knm-inputmask .form-label-group.borderless .knm-adornment-wrapper ~ label {
    top: 0;
    transform: translateY(-50%) scale(.75);
    transform-origin: left top;
}

/* InputMask adornments: show placeholder inside adornment wrapper */
.knm-inputmask .form-label-group.in-border .knm-adornment-wrapper input:placeholder-shown::placeholder,
.knm-inputmask .form-label-group.borderless .knm-adornment-wrapper input:placeholder-shown::placeholder {
    color: var(--knm-input-placeholder-color, #6c757d);
    opacity: 0.5;
}

/* InputMask adornments: prefix offset for bordered label */
.knm-inputmask .form-label-group.in-border .knm-adornment-wrapper--prefix ~ span label {
    left: 2rem;
}

/* InputMask floating: always raise label (mask placeholder always visible) */
.knm-inputmask.form-floating > .knm-adornment-wrapper ~ label {
    opacity: .65;
    transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
}

/* InputMask floating + prefix: label at left:0 when raised */
.knm-inputmask.form-floating > .knm-adornment-wrapper--prefix ~ label {
    left: 0;
}

/* InputMask floating: always show mask placeholder */
.knm-inputmask.form-floating > .knm-adornment-wrapper input::placeholder {
    color: var(--knm-input-placeholder-color, #6c757d);
    opacity: 0.5;
    position: static;
}

/* InputMask filled: always raise label */
.knm-inputmask .form-label-group.filled .knm-adornment-wrapper ~ label {
    opacity: .65;
    transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
}

/* InputMask filled + prefix: offset label */
.knm-inputmask .form-label-group.filled .knm-adornment-wrapper--prefix ~ label {
    left: 2rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANGUAGE SELECTOR — KNMLanguageSelector component
   ═══════════════════════════════════════════════════════════════════════════ */

.knm-langsel {
    display: inline-flex;
    align-items: center;
    gap: var(--knm-langsel-gap, 0.5rem);
    color: var(--knm-langsel-text-color, var(--bs-body-color, #212529));
}

.knm-langsel--inline {
    flex-wrap: wrap;
}

.knm-langsel__row {
    display: inline-flex;
    align-items: center;
    gap: var(--knm-langsel-gap, 0.5rem);
}

.knm-langsel__flag {
    display: inline-block;
    border-radius: var(--knm-langsel-flag-radius, 2px);
    box-shadow: var(--knm-langsel-flag-shadow, 0 0 0 1px rgba(0, 0, 0, 0.05));
    object-fit: cover;
    flex-shrink: 0;
}

.knm-langsel__flag--round {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}

.knm-langsel__label {
    font-size: 0.9375rem;
    line-height: 1.2;
    white-space: nowrap;
}

.knm-langsel__inline-item {
    display: inline-flex;
    align-items: center;
    gap: var(--knm-langsel-gap, 0.5rem);
    padding: var(--knm-langsel-item-padding-y, 0.375rem) var(--knm-langsel-item-padding-x, 0.625rem);
    background: var(--knm-langsel-item-bg, transparent);
    color: var(--knm-langsel-text-color, var(--bs-body-color, #212529));
    border: 1px solid var(--knm-langsel-border-color, var(--bs-border-color, #dee2e6));
    border-radius: var(--knm-langsel-radius, 0.375rem);
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.knm-langsel__inline-item:hover {
    background: var(--knm-langsel-item-hover-bg, var(--bs-secondary-bg, #e9ecef));
}

.knm-langsel__inline-item.is-selected {
    background: var(--knm-langsel-item-active-bg, var(--knm-primary, #0d6efd));
    color: var(--knm-langsel-item-active-color, #fff);
    border-color: var(--knm-langsel-item-active-bg, var(--knm-primary, #0d6efd));
}

[data-bs-theme="dark"] .knm-langsel {
    color: var(--knm-langsel-text-color, var(--bs-body-color, #f8f9fa));
}

[data-bs-theme="dark"] .knm-langsel__flag {
    box-shadow: var(--knm-langsel-flag-shadow, 0 0 0 1px rgba(255, 255, 255, 0.1));
}

/* ─── Dropdown mode — natural overflow via CSS variables ───────────── */

.knm-langsel--dropdown {
    /* Let the dropdown panel grow up to a sensible viewport-relative height. */
    --knm-select-dropdown-max-h: 60vh;
}

/* When the trigger renders a flag (ShowFlagInTrigger=true), tighten the
   bottom padding of the form-control so the flag stays vertically centered. */
.knm-langsel--with-flag .form-control {
    padding-bottom: 2px;
}

/* ─── Compact mode ──────────────────────────────────────────────────── */

.knm-langsel--compact .knm-langsel__compact-wrap {
    position: relative;
    display: inline-block;
}

.knm-langsel__compact-trigger {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 0;
    display: inline-flex;
}

.knm-langsel__compact-trigger:focus-visible {
    outline: 2px solid var(--knm-primary, #0d6efd);
    outline-offset: 2px;
    border-radius: 50%;
}

.knm-langsel__compact-popup {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 1050;
    min-width: 12rem;
    padding: 0.375rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--knm-langsel-border-color, var(--bs-border-color, #dee2e6));
    border-radius: var(--knm-langsel-radius, 0.375rem);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.knm-langsel__compact-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: var(--knm-langsel-item-padding-y, 0.375rem) var(--knm-langsel-item-padding-x, 0.625rem);
    background: transparent;
    border: none;
    border-radius: calc(var(--knm-langsel-radius, 0.375rem) - 2px);
    cursor: pointer;
    color: var(--knm-langsel-text-color, var(--bs-body-color, #212529));
    text-align: left;
    width: 100%;
    transition: background-color 0.15s ease-in-out;
}

.knm-langsel__compact-item:hover {
    background: var(--knm-langsel-item-hover-bg, var(--bs-secondary-bg, #e9ecef));
}

.knm-langsel__compact-item.is-selected {
    background: var(--knm-langsel-item-active-bg, var(--knm-primary, #0d6efd));
    color: var(--knm-langsel-item-active-color, #fff);
}

[data-bs-theme="dark"] .knm-langsel__compact-popup {
    background: var(--bs-body-bg, #212529);
    border-color: var(--knm-langsel-border-color, var(--bs-border-color, #495057));
}

/* ═══════════════════════════════════════════════════════════════════════════
   RADIO GROUP — KNMRadioGroup component
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --knm-radio-group-gap: 0.5rem;
    --knm-radio-group-horizontal-gap: 1.25rem;
}

.knm-radio-group {
    display: flex;
    color: var(--bs-body-color, #212529);
}

.knm-radio-group--vertical {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--knm-radio-group-gap, 0.5rem);
}

.knm-radio-group--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--knm-radio-group-horizontal-gap, 1.25rem);
}

.knm-radio-group .form-check {
    margin-bottom: 0;
}

/* ─── KNMRadioGroup style variants ─────────────────────────────────── */

/* Hide native radio for non-default styles (label is the visible target) */
.knm-radio-group--btngroup .form-check-input,
.knm-radio-group--minimal .form-check-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    margin: 0;
}

.knm-radio-group--btngroup .form-check,
.knm-radio-group--minimal .form-check {
    padding: 0;
    margin: 0;
    min-height: 0;
    display: block;
}

/* ── Chip / Pill styles use the KNMChip component directly ──
   The radio group renders <KNMChip> instead of form-check + input,
   so the visual look is inherited automatically via --knm-chip-*. */

.knm-radio-group--chip,
.knm-radio-group--pill {
    /* Pill is the only difference: KNMChip is already pill-shaped by default
       (border-radius from --knm-chip-border-radius). For Chip style we override
       to a squared border-radius. */
}

.knm-radio-group--chip .knm-chip {
    border-radius: 0.5rem !important;
}

.knm-radio-chip--disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* ── Button group style ── */
.knm-radio-group--btngroup {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    overflow: hidden;
    flex-wrap: wrap;
}

.knm-radio-group--btngroup .form-check + .form-check {
    border-left: 1px solid var(--bs-border-color, #dee2e6);
}

.knm-radio-group--btngroup .form-check-label {
    display: block;
    padding: 0.5rem 1.25rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    margin: 0;
    user-select: none;
}

.knm-radio-group--btngroup .form-check-label:hover {
    background: var(--bs-secondary-bg, #e9ecef);
}

.knm-radio-group--btngroup .form-check:has(.form-check-input:checked) .form-check-label {
    background: var(--knm-primary, #0d6efd);
    color: #fff;
    font-weight: 600;
}

.knm-radio-group--btngroup .form-check:has(.form-check-input:disabled) .form-check-label {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Minimal style ── */
.knm-radio-group--minimal .form-check-label {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease-in-out;
    margin: 0;
}

.knm-radio-group--minimal .form-check-label:hover {
    color: var(--knm-primary, #0d6efd);
}

.knm-radio-group--minimal .form-check:has(.form-check-input:checked) .form-check-label {
    color: var(--knm-primary, #0d6efd);
    font-weight: 600;
    border-bottom-color: var(--knm-primary, #0d6efd);
}

.knm-radio-group--minimal .form-check:has(.form-check-input:disabled) .form-check-label {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Focus-visible state for keyboard accessibility on btngroup/minimal (input is hidden) */
.knm-radio-group--btngroup .form-check:has(.form-check-input:focus-visible) .form-check-label,
.knm-radio-group--minimal .form-check:has(.form-check-input:focus-visible) .form-check-label {
    outline: 2px solid var(--knm-primary, #0d6efd);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SLIDER — KNMSlider component
   All colors / sizes are exposed via --knm-slider-* CSS variables so consumers
   can override per-instance via inline style or per-app via :root.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Track */
    --knm-slider-track-bg: #e9ecef;
    --knm-slider-track-height: 6px;
    --knm-slider-track-radius: 999px;

    /* Fill (left of thumb on Filled / Pill / Neumorphic) */
    --knm-slider-fill-color: var(--knm-primary, #0d6efd);

    /* Thumb */
    --knm-slider-thumb-size: 18px;
    --knm-slider-thumb-bg: var(--knm-primary, #0d6efd);
    --knm-slider-thumb-border: #ffffff;
    --knm-slider-thumb-border-width: 2px;
    --knm-slider-thumb-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

    /* Bubble */
    --knm-slider-bubble-bg: var(--knm-primary, #0d6efd);
    --knm-slider-bubble-color: #ffffff;
    --knm-slider-bubble-radius: 6px;
    --knm-slider-bubble-padding: 2px 8px;
    --knm-slider-bubble-font-size: 0.8125rem;

    /* Inline value label */
    --knm-slider-label-color: var(--bs-body-color, #212529);
    --knm-slider-label-font-size: 0.875rem;
    --knm-slider-label-min-width: 3ch;

    /* Tick markers (Stepped) */
    --knm-slider-tick-color: #adb5bd;
    --knm-slider-tick-size: 4px;

    /* Gradient (Gradient style) */
    --knm-slider-grad-from: #ef4444;
    --knm-slider-grad-to: #22c55e;

    /* Disabled state */
    --knm-slider-disabled-opacity: 0.55;
}

[data-bs-theme="dark"] {
    --knm-slider-track-bg: #343a40;
    --knm-slider-thumb-border: #1f2937;
    --knm-slider-tick-color: #6c757d;
    --knm-slider-label-color: #e9ecef;
}

/* Wrapper layout */
.knm-slider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.knm-slider__track-wrap {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-height: var(--knm-slider-thumb-size);
}

.knm-slider__value {
    color: var(--knm-slider-label-color);
    font-size: var(--knm-slider-label-font-size);
    font-variant-numeric: tabular-nums;
    min-width: var(--knm-slider-label-min-width);
    text-align: right;
    flex: 0 0 auto;
}

.knm-slider__bubble {
    position: absolute;
    bottom: calc(100% + 6px);
    left: var(--knm-slider-progress, 0%);
    transform: translateX(-50%);
    background: var(--knm-slider-bubble-bg);
    color: var(--knm-slider-bubble-color);
    padding: var(--knm-slider-bubble-padding);
    border-radius: var(--knm-slider-bubble-radius);
    font-size: var(--knm-slider-bubble-font-size);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.knm-slider__bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--knm-slider-bubble-bg);
}

.knm-slider:hover .knm-slider__bubble,
.knm-slider:focus-within .knm-slider__bubble {
    opacity: 1;
}

/* Native input range — base reset (we re-style track + thumb) */
.knm-slider__input.form-range {
    width: 100%;
    height: var(--knm-slider-thumb-size);
    padding: 0;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}

.knm-slider__input.form-range:focus {
    outline: none;
    box-shadow: none;
}

/* Track — webkit */
.knm-slider__input.form-range::-webkit-slider-runnable-track {
    height: var(--knm-slider-track-height);
    background: var(--knm-slider-track-bg);
    border-radius: var(--knm-slider-track-radius);
    border: none;
}
/* Track — moz */
.knm-slider__input.form-range::-moz-range-track {
    height: var(--knm-slider-track-height);
    background: var(--knm-slider-track-bg);
    border-radius: var(--knm-slider-track-radius);
    border: none;
}

/* Thumb — webkit */
.knm-slider__input.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--knm-slider-thumb-size);
    height: var(--knm-slider-thumb-size);
    background: var(--knm-slider-thumb-bg);
    border: var(--knm-slider-thumb-border-width) solid var(--knm-slider-thumb-border);
    border-radius: 50%;
    box-shadow: var(--knm-slider-thumb-shadow);
    cursor: pointer;
    margin-top: calc((var(--knm-slider-track-height) - var(--knm-slider-thumb-size)) / 2);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.knm-slider__input.form-range::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}
/* Thumb — moz */
.knm-slider__input.form-range::-moz-range-thumb {
    width: var(--knm-slider-thumb-size);
    height: var(--knm-slider-thumb-size);
    background: var(--knm-slider-thumb-bg);
    border: var(--knm-slider-thumb-border-width) solid var(--knm-slider-thumb-border);
    border-radius: 50%;
    box-shadow: var(--knm-slider-thumb-shadow);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.knm-slider__input.form-range::-moz-range-thumb:hover {
    transform: scale(1.1);
}

/* ─── Style: Filled ──────────────────────────────────────────────────────── */
.knm-slider--filled .knm-slider__input.form-range::-webkit-slider-runnable-track {
    background: linear-gradient(
        to right,
        var(--knm-slider-fill-color) 0%,
        var(--knm-slider-fill-color) var(--knm-slider-progress, 0%),
        var(--knm-slider-track-bg) var(--knm-slider-progress, 0%),
        var(--knm-slider-track-bg) 100%
    );
}
.knm-slider--filled .knm-slider__input.form-range::-moz-range-track {
    background: linear-gradient(
        to right,
        var(--knm-slider-fill-color) 0%,
        var(--knm-slider-fill-color) var(--knm-slider-progress, 0%),
        var(--knm-slider-track-bg) var(--knm-slider-progress, 0%),
        var(--knm-slider-track-bg) 100%
    );
}

/* ─── Style: Stepped (uses datalist + tick markers) ──────────────────────── */
.knm-slider--stepped .knm-slider__input.form-range::-webkit-slider-runnable-track {
    background:
        linear-gradient(
            to right,
            var(--knm-slider-fill-color) 0%,
            var(--knm-slider-fill-color) var(--knm-slider-progress, 0%),
            var(--knm-slider-track-bg) var(--knm-slider-progress, 0%),
            var(--knm-slider-track-bg) 100%
        );
}
.knm-slider--stepped {
    padding-bottom: 0.75rem;
}
.knm-slider--stepped .knm-slider__track-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% + var(--knm-slider-track-height));
    height: var(--knm-slider-tick-size);
    background-image: radial-gradient(circle, var(--knm-slider-tick-color) 1px, transparent 1.5px);
    background-size: calc(100% / 10) 100%;
    background-repeat: repeat-x;
    pointer-events: none;
}

/* ─── Style: Pill (chunky) ───────────────────────────────────────────────── */
.knm-slider--pill {
    --knm-slider-track-height: 10px;
    --knm-slider-thumb-size: 24px;
    --knm-slider-thumb-shadow: 0 3px 10px rgba(13, 110, 253, 0.35);
}
.knm-slider--pill .knm-slider__input.form-range::-webkit-slider-runnable-track {
    background: linear-gradient(
        to right,
        var(--knm-slider-fill-color) 0%,
        var(--knm-slider-fill-color) var(--knm-slider-progress, 0%),
        var(--knm-slider-track-bg) var(--knm-slider-progress, 0%),
        var(--knm-slider-track-bg) 100%
    );
}
.knm-slider--pill .knm-slider__input.form-range::-moz-range-track {
    background: linear-gradient(
        to right,
        var(--knm-slider-fill-color) 0%,
        var(--knm-slider-fill-color) var(--knm-slider-progress, 0%),
        var(--knm-slider-track-bg) var(--knm-slider-progress, 0%),
        var(--knm-slider-track-bg) 100%
    );
}

/* ─── Style: Minimal (hairline) ──────────────────────────────────────────── */
.knm-slider--minimal {
    --knm-slider-track-height: 2px;
    --knm-slider-thumb-size: 12px;
    --knm-slider-thumb-shadow: none;
    --knm-slider-thumb-border-width: 0px;
}
.knm-slider--minimal .knm-slider__input.form-range::-webkit-slider-runnable-track {
    background: linear-gradient(
        to right,
        var(--knm-slider-fill-color) 0%,
        var(--knm-slider-fill-color) var(--knm-slider-progress, 0%),
        var(--knm-slider-track-bg) var(--knm-slider-progress, 0%),
        var(--knm-slider-track-bg) 100%
    );
}
.knm-slider--minimal .knm-slider__input.form-range::-moz-range-track {
    background: linear-gradient(
        to right,
        var(--knm-slider-fill-color) 0%,
        var(--knm-slider-fill-color) var(--knm-slider-progress, 0%),
        var(--knm-slider-track-bg) var(--knm-slider-progress, 0%),
        var(--knm-slider-track-bg) 100%
    );
}
.knm-slider--minimal .knm-slider__input.form-range::-webkit-slider-thumb {
    opacity: 0.7;
}
.knm-slider--minimal:hover .knm-slider__input.form-range::-webkit-slider-thumb,
.knm-slider--minimal:focus-within .knm-slider__input.form-range::-webkit-slider-thumb {
    opacity: 1;
}

/* ─── Style: Gradient ────────────────────────────────────────────────────── */
.knm-slider--gradient .knm-slider__input.form-range::-webkit-slider-runnable-track {
    background: linear-gradient(to right, var(--knm-slider-grad-from), var(--knm-slider-grad-to));
}
.knm-slider--gradient .knm-slider__input.form-range::-moz-range-track {
    background: linear-gradient(to right, var(--knm-slider-grad-from), var(--knm-slider-grad-to));
}
.knm-slider--gradient {
    --knm-slider-thumb-bg: #ffffff;
    --knm-slider-thumb-border: rgba(0, 0, 0, 0.15);
    --knm-slider-thumb-border-width: 1px;
}

/* ─── Style: Neumorphic ──────────────────────────────────────────────────── */
.knm-slider--neumorphic {
    --knm-slider-track-bg: #e0e5ec;
    --knm-slider-track-height: 8px;
    --knm-slider-thumb-bg: #ffffff;
    --knm-slider-thumb-border-width: 0px;
    --knm-slider-thumb-shadow:
        2px 2px 5px rgba(163, 177, 198, 0.6),
        -2px -2px 5px rgba(255, 255, 255, 0.9);
}
.knm-slider--neumorphic .knm-slider__input.form-range::-webkit-slider-runnable-track {
    background: linear-gradient(
        to right,
        var(--knm-slider-fill-color) 0%,
        var(--knm-slider-fill-color) var(--knm-slider-progress, 0%),
        var(--knm-slider-track-bg) var(--knm-slider-progress, 0%),
        var(--knm-slider-track-bg) 100%
    );
    box-shadow:
        inset 2px 2px 4px rgba(163, 177, 198, 0.6),
        inset -2px -2px 4px rgba(255, 255, 255, 0.9);
}
.knm-slider--neumorphic .knm-slider__input.form-range::-moz-range-track {
    background: linear-gradient(
        to right,
        var(--knm-slider-fill-color) 0%,
        var(--knm-slider-fill-color) var(--knm-slider-progress, 0%),
        var(--knm-slider-track-bg) var(--knm-slider-progress, 0%),
        var(--knm-slider-track-bg) 100%
    );
    box-shadow:
        inset 2px 2px 4px rgba(163, 177, 198, 0.6),
        inset -2px -2px 4px rgba(255, 255, 255, 0.9);
}
[data-bs-theme="dark"] .knm-slider--neumorphic {
    --knm-slider-track-bg: #2d3748;
    --knm-slider-thumb-bg: #4a5568;
    --knm-slider-thumb-shadow:
        2px 2px 5px rgba(0, 0, 0, 0.5),
        -2px -2px 5px rgba(74, 85, 104, 0.4);
}

/* ─── Sizes (override default vars) ──────────────────────────────────────── */
.knm-slider--sm {
    --knm-slider-track-height: 4px;
    --knm-slider-thumb-size: 14px;
    --knm-slider-label-font-size: 0.75rem;
}
.knm-slider--lg {
    --knm-slider-track-height: 10px;
    --knm-slider-thumb-size: 24px;
    --knm-slider-label-font-size: 1rem;
}

/* ─── Disabled state ─────────────────────────────────────────────────────── */
.knm-slider--disabled {
    opacity: var(--knm-slider-disabled-opacity);
    pointer-events: none;
}
.knm-slider--disabled .knm-slider__input.form-range::-webkit-slider-thumb {
    cursor: not-allowed;
}
.knm-slider--disabled .knm-slider__input.form-range::-moz-range-thumb {
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KNMIconPicker — thin wrapper over KNMSelect (grid mode). Only a few helpers.
   The dropdown, search, and grid are styled via .knm-select__dropdown--grid.
   ═══════════════════════════════════════════════════════════════════════════ */
.knm-icon-picker .knm-icon-picker__selected-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KNMFieldset — themed fieldset/legend wrapper with accent stripe and sizes
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── CSS Variables ─────────────────────────────────────────────────────── */
.knm-fieldset {
    --knm-fieldset-border-color: var(--bs-border-color, #dee2e6);
    --knm-fieldset-border-width: 1px;
    --knm-fieldset-border-radius: 0.375rem;
    --knm-fieldset-padding: 1rem;
    --knm-fieldset-legend-font-size: 0.9rem;
    --knm-fieldset-legend-font-weight: 600;
    --knm-fieldset-legend-color: var(--bs-body-color, #212529);
    --knm-fieldset-accent-width: 3px;
    --knm-fieldset-bg: transparent;
    --knm-fieldset-accent-primary: var(--bs-primary, #0d6efd);
    --knm-fieldset-accent-secondary: var(--bs-secondary, #6c757d);
    --knm-fieldset-accent-success: var(--bs-success, #198754);
    --knm-fieldset-accent-danger: var(--bs-danger, #dc3545);
    --knm-fieldset-accent-warning: var(--bs-warning, #ffc107);
    --knm-fieldset-accent-info: var(--bs-info, #0dcaf0);
    --knm-fieldset-accent-light: var(--bs-light, #f8f9fa);
    --knm-fieldset-accent-dark: var(--bs-dark, #212529);

    border: var(--knm-fieldset-border-width) solid var(--knm-fieldset-border-color);
    border-radius: var(--knm-fieldset-border-radius);
    padding: var(--knm-fieldset-padding);
    background: var(--knm-fieldset-bg);
    margin-bottom: 1rem;
}

/* ─── Accent stripe via knm variables (not Bootstrap classes) ───────────── */
.knm-fieldset-accent {
    border-left: var(--knm-fieldset-accent-width) solid var(--knm-fieldset-accent-color);
}
.knm-fieldset-accent-primary   { --knm-fieldset-accent-color: var(--knm-fieldset-accent-primary); }
.knm-fieldset-accent-secondary { --knm-fieldset-accent-color: var(--knm-fieldset-accent-secondary); }
.knm-fieldset-accent-success   { --knm-fieldset-accent-color: var(--knm-fieldset-accent-success); }
.knm-fieldset-accent-danger    { --knm-fieldset-accent-color: var(--knm-fieldset-accent-danger); }
.knm-fieldset-accent-warning   { --knm-fieldset-accent-color: var(--knm-fieldset-accent-warning); }
.knm-fieldset-accent-info      { --knm-fieldset-accent-color: var(--knm-fieldset-accent-info); }
.knm-fieldset-accent-light     { --knm-fieldset-accent-color: var(--knm-fieldset-accent-light); }
.knm-fieldset-accent-dark      { --knm-fieldset-accent-color: var(--knm-fieldset-accent-dark); }

/* ─── Legend ─────────────────────────────────────────────────────────────── */
.knm-fieldset-legend {
    float: none;
    width: auto;
    font-size: var(--knm-fieldset-legend-font-size);
    font-weight: var(--knm-fieldset-legend-font-weight);
    color: var(--knm-fieldset-legend-color);
    padding: 0 0.5rem;
    margin-bottom: 0;
    line-height: 1.4;
}

/* ─── Body ──────────────────────────────────────────────────────────────── */
.knm-fieldset-body {
    padding-top: 0.25rem;
}

/* ─── Sizes ─────────────────────────────────────────────────────────────── */
.knm-fieldset-sm {
    --knm-fieldset-padding: 0.625rem;
    --knm-fieldset-legend-font-size: 0.8rem;
}
.knm-fieldset-sm .knm-fieldset-body {
    padding-top: 0.125rem;
}

.knm-fieldset-lg {
    --knm-fieldset-padding: 1.5rem;
    --knm-fieldset-legend-font-size: 1.05rem;
}
.knm-fieldset-lg .knm-fieldset-body {
    padding-top: 0.375rem;
}


/* ─── Disabled state ────────────────────────────────────────────────────── */
.knm-fieldset:disabled,
.knm-fieldset[disabled] {
    opacity: 0.65;
}
.knm-fieldset:disabled .knm-fieldset-legend,
.knm-fieldset[disabled] .knm-fieldset-legend {
    color: var(--bs-secondary-color, #6c757d);
}

/* ─── Dark mode ─────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .knm-fieldset {
    --knm-fieldset-border-color: var(--bs-border-color, #495057);
    --knm-fieldset-legend-color: var(--bs-body-color, #dee2e6);
}