/* ============================================================
   TTSFFL — assets/css/components.css
   Reusable UI components: tables, buttons, forms, tabs, badges.
   ============================================================ */

/* ── Data Tables ─────────────────────────────────────────────
   ---------------------------------------------------------- */
.data-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       var(--fs-sm);
    background:      var(--color-bg-card);
    border-radius:   var(--radius-md);
    overflow:        hidden;
    box-shadow:      var(--shadow-card);
}

.data-table thead th {
    background:    var(--color-bg-header-row);
    color:         var(--color-text-on-dark);
    font-weight:   var(--fw-semibold);
    padding:       var(--space-3) var(--space-4);
    text-align:    left;
    white-space:   nowrap;
    font-size:     var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.data-table thead th.sortable {
    cursor: pointer;
    user-select: none;
}

.data-table thead th.sortable:hover {
    background: var(--color-primary-light);
}

.data-table thead th .sort-icon {
    margin-left: var(--space-1);
    opacity: 0.6;
    font-size: 0.65rem;
}

.data-table tbody tr {
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition-fast);
}

.data-table tbody tr:last-child {
    border-bottom: none;
}

.data-table tbody tr:nth-child(even) {
    background: var(--color-bg-row-alt);
}

.data-table tbody tr:hover {
    background: rgba(119, 49, 65, 0.06);
}

.data-table td {
    padding:    var(--space-3) var(--space-4);
    color:      var(--color-text-primary);
    vertical-align: middle;
}

/* Numeric columns: right-aligned */
.data-table td.num,
.data-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Team name cell with logo */
.data-table td.team-cell {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
}

/* Division header row inside standings table */
.data-table tr.division-header td {
    background:    var(--color-primary-dark);
    color:         var(--color-text-on-dark);
    font-weight:   var(--fw-bold);
    font-size:     var(--fs-sm);
    padding:       var(--space-2) var(--space-4);
    border-bottom: 2px solid var(--color-accent);
}

/* Tiebreaker tooltip icon */
.tiebreaker-icon {
    display:     inline-flex;
    align-items: center;
    justify-content: center;
    width:    16px;
    height:   16px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color:      #1A1A1A;
    font-size:  10px;
    font-weight: var(--fw-bold);
    cursor:     help;
    margin-left: var(--space-1);
    vertical-align: middle;
    position:   relative;
}

.tiebreaker-icon:hover::after {
    content:     attr(data-tip);
    position:    absolute;
    bottom:      calc(100% + 6px);
    left:        50%;
    transform:   translateX(-50%);
    background:  #1A1A1A;
    color:       #FAF8F5;
    padding:     var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size:   var(--fs-xs);
    white-space: nowrap;
    z-index:     100;
    box-shadow:  var(--shadow-md);
}

/* ── Buttons ─────────────────────────────────────────────────
   ---------------------------------------------------------- */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    padding:         var(--space-2) var(--space-5);
    border:          2px solid transparent;
    border-radius:   var(--radius-md);
    font-family:     var(--font-body);
    font-size:       var(--fs-sm);
    font-weight:     var(--fw-semibold);
    cursor:          pointer;
    transition:      background var(--transition-fast),
                     color var(--transition-fast),
                     border-color var(--transition-fast);
    white-space:     nowrap;
    text-decoration: none;
}

.btn--primary {
    background: var(--color-primary);
    color:      var(--color-text-on-dark);
    border-color: var(--color-primary);
}
.btn--primary:hover {
    background:   var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color:        var(--color-text-on-dark);
}

.btn--gold {
    background:  var(--color-accent);
    color:       #1A1A1A;
    border-color: var(--color-accent);
}
.btn--gold:hover {
    background:   var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color:        #1A1A1A;
}

.btn--outline {
    background:   transparent;
    color:        var(--color-primary);
    border-color: var(--color-primary);
}
.btn--outline:hover {
    background: var(--color-primary);
    color:      var(--color-text-on-dark);
}

.btn--sm {
    padding:   var(--space-1) var(--space-3);
    font-size: var(--fs-xs);
}

.btn--lg {
    padding:   var(--space-3) var(--space-8);
    font-size: var(--fs-md);
}

/* ── Filter bar ──────────────────────────────────────────────
   Row of filter dropdowns above tables.
   ---------------------------------------------------------- */
.filter-bar {
    display:       flex;
    flex-wrap:     wrap;
    gap:           var(--space-3);
    margin-bottom: var(--space-4);
    align-items:   center;
}

.filter-bar label {
    font-size:   var(--fs-sm);
    font-weight: var(--fw-semibold);
    color:       var(--color-text-secondary);
    white-space: nowrap;
}

.filter-bar select {
    padding:       var(--space-2) var(--space-3);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background:    var(--color-bg-card);
    color:         var(--color-text-primary);
    font-size:     var(--fs-sm);
    cursor:        pointer;
}

.filter-bar select:focus {
    outline:      2px solid var(--color-accent);
    border-color: var(--color-accent);
}

/* ── Tabs ────────────────────────────────────────────────────
   Used on Records page and anywhere else multi-tab content appears.
   ---------------------------------------------------------- */
.tab-bar {
    display:        flex;
    gap:            0;
    border-bottom:  2px solid var(--color-border);
    margin-bottom:  var(--space-5);
    overflow-x:     auto;
    scrollbar-width: none;
}

.tab-bar::-webkit-scrollbar { display: none; }

.tab-btn {
    padding:         var(--space-3) var(--space-5);
    background:      transparent;
    border:          none;
    border-bottom:   3px solid transparent;
    margin-bottom:   -2px;
    font-size:       var(--fs-sm);
    font-weight:     var(--fw-semibold);
    color:           var(--color-text-secondary);
    cursor:          pointer;
    white-space:     nowrap;
    transition:      color var(--transition-fast),
                     border-color var(--transition-fast);
}

.tab-btn:hover {
    color: var(--color-primary);
}

.tab-btn.active {
    color:        var(--color-primary);
    border-bottom-color: var(--color-accent);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Forms ───────────────────────────────────────────────────
   ---------------------------------------------------------- */
.form-group {
    margin-bottom: var(--space-4);
}

.form-group label {
    display:       block;
    font-size:     var(--fs-sm);
    font-weight:   var(--fw-semibold);
    margin-bottom: var(--space-2);
    color:         var(--color-text-primary);
}

.form-control {
    width:         100%;
    padding:       var(--space-2) var(--space-3);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background:    var(--color-bg-card);
    color:         var(--color-text-primary);
    font-size:     var(--fs-base);
    transition:    border-color var(--transition-fast);
}

.form-control:focus {
    outline:      none;
    border-color: var(--color-accent);
    box-shadow:   0 0 0 3px rgba(255, 182, 18, 0.2);
}

.form-error {
    font-size:  var(--fs-xs);
    color:      var(--color-loss);
    margin-top: var(--space-1);
}

/* ── Indicators ──────────────────────────────────────────────
   Clinch, eliminated, streak indicators in standings.
   ---------------------------------------------------------- */
.indicator--clinch   { color: var(--color-clinch); font-size: var(--fs-sm); }
.indicator--elim     { color: var(--color-eliminated); font-size: var(--fs-sm); }
.indicator--win      { color: var(--color-win); font-weight: var(--fw-bold); }
.indicator--loss     { color: var(--color-loss); font-weight: var(--fw-bold); }

.streak-badge {
    display:       inline-block;
    padding:       1px 6px;
    border-radius: var(--radius-sm);
    font-size:     var(--fs-xs);
    font-weight:   var(--fw-semibold);
}
.streak-badge--win  { background: var(--color-win-bg);  color: var(--color-win); }
.streak-badge--loss { background: var(--color-loss-bg); color: var(--color-loss); }

/* ── Record gold glow (broken records) ───────────────────────
   Applied to record rows that were broken recently.
   The 'WK##' label is added via a data attribute.
   ---------------------------------------------------------- */
.record-broken {
    box-shadow:  var(--shadow-glow);
    border-left: 3px solid var(--color-accent) !important;
    position:    relative;
}

.record-broken::after {
    content:       attr(data-broken-week);
    position:      absolute;
    top:           4px;
    right:         6px;
    background:    var(--color-accent);
    color:         #1A1A1A;
    font-size:     10px;
    font-weight:   var(--fw-bold);
    padding:       1px 5px;
    border-radius: var(--radius-sm);
}

/* ── Toast notifications ─────────────────────────────────────
   Positioned top-center, shown by animation.js
   ---------------------------------------------------------- */
.toast-container {
    position:   fixed;
    top:        calc(var(--navbar-height) + var(--space-4));
    left:       50%;
    transform:  translateX(-50%);
    z-index:    9999;
    display:    flex;
    flex-direction: column;
    gap:        var(--space-2);
    max-width:  480px;
    width:      calc(100% - var(--space-8));
}

.toast {
    background:    var(--color-primary-dark);
    color:         var(--color-text-on-dark);
    padding:       var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    border-left:   4px solid var(--color-accent);
    box-shadow:    var(--shadow-lg);
    display:       flex;
    align-items:   center;
    gap:           var(--space-3);
    font-size:     var(--fs-sm);
    opacity:       0;
    transform:     translateY(-12px);
    transition:    opacity var(--transition-normal),
                   transform var(--transition-normal);
}

.toast.visible {
    opacity:   1;
    transform: translateY(0);
}

.toast__icon    { font-size: var(--fs-lg); flex-shrink: 0; }
.toast__text    { flex: 1; }
.toast__counter { color: var(--color-accent); font-size: var(--fs-xs);
                  font-weight: var(--fw-semibold); white-space: nowrap; }