/* Roseau Team App — shared base styles.
   Same palette as the main website: black background, whitesmoke
   text, yellowgreen accent, Arial. Keeping this consistent is
   deliberate — someone moving between the site and the app should
   never feel like they've landed somewhere different. */

* { box-sizing: border-box; }

:root {
  --bg: black;
  --text: whitesmoke;
  --accent: yellowgreen;
  --card-bg: #141414;
  --card-border: #333;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, sans-serif;
}

/* Phones draw content edge-to-edge under translucent system bars
   unless the page explicitly makes room for them. */
:root {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

h1, h2, h3 {
  color: var(--accent);
  margin-top: 0;
}

a { color: var(--accent); }

button {
  background: black;
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 1em;
  cursor: pointer;
}
button:hover { background: var(--accent); color: black; }
button:disabled { opacity: 0.5; cursor: default; }

input, select, textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  border: 1px solid #555;
  background: #0c0c0c;
  color: var(--text);
  font-family: inherit;
  font-size: 1em;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 16px;
}

.err-msg { color: #ff8080; font-size: 0.9em; min-height: 1.2em; }
.ok-msg { color: var(--accent); font-size: 0.9em; min-height: 1.2em; }

.placeholder-text { color: #888; font-style: italic; }

/* ---- Top ribbon: centered team name, small username in the corner
   with a tap-to-open dropdown — matches the site's own small corner
   login box convention. ---- */
#top-ribbon {
  position: relative;
  z-index: 50; /* explicit and clearly above everything else, so both ribbon dropdowns unambiguously paint over the nav bar and screen content below them, rather than relying on default stacking behavior */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  border-bottom: 1px solid #333;
}
#ribbon-logo {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: white;
  padding: 4px;
  object-fit: contain;
}
/* A custom dropdown, not a native <select> — a <select>'s open
   list is drawn by the OS, not the page, so its background can't be
   styled here at all. This gets full control, same button+list shape
   as the username menu on the other side of the ribbon. */
#ribbon-team-wrap {
  position: relative;
  display: inline-block;
}
#ribbon-team-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-weight: 600;
  font-size: 1.1em;
  padding: 4px 20px 4px 8px; /* right padding reserves room for the arrow, so it can never sit on top of the text */
  cursor: pointer;
  position: relative;
}
#ribbon-team-btn:hover { background: none; }
/* The arrow itself — its own element, positioned independently of
   the text, rather than a native browser-drawn one that can crowd
   whatever text sits next to it. Hidden entirely for a single-team
   account, same as before: no arrow when there's nothing to switch to. */
#ribbon-team-btn::after {
  content: "▾";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75em;
}
#ribbon-team-btn.single-team {
  padding-right: 8px;
  cursor: default;
  pointer-events: none;
}
#ribbon-team-btn.single-team::after { content: ""; }
#ribbon-team-dropdown {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  margin-top: 4px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  overflow: hidden;
  min-width: 140px;
  z-index: 10;
}
#ribbon-team-dropdown.open { display: block; }
#ribbon-team-dropdown button {
  width: 100%;
  border: none;
  border-radius: 0;
  text-align: center;
  background: none;
  color: whitesmoke;
  padding: 8px 12px;
  cursor: pointer;
}
#ribbon-team-dropdown button:hover { background: #1c1c1c; }
#ribbon-team-dropdown button.current { color: var(--accent); }
#user-menu-wrap {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
}
#mail-btn {
  position: relative;
  background: none;
  border: none;
  padding: 4px;
  display: flex;
}
#mail-btn:hover { background: none; }
#mail-btn svg { width: 22px; height: 22px; color: var(--accent); }
#mail-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #d32f2f;
  color: white;
  font-size: 0.65em;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
#mail-badge.visible { display: flex; }
#username-btn {
  background: none;
  border: none;
  color: #aaa;
  font-size: 0.8em;
  padding: 4px 8px;
  cursor: pointer;
}
#username-btn:hover { background: none; color: var(--accent); }
#user-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  overflow: hidden;
  min-width: 120px;
  z-index: 10; /* with none set, whatever's on the screen behind it had no reason to stay beneath it — that's what was showing through */
}
#user-dropdown.open { display: block; }
/* The Records link is an <a>, not a <button> (it's a real external
   link, not a JS action) — included here so it matches every other
   item exactly rather than needing its own separate rule. */
#user-dropdown button, #user-dropdown a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  text-align: left;
  background: var(--card-bg); /* explicit rather than inherited, so each option reads solid on its own too */
  color: whitesmoke;
  text-decoration: none;
  padding: 10px 16px; /* matches the global button rule's padding exactly, so only the new <a> (which doesn't inherit it) actually changes */
  font: inherit;
  cursor: pointer;
}
#user-dropdown button:hover, #user-dropdown a:hover { background: #1c1c1c; }

/* ---- Nav bar: icons stay green always; only the selected one gets
   a white background behind it, per his exact spec. ---- */
#app-nav {
  display: flex;
  border-bottom: 1px solid #333;
}
/* #app-nav button beats the generic "button {...}" rule on
   specificity no matter what (an id+element compound always outranks
   a bare element selector) — explicit, not relying on source order. */
#app-nav {
  display: flex;
  width: 100%;
}
#app-nav button {
  flex: 1 1 0;
  min-width: 0;
  background: none;
  border: none;
  border-radius: 0;
  padding: 8px 0;
  display: flex;
  justify-content: center;
}
#app-nav button:hover { background: #1c1c1c; }
.nav-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  position: relative;
}
#announcements-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d32f2f;
  display: none;
}
#announcements-dot.visible { display: block; }
.nav-btn.active .nav-icon-circle { background: white; }
/* No fill/stroke rule needed here at all — every icon's color is
   hardcoded directly in its own markup now, deliberately, so nothing
   about how it renders depends on CSS cascade/specificity working
   a particular way. */
.nav-btn svg {
  width: 22px;
  height: 22px;
}

.app-screen { display: none; padding: 16px; }
.app-screen.active-screen { display: block; }

/* ---- Message thread: its own scroll region, always auto-scrolled
   to the bottom (newest message) via JS after rendering — so the
   reply box is effectively always right below the latest message,
   without the whole page growing as a conversation gets long. ---- */
#thread-messages {
  max-height: 60vh;
  overflow-y: auto;
  margin-bottom: 10px;
}

/* ---- Events: list/calendar toggle — same single-select, icon-stays-
   green, white-circle-behind-the-active-one pattern as the bottom
   nav, just two buttons instead of six. ---- */
#events-view-toggle {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}
.view-toggle-btn {
  background: none;
  border: none;
  padding: 6px;
}
.view-toggle-btn:hover { background: #1c1c1c; }
.view-toggle-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.view-toggle-btn.active .view-toggle-circle { background: white; }
.view-toggle-btn svg { width: 20px; height: 20px; }

/* ---- Calendar grid — same light "paper card" treatment already
   proven readable on the website's own calendar, rather than
   dark-on-dark. Only one team's events show here at a time, so no
   varsity/JH color split is needed — just game vs. practice. ---- */
.cal-month-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; }
.cal-month-nav button { background: black; border: 1px solid var(--accent); color: var(--text); padding: 6px 14px; border-radius: 6px; }
.cal-month-label { color: var(--accent); font-weight: 700; font-size: 1.1em; min-width: 140px; text-align: center; }
#events-cal-legend { display: flex; gap: 14px; justify-content: center; margin-bottom: 10px; font-size: 0.75em; color: #aaa; }
#events-cal-legend .dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 4px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow { color: var(--accent); font-size: 0.7em; text-align: center; padding: 4px 0; }
.cal-day { min-height: 60px; background: whitesmoke; border: 1px solid #d5d5d5; border-radius: 6px; padding: 3px; font-size: 0.65em; color: #222; overflow: hidden; }
.cal-day.empty { background: transparent; border-color: transparent; }
.cal-day.today { border-color: var(--accent); border-width: 2px; }
.cal-day-num { color: #555; margin-bottom: 2px; }
.cal-day.today .cal-day-num { color: #2f6b00; font-weight: 700; }
.cal-event { display: block; margin-bottom: 1px; padding: 1px 3px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cal-event.game { background: #2e7d32; color: white; }
.cal-event.practice { background: #555; color: whitesmoke; }
#events-cal-day-detail { display: none; margin-top: 14px; padding: 12px; }

#designer-flip-btn.active { background: var(--accent); color: #111; border-color: var(--accent); }

/* ---- Push notification prompts ---- */
#push-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 0.9em;
}
#push-banner span { flex: 1; }
#push-banner button { width: auto; padding: 6px 12px; font-size: 0.85em; }
#push-banner-dismiss { border-color: #555; }

#push-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#push-modal {
  background: var(--card-bg);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 24px 20px;
  max-width: 340px;
  text-align: center;
}
#push-modal h3 { margin-top: 0; color: var(--accent); }
#push-modal button { margin-top: 10px; }
#push-modal-dismiss { border-color: #555; }

/* ---- Play Designer focus point popup ---- */
#designer-focus-popup {
  display: none;
  position: absolute;
  max-width: 220px;
  background: #1c1c1c;
  border: 1px solid #ffd700;
  color: whitesmoke;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.85em;
  z-index: 5;
  cursor: pointer; /* hints it's tappable — tapping anywhere on it closes it */
}
#designer-focus-popup.active { display: block; }

/* ---- Stats table ---- */
#stats-table th, #stats-table td {
  padding: 8px 10px;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid #2a2a2a;
}
#stats-table th { color: var(--accent); font-size: 0.8em; }
#stats-table td:first-child, #stats-table th:first-child {
  text-align: left;
  /* Frozen — stays put while the rest of the table scrolls
     horizontally underneath it. Needs its own opaque background,
     matching the page, so scrolled columns don't show through it. */
  position: sticky;
  left: 0;
  background: var(--bg);
  z-index: 1;
}

/* ---- Auth screen ---- */
#auth-screen {
  max-width: 380px;
  margin: 60px auto;
  padding: 24px;
  text-align: center;
}
#auth-screen img { width: 100px; margin-bottom: 10px; }
#auth-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
#auth-tabs button { flex: 1; }
#auth-tabs button.active-tab { background: var(--accent); color: black; }
.auth-form { display: none; text-align: left; }
.auth-form.active-form { display: block; }