/*
  styles.css — Tryouts Finder demo
  -------------------------------------------------------
  - Dark, friendly UI
  - Uses CSS variables for easy theming
  - Matches the classes/ids in index.html
*/

/* ---------- Theme ---------- */
:root{
  --bg: #183fab70;
  --bg-2: #b05e9a6e;
  --card: #273466;
  --surface: #f7f7fa;
  --ink: #1e3a8a;
  --muted: #1e4edf;
  --border: rgba(238, 228, 228, 0.12);
  --border-2: rgba(255,255,255,.08);
  --accent: #74e9c2bd;
  --accent-2: #8affc1;
  --danger: #ef476f;
}

/* ---------- Base / Reset ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background: radial-gradient(900px 600px at 10% -10%, #222a98 0, transparent 60%),
              linear-gradient(180deg, var(--bg), var(--bg-2) 40%, var(--bg));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background-repeat: no-repeat;
  background-size: cover;  /* This keeps the gradient filling the whole screen*/
  background-attachment: fixed;
}

img{max-width:100%; height:auto; display:block}
button{font:inherit}

/* Focus styles (accessibility) */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:8px}

/* ---------- Layout ---------- */
.container{max-width:1100px; margin:0 auto; padding:24px}

header{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0}
.brand{font-weight:800; letter-spacing:.2px; font-size:2.5rem}
.brand span{color:var(--accent)}
.pill{background:rgba(255,255,255,.06); border:1px solid var(--border); padding:6px 10px; border-radius:999px; font-size:12px; color:var(--muted)}
.auth{display:flex; align-items:center; gap:8px}

/* Tabs (Parents/Coaches) */
.tabs{display:flex; gap:10px; align-items:center; justify-content:center; margin:8px 0 18px}
.tab{padding:10px 14px; border-radius:999px; border:1px solid var(--border); background:#f3f4f8; color:var(--ink); cursor:pointer}
.tab:hover{filter:brightness(1.05)}
.tab.active{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#e8ebee; font-weight:700; border:none}
.view.hidden{display:none !important}

/* Cards */
.card{background:var(--card); border:1px solid var(--border-2); border-radius:16px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.25)}

/* Typography */
h1,h2,h3{margin:0 0 10px}
h2{font-size:1.40rem}
.muted{color:var(--muted); font-size:.95rem}
.note{font-size:.9rem; color:var(--muted); margin:8px 0 0}

/* Custom Header Styling */
.white-title{
  color: #ffffff;
  font-weight: 700;
}

.footer-title{  
  color: #ffffff;
  font-weight: 200;
}

/* Forms */
label{display:block; font-size:.95rem; color:white; margin:8px 0 6px}
input,select,textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--ink);
}
textarea{min-height:92px; resize:vertical}
.row{display:flex; gap:10px}
.row>div{flex:1}

/* Disabled form visual (JS toggles .disabled-form on #addCard) */
.disabled-form{opacity:.5; filter:grayscale(40%)}

/* Buttons */
.btn{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#ebedf0;
  border-color:rgba(9, 6, 178, 0.35);
  color:var(--ink);
  cursor:pointer;
  text-decoration:none;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#5889d3;
  border:none;
  font-weight:700;
}
.btn.danger{
  background:rgba(239, 71, 111, 0.16);
  border-color:rgba(239, 71, 111, 0.35);
  color:#ff9bb0;
}
.btn.danger:hover{background:rgba(239, 71, 111, 0.22)}

/* Toolbars & Filters */
.toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.filters{
  display:grid;
  gap:8px;
  grid-template-columns:repeat(2,1fr)
}
@media(min-width:900px){
  .filters{grid-template-columns:repeat(4,1fr)}
}

/* Results list */
.list{
  display:grid;
  gap:12px;
  grid-template-columns: 1fr;        /* force vertical stacking */
}

/* Each tryout "white box" */
.item{
  display:grid;
  gap:12px;
  grid-template-columns:1fr auto;
  align-items:start;
  padding:14px;
  border-radius:14px;
  background:hwb(210 92% 7%);
  border:1px solid var(--border-2);
  
  /* prevent horizontal stretching */
  max-width:100%;
  box-sizing:border-box;
  overflow-wrap:break-word;
  word-wrap:break-word;
  word-break:break-word;
}

/* Make sure text inside also wraps nicely */
.item p,
.item div,
.item span{
  overflow-wrap:break-word;
  word-wrap:break-word;
  word-break:break-word;
}

.item h3{
  margin:0;
  font-size:1rem;
}

.badge{
  font-size:.75rem;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
}

/* Footer */
.footer{margin-top:28px; color:var(--muted); font-size:.9rem}

/* Responsive */
@media (max-width:720px){
  header{flex-direction:column; align-items:flex-start}
  .row{flex-direction:column}
  .item{grid-template-columns:1fr}
}

/* Print (just in case someone prints a list) */
@media print{
  body{background:#fff; color:#111}
  .card, .item{box-shadow:none; background:#fff; border-color:#ddd}
  .tabs, .auth, .footer{display:none}
}

/* Force very long words/URLs in result items to wrap */
.item,
.item * {
  overflow-wrap: anywhere;   /* modern, best option */
  word-wrap: break-word;     /* older name, good fallback */
  word-break: break-all;     /* as a last resort, break anywhere */
}

.item a {
  display: inline-block;
  max-width: 100%;
}
/* ---- Fix long URLs and white boxes in results ---- */

/* Make each result in #results stack vertically */
#results {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Style each "white box" (each direct child of #results) */
#results > div {
  padding: 14px;
  border-radius: 14px;
  background: hwb(210 92% 7%);
  border: 1px solid var(--border-2);

  /* IMPORTANT: prevent horizontal stretching */
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;   /* allow very long words/URLs to wrap */
  word-wrap: break-word;
  word-break: break-all;
}

/* Make sure all nested text inside also wraps */
#results > div * {
  overflow-wrap: anywhere;
  word-wrap: break-word;
  word-break: break-all;
}
/* ---- HARD STOP: Keep white boxes inside blue card ---- */

.card {
  max-width: 100%;
  overflow: hidden;   /* prevents children from escaping */
}

#results {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;  /* kills horizontal scrolling */
}

/* Each white tryout listing */
#results > div {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  /* FORCE long URLs to wrap */
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

/* Also force ALL text inside to obey wrapping */
#results > div * {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

/* Extra protection for raw links */
#results a {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ===== FINAL WRAP & NO-HORIZONTAL-SCROLL FIX ===== */

/* Never let the page be wider than the viewport */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* The main container and blue cards stay within viewport */
.container,
.card {
  max-width: 100%;
}

/* Anything inside a blue card (including long URLs) must wrap */
.card * {
  max-width: 100%;
  overflow-wrap: anywhere;   /* modern wrapping */
  word-wrap: break-word;     /* fallback */
  word-break: break-word;    /* break long URLs/words */
  white-space: normal;       /* NO single-line/nowrap */
}