/* =============================================================================
   NHL Salary Cap Tracker v2 — Frontend Styles
   nhltraderumor.com  ·  Dark Hockey Editorial Theme
   Fonts: Barlow Condensed (display) + DM Mono (numbers) + Barlow (body)
============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800;900&family=Barlow:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* ── CSS Variables ────────────────────────────────────────────────────────── */
:root {
  --c-bg:          #09111e;
  --c-surface:     #0f1c2e;
  --c-surface2:    #162235;
  --c-surface3:    #1c2d42;
  --c-border:      #1e3050;
  --c-border2:     #243a58;
  --c-text:        #dde6f0;
  --c-text-muted:  #647e9c;
  --c-text-dim:    #3d5570;
  --c-accent:      #00b4ef;
  --c-accent-dim:  rgba(0,180,239,.12);
  --c-green:       #22d86b;
  --c-yellow:      #f5b800;
  --c-red:         #ff4757;
  --c-ltir:        rgba(245,184,0,.15);
  --radius:        12px;
  --radius-sm:     7px;
  --shadow:        0 8px 40px rgba(0,0,0,.55);
  --shadow-sm:     0 2px 12px rgba(0,0,0,.4);
  --font-d:        'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-b:        'Barlow', 'Segoe UI', sans-serif;
  --font-mono:     'DM Mono', 'Fira Code', monospace;
  --transition:    all .2s ease;
}

/* ── Base reset for the wrapper ────────────────────────────────────────────── */
.nhl-cap-wrapper,
.nhl-cap-team-full,
.nhl-cap-all-wrapper { box-sizing: border-box; }
.nhl-cap-wrapper *,
.nhl-cap-team-full *,
.nhl-cap-all-wrapper * { box-sizing: inherit; }

/* ============================================================================
   OVERVIEW WRAPPER  [nhl_salary_cap]
============================================================================ */
.nhl-cap-wrapper {
  font-family: var(--font-b);
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 28px 22px 20px;
  max-width: 1280px;
  margin: 0 auto 2.4rem;
  box-shadow: var(--shadow);
}

/* ── Header ── */
.nhl-cap-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--c-border);
}
.nhl-cap-title {
  font-family: var(--font-d);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text);
  margin: 0 0 6px;
  line-height: 1.1;
}
.nhl-cap-title::before { content: '🏒 '; }
.nhl-cap-meta { font-size:.8rem; color:var(--c-text-muted); margin:0; }
.nhl-cap-meta strong { color: var(--c-accent); }

.nhl-cap-header-right { display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.nhl-cap-search {
  background:var(--c-surface2); border:1px solid var(--c-border2);
  border-radius:var(--radius-sm); color:var(--c-text); font-family:var(--font-b);
  font-size:.9rem; padding:8px 14px; width:230px; outline:none; transition:var(--transition);
}
.nhl-cap-search:focus { border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-dim); }
.nhl-cap-search::placeholder { color:var(--c-text-muted); }
.nhl-cap-filter-wrap { display:flex; gap:8px; }
.nhl-cap-filter-conf,.nhl-cap-filter-div {
  background:var(--c-surface2); border:1px solid var(--c-border2);
  border-radius:var(--radius-sm); color:var(--c-text); font-family:var(--font-b);
  font-size:.82rem; padding:7px 10px; cursor:pointer; outline:none; transition:var(--transition);
}
.nhl-cap-filter-conf:focus,.nhl-cap-filter-div:focus { border-color:var(--c-accent); }

/* ── Overview card grid ── */
.nhl-cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.nhl-cap-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
  position: relative;
}
.nhl-cap-card:hover { transform:translateY(-3px); box-shadow:0 10px 36px rgba(0,0,0,.6); }
.nhl-cap-card.cap-tight       { border-left:3px solid var(--c-red); }
.nhl-cap-card.cap-moderate    { border-left:3px solid var(--c-yellow); }
.nhl-cap-card.cap-comfortable { border-left:3px solid var(--c-green); }
.nhl-cap-card-bar { height:4px; opacity:.9; }
.nhl-cap-card-body { display:flex; align-items:center; gap:13px; padding:14px 15px 10px; }
.nhl-cap-badge {
  width:48px; height:48px; border-radius:8px; display:flex; align-items:center;
  justify-content:center; font-family:var(--font-d); font-weight:900; font-size:1rem;
  letter-spacing:.04em; flex-shrink:0; box-shadow:var(--shadow-sm);
}
.nhl-cap-team-name { font-family:var(--font-d); font-weight:700; font-size:1.1rem; letter-spacing:.02em; line-height:1.2; }
.nhl-cap-division { font-size:.72rem; color:var(--c-text-muted); margin-top:2px; }

/* ── Cap bar (overview card) ── */
.nhl-cap-bar-track { height:5px; background:var(--c-surface3); margin:0 15px 0; border-radius:3px; overflow:hidden; }
.nhl-cap-bar-fill  { height:100%; border-radius:3px; transition:width .6s cubic-bezier(.23,1,.32,1); min-width:2px; }

/* ── Card stats ── */
.nhl-cap-card-stats {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--c-border); border-top:1px solid var(--c-border); margin-top:10px;
}
.nhl-cap-stat { background:var(--c-surface); padding:10px 8px; text-align:center; }
.stat-lbl { display:block; font-size:.62rem; letter-spacing:.09em; text-transform:uppercase; color:var(--c-text-muted); margin-bottom:3px; }
.stat-val { display:block; font-family:var(--font-mono); font-weight:500; font-size:.88rem; color:var(--c-text); white-space:nowrap; }
.stat-val.cap-tight       { color:var(--c-red); }
.stat-val.cap-moderate    { color:var(--c-yellow); }
.stat-val.cap-comfortable { color:var(--c-green); }
.roster-breakdown { display:block; font-size:.65rem; color:var(--c-text-muted); margin-top:2px; }

.nhl-cap-roster-link {
  display:block; text-align:center; font-size:.75rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--c-accent); padding:9px;
  border-top:1px solid var(--c-border); text-decoration:none; transition:var(--transition);
}
.nhl-cap-roster-link:hover { background:var(--c-accent-dim); }

.ltir-pill {
  background:var(--c-ltir); color:var(--c-yellow); border-radius:4px;
  padding:1px 5px; font-size:.75em; font-weight:600; font-family:var(--font-mono);
}
.nhl-cap-footnote { font-size:.7rem; color:var(--c-text-dim); margin-top:16px; padding-top:12px; border-top:1px solid var(--c-border); line-height:1.5; }
.nhl-cap-no-results { text-align:center; padding:40px; color:var(--c-text-muted); }
.nhl-cap-error { background:rgba(255,71,87,.1); border:1px solid rgba(255,71,87,.35); color:#ff7675; border-radius:var(--radius-sm); padding:10px 14px; font-size:.9rem; }

/* ============================================================================
   TEAM FULL VIEW  [nhl_salary_cap_team] / [nhl_salary_cap_all]
============================================================================ */
.nhl-cap-team-full {
  font-family: var(--font-b);
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  margin-bottom: 2rem;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.nhl-cap-all-wrapper { max-width:1280px; margin:0 auto; }

/* ── Team header ── */
.nhl-cap-tf-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  background: var(--c-surface);
  border-bottom: 3px solid currentColor;
  border-color: inherit;
}
.nhl-cap-tf-badge {
  width:64px; height:64px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; font-family:var(--font-d); font-weight:900; font-size:1.35rem;
  letter-spacing:.04em; flex-shrink:0; box-shadow:var(--shadow-sm);
}
.nhl-cap-tf-title-block { flex:1; min-width:180px; }
.nhl-cap-tf-name {
  font-family:var(--font-d); font-size:1.9rem; font-weight:900; letter-spacing:.04em;
  text-transform:uppercase; margin:0 0 3px; line-height:1.1;
}
.nhl-cap-tf-div { font-size:.78rem; color:var(--c-text-muted); margin:0; }
.nhl-cap-tf-summary { display:flex; gap:24px; flex-wrap:wrap; }
.nhl-cap-tf-stat { text-align:center; }
.nhl-cap-tf-stat-label { display:block; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--c-text-muted); margin-bottom:4px; }
.nhl-cap-tf-stat-value { display:block; font-family:var(--font-mono); font-size:1.25rem; font-weight:500; }
.nhl-cap-tf-stat-value.cap-tight       { color:var(--c-red); }
.nhl-cap-tf-stat-value.cap-moderate    { color:var(--c-yellow); }
.nhl-cap-tf-stat-value.cap-comfortable { color:var(--c-green); }

/* ── Cap progress bar (team view) ── */
.nhl-cap-tf-bar-row { padding:14px 24px 10px; background:var(--c-surface); }
.nhl-cap-tf-bar-track {
  position:relative; height:10px; background:var(--c-surface3);
  border-radius:5px; overflow:visible; margin-bottom:5px;
}
.nhl-cap-tf-bar-fill { position:absolute; top:0; left:0; height:100%; border-radius:5px; transition:width .7s cubic-bezier(.23,1,.32,1); }
.nhl-cap-tf-bar-floor {
  position:absolute; top:-5px; bottom:-5px; width:2px;
  background:rgba(255,255,255,.25); border-radius:1px;
}
.nhl-cap-tf-bar-floor::after {
  content:'Floor'; position:absolute; bottom:-18px; left:50%; transform:translateX(-50%);
  font-size:.6rem; color:var(--c-text-dim); white-space:nowrap; letter-spacing:.05em;
}
.nhl-cap-tf-bar-labels { display:flex; justify-content:space-between; font-size:.68rem; color:var(--c-text-dim); }

/* ── Tabs ── */
.nhl-cap-tabs {
  display: flex;
  gap: 0;
  background: var(--c-surface2);
  border-bottom: 1px solid var(--c-border);
  padding: 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.nhl-cap-tabs::-webkit-scrollbar { display:none; }
.nhl-cap-tab {
  background: none;
  border: none;
  color: var(--c-text-muted);
  cursor: pointer;
  font-family: var(--font-d);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 14px 20px 12px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: color .15s;
}
.nhl-cap-tab:hover { color:var(--c-text); }
.nhl-cap-tab.active {
  color: var(--c-text);
}
.nhl-cap-tab.active::after {
  content:''; position:absolute; bottom:-1px; left:0; right:0; height:3px;
  background:var(--tc, var(--c-accent)); border-radius:2px 2px 0 0;
}
.tab-badge {
  background:var(--c-surface3); color:var(--c-text-muted);
  border-radius:10px; font-size:.72rem; font-family:var(--font-mono);
  padding:1px 7px; font-weight:500;
}
.nhl-cap-tab.active .tab-badge { background:var(--c-accent-dim); color:var(--c-accent); }
.tab-sub { font-family:var(--font-mono); font-size:.8rem; font-weight:400; color:var(--c-text-muted); }

/* ── Panels ── */
.nhl-cap-panel { display:none; animation:fadeSlideIn .18s ease; }
.nhl-cap-panel.active { display:block; }
@keyframes fadeSlideIn {
  from { opacity:0; transform:translateY(5px); }
  to   { opacity:1; transform:translateY(0); }
}
.nhl-cap-panel-empty { padding:36px 24px; color:var(--c-text-muted); font-style:italic; }

/* ── Player table ── */
.nhl-cap-player-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.nhl-cap-player-table {
  width:100%; border-collapse:collapse; font-size:.875rem;
}
.nhl-cap-player-table thead tr {
  background:var(--c-surface2); border-bottom:1px solid var(--c-border2);
}
.nhl-cap-player-table th {
  font-family:var(--font-d); font-size:.68rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--c-text-muted);
  padding:11px 12px; text-align:left; white-space:nowrap;
}
.nhl-cap-player-table th.sortable { cursor:pointer; user-select:none; }
.nhl-cap-player-table th.sortable:hover { color:var(--c-accent); }
.nhl-cap-player-table tbody tr {
  border-bottom:1px solid var(--c-border);
  transition:background .12s;
}
.nhl-cap-player-table tbody tr:hover { background:var(--c-surface2); }
.nhl-cap-player-table tbody tr:last-child { border-bottom:none; }
.nhl-cap-player-table td {
  padding:10px 12px; color:var(--c-text); vertical-align:middle;
}

/* Column widths */
.col-num  { width:36px; text-align:center; font-family:var(--font-mono); font-size:.85rem; color:var(--c-text-muted); }
.col-name { min-width:160px; }
.col-pos  { width:44px; }
.col-shoots,.col-ctry { width:42px; font-size:.8rem; color:var(--c-text-muted); }
.col-ht,.col-wt { width:70px; font-size:.8rem; color:var(--c-text-muted); font-family:var(--font-mono); white-space:nowrap; }
.col-cap  { min-width:140px; }
.col-term { width:68px; font-family:var(--font-mono); font-size:.82rem; color:var(--c-text-muted); }
.col-type { width:60px; }

/* Player name cell */
.col-name { display:flex; align-items:center; gap:10px; }
.player-headshot {
  width:34px; height:34px; border-radius:50%; object-fit:cover;
  border:2px solid var(--c-border2); background:var(--c-surface3); flex-shrink:0;
}
.player-name { font-weight:600; }

/* Position pill */
.pos-pill {
  display:inline-block; font-family:var(--font-d); font-size:.78rem; font-weight:700;
  letter-spacing:.06em; border-radius:4px; padding:2px 6px; min-width:28px; text-align:center;
  background:var(--c-surface3); color:var(--c-text-muted);
}
.pos-pill.pos-c   { background:rgba(0,180,239,.15);  color:var(--c-accent); }
.pos-pill.pos-lw  { background:rgba(34,216,107,.15); color:var(--c-green); }
.pos-pill.pos-rw  { background:rgba(245,184,0,.15);  color:var(--c-yellow); }
.pos-pill.pos-d   { background:rgba(155,115,255,.15);color:#a78bfa; }
.pos-pill.pos-g   { background:rgba(255,71,87,.15);  color:var(--c-red); }

/* Country tag */
.country-tag {
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em;
  color:var(--c-text-muted); border:1px solid var(--c-border2);
  border-radius:3px; padding:1px 4px;
}

/* Cap cell with mini bar */
.cap-cell { display:flex; flex-direction:column; gap:3px; }
.cap-amount { font-family:var(--font-mono); font-weight:500; font-size:.9rem; color:var(--c-accent); white-space:nowrap; }
.cap-mini-bar-track { height:3px; background:var(--c-surface3); border-radius:2px; overflow:hidden; width:100%; max-width:90px; }
.cap-mini-bar-fill  { height:100%; border-radius:2px; }
.cap-pct-small { font-family:var(--font-mono); font-size:.65rem; color:var(--c-text-dim); }

/* Contract type pill */
.type-pill {
  display:inline-block; font-family:var(--font-d); font-size:.72rem; font-weight:700;
  letter-spacing:.08em; border-radius:4px; padding:2px 6px;
  background:var(--c-surface3); color:var(--c-text-muted);
}
.type-pill.type-ufa  { background:rgba(0,180,239,.12);  color:var(--c-accent); }
.type-pill.type-rfa  { background:rgba(34,216,107,.12); color:var(--c-green); }
.type-pill.type-elc  { background:rgba(245,184,0,.12);  color:var(--c-yellow); }
.type-pill.type-10nmc,.type-pill.type-8ntc { background:rgba(255,71,87,.12); color:var(--c-red); }

/* Table footer / totals */
.cap-total-row {
  background:var(--c-surface2);
  border-top:2px solid var(--c-border2);
}
.cap-total-row td { padding:11px 12px; }
.total-label {
  font-family:var(--font-d); font-size:.8rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--c-text-muted);
}
.total-amount {
  font-family:var(--font-mono); font-size:1.05rem; font-weight:500; color:var(--c-accent); text-align:right;
}

.nhl-cap-tf-footnote {
  font-size:.68rem; color:var(--c-text-dim); padding:10px 24px;
  border-top:1px solid var(--c-border); background:var(--c-surface);
}

/* ============================================================================
   WIDGET
============================================================================ */
.nhl-cap-widget-inner { padding:4px 0; }
.nhl-cap-widget-row { display:flex; align-items:center; gap:9px; margin-bottom:11px; }
.nhl-cap-widget-abbr {
  width:36px; height:36px; border-radius:5px; display:flex; align-items:center;
  justify-content:center; font-family:var(--font-d); font-weight:900; font-size:.78rem; flex-shrink:0;
}
.nhl-cap-widget-data { flex:1; }
.nhl-cap-widget-name { font-size:.8rem; font-weight:600; margin-bottom:3px; }
.nhl-cap-widget-bar-wrap { height:4px; background:var(--c-surface3); border-radius:2px; overflow:hidden; margin-bottom:3px; }
.nhl-cap-widget-bar { height:100%; border-radius:2px; transition:width .5s ease; }
.nhl-cap-widget-nums { display:flex; justify-content:space-between; font-size:.7rem; color:var(--c-text-muted); font-family:var(--font-mono); }
.nhl-cap-widget-footnote { font-size:.68rem; color:var(--c-text-dim); margin:5px 0 0; border-top:1px solid var(--c-border); padding-top:7px; }

/* ============================================================================
   RESPONSIVE
============================================================================ */
@media (max-width:780px) {
  .nhl-cap-wrapper       { padding:16px 12px; }
  .nhl-cap-grid          { grid-template-columns:1fr; }
  .nhl-cap-header        { flex-direction:column; }
  .nhl-cap-header-right  { align-items:stretch; width:100%; }
  .nhl-cap-search        { width:100%; }
  .nhl-cap-filter-wrap   { flex-direction:column; }
  .nhl-cap-filter-conf,
  .nhl-cap-filter-div    { width:100%; }
  .nhl-cap-card-stats    { grid-template-columns:repeat(2,1fr); }
  .nhl-cap-tf-header     { padding:16px; gap:12px; }
  .nhl-cap-tf-summary    { gap:14px; }
  .nhl-cap-tf-name       { font-size:1.5rem; }
  /* Hide non-essential columns on mobile */
  .col-ht,.col-wt,.col-ctry,.col-shoots { display:none; }
  .nhl-cap-tab { font-size:.85rem; padding:12px 14px 10px; }
}
@media (max-width:500px) {
  .nhl-cap-title { font-size:1.5rem; }
  .col-term { display:none; }
}