/* ============================================================
   BSX BASE
   Shared components used across all pages.
   Requires bsx-design.css
   ============================================================ */

/* ── Reset ─────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

img { max-width: 100%; height: auto; }

/* ── Layout helpers ─────────────────────────────────────────── */

.bsx-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ── Typography base ────────────────────────────────────────── */

.bsx-font         { font-family: var(--bsx-font); }
.bsx-font-mono    { font-family: var(--bsx-font-mono); }
.bsx-text-accent  { color: var(--bsx-accent); }
.bsx-text-muted   { color: var(--bsx-text-muted); }
.bsx-text-sub     { color: var(--bsx-text-sub); }

/* ── Semantic colors ────────────────────────────────────────── */

.positive { color: var(--bsx-positive-lt); font-weight: 700; }
.negative { color: var(--bsx-negative-lt); font-weight: 700; }
.green    { color: var(--bsx-green); }
.red      { color: var(--bsx-red); }
.pink     { color: var(--bsx-pink); }
.grey     { color: var(--bsx-grey); }
.curdat   { color: #a0a0a0; }
.olddat   { color: var(--bsx-negative-lt); }
.closedat { color: #464646; }

/* ── Cards ──────────────────────────────────────────────────── */

.bsx-card {
    background:    var(--bsx-bg-mid);
    border:        1px solid var(--bsx-border);
    border-radius: var(--bsx-radius-lg);
    padding:       1rem;
    position:      relative;
    transition:    all var(--bsx-transition);
}

.bsx-card:hover {
    background:  var(--bsx-bg);
    border-color: var(--bsx-accent-mid);
    box-shadow:  var(--bsx-shadow-md);
    transform:   scale(1.02);
}

/* ── Performance badge ──────────────────────────────────────── */

.bsx-perf-badge {
    display:       inline-block;
    padding:       0.25rem 0.6rem;
    border-radius: var(--bsx-radius-md);
    font-weight:   700;
    font-size:     var(--bsx-text-sm);
}

.bsx-perf-badge.positive {
    background: var(--bsx-positive-bg);
    color:      #81c784;
}

.bsx-perf-badge.negative {
    background: var(--bsx-negative-bg);
    color:      #e57373;
}

/* ── Status / Type indicators ───────────────────────────────── */

.bsx-status { font-size: var(--bsx-text-lg); font-weight: 700; }
.bsx-status.green  { color: var(--bsx-green); }
.bsx-status.red    { color: var(--bsx-red); }
.bsx-status.pink   { color: var(--bsx-pink); }
.bsx-status.grey   { color: var(--bsx-grey); }

.bsx-type {
    font-size:   var(--bsx-text-lg);
    font-weight: 700;
    color:       var(--bsx-accent-mid);
}

/* ── Preference cards ───────────────────────────────────────── */

.preferences-list-minimal { margin: 20px 0; }

.preferences-list-minimal h3 {
    font-family: var(--bsx-font);
    font-size:   var(--bsx-text-base);
    font-weight: 400;
    color:       var(--bsx-border-ui);
    margin:      0 0 20px 0;
}

.preferences-grid {
    font-family:           var(--bsx-font);
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap:                   6px;
    margin-top:            0.3rem;
}

.preference-card {
    background:    var(--bsx-bg);
    border:        1px solid var(--bsx-border-soft);
    border-radius: var(--bsx-radius-md);
    padding:       0.5rem;
    position:      relative;
    transition:    all var(--bsx-transition);
}

.preference-card:hover {
    background:  var(--bsx-bg-deep);
    border-color: var(--bsx-bg);
    box-shadow:  var(--bsx-shadow-sm);
}

.preference-card-header {
    display:       flex;
    align-items:   flex-start;
    gap:           12px;
    margin-bottom: 6px;
}

.preference-type-icon {
    font-size:  20px;
    flex-shrink: 0;
    color:       var(--bsx-bg);
}

.preference-card-title {
    margin:      0;
    font-size:   var(--bsx-text-md);
    line-height: 1.2;
    font-weight: 400;
    flex:        1;
}

.preference-card-title a {
    color:           var(--bsx-text);
    text-decoration: none;
    transition:      color var(--bsx-transition);
}

.preference-card-title a:hover { color: var(--bsx-accent); }

.preference-card-icons {
    display:     flex;
    gap:         6px;
    align-items: center;
    margin-top:  0.5rem;
}

.icon-indicator {
    width:         28px;
    height:        28px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    border-radius: var(--bsx-radius-md);
    background:    transparent;
    border:        1px solid #e0e0e0;
    color:         var(--bsx-text-sub);
    transition:    all var(--bsx-transition);
}

.icon-indicator svg    { width: 14px; height: 14px; }
.icon-indicator.active { border-color: #a0a0a0; color: #a0a0a0; }

.btn-remove-preference-minimal {
    position:        absolute;
    top:             12px;
    right:           12px;
    background:      transparent;
    border:          none;
    color:           var(--bsx-text-sub);
    cursor:          pointer;
    padding:         4px;
    border-radius:   var(--bsx-radius-md);
    transition:      all var(--bsx-transition);
    width:           24px;
    height:          24px;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.btn-remove-preference-minimal:hover { background: rgba(0,0,0,0.05); color: #333; }
.btn-remove-preference-minimal svg   { width: 14px; height: 14px; }

.no-preferences {
    padding:       40px 20px;
    text-align:    center;
    color:         var(--bsx-accent-dark);
    font-size:     var(--bsx-text-sm);
    background:    var(--bsx-bg);
    border-radius: var(--bsx-radius-md);
    border:        1px dashed var(--bsx-border-soft);
}

/* ── Preference badge buttons ───────────────────────────────── */

.campaign-preference-badge {
    display:     inline-flex;
    gap:         12px;
    align-items: center;
    font-family: var(--bsx-font);
}

.pref-btn {
    width:           40px;
    height:          40px;
    border:          1px solid #d0d0d0;
    background:      var(--bsx-bg);
    border-radius:   var(--bsx-radius-md);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      all var(--bsx-transition);
    color:           #666;
    padding:         0;
}

.pref-btn:hover:not(:disabled) { border-color: #333; background: rgba(0,0,0,0.03); }
.pref-btn:active:not(:disabled){ transform: scale(0.96); }
.pref-btn:disabled             { opacity: 0.25; cursor: not-allowed; border-color: #e0e0e0; }
.pref-btn svg                  { width: 20px; height: 20px; transition: all var(--bsx-transition); }
.pref-btn.active               { border-color: #333; color: #333; background: transparent; }
.pref-btn.active:hover:not(:disabled) { background: rgba(0,0,0,0.05); }

/* ── Toast notifications ────────────────────────────────────── */

.pref-toast {
    position:       fixed;
    bottom:         24px;
    right:          24px;
    background:     var(--bsx-bg-dark);
    color:          var(--bsx-text);
    padding:        12px 20px;
    border-radius:  var(--bsx-radius-md);
    font-family:    var(--bsx-font);
    font-size:      var(--bsx-text-sm);
    font-weight:    500;
    z-index:        10000;
    opacity:        0;
    transform:      translateY(10px);
    transition:     all 0.25s ease;
    box-shadow:     0 2px 8px rgba(0,0,0,0.15);
}

.pref-toast.show          { opacity: 1; transform: translateY(0); }
.pref-toast-success       { background: #333; }
.pref-toast-error         { background: var(--bsx-negative); }
.pref-toast-warning       { background: #f57c00; }
.pref-toast-info          { background: #666; }

/* ── Trade performance ──────────────────────────────────────── */

.preference-card-meta {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-top:      12px;
    gap:             8px;
}

.trade-performance {
    font-size:           var(--bsx-text-md);
    font-weight:         600;
    display:             flex;
    align-items:         center;
    gap:                 6px;
    font-variant-numeric: tabular-nums;
}

.trade-performance .perf-value {
    font-family:     var(--bsx-font-mono);
    letter-spacing:  -0.5px;
    font-size:       var(--bsx-text-md);
}

.trade-performance.positive .perf-value { color: var(--bsx-positive); }
.trade-performance.negative .perf-value { color: var(--bsx-negative); }

.trade-performance .perf-label {
    font-size:      var(--bsx-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color:          var(--bsx-text-sub);
    font-weight:    500;
    background:     rgba(0,0,0,0.05);
    padding:        2px 6px;
    border-radius:  var(--bsx-radius-sm);
}

.preference-card.has-active-trade {
    border-color: #333;
    position:     relative;
}

.preference-card.has-active-trade::after {
    content:       '';
    position:      absolute;
    top:           0; left: 0; right: 0;
    height:        2px;
    background:    linear-gradient(90deg, transparent, #333, transparent);
    border-radius: var(--bsx-radius-md) var(--bsx-radius-md) 0 0;
}

/* ── Sort buttons (sidebar) ─────────────────────────────────── */

.sort-btn {
    width:          100%;
    padding:        0.5rem 10px;
    height:         2rem;
    background:     var(--bsx-bg-deep);
    border:         1px solid var(--bsx-border);
    border-radius:  var(--bsx-radius-md);
    color:          var(--bsx-text);
    font-family:    var(--bsx-font);
    font-size:      var(--bsx-text-sm);
    cursor:         pointer;
    transition:     all var(--bsx-transition-med);
    text-align:     left;
    letter-spacing: 1px;
}

.sort-btn:hover        { background: var(--bsx-bg); color: #fff; border-color: #4a4a4a; }
.sort-btn.active       { background: var(--bsx-bg-dark); color: #fff; border-color: var(--bsx-accent); }
.sort-btn .arrow       { margin-left: 5px; font-size: var(--bsx-text-sm); }

/* ── Filter sidebar ─────────────────────────────────────────── */

.bsx-gf-sidebar-wrapper {
    background:    var(--bsx-bg-mid);
    border:        1px solid var(--bsx-border);
    border-radius: var(--bsx-radius-xl);
    padding:       20px 30px;
    color:         var(--bsx-text);
}

.bsx-gf-sidebar-wrapper h4 {
    font-size:     var(--bsx-text-base);
    font-weight:   600;
    color:         #f9f7fc;
    border-bottom: 2px solid var(--bsx-border);
    padding-bottom: 0.25rem;
}

.bsx-gf-search-input {
    width:         90%;
    padding:       0.5rem;
    background:    var(--bsx-bg-deep);
    border:        1px solid var(--bsx-border);
    border-radius: var(--bsx-radius-md);
    color:         var(--bsx-text);
    font-size:     var(--bsx-text-sm);
    transition:    border-color var(--bsx-transition);
}

.bsx-gf-search-input:focus {
    outline:    none;
    border-color: var(--bsx-accent-dark);
    box-shadow: 0 0 0 2px rgba(142, 125, 24, 0.2);
}

.bsx-gf-filter-section {
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--bsx-border);
}

.bsx-gf-filter-section:last-child { border-bottom: none; }
.bsx-gf-filter-section.has-active { background: rgba(142, 125, 24, 0.1); }

.bsx-gf-filter-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         0.5rem 0;
    cursor:          pointer;
    user-select:     none;
    transition:      opacity var(--bsx-transition);
    font-weight:     500;
    font-size:       var(--bsx-text-sm);
}

.bsx-gf-filter-header:hover { opacity: 0.7; }

.bsx-gf-toggle { font-size: 0.7rem; transition: transform var(--bsx-transition-med); }
.bsx-gf-filter-section.active .bsx-gf-toggle { transform: rotate(-180deg); }

.bsx-gf-filter-options {
    list-style:  none;
    margin:      0;
    padding:     0;
    max-height:  0;
    overflow:    hidden;
    transition:  max-height var(--bsx-transition-med);
}

.bsx-gf-filter-section.active .bsx-gf-filter-options {
    max-height:     800px;
    padding-bottom: 0.5rem;
}

.bsx-gf-filter-option {
    display:    flex;
    align-items: center;
    gap:        0.25rem;
    padding:    0.25rem 0;
    cursor:     pointer;
    transition: all 0.15s;
    font-size:  var(--bsx-text-sm);
    color:      var(--bsx-text);
}

.bsx-gf-filter-option:hover           { padding-left: 0.25rem; color: #f9f7fc; }
.bsx-gf-filter-option.selected        { font-weight: 500; color: var(--bsx-accent-dark); }
.bsx-gf-filter-option.bsx-gf-child   { padding-left: 1.2rem; font-size: var(--bsx-text-sm); }

.bsx-gf-checkbox {
    font-size:   var(--bsx-text-sm);
    color:       var(--bsx-accent-dark);
    flex-shrink: 0;
    width:       0.9rem;
    text-align:  center;
    font-family: monospace;
    line-height: 1;
}

.bsx-gf-clear-all {
    width:          100%;
    padding:        0.5rem;
    background:     transparent;
    border:         1px solid var(--bsx-accent-dark);
    border-radius:  var(--bsx-radius-md);
    color:          var(--bsx-accent-dark);
    font-size:      var(--bsx-text-sm);
    font-weight:    600;
    cursor:         pointer;
    transition:     all var(--bsx-transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family:    var(--bsx-font);
}

.bsx-gf-clear-all:hover { background: var(--bsx-accent-dark); color: #000; }

/* ── Loading spinner ────────────────────────────────────────── */

.bsx-loading,
.bsx-gf-loading {
    opacity:        0.5;
    pointer-events: none;
    position:       relative;
    min-height:     200px;
}

.bsx-loading::after,
.bsx-gf-loading::after {
    content:      '';
    position:     absolute;
    top:          50%; left: 50%;
    transform:    translate(-50%, -50%);
    width:        40px; height: 40px;
    border:       3px solid rgba(255,255,255,0.2);
    border-top-color: var(--bsx-accent);
    border-radius: 50%;
    animation:    bsx-spin 0.8s linear infinite;
}

@keyframes bsx-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── No results / error ─────────────────────────────────────── */

.bsx-no-results,
.bsx-error {
    text-align: center;
    padding:    3rem 1rem;
    color:      var(--bsx-text-sub);
    font-size:  var(--bsx-text-md);
}

.bsx-error { color: rgba(241, 119, 124, 0.25); }

/* ── Scrollbar ──────────────────────────────────────────────── */

.bsx-scrollbar::-webkit-scrollbar       { width: 8px; }
.bsx-scrollbar::-webkit-scrollbar-track { background: var(--bsx-bg-deep); }
.bsx-scrollbar::-webkit-scrollbar-thumb { background: var(--bsx-bg-mid); border-radius: 2px; }
.bsx-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--bsx-bg-deep); }

/* ── Timezone dropdown ──────────────────────────────────────── */

#bsxTzDisplay:hover {
    border-color: #444 !important;
    background:   rgba(255,255,255,0.04) !important;
}

#bsxTzList .bsxOpt {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         7px 12px;
    cursor:          pointer;
    font-size:       11px;
    color:           var(--bsx-text-dim);
}

#bsxTzList .bsxOpt:hover       { background: rgba(255,255,255,0.05); color: #c0b8b0; }
#bsxTzList .bsxOpt.active      { color: #fff; background: rgba(255,255,255,0.07); }
#bsxTzList .bsxOpt.active::after {
    content:     "✓";
    font-size:   10px;
    color:       var(--bsx-green);
    margin-left: 6px;
}

/* ── Responsive: shared breakpoints ────────────────────────── */

@media (max-width: 768px) {
    .preferences-grid         { grid-template-columns: 1fr; }
    .pref-btn                 { width: 36px; height: 36px; }
    .pref-btn svg             { width: 18px; height: 18px; }
    .pref-toast               { bottom: 16px; right: 16px; left: 16px; text-align: center; }
    .preference-card-meta     { flex-direction: column; align-items: flex-start; gap: 8px; }
    .trade-performance        { font-size: var(--bsx-text-md); }
    .sort-btn                 { height: 2.6rem; font-size: var(--bsx-text-md); }
}