/* Variables
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  /* Alert colors */
  --white: #fff;
  --mint-green: #d6e9c6;
  --black: #000;
  --pink: #f2dede;
  --dark-pink: #eed3d7;
  --red: #b94a48;
  --forest-green: #57bc90;

  /* Global Colours */
  --light-yellow-main: #fcc969;
  --yellow-main: #fbb228;
  --light-green-main: #a4d3a5;
  --green-main: #227d51;
  --dark-green-main: #11402a;
  --red-main: #d64028;
  --olive-main: #f6f6de;
  --gray-main: #939385;
  --dark-gray-main: #4f4f47;
  --gold-main: #a27f49;
  --dark-blue-main: #06223c;
  --light-blue-main: #aec6cf;

  /* Global Fonts */
  --regular-font: Gibson-Regular, Helvetica, sans-serif;
  --italic-font: Gibson-Italic, Helvetica, sans-serif;
  --title-font: Lora-Regular, Helvetica, sans-serif;

  /*Team Colours */
/* Outlaws (Grey/Black) */
  --outlaws-jersey: #C0C0C0; /* Silver/Grey */
  --outlaws-logo: #000000;   /* Black */

  /* Saints (Gold/Black) */
  --saints-jersey: #D4AF37;  /* Metallic Gold */
  --saints-logo: #000000;    /* Black */

  /* Tigers (Black/White) */
  --tigers-jersey: #000000;  /* Black */
  --tigers-logo: #FFFFFF;    /* White */

  /* Wanderers (Maroon/White) */
  --wanderers-jersey: #800000; /* Maroon/Dark Red */
  --wanderers-logo: #FFFFFF;    /* White */

/* Dragons (Forest Green/White) */
  --dragons-jersey: #004225; /* Forest Green */
  --dragons-logo: #FFFFFF;   /* White */

  /* Lions (Orange-Yellow/Black) */
  --lions-jersey: #FFB81C;   /* Athletic Gold/Orange */
  --lions-logo: #000000;     /* Black */

  /* Immortals (Sky Blue/Navy) */
  --immortals-jersey: #B0E0E6; /* Powder/Sky Blue */
  --immortals-logo: #00205B;   /* Navy Blue */

  /* Toros (White/Red) */
  --toros-jersey: #FFFFFF;   /* White */
  --toros-logo: #C8102E;     /* Red */
}

/* Alerts
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
.alert-debug {
  background-color: var(--white);
  border-color: var(--mint-green);
  color: var(--black);
}

.alert-error {
  background-color: var(--pink);
  border-color: var(--dark-pink);
  color: var(--red);
}

.invalid-feedback {
  color: var(--red-main);
}

/* Global Styles
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
  font-size: 16px;
  line-height: 1.15;
}

body {
  min-height: 100vh;
  background: var(--olive-main);
  font-size: 1rem;
  padding: 0;
  min-width: 320px;
  line-height: 1.4285em;
  color: var(--dark-blue-main);
  overflow-x: hidden;
  margin: 8px 0;
}

a {
  color: #4183c4;
  text-decoration: none;
  &:hover {
    color: #1e70bf;
    text-decoration: none;
  }
}

/* Headings */
h1, h2, h3, h4, h5 {
  line-height: 1.28571429em;
  margin: calc(2rem - 0.14285714em) 0em 1rem;
  font-weight: bold;
  padding: 0em;
  font-family: var(--title-font);
  color: var(--dark-blue-main);
}

h1 { min-height: 1rem; font-size: 2rem; }
h2 { font-size: 1.71428571rem; }
h3 { font-size: 1.28571429rem; }
h4 { font-size: 1.07142857rem; }
h5 { font-size: 1rem; }

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child {
  margin-top: 0em;
}

h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child {
  margin-bottom: 0em;
}

/* Text */
p {
  margin: 0em 0em 1em;
  line-height: 1.4285em;
  &:first-child { margin-top: 0em; }
  &:last-child { margin-bottom: 0em; }
}

/* Inputs */
input {
  color: var(--dark-blue-main);
  &:focus-visible, &:focus { outline: none; }
  &::placeholder { color: var(--light-blue-main); }
  &:focus::placeholder { color: var(--dark-blue-main); }
}

.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="file"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="text"],
.ui.form input[type="time"],
.ui.form input[type="url"],
.ui.form textarea {
  padding: .7em 1em;
  line-height: 1.3em;
  border-radius: .3rem;
  box-shadow: 0 0 0 0 transparent inset;
  width: 100%;
}

/* Container */
.container {
  min-height:80vh;
  display: grid;
  grid-gap: 25px;
  grid-template-areas:
    "header"
    "main"
    "footer";
  background: var(--olive-main);
  font-family: var(--regular-font);
  color: var(--dark-blue-main);
}

.bubble-link {
  padding: 5px 7px;
  margin: 5px 12px 5px 0;
  background: var(--light-yellow-main);
  border-radius: 3px;
}

.underline { border-bottom: 1px solid; }

.centered {
  display: grid;
  grid-template-columns: 7% auto 7%;
  grid-template-areas: "... center ...";
  & .center { grid-area: center; }
}

.bottom-borders {
  grid-area: bottom-border;
  grid-column: 1 / span 3;
}

.bottom-border {
  width: 100%;
  border-style: solid;
  border-width: 0 0 5px 0;
  &.yellow { border-color: var(--yellow-main); }
  &.red { border-color: var(--red-main); }
  &.green { border-color: var(--dark-blue-main); }
}

.flex-row-reverse { display: flex; flex-direction: row-reverse; }
.flex-justify-center { display: flex; justify-content: center; }

/* Header Styles */
.header {
  grid-area: header;
  background: var(--olive-main);
  display: grid;
  grid-template-columns: 7% 1fr 7%;
  grid-template-areas:
    ". logo .";

    & .logo {
      width: 20%;
    }
    & .hamburger {
      & img {
        width: 150%;
        padding-top: 60%;
      display: inline-block;
    }
    }
    & .navbar-brand {
    grid-area: logo;
    display:flex;
    justify-content: space-between;

    & a { text-decoration: none; }
  }
  & .header-links {
    grid-area: header-links;
    display: none;
    vertical-align: bottom;
    & ul {
      list-style: none outside none;
      margin: 0;
      font-weight: 600;
    }
    & li {
      display: inline-block;
      padding: 0 .3em;
      & a {
        text-decoration: none;
        color: var(--gold-main);
        font-family: var(--title-font);
        text-shadow: 0 0 1px var(--dark-blue-main), 0 0 1px var(--dark-blue-main), 0 0 1px var(--dark-blue-main), 0 0 1px var(--dark-blue-main);
      }
    }
    & .search-box { display: none; }
  }
}

/* Main Styles */
.main {
  grid-area: main;
  background: var(--olive-main);
  & .title {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 1rem 0;
    & .tools-section a {
      text-decoration: none;
      & img { height: 60px; }
      & #addToRecipeBook img { height: 70px; }
    }
    & h1 { font-size: 2.5rem; margin-bottom: .1rem; }
    & h3 { margin-top: .1rem; }
    & p { font-size: 1rem; margin-top: .1rem; }
  }
  & .nav-links ul {
    list-style: none outside none;
    margin: 0;
    font-weight: 600;
    padding-left: 0;
    & a {
      display: block;
      padding: 1rem;
      text-align: center;
      outline: 1px solid var(--dark-blue-main);
      margin-top: 1px;
      color: var(--dark-blue-main);
    }
  }
}

/* Home page Styles */
.home-page {
  & iframe {
    width:100%;
    aspect-ratio: 16 / 9;
    border:0
  }
}
/* About Styles */
.mission-section {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "vision"
    "details"
    "philosophy"
    "format";
  gap: 2rem;

  & .vision {
    grid-area: vision;
    & h2 {
      margin-bottom:0;
    }
  }
  & .details {
    grid-area: details;
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid var(--gold-main); /* A nice accent line */
    border-radius: 4px;
    font-size: 1.2rem;
    flex-wrap: wrap;

    & .info-item {
      display: flex;
      align-items: flex-start;
      gap: 1rem;

      & span {
        font-size: 1.75rem;
        line-height: 1;
      }

      & strong {
        display: block;
        color: var(--gold-main);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 2px;
      }

      & p {
        margin: 0;
        font-size: 1rem;
        line-height: 1.4;
        font-weight: 500;
      }
      & .schedule-block {
        & .day-label {
          margin-top: 12px; /* Space between the two days */
          font-weight: 800;
          font-size: 1.1rem;
          letter-spacing: 0.5px;
          margin: 0;
        }
      }
    }
  }
  & .format {
    grid-area: format;
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid var(--gold-main); /* A nice accent line */
    border-radius: 4px;
    font-size: 1.2rem;
    flex-wrap: wrap;

    & .info-item {
      display: flex;
      align-items: flex-start;
      gap: 1rem;

      & span {
        font-size: 1.75rem;
        line-height: 1;
      }

      & strong {
        display: block;
        color: var(--gold-main);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 2px;
      }

      & p {
        margin: 0;
        font-size: 1rem;
        line-height: 1.4;
        font-weight: 500;
      }
      & .schedule-block {
        & .day-label {
          margin-top: 12px; /* Space between the two days */
          font-weight: 800;
          font-size: 1.1rem;
          letter-spacing: 0.5px;
          margin: 0;
        }
      }
    }
  }

  & .philosophy {
    grid-area: philosophy;
  }

  & .highlight {
    margin-top:0;
    color: var(--gold-main);
  }
}
/* Registration Styles */
.schedule {
  display: flex;
  align-items: flex-start;
  flex-wrap:wrap;
  & .month {
    margin: 1rem;
    max-width: 20%;
    min-width: 300px;
  }
}

.btn-success {
  margin-top: 1rem;
  padding: .6rem;
}

/* Availability Styles */
.player-block {
    margin-bottom: 3rem;
    background: var(--light-blue-main);
    padding: 1.5rem;
    border: 1px solid var(--dark-blue-main);
    border-radius: 4px;

    .player-name-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding-bottom: 0.75rem;
    }
}

.availability-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile-First: Single Column Card */
    gap: 1rem;
    margin-top: 1rem;

    .grid-header {
        display: none; /* Hide headers on mobile cards */
    }

    .game-row {
        /* Card Styling for Mobile */
        border: 1px solid var(--light-blue-main);
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        display: grid; /* Nesting a grid inside the row for internal padding */

        .col-time {
            padding: 1rem;
            border-bottom: 1px dashed var(--light-blue-main);

            .day-sub {
                display: block;
                font-size: 0.75rem;
                text-transform: uppercase;
                color: var(--dark-gray-main);
                font-weight: 700;
            }

            .date-main {
                font-size: 1.4rem;
                font-weight: 900;
                color: var(--dark-blue-main);
                line-height: 1.1;
            }
            .time-label {
                font-size: 0.8rem;
                font-weight: 600;
                color: var(--dark-gray-main);
                margin: 2px 0;
                letter-spacing: 0.5px;
            }

            .team-label {
                margin-top: 4px;
                font-size: 0.8rem;
                strong { color: var(--gold-main); }
            }
        }

        .col-action {
            padding: 1rem;
            background: #fdfdfd;

            .status-select {
                width: 100%;
                height: 48px;
                font-weight: 700;
                border: 2px solid var(--dark-blue-main);
                border-radius: 6px;
                transition: all 0.2s ease;

                &.status-in { background: #d4edda; color: #155724; border-color: #c3e6cb; }
                &.status-out { background: #f8d7da; color: #721c24; border-color: #f5c6cb; }
            }
        }
    }
}

/* ---  Availibility Report --- */
.report-container {
  padding: 20px;
  .date-section {
    background: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    margin-bottom: 40px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    overflow: hidden;

    .date-header {
      background: var(--dark-blue-main);
      padding: 15px 25px;
      display: flex;
      color: white;
      justify-content: space-between;
      align-items: center;
      & h2 {
        color: white;
      }
    }
  }

  .division-block {
    padding: 20px;
    border-bottom: 2px solid #f0f0f0;

    &:last-child { border-bottom: none; }

    .division-title {
      color: var(--dark-blue-main);
      border-bottom: 2px solid var(--gold-main);
      display: inline-block;
      margin-bottom: 15px;
      padding-bottom: 5px;
      text-transform: uppercase;
      font-weight: 800;
    }
  }

  /* The 4-Team Grid */
  .roster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 15px;
    margin-bottom: 20px;

    .team-box {
      background: #f8f9fa;
      border: 1px solid #dee2e6;
      border-radius: 6px;
      padding: 12px;
    }
  }

  /* Player Rows & States */
  .player-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 10px;
    margin-bottom: 4px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: transform 0.1s ease;

    &:hover { transform: translateX(2px); }

    &.status-in {
      background: #e6fffa;
      color: #234e52;
      border-left: 4px solid #38b2ac;
    }
    &.status-out {
      background: #fff5f5;
      color: #742a2a;
      border-left: 4px solid #f56565;
    }
    &.status-tbd {
      background: #fffbea;
      color: #744210;
      border-left: 4px solid #ecc94b;
    }

    .goalie-tag {
      background: #000;
      color: #fff;
      font-size: 0.7rem;
      padding: 1px 4px;
      border-radius: 3px;
      margin-right: 5px;
      text-transform: uppercase;
    }
  }

  /* Spares & Admin Tools */
  .spares-area {
    background: #f1f4f8;
    padding: 15px;
    border-radius: 6px;
    margin-top: 15px;

    .sparepool {
      margin-top: 15px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px
    }
    .mini {
      font-size: 0.75rem;
      margin: 0;
    }

    summary {
      cursor: pointer;
      font-weight: 800;
      color: var(--dark-blue-main);
      outline: none;

      &:hover { color: var(--gold-main); }
    }

    .action-grid {
      margin-top: 15px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
    }
  }

  .email-box {
    width: 100%;
    height: 60px;
    margin-top: 8px;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    padding: 10px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: none;

    &:focus {
      border-color: var(--gold-main);
      outline: none;
    }
  }
}
.spare-signup {
    /* Matches your report row styling */
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    flex-direction: column;

    .form-group {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;

        label {
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            color: #666;
        }

        select {
            padding: 0.5rem;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #fff;
            font-family: inherit;
            min-width: 150px;

            &:focus {
                border-color: #007bff;
                outline: none;
            }
        }
    }
}
/* ---  END Availibility Report --- */
/* --- Gameday Hub --- */
.hub-container {
    margin: 0 auto;
    padding: 1rem;

    .hub-header {
        text-align: center;
        margin-bottom: 2rem;
        h1 { margin-bottom: 0.2rem; color: #1a1a1a; }
        p { color: #666; font-style: italic; }
    }

    .day-section {
        margin-bottom: 3rem;
        .date-title {
            background: #222;
            color: #fff;
            padding: 10px 15px;
            border-radius: 4px;
            font-size: 1.1rem;
            text-transform: uppercase;
        }
    }

    .game-card {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 1.2rem;
        margin: 1rem 0;
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        align-items: center;
        gap: 1rem;

        &.finished {
            background: #f9f9f9;
            opacity: 0.8;
        }

        .game-meta {
            display: flex;
            flex-direction: column;
            .time { font-weight: bold; font-size: 1.1rem; }
            .division { font-size: 0.8rem; color: #777; }
        }

        .matchup {
            text-align: center;
            font-weight: 700;
            .vs { font-weight: 400; color: #999; margin: 0 5px; }
        }

        .btn-scoresheet {
            background: #28a745;
            color: white;
            padding: 10px 15px;
            border-radius: 5px;
            text-decoration: none;
            font-weight: bold;
            display: block;
            text-align: center;
            &:hover { background: #218838; }
        }
    }
}

/* ---  END Gameday Hub --- */
/* ---  Scoresheets --- */
.gamesheet-container {
    display: flex; flex-direction: column; gap: 20px;

    .scoreboard {
        display: flex; justify-content: space-between; align-items: center;
        background: #222;
        color: var(--gold-main);
        padding: 20px; border-radius: 8px;
        .score { font-size: 4rem; font-family: monospace; }
        .team h1 {
          font-size: 1.2rem;
          color: var(--yellow-main);
        }
        .vs {
        color: var(--yellow-main);
        font-weight: 400; margin: 0 5px; }
    }

    .scoring-grid {
        display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
        .btn-player {
            width: 100%; padding: 15px 5px; margin-bottom: 5px;
            background: #f4f4f4; border: 1px solid #ccc; border-radius: 4px;
            font-weight: bold;
        }
    }

    .goal-history {
        background: #fffbe6; padding: 10px; border-radius: 4px;
        .goal-record {
            display: flex; justify-content: space-between;
            padding: 5px 0; border-bottom: 1px solid #ddd;
        }
        .btn-x {
          padding: 4px 15px;
        }
    }

    .btn-finish {
        background: var(--gold-main);
        color: white; width: 100%; padding: 20px;
        border: none; border-radius: 8px; font-weight: bold; font-size: 1.2rem;
      }
      .player-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-height: 60vh;
        overflow-y: auto;

        button {
          display: flex;
          align-items: center;
          padding: 15px;
          font-size: 1.1rem;
          text-align: left;
          background: #f8f9fa;
          border: 1px solid #ddd;
          border-radius: 8px;

          .jrsey {
            background: #222;
            color: #fff;
            padding: 4px 8px;
            border-radius: 4px;
            margin-right: 15px;
            font-weight: bold;
            min-width: 40px;
            text-align: center;
          }
        }
      }

      .btn-goal {
        width: 100%;
        padding: 30px;
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 20px;
        border-radius: 12px;
        border: none;
        color: white;

        &.team-outlaws   { background-color: var(--outlaws-jersey);   color: var(--outlaws-logo); }
        &.team-saints    { background-color: var(--saints-jersey);    color: var(--saints-logo); }
        &.team-tigers    { background-color: var(--tigers-jersey);    color: var(--tigers-logo); border: 1px solid #444; }
        &.team-wanderers { background-color: var(--wanderers-jersey); color: var(--wanderers-logo); }
        &.team-dragons   { background-color: var(--dragons-jersey);   color: var(--dragons-logo); }
        &.team-lions     { background-color: var(--lions-jersey);     color: var(--lions-logo); }
        &.team-immortals { background-color: var(--immortals-jersey); color: var(--immortals-logo); }
        &.team-toros     { background-color: var(--toros-jersey);     color: var(--toros-logo); border: 2px solid var(--toros-logo); }
      }

    }

    .modal-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;

      .modal-content {
        background: white;
        padding: 0; /* Changed to 0 so the color border touches the edges */
        border-radius: 6px;
        overflow: hidden;
        border-top: 10px solid #ddd; /* Default fallback */

        /* Team Specific Borders */
        &.team-outlaws   { border-top-color: var(--outlaws-jersey); }
        &.team-saints    { border-top-color: var(--saints-jersey); }
        &.team-tigers    { border-top-color: var(--tigers-jersey); }
        &.team-wanderers { border-top-color: var(--wanderers-jersey); }
        &.team-dragons   { border-top-color: var(--dragons-jersey); }
        &.team-lions     { border-top-color: var(--lions-jersey); }
        &.team-immortals { border-top-color: var(--immortals-jersey); }
        &.team-toros     { border-top-color: var(--toros-jersey); }

        header {
          padding: 15px;
          background: #f8f9fa;
          border-bottom: 1px solid #eee;
          h3 { margin: 0; font-size: 1.3rem; }
        }

        .player-list {
          padding: 15px;
          max-height: 60vh;
          overflow-y: auto;

          .modal-player-btn {
            width: 100%;
            display: flex;
            align-items: center;
            padding: 30px;
            margin-bottom: 8px;
            border: 1px solid #eee;
            background: #fdfdfd;
            border-radius: 8px;
            font-weight: 600;

            .jrsey {
              display: inline-block;
              width: 40px;
              padding: 4px 0;
              border-radius: 4px;
              margin-right: 12px;
              text-align: center;
              font-weight: 900;
            }
          }
        }

        /* Jersey Badge Colors via Nesting */
        &.team-outlaws   .jrsey { background: var(--outlaws-jersey);   color: var(--outlaws-logo); }
        &.team-saints    .jrsey { background: var(--saints-jersey);    color: var(--saints-logo); }
        &.team-tigers    .jrsey { background: var(--tigers-jersey);    color: var(--tigers-logo); border: 1px solid #ccc; }
        &.team-wanderers .jrsey { background: var(--wanderers-jersey); color: var(--wanderers-logo); }
        &.team-dragons   .jrsey { background: var(--dragons-jersey);   color: var(--dragons-logo); }
        &.team-lions     .jrsey { background: var(--lions-jersey);     color: var(--lions-logo); }
        &.team-immortals .jrsey { background: var(--immortals-jersey); color: var(--immortals-logo); }
        &.team-toros     .jrsey { background: var(--toros-jersey);     color: var(--toros-logo); border: 1px solid #ddd; }


        &.team-outlaws   .modal-player-btn { background: var(--outlaws-jersey);   color: var(--outlaws-logo); }
        &.team-saints    .modal-player-btn { background: var(--saints-jersey);    color: var(--saints-logo); }
        &.team-tigers    .modal-player-btn { background: var(--tigers-jersey);    color: var(--tigers-logo); border: 1px solid #ccc; }
        &.team-wanderers .modal-player-btn { background: var(--wanderers-jersey); color: var(--wanderers-logo); }
        &.team-dragons   .modal-player-btn { background: var(--dragons-jersey);   color: var(--dragons-logo); }
        &.team-lions     .modal-player-btn { background: var(--lions-jersey);     color: var(--lions-logo); }
        &.team-immortals .modal-player-btn { background: var(--immortals-jersey); color: var(--immortals-logo); }
        &.team-toros     .modal-player-btn { background: var(--toros-jersey);     color: var(--toros-logo); border: 1px solid #ddd; }

        .modal-footer {
          padding: 15px;
          text-align: right;
          border-top: 1px solid #eee;
        }
      }
    }
    .checkin-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      border-bottom: 1px solid #eee;
      gap: 10px;

      .player-name {
        flex: 2;
        display: flex;
        flex-direction: column;
        small { color: #888; text-transform: uppercase; font-size: 0.7rem; }
      }

      .jersey-input {
        flex: 0 0 60px;
        input {
          width: 100%;
          box-sizing: border-box;
          padding: 10px;
          border: 2px solid #ddd;
          border-radius: 6px;
          text-align: center;
          font-size: 1.1rem;
          &:focus { border-color: #28a745; }
        }
      }

      .status-wrapper {
          flex: 1;      /* Tell the wrapper to grow to fill the row */
          min-width: 0; /* Crucial: Allows the wrapper to shrink if needed */
          display: flex; /* Makes the wrapper a flex container */
      }
      .btn-status {
        flex: 1;
        padding: 10px;
        font-weight: bold;
        border-radius: 6px;
        border: none;
        &.in { background: #28a745; color: white; }
        &.out { background: #dc3545; color: white; }
      }
      /* Remove arrows/spinners from number inputs */
      /* Chrome, Safari, Edge, Opera */
      input::-webkit-outer-spin-spin-button,
      input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }

      /* Firefox */
      input[type=number] {
        -moz-appearance: textfield;
      }

      /* Ensure the box looks clean */
      .jersey-input input {
        -moz-appearance: textfield;
      }
    }
    /* ---  END Scoresheets --- */
    /* --- Content & Typography --- */

    .col-time, .col-matchup, .col-action {
      padding: 1.2rem 1rem;
    }

    .date-main {
      display: block;
      font-size: 1.25rem;
      font-weight: 900;
      color: var(--dark-blue-main);
    }

    .day-sub {
      font-size: 0.85rem;
      color: var(--gray-main);
      text-transform: uppercase;
    }

    .team-label {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--dark-blue-main);
      margin-bottom: 0.25rem;

      strong {
        color: var(--gold-main);
        text-transform: uppercase;
      }
    }

    .description-text {
      font-size: 0.9rem;
      color: var(--gray-main);
      font-style: italic;
    }

    /* --- Interactive Status Selects --- */

    .status-select {
      width: 100%;
      padding: 10px;
      font-weight: 700;
      border: 2px solid var(--dark-blue-main);
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.2s ease;

      &.status-in {
        background-color: #d4edda;
        color: #155724;
        border-color: #c3e6cb;
      }

      &.status-out {
        background-color: #f8d7da;
        color: #721c24;
        border-color: #f5c6cb;
      }
    }

    /* --- Mobile Stack View --- */

    @media (max-width: 768px) {
      .availability-grid, .game-row {
        grid-template-columns: 1fr;
      }

      .grid-header {
        display: none;
      }

      .col-time, .col-matchup, .col-action {
        padding: 0.75rem 1rem;
        text-align: center;
      }

      .status-select {
        max-width: 280px;
        margin: 0 auto;
      }
    }

    /* Footer Styles */
    .footer {
      grid-area: footer;
      display: grid;
      grid-template-columns: 7% 1fr 7%;
      grid-template-areas:
      ". logo ."
      ". links .";
      border-width: 5px 0 5px 0;
      border-style: solid;
      border-color: var(--dark-blue-main);
      background: var(--light-blue-main);
      & a.logo {
        grid-area: logo;
        padding-top: 20px;
        & .logo { width: 14%; }
      }
      & .links {
        grid-area: links;
        & .sponsors {
          margin-top:0;
          border-top:0;
          flex-flow: column;
          & img {
            padding: 1rem;
            flex: 1 1;
            max-width:85%;
          }
        }
        & div {
          border-top: 1px solid var(--gold-main);
          margin-top: 1rem;
          flex-basis: 100%;
          display: flex;
          justify-content: stretch;
          flex-flow: row;
          & p {
            padding: 1rem;
            flex: 1 1;
          }
          & a {
            padding: 1rem;
            flex: 1 1;
            text-decoration: none;
            color: var(--dark-blue-main);
            align-content: center;
          }
        }
      }
    }

    /* Dashboard Styles */
    .mobile-dashboard {
      display: block;
      & .details {
        & .title {
          display: grid;
          justify-content: center;
          text-align: center;
          & h2, p { margin: 0; }
        }
        & a { display: block; }
        & .image-div {
          filter: drop-shadow(-1px 6px 3px rgba(17, 64, 42, 1));
          & img { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
        }
      }
    }

    .dashboard {
      display: none;
      grid-gap: 50px;
      grid-template-columns: 24% 35% 35%;
      grid-template-areas: "details calendar feed";
      & .details {
        grid-area: details;
        background: var(--light-blue-main);
        color: var(--olive-main);
        padding: 10px;
        height: fit-content;
        & h2 { color: var(--olive-main); }
        & .title {
          display: grid;
          justify-content: center;
          text-align: center;
          & h2, p { margin: 0; }
          & a { color: var(--olive-main); text-decoration: underline; }
        }
        & .quick-links a {
          display: block;
          box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 4px 2px -2px rgba(0, 0, 0, .12);
          border-left: 5px solid var(--green-main);
          padding: .8rem 2rem;
          margin-top: .5rem;
          color: var(--olive-main);
          transition: .5s;
          &:hover {
            box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .4), 0 4px 4px 0 rgba(0, 0, 0, .28), 0 8px 4px -4px rgba(0, 0, 0, .24);
            transition: .5s;
          }
        }
        & .image-div {
          filter: drop-shadow(-1px 6px 3px rgba(17, 64, 42, 1));
          & img { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
        }
        & .bio { margin: 0 7%; }
      }
      & .calendar {
        grid-area: calendar;
        & .calendar-date {
          background-color: var(--green-main);
          color: var(--olive-main);
          display: flex;
          justify-content: space-between;
          box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 4px 2px -2px rgba(0, 0, 0, .12);
          padding: .7rem;
        }
        & .calendar-item {
          display: block;
          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
          padding: .8rem;
          text-align: center;
          transition: .5s;
          &:hover {
            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 4px 2px -2px rgba(0, 0, 0, .12);
            transition: .5s;
          }
        }
        & .fc-list-event-time, .fc-list-event-graphic { display: none; }
        & .fc-theme-standard .fc-list-day-cushion {
          background-color: var(--green-main);
          & a { color: var(--olive-main); }
        }
        & .fc-theme-standard td, .fc-theme-standard th { border-color: var(--light-blue-main); }
        & .fc-theme-standard .fc-list { border-color: var(--light-blue-main); }
        & .fc-view-harness.fc-view-harness-active { min-height: 800px !important; }
      }
      & .feed { grid-area: feed; }
    }

    /* Account Styles */
    /* Center the card on the screen */
    .auth-page-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 70vh;
      padding: 20px;
    }

    /* The 3HL Branded Card */
    .auth-card {
      background: #ffffff;
      width: 100%;
      max-width: 450px;
      padding: 2.5rem;
      border-radius: 8px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      border-top: 6px solid var(--dark-blue-main);
    }

    /* Universal styles for all Auth Forms inside the card */
    .auth-inner {
      h1, h2 {
        margin-top: 0;
        color: var(--dark-blue-main);
        font-weight: 800;
        text-align: center;
        font-size: 1.5rem;
      }

      p { color: #666; margin-bottom: 1.5rem; text-align: center; }

      form {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;

        /* Style the labels (Allauth puts these in <p> or <label> tags) */
        label {
          display: block;
          font-weight: 700;
          font-size: 0.85rem;
          text-transform: uppercase;
          margin-bottom: 5px;
          color: #444;
        }

        /* Target all text/email/password inputs */
        input[type="text"],
        input[type="email"],
        input[type="password"] {
          width: 100%;
          padding: 12px;
          border: 2px solid #ddd;
          border-radius: 4px;
          box-sizing: border-box; /* Crucial for width: 100% */

          &:focus {
            border-color: var(--gold-main);
            outline: none;
          }
        }

        /* The Primary Action Button */
        button, .primaryAction {
          background: var(--dark-blue-main);
          color: #fff;
          border: none;
          padding: 14px;
          border-radius: 4px;
          font-weight: 800;
          text-transform: uppercase;
          cursor: pointer;
          transition: 0.2s ease;

          &:hover {
            background: var(--gold-main);
            color: var(--dark-blue-main);
          }
        }

        /* Secondary links (Forgot Password, etc.) */
        .secondaryAction, a {
          font-size: 0.85rem;
          color: var(--dark-blue-main);
          text-decoration: none;
          font-weight: 600;

          &:hover { text-decoration: underline; }
        }
      }

      /* Social Login (if you use it later) */
      .socialaccount_ballot {
        margin-top: 20px;
        border-top: 1px solid #eee;
        padding-top: 20px;
      }
    }
    /* Helpers */
    .hidden { visibility: hidden; }
    .showNone { display: none !important; }
    .italic { font-style: italic; }

    /* Media Queries Styles */
    @media (min-width: 768px) {
      .header {
        grid-template-columns: 7% 80px 1fr 7%;
        grid-template-areas:
        ". logo header-links .";
        & .logo {
          width: 90%;
        }
        & .hamburger, & .search { display: none; }
        & .header-links {
          display: inline-block;
          & ul {
            font-size: 2rem;
            visibility: visible;
            margin: 2rem 0 2rem 0;
          }
        }
      }
      .main .title h1 { font-size: 3em; }
      .mission-section {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
        "vision details"
        "philosophy format";
      }
      .profile {
        & .indexGrid {
          grid-template-columns: 50% 50%;
          grid-template-rows: none;
          grid-template-areas: "about recipeOfTheDay";
        }
        & .dashboard { display: grid; }
        & .mobile-dashboard { display: none; }
      }

      .availability-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr; /* Two Column Table Layout */
        gap: 0;
        border: 1px solid var(--dark-blue-main);
        border-radius: 0;
        border-top: 0px;

        .grid-header {
          display: block;
          background: var(--dark-blue-main);
          color: #fff;
          padding: 0.8rem 1rem;
          font-size: 0.75rem;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 1px;
          &.desktop {
            border-right: 1rem solid var(--light-blue-main);
          }
        }

        .game-row{
          display: contents; /* The row container "disappears" so children fill the parent grid */

          .col-time, .col-action {
            background: transparent;
            padding: 1.25rem 1rem;
            border-bottom: 1px solid var(--light-blue-main);
            border-radius: 0;
            box-shadow: none;
          }

          &:hover > div {
            background-color: #f8f9fa;
          }

          &:last-child > div {
            border-bottom: none;
          }
        }
      }

      .game-card {
        grid-template-columns: 1fr;
        text-align: center;
        .game-meta { margin-bottom: 0.5rem; }
      }
      .footer {
        grid-template-columns: 7% .5fr 1fr 7%;
        grid-template-areas:
        ". logo links .";
        & a.logo .logo { width: 17%; }
        & .links {
          & .sponsors {
            margin-top:0;
            border-top:0;
            flex-flow: row;
            & img {
              padding: 1rem;
              flex: 1 1;
              max-width:100%;
            }
          }
        }
      }
    }



    /* #Font-Face
    ================================================== */

@font-face {
  font-family: 'Gibson-Regular';
  src: url("../fonts/Gibson-Regular.900ea9014ceb.eot");
  src: url("../fonts/Gibson-Regular.900ea9014ceb.eot?iefix") format('eot'),
  url("../fonts/Gibson-Regular.4bc4cfbf561b.woff2") format('woff2'),
  url("../fonts/Gibson-Regular.5cd7f15e4f5c.woff") format('woff'),
  url("../fonts/Gibson-Regular.e81a2cee8869.ttf") format('truetype'),
  url("../fonts/Gibson-Regular.96099d259411.svg") format('svg');
  font-weight: normal;
font-style: normal; }

@font-face {
  font-family: 'Gibson-Italic';
  src: url("../fonts/Gibson-Italic.ec7566eb9ae0.eot");
  src: url("../fonts/Gibson-Italic.ec7566eb9ae0.eot?iefix") format('eot'),
  url("../fonts/Gibson-Italic.b37df1d8723c.woff2") format('woff2'),
  url("../fonts/Gibson-Italic.78a64253ba87.woff") format('woff'),
  url("../fonts/Gibson-Italic.4bce23ef69c4.ttf") format('truetype'),
  url("../fonts/Gibson-Italic.47569308c289.svg") format('svg');
  font-weight: normal;
font-style: normal; }

@font-face {
  font-family: 'Lora-Bold';
  src: url("../fonts/Lora-Bold.3783178b2368.eot");
  src: url("../fonts/Lora-Bold.3783178b2368.eot?iefix") format('eot'),
  url("../fonts/Lora-Bold.b2c462df65e3.woff") format('woff'),
  url("../fonts/Lora-Bold.4d8b266ca566.ttf") format('truetype'),
  url("../fonts/Lora-Bold.98966647c6a7.svg") format('svg');
  font-weight: normal;
font-style: normal; }

@font-face {
  font-family: 'Lora-Italic';
  src: url("../fonts/lora-italic.ccf2108cfaab.eot");
  src: url("../fonts/lora-italic.ccf2108cfaab.eot?#iefix") format('embedded-opentype'),
  url("../fonts/lora-italic.6efabd87cf40.woff") format('woff'),
  url("../fonts/lora-italic.ef7dcbd5be4b.ttf") format('truetype'),
  url("../fonts/lora-italic.e54c03964dcd.svg#loraitalic") format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Lora-Regular';
  src: url("../fonts/lora-regular.61e5e779607f.eot");
  src: url("../fonts/lora-regular.61e5e779607f.eot?#iefix") format('embedded-opentype'),
  url("../fonts/lora-regular.21a8b1d61d80.woff2") format('woff2'),
  url("../fonts/lora-regular.54ff3dc7f4a1.woff") format('woff'),
  url("../fonts/lora-regular.948035870ee9.ttf") format('truetype'),
  url("../fonts/lora-regular.68d54a8602af.svg#loraregular") format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Icons';
  src: url("../fonts/icons.8e3c7f5520f5.eot");
  src: url("../fonts/icons.8e3c7f5520f5.eot?#iefix") format('embedded-opentype'),
  url("../fonts/icons.faff92145777.woff") format('woff'),
  url("../fonts/icons.b87b9ba532ac.ttf") format('truetype'),
  url("../fonts/icons.6edde5dc8776.svg#icons") format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'outline-icons';
  src: url("../fonts/outline-icons.701ae6abd471.eot");
  src: url("../fonts/outline-icons.701ae6abd471.eot?#iefix") format('embedded-opentype'),
  url("../fonts/outline-icons.ef60a4f6c25e.woff") format('woff'),
  url("../fonts/outline-icons.ad97afd3337e.ttf") format('truetype'),
  url("../fonts/outline-icons.def1932576cd.svg#outline-icons") format('svg');
  font-weight: normal;
  font-style: normal;
}