/* ── Bootstrap dark theme overrides — BRAYH palette ──────────────────────── */
[data-bs-theme="dark"] {
    --bs-body-bg:                   #0A0A0A;
    --bs-body-bg-rgb:               10, 10, 10;
    --bs-body-color:                #F5F5F5;
    --bs-body-color-rgb:            245, 245, 245;
    --bs-secondary-color:           #A0A0A0;
    --bs-secondary-bg:              #131313;
    --bs-secondary-bg-rgb:          19, 19, 19;
    --bs-tertiary-bg:               #1A1A1A;
    --bs-tertiary-bg-rgb:           26, 26, 26;
    --bs-border-color:              #2A2A2A;
    --bs-border-color-translucent:  rgba(255, 255, 255, .06);
    --bs-emphasis-color:            #F5F5F5;
    --bs-link-color:                #C9A84C;
    --bs-link-hover-color:          #d4b96a;

    /* Cards */
    --bs-card-bg:                   #131313;
    --bs-card-border-color:         #2A2A2A;
    --bs-card-cap-bg:               rgba(255, 255, 255, .03);

    /* Inputs */
    --bs-input-bg:                  #1A1A1A;
    --bs-input-border-color:        #2A2A2A;
    --bs-input-color:               #F5F5F5;
    --bs-input-focus-border-color:  #C9A84C;
    --bs-input-placeholder-color:   #5A5A5A;

    /* Navbar */
    --bs-navbar-color:              #A0A0A0;
    --bs-navbar-hover-color:        #F5F5F5;
    --bs-navbar-active-color:       #F5F5F5;
    --bs-navbar-brand-color:        #C9A84C;
    --bs-navbar-brand-hover-color:  #d4b96a;
    --bs-navbar-disabled-color:     #5A5A5A;
    --bs-navbar-toggler-border-color: #2A2A2A;

    /* List group */
    --bs-list-group-bg:             #131313;
    --bs-list-group-border-color:   #2A2A2A;
    --bs-list-group-action-hover-bg: #1A1A1A;
    --bs-list-group-action-active-bg: #1A1A1A;

    /* Dropdowns */
    --bs-dropdown-bg:               #131313;
    --bs-dropdown-border-color:     #2A2A2A;
    --bs-dropdown-link-hover-bg:    #1A1A1A;

    /* Modals */
    --bs-modal-bg:                  #131313;
    --bs-modal-border-color:        #2A2A2A;

    /* Table */
    --bs-table-bg:                  #131313;
    --bs-table-border-color:        #2A2A2A;
    --bs-table-hover-bg:            rgba(255, 255, 255, .03);
    --bs-table-striped-bg:          rgba(255, 255, 255, .02);
}

/* ── BRAYH accent tokens ──────────────────────────────────────────────────── */
:root {
    --br-accent:       #C9A84C;
    --br-accent-rgb:   201, 168, 76;
    --br-accent-dim:   rgba(201, 168, 76, .12);
    --br-accent-hover: #d4b96a;
    --br-cleared:      #4CAF82;
    --br-cleared-dim:  rgba(76, 175, 130, .12);
    --br-error:        #E05B5B;
    --br-error-dim:    rgba(224, 91, 91, .12);
    --br-surface:      #131313;
    --br-input:        #1A1A1A;
}

/* ── Form controls (dark style) ───────────────────────────────────────────── */
.form-control,
.form-select {
    background-color: var(--br-input);
    border-color:     #2A2A2A;
    color:            #F5F5F5;
    border-radius:    .5rem;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--br-input);
    border-color:     var(--br-accent);
    color:            #F5F5F5;
    box-shadow:       0 0 0 .2rem rgba(201, 168, 76, .2);
}

.form-control::placeholder { color: #5A5A5A; }

.form-control.is-invalid,
.form-select.is-invalid    { border-color: var(--br-error); }
.invalid-feedback          { color: var(--br-error); font-size: .8rem; }

.form-label {
    font-size:      .75rem;
    font-weight:    600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color:          #A0A0A0;
    margin-bottom:  .35rem;
}

/* ── Gold primary button ──────────────────────────────────────────────────── */
.btn-br-primary {
    background-color: var(--br-accent);
    border-color:     var(--br-accent);
    color:            #000;
    font-weight:      700;
    border-radius:    .5rem;
}

.btn-br-primary:hover,
.btn-br-primary:focus {
    background-color: var(--br-accent-hover);
    border-color:     var(--br-accent-hover);
    color:            #000;
}

.btn-br-primary:disabled {
    background-color: var(--br-accent);
    border-color:     var(--br-accent);
    opacity:          .5;
}

/* ── Gold outline button ──────────────────────────────────────────────────── */
.btn-br-outline {
    background-color: transparent;
    border:           1px solid var(--br-accent);
    color:            var(--br-accent);
    font-weight:      600;
    border-radius:    .5rem;
}

.btn-br-outline:hover,
.btn-br-outline:focus {
    background-color: var(--br-accent-dim);
    color:            var(--br-accent);
    border-color:     var(--br-accent);
}

/* ── Ghost button ─────────────────────────────────────────────────────────── */
.btn-br-ghost {
    background-color: transparent;
    border:           1px solid #2A2A2A;
    color:            #A0A0A0;
    font-weight:      500;
    border-radius:    .5rem;
}

.btn-br-ghost:hover {
    background-color: #1A1A1A;
    color:            #F5F5F5;
    border-color:     #3A3A3A;
}

/* ── Navbar ───────────────────────────────────────────────────────────────── */
.br-navbar {
    background-color: var(--br-surface);
    border-bottom:    1px solid #2A2A2A;
}

.br-navbar .navbar-brand {
    font-size:      1.4rem;
    font-weight:    800;
    letter-spacing: -.02em;
    color:          var(--br-accent);
}

.br-navbar .navbar-brand:hover { color: var(--br-accent-hover); }

.br-navbar .nav-link {
    color:          #A0A0A0;
    font-size:      .9rem;
    font-weight:    500;
    border-radius:  .375rem;
    padding:        .4rem .7rem;
}

.br-navbar .nav-link:hover,
.br-navbar .nav-link.active {
    color:           #F5F5F5;
    background-color: rgba(255, 255, 255, .05);
}

.br-navbar .navbar-toggler {
    border-color: #2A2A2A;
}

.br-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28160,160,160,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.br-navbar .navbar-collapse { border-top: 0; }

/* ── Auth layout ──────────────────────────────────────────────────────────── */
.br-auth-wrap {
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         1.5rem;
    background-color: #0A0A0A;
}

.br-auth-card {
    width:     100%;
    max-width: 420px;
    border-radius: 1.25rem;
}

.br-auth-logo {
    font-size:      1.8rem;
    font-weight:    800;
    letter-spacing: -.02em;
    color:          var(--br-accent);
}

.br-auth-tagline {
    color:     #A0A0A0;
    font-size: .9rem;
}

/* ── Hero section ─────────────────────────────────────────────────────────── */
.br-hero {
    padding:         6rem 0 4rem;
    text-align:      center;
}

.br-hero-eyebrow {
    font-size:      .78rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--br-accent);
}

.br-hero-title {
    font-size:   clamp(2rem, 6vw, 3.25rem);
    font-weight: 800;
    line-height: 1.15;
}

.br-hero-title span { color: var(--br-accent); }

.br-hero-sub {
    color:     #A0A0A0;
    font-size: 1.05rem;
    max-width: 480px;
    margin:    0 auto;
}

/* ── Feature strip ────────────────────────────────────────────────────────── */
.br-features {
    background-color: var(--br-surface);
    border-top:       1px solid #2A2A2A;
    border-bottom:    1px solid #2A2A2A;
    padding:          3rem 0;
}

.br-feature-icon {
    font-size:        2rem;
    margin-bottom:    .75rem;
    display:          block;
}

.br-feature-title {
    font-size:   1rem;
    font-weight: 700;
    color:       #F5F5F5;
}

.br-feature-desc {
    font-size: .875rem;
    color:     #A0A0A0;
}

/* ── Section label (accent) ───────────────────────────────────────────────── */
.br-label-accent {
    font-size:      .75rem;
    font-weight:    700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color:          var(--br-accent);
}

/* ── Accent text ──────────────────────────────────────────────────────────── */
.text-br-accent { color: var(--br-accent) !important; }
.text-br-dim    { color: #5A5A5A !important; }
.text-br-muted  { color: #A0A0A0 !important; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.br-footer {
    background-color: var(--br-surface);
    border-top:       1px solid #2A2A2A;
    padding:          1.5rem 0;
    font-size:        .78rem;
    letter-spacing:   .04em;
    color:            #5A5A5A;
}
.br-footer-link {
    color:           #5A5A5A;
    text-decoration: none;
    transition:      color .15s;
}
.br-footer-link:hover {
    color: var(--br-accent);
}

/* ── Flash alert overrides ────────────────────────────────────────────────── */
.alert-br-success {
    background-color: var(--br-cleared-dim);
    border-color:     rgba(76, 175, 130, .3);
    color:            var(--br-cleared);
}

.alert-br-error {
    background-color: var(--br-error-dim);
    border-color:     rgba(224, 91, 91, .3);
    color:            var(--br-error);
}

.alert-br-info {
    background-color: var(--br-accent-dim);
    border-color:     rgba(201, 168, 76, .3);
    color:            var(--br-accent);
}

.btn-close-br {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: .5;
}

.btn-close-br:hover { opacity: 1; }

/* ── Tom Select — BRAYH dark theme ───────────────────────────────────────── */
.ts-wrapper.form-control,
.ts-wrapper.form-select { padding: 0; }

.ts-control {
    background-color: var(--br-input) !important;
    border-color:     #2A2A2A !important;
    border-radius:    .5rem !important;
    color:            #F5F5F5 !important;
    min-height:       calc(1.5em + .75rem + 2px);
    padding:          .375rem .75rem !important;
    box-shadow:       none !important;
}

.ts-wrapper.focus .ts-control {
    border-color: var(--br-accent) !important;
    box-shadow:   0 0 0 .2rem rgba(201, 168, 76, .2) !important;
}

.ts-control input { color: #F5F5F5 !important; }
.ts-control input::placeholder { color: #5A5A5A !important; }

.ts-control .item {
    color:            #F5F5F5;
    background-color: var(--br-accent-dim);
    border-radius:    .25rem;
    padding:          0 6px;
    font-size:        .95rem;
}

.ts-dropdown {
    background-color: #1A1A1A !important;
    border-color:     #2A2A2A !important;
    border-radius:    .5rem !important;
    box-shadow:       0 8px 24px rgba(0,0,0,.6) !important;
    margin-top:       4px !important;
}

.ts-dropdown .ts-dropdown-content { max-height: 240px; }

.ts-dropdown .option {
    color:   #A0A0A0;
    padding: .5rem .75rem;
    cursor:  pointer;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active  {
    background-color: rgba(255,255,255,.06);
    color:            #F5F5F5;
}

.ts-dropdown .option.selected {
    background-color: var(--br-accent-dim);
    color:            var(--br-accent);
}

.ts-dropdown .ts-no-results {
    color:   #5A5A5A;
    padding: .5rem .75rem;
}

/* Search input inside Tom Select dropdown */
.ts-dropdown .ts-dropdown-search-inner input {
    background-color: var(--br-input);
    border-color:     #2A2A2A;
    color:            #F5F5F5;
    border-radius:    .375rem;
}

.ts-dropdown .ts-dropdown-search-inner input:focus {
    border-color: var(--br-accent);
    box-shadow:   none;
    outline:      none;
}

/* ── Notification bell ────────────────────────────────────────────────────── */
.br-ntf-bell {
    position:   relative;
    display:    inline-flex;
    align-items: center;
    color:      #A0A0A0;
    padding:    4px;
    transition: color .15s ease;
    text-decoration: none;
}

.br-ntf-bell:hover,
.br-ntf-bell.active {
    color: var(--br-accent);
}

.br-ntf-dot {
    position:      absolute;
    top:           2px;
    right:         2px;
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--br-accent);
    border:        2px solid #0A0A0A;
}

/* ── Notification page ────────────────────────────────────────────────────── */
.br-ntf-row {
    display:       flex;
    align-items:   flex-start;
    gap:           .875rem;
    background:    #131313;
    border:        1px solid #2A2A2A;
    border-radius: .75rem;
    padding:       1rem 1.25rem;
}

.br-ntf-icon-wrap {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    background:      var(--br-accent-dim);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1rem;
    flex-shrink:     0;
}

.br-ntf-title {
    font-size:   .9375rem;
    font-weight: 600;
    color:       #F5F5F5;
    margin:      0;
}

.br-ntf-body {
    font-size: .875rem;
    color:     #A0A0A0;
    margin:    0;
}

.br-ntf-date {
    font-size: .75rem;
    color:     #5A5A5A;
    margin:    0;
}

.br-ntf-empty {
    background:    #131313;
    border:        1px solid #2A2A2A;
    border-radius: .75rem;
    padding:       3rem 1.5rem;
    text-align:    center;
}

.br-ntf-empty-icon {
    font-size:    2rem;
    margin-bottom: .75rem;
}