/* Round Towers CLG – Match Planner | style.css */
/* Font imported via <link> in index.html — no @import needed here */
:root{
  --bg:#f2f4f7; --surf:#ffffff; --surf2:#f8fafc; --bdr:#e2e8f0;
  --green:#15803d; --bright:#16a34a; --dim:#dcfce7; --lime:#22c55e;
  --cream:#1a1c1e; --muted:#64748b; --red:#dc2626;
  --tg-bdr:#16a34a; --tg-hi:#15803d; --tg-bg:#f0fdf4; --tg-bdg-bg:#dcfce7; --tg-bdg-tx:#15803d;
  --tw-bdr:#94a3b8; --tw-hi:#334155; --tw-bg:#f8fafc; --tw-bdg-bg:#f1f5f9; --tw-bdg-tx:#334155;
  --tb-bdr:#3b82f6; --tb-hi:#2563eb; --tb-bdg-bg:#dbeafe; --tb-bdg-tx:#1d4ed8;
  --on-bg:rgba(22,163,74,.12); --on-bdr:rgba(22,163,74,.45); --off-bg:#f1f5f9; --off-col:#94a3b8;
}
/* ── Lucide icons ── */
[data-lucide],svg.lucide{display:inline-block;vertical-align:middle;width:1em;height:1em;stroke-width:2;}
.tab-icon [data-lucide],.tab-icon svg{width:22px;height:22px;}
button [data-lucide],button svg.lucide{width:14px;height:14px;margin-right:2px;}
/* ── Team colour dots ── */
.team-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;flex-shrink:0;vertical-align:middle;}
.dot-g{background:var(--green);} .dot-w{background:#94a3b8;} .dot-b{background:var(--tb-bdr);}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;font-size:14px;}
body{font-family:-apple-system,'Roboto',sans-serif;background:var(--bg);color:var(--cream);min-height:100vh;}

header{display:none;}

/* ── Avatar button + dropdown ── */
.avatar-btn{width:32px;height:32px;border-radius:50%;background:var(--green);color:#fff;border:none;cursor:pointer;font-size:11px;font-weight:800;font-family:-apple-system,sans-serif;display:flex;align-items:center;justify-content:center;letter-spacing:.5px;box-shadow:0 1px 4px rgba(21,128,61,.35);flex-shrink:0;transition:background .15s;}
.avatar-btn:hover{background:var(--bright);}
.avatar-menu{display:none;position:fixed;right:14px;top:58px;background:var(--surf);border:1px solid var(--bdr);border-radius:16px;padding:8px;min-width:200px;box-shadow:0 8px 28px rgba(0,0,0,.14);z-index:1000;}
.avatar-menu.open{display:block;}
.avatar-menu-email{font-size:11px;color:var(--muted);word-break:break-all;padding:6px 10px 10px;border-bottom:1px solid var(--bdr);margin-bottom:6px;}
.avatar-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:none;border-radius:10px;background:transparent;cursor:pointer;font-family:-apple-system,sans-serif;font-size:14px;font-weight:600;color:var(--cream);text-align:left;transition:background .14s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.avatar-menu-item:hover{background:var(--surf2);}
.avatar-menu-item [data-lucide]{width:16px;height:16px;flex-shrink:0;color:var(--muted);}
.avatar-menu-item--danger{color:var(--red);}
.avatar-menu-item--danger [data-lucide]{color:var(--red);}
.avatar-menu-item--danger:hover{background:rgba(220,38,38,.07);}

/* ── Past date / match-ended read-only mode ── */
#pg-sat.is-readonly .mbb-actions button{pointer-events:none;opacity:.35;cursor:not-allowed;}
#pg-sat.is-readonly .squad-builder{opacity:.7;pointer-events:none;user-select:none;}
#pg-sat.is-readonly .sport-day-pill{pointer-events:none;opacity:.55;}
#pg-sat.is-readonly .mobile-team-tabs{pointer-events:none;opacity:.55;}
#pg-sat.is-readonly .teams-onboarding button{pointer-events:none;opacity:.5;}
/* Per-team read-only (only locks that team's card, other team stays editable) */
#pg-sat.is-readonly-g .md-card--g .sb-pool{opacity:.7;pointer-events:none;user-select:none;}
#pg-sat.is-readonly-g .md-card--g .md-avail-edit-btn{display:none;}
#pg-sat.is-readonly-w .md-card--w .sb-pool{opacity:.7;pointer-events:none;user-select:none;}
#pg-sat.is-readonly-w .md-card--w .md-avail-edit-btn{display:none;}
.readonly-banner{
  background:#fef3c7;border:none;border-bottom:2px solid #f59e0b;
  border-radius:0;padding:10px 16px;font-size:13px;font-weight:700;
  color:#92400e;text-align:center;display:flex;align-items:center;
  justify-content:center;gap:7px;flex-shrink:0;
}
.readonly-banner--ft{
  background:#dcfce7;border-bottom-color:#16a34a;color:#166534;
}

/* ── Match page read-only mode ── */
#pg-pitch.is-readonly .sdp-timer-wrap button,
#pg-pitch.is-readonly .sdp-timer-time{pointer-events:none;opacity:.4;cursor:not-allowed;}
#pg-pitch.is-readonly .sdp-row button{pointer-events:none;opacity:.35;cursor:not-allowed;}
/* Subs view read-only: show pitch layout but block interactive actions */
#pg-pitch.is-readonly .gaa-pin{pointer-events:none;cursor:default;}
#pg-pitch.is-readonly .bench-player{pointer-events:none;cursor:default;opacity:.7;}
#pg-pitch.is-readonly #subPending{display:none!important;}
#pg-pitch.is-readonly .sub-schedule-apply-btn,
#pg-pitch.is-readonly .pts-toggle-wrap{pointer-events:none;opacity:.4;cursor:not-allowed;}
#pg-pitch.is-readonly .pmb-btn--subs{opacity:.6;}/* keep mode switcher usable but dim */

/* shared pill style for both header controls */
.tog,.date-pill{
  display:flex;align-items:center;
  background:rgba(255,255,255,0.8);
  border:1px solid var(--bdr);
  border-radius:22px;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  padding:3px;}
.tog{gap:0;}
.tog button{padding:7px 16px;border:none;cursor:pointer;font-family:-apple-system,sans-serif;
  font-size:13px;font-weight:700;background:transparent;color:var(--muted);
  transition:all .2s;white-space:nowrap;border-radius:18px;}
.tog button.on{background:var(--green);color:#fff;box-shadow:0 1px 6px rgba(21,128,61,.3);}

.date-pill{gap:7px;padding:7px 14px;cursor:pointer;}
.date-pill svg{width:15px;height:15px;color:var(--green);flex-shrink:0;}
.date-pill input,.date-pill .flatpickr-input{
  border:none;background:transparent;outline:none;padding:0;margin:0;
  font-family:-apple-system,sans-serif;font-size:13px;font-weight:700;
  color:var(--cream);width:110px;cursor:pointer;caret-color:transparent;}
.date-pill .flatpickr-input[readonly]{cursor:pointer;}

/* ── Settings popup menu ── */
.nsm-backdrop{display:none;position:fixed;inset:0;z-index:61;}
.nsm-backdrop.open{display:block;}
.nav-settings-menu{
  display:none;flex-direction:column;
  position:fixed;right:16px;
  bottom:calc(88px + env(safe-area-inset-bottom));
  background:var(--surf);border:1px solid var(--bdr);border-radius:16px;
  padding:8px;min-width:210px;
  box-shadow:0 8px 28px rgba(0,0,0,.14);z-index:62;
}
.nav-settings-menu.open{display:flex;}
.nsm-user{font-size:11px;color:var(--muted);word-break:break-all;padding:6px 10px 10px;border-bottom:1px solid var(--bdr);margin-bottom:6px;}
.nsm-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:none;border-radius:10px;background:transparent;cursor:pointer;font-family:-apple-system,sans-serif;font-size:14px;font-weight:600;color:var(--cream);text-align:left;transition:background .14s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.nsm-item:hover{background:var(--bg);}
.nsm-item [data-lucide]{width:16px;height:16px;flex-shrink:0;color:var(--muted);}
.nsm-item--danger{color:var(--red);}
.nsm-item--danger [data-lucide]{color:var(--red);}

nav{
  display:flex;
  position:fixed;
  bottom:calc(12px + env(safe-area-inset-bottom));
  left:16px;right:16px;
  z-index:60;
  border-radius:28px;
  background:rgba(220,242,228,0.55);
  backdrop-filter:blur(28px) saturate(200%);
  -webkit-backdrop-filter:blur(28px) saturate(200%);
  border:1px solid rgba(255,255,255,0.75);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.12),
    0 2px 8px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 0 rgba(0,0,0,0.04);
  padding:4px 6px;
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:8px 4px 7px;cursor:pointer;color:rgba(100,116,139,0.75);
  transition:all .22s cubic-bezier(.34,1.56,.64,1);user-select:none;border-radius:22px;
  position:relative;
}
.tab.on{
  color:var(--green);
  background:rgba(255,255,255,0.65);
  box-shadow:
    0 2px 12px rgba(21,128,61,0.12),
    0 1px 4px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.9);
  transform:translateY(-1px);
}
.tab-icon{font-size:21px;line-height:1;}
.tab-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;}

/* ── Nav: tight fit on SE 2/3 (375px) ── */
@media (max-width:390px){
  nav{left:8px;right:8px;padding:3px 3px;}
  .tab{padding:7px 2px 6px;}
  .tab-label{font-size:8px;letter-spacing:0;}
  .tab-icon [data-lucide],.tab-icon svg{width:19px;height:19px;}
}

/* ── Nav: icon-only on SE 1st gen (320px) ── */
@media (max-width:330px){
  nav{left:6px;right:6px;}
  .tab{padding:9px 2px;}
  .tab-label{display:none;}
}

/* ── Nav: dark mode overlay when home page is active ── */
body.home-active nav{
  background:rgba(28,28,30,0.72);
  border-color:rgba(255,255,255,0.1);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.45),
    0 2px 8px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.2);
}
body.home-active .tab{
  color:rgba(255,255,255,0.55);
}
body.home-active .tab.on{
  color:var(--green);
  background:rgba(255,255,255,0.12);
  box-shadow:
    0 2px 12px rgba(21,128,61,0.2),
    0 1px 4px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.15);
}

.page{display:none;} .page.on{display:block;}

/* ── Offline banner ── */
.offline-banner{position:fixed;top:0;left:0;right:0;z-index:9999;
  display:flex;align-items:center;gap:8px;padding:10px 16px;
  background:#dc2626;color:#fff;font-size:12px;font-weight:700;letter-spacing:.2px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);}