/* ==========================================================================
	ptdarts_friday.css
	Site-specific exceptions on top of Bootstrap. Bootstrap (with
	data-bs-theme="dark", set in header.php) already handles: body background/
	text colour, font family, form control styling (.form-control/.form-select/
	.btn), spacing utilities, borders, shadows and border-radius. This file
	only overrides or adds things Bootstrap has no equivalent for.
	
	Wherever possible, values are pulled from Bootstrap's own CSS variables
	(--bs-*) rather than hard-coded, so this file stays in sync with the
	theme automatically. Genuinely custom brand values (the site's green
	accent, win/loss/draw colours, button colours) are defined here.
========================================================================== */

:root {
	/* Brand colours - not part of Bootstrap's palette */
	--accent: #009900;
	--button1_colour: #009900;
	--button1_hover: #5f7843;
	--button1_text: #fff;
	--button2_colour: #e3df86;   /* dartboard cream */
	--button2_hover:  #d1bc6f;   /* darker cream for hover */
	--button2_text: #000;
	
	/* Result colours */
	--win: #0F7A0F;
	--loss: #990000;
	--draw: #808000;
	
	/* Aliases onto Bootstrap's own dark-theme variables, so existing
		markup/classes that reference these names keep working but now
	track the Bootstrap theme instead of a separate hard-coded palette */
	--panel-bg: #222;
	--panel-bg-2: #2a2a2a;
	--header-bg: #333;
	--border: var(--bs-border-color);
	--text: var(--bs-body-color);
	--muted: var(--bs-secondary-color);
	--radius: var(--bs-border-radius);
	--shadow: rgba(0, 0, 0, 0.2);
	--panel-translucent: rgba(20, 20, 20, 0.92);
	
	--max-table: 1280px;
	
	/* Standard data-table sizing - change here to resize every table */
	--table-font: 0.952em;
	--cell-pad-y: 0.84px;
	--cell-pad-x: 5px;
}

/* NOTE: no html/body background, color, font-family or padding rule here -
	Bootstrap + header.php's inline theme already set those. Duplicating
	them here previously caused the page background image to get
overridden depending on stylesheet load order. */

/* ------------------ HEADINGS ------------------
	Bootstrap doesn't centre headings or give them an accent colour, so
this is a genuine exception. */
h1, h2, h3, h4 {
	color: var(--accent);
	text-align: center;
	font-weight: bold;
}
/* Bootstrap's own default sizes (h1 2.5rem, h2 2rem, h3 1.75rem, h4
	1.5rem) read too large for report/panel titles on this site, so this
scales them down ~33% as the standard across all pages. */
h1 { font-size: 1.68rem; }
h2 { font-size: 1.34rem; }
h3 { font-size: 1.17rem; }
h4 { font-size: 1.0rem; }

/* ------------------ RAW FORM CONTROLS ------------------
	Prefer Bootstrap's .form-control / .form-select / .btn classes in
	markup going forward. This block only exists to style plain
	<select>/<button>/<input> elements on pages that don't yet use those
	classes, and pulls its look from Bootstrap's own variables rather than
a separate palette. */
select:not(.form-select), input:not(.form-control), button:not(.btn) {
	padding: 0.5em;
	margin: 0.5em 0;
	background: var(--panel-bg);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-size: 1em;
	outline: none;
}
select:focus:not(.form-select),
input:focus:not(.form-control),
button:focus:not(.btn) {
	box-shadow: 0 0 0 3px rgba(114, 171, 52, 0.12);
}

/* ------------------ TABLE LAYOUT ------------------
	The boxed, spaced-out, fade-in results/fixtures tables are a bespoke
look Bootstrap's default .table doesn't provide. */
.table-wrapper, .table-scroll {
	background: transparent;
}
.table-wrapper {
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 0 10px;
	overflow-x: auto;
}
.table-scroll {
	display: inline-block;
	max-width: 100%;
	overflow-x: auto;
}

table {
	width: 100%;
	max-width: var(--max-table);
	border-collapse: separate;
	border-spacing: 3px;
	margin-top: 1em;
	background: var(--panel-translucent);
	color: var(--text);
	font-size: 1em;
	opacity: 0;
	transition: opacity .5s ease-in-out;
	border: 1px solid rgba(255, 255, 255, 0.05);
	box-shadow: 0 0 8px var(--shadow);
}
table.visible {
	opacity: 1;
	animation: fadeIn .4s ease-in-out;
}

th, td:not(.score-cell) {
	padding: .3em .5em;
	border: 1px solid var(--border);
	text-align: center;
	background-color: var(--panel-bg);
	white-space: nowrap;
	box-shadow: 0 0 2px #000;
}

thead th {
	position: sticky;
	top: 0;
	background-color: var(--header-bg);
	z-index: 5;
}

.player-row:nth-child(odd) td:not(.score-cell) { background-color: var(--panel-bg); }
.player-row:nth-child(even) td:not(.score-cell) { background-color: var(--panel-bg-2); }

.player-table { margin: 0 auto; width: auto; table-layout: auto; font-size: var(--table-font); }
.player-table th, .player-table td { white-space: nowrap; padding: var(--cell-pad-y) var(--cell-pad-x); }

/* Standard striped rows for any .player-table: put header rows in <thead>
	and data rows in <tbody>. First data row is the darker shade. Division
header rows and drilldown rows keep their own backgrounds. */
.player-table tbody tr:not(.division-header):not(.drilldown-row):nth-child(odd) td:not(.score-cell) {
	background-color: var(--panel-bg);
}
.player-table tbody tr:not(.division-header):not(.drilldown-row):nth-child(even) td:not(.score-cell) {
	background-color: var(--panel-bg-2);
}

/* ------------------ RESULT COLOURING ------------------
	Semantic win/loss/draw colours - no Bootstrap equivalent that matches
the site's palette. */
.win-cell   { background-color: var(--win) !important;  color: #cfc; }
.loss-cell  { background-color: var(--loss) !important; color: #fcc; }
.empty-cell { background-color: var(--panel-bg) !important; color: var(--muted); }

.score-cell {
	font-size: 1em;
	font-weight: bold;
	padding: 0.4em;
	text-align: center;
	border-radius: 0;
	border: 1px solid var(--border);
}
.score-cell.neutral { background-color: var(--panel-bg); color: var(--text); }
.score-cell.winner  { background-color: var(--win);  color: #cfc; }
.score-cell.loser   { background-color: var(--loss); color: #fcc; }
.score-cell.draw    { background-color: var(--draw); color: #fff9c4; }
.score-transparent  { background-color: transparent !important; }

/* ------------------ ANIMATIONS ------------------
Bootstrap ships no keyframe animations, so all of these are exceptions. */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse {
	0%   { background-color: #555; }
	50%  { background-color: var(--accent); }
	100% { background-color: inherit; }
}
@keyframes rowGlow {
	0%   { background-color: #444444; box-shadow: 0 0 10px var(--accent); }
	50%  { background-color: #555555; box-shadow: 0 0 5px var(--accent); }
	100% { background-color: inherit; box-shadow: none; }
}
@keyframes scoreChange {
	0%   { transform: scale(1);    background-color: inherit; }
	30%  { transform: scale(1.25); background-color: var(--accent); color: #fff; }
	60%  { transform: scale(1.1);  background-color: inherit; }
	100% { transform: scale(1);    background-color: inherit; }
}

.player-row { animation: fadeIn .4s ease forwards; }
.player-row:hover { background-color: #444; transition: background-color .3s ease; }
td.updated { animation: pulse .8s ease-out; }
.row-highlight { animation: rowGlow .8s ease-in-out; }
.score-cell.updated {
	animation: scoreChange 0.8s ease-out;
	border: 2px solid var(--accent);
}
.fade-in { opacity: 0; animation: fadeIn .4s ease forwards; }

@media (prefers-reduced-motion: reduce) {
	.player-row, table.visible, .admin-fixtures { animation: none; transition: none; }
	td.updated { animation: none; }
}

/* ------------------ LINKS & UTILITY TEXT ------------------ */
.nowrap-label { white-space: nowrap; display: inline-block; }
.highlight    { color: #fff; background-color: var(--accent); padding: 1px 2px; border-radius: 3px; }
.team-link, .player-link { color: var(--accent); cursor: pointer; text-decoration: none; }
.team-link:hover, .player-link:hover, .player-link:focus { color: #fff; }

a:focus, button:focus, input:focus, select:focus, .team-link:focus {
	outline: 2px solid rgba(114, 171, 52, 0.18);
	outline-offset: 2px;
}

.drilldown-row td { background-color: #111; font-size: .95em; color: #ccc; padding: 20px; }

.filter-bar {
	padding: .5em; margin: .5em 0; background: var(--panel-bg);
	color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); font-size: 1em;
}
.filter-bar select { background: #444; color: #fff; border: 1px solid #666; padding: 5px 10px; border-radius: 4px; }

.last-updated, .status-text {
	font-weight: 400;
	text-align: right;
	font-size: .9em;
	color: var(--muted);
	font-style: italic;
	margin-bottom: 10px;
}

.status-cell { font-size: 1em; font-weight: bold; text-align: center; cursor: default; }
.status-cell[data-status="ok"]      { color: #32cd32; }
.status-cell[data-status="pending"] { color: var(--accent); }
.status-cell[data-status="missing"] { color: #ff4500; }

.division-header {
	background-color: #000;
	color: #fff;
	text-align: left;
}
.division-header th, .division-header td {
	background-color: transparent;
	color: #fff;
	font-weight: bold;
	font-size: 1.1em;
	padding: 6px;
	letter-spacing: 1px;
}

/* ------------------ ROTATED SEASON HEADERS ------------------
	Used on the all-time honours reports (180s, highest outs) to label
	Summer/Winter columns vertically. Summer gets a light amber tint,
Winter a light blue tint. */
.rotated-header {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: .8em;
	text-align: left;
	padding-top: 1ch;
	padding-bottom: 1ch;
}
.rotated-header.summer-col { background-color: #f5deb3 !important; color: #000; }
.rotated-header.winter-col { background-color: #add8e6 !important; color: #000; }

.back-button {
	display: inline-block;
	padding: 6px 12px;
	margin-top: 8px;
	background-color: var(--button1_colour);
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-weight: bold;
}
.back-button:hover { background-color: var(--button1_hover); }

/* ------------------ RESULT BUTTONS ------------------
	Standard site buttons for the Division A / Division B style toggles.
	appearance: none stops some browsers keeping native button chrome on
	<input type="submit"> in its resting state, which otherwise only
shows the correct colour once hovered/pressed. */
input.result-btn {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--button2_colour);
    color: #000; /* changed from white */
    padding: 10px 18px;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.25s ease;
}
.result-btn:hover { background-color: var(--button2_hover); }
.result-btn.active { background-color: var(--accent); color: #000; }

.report-footer {
	font-size: 0.85em;
	color: var(--muted);
	text-align: left;
	margin-top: 10px;
	font-style: italic;
}

/* Glass panel effect for all cards */
.card {
    background: rgba(20, 20, 20, 0.60) !important;
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
    border-radius: 14px !important;
	box-shadow:
	inset 0 0 12px rgba(255,255,255,0.05),
	0 6px 18px rgba(0,0,0,0.45);
}

/* Ensure card body stays glassy */
.card-body {
    background: transparent !important;
}

/* Remove all card headers */
.card-header {
    display: none !important;
    background: transparent !important;
    border-bottom: none !important;
    padding: 0 !important;
}

iframe {
    background: transparent !important;
}

.btn-pt-outline {
    color: var(--button1_colour);
    border: 1px solid var(--button1_colour);
    background: transparent;
    padding: 0.35rem 0.75rem;
    font-size: 0.9rem;
    border-radius: var(--radius);
    transition: background-color .25s ease, color .25s ease;
}
.btn-pt-outline:hover {
    background-color: var(--button1_colour);
    color: #fff;
}

/* Standard Bootstrap-style solid button using site green */
.btn-pt-solid {
    background-color: var(--button1_colour);
    border: 1px solid var(--button1_colour);
    color: #fff;
    padding: 0.35rem 0.75rem;
    font-size: 0.9rem;
    border-radius: var(--radius);
    transition: background-color .25s ease, border-color .25s ease;
}
.btn-pt-solid:hover {
    background-color: var(--button1_hover);
    border-color: var(--button1_hover);
    color: #fff;
}

/* Reset button (red) */
.btn-pt-reset {
    background-color: var(--button2_colour);
    border: 1px solid var(--button2_colour);
    color: #000; /* changed from white */
    padding: 0.35rem 0.75rem;
    font-size: 0.9rem;
    border-radius: var(--radius);
    transition: background-color .25s ease, border-color .25s ease;
}
.btn-pt-reset:hover,
.btn-pt-reset:focus {
    background-color: var(--button2_hover);
    border-color: var(--button2_hover);
    color: #000;
}

/* ------------------ DIVISION TOGGLE ------------------
	Segmented green pill used on pages where content is split by
	division (e.g. match_locking.php). Always sits at the top-left of
	the card, on its own line, on every screen size — independent of
	the heading, which stays centred underneath it as normal. When
	there's no toggle (only one division that season), the row
collapses to just the centred heading with no extra gap above it. */
.card-title-row {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.card-title-row h2,
.card-title-row h3 {
	margin: 0;
}

.pt-division-toggle {
	align-self: flex-start;
	display: inline-flex;
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	overflow: hidden;
}

.pt-division-toggle .div-toggle-btn {
	padding: 6px 14px;
	font-size: 0.9rem;
	text-decoration: none;
	color: #72ab34;
	background: #1a1a1a;
	border-right: 1px solid var(--accent);
}

.pt-division-toggle .div-toggle-btn:last-child {
	border-right: none;
}

.pt-division-toggle .div-toggle-btn.active {
	background: var(--accent);
	color: #000;
	font-weight: 600;
}

.pt-division-toggle .div-label-short {
	display: none;
}

/* Division toggle: compact + short labels on narrow screens */
@media (max-width: 576px) {
	.pt-division-toggle .div-toggle-btn {
		padding: 4px 10px;
		font-size: 0.8rem;
	}
	.pt-division-toggle .div-label-full {
		display: none;
	}
	.pt-division-toggle .div-label-short {
		display: inline;
	}
}

/* ------------------ UNIFIED MOBILE OVERRIDES ------------------ */
@media (max-width: 600px) {

    /* Typography scaling for small screens */
    table.player-table th,
    table.player-table td {
        font-size: 0.75em;
        white-space: normal;
    }

    .score-cell, .win-cell, .loss-cell, .empty-cell {
        font-size: 0.75em;
        font-weight: normal;
        padding: 0.4em;
        border-radius: 0;
    }

    /* Reduce container padding (gap between card and screen edge) */
    .container {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* Reduce Bootstrap row gutter spacing */
    .row {
        --bs-gutter-x: 0.75rem !important;
    }

    /* Card internal padding */
    .card .card-body {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Table-wrapper: no padding, pulled out into card-body padding so table sits 0.25rem from card edge */
    .table-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
        width: auto !important;
        overflow-x: auto;
        overflow-y: visible;
        max-height: none;
    }

    /* Force scroll wrapper to align with card-body */
    .table-scroll {
        display: block !important;
        width: 100% !important;
    }

    /* Force table to fill the scroll wrapper */
    table {
        width: 100% !important;
    }
}
}