@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* --- Base Styles --- */
body {
    /* Use a dark background similar to the logo */
    background-color: #1a2a45; /* Adjust hex code as needed */
    /* Set default text color to contrast with dark background */
    color: #d8d8d8; /* Light grey/silver */
    font-family: 'Inter', sans-serif; /* <-- Add this line */
    transition: background-color 0.3s ease, color 0.3s ease;
  }

body.light-mode {
    background-color: #f8f9fa;
    color: #212529;
}

body.light-mode a {
    color: #0d6efd;
}

body.light-mode a:hover {
    color: #0a58ca;
}

body.light-mode .navbar.bg-primary {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6;
}

body.light-mode .navbar .nav-link {
    color: rgba(0, 0, 0, 0.85) !important;
}

body.light-mode .navbar .nav-link:hover {
    color: rgba(0, 0, 0, 1) !important;
}

body.light-mode .form-check-label {
    color: rgba(0, 0, 0, 0.85) !important;
}
  
  /* Ensure links are visible - maybe white or light grey */
  a {
    color: #ffffff;
  }
  a:hover {
    color: #cccccc; /* Slightly dimmer on hover */
  }
  
  /* --- Navbar Styling --- */
  /* Override the default primary background color used by Materia's .bg-primary */
  /* Use !important cautiously, only if needed to force override */
  .navbar.bg-primary {
     background-color: #0a192f !important; /* Darkest blue from logo */
  }
  
  /* Optional Navbar link overrides (usually navbar-dark handles this) */
  /* .navbar-dark .navbar-nav .nav-link {
       color: rgba(255, 255, 255, 0.85);
     }
     .navbar-dark .navbar-nav .nav-link:hover,
     .navbar-dark .navbar-nav .nav-link:focus {
       color: #ffffff;
     }
     .navbar-dark .navbar-brand {
       color: #ffffff;
     } */
  
  
  /* --- Banner Background --- */
  /* Define background colour for the banner section on home.html */
  .bg-dark-blue {
    background-color: #0a192f; /* Very dark navy blue - adjust if needed */
  }
  
  
  /* --- Card Styling --- */
  .card {
    background-color: #2a3a55; /* Example dark background for cards */
    border: 1px solid #445577; /* Example subtle border for cards */
    color: #d8d8d8; /* Set default text colour for card content to light grey */
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }
  
  body.light-mode .card {
      background-color: #fff;
      border-color: #dee2e6;
      color: inherit;
  }
  
  /* Ensure main paragraph text inside cards is light */
  .card .card-text {
     color: #d8d8d8; /* Light grey */
  }
  
  body.light-mode .card .card-text {
     color: #495057; /* Darker gray for better contrast in light mode */
  }
  
  /* Make card titles white */
  .card .card-title,
  .card .h5 { /* Target h5 if used for titles */
     color: #ffffff; /* White */
  }
  
  /* Ensure all headings inside cards in light mode are dark */
  body.light-mode .card h1,
  body.light-mode .card h2,
  body.light-mode .card h3,
  body.light-mode .card h4,
  body.light-mode .card h5,
  body.light-mode .card h6 {
      color: #212529;
  }

  body.light-mode .card .card-title a,
  body.light-mode .card .h5 a {
      color: #212529; /* Dark gray for title links in light mode */
  }
  
  /* Ensure links within card titles/subtitles are white and styled appropriately */
  .card .card-title a,
  .card .h5 a,
  .card .card-subtitle a { /* Target subtitle links like in news card */
     color: #ffffff;
     text-decoration: none; /* Optional: remove underline */
  }
  .card .card-title a:hover,
  .card .h5 a:hover,
  .card .card-subtitle a:hover {
     color: #cccccc; /* Slightly dimmer on hover */
     text-decoration: underline; /* Optional: add underline on hover */
  }
  
body.light-mode .card .card-subtitle a {
    color: #212529; /* Dark gray for subtitle links in light mode */
}
  
  /* --- Button Styling (Example for primary buttons, adjust as needed) --- */
  .btn-primary {
    /* Using standard Bootstrap Blue for contrast, adjust if desired */
     background-color: #0d6efd;
     border-color: #0d6efd;
     color: #ffffff;
  }
  .btn-primary:hover {
     background-color: #0b5ed7;
     border-color: #0a58ca;
     color: #ffffff;
  }
  
  body.light-mode .btn-primary {
      background-color: #0d6efd;
      border-color: #0d6efd;
      color: #ffffff;
  }
  
  body.light-mode .btn-primary:hover {
      background-color: #0a58ca;
      border-color: #084298;
      color: #ffffff;
  }
  
/* Fix button outlines in light mode */
.btn-outline-primary {
    border-color: #0d6efd;
    color: #0d6efd;
}

body.light-mode .btn-outline-primary {
    border-color: #0d6efd;
    color: #0d6efd;
}

body.light-mode .btn-outline-primary:hover {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #ffffff;
}

/* Define secondary button styling for .btn-secondary, .btn-info and .btn-warning */
.btn-secondary, .btn-info, .btn-warning {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.btn-secondary:hover, .btn-info:hover, .btn-warning:hover {
    background-color: #5a6268;
    border-color: #545b62;
    color: #fff;
}

/* Light mode: preserve secondary button styles */
body.light-mode .btn-secondary, 
body.light-mode .btn-info, 
body.light-mode .btn-warning {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

body.light-mode .btn-secondary:hover, 
body.light-mode .btn-info:hover, 
body.light-mode .btn-warning:hover {
    background-color: #5a6268;
    border-color: #545b62;
    color: #fff;
}
/* --- Table Styling for Dark Theme (Revised with !important) --- */

/* Set default text color for tables */
.table {
    color: #d8d8d8 !important; /* Light grey text */
    border-color: #445577 !important; /* Ensure base border color is dark */
  }
  
  /* Style table headers */
  .table > thead > tr > th {
    background-color: #2a3a55 !important; /* Match card background or slightly different */
    color: #ffffff !important; /* White text for headers */
    border-color: #445577 !important;
  }

  body.light-mode .table > thead > tr > th {
    color: #000000 !important;
  }
  
  /* Style regular table cells */
  .table > :not(caption) > * > * {
    background-color: #1f2a40 !important; /* Slightly different dark shade for cells */
    color: #d8d8d8 !important; /* Ensure cell text is light */
    border-color: #445577 !important;
  }
  
  body.light-mode .table > :not(caption) > * > * {
      background-color: #ffffff !important;
      color: #212529 !important;
  }
  
  /* Style striped rows (if using .table-striped) */
  /* Target the cell background within striped rows */
  .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #24314a !important; /* Slightly different dark shade for the stripes */
    color: #d8d8d8 !important; /* Ensure text colour remains light */
  }
  
  body.light-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
      background-color: #f8f9fa !important;
      color: #000000 !important;
      font-weight: 500;
  }
  /* Override border colors for .table-bordered */
  .table-bordered th,
  .table-bordered td {
      border-color: #445577 !important;
  }

  .scoring-table {
    max-width: 700px; /* Adjust this pixel value as desired */
    margin-left: auto;
    margin-right: auto;
  }

  #rules-content p,
  #rules-content li,
  #rules-content td,
  #rules-content th {
    line-height: 1.75;
  }

  /* --- jquery-bs-calendar Styling --- */

/* Container for the calendar */
#calendar {
    color: #d8d8d8; /* Default light text colour from your body style */
    /* Adjust max-width if needed, or let it fill container */
    max-width: 900px; /* Example: Limit width */
    margin-left: auto;
    margin-right: auto;
}

/* Calendar Header (Month/Year, Prev/Next Buttons) */
#calendar .calendar-header {
    background-color: #2a3a55; /* Match card background */
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #445577; /* Match card border */
    border-radius: 0.375rem 0.375rem 0 0; /* Match card header rounding */
    display: flex; /* Use flex for alignment */
    justify-content: space-between;
    align-items: center;
}

#calendar .calendar-header h4 {
    color: #ffffff; /* White title */
    margin-bottom: 0;
    font-size: 1.1rem;
}

/* Style Prev/Next Buttons - Try inheriting existing button styles */
#calendar .calendar-header .btn {
    /* Assuming your .btn-primary or .btn-secondary styles in custom.css look good */
    /* Or add specific overrides if needed */
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem;
    color: #ffffff;
    background-color: #0d6efd; /* Example: Use Bootstrap primary blue */
    border-color: #0d6efd;
}
#calendar .calendar-header .btn:hover {
     background-color: #0b5ed7;
     border-color: #0a58ca;
}


/* Day Headers (Sun, Mon, Tue...) - Style like table headers */
#calendar table thead th {
    background-color: #2a3a55 !important; /* Match existing dark table header */
    color: #ffffff !important;
    border-color: #445577 !important;
    font-weight: 600; /* Make headers bolder */
    text-align: center;
    padding: 0.5rem 0.25rem; /* Adjust padding */
    font-size: 0.85rem;
}

/* Calendar Day Cells (Table Body) */
#calendar table tbody td {
    background-color: #1f2a40 !important; /* Match existing dark table cell */
    color: #d8d8d8 !important;
    border-color: #445577 !important;
    vertical-align: top; /* Align day number to top */
    padding: 0.3rem; /* Adjust padding */
    height: 100px; /* Example fixed height - adjust as needed */
    position: relative; /* Needed for potential event indicators */
}

/* Day Number Span inside cells */
#calendar table tbody td span.day-number { /* Assuming day number is in a span */
    font-size: 0.85rem;
    padding: 0.2rem;
    display: inline-block;
}


/* Days outside the current month */
#calendar table tbody td.day-outside-month {
    background-color: #1a2a45 !important; /* Slightly darker/more muted background */
    color: #6c757d !important; /* Muted text colour (Bootstrap secondary grey) */
}
#calendar table tbody td.day-outside-month span.day-number {
     opacity: 0.6;
}

/* Today's Date */
#calendar table tbody td.today {
    background-color: #2a3a55 !important; /* Different background to highlight */
    border: 1px solid #0d6efd !important; /* Highlight border */
}
#calendar table tbody td.today span.day-number {
    font-weight: bold;
    color: #ffffff; /* White text for today's number */
     background-color: #0d6efd; /* Optional: Add background to number itself */
     border-radius: 50%;
     padding: 0.2rem 0.4rem;
}

/* Days with Events (Example: Add a subtle indicator) */
#calendar table tbody td.day-with-event { /* Assuming plugin adds this class */
    /* Example: Add a bottom border */
     border-bottom: 3px solid #198754 !important; /* Example: Green border */
     /* Or add a background colour, or use ::after for a dot */
}
#calendar table tbody td.day-with-event:hover {
    background-color: #24314a !important; /* Slightly different hover for event days */
}


/* --- Popover Styling (Dark Theme) --- */
/* Make sure popovers match the dark theme */
.popover {
    background-color: #2a3a55; /* Dark background */
    border-color: #445577;
    color: #d8d8d8; /* Light text */
    --bs-popover-max-width: 300px; /* Adjust max width if needed */
    --bs-popover-border-radius: 0.375rem;
     --bs-popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4); /* Darker shadow */
}

.popover .popover-header {
    background-color: #1f2a40; /* Slightly different header background */
    color: #ffffff; /* White header text */
    border-bottom-color: #445577;
    font-size: 0.9rem;
    font-weight: bold;
}

.popover .popover-body {
    color: #d8d8d8; /* Light text in body */
    font-size: 0.85rem;
}
.popover .popover-body a {
    color: #ffffff; /* Make links white */
    text-decoration: underline;
}
.popover .popover-body a:hover {
    color: #cccccc;
}

/* Adjust arrow colour */
.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
  border-top-color: #2a3a55; /* Match popover background */
}
/* Add similar rules for bottom, left, right placements if needed */

/* Results table styling */
.results-table {
    width: auto;
    table-layout: auto;
    margin-left: auto;
    margin-right: auto;
}

/* Results Tab Styling */
.results-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    justify-content: center;
}

.results-tab-button {
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.results-tabs button.active {
    font-weight: bold;
    transform: scale(1.05);
}