/* ── BRAYH tokens — dark defaults ─────────────────────────────────────────── */
: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);

    /* Surfaces */
    --br-bg:            #0A0A0A;
    --br-surface:       #131313;
    --br-surface-hover: #161616;
    --br-surface-deep:  #111111;
    --br-input:         #1A1A1A;

    /* Borders */
    --br-border:        #2A2A2A;
    --br-border-subtle: #1E1E1E;
    --br-border-hover:  #3A3A3A;

    /* Text */
    --br-text:          #F5F5F5;
    --br-text-muted:    #A0A0A0;
    --br-text-dim:      #5A5A5A;
    --br-text-subtle:   #4A4A4A;

    /* Overlays / shadows */
    --br-overlay-hover: rgba(255, 255, 255, .05);
    --br-shadow:        0 8px 28px rgba(0, 0, 0, .65);
    --br-shadow-up:     0 -4px 20px rgba(0, 0, 0, .5);
}

/* ── Bootstrap dark theme overrides — BRAYH palette ──────────────────────── */
[data-bs-theme="dark"] {
    --bs-body-bg:                   var(--br-bg);
    --bs-body-bg-rgb:               10, 10, 10;
    --bs-body-color:                var(--br-text);
    --bs-body-color-rgb:            245, 245, 245;
    --bs-secondary-color:           var(--br-text-muted);
    --bs-secondary-bg:              var(--br-surface);
    --bs-secondary-bg-rgb:          19, 19, 19;
    --bs-tertiary-bg:               var(--br-input);
    --bs-tertiary-bg-rgb:           26, 26, 26;
    --bs-border-color:              var(--br-border);
    --bs-border-color-translucent:  rgba(255, 255, 255, .06);
    --bs-emphasis-color:            var(--br-text);
    --bs-link-color:                var(--br-accent);
    --bs-link-hover-color:          var(--br-accent-hover);

    --bs-card-bg:                   var(--br-surface);
    --bs-card-border-color:         var(--br-border);
    --bs-card-cap-bg:               rgba(255, 255, 255, .03);

    --bs-input-bg:                  var(--br-input);
    --bs-input-border-color:        var(--br-border);
    --bs-input-color:               var(--br-text);
    --bs-input-focus-border-color:  var(--br-accent);
    --bs-input-placeholder-color:   var(--br-text-dim);

    --bs-navbar-color:              var(--br-text-muted);
    --bs-navbar-hover-color:        var(--br-text);
    --bs-navbar-active-color:       var(--br-text);
    --bs-navbar-brand-color:        var(--br-accent);
    --bs-navbar-brand-hover-color:  var(--br-accent-hover);
    --bs-navbar-disabled-color:     var(--br-text-dim);
    --bs-navbar-toggler-border-color: var(--br-border);

    --bs-list-group-bg:             var(--br-surface);
    --bs-list-group-border-color:   var(--br-border);
    --bs-list-group-action-hover-bg: var(--br-input);
    --bs-list-group-action-active-bg: var(--br-input);

    --bs-dropdown-bg:               var(--br-surface);
    --bs-dropdown-border-color:     var(--br-border);
    --bs-dropdown-link-hover-bg:    var(--br-input);

    --bs-modal-bg:                  var(--br-surface);
    --bs-modal-border-color:        var(--br-border);

    --bs-table-bg:                  var(--br-surface);
    --bs-table-border-color:        var(--br-border);
    --bs-table-hover-bg:            rgba(255, 255, 255, .03);
    --bs-table-striped-bg:          rgba(255, 255, 255, .02);
}

/* ── Bootstrap light theme overrides — BRAYH warm palette ────────────────── */
[data-bs-theme="light"] {
    /* Override BRAYH tokens */
    --br-accent:        #7A5C28;
    --br-accent-rgb:    122, 92, 40;
    --br-accent-dim:    rgba(122, 92, 40, .12);
    --br-accent-hover:  #8a6c38;

    --br-bg:            #FAFAF8;
    --br-surface:       #F4F0E8;
    --br-surface-hover: #EDE8DF;
    --br-surface-deep:  #EAE5DA;
    --br-input:         #EAE5DA;

    --br-border:        #DDD8D0;
    --br-border-subtle: #E5E0D7;
    --br-border-hover:  #C8C3BB;

    --br-text:          #1A1714;
    --br-text-muted:    #5E5850;
    --br-text-dim:      #978F87;
    --br-text-subtle:   #B0A89F;

    --br-overlay-hover: rgba(0, 0, 0, .04);
    --br-shadow:        0 8px 28px rgba(0, 0, 0, .1);
    --br-shadow-up:     0 -4px 20px rgba(0, 0, 0, .08);

    /* Override Bootstrap */
    --bs-body-bg:                   #FAFAF8;
    --bs-body-bg-rgb:               250, 250, 248;
    --bs-body-color:                #1A1714;
    --bs-body-color-rgb:            26, 23, 20;
    --bs-secondary-color:           #5E5850;
    --bs-secondary-bg:              #F4F0E8;
    --bs-secondary-bg-rgb:          244, 240, 232;
    --bs-tertiary-bg:               #EAE5DA;
    --bs-tertiary-bg-rgb:           234, 229, 218;
    --bs-border-color:              #DDD8D0;
    --bs-border-color-translucent:  rgba(0, 0, 0, .08);
    --bs-emphasis-color:            #1A1714;
    --bs-link-color:                #7A5C28;
    --bs-link-hover-color:          #8a6c38;

    --bs-card-bg:                   #F4F0E8;
    --bs-card-border-color:         #DDD8D0;
    --bs-card-cap-bg:               rgba(0, 0, 0, .02);

    --bs-input-bg:                  #EAE5DA;
    --bs-input-border-color:        #DDD8D0;
    --bs-input-color:               #1A1714;
    --bs-input-focus-border-color:  #7A5C28;
    --bs-input-placeholder-color:   #978F87;

    --bs-navbar-color:              #5E5850;
    --bs-navbar-hover-color:        #1A1714;
    --bs-navbar-active-color:       #1A1714;
    --bs-navbar-brand-color:        #7A5C28;
    --bs-navbar-brand-hover-color:  #8a6c38;
    --bs-navbar-disabled-color:     #978F87;
    --bs-navbar-toggler-border-color: #DDD8D0;

    --bs-list-group-bg:             #F4F0E8;
    --bs-list-group-border-color:   #DDD8D0;
    --bs-list-group-action-hover-bg: #EAE5DA;
    --bs-list-group-action-active-bg: #EAE5DA;

    --bs-dropdown-bg:               #F4F0E8;
    --bs-dropdown-border-color:     #DDD8D0;
    --bs-dropdown-link-hover-bg:    #EAE5DA;

    --bs-modal-bg:                  #F4F0E8;
    --bs-modal-border-color:        #DDD8D0;

    --bs-table-bg:                  #F4F0E8;
    --bs-table-border-color:        #DDD8D0;
    --bs-table-hover-bg:            rgba(0, 0, 0, .03);
    --bs-table-striped-bg:          rgba(0, 0, 0, .02);
}

/* ── Form controls ────────────────────────────────────────────────────────── */
.form-control,
.form-select {
    background-color: var(--br-input);
    border-color:     var(--br-border);
    color:            var(--br-text);
    border-radius:    .5rem;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--br-input);
    border-color:     var(--br-accent);
    color:            var(--br-text);
    box-shadow:       0 0 0 .2rem var(--br-accent-dim);
}

.form-control::placeholder { color: var(--br-text-dim); }

.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:          var(--br-text-muted);
    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 var(--br-border);
    color:            var(--br-text-muted);
    font-weight:      500;
    border-radius:    .5rem;
}

.btn-br-ghost:hover {
    background-color: var(--br-input);
    color:            var(--br-text);
    border-color:     var(--br-border-hover);
}

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

.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:          var(--br-text-muted);
    font-size:      .9rem;
    font-weight:    500;
    border-radius:  .375rem;
    padding:        .4rem .7rem;
}

.br-navbar .nav-link:hover,
.br-navbar .nav-link.active {
    color:            var(--br-text);
    background-color: var(--br-overlay-hover);
}

.br-navbar .navbar-toggler {
    border-color: var(--br-border);
}

.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; }

/* ── Theme toggle button ──────────────────────────────────────────────────── */
.br-theme-toggle {
    background:  none;
    border:      none;
    padding:     4px 6px;
    cursor:      pointer;
    color:       var(--br-text-muted);
    line-height: 1;
    border-radius: .375rem;
    transition:  color .15s ease;
    display:     inline-flex;
    align-items: center;
}

.br-theme-toggle:hover { color: var(--br-accent); }
.br-theme-toggle .br-icon-sun  { display: none; }
.br-theme-toggle .br-icon-moon { display: block; }

[data-bs-theme="light"] .br-theme-toggle .br-icon-sun  { display: block; }
[data-bs-theme="light"] .br-theme-toggle .br-icon-moon { display: none; }

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

.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:     var(--br-text-muted);
    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:     var(--br-text-muted);
    font-size: 1.05rem;
    max-width: 480px;
    margin:    0 auto;
}

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

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

.br-feature-title {
    font-size:   1rem;
    font-weight: 700;
    color:       var(--br-text);
}

.br-feature-desc {
    font-size: .875rem;
    color:     var(--br-text-muted);
}

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

/* ── Utility text classes ─────────────────────────────────────────────────── */
.text-br-accent    { color: var(--br-accent) !important; }
.text-br-dim       { color: var(--br-text-dim) !important; }
.text-br-muted     { color: var(--br-text-muted) !important; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.br-footer {
    background-color: var(--br-surface);
    border-top:       1px solid var(--br-border);
    padding:          1.5rem 0;
    font-size:        .78rem;
    letter-spacing:   .04em;
    color:            var(--br-text-dim);
}

.br-footer-link {
    color:           var(--br-text-dim);
    text-decoration: none;
    transition:      color .15s;
}

.br-footer-link:hover { color: var(--br-accent); }

.br-appstore-badge         { display: block; line-height: 0; }
.br-appstore-badge-dark    { display: none; }
.br-appstore-badge-light   { display: block; }
[data-bs-theme="dark"] .br-appstore-badge-light { display: none; }
[data-bs-theme="dark"] .br-appstore-badge-dark  { display: block; }

/* ── 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(var(--br-accent-rgb), .3);
    color:            var(--br-accent);
}

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

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

[data-bs-theme="light"] .btn-close-br {
    filter:  none;
    opacity: .5;
}

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

.ts-control {
    background-color: var(--br-input) !important;
    border-color:     var(--br-border) !important;
    border-radius:    .5rem !important;
    color:            var(--br-text) !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 var(--br-accent-dim) !important;
}

.ts-control input { color: var(--br-text) !important; }
.ts-control input::placeholder { color: var(--br-text-dim) !important; }

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

.ts-dropdown {
    background-color: var(--br-input) !important;
    border-color:     var(--br-border) !important;
    border-radius:    .5rem !important;
    box-shadow:       var(--br-shadow) !important;
    margin-top:       4px !important;
}

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

.ts-dropdown .option {
    color:   var(--br-text-muted);
    padding: .5rem .75rem;
    cursor:  pointer;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background-color: var(--br-overlay-hover);
    color:            var(--br-text);
}

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

.ts-dropdown .ts-no-results {
    color:   var(--br-text-dim);
    padding: .5rem .75rem;
}

.ts-dropdown .ts-dropdown-search-inner input {
    background-color: var(--br-input);
    border-color:     var(--br-border);
    color:            var(--br-text);
    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:       var(--br-text-muted);
    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 var(--br-bg);
}

/* ── Notification page ────────────────────────────────────────────────────── */
.br-ntf-row {
    display:       flex;
    align-items:   flex-start;
    gap:           .875rem;
    background:    var(--br-surface);
    border:        1px solid var(--br-border);
    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:       var(--br-text);
    margin:      0;
}

.br-ntf-body {
    font-size: .875rem;
    color:     var(--br-text-muted);
    margin:    0;
}

.br-ntf-date {
    font-size: .75rem;
    color:     var(--br-text-dim);
    margin:    0;
}

.br-ntf-empty {
    background:    var(--br-surface);
    border:        1px solid var(--br-border);
    border-radius: .75rem;
    padding:       3rem 1.5rem;
    text-align:    center;
}

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