/* =============================================================================
   NORENA BRAND UTILITY CLASSES
   =============================================================================
   Semantic utility classes for consistent color usage across blade templates.
   Replace inline styles with these classes.

   ⚠️ IMPORTANT: To change colors, edit the hex values directly in this file.
   The _brand-colors.scss file is for SCSS usage only (not compiled via Vite).

   Naming convention:
   - .text-{color}     → color property
   - .bg-{color}       → background-color property
   - .border-{color}   → border-color property
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Brand Color Values (edit these to change colors globally)
   ----------------------------------------------------------------------------- */
:root {
    /* Core Brand Colors */
    --brand-primary: #231942;
    --brand-secondary: #5E548E;
    --brand-accent: #9F86C0;
    --brand-gold: #BE95C4;

    /* Theme Colors */
    --theme-light-blue: #97C4C9;
    --theme-dark-blue: #2A4D4f;
    --theme-light-green: #BFDDBB;
    --theme-dark-green: #104925;
    --theme-light-sand: #E7CF8C;
    --theme-dark-sand: #4C402A;
    --theme-danger: #D03D0C;

    /* Text Colors */
    --text-default: #000000;
    --text-muted: #67748e;
    --text-light: #b2b9bf;
    --text-white: #ffffff;

    /* Border Colors */
    --border-default: #d2d6da;
    --border-light: #e6e6e6;
    --border-muted: #cccccc;

    /* Status Colors */
    --status-success: #1aae6f;
    --status-warning: #e67e22;
    --status-danger: #d33333;
    --status-info: #3085d6;
    --status-highlight: #fda50f;

    /* Neutral Colors */
    --neutral-50: #f8f9fc;
    --neutral-100: #f0f0f0;
    --neutral-200: #e6e6e6;

    /* -------------------------------------------------------------------------
       Button Color System
       To change button colors globally, edit these values.
       ------------------------------------------------------------------------- */

    /* Primary Button (main CTA - Save, Submit, Confirm) */
    --btn-primary-bg: var(--brand-primary);
    --btn-primary-text: #ffffff;
    --btn-primary-hover-bg: var(--brand-secondary);
    --btn-primary-border: var(--brand-primary);
    --btn-primary-focus-shadow: rgba(110, 68, 255, 0.5);

    /* Secondary Button (cancel, less prominent actions) */
    --btn-secondary-bg: #8392ab;
    --btn-secondary-text: #000000;
    --btn-secondary-hover-bg: #96a2b8;
    --btn-secondary-border: #8392ab;
    --btn-secondary-focus-shadow: rgba(131, 146, 171, 0.5);

    /* Success Button (confirmations, positive actions) */
    --btn-success-bg: var(--status-success);
    --btn-success-text: #ffffff;
    --btn-success-hover-bg: #17a163;
    --btn-success-border: var(--status-success);
    --btn-success-focus-shadow: rgba(26, 174, 111, 0.5);
    --btn-success-gradient-start: #2dce89;
    --btn-success-gradient-end: #2dcecc;

    /* Danger Button (delete, remove, errors) */
    --btn-danger-bg: var(--status-danger);
    --btn-danger-text: #ffffff;
    --btn-danger-hover-bg: #b82d2d;
    --btn-danger-border: var(--status-danger);
    --btn-danger-focus-shadow: rgba(211, 51, 51, 0.5);
    --btn-danger-gradient-start: #f5365c;
    --btn-danger-gradient-end: #f56036;

    /* Warning Button (attention, pending states) */
    --btn-warning-bg: var(--status-warning);
    --btn-warning-text: #ffffff;
    --btn-warning-hover-bg: #cf6f1d;
    --btn-warning-border: var(--status-warning);
    --btn-warning-focus-shadow: rgba(230, 126, 34, 0.5);
    --btn-warning-gradient-start: #fb6340;
    --btn-warning-gradient-end: #fbb140;

    /* Info Button (informational, help) */
    --btn-info-bg: var(--status-info);
    --btn-info-text: #ffffff;
    --btn-info-hover-bg: #2872b8;
    --btn-info-border: var(--status-info);
    --btn-info-focus-shadow: rgba(48, 133, 214, 0.5);
    --btn-info-gradient-start: #1171ef;
    --btn-info-gradient-end: #11cdef;

    /* Light Button (muted, subtle actions) */
    --btn-light-bg: #f8f9fa;
    --btn-light-text: #344767;
    --btn-light-hover-bg: #e9ecef;
    --btn-light-border: #d2d6da;
    --btn-light-focus-shadow: rgba(210, 214, 218, 0.5);

    /* Dark Button (high contrast, emphasis) */
    --btn-dark-bg: #344767;
    --btn-dark-text: #ffffff;
    --btn-dark-hover-bg: #2b3a55;
    --btn-dark-border: #344767;
    --btn-dark-focus-shadow: rgba(52, 71, 103, 0.5);

    /* Shared disabled state */
    --btn-disabled-opacity: 0.65;
}

/* -----------------------------------------------------------------------------
   Text Colors
   ----------------------------------------------------------------------------- */
.text-brand-primary { color: var(--brand-primary) !important; }
.text-brand-secondary { color: var(--brand-secondary) !important; }
.text-brand-accent { color: var(--brand-accent) !important; }
.text-brand-gold { color: var(--brand-gold) !important; }

.text-default { color: var(--text-default) !important; }
.text-muted-brand { color: var(--text-muted) !important; }
.text-light-brand { color: var(--text-light) !important; }
.text-white-brand { color: var(--text-white) !important; }

.text-success-brand { color: var(--status-success) !important; }
.text-warning-brand { color: var(--status-warning) !important; }
.text-danger-brand { color: var(--status-danger) !important; }
.text-info-brand { color: var(--status-info) !important; }
.text-highlight { color: var(--status-highlight) !important; }

/* -----------------------------------------------------------------------------
   Background Colors
   ----------------------------------------------------------------------------- */
.bg-brand-primary { background-color: var(--brand-primary) !important; }
.bg-brand-secondary { background-color: var(--brand-secondary) !important; }
.bg-brand-accent { background-color: var(--brand-accent) !important; }
.bg-brand-gold { background-color: var(--brand-gold) !important; }

/* Brand Gradients */
.bg-gradient-brand-primary {
    background-image: linear-gradient(310deg, var(--brand-primary) 0%, var(--brand-secondary) 100%) !important;
    color: #ffffff !important;
}
.bg-gradient-brand-secondary {
    background-image: linear-gradient(310deg, var(--brand-secondary) 0%, var(--brand-accent) 100%) !important;
    color: #ffffff !important;
}
.bg-gradient-brand-accent {
    background-image: linear-gradient(310deg, var(--brand-accent) 0%, var(--brand-gold) 100%) !important;
    color: #344767 !important;
}
.bg-gradient-brand-gold {
    background-image: linear-gradient(310deg, var(--brand-gold) 0%, var(--brand-accent) 100%) !important;
    color: #ffffff !important;
}

.bg-neutral-50 { background-color: var(--neutral-50) !important; }
.bg-neutral-100 { background-color: var(--neutral-100) !important; }
.bg-neutral-200 { background-color: var(--neutral-200) !important; }

.bg-success-brand { background-color: var(--status-success) !important; }
.bg-warning-brand { background-color: var(--status-warning) !important; }
.bg-danger-brand { background-color: var(--status-danger) !important; }
.bg-info-brand { background-color: var(--status-info) !important; }

/* -----------------------------------------------------------------------------
   Border Colors
   ----------------------------------------------------------------------------- */
.border-brand-primary { border-color: var(--brand-primary) !important; }
.border-brand-secondary { border-color: var(--brand-secondary) !important; }

.border-default { border-color: var(--border-default) !important; }
.border-light-brand { border-color: var(--border-light) !important; }
.border-muted { border-color: var(--border-muted) !important; }

/* -----------------------------------------------------------------------------
   Button Utility Classes
   Use these for new buttons, or to override existing Bootstrap buttons.
   ----------------------------------------------------------------------------- */

/* Primary Button */
.btn-brand-primary {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    border-color: var(--btn-primary-border) !important;
}
.btn-brand-primary:hover {
    background-color: var(--btn-primary-hover-bg) !important;
    border-color: var(--btn-primary-hover-bg) !important;
}
.btn-brand-primary:focus {
    box-shadow: 0 0 0 0.2rem var(--btn-primary-focus-shadow) !important;
}
.btn-brand-primary:disabled,
.btn-brand-primary.disabled {
    opacity: var(--btn-disabled-opacity) !important;
    pointer-events: none;
}

/* Primary Outline Button */
.btn-outline-brand-primary {
    color: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-border) !important;
    background-color: transparent !important;
}
.btn-outline-brand-primary:hover {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
}
.btn-outline-brand-primary:focus {
    box-shadow: 0 0 0 0.2rem var(--btn-primary-focus-shadow) !important;
}
.btn-outline-brand-primary:disabled,
.btn-outline-brand-primary.disabled {
    opacity: var(--btn-disabled-opacity) !important;
    pointer-events: none;
}

/* Secondary Button */
.btn-brand-secondary {
    background-color: var(--btn-secondary-bg) !important;
    color: var(--btn-secondary-text) !important;
    border-color: var(--btn-secondary-border) !important;
}
.btn-brand-secondary:hover {
    background-color: var(--btn-secondary-hover-bg) !important;
    border-color: var(--btn-secondary-hover-bg) !important;
}
.btn-brand-secondary:focus {
    box-shadow: 0 0 0 0.2rem var(--btn-secondary-focus-shadow) !important;
}
.btn-brand-secondary:disabled,
.btn-brand-secondary.disabled {
    opacity: var(--btn-disabled-opacity) !important;
    pointer-events: none;
}

/* Success Button */
.btn-brand-success {
    background-color: var(--btn-success-bg) !important;
    color: var(--btn-success-text) !important;
    border-color: var(--btn-success-border) !important;
}
.btn-brand-success:hover {
    background-color: var(--btn-success-hover-bg) !important;
    border-color: var(--btn-success-hover-bg) !important;
}
.btn-brand-success:focus {
    box-shadow: 0 0 0 0.2rem var(--btn-success-focus-shadow) !important;
}
.btn-brand-success:disabled,
.btn-brand-success.disabled {
    opacity: var(--btn-disabled-opacity) !important;
    pointer-events: none;
}

/* Success Gradient */
.bg-gradient-brand-success {
    background-image: linear-gradient(310deg, var(--btn-success-gradient-start) 0%, var(--btn-success-gradient-end) 100%) !important;
    color: var(--btn-success-text) !important;
}

/* Danger Button */
.btn-brand-danger {
    background-color: var(--btn-danger-bg) !important;
    color: var(--btn-danger-text) !important;
    border-color: var(--btn-danger-border) !important;
}
.btn-brand-danger:hover {
    background-color: var(--btn-danger-hover-bg) !important;
    border-color: var(--btn-danger-hover-bg) !important;
}
.btn-brand-danger:focus {
    box-shadow: 0 0 0 0.2rem var(--btn-danger-focus-shadow) !important;
}
.btn-brand-danger:disabled,
.btn-brand-danger.disabled {
    opacity: var(--btn-disabled-opacity) !important;
    pointer-events: none;
}

/* Danger Gradient */
.bg-gradient-brand-danger {
    background-image: linear-gradient(310deg, var(--btn-danger-gradient-start) 0%, var(--btn-danger-gradient-end) 100%) !important;
    color: var(--btn-danger-text) !important;
}

/* Warning Button */
.btn-brand-warning {
    background-color: var(--btn-warning-bg) !important;
    color: var(--btn-warning-text) !important;
    border-color: var(--btn-warning-border) !important;
}
.btn-brand-warning:hover {
    background-color: var(--btn-warning-hover-bg) !important;
    border-color: var(--btn-warning-hover-bg) !important;
}
.btn-brand-warning:focus {
    box-shadow: 0 0 0 0.2rem var(--btn-warning-focus-shadow) !important;
}
.btn-brand-warning:disabled,
.btn-brand-warning.disabled {
    opacity: var(--btn-disabled-opacity) !important;
    pointer-events: none;
}

/* Warning Outline Button */
.btn-outline-brand-warning {
    color: var(--btn-warning-bg) !important;
    border-color: var(--btn-warning-border) !important;
    background-color: transparent !important;
}
.btn-outline-brand-warning:hover {
    background-color: var(--btn-warning-bg) !important;
    color: var(--btn-warning-text) !important;
}
.btn-outline-brand-warning:focus {
    box-shadow: 0 0 0 0.2rem var(--btn-warning-focus-shadow) !important;
}
.btn-outline-brand-warning:disabled,
.btn-outline-brand-warning.disabled {
    opacity: var(--btn-disabled-opacity) !important;
    pointer-events: none;
}

/* Warning Gradient */
.bg-gradient-brand-warning {
    background-image: linear-gradient(310deg, var(--btn-warning-gradient-start) 0%, var(--btn-warning-gradient-end) 100%) !important;
    color: var(--btn-warning-text) !important;
}

/* Info Button */
.btn-brand-info {
    background-color: var(--btn-info-bg) !important;
    color: var(--btn-info-text) !important;
    border-color: var(--btn-info-border) !important;
}
.btn-brand-info:hover {
    background-color: var(--btn-info-hover-bg) !important;
    border-color: var(--btn-info-hover-bg) !important;
}
.btn-brand-info:focus {
    box-shadow: 0 0 0 0.2rem var(--btn-info-focus-shadow) !important;
}
.btn-brand-info:disabled,
.btn-brand-info.disabled {
    opacity: var(--btn-disabled-opacity) !important;
    pointer-events: none;
}

/* Info Gradient */
.bg-gradient-brand-info {
    background-image: linear-gradient(310deg, var(--btn-info-gradient-start) 0%, var(--btn-info-gradient-end) 100%) !important;
    color: var(--btn-info-text) !important;
}

/* Light Button */
.btn-brand-light {
    background-color: var(--btn-light-bg) !important;
    color: var(--btn-light-text) !important;
    border-color: var(--btn-light-border) !important;
}
.btn-brand-light:hover {
    background-color: var(--btn-light-hover-bg) !important;
    border-color: var(--btn-light-hover-bg) !important;
}
.btn-brand-light:focus {
    box-shadow: 0 0 0 0.2rem var(--btn-light-focus-shadow) !important;
}
.btn-brand-light:disabled,
.btn-brand-light.disabled {
    opacity: var(--btn-disabled-opacity) !important;
    pointer-events: none;
}

/* Dark Button */
.btn-brand-dark {
    background-color: var(--btn-dark-bg) !important;
    color: var(--btn-dark-text) !important;
    border-color: var(--btn-dark-border) !important;
}
.btn-brand-dark:hover {
    background-color: var(--btn-dark-hover-bg) !important;
    border-color: var(--btn-dark-hover-bg) !important;
}
.btn-brand-dark:focus {
    box-shadow: 0 0 0 0.2rem var(--btn-dark-focus-shadow) !important;
}
.btn-brand-dark:disabled,
.btn-brand-dark.disabled {
    opacity: var(--btn-disabled-opacity) !important;
    pointer-events: none;
}

/* -----------------------------------------------------------------------------
   Badge Utility Classes
   Use with: badge badge-sm badge-brand-*
   ----------------------------------------------------------------------------- */
.badge-brand-success {
    background-color: var(--btn-success-bg) !important;
    color: var(--btn-success-text) !important;
}

.badge-brand-danger {
    background-color: var(--btn-danger-bg) !important;
    color: var(--btn-danger-text) !important;
}

.badge-brand-warning {
    background-color: var(--btn-warning-bg) !important;
    color: var(--btn-warning-text) !important;
}

.badge-brand-info {
    background-color: var(--btn-info-bg) !important;
    color: var(--btn-info-text) !important;
}

.badge-brand-primary {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
}

.badge-brand-secondary {
    background-color: var(--btn-secondary-bg) !important;
    color: var(--btn-secondary-text) !important;
}

/* =============================================================================
   THEME UTILITIES
   =============================================================================
   Migrated from public/norena/theme.css
   These use the --theme-* color variables defined above.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Theme Background Colors
   ----------------------------------------------------------------------------- */
.bg-theme-light-blue { background-color: var(--theme-light-blue) !important; }
.bg-theme-dark-blue { background-color: var(--theme-dark-blue) !important; }
.bg-theme-light-green { background-color: var(--theme-light-green) !important; }
.bg-theme-dark-green { background-color: var(--theme-dark-green) !important; }
.bg-theme-light-sand { background-color: var(--theme-light-sand) !important; }
.bg-theme-dark-sand { background-color: var(--theme-dark-sand) !important; }
.bg-theme-danger { background-color: var(--theme-danger) !important; }

/* -----------------------------------------------------------------------------
   Theme Gradient Backgrounds
   ----------------------------------------------------------------------------- */
.bg-gradient-theme-light-blue {
    background: linear-gradient(90deg, var(--theme-light-blue) 50%, hsla(186, 33%, 50%, 1) 100%) !important;
}
.bg-gradient-theme-light-green {
    background: linear-gradient(90deg, var(--theme-light-green) 50%, hsla(115, 35%, 71%, 1) 100%) !important;
}
.bg-gradient-theme-light-sand {
    background: linear-gradient(90deg, var(--theme-light-sand) 50%, hsla(45, 68%, 64%, 1) 100%) !important;
}
.bg-gradient-theme-dark-blue {
    background: linear-gradient(90deg, var(--theme-dark-blue) 50%, hsla(182, 32%, 34%, 1) 100%) !important;
}
.bg-gradient-theme-dark-green {
    background: linear-gradient(90deg, var(--theme-dark-green) 50%, hsla(143, 68%, 27%, 1) 100%) !important;
}
.bg-gradient-theme-dark-sand {
    background: linear-gradient(90deg, var(--theme-dark-sand) 50%, hsla(38, 29%, 33%, 1) 100%) !important;
}

/* -----------------------------------------------------------------------------
   Theme Text Colors
   ----------------------------------------------------------------------------- */
.text-theme-light-blue { color: var(--theme-light-blue) !important; }
.text-theme-dark-blue { color: var(--theme-dark-blue) !important; }
.text-theme-light-green { color: var(--theme-light-green) !important; }
.text-theme-dark-green { color: var(--theme-dark-green) !important; }
.text-theme-light-sand { color: var(--theme-light-sand) !important; }
.text-theme-dark-sand { color: var(--theme-dark-sand) !important; }
.text-theme-danger { color: var(--theme-danger) !important; }

/* Shorthand text color aliases (legacy support) */
.light-blue { color: var(--theme-light-blue) !important; }
.dark-blue { color: var(--theme-dark-blue) !important; }
.light-green { color: var(--theme-light-green) !important; }
.dark-green { color: var(--theme-dark-green) !important; }
.light-sand { color: var(--theme-light-sand) !important; }
.dark-sand { color: var(--theme-dark-sand) !important; }
.signal { color: var(--theme-danger) !important; }

/* -----------------------------------------------------------------------------
   Theme Custom Buttons (theme-btn-*)
   ----------------------------------------------------------------------------- */

/* Outline Primary */
.theme-btn-outline-primary,
.theme-btn-outline-brand-primary {
    color: var(--theme-dark-blue);
    border-color: var(--theme-dark-blue);
    box-shadow: none;
}
.theme-btn-outline-primary:hover:not(.active),
.theme-btn-outline-brand-primary:hover:not(.active) {
    background-color: transparent;
    opacity: .75;
    box-shadow: none;
    color: var(--theme-dark-blue);
}

/* Sandy Primary (light sand bg, dark sand text) */
.theme-btn-sandy-primary {
    background-color: var(--theme-light-sand);
    color: var(--theme-dark-sand);
}
.theme-btn-sandy-primary:focus,
.theme-btn-sandy-primary:active {
    background-color: var(--theme-light-sand) !important;
    color: var(--theme-dark-sand) !important;
    opacity: 0.75;
}
.theme-btn-sandy-primary:hover:not(.active) {
    background-color: var(--theme-light-sand);
    opacity: .75;
    box-shadow: none;
    color: var(--theme-dark-sand);
}
.theme-btn-sandy-primary:disabled {
    background-color: var(--theme-light-sand);
    color: var(--theme-dark-sand);
    opacity: 0.5;
    cursor: not-allowed;
}

/* Sandy Secondary (dark sand bg, light sand text) */
.theme-btn-sandy-secondary {
    background-color: var(--theme-dark-sand);
    color: var(--theme-light-sand);
}
.theme-btn-sandy-secondary:focus,
.theme-btn-sandy-secondary:active {
    background-color: var(--theme-dark-sand) !important;
    color: var(--theme-light-sand) !important;
    opacity: 0.75;
}
.theme-btn-sandy-secondary:hover:not(.active) {
    background-color: var(--theme-dark-sand);
    opacity: .75;
    box-shadow: none;
    color: var(--theme-light-sand);
}
.theme-btn-sandy-secondary:disabled {
    background-color: var(--theme-dark-sand);
    color: var(--theme-light-sand);
    opacity: 0.5;
    cursor: not-allowed;
}

/* Blue Primary (light blue bg, dark blue text) */
.theme-btn-blue-primary {
    background-color: var(--theme-light-blue);
    color: var(--theme-dark-blue);
}
.theme-btn-blue-primary:focus,
.theme-btn-blue-primary:active {
    background-color: var(--theme-light-blue) !important;
    color: var(--theme-dark-blue) !important;
    opacity: 0.75;
}
.theme-btn-blue-primary:hover:not(.active) {
    background-color: var(--theme-light-blue);
    opacity: .75;
    box-shadow: none;
    color: var(--theme-dark-blue);
}
.theme-btn-blue-primary:disabled {
    background-color: var(--theme-light-blue);
    color: var(--theme-dark-blue);
    opacity: 0.5;
    cursor: not-allowed;
}

/* Blue Secondary (dark blue bg, light blue text) */
.theme-btn-blue-secondary {
    background-color: var(--theme-dark-blue);
    color: var(--theme-light-blue);
}
.theme-btn-blue-secondary:focus,
.theme-btn-blue-secondary:active {
    background-color: var(--theme-dark-blue) !important;
    color: var(--theme-light-blue) !important;
    opacity: 0.75;
}
.theme-btn-blue-secondary:hover:not(.active) {
    background-color: var(--theme-dark-blue);
    opacity: .75;
    box-shadow: none;
    color: var(--theme-light-blue);
}
.theme-btn-blue-secondary:disabled {
    background-color: var(--theme-dark-blue);
    color: var(--theme-light-blue);
    opacity: 0.5;
    cursor: not-allowed;
}

/* -----------------------------------------------------------------------------
   Norena Utility Classes
   ----------------------------------------------------------------------------- */

/* Info header styling for show pages */
.show-page-info-header {
    margin-top: 16px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #344767;
    margin-left: 4px;
}

/* Modal size variants */
.modal-dialog.modal-dialog-medium {
    max-width: 33vw;
}
@media screen and (max-width: 767px) {
    .modal-dialog.modal-dialog-medium {
        max-width: 100vw;
    }
}

.modal-dialog.modal-dialog-large {
    max-width: 70vw;
}
@media screen and (max-width: 767px) {
    .modal-dialog.modal-dialog-large {
        max-width: 100vw;
    }
}

/* -----------------------------------------------------------------------------
   FlatPicker Theme (date picker)
   ----------------------------------------------------------------------------- */
.flatpickr-calendar .flatpickr-day.today {
    border-color: var(--brand-primary) !important;
    background: transparent !important;
    color: var(--brand-primary) !important;
}

.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

.flatpickr-calendar .flatpickr-day.inRange {
    background: var(--brand-accent) !important;
    color: var(--brand-primary) !important;
    border-radius: 0;
    -webkit-box-shadow: -5px 0 0 var(--brand-accent), 5px 0 0 var(--brand-accent);
    box-shadow: -5px 0 0 var(--brand-accent), 5px 0 0 var(--brand-accent);
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)) {
    -webkit-box-shadow: -5px 0 0 var(--brand-accent), 5px 0 0 var(--brand-accent);
    box-shadow: -5px 0 0 var(--brand-accent), 5px 0 0 var(--brand-accent);
}

.flatpickr-calendar .flatpickr-day:hover {
    background: var(--brand-secondary) !important;
    border-color: var(--brand-secondary) !important;
    color: #fff !important;
}

.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.startRange:hover,
.flatpickr-calendar .flatpickr-day.endRange:hover {
    background: var(--brand-secondary) !important;
    border-color: var(--brand-secondary) !important;
}