/* =========================================================
   General UI Kit
========================================================= */

.ui-panel {
    --ui-primary: #5b5bd6;
    --ui-primary-hover: #4949c3;
    --ui-primary-soft: rgba(91, 91, 214, 0.10);
    --ui-success: #198754;
    --ui-success-soft: rgba(25, 135, 84, 0.10);
    --ui-warning: #f59e0b;
    --ui-warning-soft: rgba(245, 158, 11, 0.12);
    --ui-danger: #dc3545;
    --ui-danger-soft: rgba(220, 53, 69, 0.10);
    --ui-info: #0ea5e9;
    --ui-info-soft: rgba(14, 165, 233, 0.10);
    --ui-dark: #475569;
    --ui-dark-soft: rgba(71, 85, 105, 0.10);
    --ui-border: #e9ecef;
    --ui-muted: #6c757d;
    --ui-title: #242535;
    --ui-text: #454652;
    --ui-surface: #ffffff;
    --ui-surface-soft: #fafafa;
    --ui-form-height: 24px;
    --ui-form-radius: 12px;
    --ui-form-border: #e3e5ed;
    --ui-form-placeholder: #a2a5b1;
    --ui-form-focus: rgba(91, 91, 214, 0.14);
    overflow: hidden;
}

    .ui-panel,
    .ui-panel * {
        box-sizing: border-box;
    }


        /* =========================================================
   Font utilities
========================================================= */

        .ui-panel .ui-text-bold {
            font-family: "irsans-bold";
        }

        .ui-panel .ui-text-primary {
            color: var(--ui-primary);
        }

        .ui-panel .ui-text-success {
            color: var(--ui-success);
        }

        .ui-panel .ui-text-warning {
            color: var(--ui-warning);
        }

        .ui-panel .ui-text-danger {
            color: var(--ui-danger);
        }

        .ui-panel .ui-text-muted {
            color: var(--ui-muted);
        }

        .ui-panel .ui-ltr-number {
            direction: ltr;
            display: inline-block;
            font-variant-numeric: tabular-nums;
        }


        /* =========================================================
   Header
========================================================= */

        .ui-panel .ui-panel-header {
            position: relative;
            padding: 1.35rem;
            background: radial-gradient( circle at 0 0, var(--ui-primary-soft), transparent 36% ), linear-gradient( 135deg, #ffffff 0%, #fafaff 100% );
            border-bottom: 1px solid var(--ui-border);
        }

        .ui-panel .ui-panel-header-icon {
            width: 48px;
            height: 48px;
            flex: 0 0 48px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 15px;
            background: var(--ui-primary-soft);
            color: var(--ui-primary);
            font-size: 1.55rem;
        }

        .ui-panel .ui-panel-title {
            margin: 0 0 0.3rem;
            color: var(--ui-title);
            font-family: "irsans-bold";
            font-size: 1rem;
        }

        .ui-panel .ui-panel-subtitle {
            margin: 0;
            color: var(--ui-muted);
            font-size: 0.82rem;
            line-height: 1.8;
        }

        .ui-panel .ui-panel-actions .btn {
            min-height: 38px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            font-family: "irsans-bold";
            font-size: 0.85rem;
        }

        .ui-panel .ui-btn-primary {
            color: #ffffff;
            background: var(--ui-primary);
            border-color: var(--ui-primary);
        }

            .ui-panel .ui-btn-primary:hover,
            .ui-panel .ui-btn-primary:focus {
                color: #ffffff;
                background: var(--ui-primary-hover);
                border-color: var(--ui-primary-hover);
            }


        /* =========================================================
   Body
========================================================= */

        .ui-panel .ui-panel-body {
            padding: 1.35rem;
        }


        /* =========================================================
   Status banner
========================================================= */

        .ui-panel .ui-status-banner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1rem 1.1rem;
            margin-bottom: 1.25rem;
            border-radius: 16px;
        }

            .ui-panel .ui-status-banner.is-primary {
                border: 1px solid rgba(91, 91, 214, 0.15);
                background: rgba(91, 91, 214, 0.045);
            }

            .ui-panel .ui-status-banner.is-success {
                border: 1px solid rgba(25, 135, 84, 0.15);
                background: rgba(25, 135, 84, 0.045);
            }

            .ui-panel .ui-status-banner.is-warning {
                border: 1px solid rgba(245, 158, 11, 0.18);
                background: rgba(245, 158, 11, 0.055);
            }

            .ui-panel .ui-status-banner.is-danger {
                border: 1px solid rgba(220, 53, 69, 0.15);
                background: rgba(220, 53, 69, 0.045);
            }

            .ui-panel .ui-status-banner.is-info {
                border: 1px solid rgba(14, 165, 233, 0.15);
                background: rgba(14, 165, 233, 0.045);
            }

        .ui-panel .ui-status-icon {
            width: 42px;
            height: 42px;
            flex: 0 0 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 13px;
            font-size: 1.35rem;
        }

        .ui-panel .ui-status-banner.is-primary .ui-status-icon {
            color: var(--ui-primary);
            background: var(--ui-primary-soft);
        }

        .ui-panel .ui-status-banner.is-success .ui-status-icon {
            color: var(--ui-success);
            background: var(--ui-success-soft);
        }

        .ui-panel .ui-status-banner.is-warning .ui-status-icon {
            color: var(--ui-warning);
            background: var(--ui-warning-soft);
        }

        .ui-panel .ui-status-banner.is-danger .ui-status-icon {
            color: var(--ui-danger);
            background: var(--ui-danger-soft);
        }

        .ui-panel .ui-status-banner.is-info .ui-status-icon {
            color: var(--ui-info);
            background: var(--ui-info-soft);
        }

        .ui-panel .ui-status-title {
            margin-bottom: 0.25rem;
            color: #343541;
            font-family: "irsans-bold";
            font-size: 0.92rem;
        }

        .ui-panel .ui-status-description {
            margin: 0;
            color: var(--ui-muted);
            font-size: 0.78rem;
            line-height: 1.8;
        }

        .ui-panel .ui-status-value {
            white-space: nowrap;
            color: var(--ui-title);
            font-family: "irsans-bold";
            font-size: 1rem;
        }

            .ui-panel .ui-status-value.is-primary {
                color: var(--ui-primary);
            }

            .ui-panel .ui-status-value.is-success {
                color: var(--ui-success);
            }

            .ui-panel .ui-status-value.is-warning {
                color: var(--ui-warning);
            }

            .ui-panel .ui-status-value.is-danger {
                color: var(--ui-danger);
            }

        .ui-panel .ui-status-value-unit {
            color: inherit;
            font-family: inherit;
            font-size: 0.75rem;
        }


        /* =========================================================
   Statistic cards
========================================================= */

        .ui-panel .ui-stat-card {
            position: relative;
            height: 100%;
            min-height: 118px;
            padding: 1rem;
            border: 1px solid var(--ui-border);
            border-radius: 16px;
            background: var(--ui-surface);
            transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
        }

            .ui-panel .ui-stat-card:hover {
                transform: translateY(-2px);
                border-color: rgba(91, 91, 214, 0.22);
                box-shadow: 0 10px 26px rgba(31, 35, 48, 0.07);
            }

        .ui-panel .ui-stat-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.75rem;
            margin-bottom: 0.8rem;
        }

        .ui-panel .ui-stat-icon {
            width: 36px;
            height: 36px;
            flex: 0 0 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 11px;
            font-size: 1.15rem;
        }

        .ui-panel .ui-stat-card.is-primary .ui-stat-icon {
            color: var(--ui-primary);
            background: var(--ui-primary-soft);
        }

        .ui-panel .ui-stat-card.is-success .ui-stat-icon {
            color: var(--ui-success);
            background: var(--ui-success-soft);
        }

        .ui-panel .ui-stat-card.is-warning .ui-stat-icon {
            color: var(--ui-warning);
            background: var(--ui-warning-soft);
        }

        .ui-panel .ui-stat-card.is-danger .ui-stat-icon {
            color: var(--ui-danger);
            background: var(--ui-danger-soft);
        }

        .ui-panel .ui-stat-card.is-info .ui-stat-icon {
            color: var(--ui-info);
            background: var(--ui-info-soft);
        }

        .ui-panel .ui-stat-card.is-dark .ui-stat-icon {
            color: var(--ui-dark);
            background: var(--ui-dark-soft);
        }

        .ui-panel .ui-stat-label {
            display: block;
            margin-bottom: 0.35rem;
            color: var(--ui-muted);
            font-size: 0.75rem;
        }

        .ui-panel .ui-stat-value {
            color: #292a38;
            font-family: "irsans-bold";
            font-size: 1rem;
            line-height: 1.6;
            font-variant-numeric: tabular-nums;
        }

            .ui-panel .ui-stat-value.is-primary {
                color: var(--ui-primary);
            }

            .ui-panel .ui-stat-value.is-success {
                color: var(--ui-success);
            }

            .ui-panel .ui-stat-value.is-warning {
                color: var(--ui-warning);
            }

            .ui-panel .ui-stat-value.is-danger {
                color: var(--ui-danger);
            }

        .ui-panel .ui-stat-unit {
            color: var(--ui-muted);
            font-family: inherit;
            font-size: 0.75rem;
            padding-inline-start: .25rem;
        }

        .ui-panel .ui-stat-note {
            display: block;
            margin-top: 0.25rem;
            color: var(--ui-muted);
            font-size: 0.75rem;
            line-height: 1.6;
        }


        /* =========================================================
   General content panel
========================================================= */

        .ui-panel .ui-content-panel {
            padding: 1.1rem;
            margin-top: 1.25rem;
            border: 1px solid var(--ui-border);
            border-radius: 16px;
            background: #fcfcfd;
        }

        .ui-panel .ui-section-title {
            margin: 0;
            color: #30313f;
            font-family: "irsans-bold";
            font-size: 1rem;
        }

        .ui-panel .ui-section-subtitle {
            margin: 0.25rem 0 0;
            color: var(--ui-muted);
            font-size: 0.8rem;
            line-height: 1.7;
        }


        /* =========================================================
   Highlight boxes
========================================================= */

        .ui-panel .ui-highlight-box {
            height: 100%;
            padding: 0.9rem 1rem;
            border-radius: 13px;
        }

            .ui-panel .ui-highlight-box.is-primary {
                border: 1px dashed rgba(91, 91, 214, 0.32);
                background: rgba(91, 91, 214, 0.045);
            }

            .ui-panel .ui-highlight-box.is-success {
                border: 1px dashed rgba(25, 135, 84, 0.32);
                background: rgba(25, 135, 84, 0.045);
            }

            .ui-panel .ui-highlight-box.is-warning {
                border: 1px dashed rgba(245, 158, 11, 0.35);
                background: rgba(245, 158, 11, 0.055);
            }

            .ui-panel .ui-highlight-box.is-danger {
                border: 1px dashed rgba(220, 53, 69, 0.30);
                background: rgba(220, 53, 69, 0.045);
            }

        .ui-panel .ui-highlight-title {
            margin-bottom: 0.3rem;
            color: var(--ui-title);
            font-family: "irsans-bold";
            font-size: 0.85rem;
        }

        .ui-panel .ui-highlight-box.is-primary .ui-highlight-title {
            color: var(--ui-primary);
        }

        .ui-panel .ui-highlight-box.is-success .ui-highlight-title {
            color: var(--ui-success);
        }

        .ui-panel .ui-highlight-box.is-warning .ui-highlight-title {
            color: #9a6500;
        }

        .ui-panel .ui-highlight-box.is-danger .ui-highlight-title {
            color: var(--ui-danger);
        }

        .ui-panel .ui-highlight-description {
            margin: 0;
            color: #5c6269;
            font-size: 0.85rem;
            line-height: 1.9;
        }


        /* =========================================================
   Progress
========================================================= */

        .ui-panel .ui-progress-box {
            height: 100%;
            padding: 0.9rem 1rem;
            border: 1px solid var(--ui-border);
            border-radius: 13px;
            background: var(--ui-surface);
        }

        .ui-panel .ui-progress-label {
            color: #3d3e49;
            font-family: "irsans-bold";
            font-size: 0.85rem;
        }

        .ui-panel .ui-progress-percent {
            color: var(--ui-primary);
            font-family: "irsans-bold";
            font-size: 0.78rem;
        }

        .ui-panel .ui-progress {
            height: 9px;
            overflow: hidden;
            margin: 0.7rem 0;
            border-radius: 20px;
            background: #ececf3;
        }

        .ui-panel .ui-progress-bar {
            height: 100%;
            border-radius: inherit;
            background: linear-gradient( 90deg, var(--ui-primary), #8585ed );
        }

        .ui-panel .ui-progress-details {
            display: flex;
            justify-content: space-between;
            gap: 0.75rem;
            color: var(--ui-muted);
            font-size: 0.8rem;
        }


        /* =========================================================
   Tabs
========================================================= */

        .ui-panel .ui-tabs-wrapper {
            margin-top: 1.35rem;
            overflow: hidden;
            border: 1px solid var(--ui-border);
            border-radius: 17px;
            background: var(--ui-surface);
        }

        .ui-panel .ui-tabs-header {
            padding: 0.8rem;
            border-bottom: 1px solid var(--ui-border);
            background: var(--ui-surface-soft);
        }

        .ui-panel .ui-tabs-nav {
            display: inline-flex;
            gap: 0.4rem;
            padding: 0.3rem;
            border-radius: 12px;
            background: #eeeef3;
        }

            .ui-panel .ui-tabs-nav .nav-link {
                min-width: 150px;
                padding: 0.65rem 1rem;
                border: 0;
                border-radius: 9px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 0.45rem;
                color: #666876;
                background: transparent;
                font-family: "irsans-bold";
                font-size: 0.85rem;
            }

                .ui-panel .ui-tabs-nav .nav-link.active {
                    color: var(--ui-primary);
                    background: #ffffff;
                    box-shadow: 0 4px 14px rgba(31, 35, 48, 0.08);
                }

        .ui-panel .ui-tab-content {
            padding: 1.1rem;
        }


        /* =========================================================
   Feature / summary card
========================================================= */

        .ui-panel .ui-feature-card {
            padding: 1rem;
            margin-bottom: 1rem;
            border: 1px solid rgba(91, 91, 214, 0.17);
            border-radius: 15px;
            background: linear-gradient( 135deg, rgba(91, 91, 214, 0.055), rgba(91, 91, 214, 0.015) );
        }

        .ui-panel .ui-feature-icon {
            width: 42px;
            height: 42px;
            flex: 0 0 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            color: var(--ui-primary);
            background: #ffffff;
            font-size: 1.25rem;
            box-shadow: 0 5px 15px rgba(31, 35, 48, 0.06);
        }

        .ui-panel .ui-feature-title {
            margin-bottom: 0.2rem;
            color: #292a38;
            font-family: "irsans-bold";
            font-size: 1rem;
        }

        .ui-panel .ui-feature-meta {
            margin: 0;
            color: var(--ui-muted);
            font-size: 0.8rem;
        }

        .ui-panel .ui-feature-value {
            white-space: nowrap;
            color: var(--ui-primary);
            font-family: "irsans-bold";
            font-size: 1rem;
        }

        .ui-panel .ui-feature-value-unit {
            color: var(--ui-muted);
            font-family: inherit;
            font-size: 0.75rem;
            padding-inline-start: .25rem;
        }


        /* =========================================================
   Tables
========================================================= */

        .ui-panel .ui-table {
            margin: 0;
            border-collapse: separate;
            border-spacing: 0;
            font-size: 0.9rem;
        }

            .ui-panel .ui-table thead th {
                padding: 0.8rem 0.75rem;
                border-top: 1px solid var(--ui-border);
                border-bottom: 1px solid var(--ui-border);
                color: #5d5e6b;
                background: #f6f6f9;
                font-family: "irsans-bold";
                font-size: 0.85rem;
                white-space: nowrap;
            }

                .ui-panel .ui-table thead th:first-child {
                    border-right: 1px solid var(--ui-border);
                    border-radius: 0 11px 11px 0;
                }

                .ui-panel .ui-table thead th:last-child {
                    border-left: 1px solid var(--ui-border);
                    border-radius: 11px 0 0 11px;
                }

            .ui-panel .ui-table tbody td {
                padding: 0.9rem 0.75rem;
                border-bottom: 1px solid #f0f0f3;
                color: var(--ui-text);
                vertical-align: middle;
            }

            .ui-panel .ui-table tbody tr {
                transition: background-color 0.16s ease;
            }

                .ui-panel .ui-table tbody tr:hover {
                    background: #fbfbfd;
                }

            .ui-panel .ui-table tfoot td {
                padding: 0.8rem 0.75rem;
                border-bottom: 1px solid var(--ui-border);
                background: #fafafa;
                font-family: "irsans-bold";
                font-size: 0.9rem;
            }

            .ui-panel .ui-table tfoot tr:first-child td {
                border-top: 1px solid var(--ui-border);
            }

        .ui-panel .ui-table-title {
            display: block;
            margin-bottom: 0.2rem;
            color: #2e2f3a;
            font-family: "irsans-bold";
            font-size: 0.9rem;
        }

        .ui-panel .ui-table-description {
            display: block;
            color: var(--ui-muted);
            font-size: 0.8rem;
            line-height: 1.6;
        }

        .ui-panel .ui-table-unit {
            display: block;
            margin-top: 0.1rem;
            color: var(--ui-muted);
            font-size: 0.75rem;
        }

        .ui-panel .ui-table-info-row td {
            padding: 0.75rem 0.9rem !important;
            border-bottom-color: rgba(14, 165, 233, 0.14) !important;
            color: #12617e !important;
            background: rgba(14, 165, 233, 0.065);
        }

        .ui-panel .ui-table-warning-row td {
            padding: 0.75rem 0.9rem !important;
            border-bottom-color: rgba(245, 158, 11, 0.14) !important;
            color: #71520d !important;
            background: rgba(245, 158, 11, 0.075);
        }


        /* =========================================================
   Badges
========================================================= */

        .ui-panel .ui-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.3rem;
            padding: 0.38rem 0.65rem;
            border-radius: 30px;
            font-family: "irsans-bold";
            font-size: 0.75rem;
            line-height: 1;
            white-space: nowrap;
        }

            .ui-panel .ui-badge.is-primary {
                color: #4949bd;
                background: var(--ui-primary-soft);
            }

            .ui-panel .ui-badge.is-success {
                color: #117647;
                background: var(--ui-success-soft);
            }

            .ui-panel .ui-badge.is-warning {
                color: #9a6500;
                background: rgba(245, 158, 11, 0.14);
            }

            .ui-panel .ui-badge.is-danger {
                color: #b42334;
                background: rgba(220, 53, 69, 0.11);
            }

            .ui-panel .ui-badge.is-info {
                color: #0878a7;
                background: var(--ui-info-soft);
            }

            .ui-panel .ui-badge.is-dark {
                color: #475569;
                background: var(--ui-dark-soft);
            }


        /* =========================================================
   Action buttons
========================================================= */

        .ui-panel .ui-action-group {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.35rem;
        }

        .ui-panel .ui-action-btn {
            width: 32px;
            height: 32px;
            padding: 0;
            border: 0;
            border-radius: 9px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            transition: transform 0.15s ease, opacity 0.15s ease;
        }

            .ui-panel .ui-action-btn:hover {
                transform: translateY(-1px);
                opacity: 0.88;
            }

            .ui-panel .ui-action-btn.is-primary {
                color: var(--ui-primary);
                background: var(--ui-primary-soft);
            }

            .ui-panel .ui-action-btn.is-success {
                color: var(--ui-success);
                background: var(--ui-success-soft);
            }

            .ui-panel .ui-action-btn.is-warning {
                color: #9a6500;
                background: var(--ui-warning-soft);
            }

            .ui-panel .ui-action-btn.is-danger {
                color: var(--ui-danger);
                background: var(--ui-danger-soft);
            }

            .ui-panel .ui-action-btn.is-info {
                color: var(--ui-info);
                background: var(--ui-info-soft);
            }


        /* =========================================================
   Alerts
========================================================= */

        .ui-panel .ui-alert {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 0.9rem 1rem;
            margin-top: 1rem;
            border-radius: 13px;
            font-size: 0.9rem;
            line-height: 1.8;
        }

            .ui-panel .ui-alert > i {
                flex: 0 0 auto;
                margin-top: 0.1rem;
                font-size: 1.25rem;
            }

            .ui-panel .ui-alert.is-primary {
                border: 1px solid rgba(91, 91, 214, 0.15);
                color: #4949a9;
                background: rgba(91, 91, 214, 0.045);
            }

                .ui-panel .ui-alert.is-primary > i {
                    color: var(--ui-primary);
                }

            .ui-panel .ui-alert.is-success {
                border: 1px solid rgba(25, 135, 84, 0.15);
                color: #256647;
                background: rgba(25, 135, 84, 0.045);
            }

                .ui-panel .ui-alert.is-success > i {
                    color: var(--ui-success);
                }

            .ui-panel .ui-alert.is-warning {
                border: 1px solid rgba(245, 158, 11, 0.18);
                color: #71520d;
                background: rgba(245, 158, 11, 0.055);
            }

                .ui-panel .ui-alert.is-warning > i {
                    color: var(--ui-warning);
                }

            .ui-panel .ui-alert.is-danger {
                border: 1px solid rgba(220, 53, 69, 0.15);
                color: #71323a;
                background: rgba(220, 53, 69, 0.045);
            }

                .ui-panel .ui-alert.is-danger > i {
                    color: var(--ui-danger);
                }

            .ui-panel .ui-alert.is-info {
                border: 1px solid rgba(14, 165, 233, 0.15);
                color: #12617e;
                background: rgba(14, 165, 233, 0.045);
            }

                .ui-panel .ui-alert.is-info > i {
                    color: var(--ui-info);
                }


        /* =========================================================
   Forms
========================================================= */

        /*
         * Form classes are intentionally scoped to .ui-panel. This keeps the
         * kit safe to use beside Bootstrap and makes existing form-control /
         * form-select elements benefit from the same visual language.
         */
        .ui-panel .ui-form {
            --ui-form-height: 46px;
            --ui-form-radius: 12px;
            --ui-form-border: #e3e5ed;
            --ui-form-placeholder: #a2a5b1;
            --ui-form-focus: rgba(91, 91, 214, 0.14);
        }

        .ui-panel .ui-form-row {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .ui-panel .ui-form-field {
            min-width: 0;
            margin-bottom: 1rem;
        }

        .ui-panel .ui-form-field:last-child {
            margin-bottom: 0;
        }

        .ui-panel .ui-form-col-12 { grid-column: span 12; }
        .ui-panel .ui-form-col-6 { grid-column: span 6; }
        .ui-panel .ui-form-col-4 { grid-column: span 4; }
        .ui-panel .ui-form-col-3 { grid-column: span 3; }

        .ui-panel .ui-form-label,
        .ui-panel .form-label {
            display: block;
            margin: 0 0 .5rem;
            color: #3d3e4b;
            font-family: "irsans-bold";
            font-size: .8rem;
            line-height: 1.7;
        }

        .ui-panel .ui-form-label .required,
        .ui-panel .form-label .required {
            margin-inline-start: .2rem;
            color: var(--ui-danger);
        }

        .ui-panel .ui-form-hint,
        .ui-panel .form-text {
            display: block;
            margin-top: .4rem;
            color: var(--ui-muted);
            font-size: .73rem;
            line-height: 1.7;
        }

        .ui-panel .ui-form-control,
        .ui-panel .form-control,
        .ui-panel .ui-form-select,
        .ui-panel .form-select {
            width: 100%;
            min-height: var(--ui-form-height);
            padding: .65rem .85rem;
            border: 1px solid var(--ui-form-border);
            border-radius: var(--ui-form-radius);
            outline: 0;
            color: var(--ui-text);
            background-color: var(--ui-surface);
            font: inherit;
            font-size: .84rem;
            line-height: 1.6;
            box-shadow: 0 2px 7px rgba(31, 35, 48, .025);
            transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
        }

        .ui-panel .ui-form-control::placeholder,
        .ui-panel .form-control::placeholder {
            color: var(--ui-form-placeholder);
            opacity: 1;
        }

        .ui-panel .ui-form-control:hover,
        .ui-panel .form-control:hover,
        .ui-panel .ui-form-select:hover,
        .ui-panel .form-select:hover {
            border-color: #c9cbe0;
        }

        .ui-panel .ui-form-control:focus,
        .ui-panel .form-control:focus,
        .ui-panel .ui-form-select:focus,
        .ui-panel .form-select:focus {
            border-color: var(--ui-primary);
            background-color: #fff;
            box-shadow: 0 0 0 4px var(--ui-form-focus), 0 5px 16px rgba(31, 35, 48, .05);
        }

        .ui-panel textarea.ui-form-control,
        .ui-panel textarea.form-control {
            min-height: 112px;
            resize: vertical;
        }

        .ui-panel .ui-form-control.is-sm,
        .ui-panel .form-control.form-control-sm,
        .ui-panel .ui-form-select.is-sm,
        .ui-panel .form-select.form-select-sm {
            --ui-form-height: 38px;
            padding-block: .45rem;
            border-radius: 10px;
            font-size: .78rem;
        }

        .ui-panel .ui-form-control.is-lg,
        .ui-panel .form-control.form-control-lg,
        .ui-panel .ui-form-select.is-lg,
        .ui-panel .form-select.form-select-lg {
            --ui-form-height: 54px;
            border-radius: 14px;
            font-size: .9rem;
        }

        .ui-panel .ui-input-group,
        .ui-panel .input-group {
            display: flex;
            align-items: stretch;
            width: 100%;
        }

        .ui-panel .ui-input-group > .ui-form-control,
        .ui-panel .ui-input-group > .form-control,
        .ui-panel .input-group > .form-control,
        .ui-panel .input-group > .form-select {
            position: relative;
            flex: 1 1 auto;
            min-width: 0;
        }

        .ui-panel .ui-input-group > :first-child,
        .ui-panel .input-group > :first-child {
            border-radius: 0 var(--ui-form-radius) var(--ui-form-radius) 0;
        }

        .ui-panel .ui-input-group > :last-child,
        .ui-panel .input-group > :last-child {
            border-radius: var(--ui-form-radius) 0 0 var(--ui-form-radius);
        }

        .ui-panel .ui-input-addon,
        .ui-panel .input-group-text {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 44px;
            padding: .65rem .8rem;
            border: 1px solid var(--ui-form-border);
            color: var(--ui-muted);
            background: #f8f8fb;
            font-size: .8rem;
            white-space: nowrap;
        }

        .ui-panel .ui-input-addon:first-child,
        .ui-panel .input-group-text:first-child {
            border-radius: 0 var(--ui-form-radius) var(--ui-form-radius) 0;
        }

        .ui-panel .ui-input-addon:last-child,
        .ui-panel .input-group-text:last-child {
            border-radius: var(--ui-form-radius) 0 0 var(--ui-form-radius);
        }

        .ui-panel .ui-input-icon {
            position: relative;
        }

        .ui-panel .ui-input-icon > i,
        .ui-panel .ui-input-icon > .bx {
            position: absolute;
            z-index: 2;
            top: 50%;
            right: .85rem;
            color: #9b9eac;
            font-size: 1.1rem;
            pointer-events: none;
            transform: translateY(-50%);
        }

        .ui-panel .ui-input-icon > .ui-form-control,
        .ui-panel .ui-input-icon > .form-control {
            padding-inline-start: 2.55rem;
        }

        .ui-panel .ui-form-check,
        .ui-panel .form-check {
            position: relative;
            display: flex;
            align-items: flex-start;
            gap: .6rem;
            min-height: 24px;
            padding: 0;
            margin-bottom: .7rem;
        }

        .ui-panel .ui-form-check-input,
        .ui-panel .form-check-input {
            width: 19px;
            height: 19px;
            flex: 0 0 19px;
            margin: .1rem 0 0;
            border: 1px solid #cfd1dc;
            border-radius: 6px;
            appearance: none;
            background: #fff;
            cursor: pointer;
            transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
        }

        .ui-panel .ui-form-check-input:checked,
        .ui-panel .form-check-input:checked {
            border-color: var(--ui-primary);
            background-color: var(--ui-primary);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 8 3 3 7-7'/%3E%3C/svg%3E");
            background-position: center;
            background-repeat: no-repeat;
            background-size: 13px;
        }

        .ui-panel .ui-form-check-input[type="radio"],
        .ui-panel .form-check-input[type="radio"] {
            border-radius: 50%;
        }

        .ui-panel .ui-form-check-input:focus,
        .ui-panel .form-check-input:focus {
            border-color: var(--ui-primary);
            box-shadow: 0 0 0 4px var(--ui-form-focus);
        }

        .ui-panel .ui-form-check-label,
        .ui-panel .form-check-label {
            color: var(--ui-text);
            font-size: .8rem;
            line-height: 1.8;
            cursor: pointer;
        }

        .ui-panel .ui-switch .ui-form-check-input,
        .ui-panel .ui-switch .form-check-input {
            width: 39px;
            height: 23px;
            flex-basis: 39px;
            border: 0;
            border-radius: 20px;
            background-color: #dfe1e9;
            background-image: radial-gradient(circle, #fff 0 5px, transparent 6px);
            background-position: 4px center;
            background-repeat: no-repeat;
            background-size: 15px 15px;
        }

        .ui-panel .ui-switch .ui-form-check-input:checked,
        .ui-panel .ui-switch .form-check-input:checked {
            background-color: var(--ui-primary);
            background-position: 20px center;
            background-size: 15px 15px;
        }

        .ui-panel .ui-form-control.is-invalid,
        .ui-panel .form-control.is-invalid,
        .ui-panel .ui-form-select.is-invalid,
        .ui-panel .form-select.is-invalid {
            border-color: var(--ui-danger);
            background-image: none;
        }

        .ui-panel .ui-form-control.is-valid,
        .ui-panel .form-control.is-valid,
        .ui-panel .ui-form-select.is-valid,
        .ui-panel .form-select.is-valid {
            border-color: var(--ui-success);
            background-image: none;
        }

        .ui-panel .ui-validation-message,
        .ui-panel .validation-message,
        .ui-panel .invalid-feedback {
            display: block;
            margin-top: .4rem;
            color: var(--ui-danger);
            font-size: .73rem;
            line-height: 1.7;
        }

        .ui-panel .ui-form-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: .65rem;
            padding-top: .35rem;
            margin-top: .35rem;
            border-top: 1px solid #f0f0f4;
        }

        .ui-panel .ui-form-actions .btn {
            min-height: 42px;
            padding-inline: 1.1rem;
            border-radius: 11px;
            font-family: "irsans-bold";
            font-size: .82rem;
        }

        .ui-panel .ui-form-section {
            padding: 1rem;
            margin-bottom: 1rem;
            border: 1px solid var(--ui-border);
            border-radius: 15px;
            background: var(--ui-surface);
        }

        .ui-panel .ui-form-section-title {
            display: flex;
            align-items: center;
            gap: .5rem;
            margin: 0 0 1rem;
            color: var(--ui-title);
            font-family: "irsans-bold";
            font-size: .9rem;
        }

        .ui-panel .ui-form-section-title::before {
            width: 4px;
            height: 18px;
            border-radius: 4px;
            background: var(--ui-primary);
            content: "";
        }

        .ui-panel input[type="file"].ui-form-control,
        .ui-panel input[type="file"].form-control {
            padding: .45rem;
            color: var(--ui-muted);
            cursor: pointer;
        }

        .ui-panel input[type="file"].ui-form-control::file-selector-button,
        .ui-panel input[type="file"].form-control::file-selector-button {
            margin-inline-end: .7rem;
            padding: .45rem .75rem;
            border: 0;
            border-radius: 8px;
            color: var(--ui-primary);
            background: var(--ui-primary-soft);
            font: inherit;
            font-size: .75rem;
            cursor: pointer;
        }

        /* =========================================================
   Standalone form controls
   These classes do not require .ui-panel or a <form> element.
========================================================= */

        .ui-form-row {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .ui-form-field {
            min-width: 0;
            margin-bottom: 1rem;
        }

        .ui-form-col-12 { grid-column: span 12; }
        .ui-form-col-6 { grid-column: span 6; }
        .ui-form-col-4 { grid-column: span 4; }
        .ui-form-col-3 { grid-column: span 3; }

        .ui-form-label {
            display: block;
            margin: 0 0 .5rem;
            color: #3d3e4b;
            font-family: "irsans-bold";
            font-size: .8rem;
            line-height: 1.7;
        }

        .ui-form-hint {
            display: block;
            margin-top: .4rem;
            color: #6c757d;
            font-size: .73rem;
            line-height: 1.7;
        }

        .ui-form-control,
        .ui-form-select {
            display: block;
            width: 100%;
            min-height: 24px;
            padding: .65rem .85rem;
            border: 1px solid #e3e5ed;
            border-radius: 12px;
            outline: 0;
            color: #454652;
            background-color: #fff;
            font: inherit;
            font-size: .84rem;
            line-height: 1.6;
            box-shadow: 0 2px 7px rgba(31, 35, 48, .025);
            transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
        }

        .ui-form-control::placeholder {
            color: #a2a5b1;
            opacity: 1;
        }

        .ui-form-control:hover,
        .ui-form-select:hover {
            border-color: #c9cbe0;
        }

        .ui-form-control:focus,
        .ui-form-select:focus {
            border-color: #5b5bd6;
            background-color: #fff;
            box-shadow: 0 0 0 4px rgba(91, 91, 214, .14), 0 5px 16px rgba(31, 35, 48, .05);
        }

        textarea.ui-form-control {
            min-height: 112px;
            resize: vertical;
        }

        .ui-form-control.is-sm,
        .ui-form-select.is-sm {
            min-height: 38px;
            padding-block: .45rem;
            border-radius: 10px;
            font-size: .78rem;
        }

        .ui-form-control.is-lg,
        .ui-form-select.is-lg {
            min-height: 54px;
            border-radius: 14px;
            font-size: .9rem;
        }

        .ui-input-group {
            display: flex;
            align-items: stretch;
            width: 100%;
        }

        .ui-input-group > .ui-form-control,
        .ui-input-group > .ui-form-select {
            position: relative;
            flex: 1 1 auto;
            min-width: 0;
        }

        .ui-input-group > :first-child {
            border-radius: 0 12px 12px 0;
        }

        .ui-input-group > :last-child {
            border-radius: 12px 0 0 12px;
        }

        .ui-input-addon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 44px;
            padding: .65rem .8rem;
            border: 1px solid #e3e5ed;
            color: #6c757d;
            background: #f8f8fb;
            font-size: .8rem;
            white-space: nowrap;
        }

        .ui-input-addon:first-child { border-radius: 0 12px 12px 0; }
        .ui-input-addon:last-child { border-radius: 12px 0 0 12px; }

        .ui-input-icon {
            position: relative;
        }

        .ui-input-icon > i,
        .ui-input-icon > .bx {
            position: absolute;
            z-index: 2;
            top: 50%;
            right: .85rem;
            color: #9b9eac;
            font-size: 1.1rem;
            pointer-events: none;
            transform: translateY(-50%);
        }

        .ui-input-icon > .ui-form-control {
            padding-inline-start: 2.55rem;
        }

        .ui-form-check {
            display: flex;
            align-items: flex-start;
            gap: .6rem;
            min-height: 24px;
            margin-bottom: .7rem;
        }

        .ui-form-check-input {
            width: 19px;
            height: 19px;
            flex: 0 0 19px;
            margin: .1rem 0 0;
            border: 1px solid #cfd1dc;
            border-radius: 6px;
            appearance: none;
            background: #fff;
            cursor: pointer;
            transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
        }

        .ui-form-check-input:checked {
            border-color: #5b5bd6;
            background-color: #5b5bd6;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 8 3 3 7-7'/%3E%3C/svg%3E");
            background-position: center;
            background-repeat: no-repeat;
            background-size: 13px;
        }

        .ui-form-check-input[type="radio"] { border-radius: 50%; }

        .ui-form-check-input:focus {
            border-color: #5b5bd6;
            box-shadow: 0 0 0 4px rgba(91, 91, 214, .14);
        }

        .ui-form-check-label {
            color: #454652;
            font-size: .8rem;
            line-height: 1.8;
            cursor: pointer;
        }

        .ui-switch .ui-form-check-input {
            width: 39px;
            height: 23px;
            flex-basis: 39px;
            border: 0;
            border-radius: 20px;
            background-color: #dfe1e9;
            background-image: radial-gradient(circle, #fff 0 5px, transparent 6px);
            background-position: 4px center;
            background-repeat: no-repeat;
            background-size: 15px 15px;
        }

        .ui-switch .ui-form-check-input:checked {
            background-color: #5b5bd6;
            background-position: 20px center;
        }

        .ui-form-control.is-invalid { border-color: #dc3545; }
        .ui-form-control.is-valid { border-color: #198754; }
        .ui-form-select.is-invalid { border-color: #dc3545; }
        .ui-form-select.is-valid { border-color: #198754; }

        .ui-validation-message {
            display: block;
            margin-top: .4rem;
            color: #dc3545;
            font-size: .73rem;
            line-height: 1.7;
        }

        .ui-form-section {
            padding: 1rem;
            margin-bottom: 1rem;
            border: 1px solid #e9ecef;
            border-radius: 15px;
            background: #fff;
        }

        .ui-form-section-title {
            display: flex;
            align-items: center;
            gap: .5rem;
            margin: 0 0 1rem;
            color: #242535;
            font-family: "irsans-bold";
            font-size: .9rem;
        }

        .ui-form-section-title::before {
            width: 4px;
            height: 18px;
            border-radius: 4px;
            background: #5b5bd6;
            content: "";
        }

        .ui-form-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: .65rem;
            padding-top: .35rem;
            margin-top: .35rem;
            border-top: 1px solid #f0f0f4;
        }

        .ui-form-actions .btn {
            min-height: 42px;
            padding-inline: 1.1rem;
            border-radius: 11px;
            font-family: "irsans-bold";
            font-size: .82rem;
        }


        /* =========================================================
   Utilities
========================================================= */

        .ui-panel .ui-fit-column {
            width: 1%;
            white-space: nowrap;
        }


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 767.98px) {
    .ui-panel .ui-panel-header,
    .ui-panel .ui-panel-body {
        padding: 1rem;
    }

    .ui-panel .ui-panel-actions {
        width: 100%;
    }

        .ui-panel .ui-panel-actions .btn {
            flex: 1;
        }

    .ui-panel .ui-status-banner {
        align-items: flex-start;
        flex-direction: column;
    }

    .ui-panel .ui-status-value {
        padding-right: 3.55rem;
    }

    .ui-panel .ui-tabs-header {
        overflow-x: auto;
    }

    .ui-panel .ui-tabs-nav {
        display: flex;
        width: max-content;
        min-width: 100%;
    }

        .ui-panel .ui-tabs-nav .nav-link {
            min-width: 145px;
            flex: 1;
        }

    .ui-panel .ui-tab-content {
        padding: 0.8rem;
    }

    .ui-panel .ui-feature-value {
        width: 100%;
        padding-right: 3.55rem;
    }

    .ui-panel .ui-progress-details {
        flex-direction: column;
        gap: 0.35rem;
    }

    .ui-panel .ui-form-row {
        gap: .7rem;
    }

    .ui-panel .ui-form-col-3,
    .ui-panel .ui-form-col-4,
    .ui-panel .ui-form-col-6 {
        grid-column: span 12;
    }

    .ui-panel .ui-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .ui-panel .ui-form-actions .btn {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .ui-form-row {
        gap: .7rem;
    }

    .ui-form-col-3,
    .ui-form-col-4,
    .ui-form-col-6 {
        grid-column: span 12;
    }

    .ui-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .ui-form-actions .btn {
        width: 100%;
    }
}

/* =====================================
   Page Header Component
===================================== */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    margin-bottom: 1.25rem;
    background: radial-gradient( circle at right top, rgba(91,91,214,.12), transparent 35% ), #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 16px;
}
.page-header-content {
    display: flex;
    align-items: center;
    gap: .85rem;
}
.page-header-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: var(--ui-primary, #5b5bd6);
    background: var(--ui-primary-soft, rgba(91,91,214,.10));
    font-size: 1.5rem;
}
.page-header-text h1 {
    margin: 0 0 .25rem;
    color: var(--ui-title,#242535);
    font-family: "irsans-bold";
    font-size: 1.05rem;
}
.page-header-text p {
    margin: 0;
    color: var(--ui-muted,#6c757d);
    font-size: .8rem;
    line-height: 1.8;
}
.page-header-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.page-header-search {
    position: relative;
    width: min(280px, 100%);
}
.page-header-search-icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: .85rem;
    color: #9b9eac;
    font-size: 1.1rem;
    pointer-events: none;
    transform: translateY(-50%);
}
.page-header-search-input {
    min-height: 40px !important;
    padding-inline: 2.55rem .85rem !important;
    border-radius: 10px !important;
    font-size: .8rem !important;
}
.page-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 40px;
    padding: 0 1rem;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: var(--ui-primary,#5b5bd6);
    font-family: "irsans-bold";
    font-size: .85rem;
    cursor: pointer;
    transition: .2s ease;
}
    .page-header-btn:hover {
        background: var(--ui-primary-hover,#4949c3);
        transform: translateY(-1px);
    }
.page-header-btn i{
    font-size: 1rem;
}
@media(max-width:768px) {
    .page-header {
        flex-direction: column;
        align-items: stretch;
    }
    .page-header-actions {
        width: 100%;
        flex-wrap: wrap;
    }
    .page-header-search {
        width: 100%;
    }
    .page-header-btn {
        width: 100%;
    }
}