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

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

.bsx-card {
    background:    #37353a;
    border:        1px solid #55534f;
    border-radius: 10px;
    padding:       20px 24px;
    max-width:     600px;
    color:         #eadb82;
    font-size:     0.8rem;
}

.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 #37353a;
}

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

.bsx-card-email {
    font-size:  0.8rem;
    color:      #888;
    margin-top: 2px;
}

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

.bsx-card-section-label {
    font-size:      0.8rem;
    text-transform: uppercase;
    color:          #f1eee7;
    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: #888; 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: #f1eee7; font-size: 0.7rem; }

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

.bsx-badge {
    font-size:     0.8rem;
    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; }


/* ── 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:         #888;
    border:        1px solid #37353a;
    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;

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