/* =========================
   Theme Tokens
   ========================= */
:root{
  --bg:#0b1428;        /* page background (deep blue) */
  --bg2:#0b1c36;       /* header/footer */
  --panel:#0f1b31;     /* DARK card/panel */
  --text:#e6f0ff;      /* primary text on dark */
  --muted:#9fb3c8;     /* secondary text on dark */
  --ink:#111827;       /* text on light surfaces (fallback) */
  --ink-muted:#6b7280; /* subtle text on light */
  --line:#e5e7eb;      /* borders on light */
  --line-dark:#1e293b; /* subtle lines on dark */
  --accent:#2563eb;    /* action blue */
  --accent-hover:#1d4ed8;

  /* Dark table rows */
  --row:#16233f;
  --row-alt:#12243f;
  --row-hover:#1b2a52;
}

/* =========================
   Reset / Base
   ========================= */
*{margin:0;padding:0;box-sizing:border-box}

html,body{
  width:100%;
  min-height:100vh;
  background:var(--bg) !important;
  color:var(--text);
  overflow-x:hidden;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* Flex layout for sticky footer */
body{ display:flex; flex-direction:column; }
main{ flex:1; width:100%; }

/* =========================
   Winners Page Layout (CARD NOW DARK)
   ========================= */
.winners-container{
  max-width:1200px;
  margin:32px auto;
  padding:16px;
  background:var(--panel);
  color:var(--text);                 /* use light text on dark card */
  border:1px solid var(--line-dark);
  border-radius:12px;
  box-shadow:0 10px 30px rgba(2,6,23,.35);
}

.winners-header{
  text-align:center;
  margin:4px 8px 16px;
}
.winners-header .main-title{
  font-size:32px;
  font-weight:800;
  color:var(--text);
  margin:0 0 4px 0;
}
.winners-header .subtitle{
  font-size:18px;
  color:var(--muted);
  margin:0;
}

h2{
  color:var(--text);
  text-align:center;
  margin:16px 0;
  font-weight:800;
}

/* =========================
   Table (Dark style)
   ========================= */
.table-container{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  background:transparent;
  border-radius:10px;
  border:1px solid var(--line-dark);
}

.winners-table{
  width:100%;
  border-collapse:collapse;
  background:var(--panel);
  color:var(--text);
  table-layout:auto;
}

.winners-table th{
  background:#1a2a4a;               /* darker header band */
  color:var(--text);
  text-transform:uppercase;
  letter-spacing:.02em;
  font-weight:800;
  padding:12px 14px;
  border-bottom:1px solid var(--line-dark);
  position:sticky;
  top:0;
  z-index:1;
}

.winners-table td{
  padding:12px 14px;
  text-align:left;
  border-bottom:1px solid var(--line-dark);
}

/* Alternating + hover on dark */
.winners-table tr:nth-child(odd){ background:var(--row); }
.winners-table tr:nth-child(even){ background:var(--row-alt); }
.winners-table tr:hover{ background:var(--row-hover); }

/* =========================
   DataTables Controls (Dark)
   ========================= */
.dataTables_wrapper{ color:var(--muted); }

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate{
  color:var(--muted) !important;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_paginate a{
  color:var(--muted) !important;
  font-weight:500;
}

/* Inputs/dropdowns on dark */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input{
  background:#12243f;
  color:var(--text);
  border:1px solid var(--line-dark);
  border-radius:8px;
  padding:6px 10px;
  outline:none;
}

/* Pagination buttons */
.dataTables_wrapper .dataTables_paginate a,
.dataTables_wrapper .dataTables_paginate .paginate_button{
  padding:6px 10px;
  background:#12243f;
  color:var(--text) !important;
  border:1px solid var(--line-dark);
  border-radius:8px;
  margin:0 3px;
  text-decoration:none;
  font-weight:700;
  transition:background .2s,color .2s,border-color .2s;
}
.dataTables_wrapper .dataTables_paginate a:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:#1b2a52;
  border-color:#2b3b6b;
}

/* Active page */
.dataTables_wrapper .dataTables_paginate .current{
  background:var(--accent) !important;
  color:#fff !important;
  border-color:var(--accent) !important;
  border-radius:8px;
}

/* Disabled */
.dataTables_wrapper .dataTables_paginate .disabled{
  background:#0f1b31 !important;
  color:#7b8aa8 !important;
  border:1px solid var(--line-dark) !important;
  cursor:not-allowed !important;
}

/* =========================
   Header / Footer
   ========================= */
header, footer{
  background:var(--bg2);
  color:var(--text);
  text-align:center;
  padding:12px 16px;
  width:100%;
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
}

/* Footer NOT bold/zoomed */
footer{
  margin-top:auto;
  flex-shrink:0;
  font-weight:400;
  font-size:14px;
  line-height:1.4;
  box-shadow:0 -1px 0 rgba(0,0,0,.15);
}
/* DARK DROPDOWNS (global + DataTables) */
select,
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper select,
.dt-container .dt-length select,
.dt-container select,
select.dt-input {
  background-color: #12243f !important;   /* dark box */
  color: #e6f0ff !important;              /* light text */
  border: 1px solid #1e293b !important;   /* subtle dark border */
  border-radius: 8px;
  padding: 6px 36px 6px 10px;             /* space for custom arrow */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* custom chevron so we don't get a white native arrow */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23e6f0ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}

select:focus,
.dataTables_wrapper select:focus {
  outline: 2px solid #2563eb;             /* accent focus ring */
  outline-offset: 0;
}

/* Dropdown list panel colors (supported browsers) */
.dataTables_wrapper select option,
select option {
  background-color: #0f1b31;              /* dark list */
  color: #e6f0ff;
}

/* Disabled state */
select:disabled {
  background-color: #0f1b31 !important;
  color: #7b8aa8 !important;
  border-color: #1e293b !important;
}


/* =========================
   Responsive
   ========================= */
@media (max-width:1024px){
  .winners-container{ margin:24px auto; padding:12px; }
}
@media (max-width:768px){
  .winners-header .main-title{ font-size:26px; }
  .winners-header .subtitle{ font-size:16px; }
  .winners-table th, .winners-table td{ padding:10px; }
}
@media (max-width:480px){
  .winners-container{ padding:10px; }
  .winners-table th, .winners-table td{ padding:8px; font-size:13px; }
}