@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* ─── Design System Tokens ─── */
:root {
    /* Color — surfaces & neutrals */
    --color-bg:              #f7f7f5;
    --color-surface:         #ffffff;
    --color-surface-2:       #fafaf8;
    --color-border:          #e5e7e5;
    --color-border-strong:   #d4d6d4;
    --color-neutral-soft:    #ececea;

    /* Color — text scale */
    --color-text:            #1c1c1c;
    --color-text-muted:      #5b6868;
    --color-text-faint:      #697777;

    /* Color — brand palette */
    --color-primary:              #1c5458;
    --color-primary-ink:          #ffffff;
    --color-primary-soft:         #e6f0f1;
    --color-primary-light:        #4aa7a7;
    --color-primary-extra-light:  #b5e4e4;
    --color-active:               #ffb652;
    --color-active-soft:          #fbe6e3;
    --color-active-dark:          #b84200;
    --color-active-dark-soft:     #fbeed4;
    --color-info:                 #2070b8;
    --color-info-soft:            #e1ecf7;

    /* Color — real status fills */
    --color-status-good:   #008a22;
    --color-status-alert:  #c20000;

    /* Color — on-dark text scale (content on primary/charcoal surfaces) */
    --color-on-dark:              #ffffff;
    --color-on-dark-strong:       rgba(255,255,255,.78);
    --color-on-dark-muted:        rgba(255,255,255,.78);
    --color-on-dark-faint:        rgba(255,255,255,.5);
    --color-on-dark-hairline:     rgba(255,255,255,.18);
    --color-on-dark-hairline-soft:rgba(255,255,255,.12);
    --color-on-dark-overlay:      rgba(255,255,255,.08);
    --color-status-good-on-dark:  #b5e9c5;
    --color-active-on-dark:       #f4b8b1;

    /* Typography */
    --font-sans: "Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --text-xs:      0.786rem;   /* ~13px */
    --text-sm:      0.929rem;   /* ~16px */
    --text-base:    1rem;       /* 17px  */
    --text-md:      1.143rem;   /* ~19px */
    --text-lg:      1.429rem;   /* ~24px */
    --text-xl:      2rem;       /* ~34px */
    --text-2xl:     2.857rem;   /* ~49px */
    --text-display: 4rem;       /* ~68px */
    --text-2xs:     0.643rem;   /* ~11px */

    /* Spacing (4px scale) */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Radius & shadows */
    --radius-sm:   5px;
    --radius-md:   15px;
    --radius-lg:   30px;
    --radius-pill: 999px;
    --shadow-sm:   0 1px 2px rgba(20,30,30,.06);
    --shadow-md:   0 2px 8px rgba(20,30,30,.08);

    /* Layout */
    --topbar-h:  56px;
    --sidebar-w: 270px;
    --footer-h:  48px;
    --page-gutter: var(--space-8);
    --page-max-width: 1280px;
    --elevation-popover: 0 8px 24px rgba(20,30,30,.12), 0 2px 6px rgba(20,30,30,.06);
    --z-sticky: 100;
    --z-dropdown: 1000;
    --z-popover: 1100;
    --z-tooltip: 1200;
    --z-modal: 1300;

    /* ─── Legacy aliases — do not use in new code ─── */
    /* These keep existing templates working while we migrate to tokens. */
    --uccos-black:          var(--color-text);
    --uccos-petrol:         var(--color-primary);
    --uccos-turquoise:      var(--color-primary-light);
    --uccos-turquoise-light:var(--color-primary-extra-light);
    --uccos-white:          var(--color-surface);
    --uccos-red:            var(--color-status-alert);
    --uccos-yellow:         var(--color-active);

    /* Bootstrap overrides */
    --bs-body-font-family: var(--font-sans);
    --bs-body-color:       var(--color-text);
    --bs-body-bg:          var(--color-bg);
}

.bg-uccos-primary {
    background-color: var(--uccos-petrol);
}
.bg-uccos-secondary {
    background-color: var(--uccos-turquoise);
}
.bg-uccos-danger {
    background-color: var(--uccos-red);
}

.box {
    width: calc(var(--space-12) * 3 + var(--space-3) / 2);
    height: calc(var(--space-12) * 3 + var(--space-3) / 2);
}
h1 {
    color: var(--color-primary);
    font-weight: 700;
    font-size: var(--text-xl);
    margin-bottom: var(--space-1);
}
h2 {
    font-weight: 600;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
}

nav[aria-label="breadcrumb"] {
    margin: 0 0 var(--space-3);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
    background: transparent;
}

.breadcrumb-item {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.2;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    color: var(--color-text-faint);
    margin-right: var(--space-2);
}

.breadcrumb-item a {
    color: var(--color-active-dark);
    font-weight: 500;
}

.breadcrumb-item.active {
    color: var(--color-text);
    font-weight: 500;
}

a {
    color: var(--color-active-dark);
    font-weight: 500;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a.btn:hover, a[class*="btn-"]:hover, a.nav-link:hover {
    text-decoration: none;
}

header {
    background-color: var(--color-primary);
    min-height: var(--topbar-h);
}

header .navbar a {
    color: var(--color-active);
}

header .navbar .dropdown-toggle:focus {
    outline: none;
}

header .navbar .dropdown > .dropdown-toggle {
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-3);
    transition: background-color .2s linear;
}

header .navbar .dropdown > .dropdown-toggle:hover,
header .navbar .dropdown > .dropdown-toggle:focus-visible {
    background-color: var(--color-on-dark-overlay);
}

header .navbar .user-pill-avatar {
    width: var(--space-10);
    height: var(--space-10);
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--color-primary);
}

header .navbar .user-pill-name {
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.1;
}

header .navbar .user-pill-org {
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.15;
}

.dropdown-menu:not(.bootstrap-datetimepicker-widget):not(.datepicker) {
    background-color: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    box-shadow: var(--elevation-popover);
    z-index: var(--z-popover);
}

.dropdown-menu .dropdown-item {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: var(--text-base);
    font-weight: 400;
    cursor: pointer;
}

.dropdown-menu .dropdown-divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--space-1) 0;
    border: 0;
    opacity: 1;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    color: var(--color-text);
    background-color: var(--color-neutral-soft);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item.active {
    color: var(--color-active-dark);
    background-color: color-mix(in srgb, var(--color-active-dark) 16%, var(--color-surface));
}

.dropdown-menu .dropdown-item.dropdown-item-danger {
    color: var(--color-active-dark);
}

.dropdown-menu .dropdown-item.dropdown-item-danger:hover,
.dropdown-menu .dropdown-item.dropdown-item-danger:focus {
    background-color: var(--color-active-dark-soft);
    text-decoration: underline;
    text-underline-offset: 2px;
}

header .navbar .dropdown-menu {
    margin-top: var(--space-2);
    min-width: 220px;
    text-align: left;
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-3);
    margin-bottom: var(--space-1);
    color: var(--color-active-dark);
    font-size: var(--text-md);
    font-weight: 500;
}

.sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    max-width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    min-height: 100%;
}

.sidebar .side-block-primary {
    margin-top: var(--space-8);
}

.sidebar .side-block + .side-block {
    margin-top: var(--space-8);
}

.sidebar .side-section {
    margin: 0 0 var(--space-2);
    padding: var(--space-2) var(--space-3) 0;
    color: var(--color-text);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
}

.sidebar .nav-link:hover {
    background-color: var(--color-neutral-soft);
}

.sidebar .nav-link.active {
    background-color: var(--color-active-dark);
    color: var(--color-on-dark) !important;
    position: relative;
}

.sidebar .nav-link.active:hover {
    background-color: var(--color-active-dark);
}

.sidebar .nav-link.active::after {
    content: "›";
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--text-lg);
    font-weight: bold;
}

.sidebar .nav-link.active i {
    color: var(--color-on-dark);
}


main {
    padding-top: var(--space-5);
}

.content-wrapper {
    padding: var(--page-gutter);
    width: 100%;
    max-width: var(--page-max-width);
    margin: 0 auto;
}

.auth-login-wrap {
    width: 100%;
    max-width: calc(var(--space-12) * 8);
    margin: 0 auto;
    padding-top: var(--space-8);
}

.auth-login-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
}

.auth-login-title {
    color: var(--color-primary);
    font-size: var(--text-lg);
    font-weight: 700;
    margin: 0 0 var(--space-5);
}

.auth-login-form label,
.auth-login-form .form-label {
    color: var(--color-active-dark);
}

.auth-login-actions {
    margin-top: var(--space-8);
}

.full-width {
    margin: 0 auto;
    width: 100dvw;
    margin-left: calc(50% - 50dvw);
}

section.inverse {
    background-color: var(--color-primary-light);
    color: var(--color-surface);
    box-shadow: 0 0 0 100vmax var(--color-primary-light);
    clip-path: inset(0 -100vmax);
}

footer {
    background-color: var(--color-text);
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
    color: var(--color-primary-light);
}
footer p {
    font-size: var(--text-sm);
    color: var(--color-on-dark);
}

footer a {
    color: var(--color-active);
    transition: color .2s linear;
}
footer a:hover {
    color: var(--color-on-dark);
    text-decoration: underline;
}
footer a svg {
    fill: var(--color-active) !important;
    transition: fill .2s linear;
}
footer a:hover svg {
    fill: var(--color-on-dark) !important;
}
footer div.border-top {
    border-top: 1px solid var(--color-primary-light) !important;
}

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

.profile-section-heading {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-4);
    margin-top: 0;
}

.form-control {
    padding-right: var(--space-3);
    padding-left: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    min-height: 36px;
}

.form-control-sm,
.form-select-sm {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
    padding-right: var(--space-2);
    padding-left: var(--space-2);
    min-height: var(--space-8);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: 1.2;
}

.form-control::placeholder {
    color: var(--color-text-faint);
    font-weight: 400;
}
.form-control:focus,
.select2-container.select2-container--focus .select2-selection.form-control,
.select2-container.select2-container--open .select2-selection.form-control,
.select2-container.select2-container--open .select2-search .select2-search__field:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.select2-container--bootstrap-5 .select2-selection {
    border-radius: var(--radius-lg) !important;
    border-color: var(--color-border-strong);
    min-height: 36px;
    background-color: var(--color-surface);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-text);
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.select2-container--bootstrap-5.select2-container--open.select2-container--below .select2-selection {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.select2-container--bootstrap-5.select2-container--open.select2-container--above .select2-selection {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.select2-container--bootstrap-5 .select2-dropdown {
    border-color: var(--color-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    background-color: var(--color-surface);
    overflow: hidden;
}

.select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--below {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    border-top: 0;
    margin-top: -1px;
}

.select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--above {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
    margin-bottom: -1px;
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    border-color: var(--color-border-strong);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-text);
}

.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--color-primary-soft);
    color: var(--color-text);
}

.select2-container--bootstrap-5 .select2-results__option--selected {
    background-color: var(--color-primary);
    color: var(--color-on-dark);
}

.form-group-md .form-control {
    font-size: var(--text-sm);
}

.form-select {
    padding-right: var(--space-3);
    padding-left: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    min-height: 36px;
}

.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.input-group-text {
    padding-right: var(--space-3);
    padding-left: var(--space-3);
    background-color: var(--color-surface-2);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-muted);
    font-size: var(--text-base);
}

.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text {
    min-height: var(--space-8);
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
    font-size: var(--text-sm);
}

.input-group-sm > .input-group-text {
    padding-right: var(--space-2);
    padding-left: var(--space-2);
    border-radius: var(--radius-md);
}

.bootstrap-datetimepicker-widget.dropdown-menu,
.datepicker.dropdown-menu {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    color: var(--color-text);
    z-index: 2100 !important;
}

.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th,
.datepicker table tr td,
.datepicker table tr th {
    border-radius: var(--radius-sm);
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active,
.bootstrap-datetimepicker-widget table td span.active:hover,
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
    background: var(--color-primary) !important;
    color: var(--color-on-dark) !important;
}

.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td span:hover,
.datepicker table tr td.day:hover,
.datepicker table tr td span:hover {
    background: var(--color-primary-soft);
    color: var(--color-text);
}

.bootstrap-datetimepicker-widget .picker-switch,
.bootstrap-datetimepicker-widget .prev,
.bootstrap-datetimepicker-widget .next,
.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next {
    color: var(--color-text);
    font-weight: 600;
}

.bootstrap-datetimepicker-widget table td.today,
.datepicker table tr td.today {
    box-shadow: inset 0 0 0 1px var(--color-active-dark);
}

.bootstrap-datetimepicker-widget table td.today.active,
.bootstrap-datetimepicker-widget table td.today.active:hover,
.datepicker table tr td.today.active,
.datepicker table tr td.today.active:hover {
    box-shadow: none;
}

.datepicker table tr td.today::before,
.datepicker table tr td.today.active::before {
    border-bottom-color: transparent !important;
}

.input-group.dbdp {
    border-radius: var(--radius-lg);
}

.input-group.dbdp > .form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0;
    transition: none !important;
}

.input-group.dbdp > .input-group-addon.input-group-append.input-group-text {
    background-color: var(--color-surface-2);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    border-left: 1px solid var(--color-border-strong);
    margin-left: 0 !important;
    box-shadow: inset 1px 0 0 var(--color-border-strong);
    border-top-right-radius: var(--radius-lg) !important;
    border-bottom-right-radius: var(--radius-lg) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    transition: none !important;
}

.input-group.dbdp:focus-within {
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.input-group.dbdp:focus-within > .form-control,
.input-group.dbdp:focus-within > .input-group-addon.input-group-append.input-group-text {
    border-color: var(--color-primary);
}

.input-group.dbdp > .form-control:focus {
    box-shadow: none;
}

.time-frame-form label.btn-outline-primary {
    color: var(--color-primary-light);
    border-color: var(--color-primary-light);
}

.time-frame-form label.btn-outline-primary:hover {
    color: var(--color-surface);
    background-color: var(--color-primary-light);
}

.time-frame-form .btn-check:active+.btn-outline-primary,
.time-frame-form .btn-check:checked+.btn-outline-primary,
.time-frame-form .btn-outline-primary.active,
.time-frame-form .btn-outline-primary.dropdown-toggle.show,
.time-frame-form .btn-outline-primary:active {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary-light);
}

.bi-check-circle-fill {
    color: var(--color-status-good);
}

.bi-x-circle-fill {
    color: var(--color-status-alert);
}

.btn {
    --bs-btn-border-radius: var(--bs-border-radius-pill);

    padding-right: var(--space-6);
    padding-left: var(--space-6);
}

.pagination {
    gap: 0;
}

.pagination .page-item {
    display: flex;
}

.pagination .page-item + .page-item {
    margin-left: calc(-1 * var(--bs-btn-border-width, 1px));
}

.pagination .page-item .btn {
    position: relative;
}

.pagination .page-item .btn-primary {
    --bs-btn-border-width: 2px;
}

.btn-full {
    width: 100%;
}

.btn-primary {
    --bs-btn-font-weight: 400;

    --bs-btn-color: var(--color-text);
    --bs-btn-bg: var(--color-active);
    --bs-btn-border-color: var(--color-active);

    --bs-btn-hover-color: var(--color-on-dark);
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-active) 92%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-active) 92%, black);

    --bs-btn-active-color: var(--color-on-dark);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-active) 88%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--color-active) 88%, black);

    --bs-btn-disabled-color: var(--color-text-muted);
    --bs-btn-disabled-bg: var(--color-border);
    --bs-btn-disabled-border-color: var(--color-border);
}
.btn-outline-primary {
    --bs-btn-color: var(--color-text);
    --bs-btn-border-color: var(--color-active);

    --bs-btn-hover-color: var(--color-text);
    --bs-btn-hover-bg: var(--color-active);
    --bs-btn-hover-border-color: var(--color-active);

    --bs-btn-active-color: var(--color-text);
    --bs-btn-active-bg: var(--color-active);
    --bs-btn-active-border-color: var(--color-active);

    --bs-btn-disabled-color: var(--color-text-muted);
    --bs-btn-disabled-border-color: var(--color-border);
}

.btn-secondary {
    --bs-btn-color: var(--color-text);
    --bs-btn-bg: var(--color-surface);
    --bs-btn-border-color: var(--color-active);
    --bs-btn-border-width: 2px;

    --bs-btn-hover-color: var(--color-text);
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-active) 24%, var(--color-surface));
    --bs-btn-hover-border-color: var(--color-active);

    --bs-btn-active-color: var(--color-text);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-active) 24%, var(--color-surface));
    --bs-btn-active-border-color: var(--color-active);

    --bs-btn-disabled-color: var(--color-text-muted);
    --bs-btn-disabled-bg: var(--color-surface);
    --bs-btn-disabled-border-color: var(--color-border-strong);
}
.btn-outline-secondary {
    --bs-btn-color: var(--color-text);
    --bs-btn-border-color: var(--color-active);

    --bs-btn-hover-color: var(--color-text);
    --bs-btn-hover-bg: var(--color-active);
    --bs-btn-hover-border-color: var(--color-active);

    --bs-btn-active-color: var(--color-text);
    --bs-btn-active-bg: var(--color-active);
    --bs-btn-active-border-color: var(--color-active);

    --bs-btn-disabled-color: var(--color-text-muted);
    --bs-btn-disabled-border-color: var(--color-border);
}

.btn-warning {
    --bs-btn-color: var(--color-text);
    --bs-btn-bg: var(--color-active);
    --bs-btn-border-color: var(--color-active);

    --bs-btn-hover-color: var(--color-text);
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-active) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-active) 85%, black);

    --bs-btn-active-color: var(--color-text);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-active) 85%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--color-active) 75%, black);

    --bs-btn-disabled-color: var(--color-text);
    --bs-btn-disabled-bg: var(--color-active);
    --bs-btn-disabled-border-color: var(--color-active);
}
.btn-outline-warning {
    --bs-btn-color: var(--color-active-dark);
    --bs-btn-border-color: var(--color-active);

    --bs-btn-hover-color: var(--color-text);
    --bs-btn-hover-bg: var(--color-active);
    --bs-btn-hover-border-color: var(--color-active);

    --bs-btn-active-color: var(--color-text);
    --bs-btn-active-bg: var(--color-active);
    --bs-btn-active-border-color: var(--color-active);

    --bs-btn-disabled-color: var(--color-active-dark);
    --bs-btn-disabled-border-color: var(--color-active);
}

.btn-danger {
    --bs-btn-color: var(--color-on-dark);
    --bs-btn-bg: var(--color-status-alert);
    --bs-btn-border-color: var(--color-status-alert);

    --bs-btn-hover-color: var(--color-on-dark);
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-status-alert) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-status-alert) 85%, black);

    --bs-btn-active-color: var(--color-on-dark);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-status-alert) 85%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--color-status-alert) 75%, black);

    --bs-btn-disabled-color: var(--color-on-dark);
    --bs-btn-disabled-bg: var(--color-status-alert);
    --bs-btn-disabled-border-color: var(--color-status-alert);
}
.btn-outline-danger {
    --bs-btn-color: var(--color-status-alert);
    --bs-btn-border-color: var(--color-status-alert);

    --bs-btn-hover-color: var(--color-on-dark);
    --bs-btn-hover-bg: var(--color-status-alert);
    --bs-btn-hover-border-color: var(--color-status-alert);

    --bs-btn-active-color: var(--color-on-dark);
    --bs-btn-active-bg: var(--color-status-alert);
    --bs-btn-active-border-color: var(--color-status-alert);

    --bs-btn-disabled-color: var(--color-status-alert);
    --bs-btn-disabled-border-color: var(--color-status-alert);
}

.stat-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    overflow: hidden;
}

.stat-card .card-body {
    padding: var(--space-5);
    position: relative;
}

.stat-card .card-header {
    padding: var(--space-4) var(--space-5) !important;
}

.stat-card h2 {
    white-space: nowrap;
    font-size: clamp(1.1rem, 1.1vw + 0.6rem, 1.65rem);
    letter-spacing: -0.01em;
}

.stat-card-reverse {
    background-color: var(--color-primary);
    border-color: var(--color-primary) !important;
}

.stat-card-reverse .stat-label,
.stat-card-reverse h2,
.stat-card-reverse .stat-value {
    color: var(--color-on-dark);
}

.stat-card-reverse .text-muted,
.stat-card-reverse small.text-muted {
    color: var(--color-on-dark-muted) !important;
}

.stat-card-reverse .text-trend-up,
.stat-card-reverse small.text-trend-up {
    color: var(--color-status-good-on-dark) !important;
}

.stat-card-reverse .stat-icon {
    color: var(--color-active-on-dark);
    opacity: 0.9;
}

.feature-card {
    --summary-accent: var(--color-primary);

    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    overflow: hidden;
}

.feature-card .card-body {
    padding: var(--space-8) var(--space-6) var(--space-5);
}

.feature-card-icon {
    height: var(--space-12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-5);
    color: var(--summary-accent);
}

.feature-card-icon svg {
    width: var(--space-8);
    height: var(--space-8);
}

.feature-card-title {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.feature-card-description {
    color: var(--color-text-muted);
    font-size: var(--text-md);
    line-height: 1.4;
    min-height: 4.2em;
    margin-bottom: var(--space-6);
}

.feature-card-stat {
    margin-bottom: var(--space-5);
}

.feature-card-value {
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.05;
    margin-bottom: var(--space-2);
    color: var(--summary-accent);
}

.feature-card-meta {
    color: var(--color-text-muted);
    font-size: var(--text-md);
    margin: 0;
}

.feature-card-cta {
    width: 100%;
    min-height: var(--space-10);
    border-radius: var(--radius-pill);
    font-size: var(--text-md);
    font-weight: 400;
}

.stat-label {
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.stat-value {
    display: block;
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
}

.stat-sub {
    font-size: var(--text-base);
    color: var(--color-text-muted);
}

.stat-icon {
    font-size: var(--text-display);
    opacity: 0.65;
    color: var(--color-text-faint);
    line-height: 1;
}

.stat-card .stat-icon {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
}

.stat-icon svg {
    display: block;
}

.text-trend-up {
    color: var(--color-status-good);
}

.text-trend-down {
    color: var(--color-active-dark);
}

.table-responsive {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.table-responsive:has(.dropdown-menu.show) {
    overflow: visible;
}

.table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    font-size: var(--text-base);
    background-color: var(--color-surface);
}

.table > :not(caption) > * > * {
    background-color: var(--color-surface);
    border-bottom-color: var(--color-border);
    color: var(--color-text);
    padding: var(--space-3) var(--space-4);
}

.table > thead > tr > th {
    text-align: left;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: var(--text-base);
    font-weight: 600;
    border-bottom: 1px solid var(--color-border);
}

.table > tbody > tr > td {
    vertical-align: top;
    font: var(--type-body, 500 var(--text-base)/1.7 var(--font-sans));
    font-weight: 400;
}

.table > tbody > tr:last-child > td {
    border-bottom: 0;
}

.table.table-hover > tbody > tr:hover > * {
    background-color: var(--color-surface-2);
}

.status-pill {
    border-radius: var(--radius-pill);
    font-weight: 600;
}

.status-pill-good {
    background-color: var(--color-status-good) !important;
    color: var(--color-on-dark) !important;
}

.status-pill-alert {
    background-color: var(--color-status-alert) !important;
    color: var(--color-on-dark) !important;
}

.status-pill-warning {
    background-color: var(--color-active-dark) !important;
    color: var(--color-on-dark) !important;
}

.status-pill-neutral {
    background-color: var(--color-neutral-soft) !important;
    color: var(--color-text) !important;
}

.amt {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.amt-debit {
    color: var(--color-text);
}

.amt-credit {
    color: var(--color-status-good);
}

.amt-penalty {
    color: var(--color-status-alert);
}

.amt-neutral {
    color: var(--color-text);
}

.statement-kpis .amt-neutral,
#invoice-total-amount .amt-neutral,
#invoice-total-commission .amt-neutral,
#invoice-total .amt-neutral {
    font-weight: 700;
}

.metric-row-icon {
    width: var(--space-6);
    height: var(--space-6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.metric-row-value {
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.1;
}

.metric-row-value small {
    font-size: var(--text-sm) !important;
    font-weight: 600;
    color: var(--color-text-muted);
}

.card-cta-full,
.page-actions-btn {
    min-width: calc(var(--space-12) + var(--space-10));
}

.page-actions-btn {
    min-height: var(--space-10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.card-cta-full {
    width: 100%;
    min-height: var(--space-10);
    margin-top: var(--space-3);
}

.chart-card-canvas {
    height: calc(var(--space-12) * 3 + var(--space-3));
    position: relative;
}

.chart-card-error {
    color: var(--color-active-dark);
}

.filter-segment-groups {
    gap: var(--space-3) !important;
}

.filter-segment-chip {
    min-width: 8.5rem;
    line-height: 1.5;
}

.filter-segment-groups .filter-segment-chip:hover {
    color: var(--color-text);
    background-color: var(--color-active);
    border-color: var(--color-active);
}

.filter-segment-groups .btn-check:checked + .filter-segment-chip,
.filter-segment-groups .btn-check:active + .filter-segment-chip,
.filter-segment-groups .filter-segment-chip.active {
    color: var(--color-text);
    background-color: var(--color-active);
    border-color: var(--color-active);
}

.filter-segment-groups .btn-check:checked + .filter-segment-chip:hover,
.filter-segment-groups .btn-check:active + .filter-segment-chip:hover,
.filter-segment-groups .filter-segment-chip.active:hover {
    color: var(--color-on-dark);
    background-color: var(--color-active);
    border-color: var(--color-active);
}

.filter-inline-label {
    color: var(--color-text-muted);
    font-weight: 600;
}

.filter-date-field {
    width: calc(var(--space-12) * 3 + var(--space-3));
}

.filter-date-field .input-group.dbdp {
    height: var(--space-10);
}

.filter-clear-btn {
    min-width: calc(var(--space-12) + var(--space-10) + var(--space-2));
    min-height: var(--space-10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.table-card.table-responsive {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
}

.table-card .table > :not(caption) > * > * {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

.offer-phase-flow {
    gap: var(--space-2);
}

.offer-phase-card {
    width: min(22rem, 100%);
    min-height: calc(var(--space-12) + var(--space-10));
    border-radius: var(--radius-md);
}

.offer-phase-body {
    padding: var(--space-3);
}

.offer-phase-content {
    max-height: calc(var(--space-12) + var(--space-2));
    overflow: auto;
}

.offer-phase-arrow {
    color: var(--color-text-muted);
}

.fcr-offer-order-status-badge {
    min-width: calc(var(--space-12) * 2 + var(--space-3));
}

.fcr-analytics-filters {
    gap: var(--space-3);
}

.fcr-analytics-filter-date {
    width: calc(var(--space-12) * 3 + var(--space-4));
}

.fcr-analytics-filter-offer,
.fcr-analytics-filter-operation {
    flex: 1 1 16rem;
    min-width: calc(var(--space-12) * 4 + var(--space-2));
}

.fcr-analytics-filter-actions {
    flex: 0 0 auto;
}

.fcr-analytics-summary-col-label {
    width: 24%;
}

.fcr-analytics-summary-col-metric {
    width: 19%;
}

.fcr-analytics-chart-container {
    height: calc(var(--space-12) * 9 - var(--space-1));
    position: relative;
}

.testrun-chart-panel {
    height: calc(var(--space-12) * 8 + var(--space-2));
    min-height: calc(var(--space-12) * 8 + var(--space-2));
    width: 100%;
}

.testrun-chart-panel > canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}


.table-select-col {
    width: 1%;
    white-space: nowrap;
}

.table-row-highlight > * {
    background-color: color-mix(in srgb, var(--color-active) 15%, var(--color-surface));
}


.dropdown-menu .dropdown-item.disabled,
.dropdown-menu .dropdown-item:disabled {
    color: var(--color-text-faint);
    cursor: not-allowed;
    opacity: 1;
    pointer-events: none;
    text-decoration: none;
}

.dropdown-menu .dropdown-item.disabled:hover,
.dropdown-menu .dropdown-item.disabled:focus,
.dropdown-menu .dropdown-item:disabled:hover,
.dropdown-menu .dropdown-item:disabled:focus {
    color: var(--color-text-faint);
    background-color: transparent;
    text-decoration: none;
}


.mgmt-info-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.mgmt-info-card .card-body {
    padding: var(--space-5);
}

.mgmt-info-card .card-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

.mgmt-info-card .card-text {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: 1.45;
}

.mgmt-info-card hr {
    border-top-color: var(--color-border);
    opacity: 1;
}

.detail-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.detail-card.overflow-visible {
    overflow: visible;
}

.detail-card.overflow-visible .card-header:first-child {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.detail-card .card-header {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-6) var(--space-6);
}

.detail-card .card-title {
    color: var(--color-text);
    font-size: var(--text-base);
}

.detail-card .card-body {
    padding: var(--space-6);
}

.detail-kv {
    margin-bottom: 0;
}

.detail-kv-row {
    display: grid;
    grid-template-columns: minmax(170px, 40%) 1fr;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
}

.detail-kv-row:last-child {
    border-bottom: 0;
}

.detail-kv dt,
.detail-kv dd {
    margin: 0;
}

.detail-kv dt {
    color: var(--color-text);
    font-weight: 600;
    font-size: var(--text-sm);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.detail-kv dd {
    color: var(--color-text);
    font-size: var(--text-sm);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.detail-kv-meta {
    margin-top: var(--space-1);
    color: var(--color-text-faint);
    font-size: var(--text-xs);
}

.detail-settings-title {
    margin: var(--space-6) 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
}

.detail-kv-compact .detail-kv-row {
    padding: var(--space-1) 0;
}

.detail-kv-compact dt {
    font-size: var(--text-xs);
}

.detail-kv-compact dd {
    font-size: var(--text-sm);
    line-height: 1.4;
}

.detail-kv-keys-wide .detail-kv-row {
    grid-template-columns: minmax(calc(var(--space-12) * 6 + var(--space-3)), 70%) 1fr;
}

.detail-card-kv {
    --kv-row-h: var(--space-8);
}

.detail-card-kv .card-body > dl.row > dt,
.detail-card-kv .card-body > dl.row > dd,
.detail-card-kv .kv-edit-row {
    display: flex;
    align-items: center;
    min-height: var(--kv-row-h);
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
}

.detail-card-kv .kv-edit-form {
    margin: 0;
    padding: 0;
}

.detail-card-kv .kv-edit-row .col-form-label {
    display: flex;
    align-items: center;
    color: var(--color-text);
    font-weight: 700;
    font-size: var(--text-base);
    line-height: 1.2;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.detail-card-kv .kv-edit-value {
    display: flex;
    align-items: center;
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: 1.2;
}

.detail-card-kv .kv-edit-value .input-group {
    width: 100%;
    flex-wrap: nowrap;
}

.detail-card-kv .kv-edit-value .form-control,
.detail-card-kv .kv-edit-value .input-group-text {
    min-height: calc(var(--space-6) + var(--space-1));
    height: calc(var(--space-6) + var(--space-1));
    padding-top: 0;
    padding-bottom: 0;
    font-size: var(--text-base);
    line-height: 1.2;
    border-color: var(--color-border-strong);
}

.detail-card-kv .kv-edit-value .form-control {
    text-align: left;
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
}

.detail-card-kv .kv-edit-value .input-group-text {
    flex: 0 0 auto;
    width: var(--space-12);
    justify-content: center;
    background-color: var(--color-surface-2);
    color: var(--color-text-muted);
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

.detail-card-kv .kv-edit-actions {
    margin-top: var(--space-4);
}

.detail-card .table > thead > tr > th {
    background-color: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
}

.table-card-wrap.table-responsive {
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent;
    padding: 0 var(--space-5) var(--space-5);
}

.table-card-wrap .table > :not(caption) > * > *:first-child {
    padding-left: 0;
}

.table-card-wrap .table > :not(caption) > * > *:last-child {
    padding-right: 0;
}

.table-head-muted > thead > tr > th {
    background-color: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    border-top: 0;
}

.filter-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.filter-card .card-body {
    padding: var(--space-4) var(--space-5);
}

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

.detail-list-item {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.detail-list-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.detail-list-title {
    color: var(--color-text);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.25;
}

.detail-list-sub {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.3;
}

.detail-sections > .row {
    margin-top: 0;
    margin-bottom: var(--space-6);
}

.detail-sections > .row:last-child {
    margin-bottom: 0;
}

.detail-sections .detail-card {
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .detail-card .card-header,
    .detail-card .card-body {
        padding: var(--space-4);
    }

    .detail-kv-row {
        grid-template-columns: 1fr;
        gap: var(--space-2);
        padding: var(--space-3) 0;
    }

    .detail-kv dt,
    .detail-kv dd {
        font-size: var(--text-sm);
    }

    .detail-kv-compact .detail-kv-row {
        grid-template-columns: 1fr;
    }
}

.accordion-card .accordion-item {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.accordion-card .accordion-item:has(.dropdown-menu.show) {
    overflow: visible;
}

.accordion-body .table-card-wrap.table-responsive {
    padding-left: 0;
    padding-right: 0;
}

.accordion-card .accordion-button {
    background-color: var(--color-surface);
    color: var(--color-text);
    box-shadow: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.accordion-card .accordion-button.collapsed {
    border-radius: var(--radius-lg) !important;
}

.bar-chart-track {
    background-color: var(--color-surface-2);
}

.bar-chart-fill {
    background-color: color-mix(in srgb, var(--color-primary) 55%, transparent) !important;
    color: var(--color-on-dark);
}