/*
 * Challenger Vet UI foundation
 *
 * This file is intentionally loaded after legacy styles. It is the canonical
 * source for application theme tokens and the temporary Bootstrap 5 utility
 * compatibility needed while the application remains on Bootstrap 4.6.
 */

:root,
body.theme-light {
    color-scheme: light;

    --app-bg: #f4f7f7;
    --bg: var(--app-bg);
    --surface: #ffffff;
    --surface-elevated: #ffffff;
    --surface-alt: #edf3f3;
    --surface-selected: #e2f3f1;
    --panel: var(--surface-alt);

    --text: #172629;
    --text-primary: #172629;
    --text-muted: #52686c;
    --text-subtle: #62787c;

    --border: #d8e3e4;
    --border-strong: #aabfc2;

    --primary: #2b8a1f;
    --primary-hover: #22701a;
    --primary-soft: #e2f5da;
    --primary-contrast: #ffffff;
    --secondary: #2563eb;
    --accent: #2563eb;
    --accent-contrast: #ffffff;

    --success: #15803d;
    --success-hover: #116832;
    --success-contrast: #ffffff;
    --warning: #b45309;
    --warning-hover: #92400e;
    --warning-contrast: #ffffff;
    --danger: #b42318;
    --danger-hover: #912018;
    --danger-contrast: #ffffff;
    --info: #0369a1;
    --info-hover: #075985;
    --info-contrast: #ffffff;

    --input-bg: var(--surface);
    --field-bg: var(--surface);
    --input-border: var(--border-strong);
    --field-border: var(--border-strong);
    --input-text: var(--text-primary);
    --field-text: var(--text-primary);
    --input-placeholder: var(--text-subtle);
    --input-glow: rgba(43, 138, 31, 0.18);

    --sidebar-bg: #102d31;
    --sidebar-surface: #173d42;
    --sidebar-border: rgba(255, 255, 255, 0.1);
    --sidebar-muted: #b9cbce;
    --sidebar-strong: #ffffff;

    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --shadow-sm: 0 4px 14px rgba(23, 38, 41, 0.07);
    --shadow-md: 0 12px 30px rgba(23, 38, 41, 0.11);
    --shadow-strong: var(--shadow-md);
    --focus-ring: 0 0 0 0.2rem rgba(43, 138, 31, 0.2);
}

body.theme-dark {
    color-scheme: dark;

    --app-bg: #091416;
    --bg: var(--app-bg);
    --surface: #111f22;
    --surface-elevated: #17282b;
    --surface-alt: #1b2d30;
    --surface-selected: #183b3a;
    --panel: var(--surface-alt);

    --text: #edf5f4;
    --text-primary: #edf5f4;
    --text-muted: #b1c2c1;
    --text-subtle: #8da3a2;

    --border: #293d40;
    --border-strong: #3b5356;

    --primary: #6fd65a;
    --primary-hover: #8fe27e;
    --primary-soft: #1b3a14;
    --primary-contrast: #0b2606;
    --secondary: #7ba7ff;
    --accent: #7ba7ff;
    --accent-contrast: #07152e;

    --success: #56d487;
    --success-hover: #7ce0a1;
    --success-contrast: #062814;
    --warning: #f5b95f;
    --warning-hover: #facb84;
    --warning-contrast: #311d02;
    --danger: #ff8178;
    --danger-hover: #ffa09a;
    --danger-contrast: #3b0805;
    --info: #68bce8;
    --info-hover: #8dcdf0;
    --info-contrast: #062333;

    --input-bg: #111f22;
    --field-bg: #111f22;
    --input-border: var(--border-strong);
    --field-border: var(--border-strong);
    --input-text: var(--text-primary);
    --field-text: var(--text-primary);
    --input-placeholder: var(--text-subtle);
    --input-glow: rgba(76, 201, 192, 0.22);

    --sidebar-bg: #071113;
    --sidebar-surface: #132a2d;
    --sidebar-border: rgba(255, 255, 255, 0.09);
    --sidebar-muted: #9fb3b2;
    --sidebar-strong: #edf5f4;

    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.34);
    --shadow-strong: var(--shadow-md);
    --focus-ring: 0 0 0 0.2rem rgba(76, 201, 192, 0.24);
}

html {
    font-size: 16px;
}

body {
    background: var(--app-bg);
    color: var(--text-primary);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
}

body.theme-dark,
body.theme-dark #wrapper,
body.theme-dark #content,
body.theme-dark #content-wrapper {
    background-color: var(--app-bg);
    background-image: none;
}

#accordionSidebar {
    background: var(--sidebar-bg) !important;
    border-right-color: var(--sidebar-border) !important;
    box-shadow: none !important;
}

#accordionSidebar .sidebar-brand,
#accordionSidebar .sidebar-section-label,
#accordionSidebar .sidebar-account-name {
    color: var(--sidebar-strong) !important;
}

#accordionSidebar .sidebar-link,
#accordionSidebar .sidebar-sublink,
#accordionSidebar .sidebar-account-role {
    color: var(--sidebar-muted) !important;
}

#accordionSidebar .sidebar-link:hover,
#accordionSidebar .sidebar-sublink:hover,
#accordionSidebar .sidebar-link.active {
    background: var(--sidebar-surface) !important;
    color: var(--sidebar-strong) !important;
}

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.form-control,
.form-select,
.custom-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-text) !important;
}

.form-control::placeholder,
.form-select::placeholder {
    color: var(--input-placeholder) !important;
    opacity: 1;
}

.form-control:focus,
.form-select:focus,
.custom-select:focus {
    background-color: var(--input-bg) !important;
    border-color: var(--primary) !important;
    color: var(--input-text) !important;
    box-shadow: var(--focus-ring) !important;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.custom-select:disabled {
    background-color: var(--surface-alt) !important;
    color: var(--text-muted) !important;
    opacity: 1;
}

/* Bootstrap 5-style select class backed by Bootstrap 4 controls. */
.form-select {
    display: block;
    width: 100%;
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    border: 1px solid var(--input-border);
    border-radius: 0.5rem;
}

.fw-semibold { font-weight: 600 !important; }
.rounded-pill { border-radius: 50rem !important; }
.position-sticky { position: sticky !important; }
.top-0 { top: 0 !important; }
.text-bg-secondary {
    background-color: var(--text-muted) !important;
    color: var(--surface) !important;
}

.row-cols-1 > * {
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 768px) {
    .row-cols-md-3 > * {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

@media (min-width: 1400px) {
    .col-xxl-3 { flex: 0 0 25%; max-width: 25%; }
    .col-xxl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-xxl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-xxl-9 { flex: 0 0 75%; max-width: 75%; }
}

/* Bootstrap 5 spacing compatibility used by the newer workspace screens. */
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }
.ms-auto { margin-left: auto !important; }
.me-auto { margin-right: auto !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.ps-1 { padding-left: 0.25rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.pe-1 { padding-right: 0.25rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.pe-3 { padding-right: 1rem !important; }

.row.g-1,
.row.g-2,
.row.g-3,
.row.g-4,
.row.g-5 {
    display: flex;
    flex-wrap: wrap;
}
.row.g-1 { margin: -0.125rem; }
.row.g-2 { margin: -0.25rem; }
.row.g-3 { margin: -0.5rem; }
.row.g-4 { margin: -0.75rem; }
.row.g-5 { margin: -1.5rem; }
.row.g-1 > [class*="col"] { padding: 0.125rem; }
.row.g-2 > [class*="col"] { padding: 0.25rem; }
.row.g-3 > [class*="col"] { padding: 0.5rem; }
.row.g-4 > [class*="col"] { padding: 0.75rem; }
.row.g-5 > [class*="col"] { padding: 1.5rem; }

.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-contrast) !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: var(--primary-contrast) !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}