/* Cubbi Brand Colors */
:root {
    --cubbi-primary: #036656;
    --cubbi-secondary: #278575;
    --cubbi-tertiary: #43BAA3;
    --cubbi-quaternary: #4CDCC0;
    --cubbi-base: #DFF1EC;
    --cubbi-dark: #474747;
    --cubbi-red: #FF3900;
    --cubbi-blue: #0F77F0;
}

/* Top navbar */
.main-header.navbar {
    background-color: var(--cubbi-primary) !important;
    border-bottom: 2px solid var(--cubbi-secondary) !important;
}
.main-header.navbar .nav-link,
.main-header.navbar .navbar-nav .nav-link {
    color: #fff !important;
}
.main-header.navbar .nav-link:hover {
    color: var(--cubbi-quaternary) !important;
}

/* Sidebar */
.main-sidebar {
    background-color: var(--cubbi-dark) !important;
}
.main-sidebar .brand-link {
    background-color: var(--cubbi-primary) !important;
    border-bottom: 1px solid var(--cubbi-secondary) !important;
    color: #fff !important;
}
.sidebar .nav-sidebar .nav-link.active {
    background-color: var(--cubbi-primary) !important;
    color: #fff !important;
}
.sidebar .nav-sidebar .nav-link:hover {
    background-color: var(--cubbi-secondary) !important;
    color: #fff !important;
}
.sidebar .nav-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
}
.sidebar .nav-header {
    color: var(--cubbi-tertiary) !important;
}

/* Primary buttons */
.btn-primary,
.btn-outline-primary:hover {
    background-color: var(--cubbi-primary) !important;
    border-color: var(--cubbi-primary) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--cubbi-secondary) !important;
    border-color: var(--cubbi-secondary) !important;
}
.btn-outline-primary {
    color: var(--cubbi-primary) !important;
    border-color: var(--cubbi-primary) !important;
}

/* Links */
a {
    color: var(--cubbi-primary);
}
a:hover {
    color: var(--cubbi-secondary);
}

/* Card headers */
.card-primary:not(.card-outline) > .card-header {
    background-color: var(--cubbi-primary) !important;
}
.card-primary.card-outline {
    border-top-color: var(--cubbi-primary) !important;
}

/* Breadcrumb active */
.breadcrumb-item.active {
    color: var(--cubbi-primary) !important;
}

/* Pagination active */
.page-item.active .page-link {
    background-color: var(--cubbi-primary) !important;
    border-color: var(--cubbi-primary) !important;
}
.page-link {
    color: var(--cubbi-primary) !important;
}
.page-link:hover {
    color: var(--cubbi-secondary) !important;
}

/* Table header */
#result_list thead th {
    background-color: var(--cubbi-base) !important;
    border-bottom: 2px solid var(--cubbi-tertiary) !important;
}

/* Selected row highlight */
#result_list tbody tr.selected {
    background-color: var(--cubbi-base) !important;
}

/* Admin action bar */
.actions .button {
    background-color: var(--cubbi-primary) !important;
}

/* Login page */
.login-page,
.login-box .card-header {
    background-color: var(--cubbi-primary) !important;
}
.login-box .btn-primary {
    background-color: var(--cubbi-primary) !important;
    border-color: var(--cubbi-primary) !important;
}

/* Badge primary */
.badge-primary {
    background-color: var(--cubbi-primary) !important;
}

/* Progress bar */
.progress-bar {
    background-color: var(--cubbi-primary) !important;
}

/* Checkbox/radio accent */
.accent-primary .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--cubbi-primary) !important;
    border-color: var(--cubbi-primary) !important;
}

/* Multi-select pill chips */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--cubbi-primary) !important;
}

/* Select2 highlighted option */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--admin-autocomplete .select2-results__option--highlighted[aria-selected] {
    background-color: var(--cubbi-primary) !important;
}

/*
 * Widen Select2 inside admin TabularInline cells so selected values are legible.
 *
 * Symptom: in TabularInline rows, FK fields rendered as Select2 (django-autocomplete-light)
 * collapse to ~30px wide, truncating the selected text to "A…×" / "I..x".
 *
 * Root cause: Select2 computes its width from the parent column at initialization
 * and never recomputes when the cell expands. django-autocomplete-light also injects
 * an inline `style="width: ..."` on the container, so `!important` is required to
 * override it. This only targets `.inline-group` descendants, so normal admin change
 * forms keep their default Select2 sizing.
 */
.inline-group .select2-container,
.inline-group .select2-selection {
    min-width: 180px !important;
}
.inline-group .select2-selection__rendered {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}