/* Bootstrap CSS Custom Property Overrides */
/* This file demonstrates different approaches for avoiding duplication */

/* ========================================= */
/* APPROACH 1: Use :root for shared properties */
/* ========================================= */
/* Properties that should be the same in BOTH themes */
:root {
    /* Layout & Spacing - Same for both themes */
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.2rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
}

/* ========================================= */
/* APPROACH 2: Light theme specific colors */
/* ========================================= */
:root,
[data-bs-theme=light] {
    /* Primary Colors - Light theme */
    --bs-primary: var(--brand-primary);
}

/* ========================================= */
/* APPROACH 3: Dark theme specific colors */
/* ========================================= */
[data-bs-theme=dark] {
    /* Primary Colors - Dark theme (using same brand color) */
    --bs-primary: var(--brand-primary);
}

/* ========================================= */
/* APPROACH 4: Using CSS selector grouping */
/* ========================================= */
/* Group selectors for properties that are identical */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
    /* These properties are EXACTLY the same in all themes */
    --custom-transition-duration: 0.2s;
    --custom-transition-timing: ease-in-out;
    --custom-font-weight-medium: 500;
    --custom-font-weight-semibold: 600;
}

/* ========================================= */
/* Component-specific customizations */
/* ========================================= */
.btn {
    --bs-btn-border-radius: var(--bs-border-radius);
    font-weight: var(--custom-font-weight-medium);
    transition: all var(--custom-transition-duration) var(--custom-transition-timing);
}

.card {
    --bs-card-border-radius: var(--bs-border-radius-lg);
    --bs-card-box-shadow: var(--bs-box-shadow);
}

.badge {
    --bs-badge-border-radius: var(--bs-border-radius);
    font-weight: var(--custom-font-weight-medium);
}

/* Form controls */
.form-control,
.form-select {
    --bs-border-radius: var(--bs-border-radius);
    transition: border-color var(--custom-transition-duration) var(--custom-transition-timing),
        box-shadow var(--custom-transition-duration) var(--custom-transition-timing);
}

/* Alerts */
.alert {
    --bs-alert-border-radius: var(--bs-border-radius);
}

/* Rails field_with_errors fix for Bootstrap input-groups.
   Rails wraps errored fields in <div class="field_with_errors">,
   which breaks input-group flexbox layout. display:contents makes
   the wrapper invisible to rendering, and we replicate Bootstrap's
   .input-group > .form-control flex rules since the > combinator
   won't match through display:contents. */
.input-group .field_with_errors {
    display: contents;
}

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