/* Import Roboto Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* --- COLOR PALETTE & VARIABLES --- */
:root {
  /* Official Philadelphia Eagles Brand Colors */
  --eagles-green: #004C54;        /* Midnight Green */
  --eagles-green-hover: #00363C;  /* Hover Green */
  --eagles-silver: #A5ACAF;       /* Silver Accent */
  
  /* Light Mode Theme Defaults */
  --bg-primary: #F4F6F8;
  --card-bg: #FFFFFF;
  --text-primary: #111827;
  --text-muted: #4B5563;
  --border-color: #E5E7EB;
  --input-bg: #FFFFFF;
  --input-border: #D1D5DB;
  
  /* Light Mode Accents */
  --accent-color: var(--eagles-green);
  --btn-bg: var(--eagles-green);
  --btn-hover: var(--eagles-green-hover);
  --btn-text: #FFFFFF;
  --focus-ring: rgba(0, 76, 84, 0.25);

  /* A punchier, unambiguously-green color for clickable team names -
     --accent-color is a dark teal, deliberately subdued for headings, and
     reads too close to plain text/black at a glance. This is a true,
     saturated green instead, distinct from the brand teal. */
  --team-link-color: #16A34A;
}

/* Dark Mode Overrides (Automatic System Preference) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #0F172A;        /* Slate 900 */
    --card-bg: #1E293B;          /* Slate 800 */
    --text-primary: #F8FAFC;      /* Slate 50 */
    --text-muted: #9CA3AF;        /* Gray 400 */
    --border-color: #334155;      /* Slate 700 */
    --input-bg: #0F172A;
    --input-border: #475569;
    
    /* Dark Mode High-Contrast Accents */
    --accent-color: #4ADE80;      /* Vibrant Green AAA */
    --btn-bg: #004C54;            /* Midnight Green Fill */
    --btn-hover: #006670;
    --btn-text: #FFFFFF;
    --focus-ring: rgba(74, 222, 128, 0.35);

    /* Already vibrant enough against the dark background - reuse as-is. */
    --team-link-color: #4ADE80;
  }
}

/* --- GLOBAL TYPOGRAPHY & BASE --- */
body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.2s ease, color 0.2s ease;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, .card-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  color: var(--text-primary);
}

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

/* Clickable team names in chooseTeam.php's picks matrix - the site's
   regular link/accent green is a dark, muted teal that didn't read as
   clearly different from plain text, so this uses a punchier, more
   saturated green instead, theme-aware via --team-link-color above. */
.team-name {
  color: var(--team-link-color);
}

.team-name:hover {
  color: var(--team-link-color);
  filter: brightness(0.85);
}

/* --- CARD LAYOUT --- */
.card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-header {
  background-color: var(--card-bg);
  border-bottom: 2px solid var(--accent-color);
  padding: 1.25rem;
}

.card-title {
  color: var(--accent-color);
}

.card-footer {
  background-color: var(--card-bg);
  border-top: 1px solid var(--border-color);
}

/* --- FORMS & INPUT GROUPS --- */
.form-control {
  font-weight: 300;
  background-color: var(--input-bg);
  color: var(--text-primary);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
}

/* The symmetric padding above overrides Bootstrap's .custom-select default,
   which reserves extra padding-right (1.75rem) so its dropdown-arrow icon
   doesn't sit on top of the option text - e.g. DataTables' "Show entries"
   selector, where the arrow was covering "25"/"50"/etc. Restore that
   reserved space specifically for .custom-select. */
.custom-select {
  padding-right: 1.75rem;
}

/* Bootstrap's .form-control sets a fixed height based on its own default
   (smaller) vertical padding - calc(1.5em + 0.75rem + 2px), i.e. 0.375rem
   top and bottom. The 0.6rem padding above is taller, which clips a
   <select>'s option text at the bottom of that fixed-height box.
   Overriding height (via auto, or a recalculated value) turned out to be
   unreliable on iOS - "Chrome" there is required to run on WebKit and
   renders <select> as a native OS picker control that doesn't fully honor
   custom height/padding combinations the way a normal box does. Instead,
   just don't oversize the padding for <select> in the first place - keep
   it at Bootstrap's own default, which its built-in height already fits
   correctly on every platform. Excludes .custom-select (e.g. DataTables'
   "Show entries" dropdown), which is sized correctly already. */
select.form-control:not(.custom-select) {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.form-control:focus {
  background-color: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

.input-group-text {
  background-color: var(--input-bg);
  color: var(--accent-color);
  border: 1px solid var(--input-border);
  border-right: none;
}

/* --- BUTTONS --- */
.btn-primary {
  background-color: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--btn-text);
  font-weight: 400;
  padding: 0.65rem 1.25rem;
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
}

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active {
  background-color: var(--btn-hover);
  border-color: var(--btn-hover);
  color: #FFFFFF;
  box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

/* --- LINKS --- */
a {
  color: var(--accent-color);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

/* --- NAVBAR OVERRIDES --- */
.navbar {
  background-color: var(--eagles-green);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* --- CHECKBOX STYLING --- */
.unpaid-checkbox, #selectAllUnpaid {
  width: 22px;
  height: 22px;
  cursor: pointer;
  vertical-align: middle;
  accent-color: var(--accent-color);
}

/* --- PAID TABLE HEADER --- */
.header-paid-table {
  background-color: var(--btn-bg);
  border-bottom: 2px solid var(--accent-color);
}

/* --- TABLE THEMING (Adaptive to theme variables via elevated specificity) --- */

table.table,
table.table td,
table.table th {
  color: var(--text-primary);
  border-color: var(--border-color);
}

table.table thead th {
  background-color: var(--card-bg);
  color: var(--text-primary);
  border-bottom: 2px solid var(--border-color);
}

table.table td, 
table.table th {
  border-top: 1px solid var(--border-color);
}

/* Light Mode Hover */
table.table-hover tbody tr:hover {
  color: var(--text-primary);
  background-color: rgba(0, 0, 0, 0.04);
}

/* Dark Mode Hover Adjustment */
@media (prefers-color-scheme: dark) {
  table.table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.07);
  }
}

/* --- DATATABLES CONTROLS & PAGINATION --- */

.dataTables_wrapper {
  color: var(--text-primary);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  color: var(--text-muted);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background-color: var(--input-bg);
  color: var(--text-primary);
  border: 1px solid var(--input-border);
  border-radius: 4px;
  padding: 4px 8px;
}

/* This selector's specificity beats the .custom-select rule above, so its
   8px right padding was winning and squeezing the dropdown-arrow icon on
   top of "25"/"50"/etc in the length menu. Restore room for that arrow
   here specifically, without touching the filter <input> (no icon there,
   doesn't need it). */
.dataTables_wrapper .dataTables_length select {
  padding-right: 1.75rem;
}

/* Pagination Buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  border-radius: 4px;
  margin: 0 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--accent-color);
  color: var(--btn-text);
  border-color: var(--accent-color);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--btn-hover);
  color: var(--btn-text);
}