@import "_tokens.css";

/* ==========================================================================
   Banquet CRM — application theme
   Built on Bootstrap 5.3. Uses Bootstrap's own [data-bs-theme] switch so the
   dark mode is native rather than a second stylesheet.
   ========================================================================== */

:root {
    /* Brand — a restrained wine/gold pairing. Saturated colour is kept for
       accents only; an all-day CRM should not shout. */
    --bq-wine:          #8b1e3f;
    --bq-wine-dark:     #6d162f;
    --bq-wine-light:    #b8446a;
    --bq-gold:          #c9a227;
    --bq-gold-soft:     #e8d9a0;

    --bq-sidebar-bg:      #16181d;
    --bq-sidebar-fg:      #9aa1ad;
    --bq-sidebar-fg-hover: #ffffff;
    --bq-sidebar-active:  rgba(139, 30, 63, .9);
    --bq-sidebar-border:  rgba(255, 255, 255, .06);
    --bq-sidebar-width:   264px;
    --bq-sidebar-collapsed: 72px;
    --bq-topbar-height:   62px;

    --bq-page-bg:  #f4f5f7;
    --bq-card-bg:  #ffffff;
    --bq-border:   #e4e6eb;
    --bq-muted:    #6b7280;

    --bq-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --bq-shadow:    0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --bq-shadow-lg: 0 10px 24px rgba(16, 24, 40, .10);

    --bq-radius:    .3rem;
    --bq-radius-sm: .4rem;
    --bq-radius-lg: .875rem;

    /* Form control metrics. Every input, select and searchable dropdown is
       built from these, so a TomSelect control and a plain text box are the
       same height and share the same corner and border. Changing an input's
       look means changing it here, not in one component's own rules.
       The height formula is Bootstrap's: line-box + vertical padding + borders. */
    --bq-input-padding-y: .375rem;
    --bq-input-padding-x: .75rem;
    --bq-input-font-size: 1rem;
    --bq-input-line-height: 1.5;
    --bq-input-height: 38px;
    --bq-input-height-sm: 34px;

    /* Where text begins in a field that carries a leading icon: the icon sits
       at the normal padding, is 1rem wide, then the same gap again. Applied in
       exactly one rule so an icon field and a plain field stay aligned. */
    --bq-input-icon-left:   var(--bq-input-padding-x);
    --bq-input-icon-offset: calc(var(--bq-input-icon-left) + 1rem + .5rem);
}

[data-bs-theme="dark"] {
    --bq-page-bg: #14161a;
    --bq-card-bg: #1c1f26;
    --bq-border:  #2c313a;
    --bq-muted:   #9aa1ad;

    --bq-sidebar-bg: #101216;
    --bq-shadow:     0 1px 3px rgba(0, 0, 0, .5);
    --bq-shadow-lg:  0 10px 24px rgba(0, 0, 0, .55);
}

/* Re-point Bootstrap's primary at the brand colour. */
:root,
[data-bs-theme="dark"] {
    --bs-primary:     var(--bq-wine);
    --bs-primary-rgb: 139, 30, 63;
    --bs-link-color:  var(--bq-wine);
    --bs-link-hover-color: var(--bq-wine-dark);
    --bs-border-radius: var(--bq-radius);
    --bs-body-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
    background-color: var(--bq-page-bg);
    font-size: .9rem;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Modern & Glossy Unified Button System Across Entire Website
   ========================================================================== */

/* Height and radius come from the input tokens, not from literals. A button is
   almost always standing next to an input - in a filter bar, in an input-group,
   beside a search box - and at a hardcoded 40px against a 38px input every one
   of those rows sat two pixels out of line. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: var(--bq-input-height);
    min-height: var(--bq-input-height);
    padding: 0 1.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.2;
    border-radius: var(--bq-radius);
    border: var(--bs-border-width) solid transparent;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    white-space: nowrap;
    text-decoration: none;
    box-sizing: border-box;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn-lg {
    height: 46px;
    min-height: 46px;
    padding: 0 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--bq-radius-lg);
}

.btn-sm {
    height: var(--bq-input-height-sm);
    min-height: var(--bq-input-height-sm);
    padding: 0 0.85rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: var(--bq-radius-sm);
    line-height: 1.2;
}

/* Primary Glossy Wine Button */
.btn-primary {
    color: #ffffff !important;
    background: linear-gradient(180deg, #9E2248 0%, #831B3A 100%) !important;
    border: 1px solid #731531 !important;
    box-shadow: 0 2px 6px rgba(139, 30, 63, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    color: #ffffff !important;
    background: linear-gradient(180deg, #B02752 0%, #8E1E41 100%) !important;
    border-color: #7E1938 !important;
    box-shadow: 0 4px 14px rgba(139, 30, 63, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.btn-primary:active {
    background: #791836 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset !important;
}

/* Secondary Button */
.btn-secondary {
    color: #ffffff !important;
    background: linear-gradient(180deg, #4A5568 0%, #323A45 100%) !important;
    border: 1px solid #2D3748 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.btn-secondary:hover {
    color: #ffffff !important;
    background: linear-gradient(180deg, #5A677D 0%, #3D4756 100%) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
}

/* Outline Secondary / Light */
.btn-outline-secondary, .btn-light {
    color: var(--bs-body-color, #2D3748);
    background: #ffffff;
    border: 1px solid #CBD5E0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-outline-secondary:hover, .btn-light:hover {
    color: var(--bq-wine);
    background: #F7FAFC;
    border-color: var(--bq-wine);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.btn-outline-primary {
    color: var(--bq-wine);
    background: transparent;
    border: 1.5px solid var(--bq-wine);
}

.btn-outline-primary:hover {
    color: #ffffff;
    background: var(--bq-wine);
    border-color: var(--bq-wine);
}

/* Custom High-Contrast Outline Danger, Warning & Success Buttons */
.btn-outline-danger {
    color: #dc2626 !important;
    background-color: #fef2f2 !important;
    border: 1px solid #fca5a5 !important;
    font-weight: 500;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    color: #ffffff !important;
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    box-shadow: 0 3px 8px rgba(220, 38, 38, 0.25) !important;
}

.btn-outline-warning {
    color: #d97706 !important;
    background-color: #fffbeb !important;
    border: 1px solid #fde68a !important;
    font-weight: 500;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
    color: #ffffff !important;
    background-color: #d97706 !important;
    border-color: #d97706 !important;
    box-shadow: 0 3px 8px rgba(217, 119, 6, 0.25) !important;
}

.btn-outline-success {
    color: #16a34a !important;
    background-color: #f0fdf4 !important;
    border: 1px solid #86efac !important;
    font-weight: 500;
}

.btn-outline-success:hover,
.btn-outline-success:focus {
    color: #ffffff !important;
    background-color: #16a34a !important;
    border-color: #16a34a !important;
    box-shadow: 0 3px 8px rgba(22, 163, 74, 0.25) !important;
}

.badge-soft {
    background: color-mix(in srgb, var(--bs-secondary) 12%, transparent);
    color: var(--bs-secondary);
    font-weight: 600;
}

/* ==========================================================================
   App shell
   ========================================================================== */

.bq-shell {
    min-height: 100vh;
}

.bq-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--bq-sidebar-width);
    background: var(--bq-sidebar-bg);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: width .18s ease, transform .18s ease;
    overflow: hidden;
}

.bq-sidebar__brand {
    height: var(--bq-topbar-height);
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 0 1.1rem;
    border-bottom: 1px solid var(--bq-sidebar-border);
    flex-shrink: 0;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
}

.bq-sidebar__logo-full {
    height: 38px;
    max-width: 185px;
    width: auto;
    object-fit: contain;
    display: block;
    transition: opacity .18s ease;
}

.bq-sidebar__logo-icon {
    height: 34px;
    width: 34px;
    object-fit: contain;
    display: none;
    transition: opacity .18s ease;
}

.bq-sidebar__mark {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--bq-radius);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .95rem;
    color: #fff;
    background: linear-gradient(135deg, var(--bq-wine) 0%, var(--bq-wine-light) 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset;
}

.bq-sidebar__title {
    font-weight: 650;
    font-size: .95rem;
    line-height: 1.15;
    white-space: nowrap;
}

.bq-sidebar__title small {
    display: block;
    font-weight: 400;
    font-size: .7rem;
    color: var(--bq-sidebar-fg);
}

.bq-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .75rem .625rem 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .16) transparent;
}

.bq-sidebar__nav::-webkit-scrollbar { width: 6px; }
.bq-sidebar__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-radius: var(--bq-radius-sm);
}

.bq-nav-heading {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-weight: 700;
    color: #5f6773;
    padding: 1rem .75rem .4rem;
    white-space: nowrap;
}

.bq-nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .75rem;
    margin-bottom: 1px;
    border-radius: var(--bq-radius-sm);
    color: var(--bq-sidebar-fg);
    text-decoration: none;
    font-size: .855rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}

.bq-nav-link:hover {
    background: rgba(255, 255, 255, .05);
    color: var(--bq-sidebar-fg-hover);
}

.bq-nav-link.active {
    background: var(--bq-sidebar-active);
    color: #fff;
    box-shadow: var(--bq-shadow-sm);
}

.bq-nav-link.active .bq-nav-link__icon { color: var(--bq-gold-soft); }

.bq-nav-link__icon {
    font-size: 1.02rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.bq-nav-link__badge { margin-left: auto; }

/* Collapsed rail */
.bq-shell.is-collapsed .bq-sidebar { width: var(--bq-sidebar-collapsed); }
.bq-shell.is-collapsed .bq-sidebar__title,
.bq-shell.is-collapsed .bq-sidebar__logo-full,
.bq-shell.is-collapsed .bq-nav-link__label,
.bq-shell.is-collapsed .bq-nav-link__badge,
.bq-shell.is-collapsed .bq-nav-heading { display: none !important; }
.bq-shell.is-collapsed .bq-sidebar__logo-icon { display: block !important; }
.bq-shell.is-collapsed .bq-nav-link { justify-content: center; padding-inline: 0; }
.bq-shell.is-collapsed .bq-sidebar__brand { justify-content: center; padding-inline: 0; }
.bq-shell.is-collapsed .bq-main { margin-left: var(--bq-sidebar-collapsed); }

.bq-main {
    margin-left: var(--bq-sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left .18s ease;
}

/* ==========================================================================
   Topbar
   ========================================================================== */

.bq-topbar {
    height: var(--bq-topbar-height);
    background: var(--bq-card-bg);
    border-bottom: 1px solid var(--bq-border);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 1.25rem;
    position: sticky;
    top: 0;
    z-index: 1050;
}

.bq-icon-btn {
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    border-radius: var(--bq-radius-sm);
    color: var(--bq-muted);
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    transition: background .12s ease, color .12s ease;
}

.bq-icon-btn:hover {
    background: color-mix(in srgb, var(--bs-body-color) 7%, transparent);
    color: var(--bs-body-color);
}

.bq-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .78rem;
    font-weight: 650;
    color: #fff;
    background: linear-gradient(135deg, var(--bq-wine) 0%, var(--bq-wine-light) 100%);
    flex-shrink: 0;
}

.bq-topbar__property {
    max-width: 260px;
}

.bq-content {
    flex: 1;
    padding: 1.35rem 1.25rem 2.5rem;
}

/* ==========================================================================
   Page header
   ========================================================================== */

.bq-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.15rem;
}

.bq-page-head h1 {
    font-size: 1.3rem;
    font-weight: 650;
    margin: 0;
    letter-spacing: -.01em;
}

.bq-page-head .bq-page-sub {
    color: var(--bq-muted);
    font-size: .83rem;
    margin-top: .15rem;
}

/* ==========================================================================
   Cards & stats
   ========================================================================== */

.bq-card {
    background: var(--bq-card-bg);
    border: 1px solid var(--bq-border);
    border-radius: var(--bq-radius);
    box-shadow: var(--bq-shadow-sm);
}

.bq-card__head {
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--bq-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.bq-card__head.d-flex.align-items-center:not(.justify-content-between),
.bq-card__head.justify-content-start {
    justify-content: flex-start;
}

.bq-card__title {
    font-size: .92rem;
    font-weight: 650;
    margin: 0;
}

.bq-card__body { padding: 1.1rem; }

.bq-stat {
    background: var(--bq-card-bg);
    border: 1px solid var(--bq-border);
    border-radius: var(--bq-radius);
    padding: 1.05rem 1.15rem;
    box-shadow: var(--bq-shadow-sm);
    height: 100%;
    position: relative;
    overflow: hidden;
}

.bq-stat::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--bq-stat-accent, var(--bq-wine));
}

.bq-stat__label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 650;
    color: var(--bq-muted);
}

.bq-stat__value {
    font-size: 1.6rem;
    font-weight: 680;
    line-height: 1.15;
    margin-top: .3rem;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.bq-stat__meta {
    font-size: .78rem;
    color: var(--bq-muted);
    margin-top: .3rem;
}

.bq-stat__icon {
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-size: 1.6rem;
    color: var(--bq-stat-accent, var(--bq-wine));
    opacity: 0.85;
}

/* ==========================================================================
   Empty state — used by every not-yet-built module screen
   ========================================================================== */

.bq-empty {
    text-align: center;
    padding: 3.5rem 1.5rem;
    color: var(--bq-muted);
}

.bq-empty__icon {
    font-size: 2.6rem;
    opacity: .35;
    margin-bottom: .75rem;
    display: block;
}

.bq-empty h2 {
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--bs-body-color);
    margin-bottom: .4rem;
}

/* ==========================================================================
   Auth screens
   ========================================================================== */

:root {
    --bq-wine-primary:   #8F123E;
    --bq-wine-dark:      #650A2B;
    --bq-gold-accent:    #F4C34E;
    --bq-text-dark:      #1E2028;
    --bq-text-gray:      #717783;
    --bq-border-light:   #E4E5EA;
    --bq-bg-light:       #FBFAFC;
}

.bq-auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 53% 47%;
}

.bq-auth__aside {
    position: relative;
    background:
        linear-gradient(
            90deg,
            rgba(20, 4, 12, 0.95) 0%,
            rgba(45, 6, 20, 0.78) 45%,
            rgba(109, 22, 47, 0.25) 100%
        ),
        url('../images/auth-bg.jpg') 65% center / cover no-repeat;
    color: #ffffff;
    padding: 3rem 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 2. Logo Branding */
.bq-auth__brand-mark {
    width: 44px;
    height: 44px;
    border-radius: var(--bq-radius);
    background: var(--bq-wine-primary);
    color: #ffffff;
    font-weight: 800;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.bq-auth__brand-title {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
}

.bq-auth__brand-sub {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 2px;
}

/* 3. Hero Heading (Controlled width 410px, 16px bottom margin, sleek underline) */
.bq-auth__aside h1 {
    font-size: 40px;
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1.08;
    color: #ffffff;
    max-width: 410px;
    margin-bottom: 16px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

.bq-auth__aside .highlight-underline {
    position: relative;
    color: var(--bq-gold-accent);
    display: inline-block;
}

.bq-auth__aside .highlight-underline::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2.5px;
    background: #E11D48;
    border-radius: var(--bq-radius-sm);
}

/* 4. Hero Description (16px spacing from heading, max-width 410px) */
.bq-auth__aside p.lead {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 400;
    font-size: 15.5px;
    line-height: 1.6;
    max-width: 410px;
    margin-bottom: 2rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* 5. Feature List (22px vertical rhythm, 90% white sublines) */
.bq-auth__points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1.35rem;
    max-width: 410px;
}

.bq-auth__points li {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 14px;
    line-height: 1.45;
}

.bq-auth__points li strong {
    color: #FFFFFF;
    font-weight: 700;
}

.bq-auth__points li span.feature-sub {
    color: rgba(255, 255, 255, 0.90);
    font-weight: 400;
    font-size: 13.5px;
}

.bq-auth__points .icon-box {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(244, 195, 78, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bq-gold-accent);
    flex-shrink: 0;
    font-size: 18px;
}

/* 6. Footer (38px bottom spacing) */
.bq-auth__aside-footer {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.70);
    padding-bottom: 1rem;
}

/* 7. Right Background */
.bq-auth__form {
    display: grid;
    place-items: center;
    padding: 2.5rem 1.5rem;
    background: var(--bq-bg-light);
    position: relative;
    overflow: hidden;
}

.bq-auth-bg-decorations {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.bq-auth-dots-top {
    position: absolute;
    top: 40px;
    left: 40px;
    width: 60px;
    height: 60px;
    background-image: radial-gradient(#CBD5E1 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    opacity: 0.25;
}

.bq-auth-dots-right {
    position: absolute;
    bottom: 120px;
    right: 35px;
    width: 48px;
    height: 72px;
    background-image: radial-gradient(#CBD5E1 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    opacity: 0.25;
}

.bq-auth-waves {
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 2px solid rgba(143, 18, 62, 0.035);
    box-shadow: 0 0 0 40px rgba(143, 18, 62, 0.02), 0 0 0 80px rgba(143, 18, 62, 0.01);
}

.bq-auth-glow-top {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(143, 18, 62, 0.03) 0%, transparent 70%);
}

/* 8. Login Card (Padding reduced to 32px 36px, sitting at optical center) */
.bq-auth-card {
    width: 100%;
    max-width: 450px;
    background: #ffffff;
    border: 1px solid var(--bq-border-light);
    border-radius: var(--bq-radius-lg);
    box-shadow: 0 20px 55px rgba(50, 20, 35, 0.10);
    padding: 32px 36px;
    margin-top: 15px;
    position: relative;
    z-index: 1;
    animation: bqFadeInUp 800ms ease-out forwards;
}

@keyframes bqFadeInUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 9. Top Login Icon (Banquet Event Icon with 3 controlled particles) */
.bq-auth-icon-outer-ring {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(143, 18, 62, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    position: relative;
}

.bq-auth-icon-badge {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--bq-wine-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 4px 14px rgba(143, 18, 62, 0.25);
    animation: bqIconPulse 2s ease-in-out infinite;
    position: relative;
    z-index: 2;
}

@keyframes bqIconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.06);
    }
}

/* Controlled Floating Particles */
.bq-auth-particle {
    position: absolute;
    border-radius: 50%;
    background: var(--bq-wine-primary);
    opacity: 0;
    pointer-events: none;
    animation: bqFloatParticle 3.5s ease-in-out infinite;
}

.particle-1 {
    width: 5px;
    height: 5px;
    top: 6px;
    left: -6px;
    animation-delay: 0s;
}

.particle-2 {
    width: 4px;
    height: 4px;
    top: -3px;
    right: -5px;
    animation-delay: 1.2s;
}

.particle-3 {
    width: 5px;
    height: 5px;
    bottom: 6px;
    right: -8px;
    animation-delay: 2.4s;
}

@keyframes bqFloatParticle {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.6);
    }
    50% {
        opacity: 0.4;
    }
    100% {
        opacity: 0;
        transform: translateY(-16px) scale(1.1);
    }
}

/* 10. Welcome Heading Spacing */
.bq-auth-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--bq-text-dark);
    margin-bottom: 6px;
}

.bq-auth-subtitle {
    font-size: 14px;
    color: var(--bq-text-gray);
    margin-bottom: 26px;
}

/* 11 & 12. Input Field Styling (Height: 52px, Radius: 11px) */
.bq-auth .form-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--bq-text-dark);
    margin-bottom: 6px;
}

.bq-auth .input-group {
    border: 1px solid var(--bq-border-light);
    border-radius: var(--bq-radius);
    transition: all 200ms ease;
    overflow: hidden;
    height: 52px;
}

.bq-auth .input-group:focus-within {
    border-color: var(--bq-wine-primary) !important;
    box-shadow: 0 0 0 3px rgba(143, 18, 62, 0.08);
}

.bq-auth .input-group:focus-within .input-group-text {
    color: var(--bq-wine-primary);
}

.bq-auth .input-group .input-group-text {
    background: #F9FAFB;
    border: none;
    border-right: 1px solid #F3F4F6;
    color: var(--bq-text-gray);
    width: 44px;
    justify-content: center;
    transition: all 200ms ease;
}

.bq-auth .input-group .form-control {
    border: none;
    box-shadow: none !important;
    height: 100%;
    font-size: 14px;
    color: var(--bq-text-dark);
}

.bq-auth .input-group .form-control::placeholder {
    color: #9CA3AF;
    font-weight: 400;
}

.bq-auth .input-group #togglePassword {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    margin: 0;
    line-height: 1;
    border: none !important;
    box-shadow: none !important;
}

.bq-auth .input-group #togglePasswordIcon {
    font-size: 1.15rem;
    line-height: 1;
    display: block;
    margin: 0;
}

/* 13. Remember Me Checkbox */
.bq-auth .form-check-input {
    width: 18px;
    height: 18px;
    border-radius: var(--bq-radius-sm);
    margin-top: 0;
    border-color: var(--bq-wine-primary);
}

.bq-auth .form-check-input:checked {
    background-color: var(--bq-wine-primary);
    border-color: var(--bq-wine-primary);
}

.bq-auth .form-check-label {
    font-size: 13.5px;
    color: var(--bq-text-gray);
    font-weight: 500;
}

/* 14. Sign In Button */
.btn-login {
    background: var(--bq-wine-primary);
    border: 1px solid var(--bq-wine-dark);
    color: #ffffff;
    height: 52px;
    font-weight: 700;
    font-size: 16px;
    border-radius: var(--bq-radius);
    box-shadow: 0 6px 18px rgba(143, 18, 62, 0.20);
    transition: all 200ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(120, 15, 50, 0.20);
    background: var(--bq-wine-dark);
    color: #ffffff;
}

.btn-login:active {
    transform: scale(0.98);
    box-shadow: 0 2px 6px rgba(143, 18, 62, 0.2);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .bq-auth-card,
    .bq-auth-icon-badge,
    .bq-auth-particle,
    .btn-login {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* Responsive Layout */
@media (max-width: 991.98px) {
    .bq-auth { grid-template-columns: 1fr; }
    .bq-auth__aside { display: none; }
    .bq-auth-card { padding: 2rem 1.5rem; }
}

/* ==========================================================================
   Tables
   ========================================================================== */

.bq-table {
    --bs-table-bg: transparent;
    margin: 0;
}

.bq-table > thead > tr > th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    color: var(--bq-muted);
    border-bottom: 1px solid var(--bq-border);
    padding: .6rem 1.1rem;
    white-space: nowrap;
}

.bq-table > tbody > tr > td {
    padding: .7rem 1.1rem;
    border-bottom: 1px solid var(--bq-border);
    vertical-align: middle;
}

.bq-table > tbody > tr:last-child > td { border-bottom: 0; }

.bq-num { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 991.98px) {
    .bq-sidebar { transform: translateX(-100%); }
    .bq-shell.is-open .bq-sidebar { transform: translateX(0); box-shadow: var(--bq-shadow-lg); }
    .bq-main { margin-left: 0; }
    .bq-shell.is-collapsed .bq-main { margin-left: 0; }

    .bq-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 1035;
        display: none;
    }
    .bq-shell.is-open .bq-backdrop { display: block; }

    .bq-topbar__property { max-width: 150px; }
}

/* Form required label indicator */
.form-label.required::after {
    content: " *";
    color: var(--bs-danger, #dc3545);
    font-weight: 600;
}

/* ==========================================================================
   Glossy & Vibrant Checkbox / Radio System
   ========================================================================== */

.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0;
    vertical-align: middle;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 2px solid var(--bq-wine);
    appearance: none;
    border-radius: var(--bq-radius-sm);
    transition: all 0.18s ease-in-out;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.form-check-input:hover {
    border-color: var(--bq-wine-dark);
    box-shadow: 0 0 0 4px rgba(139, 30, 63, 0.14);
    transform: scale(1.05);
}

.form-check-input:focus {
    border-color: var(--bq-wine-dark);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(139, 30, 63, 0.22);
}

.form-check-input:checked {
    background-color: var(--bq-wine);
    border-color: var(--bq-wine);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    box-shadow: 0 2px 8px rgba(139, 30, 63, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.form-check-input[type="radio"] {
    border-radius: 50%;
}

.form-check-input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-label {
    cursor: pointer;
    user-select: none;
    font-weight: 500;
    padding-left: 0.25rem;
}

.form-check {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Checkbox lists inside dropdowns (e.g. "Column Visibility") must stack one per row.
   The inline-flex rule above made them flow side by side and overlap. */
.dropdown-menu .form-check {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0;
    margin-bottom: 0.25rem;
}

.dropdown-menu .form-check .form-check-input {
    float: none;
    margin: 0;
    flex: 0 0 auto;
}

.dropdown-menu .form-check .form-check-label {
    flex: 1 1 auto;
    padding-left: 0;
    white-space: nowrap;
}


/* Ensure validation error messages are visible below input fields by default.
   No !important here on purpose: app.css loads after bootstrap.min.css so this
   still wins the cascade for a freshly rendered @error message, but leaving
   !important off lets the client-validation JS hide a message (inline
   style.display = 'none') once the user corrects that field - with !important
   a message shown by the server could never be dismissed by typing. */
.invalid-feedback {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-top: 0.35rem;
    color: var(--bs-danger, #dc3545);
}

/* ==========================================================================
   New UI Design System — KPI Cards, Circular Avatars, Input Icons & Soft Badges
   ========================================================================== */

/* KPI Stat Cards */
.bq-kpi-card {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: var(--bq-radius-lg);
    padding: 1.1rem 1.15rem;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    height: 100%;
    min-width: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bq-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

a.bq-kpi-clickable,
a.bq-kpi-clickable *,
.bq-kpi-clickable,
.bq-kpi-clickable * {
    text-decoration: none !important;
}

.bq-kpi-clickable {
    display: block;
    height: 100%;
}

.bq-kpi-card--wine { border-left: 4px solid var(--bq-wine); }
.bq-kpi-card--blue { border-left: 4px solid #3182CE; }
.bq-kpi-card--gold { border-left: 4px solid #D69E2E; }
.bq-kpi-card--red  { border-left: 4px solid #E53E3E; }

.bq-kpi-content {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.bq-kpi-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #718096;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bq-kpi-value {
    font-size: clamp(1.1rem, 1.25vw + 0.45rem, 1.65rem);
    font-weight: 800;
    color: #1A202C;
    line-height: 1.2;
    margin-top: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.02em;
}

.bq-kpi-sub {
    font-size: 0.8125rem;
    color: #A0AEC0;
    margin-top: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bq-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.bq-kpi-icon--wine { background: #FFF0F4; color: var(--bq-wine); }
.bq-kpi-icon--blue { background: #EBF8FF; color: #3182CE; }
.bq-kpi-icon--gold { background: #FEFCBF; color: #B7791F; }
.bq-kpi-icon--red  { background: #FFF5F5; color: #E53E3E; }

/* Circular Section Title Badges */
.bq-card__title-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #FFF0F4;
    color: var(--bq-wine);
    display: inline-grid;
    place-items: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

/* Initial Avatars */
.bq-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.85rem;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.bq-avatar--pink   { background: #FFF0F4; color: var(--bq-wine); }
.bq-avatar--blue   { background: #EBF8FF; color: #2B6CB0; }
.bq-avatar--gold   { background: #FEFCBF; color: #B7791F; }
.bq-avatar--green  { background: #F0FFF4; color: #276749; }
.bq-avatar--purple { background: #FAF5FF; color: #6B46C1; }

/* Soft Pill Badges */
.badge-pill-soft {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    font-size: 0.78125rem;
    font-weight: 600;
    border-radius: var(--bq-radius-lg);
    line-height: 1.2;
}

.badge-soft-individual { background: #EBF8FF; color: #2B6CB0; }
.badge-soft-corporate  { background: #FAF5FF; color: #6B46C1; }
.badge-soft-agent      { background: #EDF2F7; color: #4A5568; }
.badge-soft-vip        { background: #FEFCBF; color: #9B6D12; }
.badge-soft-wedding    { background: #FFF5F5; color: #C53030; }
.badge-soft-premium    { background: #F0FFF4; color: #276749; }
.badge-soft-repeat     { background: #E6FFFA; color: #2C7A7B; }

/* Input Icons */
.input-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.input-icon-wrapper i {
    position: absolute;
    left: 12px;
    color: #A0AEC0;
    font-size: 0.95rem;
    pointer-events: none;
    z-index: 5;
}

.input-icon-wrapper .form-control,
.input-icon-wrapper .form-select {
    padding-left: 36px;
}

/* Flag & Country Code Addon */
.bq-country-prefix {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-right: none;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    padding: 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: #4A5568;
}

/* Scope Select Pill Badges in Matrix */
.select-scope-pill {
    border-radius: var(--bq-radius-lg);
    font-weight: 700 !important;
    font-size: 0.78125rem !important;
    padding: 0.25rem 0.65rem !important;
    border: none !important;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.select-scope-pill[data-scope="all"] { background: #DCFCE7 !important; color: #15803D !important; }
.select-scope-pill[data-scope="own"] { background: #E0F2FE !important; color: #0369A1 !important; }
.select-scope-pill[data-scope="role"] { background: #FEF9C3 !important; color: #A16207 !important; }
.select-scope-pill[data-scope="related"] { background: #E0E7FF !important; color: #4338CA !important; }
.select-scope-pill[data-scope="none"] { background: #FEE2E2 !important; color: #B91C1C !important; }

/* Touch targets for icon buttons */
.btn-icon, .btn-sm.btn-icon, .bq-action-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Phone & Phablet Breakpoints (SRS UI Tuning) */
@media (max-width: 767.98px) {
    .bq-content { padding: 1rem; }
    .bq-card__body { padding: 1rem; }
    .row.g-3 > [class*="col-"] { margin-bottom: 0; }
}

@media (max-width: 575.98px) {
    .bq-page-head {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
    }

    /* The action area is the last child of the page head - in this project it
       is a bare <div> with no class of its own (48 screens), or the button
       itself when there is only one. Selecting on :not(:first-child) rather
       than a class keeps this working without touching 99 blade files. */
    .bq-page-head > *:not(:first-child) {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        width: 100%;
    }

    .bq-page-head > *:not(:first-child) > .btn,
    .bq-page-head > .btn:not(:first-child) {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* Filter bars: search + selects + Filter/Reset sit in one flex row that is
       far too wide for a phone. */
    .bq-filter-bar,
    .bq-card__body > form > .row {
        row-gap: .5rem;
    }

    .modal-dialog {
        margin: .5rem;
    }

    .modal-body {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }

    .table-responsive {
        margin-bottom: 1rem;
    }

    /* A .table-responsive inside a flex or grid parent will not shrink unless
       the parent is allowed to go below its content width - without this the
       whole page scrolls sideways instead of just the table. */
    .bq-card,
    .bq-card__body,
    .bq-main {
        min-width: 0;
    }

    .bq-table .btn-sm,
    td .btn-sm {
        min-width: 2.25rem;
        min-height: 2.25rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ==========================================================================
   Input Icon Wrapper & TomSelect Integration (Global Desktop & Mobile)
   ========================================================================== */
/* Nothing is neutralised on the TomSelect wrapper on purpose.
   The vendored bootstrap5 theme is built so the wrapper keeps its .form-select
   class and therefore Bootstrap's own border, radius, height and caret, while
   the inner .ts-control is transparent and border-less:

       .ts-wrapper.form-select        { padding:0!important; height:auto }
       .ts-wrapper.form-select .ts-control { border:none!important }

   An earlier override here stripped the wrapper's border, background image and
   padding, so neither element drew a border and every dropdown appeared as a
   borderless box a few pixels taller than the inputs beside it. Overriding the
   wrapper is what broke it - leave it alone and a TomSelect is pixel-identical
   to a native select for free. */

.input-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.input-icon-wrapper > i,
.input-icon-wrapper > .bi {
    position: absolute;
    left: var(--bq-input-icon-left);
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    color: var(--bs-gray-500, #9CA3AF);
    font-size: 1rem;
    pointer-events: none;
}

/* One offset, defined once, so a dropdown's text lines up with the text in the
   input beside it.

   :not(.ts-wrapper) matters. TomSelect's wrapper carries the original select's
   .form-select class, so without the exclusion the indent is applied twice -
   once to the wrapper and again to the .ts-control inside it - and the
   placeholder starts at 76px while every plain input starts at 38px. */
.input-icon-wrapper > .form-control:not(.ts-wrapper),
.input-icon-wrapper > .form-select:not(.ts-wrapper) {
    padding-left: var(--bq-input-icon-offset) !important;
}

/* On a TomSelect the border sits on the wrapper, so .ts-control starts one
   border-width in already. Subtracting it puts the text on exactly the same
   pixel as the text in a plain input. */
.input-icon-wrapper > .ts-wrapper > .ts-control {
    padding-left: calc(var(--bq-input-icon-offset) - var(--bs-border-width)) !important;
}

.input-icon-wrapper > .ts-wrapper {
    flex: 1;
    width: 100%;
}

.input-icon-wrapper > .ts-wrapper > .ts-control > input,
.input-icon-wrapper > .ts-wrapper > .ts-control > .item {
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-indent: 0 !important;
}

.bq-country-prefix {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.5rem 0.75rem;
    font-size: 0.925rem;
    font-weight: 500;
    color: var(--bs-body-color, #1E2028);
    background-color: var(--bs-tertiary-bg, #F8F9FA);
    border: 1px solid var(--bs-border-color, #E4E5EA);
    border-right: none;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    white-space: nowrap;
}

/* ==========================================================================
   TomSelect / searchable dropdown

   A TomSelect control has to be indistinguishable from a plain .form-select
   sitting next to it. Everything below is therefore expressed through the
   shared input tokens and Bootstrap's own variables - no literal pixel or
   colour values - so the two can never drift apart again.
   ========================================================================== */
.ts-wrapper {
    width: 100%;
}

.form-control:not(.form-control-sm):not(.form-control-lg),
.form-select:not(.form-select-sm):not(.form-select-lg) {
    height: var(--bq-input-height);
    min-height: var(--bq-input-height);
    box-sizing: border-box;
}

.form-control-sm,
.form-select-sm {
    height: var(--bq-input-height-sm) !important;
    min-height: var(--bq-input-height-sm) !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    font-size: 0.8125rem !important;
    box-sizing: border-box;
}

.ts-wrapper.form-select,
.ts-wrapper.form-control {
    min-height: var(--bq-input-height);
    height: var(--bq-input-height);
}

.ts-wrapper.form-select-sm,
.ts-wrapper.form-control-sm {
    min-height: var(--bq-input-height-sm) !important;
    height: var(--bq-input-height-sm) !important;
}

.ts-wrapper .ts-control {
    font-size: var(--bq-input-font-size);
    line-height: var(--bq-input-line-height);
    color: var(--bs-body-color);
    min-height: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
}

.ts-wrapper.form-select-sm .ts-control,
.ts-wrapper.form-control-sm .ts-control {
    font-size: 0.8125rem !important;
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
}

.ts-wrapper .ts-control > input::placeholder {
    color: var(--bs-secondary-color);
    opacity: 1;
}

/* The theme's focus ring is hardcoded Bootstrap blue (#86b7fe). Repaint it in
   the brand wine, on the wrapper - that is the element carrying the border. */
.ts-wrapper.form-select.focus,
.ts-wrapper.form-control.focus {
    border-color: var(--bq-wine-light);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
    outline: 0;
}

.ts-wrapper.form-select.focus .ts-control,
.ts-wrapper.form-control.focus .ts-control {
    border-color: transparent;
    box-shadow: none;
}

.ts-wrapper.disabled.form-select,
.ts-wrapper.disabled.form-control {
    background-color: var(--bs-secondary-bg);
    opacity: 1;
}

/* Server-side validation, so a dropdown shows the same red as a text input.
   The original <select> is hidden, so app.js copies .is-invalid onto the
   wrapper; both selectors are kept in case the class lands either way. */
.ts-wrapper.is-invalid,
.is-invalid + .ts-wrapper {
    border-color: var(--bs-danger);
}

.ts-wrapper.is-invalid.focus,
.is-invalid + .ts-wrapper.focus {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
}

.ts-dropdown {
    padding: .375rem;
    margin-top: .25rem;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bq-radius);
    box-shadow: var(--bq-shadow-lg);
    /* Above modals, which sit at 1055. */
    z-index: 1056;
}

.ts-dropdown .ts-dropdown-content {
    padding: .25rem .25rem .75rem;
}

.ts-dropdown .option {
    padding: .5rem .75rem;
    font-size: var(--bq-input-font-size);
    color: var(--bs-body-color);
    border-radius: var(--bq-radius-sm);
    transition: background-color .15s ease, color .15s ease;
}

.ts-dropdown .option.active,
.ts-dropdown .option:hover {
    color: var(--bq-wine);
    background-color: rgba(var(--bs-primary-rgb), .08);
}

.ts-dropdown .option.selected {
    font-weight: 600;
    color: #fff;
    background-color: var(--bq-wine);
}

.ts-dropdown .no-results,
.ts-dropdown .optgroup-header {
    padding: .5rem .75rem;
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}

/* The search box inside the dropdown (the dropdown_input plugin). */
.ts-dropdown .dropdown-input-wrap {
    padding: 0 0 .375rem;
}

.ts-dropdown .dropdown-input {
    padding: var(--bq-input-padding-y) var(--bq-input-padding-x);
    font-size: var(--bq-input-font-size);
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bq-radius-sm);
}

.ts-dropdown .dropdown-input:focus {
    border-color: var(--bq-wine-light);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2);
    outline: 0;
}

/* ==========================================================================
   Tabs and pills

   Bootstrap's active state is its own blue, and the project set no text colour
   with it, so the selected tab rendered as dark text on a saturated blue - the
   label was barely readable. Brand colour, and enough contrast to read.
   ========================================================================== */
.nav-pills {
    --bs-nav-pills-border-radius:    var(--bq-radius-sm);
    --bs-nav-pills-link-active-bg:   var(--bq-wine);
    --bs-nav-pills-link-active-color: #fff;
}

.nav-pills .nav-link {
    color: var(--bs-secondary-color);
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}

.nav-pills .nav-link:hover:not(.active) {
    color: var(--bq-wine);
    background-color: rgba(var(--bs-primary-rgb), .08);
}

/* Whatever sits inside the active pill - an icon, a count badge - has to be
   readable on the wine too, so nothing keeps an inherited dark colour. */
.nav-pills .nav-link.active,
.nav-pills .nav-link.active * {
    color: #fff !important;
}

.nav-tabs {
    --bs-nav-tabs-link-active-color:        var(--bq-wine);
    --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) transparent;
    --bs-nav-tabs-border-radius:            var(--bq-radius-sm);
}

.nav-tabs .nav-link {
    color: var(--bs-secondary-color);
    font-weight: 500;
}

.nav-tabs .nav-link:hover:not(.active) {
    color: var(--bq-wine);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--bq-wine);
}

/* ==========================================================================
   Checkbox / radio with a description underneath

   The pattern used across the project is

       .form-check > input + label + div.small

   and Bootstrap's .form-check floats the input into a 1.5em left pad, which the
   description div then wraps around - so on a narrow card the label squeezed
   into a two-line column with its own help text sitting alongside it, spilling
   out of the card. Laying the row out as a grid keeps the control in its own
   column and gives the label and description the full remaining width.
   ========================================================================== */
.form-check:has(> .form-check-label + div) {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .625rem;
    align-items: start;
    padding-left: 0;
}

.form-check:has(> .form-check-label + div) > .form-check-input {
    float: none;
    margin: .125rem 0 0;
    grid-column: 1;
    grid-row: 1;
}

.form-check:has(> .form-check-label + div) > .form-check-label {
    grid-column: 2;
    grid-row: 1;
}

/* The description, whatever class the view gave it. */
.form-check:has(> .form-check-label + div) > .form-check-label ~ div {
    grid-column: 2;
    margin-top: .125rem;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--bs-secondary-color);
}

/* ==========================================================================
   Bootstrap dropdown menus

   The property switcher, row action menus and the user menu are plain
   .dropdown-menu, which ships with Bootstrap's blue active state. Repaint them
   in the brand wine and give them the same geometry as a TomSelect dropdown,
   so every menu in the app looks like it came from the same place.
   ========================================================================== */
.dropdown-menu {
    --bs-dropdown-border-radius:      var(--bq-radius);
    --bs-dropdown-item-border-radius: var(--bq-radius-sm);
    --bs-dropdown-padding-x:          .375rem;
    --bs-dropdown-padding-y:          .375rem;
    --bs-dropdown-item-padding-x:     .75rem;
    --bs-dropdown-item-padding-y:     .5rem;
    --bs-dropdown-border-color:       var(--bs-border-color);
    --bs-dropdown-link-hover-bg:      rgba(var(--bs-primary-rgb), .08);
    --bs-dropdown-link-hover-color:   var(--bq-wine);
    --bs-dropdown-link-active-bg:     var(--bq-wine);
    --bs-dropdown-link-active-color:  #fff;
    box-shadow: var(--bq-shadow-lg);
}

.dropdown-menu .dropdown-item {
    border-radius: var(--bs-dropdown-item-border-radius);
    transition: background-color .15s ease, color .15s ease;
}

/* A header inside the menu ("Switch property") is a label, not a choice. */
.dropdown-menu .dropdown-header {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* Multi-select chips. */
.ts-wrapper.multi .ts-control > .item {
    padding: .125rem .5rem;
    color: var(--bq-wine);
    background-color: rgba(var(--bs-primary-rgb), .10);
    border: var(--bs-border-width) solid rgba(var(--bs-primary-rgb), .25);
    border-radius: var(--bq-radius-sm);
}

/* ==========================================================================
   Pagination System (Clean Wine Active State)
   ========================================================================== */
.bq-pagination-container nav > div:first-child {
    display: none !important;
}

/* =================================================-------------------------
   Site-wide Pagination & Pagination Links Styling
   ========================================================================== */
nav .pagination,
.pagination,
.bq-pagination-container .pagination {
    margin-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding-left: 0 !important;
    list-style: none !important;
}

nav .pagination .page-item,
.pagination .page-item,
.bq-pagination-container .pagination .page-item {
    display: inline-flex;
}

nav .pagination .page-item .page-link,
.pagination .page-item .page-link,
.bq-pagination-container .pagination .page-item .page-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 0.75rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: #1E2028 !important;
    background-color: #FFFFFF !important;
    border: 1px solid #E4E5EA !important;
    border-radius: var(--bq-radius-sm, 6px) !important;
    transition: all 150ms ease !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

nav .pagination .page-item .page-link svg,
.pagination .page-item .page-link svg,
.bq-pagination-container .pagination .page-item .page-link svg {
    width: 14px !important;
    height: 14px !important;
    fill: currentColor !important;
}

nav .pagination .page-item:hover .page-link,
.pagination .page-item:hover .page-link,
.bq-pagination-container .pagination .page-item:hover .page-link {
    background-color: #FFF0F4 !important;
    color: #8F123E !important;
    border-color: #8F123E !important;
}

nav .pagination .page-item.active .page-link,
.pagination .page-item.active .page-link,
.bq-pagination-container .pagination .page-item.active .page-link {
    background-color: #8F123E !important;
    border-color: #8F123E !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 5px rgba(143, 18, 62, 0.25) !important;
}

nav .pagination .page-item.disabled .page-link,
.pagination .page-item.disabled .page-link,
.bq-pagination-container .pagination .page-item.disabled .page-link {
    color: #98A2B3 !important;
    background-color: #F9FAFB !important;
    border-color: #EAECF0 !important;
    cursor: not-allowed !important;
    opacity: 0.65 !important;
}

.bq-card__footer,
.bq-pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* =================================================-------------------------
   Masters & Configuration Premium Cards Styling
   ========================================================================== */
.bq-master-card {
    background: #ffffff;
    border: 1px solid #e4e5ea;
    border-radius: var(--bq-radius, 10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
}

.bq-master-card:hover {
    border-color: #8F123E;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(143, 18, 62, 0.08);
}

.bq-master-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(143, 18, 62, 0.08) 0%, rgba(143, 18, 62, 0.02) 100%);
    border: 1px solid rgba(143, 18, 62, 0.12);
    color: #8F123E;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.bq-master-card:hover .bq-master-icon-box {
    background: #8F123E;
    color: #ffffff;
    border-color: #8F123E;
    box-shadow: 0 4px 10px rgba(143, 18, 62, 0.25);
}

/* ==========================================================================
   FullCalendar Event Bar Overflow & Layout Fixes
   ========================================================================== */
.fc .fc-daygrid-event {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
}

.fc-daygrid-event-hslot,
.fc .fc-event-title-container,
.fc .fc-event-title,
.fc .fc-event-main {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

@media print {
    .bq-sidebar, .bq-topbar { display: none !important; }
    .bq-main { margin-left: 0 !important; }
    .bq-content { padding: 0; }
}

/* ==========================================================================
   Auth / Login Layout & Form Styling
   ========================================================================== */
body.bq-auth-page {
    overflow: hidden !important;
    height: 100vh !important;
    width: 100vw !important;
    margin: 0 !important;
}

.bq-auth {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: #f8fafc;
}

.bq-auth__aside {
    width: 50%;
    height: 100vh;
    background: linear-gradient(135deg, rgba(74, 14, 34, 0.85) 0%, rgba(121, 24, 54, 0.85) 50%, rgba(143, 18, 62, 0.85) 100%), url('../images/auth-bg.jpg') center/cover no-repeat !important;
    padding: 2.5rem 3rem;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.bq-auth__aside h1 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin: 0;
}

.bq-auth__aside .highlight-underline {
    color: #F7C948;
    position: relative;
}

.bq-auth__brand-mark {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #8F123E 0%, #C41E56 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.05rem;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.bq-auth__brand-title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.bq-auth__brand-sub {
    font-size: 0.75rem;
    opacity: 0.8;
}

.bq-auth__points {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bq-auth__points li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.bq-auth__points .icon-box {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #F7C948;
    flex-shrink: 0;
}

.bq-auth__points strong {
    font-size: 0.875rem;
}

.bq-auth__points .feature-sub {
    font-size: 0.78rem;
    opacity: 0.82;
}

.bq-auth__aside-footer {
    font-size: 0.8rem;
    opacity: 0.65;
}

.bq-auth__form {
    width: 50%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    background: #FAFAFC;
    overflow-y: auto;
}

.bq-auth-card {
    width: 100%;
    max-width: 400px;
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: var(--bq-radius, 10px);
    padding: 2.25rem 2rem;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.03);
    position: relative;
    z-index: 2;
}

/* Custom Unified Input Wrapper */
.bq-input-wrapper {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #D0D5DD;
    border-radius: var(--bq-radius, 8px);
    padding: 0 0.85rem;
    height: 42px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.bq-input-wrapper:focus-within {
    border-color: #8F123E !important;
    box-shadow: 0 0 0 3px rgba(143, 18, 62, 0.14) !important;
}

.bq-input-wrapper i {
    color: #667085;
    font-size: 1rem;
    flex-shrink: 0;
}

.bq-input-wrapper input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    width: 100%;
    padding: 0 0.5rem;
    font-size: 0.875rem;
    color: #1D2939;
    height: 100%;
}

/* Chrome autofill background fix */
.bq-input-wrapper input:-webkit-autofill,
.bq-input-wrapper input:-webkit-autofill:hover,
.bq-input-wrapper input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
    -webkit-text-fill-color: #1D2939 !important;
    transition: background-color 5000s ease-in-out 0s;
}

.bq-auth-card .form-check-input {
    width: 1rem;
    height: 1rem;
    margin-top: 0.125rem;
    border-radius: 4px !important;
    border-color: #d0d5dd;
    cursor: pointer;
}

.bq-auth-card .form-check-input:checked {
    background-color: #8F123E;
    border-color: #8F123E;
}

.bq-auth-card .form-check-label {
    cursor: pointer;
    font-size: 0.84rem;
    color: #475467;
    font-weight: 500;
}

@media (max-width: 991.98px) {
    body.bq-auth-page { overflow: auto !important; height: auto !important; }
    .bq-auth { flex-direction: column; height: auto; overflow: auto; }
    .bq-auth__aside, .bq-auth__form { width: 100%; height: auto; }
    .bq-auth__aside { padding: 2rem 1.5rem; }
    .bq-auth__form { padding: 2rem 1rem; }
}

/* ==========================================================================
   Global Dark Mode Comprehensive Contrast & Utility Overrides
   ========================================================================== */

[data-bs-theme="dark"] {
    color-scheme: dark;
    --bs-body-color: #e2e8f0;
    --bs-body-bg: #14161a;
    --bs-border-color: #2c313a;
    --bs-emphasis-color: #f8fafc;
    --bs-secondary-color: #94a3b8;
    --bs-tertiary-color: #64748b;

    /* Base Body & Layout */
    body {
        background-color: var(--bq-page-bg) !important;
        color: #e2e8f0 !important;
    }

    /* Global Text Utility Overrides */
    .text-dark,
    .text-black,
    .text-body-emphasis,
    .fw-bold.text-dark,
    .fw-semibold.text-dark {
        color: #f8fafc !important;
    }

    .text-muted,
    .text-secondary,
    .text-body-secondary {
        color: #94a3b8 !important;
    }

    /* Global Background Utility Overrides */
    .bg-light,
    .bg-light-subtle,
    .bg-body-tertiary {
        background-color: #1e2430 !important;
        color: #e2e8f0 !important;
    }

    .bg-white,
    .bg-body {
        background-color: var(--bq-card-bg) !important;
        color: #e2e8f0 !important;
    }

    /* Form Controls, Inputs & Textareas */
    .form-control,
    .form-select,
    .input-group-text,
    .form-floating > .form-control {
        background-color: #1a1f29 !important;
        color: #f1f5f9 !important;
        border-color: #2d3748 !important;
    }

    .form-control:focus,
    .form-select:focus {
        background-color: #1a1f29 !important;
        color: #ffffff !important;
        border-color: var(--bq-wine) !important;
        box-shadow: 0 0 0 0.25rem rgba(139, 30, 63, 0.3) !important;
    }

    .form-control::placeholder {
        color: #64748b !important;
        opacity: 1;
    }

    /* Disabled & Readonly Form Inputs */
    .form-control:disabled,
    .form-control[readonly],
    .form-select:disabled,
    input:disabled,
    input[readonly] {
        background-color: #12151c !important;
        color: #94a3b8 !important;
        border-color: #262c36 !important;
        opacity: 0.85;
    }

    /* Chrome / Edge Autofill in Dark Mode */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    textarea:-webkit-autofill,
    textarea:-webkit-autofill:hover,
    textarea:-webkit-autofill:focus,
    select:-webkit-autofill,
    select:-webkit-autofill:hover,
    select:-webkit-autofill:focus,
    .bq-input-wrapper input:-webkit-autofill,
    .bq-input-wrapper input:-webkit-autofill:hover,
    .bq-input-wrapper input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0px 1000px #1a1f29 inset !important;
        -webkit-text-fill-color: #f1f5f9 !important;
        caret-color: #f1f5f9 !important;
        transition: background-color 5000s ease-in-out 0s;
    }

    /* Form Checkboxes, Radios & Labels */
    .form-check-label {
        color: #e2e8f0 !important;
    }

    .form-check-input {
        background-color: #1a1f29;
        border-color: #4a5568;
    }

    .form-check-input:checked {
        background-color: var(--bq-wine);
        border-color: var(--bq-wine);
    }

    /* Flatpickr Date Inputs in Dark Mode */
    .flatpickr-input,
    input.flatpickr-input,
    .bq-date-field,
    .bq-datetime-field {
        background-color: #1a1f29 !important;
        color: #f1f5f9 !important;
        border-color: #2d3748 !important;
    }

    .flatpickr-calendar {
        background: #1c1f26 !important;
        border-color: #2c313a !important;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6) !important;
    }

    .flatpickr-day {
        color: #e2e8f0 !important;
    }

    .flatpickr-day:hover {
        background-color: rgba(139, 30, 63, 0.35) !important;
    }

    .flatpickr-current-month .flatpickr-monthDropdown-months option {
        background-color: #1c1f26 !important;
        color: #e2e8f0 !important;
    }

    /* Cards, Headers, Dropdowns & Modals */
    .card,
    .bq-card,
    .modal-content,
    .dropdown-menu,
    .popover {
        background-color: var(--bq-card-bg) !important;
        border-color: var(--bq-border) !important;
        color: #e2e8f0 !important;
    }

    .card-header,
    .bq-card__header,
    .modal-header,
    .modal-footer {
        background-color: rgba(255, 255, 255, 0.02) !important;
        border-color: var(--bq-border) !important;
        color: #f8fafc !important;
    }

    .dropdown-item {
        color: #e2e8f0 !important;
    }

    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: #2a313d !important;
        color: #ffffff !important;
    }

    .dropdown-header {
        color: #94a3b8 !important;
    }

    .dropdown-divider {
        border-color: #2d3748 !important;
    }

    /* Tables */
    .table {
        color: #e2e8f0 !important;
        border-color: #2d3748 !important;
    }

    .table th,
    .table td {
        background-color: transparent !important;
        border-color: #2d3748 !important;
        color: #e2e8f0 !important;
    }

    .table-hover tbody tr:hover {
        background-color: rgba(255, 255, 255, 0.04) !important;
    }

    /* Password Eye Toggle Icon & Secondary Buttons */
    .bq-password-toggle,
    .password-toggle-btn {
        color: #94a3b8 !important;
    }

    .btn-outline-secondary,
    .btn-light {
        color: #e2e8f0 !important;
        background-color: #1a1f29 !important;
        border-color: #2d3748 !important;
    }

    .btn-outline-secondary:hover,
    .btn-light:hover {
        color: #ffffff !important;
        background-color: #2d3748 !important;
        border-color: #4a5568 !important;
    }
}

/* ==========================================================================
   Global Uniform Border & Component Consistency Across Entire Website
   ========================================================================== */

/* Uniform Input & Control Borders (Light Mode) */
.form-control,
.form-select,
.ts-wrapper,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select {
    border: 1px solid #d1d5db !important;
    border-radius: var(--bq-radius) !important;
    box-shadow: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.ts-wrapper .ts-control,
.bq-input-wrapper input,
.bq-input-wrapper input:hover,
.bq-input-wrapper input:focus,
.bq-input-wrapper input:active,
.bq-input-wrapper input.is-invalid,
.bq-input-wrapper input.is-valid {
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

.bq-input-wrapper:hover {
    border-color: #98a2b3;
}

.bq-input-wrapper:focus-within {
    border-color: var(--bq-wine) !important;
    box-shadow: 0 0 0 0.2rem rgba(139, 30, 63, 0.18) !important;
}

.bq-input-wrapper.is-invalid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.18) !important;
}

/* Focus States */
.form-control:focus,
.form-select:focus,
.ts-wrapper.focus,
textarea:focus,
input:focus {
    border-color: var(--bq-wine) !important;
    box-shadow: 0 0 0 0.2rem rgba(139, 30, 63, 0.18) !important;
    outline: none !important;
}

/* Invalid / Error States */
.form-control.is-invalid,
.form-select.is-invalid,
.ts-wrapper.is-invalid,
textarea.is-invalid,
input.is-invalid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.18) !important;
}

/* Cards & Containers Uniformity */
.card,
.bq-card,
.modal-content,
.dropdown-menu {
    border: 1px solid #e5e7eb !important;
    border-radius: var(--bq-radius-lg) !important;
}

/* Dark Mode Uniform Border & Component Overrides */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .ts-wrapper,
[data-bs-theme="dark"] textarea,
[data-bs-theme="dark"] input[type="text"],
[data-bs-theme="dark"] input[type="email"],
[data-bs-theme="dark"] input[type="password"],
[data-bs-theme="dark"] input[type="number"],
[data-bs-theme="dark"] input[type="date"],
[data-bs-theme="dark"] input[type="datetime-local"],
[data-bs-theme="dark"] select,
[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .input-group-text {
    border: 1px solid #2c313a !important;
    background-color: #1a1f29 !important;
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .bq-card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu {
    border: 1px solid #2c313a !important;
    background-color: var(--bq-card-bg) !important;
}

[data-bs-theme="dark"] .form-control.is-invalid,
[data-bs-theme="dark"] .form-select.is-invalid,
[data-bs-theme="dark"] .ts-wrapper.is-invalid,
[data-bs-theme="dark"] textarea.is-invalid,
[data-bs-theme="dark"] input.is-invalid {
    border-color: #f87171 !important;
    box-shadow: 0 0 0 0.2rem rgba(248, 113, 113, 0.25) !important;
}

[data-bs-theme="dark"] .bq-input-wrapper input,
[data-bs-theme="dark"] .bq-input-wrapper input:hover,
[data-bs-theme="dark"] .bq-input-wrapper input:focus,
[data-bs-theme="dark"] .bq-input-wrapper input:active,
[data-bs-theme="dark"] .bq-input-wrapper input.is-invalid {
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    background: transparent !important;
}

[data-bs-theme="dark"] .bq-input-wrapper {
    border: 1px solid #2c313a !important;
    background-color: #1a1f29 !important;
}

[data-bs-theme="dark"] .bq-input-wrapper.is-invalid {
    border-color: #f87171 !important;
    box-shadow: 0 0 0 0.2rem rgba(248, 113, 113, 0.25) !important;
}

[data-bs-theme="dark"] .btn-outline-danger {
    color: #f87171 !important;
    background-color: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

[data-bs-theme="dark"] .btn-outline-danger:hover {
    color: #ffffff !important;
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
}

[data-bs-theme="dark"] .btn-outline-warning {
    color: #fbbf24 !important;
    background-color: rgba(245, 158, 11, 0.12) !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

[data-bs-theme="dark"] .btn-outline-warning:hover {
    color: #000000 !important;
    background-color: #fbbf24 !important;
    border-color: #fbbf24 !important;
}

[data-bs-theme="dark"] .btn-outline-success {
    color: #4ade80 !important;
    background-color: rgba(34, 197, 94, 0.12) !important;
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
}

[data-bs-theme="dark"] .btn-outline-success:hover {
    color: #ffffff !important;
    background-color: #22c55e !important;
    border-color: #22c55e !important;
}

/* Dark Mode Badges, Tags, Cards & Utility Overrides (Bug 7, 18, 21) */
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .card-header.bg-white,
[data-bs-theme="dark"] .card-footer.bg-white {
    background-color: var(--bq-card-bg) !important;
    color: #f1f5f9 !important;
    border-color: #2c313a !important;
}

[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light th,
[data-bs-theme="dark"] .table-light td {
    background-color: #1e2430 !important;
    color: #f1f5f9 !important;
    border-color: #2c313a !important;
}

[data-bs-theme="dark"] .bq-country-prefix {
    background: #1a1f29 !important;
    border-color: #2c313a !important;
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .customer-tab-badge {
    background-color: #2d3748 !important;
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .badge-pill-soft {
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

[data-bs-theme="dark"] .badge-soft-individual { background: rgba(59, 130, 246, 0.2) !important; color: #93c5fd !important; }
[data-bs-theme="dark"] .badge-soft-corporate  { background: rgba(168, 85, 247, 0.2) !important; color: #d8b4fe !important; }
[data-bs-theme="dark"] .badge-soft-agent      { background: rgba(148, 163, 184, 0.2) !important; color: #cbd5e1 !important; }
[data-bs-theme="dark"] .badge-soft-vip        { background: rgba(234, 179, 8, 0.2) !important; color: #fde047 !important; }
[data-bs-theme="dark"] .badge-soft-wedding    { background: rgba(239, 68, 68, 0.2) !important; color: #fca5a5 !important; }
[data-bs-theme="dark"] .badge-soft-premium    { background: rgba(34, 197, 94, 0.2) !important; color: #86efac !important; }
[data-bs-theme="dark"] .badge-soft-repeat     { background: rgba(20, 184, 166, 0.2) !important; color: #5eead4 !important; }

[data-bs-theme="dark"] .badge.bg-white,
[data-bs-theme="dark"] .badge.text-bg-light {
    background-color: #28303f !important;
    color: #f1f5f9 !important;
    border-color: #3b4556 !important;
}

[data-bs-theme="dark"] .bg-body-tertiary {
    background-color: #1a1f29 !important;
    border-color: #2c313a !important;
}

/* ==========================================================================
   Global Enhancements: Spinner Removal, Form Focus, & Mobile Responsiveness
   ========================================================================== */

/* Bug 112: Remove spinner buttons on numeric / amount inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
input[type="number"] {
    -moz-appearance: textfield !important;
}

/* Bug 74: Sane form control focus state (wine brand color rather than red) */
.form-control:focus,
.form-select:focus,
.bq-input-wrapper:focus-within {
    border-color: rgba(139, 30, 63, 0.5) !important;
    box-shadow: 0 0 0 0.2rem rgba(139, 30, 63, 0.15) !important;
    outline: 0;
}

/* Only apply red outline when genuinely invalid */
.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.bq-input-wrapper.is-invalid:focus-within {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.25) !important;
}

/* R3: Mobile & Responsive layout protections */
@media (max-width: 991.98px) {
    .bq-card {
        overflow-x: auto;
    }
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
    .bq-page-head {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}

/* Pagination Styling & Alignment */
.bq-card__footer nav,
.bq-card__footer nav p,
.bq-pagination-wrapper p,
.pagination {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   Vibrant Lead Stage & Status Badge Palettes (Bug 13)
   ========================================================================== */
.bg-purple  { background-color: #7c3aed !important; color: #ffffff !important; }
.bg-indigo  { background-color: #4f46e5 !important; color: #ffffff !important; }
.bg-teal    { background-color: #0d9488 !important; color: #ffffff !important; }
.bg-cyan    { background-color: #0891b2 !important; color: #ffffff !important; }
.bg-amber   { background-color: #d97706 !important; color: #ffffff !important; }
.bg-orange  { background-color: #ea580c !important; color: #ffffff !important; }
.bg-rose    { background-color: #e11d48 !important; color: #ffffff !important; }
.bg-pink    { background-color: #db2777 !important; color: #ffffff !important; }
.bg-emerald { background-color: #059669 !important; color: #ffffff !important; }
.bg-slate   { background-color: #64748b !important; color: #ffffff !important; }








/* ==========================================================================
   Dark theme completeness - KPI cards, progress tracks, brand text, wrapping
   ========================================================================== */
[data-bs-theme="dark"] .bq-kpi-card {
    background: var(--bq-card-bg);
    border-top-color: var(--bq-border);
    border-right-color: var(--bq-border);
    border-bottom-color: var(--bq-border);
    box-shadow: var(--bq-shadow);
}
[data-bs-theme="dark"] .bq-kpi-label { color: #9aa1ad; }
[data-bs-theme="dark"] .bq-kpi-value { color: #f1f5f9; }
[data-bs-theme="dark"] .bq-kpi-sub   { color: #7d8593; }
[data-bs-theme="dark"] .bq-kpi-icon--wine { background: rgba(255, 122, 156, .16); color: #ff8fab; }
[data-bs-theme="dark"] .bq-kpi-icon--blue { background: rgba(99, 179, 237, .16);  color: #63b3ed; }
[data-bs-theme="dark"] .bq-kpi-icon--gold { background: rgba(236, 201, 75, .16);  color: #ecc94b; }
[data-bs-theme="dark"] .bq-kpi-icon--red  { background: rgba(252, 129, 129, .16); color: #fc8181; }

[data-bs-theme="dark"] .progress {
    --bs-progress-bg: #2c313a;
    background-color: #2c313a;
}

[data-bs-theme="dark"] .text-primary,
[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .bg-primary-subtle.text-primary {
    color: #ff8fab !important;
}
[data-bs-theme="dark"] .btn-outline-primary {
    border-color: #ff8fab !important;
    background-color: transparent;
}
[data-bs-theme="dark"] .btn-outline-primary:hover {
    background-color: rgba(255, 143, 171, .15) !important;
}
[data-bs-theme="dark"] .text-dark:not(.badge):not(.bg-warning):not(.bg-info):not(.bg-light):not(.btn) {
    color: #e5e7eb !important;
}

/* Long values (addresses, notes, emails) must wrap inside their card. */
dd, .bq-card__body dd, .bq-card__body .text-break {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .text-bg-light {
    background-color: var(--bq-card-bg) !important;
    color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] .badge.bg-white,
[data-bs-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .badge.text-bg-light {
    background-color: #2c313a !important;
    color: #e5e7eb !important;
}
[data-bs-theme="dark"] .card-header.bg-white { border-bottom: 1px solid var(--bq-border) !important; }

/* ==========================================================================
   Compact Table Per-Page Selector & Native Dropup Options
   ========================================================================== */
select.no-select2,
select.form-select-sm.no-select2 {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0.2rem 1.8rem 0.2rem 0.5rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    border-radius: var(--bq-radius-sm) !important;
    cursor: pointer !important;
    line-height: 1.2 !important;
}

/* Ensure table footer dropdowns position neatly upwards when near bottom */
.bq-card__footer .dropdown-menu {
    margin-bottom: 0.35rem !important;
}

/* TomSelect Dropdown Font Sizing & Padding Adjustments */
.ts-wrapper .ts-control {
    min-height: 34px !important;
    font-size: 0.85rem !important;
}
.ts-dropdown {
    font-size: 0.85rem !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    border-radius: 6px !important;
}
.ts-dropdown .option {
    padding: 6px 12px !important;
    font-size: 0.85rem !important;
}

/* ==========================================================================
   Clean Professional Print Stylesheet (BUG 04)
   ========================================================================== */
@media print {
    /* Hide layout chrome, navigation, headers, footers and action controls */
    .bq-sidebar,
    .bq-topbar,
    .bq-backdrop,
    .no-print,
    .btn,
    .btn-group,
    .dropdown,
    .dropdown-menu,
    .pagination,
    .bq-filter-card,
    .bq-filter-bar,
    .filter-card,
    #filterCard,
    .bq-page-head .btn,
    .bq-page-head .btn-group,
    .bq-page-head a.btn,
    .card-footer,
    .modal,
    .alert:not(.print-alert),
    form.bq-search-form,
    form.filter-form,
    .dataTables_filter,
    .dataTables_length,
    .dataTables_paginate,
    .dataTables_info,
    [data-bq-toggle-sidebar],
    [data-bq-toggle-theme],
    .swal2-container,
    .flatpickr-calendar,
    .nav-tabs,
    .nav-report-tabs {
        display: none !important;
    }

    /* Set clean page layout */
    *,
    *::before,
    *::after {
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    html, body, .bq-shell, .bq-main, .bq-content {
        background: #ffffff !important;
        color: #000000 !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: 12pt !important;
    }

    .bq-card, .card {
        border: 1px solid #dee2e6 !important;
        box-shadow: none !important;
        margin-bottom: 1rem !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .bq-card__head, .card-header {
        background: #f8fafc !important;
        border-bottom: 1px solid #dee2e6 !important;
        color: #000000 !important;
    }

    .bq-card__body, .card-body {
        padding: 0.75rem !important;
    }

    .bq-page-head {
        margin-bottom: 1rem !important;
        padding-bottom: 0.5rem !important;
        border-bottom: 2px solid #8b1e3f !important;
    }

    .bq-page-head h1 {
        font-size: 1.5rem !important;
        color: #000000 !important;
    }

    .bq-page-sub {
        font-size: 0.85rem !important;
        color: #555555 !important;
    }

    table {
        width: 100% !important;
        border-collapse: collapse !important;
        page-break-inside: auto;
    }

    table th, table td {
        padding: 6px 8px !important;
        border: 1px solid #dee2e6 !important;
        font-size: 0.85rem !important;
        color: #000000 !important;
    }

    table th {
        background: #f1f5f9 !important;
        font-weight: 700 !important;
    }

    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    thead {
        display: table-header-group;
    }

    tfoot {
        display: table-footer-group;
    }

    /* Keep KPI summary values clear and readable */
    .bq-kpi-card {
        border: 1px solid #cbd5e1 !important;
        padding: 0.5rem 0.75rem !important;
        box-shadow: none !important;
    }

    .bq-kpi-value {
        font-size: 1.25rem !important;
        color: #000000 !important;
    }

    .badge {
        border: 1px solid #cbd5e1 !important;
        color: #000000 !important;
        background: #f8fafc !important;
    }
}