/* 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;
}

/* button_to forms inside .btn-group: Bootstrap's .btn-group > .btn rules use
   direct-child selectors that don't reach buttons wrapped in form.button_to.
   Mixing button_to with link_to in the same group leaves form-wrapped buttons
   visually disconnected (no border merge, no negative-margin overlap).
   Replicate Bootstrap's essential collapse rules so the group renders as a
   single connected unit regardless of which children are forms vs. links. */
.btn-group > form.button_to {
    margin: 0;
}

/* Form button NOT first in the group → drop left radius and overlap previous. */
.btn-group > form.button_to:not(:first-child) > .btn {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Form button NOT last in the group → drop right radius. */
.btn-group > form.button_to:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* A regular .btn following a form.button_to needs the same merge treatment. */
.btn-group > form.button_to + .btn {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Lift focused/hovered form-wrapped button above its overlapping neighbor so
   the focus ring isn't clipped by the next button. */
.btn-group > form.button_to > .btn:focus,
.btn-group > form.button_to > .btn:hover,
.btn-group > form.button_to > .btn:active {
    z-index: 2;
}