/**
 * League Table module public styles - Modern Material UI/Tailwind Design
 *
 * @since      1.0.0
 * @package    Club_Manager_Pro
 */

/* CSS Variables for Dark/Light Theme Support - Scoped to League Table */
.cmp-league-table-container,
.container,
div[class*="cmp"]{
  --cmp-bg: #0f1115;
  --cmp-panel: #151922;
  --cmp-muted: #7f8ca6;
  --cmp-text: #eaf0ff;
  --cmp-accent: #ff3d3d; /* Dragons red */
  --cmp-accent-2: #ffb347;
  --cmp-ok: #1fbe7a;
  --cmp-warn: #ffb020;
  --cmp-bad: #f05252;
  --cmp-row: #11151e;
  --cmp-row-alt: #121825;
  --cmp-border: #222a36;
  --cmp-chip: #1b2230;
  --cmp-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}

/* Chrome-specific fixes for CSS variable inheritance */
html .container .card,
html div[class*="cmp"] .card,
html .cmp-league-table-container .card{ 
  background-color: #151922 !important;
  background: #151922 !important;
}

html .container tbody tr,
html div[class*="cmp"] tbody tr,
html .cmp-league-table-container tbody tr{ 
  background-color: #11151e !important;
  background: #11151e !important;
}

html .container tbody tr:nth-child(even),
html div[class*="cmp"] tbody tr:nth-child(even),
html .cmp-league-table-container tbody tr:nth-child(even){ 
  background-color: #121825 !important;
  background: #121825 !important;
}

html .container thead th,
html div[class*="cmp"] thead th,
html .cmp-league-table-container thead th{
  background-color: #151922 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.03)), #151922 !important;
}

/* Additional Chrome-specific overrides with maximum specificity */
body .cmp-league-table-container .card {
  background: #151922 !important;
}

body .cmp-league-table-container tbody tr {
  background: #11151e !important;
}

body .cmp-league-table-container tbody tr:nth-child(even) {
  background: #121825 !important;
}

body .cmp-league-table-container thead th {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.03)), #151922 !important;
}

@media (prefers-color-scheme: light) {
  .cmp-league-table-container,
  .container,
  div[class*="cmp"]{
    --cmp-bg: #f5f7fb;
    --cmp-panel: #ffffff;
    --cmp-muted: #5f6b88;
    --cmp-text: #182033;
    --cmp-row: #ffffff;
    --cmp-row-alt: #f8fafc;
    --cmp-border: #e5eaf3;
    --cmp-chip: #f1f5ff;
    --cmp-shadow: 0 10px 30px rgba(15,17,21,.08), inset 0 1px 0 rgba(255,255,255,.6);
  }
}

* { box-sizing: border-box; }

/* Modern League Table Container */
.cmp-league-table-container {
  max-width: 100%;
  width: 100%;
  margin: 42px auto;
  padding: 0 20px;
  font: 14.5px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 700px at 20% -10%, rgba(255,61,61,.06), transparent 60%),
              radial-gradient(1000px 600px at 110% 110%, rgba(255,179,71,.08), transparent 50%),
              var(--cmp-bg, #0f1115) !important;
  color: var(--cmp-text, #eaf0ff) !important;
  box-sizing: border-box;
}

/* Full-width league table for main content areas */
.cmp-league-table-container:not(.cmp-mini) {
  max-width: 1100px;
}

/* Mini league table for sidebars/widgets */
.cmp-league-table-container.cmp-mini {
  margin: 20px 0;
  padding: 0 10px;
}

/* Modern Header Section */
.header{
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  background: linear-gradient(180deg, rgba(255,61,61,.15), transparent 70%), var(--cmp-panel, #151922);
  border: 1px solid var(--cmp-border, #222a36);
  padding: 18px 22px; 
  border-radius: 18px; 
  box-shadow: var(--cmp-shadow, 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03));
}

.title{ 
  display:flex; 
  align-items:center; 
  gap:14px; 
}

.logo{
  width: 40px; 
  height: 40px; 
  border-radius: 12px; 
  background: radial-gradient(circle at 30% 30%, #fff, #ffd1d1 40%, #ff3d3d 42%, #a30e0e 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 6px 20px rgba(255,61,61,.25);
}

h1{ 
  font-size: 22px; 
  margin: 0; 
}

.sub{ 
  color: var(--cmp-muted, #7f8ca6); 
  font-size: 13px; 
  margin-top: 2px; 
}

.controls{ 
  display:flex; 
  gap:10px; 
  flex-wrap: wrap; 
}

.btn{
  appearance: none; 
  border: 1px solid var(--cmp-border, #222a36); 
  background: var(--cmp-chip, #1b2230); 
  color: var(--cmp-text, #eaf0ff);
  padding: 10px 12px; 
  border-radius: 12px; 
  font-weight: 600; 
  cursor: pointer; 
  transition: .2s ease;
}

.btn:focus-visible{ 
  outline: 2px solid var(--cmp-accent, #ff3d3d); 
  outline-offset: 2px; 
}

.btn:hover{ 
  transform: translateY(-1px); 
  box-shadow: 0 6px 18px rgba(0,0,0,.15); 
}

.legend{ 
  margin: 12px 4px 0; 
  color: var(--cmp-muted, #7f8ca6); 
  font-size: 12.5px; 
}

/* Modern Table Card */
.container .card,
div[class*="cmp"] .card,
.cmp-league-table-container .card{ 
  margin-top: 18px !important; 
  background: #151922 !important;
  background: var(--cmp-panel, #151922) !important; 
  border: 1px solid #222a36 !important;
  border: 1px solid var(--cmp-border, #222a36) !important; 
  border-radius: 18px !important; 
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03) !important;
  box-shadow: var(--cmp-shadow, 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03)) !important; 
  overflow: clip !important;
  width: 100% !important;
  max-width: none !important;
}

.table-wrap{ 
  overflow:auto; 
}

.container table,
div[class*="cmp"] table,
.cmp-league-table-container table{ 
  width: 100% !important; 
  border-collapse: collapse !important; 
  border-spacing: 0 !important; 
  min-width: 320px !important;
  font-family: inherit !important;
}

/* Full-size table minimum width */
.cmp-league-table-container:not(.cmp-mini) table {
  min-width: 820px !important;
}

/* Mini table responsive sizing */
.cmp-league-table-container.cmp-mini table {
  min-width: 280px !important;
  font-size: 12px !important;
}

.cmp-league-table-container.cmp-mini th,
.cmp-league-table-container.cmp-mini td {
  padding: 8px 6px !important;
  font-size: 11px !important;
}

.cmp-league-table-container.cmp-mini .header {
  padding: 12px 16px !important;
}

.cmp-league-table-container.cmp-mini h1 {
  font-size: 18px !important;
}

.container thead th,
div[class*="cmp"] thead th,
.cmp-league-table-container thead th{
  position: sticky !important; 
  top: 0 !important; 
  z-index: 2 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.03)), #151922 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.03)), var(--cmp-panel, #151922) !important;
  border-bottom: 1px solid #222a36 !important;
  border-bottom: 1px solid var(--cmp-border, #222a36) !important;
  color: #ffffff !important;
  font-weight: bold !important;
}

.container th, 
.container td,
div[class*="cmp"] th,
div[class*="cmp"] td,
.cmp-league-table-container th,
.cmp-league-table-container td{ 
  padding: 14px 12px !important; 
  text-align: center !important;
  color: #ffffff !important;
  font-weight: bold !important;
  border: none !important;
  background: transparent !important;
}

.container th:first-child, 
.container td:first-child,
div[class*="cmp"] th:first-child,
div[class*="cmp"] td:first-child,
.cmp-league-table-container th:first-child,
.cmp-league-table-container td:first-child{ 
  text-align: right !important; 
  width: 56px !important; 
}

.container th.team, 
.container td.team,
div[class*="cmp"] th.team,
div[class*="cmp"] td.team,
.cmp-league-table-container th.team,
.cmp-league-table-container td.team{ 
  text-align: left !important; 
}

.container tbody tr,
div[class*="cmp"] tbody tr,
.cmp-league-table-container tbody tr{ 
  background: #11151e !important;
  background: var(--cmp-row, #11151e) !important; 
}

.container tbody tr:nth-child(even),
div[class*="cmp"] tbody tr:nth-child(even),
.cmp-league-table-container tbody tr:nth-child(even){ 
  background: #121825 !important;
  background: var(--cmp-row-alt, #121825) !important; 
}

.container tbody tr:hover,
div[class*="cmp"] tbody tr:hover,
.cmp-league-table-container tbody tr:hover{ 
  background: linear-gradient(90deg, rgba(255,61,61,.06), transparent 25%), #121825 !important;
  background: linear-gradient(90deg, rgba(255,61,61,.06), transparent 25%), var(--cmp-row-alt, #121825) !important; 
}

.pos{ 
  font-variant-numeric: tabular-nums; 
  color: var(--cmp-muted, #7f8ca6); 
}

/* Team cell */
.club{ 
  display:flex; 
  align-items:center; 
  gap: 12px; 
}

.badge{ 
  width: 28px; 
  height: 28px; 
  border-radius: 8px; 
  display:grid; 
  place-items:center; 
  font-weight: 800; 
  font-size: 12px; 
  color:#fff; 
}

.badge.red{ 
  background: linear-gradient(180deg,#ff6767,#c01616); 
  box-shadow: 0 6px 18px rgba(255,61,61,.35); 
}

.badge.gold{ 
  background: linear-gradient(180deg,#ffc065,#b6730b); 
  box-shadow: 0 6px 18px rgba(255,179,71,.35); 
}

.badge.green{ 
  background: linear-gradient(180deg,#64dba5,#11965e); 
  box-shadow: 0 6px 18px rgba(31,190,122,.35); 
}

.club small{ 
  display:block; 
  color: var(--cmp-muted, #7f8ca6); 
  font-weight: 600; 
  margin-top: 2px; 
}

/* Number cells */
.num{ 
  font-variant-numeric: tabular-nums; 
  font-weight: 700; 
}

.pts{ 
  font-weight: 800; 
}

.delta{ 
  font-weight: 700; 
}

.delta.good{ 
  color: var(--cmp-ok, #1fbe7a); 
}

.delta.bad{ 
  color: var(--cmp-bad, #f05252); 
}

tfoot td{ 
  padding: 12px; 
  color: #ffffff; 
  font-size: 12.5px; 
  background: linear-gradient(0deg, rgba(255,255,255,.04), transparent); 
  border-top: 1px dashed var(--cmp-border, #222a36); 
  font-weight: bold;
}

.stats{ 
  display: flex; 
  flex-wrap: wrap; 
  gap: 8px; 
  justify-content: center;
}

.chip{ 
  background: rgba(255,255,255,0.1); 
  border: 1px solid rgba(255,255,255,0.2); 
  padding: 4px 8px; 
  border-radius: 6px; 
  font-weight: 600;
  color: #ffffff;
  font-size: 11px;
  white-space: nowrap;
}

.chip b{ 
  opacity: 1; 
  font-weight: 800; 
  margin-right: 4px; 
}

/* Mobile: horizontal scrollable table */
@media (max-width: 720px){
  .container .table-wrap,
  div[class*="cmp"] .table-wrap,
  .cmp-league-table-container .table-wrap{ 
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .container table,
  div[class*="cmp"] table,
  .cmp-league-table-container table{ 
    min-width: 320px !important;
    font-size: 12px !important;
  }
  
  .container th, 
  .container td,
  div[class*="cmp"] th,
  div[class*="cmp"] td,
  .cmp-league-table-container th,
  .cmp-league-table-container td{ 
    padding: 6px 4px !important;
    font-size: 12px !important;
  }
  
  .container th:first-child, 
  .container td:first-child,
  div[class*="cmp"] th:first-child,
  div[class*="cmp"] td:first-child,
  .cmp-league-table-container th:first-child,
  .cmp-league-table-container td:first-child{ 
    width: 20px !important;
    padding: 6px 2px !important;
  }
  
  .badge{ 
    width: 18px; 
    height: 18px;
    font-size: 9px;
  }
  
  /* Hide team names on mobile */
  .club div:not(.badge) {
    display: none;
  }
  
  /* Hide team names in mini tables - show only badges */
  .cmp-league-table-container.cmp-mini .club div:not(.badge) {
    display: none !important;
  }
  
  .club {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Hide OTW column on mobile */
  th:nth-child(5), td:nth-child(5) {
    display: none;
  }
  
  /* Optimized column widths for mobile */
  th, td {
    min-width: 22px;
    width: 22px;
  }
  
  th.team, td.team {
    min-width: 25px;
    width: 25px;
  }
  
  /* Specific column adjustments */
  th:nth-child(3), td:nth-child(3), /* P */
  th:nth-child(4), td:nth-child(4), /* W */
  th:nth-child(6), td:nth-child(6) { /* L */
    min-width: 20px;
    width: 20px;
  }
  
  /* PTS and GAP columns */
  th:nth-child(7), td:nth-child(7), /* PTS */
  th:nth-child(8), td:nth-child(8) { /* GAP */
    min-width: 22px;
    width: 22px;
  }
}

/* Hide mobile stats on desktop */
@media (min-width: 721px) {
  .mobile-stats {
    display: none !important;
  }
}

/* Tiny helper for column headers */
.th{ 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  gap:6px; 
  color: var(--cmp-muted, #7f8ca6); 
  font-weight: 800; 
  letter-spacing: .02em; 
  text-transform: uppercase; 
  font-size: 11px; 
}

.th .dot{ 
  width:6px; 
  height:6px; 
  border-radius:999px; 
  background: var(--cmp-muted, #7f8ca6); 
  opacity:.5; 
}

/* Table corner rounding */
table thead tr th:first-child{ 
  border-top-left-radius: 18px; 
}

table thead tr th:last-child{ 
  border-top-right-radius: 18px; 
}

/* Legacy compatibility - keeping some old classes for backward compatibility */
.cmp-no-data {
    padding: 30px;
    text-align: center;
    background: var(--cmp-panel, #151922);
    border-radius: 8px;
    color: var(--cmp-muted, #7f8ca6);
    font-size: 16px;
}