/* ============================================================
   BSX ACCOUNT CARD
   User profile card, timezone panel, notification modal.
   Requires: bsx-design.css, bsx-base.css
   ============================================================ */

/* ── Profile card ───────────────────────────────────────────── */

.bsx-card {
    background:    #1a1820;
    border:        1px solid #2e2c35;
    border-radius: 10px;
    padding:       20px 24px;
    max-width:     480px;
    color:         #baaea0;
    font-size:     13px;
}

.bsx-card-header {
    display:       flex;
    align-items:   center;
    gap:           14px;
    margin-bottom: 16px;
}

.bsx-avatar {
    width:         48px;
    height:        48px;
    border-radius: 50%;
    object-fit:    cover;
    border:        1px solid #2e2c35;
}

.bsx-card-name {
    font-size:   15px;
    font-weight: 600;
    color:       #e0d8d0;
    line-height: 1.3;
}

.bsx-card-email {
    font-size:  12px;
    color:      #706868;
    margin-top: 2px;
}

.bsx-card-divider {
    border:     none;
    border-top: 1px solid #2e2c35;
    margin:     12px 0;
}

.bsx-card-section-label {
    font-size:      10px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color:          #505050;
    margin-bottom:  8px;
}

.bsx-card-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         5px 0;
    gap:             12px;
}

.bsx-card-row-label { color: #706868; flex-shrink: 0; }

.bsx-card-row-value {
    display:         flex;
    align-items:     center;
    gap:             8px;
    text-align:      right;
    flex-wrap:       wrap;
    justify-content: flex-end;
}

.bsx-card-meta { color: #505050; font-size: 11px; }

/* ── Badges ─────────────────────────────────────────────────── */

.bsx-badge {
    font-size:     10px;
    padding:       2px 8px;
    border-radius: var(--bsx-radius-sm);
    font-weight:   600;
}

.bsx-badge-green { background: #0d2e18; color: var(--bsx-positive-lt); }
.bsx-badge-grey  { background: #1e1e1e; color: #606060; }

/* ── Timezone edit button ───────────────────────────────────── */

.bsx-tz-edit-btn {
    background:     transparent;
    border:         1px solid #383540;
    border-radius:  var(--bsx-radius-sm);
    color:          #706868;
    font-size:      10px;
    padding:        2px 7px;
    cursor:         pointer;
    transition:     border-color var(--bsx-transition), color var(--bsx-transition);
}

.bsx-tz-edit-btn:hover { border-color: #666; color: #c0b8b0; }

/* ── Timezone panel ─────────────────────────────────────────── */

.bsx-tz-panel {
    margin-top:    10px;
    border:        1px solid #2e2c35;
    border-radius: var(--bsx-radius-lg);
    overflow:      hidden;
    background:    #141318;
}

.bsx-tz-search {
    display:       block;
    width:         100%;
    box-sizing:    border-box;
    background:    transparent;
    border:        none;
    border-bottom: 1px solid #2e2c35;
    color:         #c0b8b0;
    font-size:     12px;
    padding:       8px 12px;
    outline:       none;
}

.bsx-tz-search::placeholder { color: #404040; }

.bsx-tz-list {
    max-height:      180px;
    overflow-y:      auto;
    scrollbar-width: thin;
    scrollbar-color: #2e2c35 transparent;
}

.bsx-tz-opt {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         6px 12px;
    cursor:          pointer;
    font-size:       11px;
    color:           #a09898;
}

.bsx-tz-opt:hover         { background: rgba(255,255,255,0.04); color: #c0b8b0; }
.bsx-tz-opt.active        { color: #fff; background: rgba(255,255,255,0.06); }
.bsx-tz-opt.active::after { content: "✓"; font-size: 10px; color: var(--bsx-green); margin-left: 6px; }
.bsx-tz-opt-offset        { font-size: 10px; color: #404040; }

.bsx-tz-panel-footer {
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    gap:             8px;
    padding:         8px 12px;
    border-top:      1px solid #2e2c35;
}

.bsx-tz-saved-msg { font-size: 11px; color: var(--bsx-green); margin-right: auto; }

/* ── Shared small buttons ───────────────────────────────────── */

.bsx-btn-save {
    background:    var(--bsx-green);
    color:         #fff;
    border:        none;
    border-radius: var(--bsx-radius-sm);
    padding:       4px 14px;
    font-size:     11px;
    cursor:        pointer;
    transition:    background var(--bsx-transition);
}

.bsx-btn-save:hover { background: #1e7a38; }

.bsx-btn-cancel {
    background:    transparent;
    color:         #706868;
    border:        1px solid #2e2c35;
    border-radius: var(--bsx-radius-sm);
    padding:       4px 10px;
    font-size:     11px;
    cursor:        pointer;
    transition:    color var(--bsx-transition);
}

.bsx-btn-cancel:hover { color: #a09898; }

/* ── Notification cards ─────────────────────────────────────── */

.notif-list { display: flex; flex-direction: column; gap: 10px; }

.notif-card {
    border:        1px solid var(--bsx-border);
    border-radius: var(--bsx-radius-xl);
    padding:       12px 16px;
    background:    var(--bsx-bg-mid);
    font-family:   var(--bsx-font);
    cursor:        pointer;
    transition:    box-shadow var(--bsx-transition);
}

.notif-card:hover { box-shadow: var(--bsx-shadow-md); }

.notif-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   6px;
}

.notif-subject { font-weight: 600; font-size: var(--bsx-text-md); }
.notif-date    { font-size: var(--bsx-text-sm); color: var(--bsx-accent); }
.notif-body    { font-size: var(--bsx-text-sm); color: var(--bsx-accent-dark); line-height: 1.05; }

/* ── Notification modal ─────────────────────────────────────── */

#notif-modal-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,0.5);
    z-index:    99998;
}

#notif-modal-box {
    position:   fixed;
    top:        50%; left: 50%;
    transform:  translate(-50%, -50%);
    background: var(--bsx-bg-deep);
    border-radius: 10px;
    width:      90%;
    max-width:  700px;
    max-height: 85vh;
    overflow-y: auto;
    z-index:    99999;
    padding:    24px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.3);
}

#notif-modal-close {
    position:    absolute;
    top:         12px; right: 16px;
    background:  none;
    border:      none;
    font-size:   1.5em;
    cursor:      pointer;
    color:       #aaa;
    transition:  color var(--bsx-transition);
}

#notif-modal-close:hover { color: #fff; }

/* ── Campaign status badge ──────────────────────────────────── */

.campaign-status-badge {
    position:       absolute;
    top:            12px; right: 40px;
    font-size:      10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding:        4px 8px;
    border-radius:  var(--bsx-radius-sm);
    font-weight:    600;
}

.campaign-status-badge.closed { background: rgba(0,0,0,0.1); color: var(--bsx-text-sub); }

.preference-card.campaign-closed         { opacity: 0.7; }
.preference-card.campaign-closed:hover   { opacity: 1; }
.icon-indicator.completed                { border-color: #666; color: #666; }

/* ── Mobile sidebar toggle ──────────────────────────────────── */

.bsx-mobile-toggle {
    display:       block;
    width:         100%;
    padding:       0.75rem;
    background:    var(--bsx-accent-dark);
    color:         #000;
    border:        none;
    border-radius: var(--bsx-radius-md);
    font-family:   var(--bsx-font);
    font-weight:   600;
    font-size:     0.95rem;
    cursor:        pointer;
    margin-bottom: 0.5rem;
}

.bsx-gf-sidebar-wrapper.collapsed .bsx-gf-search-section,
.bsx-gf-sidebar-wrapper.collapsed .bsx-gf-filters-section,
.bsx-gf-sidebar-wrapper.collapsed .bsx-gf-sort-section,
.bsx-gf-sidebar-wrapper.collapsed .bsx-gf-clear-all { display: none; }

@media (min-width: 768px) {
    .bsx-mobile-toggle { display: none; }
}