/* Minimal mobile-first styles for Phase 1 */
body{font-family:Inter,system-ui,Arial,sans-serif;margin:0;padding:0;background:#f7f7f8;color:#111}
.container{max-width:680px;margin:0 auto;padding:18px}
/* Mobile-first styles */
:root{
	--bg-overlay: rgba(0,0,0,0.24);
	--card-bg: rgba(255,255,255,0.9);
	--accent: #0b69ff;
}
html,body{height:100%;}
.body, body{font-family:Inter,system-ui,Arial,sans-serif;margin:0;padding:0;color:#111;background-color:#1f7a36;-webkit-font-smoothing:antialiased}
.container{max-width:680px;margin:0 auto;padding:20px}
main.container{min-height:100vh;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:16px;padding:24px;position:relative;box-sizing:border-box}
h1{font-size:1.25rem;margin:0 0 8px}
/* Card */
/* min-width:0 matters: .card is a flex item of main.container, and a flex
   item's default min-width:auto refuses to shrink below its content's
   min-content width. Without it a wide table stretches the card past the
   viewport and the whole page scrolls sideways instead of the table
   scrolling inside the card. */
.card{width:100%;max-width:420px;min-width:0;background:var(--card-bg);border-radius:12px;padding:18px;box-shadow:0 6px 24px rgba(0,0,0,0.18);backdrop-filter: blur(4px)}
form label{display:block;margin-bottom:12px;font-size:0.95rem}
input[type=email],input[type=password],input[type=text],input[type=number],input[type=date],input[type=datetime-local]{padding:10px;border:1px solid #d7d7d7;border-radius:8px;font-size:1rem;max-width:100%;box-sizing:border-box}
input[type=email],input[type=password]{width:90%}
button{display:inline-block;padding:10px 14px;border:0;border-radius:8px;background:var(--accent);color:#fff;font-weight:600}
.error{background:#ffe6e6;color:#900;padding:8px;border-radius:8px;margin-bottom:12px}

/* small screens */
@media (max-width:420px){
	.card{padding:14px;border-radius:10px}
	input[type=email],input[type=password]{padding:10px}
	button{width:100%;padding:12px}
}

/* Tables responsive: scroll within the table itself rather than forcing the
   whole page to scroll horizontally on a narrow phone. */
table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-collapse:collapse;margin-top:12px}
thead th{font-size:0.85rem;text-align:left;padding:8px;white-space:nowrap}
tbody td{padding:8px;border-top:1px solid #eee;font-size:0.95rem}

/* Stacked tables: below 560px a `.stacked-table` stops being a grid and
   becomes one bordered card per row, each cell labelled from its
   data-label attribute. Four columns of names and team names never fit a
   phone otherwise, and side-scrolling a table on a touch screen is
   miserable. Above 560px it falls back to the normal table above. */
@media (max-width:560px){
	.stacked-table,
	.stacked-table tbody,
	.stacked-table tr{display:block;width:100%;box-sizing:border-box}
	.stacked-table{overflow-x:visible}
	.stacked-table thead{display:none}
	.stacked-table tr{
		border:1px solid rgba(46,204,64,0.35);border-radius:12px;
		padding:6px 12px;margin:0 0 10px;background:rgba(46,204,64,0.06)
	}
	.stacked-table td{
		display:flex;align-items:baseline;justify-content:space-between;gap:14px;
		width:100%;box-sizing:border-box;
		border:0;border-top:1px solid rgba(255,255,255,0.08);
		padding:7px 0;font-size:0.9rem;text-align:right
	}
	.stacked-table tr td:first-child{border-top:0}
	.stacked-table td::before{
		content:attr(data-label);flex:0 0 auto;
		text-align:left;font-weight:600;font-size:0.78rem;
		text-transform:uppercase;letter-spacing:0.04em;color:#9fb3a6
	}
	.stacked-table td:first-child{font-weight:700;font-size:1rem}
	/* .stacked-titled: the first column is the row's subject (a player's
	   name), so it reads as the card's heading rather than a labelled
	   field — repeating "PLAYER" above every name is just noise. */
	.stacked-table.stacked-titled td:first-child{justify-content:flex-start;text-align:left;font-size:1.05rem;padding:4px 0 9px}
	.stacked-table.stacked-titled td:first-child::before{display:none}
	/* A cell whose content is a whole control block (a <details>, a form)
	   rather than a labelled value. */
	.stacked-table td.cell-block{display:block;text-align:left;padding:10px 0 4px}
	.stacked-table td.cell-block::before{display:none}
}
/* Long unbroken values — emails, audit detail strings — must be allowed to
   break mid-token or they set the table's min-content width single-handed. */
.cell-wrap{overflow-wrap:anywhere;word-break:break-word}

/* utility */
.muted{color:#666;font-size:0.9rem}

/* Phase 3: picks, dashboard, statuses */
.success{background:#e6f7ee;color:#0a6b3a;padding:8px;border-radius:8px;margin-bottom:12px}
.banner-out{background:#fff4e0;color:#8a5a00;padding:10px;border-radius:8px;margin-bottom:12px;font-weight:600}
.banner-admin{background:rgba(255,196,0,0.14);border:1px solid #ffc400;color:#ffd93d;padding:10px 12px;border-radius:10px;margin-bottom:12px;font-size:0.88rem}

/* "Picking as" selector — admins only (picks.php). */
.as-picker{display:flex;align-items:center;gap:10px;margin:10px 0 14px}
.as-picker label{margin:0;flex:0 0 auto;font-size:0.72rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:#9fb3a6}
.as-picker select{flex:1 1 auto;min-width:0;padding:10px;border:1px solid #2ecc40;border-radius:10px;background:rgba(46,204,64,0.08);color:#eafaf0;font-size:16px;font-weight:700}
.as-picker select option{background:#0c2213;color:#eafaf0}
/* No-JS fallback for the selector; forms.js hides it once it can auto-submit. */
.as-picker .as-picker-go{flex:0 0 auto;margin:0;padding:10px 14px;font-size:0.8rem;font-weight:700;border-radius:10px}
[hidden]{display:none !important}
.cta{display:inline-block;background:var(--accent);color:#fff;padding:10px 14px;border-radius:8px;font-weight:600;text-decoration:none}

.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:0.8rem;font-weight:600}
.badge-alive{background:#e6f7ee;color:#0a6b3a}
.badge-eliminated{background:#fdeaea;color:#a30f0f}

.status-block{margin:14px 0}

.player-board{list-style:none;margin:8px 0;padding:0}
.player-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid #eee;flex-wrap:wrap}
.player-row-eliminated{opacity:0.6}
.player-name{font-weight:600;min-width:80px}
.player-pick{margin-left:auto;font-size:0.9rem}

.countdown{font-weight:600;color:var(--accent)}

.competition-heading{font-size:1rem;margin:18px 0 6px;color:#333}
.fixture-row{border-top:1px solid #eee;padding:10px 0}
.fixture-kickoff{font-size:0.85rem;color:#666;margin-bottom:6px}
.team-options{display:flex;gap:8px;flex-wrap:wrap}
.team-option{
	--team-color:#999999;
	--team-text:#000000;
	flex:1 1 45%;display:flex;align-items:center;gap:8px;border:1px solid rgba(0,0,0,0.15);border-radius:8px;padding:10px;font-size:0.95rem;font-weight:600;cursor:pointer;
	background:var(--team-color);
	color:var(--team-text);
	accent-color:var(--team-text);
}
.team-option input[type=radio]{width:18px;height:18px;flex:0 0 18px}
.team-option-disabled{opacity:0.45;cursor:not-allowed}

.team-badge{
	--team-color:#999999;
	--team-text:#000000;
	display:inline-block;background:var(--team-color);color:var(--team-text);
	padding:8px 16px;border-radius:10px;font-weight:700;font-size:1rem;margin:4px 0 10px
}
.used-label{margin-left:auto;font-size:0.7rem;font-weight:600;white-space:nowrap;background:rgba(255,255,255,0.85);color:#900;padding:2px 8px;border-radius:999px}

@media (max-width:420px){
	.team-option{flex:1 1 100%}
}

/* Phase 4/5: outcome badges, ledger, history */

.outcome-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:0.78rem;font-weight:600}
.outcome-win{background:#e6f7ee;color:#0a6b3a}
.outcome-draw{background:#fff4e0;color:#8a5a00}
.outcome-loss{background:#fdeaea;color:#a30f0f}
.outcome-void{background:#eee;color:#555}
.outcome-pending{background:#eaf1ff;color:#0b48a3}
.outcome-nopick{background:#f3f3f3;color:#888}

.ledger-table td, .ledger-table th{white-space:nowrap}
.paid-yes{color:#0a6b3a;font-weight:600}
.paid-no{color:#a30f0f;font-weight:600}
.mini-btn{padding:4px 10px;font-size:20px;border-radius:6px;margin:1rem 0}
.result-select{font-size:20px;margin-bottom:1em}

.stat-table td, .stat-table th{font-size:0.88rem}
.round-summary{border-top:1px solid #eee;padding:10px 0}

/* Phase 7: bottom tab bar + logout FAB (used on every logged-in page) */
body{padding-bottom:78px}
.tab-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;background:#0b0f0c;border-top:1px solid #1f2b22;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.tab-bar a{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:2px;color:#9aa39c;text-decoration:none;font-size:0.65rem;padding:4px 2px;border-radius:8px}
.tab-bar a .tab-icon{font-size:1.2rem;line-height:1}
.tab-bar a.tab-active{color:#ffd400}
.logout-fab{position:fixed;top:14px;right:14px;z-index:51;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,0.55);border:1px solid #ffd400;color:#ffd400;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:1rem;box-shadow:0 2px 10px rgba(0,0,0,0.35)}

@media (max-width:360px){
	.tab-bar a{font-size:0.6rem}
	.tab-bar a .tab-icon{font-size:1.05rem}
}

/* Phase 7: dark "Steedy Ball" dashboard theme (dashboard_design.png) */
body.dark-theme{
	background:radial-gradient(ellipse 900px 500px at 50% 0%, #123a20 0%, #06170d 45%, #020604 100%);
	color:#eafaf0;
}
/* Column layout so a page's content area fills whatever the hero leaves,
   letting .page-action sit at the bottom of the viewport on short pages.
   100vh minus the 78px body padding that clears the fixed .tab-bar. */
body.dark-theme{display:flex;flex-direction:column;min-height:calc(100vh - 78px)}
body.dark-theme main.container{padding-top:0;min-height:0;flex:1 0 auto}
.dark-theme .hero{position:relative;width:100%;max-width:640px;margin:0 auto}
.dark-theme .hero img{display:block;width:100%;height:auto}

.dark-theme .card{
	background:linear-gradient(180deg, rgba(12,34,19,0.92), rgba(4,12,7,0.95));
	border:1px solid #2ecc40;
	box-shadow:0 0 22px rgba(46,204,64,0.35), inset 0 0 30px rgba(0,0,0,0.35);
	backdrop-filter:none;
	color:#eafaf0;
	max-width:520px;
}
.dark-theme h1{color:#fff;font-size:1.35rem}
.dark-theme .muted{color:#9fb3a6}
.dark-theme a{color:#7fe38f}
.dark-theme a.cta-pill{color:#1a1200}
.dark-theme a.outline-pill{color:#eafaf0}

/* .competition-heading is #333 for the light theme — invisible on the dark
   card background used by picks.php. */
.dark-theme .competition-heading{color:#eafaf0}

/* Tables inherit light-theme hairlines (#eee) that glare on the dark card. */
.dark-theme thead th{color:#9fb3a6}
.dark-theme tbody td{border-top-color:rgba(255,255,255,0.12)}
.dark-theme .round-summary{border-top-color:rgba(255,255,255,0.12)}
.dark-theme h2{font-size:1.05rem;margin:20px 0 8px;color:#fff}

.accent-yellow{color:#ffd93d}

.welcome-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}

.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:999px;font-weight:700;font-size:0.75rem;letter-spacing:0.02em;white-space:nowrap}
.pill-alive{background:rgba(46,204,64,0.14);border:1px solid #2ecc40;color:#4ee36b}
.pill-eliminated{background:rgba(220,53,69,0.14);border:1px solid #dc3545;color:#ff6b7a}
.pill-sm{font-size:0.65rem;padding:3px 9px}

.info-row{display:flex;align-items:center;gap:8px;color:#c7d6cc;font-size:0.9rem;margin:9px 0;flex-wrap:wrap}
.info-row .owe{color:#ff6b7a;font-weight:700}
.info-row .paid-ok{color:#4ee36b;font-weight:700}

.cta-pill,.outline-pill{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;margin-top:14px;padding:14px 16px;text-decoration:none;border-radius:999px;font-size:0.9rem;text-align:center}
.cta-pill{background:linear-gradient(180deg,#ffe14d,#ffc400);color:#1a1200;font-weight:800;box-shadow:0 0 18px rgba(255,196,0,0.55);border:0}
.outline-pill{border:1px solid #2ecc40;color:#eafaf0;background:rgba(46,204,64,0.08);font-weight:700}

.section-divider{display:flex;align-items:center;gap:10px;color:#eafaf0;font-weight:800;letter-spacing:0.06em;font-size:0.8rem;margin:22px 0 12px;text-transform:uppercase}
.section-divider::before,.section-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg, transparent, #2ecc40)}
.section-divider::after{background:linear-gradient(90deg,#2ecc40,transparent)}

.dark-player-list{list-style:none;margin:0 0 14px;padding:0;width:100%;max-width:520px}
.player-row-card{display:flex;align-items:center;gap:10px;background:linear-gradient(180deg, rgba(12,34,19,0.9), rgba(4,12,7,0.92));border:1px solid #2ecc40;border-radius:14px;padding:10px 12px;margin-bottom:10px;box-shadow:0 0 14px rgba(46,204,64,0.2)}
.player-row-card.player-row-eliminated{opacity:0.55;border-color:#5a3d3f}
.player-avatar{width:36px;height:36px;flex:0 0 36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:0.95rem}
.player-row-card .player-name{font-weight:700;color:#fff}
.player-row-card .player-pick{font-size:0.78rem;color:#9aa39c;margin-left:auto;white-space:nowrap}
.player-row-card .chevron{color:#4ee36b;font-weight:700}

/* Bottom-anchored page action (picks.php "Back to dashboard").
   main.container is a flex column with a full-height min-height, so
   margin-top:auto drops this to the bottom of the viewport when the page is
   short and simply lets it follow the content when the page scrolls. The
   container's min-height stops 78px short of the viewport so this never ends
   up underneath the fixed .tab-bar. */
.page-action{width:100%;max-width:520px;margin-top:auto;padding-top:18px}
.page-action .outline-pill{margin-top:0}

/* Admin section switcher (app/views/admin-nav.php) — replaces the row of
   text links the admin pages used to carry. Auto-fit so it lands as two rows
   of three on a phone and one row on anything wider. */
.admin-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px;width:100%;margin:4px 0 16px}
.admin-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:62px;padding:10px 6px;border:1px solid #2ecc40;border-radius:12px;background:rgba(46,204,64,0.08);text-decoration:none;font-size:0.7rem;font-weight:700;letter-spacing:0.02em;text-align:center;line-height:1.2}
.admin-tile-icon{font-size:1.2rem;line-height:1}
.admin-tile-active{background:linear-gradient(180deg,#ffe14d,#ffc400);border-color:#ffc400;box-shadow:0 0 14px rgba(255,196,0,0.35)}
.dark-theme a.admin-tile{color:#eafaf0}
.dark-theme a.admin-tile-active{color:#1a1200}

/* "Manage" disclosure inside an admin row: a full-width tap target rather
   than a hairline triangle, with its forms stacked underneath. */
details.manage{margin-top:2px}
/* Leave the summary's own display alone — overriding it to flex costs the
   element its disclosure role and, in some engines, its click-to-toggle
   behaviour. The pill is an inner span instead. */
details.manage>summary{list-style:none;cursor:pointer;padding:0;margin:0;-webkit-user-select:none;user-select:none}
details.manage>summary::-webkit-details-marker{display:none}
details.manage>summary::marker{content:''}
.manage-summary{
	display:flex;align-items:center;justify-content:center;gap:8px;
	padding:11px 14px;border:1px solid #2ecc40;border-radius:999px;
	background:rgba(46,204,64,0.08);color:#eafaf0;font-weight:700;font-size:0.8rem
}
details.manage[open] .manage-summary{background:rgba(46,204,64,0.2)}
details.manage + details.manage{margin-top:8px}
/* Row form of the pill: swatch, name, and a right-aligned affordance. */
.manage-summary-row{justify-content:flex-start;gap:10px;border-radius:12px;padding:10px 14px}
.manage-summary-name{flex:1 1 auto;text-align:left;overflow-wrap:anywhere}
.manage-summary-hint{flex:0 0 auto;font-size:0.7rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:#4ee36b}
details.manage[open] .manage-summary-hint::after{content:'\00a0\25B4'}
details.manage:not([open]) .manage-summary-hint::after{content:'\00a0\25BE'}
.colour-dot{flex:0 0 16px;width:16px;height:16px;border-radius:50%;border:1px solid rgba(255,255,255,0.35)}
.manage-form input[type=color]{width:46px;height:34px;padding:2px;border-radius:8px;flex:0 0 46px}
.manage-form select{padding:10px;border:1px solid #d7d7d7;border-radius:8px;font-size:16px}

.manage-form{display:flex;flex-direction:column;gap:8px;margin:12px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,0.1)}
.manage-form:first-of-type{border-top:0}
.manage-form label{display:flex;flex-direction:column;gap:5px;margin:0;font-size:0.78rem;font-weight:600;color:#9fb3a6;text-transform:uppercase;letter-spacing:0.04em}
.manage-form label.check-row{flex-direction:row;align-items:center;gap:8px;text-transform:none;font-size:0.9rem;letter-spacing:0}
.manage-form input[type=text],.manage-form input[type=email],.manage-form input[type=password],.manage-form input[type=number],.manage-form input[type=date],.manage-form input[type=datetime-local],.manage-form select{width:100%;box-sizing:border-box;font-size:16px}
.manage-form input[type=checkbox]{width:20px;height:20px;flex:0 0 20px}
.manage-form button,.manage-form .mini-btn{width:100%;margin:0;padding:12px 14px;font-size:0.9rem;font-weight:700;border-radius:10px}
.mini-btn-danger{background:#a32a34}
.audit-detail{background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.12);color:#eafaf0;padding:10px;border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:0.85rem;margin:0 0 10px}

/* Division tiles (picks.php) */
.division-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.division-tile{display:flex;flex-direction:column;gap:4px;padding:16px 12px;border:1px solid #d7d7d7;border-radius:12px;text-decoration:none;color:#111;background:#fafafa}
.division-tile-name{font-weight:700}
.division-tile-count{font-size:0.8rem;color:#666}
.dark-theme a.division-tile{background:rgba(46,204,64,0.08);border-color:#2ecc40;color:#eafaf0}
.dark-theme .division-tile-count{color:#9fb3a6}
@media (max-width:420px){
	.division-tiles{grid-template-columns:1fr}
}