/*
  Style Guide (Roman Urdu)
  - Neeche variables (colors, spacing) ko change karke poori site ka look jaldi badal sakte hain.
  - Mobile/responsive changes @media blocks me karein.
  - Font sizes aur spacing adjust karne ke liye sirf related section ke andar values badlein.
  - Yellow totals aur green theme common branding ke liye rakhe gaye hain; zarurat ho to --yellow / --green update karein.
*/

:root {
  --green: #00bcd4;
  --ink: #111111;
  --muted: #666;
  --bg: #fff;
  --yellow: #ffcc00;
  --light-green: #e8f5e9;
  --dark-green: #00bcd4;
  --light-gray: #f9f9f9;
  --dark-gray: #333;
  /* Table sizing variables (Desktop defaults) */
  --tbl-font-size: 10px;          /* cell font-size */
  --tbl-cell-pad-y: 10px;         /* cell padding top/bottom */
  --tbl-cell-pad-x: 5px;          /* cell padding left/right */
  --thead-height: 40px;           /* table header row height */
  /* Column width percentages (player name remains auto) */
  --col-rank-pct: 4%;
  --col-photo-pct: 6%;
  --col-flight-pct: 8%;
  --col-total-pct: 8%;
  --col-pigeon-pct: 6%;
  --col-day-pct: 8%;
  /* Optional minimum for player column (set to 0px for pure auto) */
  --col-player-min-w: 0px;
}

/* Winners Bar (Daily view) */
/* Roman Urdu: Daily view me winners cards ki grid yahan control hoti hai. Columns/gap yahan se badalain. */
.winners-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin: 10px 0 16px;
}

.winner-card {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.winner-title {
  background: var(--green);
  color: #fff;
  font-family: 'Noto Nastaliq Urdu', serif;
  font-weight: 700;
  padding: 8px 12px;
  text-align: center;
}

.winner-body {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.winner-avatar-wrap {
  width: 30px;
  height: 30px;
}

.winner-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--green);
  display: block;
}

.winner-avatar.placeholder {
  background: #f1f1f1;
  border: 2px dashed #ccc;
}

.winner-meta {
  display: flex;
  flex-direction: column;
}

.winner-player {
  font-family: 'Noto Nastaliq Urdu', serif;
  font-size: 16px;
}

/* Podium Bar (Totals view) */
/* Roman Urdu: Totals view ka Top-3 podium layout. Width, artwork size, aur spacing yahan set hain. */
.podium-bar {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  justify-content: center;
  gap: 16px 1px;
  margin: 30px auto 16px;
  align-items: center;
  justify-items: center;
  width: max-content;
}

.podium-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 0;
  box-shadow: none;
  width: 100%;
}

/* Artwork area (wings + ribbon banner + avatar) */
.podium-art {
  position: relative;
  width: 180px;
  height: 120px;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
}

.podium-banner {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 50px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.podium-avatar-wrap {
  position: absolute;
  bottom: 20px;
  left: 47.5%;
  transform: translateX(-20px);
  width: 50px;
  height: 50px;
}

.podium-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #0399f7b3;
  /* red ring like mock */
  background: #fff;
}

.podium-avatar.placeholder {
  border: 2px solid #f99601;
}

/* Rank-specific images (relative to this CSS file) */
.podium-card.rank-1 .podium-art {
  background-image: url('../../Images/first_bg.png');
}

.podium-card.rank-2 .podium-art {
  background-image: url('../../Images/seccond_bg.png');
}

.podium-card.rank-3 .podium-art {
  background-image: url('../../Images/third_bg.png');
}

.podium-card.rank-1 .podium-banner {
  background-image: url('../../Images/first_banner.png');
}

.podium-card.rank-2 .podium-banner {
  background-image: url('../../Images/second_banner.png');
}

.podium-card.rank-3 .podium-banner {
  background-image: url('../../Images/third_banner.png');
}

.podium-card.podium-dm .podium-art {
  background-image: none;
}

.podium-card.podium-dm .podium-banner {
  background: linear-gradient(180deg, #b2ebf2, #00bcd4);
  border-radius: 20px;
}

/* DM card spans full width below top-3 */
.podium-card.podium-dm {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

/* DM artwork fallback (no wings): soft gradient panel */
.podium-card.podium-dm .podium-art {
  background-image: none !important;
  background: radial-gradient(ellipse at center, rgba(0, 188, 212, 0.18), rgba(0, 188, 212, 0) 62%),
    linear-gradient(180deg, #f7fafc, #e9f1f6);
  border-radius: 14px;
}

/* Info card below artwork */
.podium-info {
  width: 70%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  padding: 12px 14px;
  text-align: center;
  position: relative;
}

.podium-card.rank-1 .podium-info {
  border-bottom: 4px solid #ffc107;
}

.podium-card.rank-2 .podium-info {
  border-bottom: 4px solid #bdbdbd;
}

.podium-card.rank-3 .podium-info {
  border-bottom: 4px solid #cd7f32;
}

.podium-card.podium-dm .podium-info {
  border-bottom: 4px solid #00bcd4;
}

.podium-name {
  font-family: 'Noto Nastaliq Urdu', serif;
  font-size: 11px;
}

.podium-time {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #333;
}

/* Gentle float animations for top-3 */
@keyframes podiumFloat {
  0% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-6px) rotate(0.25deg);
  }

  100% {
    transform: translateY(0) rotate(0deg);
  }
}

.podium-card.rank-1 .podium-art {
  animation: podiumFloat 3s ease-in-out infinite;
  will-change: transform;
}

.podium-card.rank-2 .podium-art {
  animation: podiumFloat 3.6s ease-in-out infinite;
  will-change: transform;
}

.podium-card.rank-3 .podium-art {
  animation: podiumFloat 3.2s ease-in-out infinite;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {

  .podium-card.rank-1 .podium-art,
  .podium-card.rank-2 .podium-art,
  .podium-card.rank-3 .podium-art {
    animation: none;
  }
}

/* DM horizontal panel layout */
.podium-card.podium-dm .podium-art {
  display: none;
}

.podium-card.podium-dm .podium-info {
  display: none;
}

/* DM as winner-card look & placement */
.dm-card {
  grid-column: 1 / -1;
  width: 600px;
  margin: 0 auto;
}

.dm-card .winner-title {
  background: #00bcd4;
  font-weight: 100;
  font-size: 16px;
}

.dm-card .winner-time {
  font-weight: 600;
  font-size: 13px;
}

/* Desktop DM text/avatar sizing */
.dm-card .winner-player {
  font-size: 12px;
}

.dm-card .winner-body {
  gap: 10px;
  padding: 10px 12px;
}

.dm-card .winner-avatar-wrap {
  width: 32px;
  height: 32px;
}

.dm-card .winner-avatar {
  width: 32px;
  height: 32px;
}




* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
}

/* Urdu text for data cells (keep headers separate) */
/* Roman Urdu: Data cells me Urdu font lagana ho to ye class use hoti hai. Size yahan se badlein. */
.player-cell,
.urdu {
  font-family: 'Noto Nastaliq Urdu', serif;
  font-size: 14px;
}

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

.row {
  display: flex;
  gap: 12px;
}

.between {
  justify-content: space-between;
}

/* Align helper */
.align-center {
  align-items: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
  gap: 14px;
  justify-content: center;
}

.card,
.tile {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 14px;
  background: #fff;
  text-align: center;
}

/* Clickable card link */
.tile-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease, transform 0.1s ease, border-color 0.2s ease;
}

.tile-link:hover {
  text-decoration: none;
  border-color: var(--green);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.tile .right {
  display: flex;
  justify-content: flex-end;
}

.tile h3 {
  margin: 8px 0;
  color: var(--green);
  font-family: 'Noto Nastaliq Urdu', serif;
  font-size: 18px;
}

.badgeActive {
  color: #0b7a1f;
  background: #eaf8ed;
  border-color: #cfe9d3;
}

.badgeClosed {
  color: #b00020;
  background: #fde7ea;
  border-color: #f6c7d0;
}

.tile h3 {
  margin: 8px 0;
  color: var(--green);
}

.tile p {
  margin: 0;
  color: #666;
  font-size: 11px;
  font-family: 'Noto Nastaliq Urdu', serif;
  min-height: 36px;
}

.btn {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--green);
  color: var(--green);
  text-decoration: none;
  font-weight: 700;
}

.btn:hover {
  background: var(--green);
  color: #fff;
}

.empty {
  color: #777;
}

/* Tabs */
/* Roman Urdu: Upar day tabs aur Total button ka style. Color/rounded-pill yahan change karein. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 12px 0;
  justify-content: center;
  align-items: center;
}

.tab {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 9999px;
  border: 1px solid #00bcd4;
  font-weight: 700;
  font-size: 11px;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  color: #00bcd4;
  background-color: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.tab.active {
  background-color: #00bcd4;
  color: white;
}

.tab:hover:not(.active) {
  background-color: #f0f8f1;
  transform: translateY(-1px);
}

/* Center and style titles/descriptions */
.title {
  text-align: center;
}

.muted {
  text-align: center;
  color: var(--muted);
}

/* Tournament name/description in Nastaliq Urdu */
#tName,
#tDesc {
  font-family: 'Noto Nastaliq Urdu', serif;
}

/* Tournament Tables Container */
/* Roman Urdu: Tables ke wrapper ke margins waghera yahan manage hote hain. */
.tournament-tables {
  margin-bottom: 2rem;
}

.table-responsive {
  overflow-x: auto;
  width: 100%;
}

/* Table Styling */
/* Roman Urdu: Table ki base styling (width, border, layout). Fixed layout rakha gaya hai taake columns align rahain. */
.tournament-table {
  width: auto;
  min-width: 100%;
  border-collapse: collapse;
  border: 1px solid #e0e0e0;
  table-layout: auto;
}

/* Table Cell Styling */
/* Roman Urdu: Table ke header/cell ka padding, size aur border. Font-size barhana/ghatana ho to yahan se. */
.tournament-table th,
.tournament-table td {
  padding: var(--tbl-cell-pad-y) var(--tbl-cell-pad-x);
  text-align: center;
  vertical-align: middle;
  border: 1px solid #e0e0e0;
  font-size: var(--tbl-font-size);
}

/* Column specific styling */
/* Roman Urdu: Har column ki width/pehchan yahan set hai (photo, flight-time, total waghera). */
.photo-col { width: var(--col-photo-pct); }

.flight-time-col { width: var(--col-flight-pct); font-family: 'Poppins', sans-serif; font-size: 14px; }

/* Make the entire Flight Time column white (header and cells) */
#dailyTable thead th.flight-time-col {
  background-color: #fff !important;
  color: var(--ink) !important;
  font-family: 'Noto Nastaliq Urdu', serif !important;
}

#dailyTable tbody td.flight-time-cell {
  background-color: #fff !important;
}

.flight-time-cell {
  color: #d32f2f;
  /* Red color for default start time */
  font-weight: bold;
  font-family: 'Poppins', sans-serif;
}

/* Column Styling */
.rank-col { width: var(--col-rank-pct); background-color: #696969; color: white; }

.player-col { width: auto; min-width: var(--col-player-min-w); text-align: center; background-color: #f9f9f9; }

.pigeon-col { background-color: #e8f5e9; width: var(--col-pigeon-pct); }

.day-col { background-color: #e8f5e9; width: var(--col-day-pct); }

.total-col { width: var(--col-total-pct); background-color: #ffcc00; font-weight: bold; }

/* Cell Styling */
td.rank-cell {
  background-color: transparent;
  color: inherit;
  font-weight: bold;
}

td.player-cell {
  background-color: #f9f9f9;
}

td.pigeon-cell {
  background-color: #e8f5e9;
  position: relative;
  font-family: 'Poppins', sans-serif;
}

/* Tooltip for flight duration */
td.pigeon-cell[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 10;
}

td.day-cell {
  background-color: #e8f5e9;
  font-family: 'Poppins', sans-serif;
}

td.total-cell {
  background-color: #ffcc00 !important;
  font-weight: bold;
  font-family: 'Poppins', sans-serif;
}

/* Zebra Striping across entire row (exclude total cells) */
/* Roman Urdu: Rows me alternate background colors. Yahan se colors change karke readability adjust kar sakte hain. */
.tournament-table tbody tr:nth-child(odd) td:not(.total-cell) {
  background-color: #eaf8ed !important;
  /* light green */
}

.tournament-table tbody tr:nth-child(even) td:not(.total-cell) {
  background-color: #ffeef4 !important;
  /* light pink */
}

/* Totals table: pigeon column background forced white */
#totalTable thead th.pigeon-col {
  background-color: #fff !important;
  color: var(--ink) !important;
}

#totalTable tbody tr td.pigeon-cell {
  background-color: #fff !important;
}

/* Header Styling */
/* Roman Urdu: Tables ke header (thead) ko dark/white text dene ke liye strong overrides. */
.tournament-table thead tr { background-color: #0000009c !important; color: white !important; font-weight: bold; height: var(--thead-height); }

.tournament-table thead th {
  background-color: #00000070 !important;
  color: white !important;
}

/* Pigeon and Day column headers in Poppins */
.tournament-table thead th.pigeon-col {
  font-family: 'Poppins', sans-serif;
}

.tournament-table thead th.day-col {
  font-family: 'Poppins', sans-serif;
}

/* Photo column forced white bg */
.tournament-table thead th.photo-col {
  background-color: #fff !important;
  color: var(--ink) !important;
}

.tournament-table tbody tr td.photo-cell {
  background-color: #fff !important;
}

/* Total column headers in yellow */
.tournament-table thead th.total-col {
  background-color: #ffcc00 !important;
  color: #111 !important;
}

/* Make first column header (rank) non-black */
.tournament-table thead th.rank-col {
  background-color: #f9f9f9 !important;
  color: #111 !important;
}

/* Only the 'Name' column header should use Poppins */
.tournament-table thead th.player-col {
  font-family: 'Poppins', sans-serif;
}

/* Player Avatar */
/* Roman Urdu: Player aur winner avatars ka size/border. Circle ka size yahan badlein. */
.player-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--green);
  display: block;
  margin: 0 auto;
}

.player-avatar.placeholder,
.winner-avatar.placeholder,
.podium-avatar.placeholder {
  background-color: #eceff1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 20c0-4 4-6 8-6s8 2 8 6'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60% 60%;
}

td.photo-cell {
  background-color: #f9f9f9;
}

/* Loading and Error States */
/* Roman Urdu: Loading aur error messages ki appearance. Rang aur padding yahan se set karein. */
.loading {
  text-align: center;
  padding: 20px;
  color: #777;
}

.error {
  color: #d32f2f;
  font-weight: bold;
}

.error-message {
  background-color: #ffebee;
  color: #d32f2f;
  padding: 10px 15px;
  margin: 10px 0;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
}

/* Footer */
/* Roman Urdu: Neeche wala footer area. Background, text color aur spacing yahan se. */
.site-footer {
  background: var(--dark-green);
  color: #fff;
  margin-top: 40px;
  padding: 20px 0;
  text-align: center;
  font-size: 13px;
}

.site-footer a {
  color: #fff;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

/* Header */
/* Roman Urdu: Top fixed header (brand, nav). Shadow/border aur spacing yahan control hota hai. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid #eee;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 10px 0;
}

.site-header .brand {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--green);
  text-decoration: none;
  letter-spacing: 0.3px;
}

/* Brand logo image aligned with text */
.brand-logo {
  height: 28px;
  width: auto;
  vertical-align: middle;
  margin-right: 8px;
}

.nav a {
  font-family: 'Poppins', sans-serif;
  padding: 8px 12px;
  border-radius: 9999px;
  border: 1px solid transparent;
  color: var(--dark-gray);
  text-decoration: none;
  transition: all 0.2s ease;
}

.nav a:hover {
  background: #f0f8f1;
  color: var(--green);
  border-color: var(--green);
}

/* Blink effect for newly added time cells (2 min window) - light red tint */
/* Roman Urdu: Naye times aane par highlight/blink effect. Agar distract karta ho to animation yahan se band karein. */
@keyframes blinkTint {
  0% {
    box-shadow: inset 0 0 0 9999px rgba(0, 174, 255, 0.432);
  }

  50% {
    box-shadow: inset 0 0 0 9999px rgba(0, 162, 255, 0.804);
  }

  100% {
    box-shadow: inset 0 0 0 9999px rgba(0, 153, 255, 0.989);
  }
}

#dailyTable tbody td.recent-blink {
  position: relative;
  animation: blinkTint 400ms steps(1, end) infinite !important;
  will-change: box-shadow;
}

/* Strong overrides to ensure TOTAL columns are yellow */
#dailyTable thead th.total-col,
#totalTable thead th.total-col {
  background-color: #ffcc00 !important;
  color: #111 !important;
}

#dailyTable tbody td.total-cell,
#totalTable tbody td.total-cell {
  background-color: #ffcc00 !important;
  color: #111 !important;
}

/* FINAL override: full header rows black with white text (both tables) */
#dailyTable thead tr,
#totalTable thead tr {
  background-color: #000 !important;
  color: #fff !important;
}

#dailyTable thead tr th,
#totalTable thead tr th {
  background-color: #000 !important;
  color: #fff !important;
}

/* Absolute final overrides: cover thead element and specific header classes */
#dailyTable thead,
#totalTable thead,
#dailyTable thead tr,
#totalTable thead tr,
#dailyTable thead tr th,
#totalTable thead tr th,
#dailyTable thead tr th.photo-col,
#totalTable thead tr th.photo-col,
#dailyTable thead tr th.pigeon-col,
#totalTable thead tr th.pigeon-col,
#dailyTable thead tr th.total-col,
#totalTable thead tr th.total-col,
#dailyTable thead tr th.flight-time-col,
#totalTable thead tr th.flight-time-col {
  background-color: #000 !important;
  color: #fff !important;
}

/* Winners Bar (Daily view) */
.winners-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin: 10px 0 16px;
}

.winner-card {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.winner-title {
  background: var(--green);
  color: #fff;
  font-family: 'Noto Nastaliq Urdu', serif;
  font-weight: 700;
  padding: 8px 12px;
  text-align: center;
}

.winner-body {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.winner-avatar-wrap {
  width: 48px;
  height: 48px;
}

.winner-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--green);
  display: block;
}

.winner-avatar.placeholder {
  border: 2px solid #cfd8dc;
}

.winner-meta {
  display: flex;
  flex-direction: column;
}

.winner-player {
  font-family: 'Noto Nastaliq Urdu', serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
}