/* === RESET & CORES BÁSICAS === */

:root {
	--primary: #1e3c72;
	--secondary: #2a5298;
	--accent: #ff7e5f;
	--light: #ffffff;
	--gray-100: #ffffff;
	--gray-200: #e4e9f2;
	--gray-600: #5f6b7c;
    /* Login palette */
    --login-bg1: #1e3c72;
    --login-bg2: #2a5298;
    --login-bg3: #3a7bd5;
    --login-accent1: #ff7e5f;
    --login-accent2: #feb47b;
	/* Tema claro */
	--background-color: #ffffff;
	--text-color: #000000;

	/* Additional branding vars (used by new glow-up) */
	--brand-primary: #06b6d4;
	--brand-primary-600: #0891b2;
	--brand-accent: #7c3aed;
	--bg-soft: #071226;
	--muted: #6b7280;
	--card-background: rgba(255,255,255,0.03);
	--glass-border: rgba(255,255,255,0.06);
	--focus-glow: 0 8px 20px rgba(6,182,212,0.12);
}

/* Global brand overrides applied across the app to "mete em tudo" */
/* These rules use the variables above so changing the palette updates the entire app */
/* Azul escuro fixo: não usar --brand-* aqui (cyan) nem --primary (é alterado noutras folhas) */
.sidebar { background: linear-gradient(180deg, #001b3d 0%, #002a52 100%); color: #fff; }
.sidebar .nav-link { color: rgba(255,255,255,0.95); }
.sidebar .nav-link.active, .sidebar .nav-link:hover { background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); color: #fff; }
.top-bar, header.top-bar { background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.84)); backdrop-filter: blur(6px); box-shadow: 0 8px 30px rgba(11,37,84,0.04); }
.top-bar .breadcrumb h2 { color: var(--brand-accent); }
.chat-unread { background: var(--brand-accent); color: #fff; padding: 2px 6px; border-radius: 999px; font-size:0.78rem; }
.form-control:focus, input:focus, select:focus, textarea:focus { box-shadow: var(--focus-glow); border-color: var(--brand-primary-600); outline: none; }
.modal-box { border-radius:12px; border:1px solid rgba(2,6,23,0.08); box-shadow: 0 24px 60px rgba(2,6,23,0.45); }
.modal-header .modal-icon { width:44px; height:44px; border-radius:8px; background: linear-gradient(180deg,var(--brand-primary),var(--brand-primary-600)); display:flex; align-items:center; justify-content:center; color:#fff; margin-right:12px; }
.modal-actions .btn { min-width:110px; }
.muted { color: var(--muted); }
.badge { background: var(--brand-accent); color: #fff; padding:4px 8px; border-radius:8px; }

/* Ensure icons have consistent spacing when used with the icon-left helper */
.icon-left i, .icon-left svg { margin-right:6px; }

/* Apply card glass effect broadly */
.card, .taticas-3d-card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid var(--glass-border); }

/* Small responsive tweak for compact headers */
@media (max-width:720px) {
	.top-bar .breadcrumb h2 { font-size:1rem; }
}

/* Tema escuro */
[data-theme="dark"] {
    --background-color: #121212;
    --text-color: #e0e0e0;
    --card-background: #1e1e1e;
    --border-color: #333333;
}

* {
	box-sizing: border-box;
	font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

html, body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	background: var(--gray-100);
	color: var(--gray-600);
	overflow-x: hidden; /* proteção extra contra scroll horizontal */
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
}

/* Hide content instantly during nav to avoid flicker of previous page */
/* Navegação padrão sem overlay */
/* Feedback rápido na sidebar sem JS */
.nav-link:active,
.nav-link:focus {
	outline: none;
	background: #ffffff;
	color: #0b5ed7;
}
.nav-link:focus .icon,
.nav-link:active .icon {
	color: #0b5ed7;
}

/* Remover scroll horizontal com cautela */
html, body { overflow-x: hidden; }

/* Evitar que conteúdo extravase horizontalmente */
.container,
.content,
.breadcrumb,
header, footer {
	max-width: 100%;
}

/* Garantir imagens responsivas sem causar overflow */
img { max-width: 100%; height: auto; display: block; }

/* Salvaguardas leves contra overflow horizontal */
* { box-sizing: border-box; }
.content { overflow-x: hidden; }
/* Não alterar comportamento padrão das tabelas nem das linhas flex */
/* Evitar alterações globais em cards e breadcrumb que afetam sombras/bordas */

/* Sidebar ajustes específicos */
.sidebar { max-width: 250px; overflow-x: hidden; }
.app-container { overflow-x: hidden; }

/* Sidebar: impedir overflow horizontal */
.sidebar { overflow-x: hidden; }
.sidebar .nav-link { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Logo na sidebar não deve extravasar */
.sidebar .logo img { max-width: 100%; height: auto; display: block; }
.app-container { overflow-x: hidden; }

/* === LAYOUT GERAL: SIDEBAR + CONTEÚDO === */

body {
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	overflow-x: hidden; /* remove barra de scroll horizontal global */
}

.app-container {
	display: flex;
	width: 100%;
	min-height: 100vh;
}

.sidebar {
	width: 250px;
	flex-shrink: 0;
	background: linear-gradient(180deg, #001b3d 0%, #002a52 100%);
	color: #fff;
	position: relative;
	height: auto;
	overflow-y: auto;
	box-shadow: 2px 0 10px rgba(0,0,0,0.15);
}


.login-container {
	width: 100%;
	max-width: 420px;
	padding: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.login-card {
	width: 100%;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 24px;
	padding: 2rem 1.8rem;
	box-shadow: 0 16px 40px rgba(8, 20, 45, 0.45);
	backdrop-filter: blur(18px);
	position: relative;
	overflow: hidden;
}

.login-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at top right, rgba(255, 122, 63, 0.3), transparent 40%);
	pointer-events: none;
}


.login-card__brand {
	text-align: center;
	margin-bottom: 2.2rem;
}

.login-logo-icon {
	width: 240px;
	height: auto;
	display: block;
	margin: 0 auto 1rem;
}
.trainings-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
	align-items: start;
}
.training-card {
	background: var(--card-background, #ffffff);
	border: 1px solid rgba(8,20,45,0.04);
	border-radius: 12px;
	padding: 12px;
	box-shadow: 0 6px 18px rgba(15,23,42,0.06);
	display: flex;
	flex-direction: column;
	min-height: 120px;
}
/* Visual refresh for training cards */
.training-card {
	background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,255,0.96));
	border: 1px solid rgba(30,60,114,0.06);
	transition: transform .12s ease, box-shadow .12s ease;
}
.training-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(11,37,84,0.08); }
.training-head { display:flex; gap:12px; align-items:flex-start; }
.training-date { width:84px; text-align:center; background: linear-gradient(180deg, #fff, #f7f9fc); border-radius:8px; padding:8px; border:1px solid rgba(0,0,0,0.03); }
.training-day { font-weight:700; font-size:0.95rem; }
.training-time { color: var(--gray-600); font-size:0.85rem; }
.training-meta h4 { margin:0; font-size:1rem; }
.training-tags { margin-top:6px; display:flex; gap:8px; align-items:center; }
.chip { background: rgba(30,60,114,0.06); color: var(--primary); padding:4px 8px; border-radius:999px; font-size:0.8rem; }
.muted.small { color: var(--gray-600); font-size:0.85rem; }
.training-body { margin-top:10px; flex:1; }
.training-presence { font-weight:600; }
.training-actions { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-top:12px; }
.training-actions .actions-left { display:flex; gap:8px; align-items:center; }

/* Estado do treino (hoje / próximos dias / passado) */
.status-pill{
	padding:3px 9px;
	border-radius:999px;
	font-size:0.78rem;
	font-weight:600;
	background:rgba(148,163,184,0.18);
	color:#0f172a;
}
.row-today .status-pill{background:rgba(34,197,94,0.16);color:#166534;}
.row-soon .status-pill{background:rgba(250,204,21,0.18);color:#854d0e;}
.row-past .status-pill{background:rgba(148,163,184,0.20);color:#475569;}

/* Micro-interactions and card utilities added during visual refresh */
.btn { transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease; will-change: transform, box-shadow; }
.btn:active { transform: translateY(1px) scale(0.997); }
.btn:focus { outline: none; box-shadow: var(--focus-glow); }
.btn-primary { background: linear-gradient(180deg, var(--brand-primary), var(--brand-primary-600)); border: none; color: #fff; }
.btn-light { background: rgba(255,255,255,0.04); color: #eef2ff; border: 1px solid var(--glass-border); }
.btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,0.04); color: #e6eef8; }
.btn-sm { padding:6px 10px; font-size:0.86rem; border-radius:8px; }

.card { background: var(--card-background); border-radius:12px; padding:12px; border:1px solid var(--glass-border); box-shadow: 0 6px 18px rgba(2,6,23,0.45); }
.card h3 { margin:0 0 8px; }
.muted { color: var(--muted); }
.icon-left { display:inline-flex; align-items:center; gap:8px; }
.icon-left svg { width:16px; height:16px; display:block; }
.training-actions .btn { margin:0; padding:0.45rem 0.7rem; font-size:0.9rem; border-radius:8px; }
.row-today { border-left:4px solid #25d366; }
.row-soon { border-left:4px solid #ffb020; }
.row-past { opacity:0.65; }

/* Button sizing and variants used across cards */
.btn-sm { padding: 0.35rem 0.6rem; font-size:0.85rem; border-radius:8px; }
.btn-primary.btn-sm { background: linear-gradient(90deg, var(--accent), #ff9f6b); color: #07122b; box-shadow: 0 10px 26px rgba(255,127,95,0.12); }
.btn-outline.btn-sm { background: transparent; border: 1px solid rgba(30,60,114,0.12); color: var(--primary); }
.btn-danger.btn-sm { background: linear-gradient(90deg,#ef4444,#f97316); color:#fff; }

/* Compact appearance for presence button to highlight it */
.training-presence { background: rgba(37,211,102,0.08); padding:6px 10px; border-radius:999px; display:inline-block; color:#115e2e; font-weight:700; }

@media (max-width: 720px) {
	.training-head { gap:10px; }
	.training-date { width:68px; padding:6px; }
	.training-actions { flex-direction: column; align-items:stretch; }
	.training-actions .actions-left { justify-content: flex-start; }
}

/* ================= GLOW-UP: Global visual refresh ================= */
:root {
	--accent-2: #ffb57a;
	--hm-gradient: linear-gradient(90deg, var(--accent), var(--accent-2));
	--card-surface: linear-gradient(180deg, #ffffff, #fbfdff);
	--glass: rgba(255,255,255,0.6);
	--muted-2: #6b7280;
	--shadow-lg: 0 18px 50px rgba(12,34,75,0.12);
}

/* Buttons - modern, consistent */
.btn {
	padding: 0.56rem 0.9rem;
	border-radius: 10px;
	font-weight: 600;
	transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
	border: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary {
	background: var(--hm-gradient);
	color: #07122b;
	box-shadow: 0 12px 32px rgba(30,70,150,0.12);
}
.btn-outline {
	background: transparent;
	border: 1px solid rgba(30,60,114,0.12);
	color: var(--primary);
}
.btn-light {
	background: rgba(255,255,255,0.06);
	color: var(--light);
	border: 1px solid rgba(255,255,255,0.04);
}

/* Cards & surfaces */
.card, .roster-card, .training-card {
	background: var(--card-surface);
	border: 1px solid rgba(30,60,114,0.04);
	border-radius: 14px;
	box-shadow: var(--shadow-lg);
}

/* Page header polish */
.page-header {
	align-items: center;
	gap: 1rem;
	padding: 10px 0;
}
.page-title { font-size:1.45rem; color: #0f1724; margin:0; }
.page-subtitle { color: var(--muted-2); margin:0; }

/* Form controls */
.form-control, input[type="text"], input[type="date"], input[type="time"], select, textarea {
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid rgba(30,60,114,0.06);
	background: #fff;
	outline: none;
	transition: box-shadow .12s ease, border-color .12s ease;
}
.form-control:focus, select:focus, textarea:focus { box-shadow: 0 8px 30px rgba(11,37,84,0.06); border-color: rgba(30,60,114,0.18); }

/* Modals */
.modal-card { border-radius: 14px; box-shadow: 0 28px 80px rgba(10,20,40,0.18); }

/* Header/topbar subtle elevation + translucent background */
.top-bar, header.top-bar { background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.80)); backdrop-filter: blur(6px); box-shadow: 0 8px 30px rgba(11,37,84,0.04); }

/* Small helpers */
.muted { color: var(--muted-2); }
.small { font-size: 0.88rem; }

@media (max-width: 820px) {
	.btn { width: 100%; justify-content: center; }
	.btn + .btn { margin-top: 8px; }
}

/* End glow-up */

/* Toolbar for trainings page (filters + actions) */
.trainings-toolbar {
	display:flex;
	gap:12px;
	align-items:center;
	justify-content:space-between;
	width:100%;
	flex-wrap:wrap;
}
.trainings-toolbar .toolbar-left { display:flex; gap:10px; align-items:center; flex-wrap:wrap; flex:1 1 auto; }
.trainings-toolbar .toolbar-right { display:flex; gap:10px; align-items:center; justify-content:flex-end; flex:0 0 auto; white-space:nowrap; }
.toolbar-filters { display:flex; gap:8px; align-items:center; }
.control-select { appearance:none; -webkit-appearance:none; padding:8px 12px; border-radius:10px; border:1px solid rgba(30,60,114,0.08); background:white; color:var(--text-color); height:38px; display:inline-flex; align-items:center; }
.control-checkbox { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:10px; border:1px solid rgba(30,60,114,0.06); background:transparent; cursor:pointer; }
.btn-ghost { background: transparent; border: 1px dashed rgba(30,60,114,0.06); color: var(--gray-600); padding:6px 10px; border-radius:8px; }
.btn-success { background: linear-gradient(90deg,#2bd36b,#20c997); color:#062617; border-radius:8px; padding:6px 10px; box-shadow:0 10px 26px rgba(32,201,150,0.08); }
.toolbar-actions { display:flex; gap:8px; align-items:center; }
.toolbar-links { display:flex; gap:8px; align-items:center; }

@media (max-width: 820px) {
	.trainings-toolbar { flex-direction:column; align-items:stretch; gap:8px; }
	.trainings-toolbar .toolbar-right { justify-content:space-between; }
	.toolbar-filters { width:100%; justify-content:flex-start; }
}

/* Prevent toolbar children from occupying full width when unnecessary */
.toolbar-filters > * { margin: 0; }
.trainings-toolbar .toolbar-right .btn { white-space:nowrap; }
@media (max-width: 600px) {
	.trainings-grid { grid-template-columns: 1fr; }
	.training-head { flex-direction: row; }
	.training-date { width:72px; }
}
/* === SIDEBAR / NAV === */
	/* center align with brand container */
.logo {
	width: 100%;
	text-align: center;
	padding: 0.4rem 0;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

.logo img {
	max-width: 144px;
	height: auto;
	display: block;
	margin: 14px auto;
}

.nav-menu {
	width: 100%;
	margin-top: 0.5rem;
	display: flex;
	flex-direction: column;
 	align-items: stretch;
}

.nav-item { width: 100%; }

.nav-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0.65rem 1rem;
	margin: 0.25rem 0.9rem 0.25rem 0.4rem;
	border-radius: 10px;
	color: #f4f7ff;
	text-decoration: none;
	font-size: 0.95rem;
	transition: none;
}

.nav-link i {
	width: 22px;
	text-align: center;
}

.nav-link:hover {
	background: rgba(255,255,255,0.18);
}

.nav-link.active {
	background: #ffffff;
	color: #2a3b5f;
	box-shadow: none;
	margin: 0.25rem 0.8rem 0.25rem 0.4rem;
}

/* manter ícone legível no ativo sobre fundo branco */
.nav-link.active i { color: #1e3c72; }

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* === CABEÇALHO DE PÁGINA (Dashboard, Jogadores, Treinos) === */

.page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

@keyframes fadeIn {
	from { opacity: 0; transform: scale(0.96); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes spin {
	to { transform: rotate(360deg); }
}


/* Layout: use full available width next to sidebar sem criar scroll horizontal */
.content {
	width: 100%;
	margin: 0;
	padding: 20px;
	box-sizing: border-box;
	overflow-x: hidden;
}

/* Ajuste para remover espaço branco à direita */
.container {
    margin-left: 0;
    margin-right: auto;
    width: 100%;
}

/* Ajuste para alinhar o conteúdo ao lado esquerdo */
.content {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	padding: 6px 16px;
}

/* Variante com menos espaçamento lateral para aproximar do lado esquerdo */
.content-tight { padding: 4px 12px; }

/* === PÁGINA DE LOGIN === */
@keyframes loginBgMove {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes floatIcon {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

@keyframes pulseGlow {
	0%, 100% { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24); }
	50% { box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28); }
}

@keyframes borderGlow {
	0% { transform: translateX(-10%); }
	100% { transform: translateX(10%); }
}

/* Melhoria de modais/pop-ups: backdrop suave, painel elevado e animação */
.modal-backdrop{position:fixed;inset:0;background:rgba(30,60,114,0.45);backdrop-filter:blur(3px);z-index:1040}
.modal-panel{background:linear-gradient(180deg, var(--background-color), #ffffff);border-radius:18px;box-shadow:0 24px 64px rgba(8,20,45,0.2);padding:20px;max-width:780px;margin:48px auto;animation:modalFadeIn .16s ease-out}
@keyframes modalFadeIn{from{opacity:0;transform:translateY(-8px) scale(.996)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid rgba(0,0,0,0.04)}
.modal-close{background:transparent;border:0;padding:6px;border-radius:8px;color:var(--text-color);cursor:pointer}
.modal-close:hover{background:rgba(0,0,0,0.04)}
.modal-body{padding:12px 0;max-height:62vh;overflow:auto}
.modal-footer{display:flex;gap:10px;justify-content:flex-end;padding-top:12px;border-top:1px solid rgba(0,0,0,0.04)}
.modal--danger .btn-primary{background:linear-gradient(90deg,var(--accent),var(--login-accent1));}


body.login-page {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(120deg, rgba(30,60,114,0.9), rgba(42,82,152,0.95), rgba(58,123,213,0.95));
	background-size: 200% 200%;
	animation: loginBgMove 12s ease-in-out infinite;
	color: #fff;
	position: relative;
	overflow: hidden;
}

body.login-page::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.06) 0%, transparent 42%),
					  radial-gradient(circle at 80% 20%, rgba(255,255,255,0.04) 0%, transparent 40%),
					  radial-gradient(circle at 70% 80%, rgba(255,255,255,0.05) 0%, transparent 45%);
	pointer-events: none;
}

/* subtle basketball court photo overlay */
body.login-page::after {
	content: '';
	position: absolute;
	inset: 0;
	background: url('../img/campo_basquetebol_vertical.avif') center/cover no-repeat;
	opacity: 0.22;
	mix-blend-mode: luminosity;
	pointer-events: none;
}
.login-container {
	width: 100%;
	max-width: 480px;
	padding: 1.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.login-card {
	width: 100%;
	background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.10));
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 28px;
	padding: 2.4rem;
	box-shadow: 0 24px 60px rgba(8, 20, 45, 0.45);
	backdrop-filter: blur(22px);
	position: relative;
	overflow: hidden;
}

.login-card::before {
	content: '';
	position: absolute;
	top: -2px; left: -2px; right: -2px; bottom: -2px;
	border-radius: inherit;
	background: linear-gradient(120deg, rgba(255, 126, 95, 0.35), rgba(254, 180, 123, 0.35), transparent 60%);
	filter: blur(10px);
	opacity: 0.45;
	animation: borderGlow 8s linear infinite;
	pointer-events: none;
}

.login-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at top right, rgba(255, 122, 63, 0.3), transparent 40%);
	pointer-events: none;
}

.login-card__brand {
	text-align: center;
	margin-top: 0.8rem;
	margin-bottom: 2.6rem;
}

.login-logo-icon {
	width: 240px;
	height: auto;
	display: block;
	margin: 0 auto 1.1rem;
}

/* Hide scrollbar visuals but keep scrolling functional */
/* Works across modern browsers: Chrome/Safari (webkit), Firefox, and Edge/IE fallback */
html, body {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
html::-webkit-scrollbar, body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

}

.login-card__brand h1 {
	font-size: 2.5rem;
	margin-top: 0.8rem;
	margin-bottom: 2.6rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #ffffff;
	width: 300px;
}
.login-card__brand p {
	margin: 0.2rem 0 0 0;
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.88);
	text-shadow: 0 1px 10px rgba(0,0,0,0.2);
}


.login-card__form {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.login-card__form .form-control {
	font-size: 1rem;
}

.login-card__form .btn-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.8rem 0;
	width: 100%;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
	border-radius: 12px;
}

.login-card__footer {
	text-align: center;
	margin-top: 1.5rem;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.9rem;
	letter-spacing: 0.08em;
}

.login-page .form-control,
.login-card input.form-control {
	width: 100%;
	height: 52px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.75);
	background: rgba(255, 255, 255, 0.96);
	color: #0b2340;
	font-size: 1rem;
	padding: 0 1rem;
	box-shadow: inset 0 2px 6px rgba(10, 30, 60, 0.06);
	transition: box-shadow 180ms ease, transform 120ms ease, border-color 160ms ease;
	display: block;
	-webkit-appearance: none;
	appearance: none;
}

.login-page .form-control:focus,
.login-card input.form-control:focus {
	outline: none;
	border-color: rgba(30, 60, 114, 0.95);
	box-shadow: 0 8px 34px rgba(30, 60, 114, 0.14), inset 0 1px 0 rgba(255,255,255,0.5);
	transform: translateY(-1px);
}

/* password visibility toggle */
.form-group.has-toggle { position: relative; }
.password-toggle {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: #446;
	opacity: 0.7;
	cursor: pointer;
	transition: opacity 160ms ease, transform 160ms ease;
}
.password-toggle:hover { opacity: 1; transform: translateY(-50%) scale(1.06); }


.form-group {
	margin-bottom: 1rem;
}

.error-message {
	height: 14px;
	font-size: 0.8rem;
	color: #ffbebe;
	margin-top: 0.25rem;
}

.btn-primary {
	background: linear-gradient(135deg, var(--login-accent1), var(--login-accent2));
	color: #111;
	border: none;
	font-weight: 700;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
	transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
	animation: pulseGlow 3.6s ease-in-out infinite;
}

.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 16px 30px rgba(0,0,0,0.28); }
.btn-primary:active { transform: translateY(0); filter: brightness(0.98); }

.spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(0, 0, 0, 0.1);
	border-top: 2px solid rgba(0, 0, 0, 0.35);
	border-radius: 50%;
	margin-left: 0.5rem;
	animation: spin 0.8s linear infinite;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Ajuste para remover espaço branco ao lado e alinhar à esquerda */
.app-container {
	margin: 0;
	max-width: none;
	width: 100%;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* === RESPONSIVO: MOBILE E TABLET === */
@media (max-width: 1020px) {
	.sidebar { width: 60px; min-width: 60px; }
	.sidebar .logo img { max-width: 40px; margin: 10px auto; }
	.sidebar .logo { padding: 0.2rem 0; }
	.nav-link { font-size: 0.92rem; padding: 0.5rem 0.5rem; justify-content: center; }
	.nav-link span, .nav-link .nav-label { display: none; }
}

@media (max-width: 900px) {
	.app-container { flex-direction: column; }
	.sidebar { width: 100%; min-width: 0; height: auto; position: static; box-shadow: none; display: flex; flex-direction: row; overflow-x: auto; }
	.nav-menu { flex-direction: row; justify-content: space-around; align-items: center; }
	.content, .main-content { margin-left: 0 !important; padding: 10px 4vw; }
	.page-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

@media (max-width: 720px) {
	.content, .main-content { padding: 8px 2vw; }
	.modal-card { padding: 12px; border-radius: 10px; width: 99vw; }
	.form-grid { grid-template-columns: 1fr; gap: 10px; }
	.roster-table thead { display: none; }
	.roster-table, .roster-table tbody, .roster-table tr, .roster-table td { display: block; width: 100%; }
	.roster-table tr { margin-bottom: 1.2rem; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); background: #fff; }
	.roster-table td { padding: 10px 8px; border: none; position: relative; }
	.roster-table td:before { content: attr(data-label); font-weight: 600; color: #1e3c72; display: block; margin-bottom: 2px; font-size: 0.93em; }
}

@media (max-width: 520px) {
	.login-card { padding: 1.25rem; border-radius: 40px; }
	.login-logo-icon { width: 160px; margin-left: 0; transform: none; }
	.sidebar { flex-direction: column; align-items: stretch; }
	.nav-menu { flex-direction: column; }
	.btn, .btn-primary, .btn-outline, .btn-danger { font-size: 1.05em; padding: 0.9em 1.2em; }
	.form-group input, .form-group select { font-size: 1.08em; padding: 14px; }
}

.match-panel { width: 100%; box-sizing: border-box; }
.match-court-area { width: 100%; }
.match-court { min-height: 320px; }

/* conteúdo ocupa toda a largura ao lado da sidebar */
.main-content { margin-left: 0; width: 100% !important; }

/* === Modals (Jogos) === */
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); backdrop-filter: blur(3px); z-index: 1000; }
.modal.show { display: flex; }
.modal-card { background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.96)); border-radius: 16px; padding: 24px; width: min(820px, 92vw); box-shadow: 0 20px 40px rgba(0,0,0,0.25); animation: modalPop 220ms ease-out; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal-title { margin: 0; font-size: 1.8rem; font-weight: 800; color: #27364a; letter-spacing: 0.02em; }
.modal-close { background: none; border: none; font-size: 1.8rem; cursor: pointer; color: #78849e; transition: transform 160ms ease, color 160ms ease; }
.modal-close:hover { transform: scale(1.06); color: #3b4b63; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label { font-weight: 600; color: #4b566b; }
.form-group input, .form-group select { padding: 12px; border: 1px solid #d7dde8; border-radius: 10px; font-size: 1rem; width: 100%; background: #fff; box-shadow: inset 0 1px 2px rgba(0,0,0,0.02); }
.form-actions { grid-column: 1 / -1; text-align: right; margin-top: 6px; }
.table-actions { display: flex; gap: 8px; justify-content: center; }
.btn-outline { border: 2px solid #1e3c72; color: #1e3c72; background: #fff; }
.btn-outline:hover { background: #eef3ff; }
.btn-danger { background: #c62828; color: #fff; }
.btn-danger:hover { background: #b71c1c; }
@keyframes modalPop { from { transform: translateY(8px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

/* === Lista de Jogos (tabela) === */
.roster-card { background: #fff; border-radius: 14px; box-shadow: 0 12px 28px rgba(0,0,0,0.08); overflow: hidden; }
.roster-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.roster-head h3 { margin: 0; font-size: 1.25rem; color: #203047; letter-spacing: 0.02em; }
.roster-head .badge { background: #eef3ff; color: #1e3c72; border: 1px solid #d7dde8; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 0.85rem; }

.roster-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.roster-table thead th { text-align: left; background: linear-gradient(180deg, #fafbff, #f2f5ff); color: #3a4e6a; font-weight: 800; font-size: 0.85rem; padding: 12px 14px; border-bottom: 1px solid #e6eaf3; text-transform: uppercase; letter-spacing: 0.06em; }
.roster-table tbody td { padding: 12px 14px; border-bottom: 1px solid #eef2f9; color: #2b3f57; }
.roster-table tbody tr:hover { background: #f9fbff; }
.roster-table tbody tr:nth-child(even) { background: #fcfdff; }

/* Realce condicional por proximidade de data */
.roster-table tbody tr.row-today { background: #fffde7 !important; box-shadow: inset 3px 0 0 #ffca28; }
.roster-table tbody tr.row-soon { background: #e8f5e9 !important; box-shadow: inset 3px 0 0 #66bb6a; }
.roster-table tbody tr.row-past { background: #f7f7f7 !important; color: #607d8b; box-shadow: inset 3px 0 0 #b0bec5; }

/* Estado como badge */
.badge-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-weight: 700; font-size: 0.8rem; border: 1px solid; }
.badge-status i { opacity: 0.9; }
.badge-status.status-scheduled { background: #fff8e1; color: #8d6e63; border-color: #ffe0b2; }
.badge-status.status-done { background: #e8f5e9; color: #2e7d32; border-color: #c8e6c9; }
.badge-status.status-canceled { background: #ffebee; color: #c62828; border-color: #ffcdd2; }

.page-header-actions { display:flex; align-items:center; justify-content:space-between; margin-bottom: 16px; }
.page-header-actions .page-title { margin:0; color:#203047; }
@media (max-width: 720px) {
	.modal-card { padding: 20px; border-radius: 14px; width: 94vw; }
	.form-grid { grid-template-columns: 1fr; gap: 14px; }
}
.content { width: 100% !important; }

/* espaço mínimo entre conteúdo e sidebar */
.top-bar { padding: 0.75rem 16px 0.75rem 16px; }
.content { padding: 12px 16px 12px 16px; }
/* ligeiro afastamento do título na barra superior */
.top-bar .breadcrumb h2 { margin-left: 10px; }

/* positional layout for starters on the court */
.starter-slot.pos-PG { position: absolute; left: 18%; top: 8%; transform: translate(-50%, 0); }
.starter-slot.pos-SG { position: absolute; left: 82%; top: 8%; transform: translate(-50%, 0); }
.starter-slot.pos-SF { position: absolute; left: 50%; top: 20%; transform: translate(-50%, 0); }
.starter-slot.pos-PF { position: absolute; left: 28%; top: 56%; transform: translate(-50%, 0); }
.starter-slot.pos-C  { position: absolute; left: 68%; top: 56%; transform: translate(-50%, 0); }

/* make court look nicer: subtle court lines */
.court { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:10px; position:relative; overflow:hidden; }
.court:before { content: ''; position:absolute; left:50%; top:8%; width:2px; height:220px; background: rgba(255,255,255,0.03); transform: translateX(-50%); }
.court:after { content: ''; position:absolute; left:10%; top:8%; width:80%; height:2px; background: rgba(255,255,255,0.02); }

/* Estilo para o modal */
#add-event-modal {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

/* ====================== MELHORIAS ÁREA DE GESTÃO (sem alterar cores) ====================== */
/* Estas regras modernizam tabelas, cartões e formulários usados na gestão. */

/* Cabeçalho das páginas de gestão: mais espaçamento e separador sutil */
.page-header {
	padding: 12px 0;
	border-bottom: 1px solid rgba(30,60,114,0.04);
	margin-bottom: 1.6rem;
}
.page-title { font-size: 1.6rem; color: #0f1724; letter-spacing: -0.01em; }
.page-subtitle { color: var(--muted-2); margin-top: 4px; }

/* Cartões na gestão: superfície levemente elevada e padding consistente */
.roster-card, .card, .admin-card {
	border-radius: 14px;
	padding: 18px;
	background: var(--card-surface, linear-gradient(180deg,#fff,#fbfdff));
	border: 1px solid rgba(30,60,114,0.04);
	box-shadow: 0 14px 40px rgba(12,34,75,0.06);
}

/* Cabeçalho do roster com fundo suave para separar ações/filters */
.roster-head {
	background: rgba(247,250,255,0.6);
	padding: 14px 18px;
	border-bottom: 1px solid rgba(30,60,114,0.04);
	align-items: center;
	gap: 12px;
}

/* Toolbar de filtros e ações com layout responsivo */
.table-toolbar {
	display:flex;
	gap:12px;
	align-items:center;
	justify-content:space-between;
	padding:10px;
	border-radius:12px;
	background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(250,250,255,0.6));
	border: 1px solid rgba(30,60,114,0.03);
	box-shadow: 0 6px 18px rgba(11,37,84,0.04);
}

/* Tabela: cabeçalho sticky e linhas com micro-interação */
.roster-table thead th {
	position: sticky;
	top: 0;
	z-index: 4;
	background: linear-gradient(180deg, #fafbff, #f4f7ff);
}
.roster-table tbody tr {
	transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.roster-table tbody tr:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(12,34,75,0.06);
	background: #fbfdff;
}

/* Melhoria de formulários na gestão: inputs maiores e labels consistentes */
.form-grid { gap: 18px; }
.form-group label { font-weight: 700; color: #3b4b63; margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea { padding: 12px 14px; border-radius: 10px; }

/* Aumentar legibilidade dos botões em páginas de gestão */
.page-header .btn, .table-toolbar .btn { padding: 0.6rem 1rem; border-radius: 10px; font-weight: 700; }

/* Lista de itens: grid responsivo para transformar linhas em cartões quando for útil */
.admin-card-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 14px; }

/* Pequenas helpers para alinhamento e espaçamento mantendo a paleta */
.muted { color: var(--muted-2); }
.ks-inline { display:inline-flex; gap:8px; align-items:center; }

/* Segurança: não forçar novas cores, apenas usar var existentes */
/* Fim das melhorias da área de gestão */

/* ====================== TYPOGRAPHY IMPROVEMENTS ====================== */
/* Large visual upgrade focused on fonts, sizes, spacing — colors unchanged */

:root {
	--font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial;
	--font-heading: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial;
	--fs-base: 16px; /* base for rem calculations */
	--lh-base: 1.6;
	--heading-weight: 700;
	--body-weight: 400;
	--display-weight: 800;
}

html { font-size: 16px; }
body {
	font-family: var(--font-sans);
	font-size: 1rem; /* equals --fs-base */
	line-height: var(--lh-base);
	color: var(--text-color);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Headings scale and spacing for clearer information hierarchy */
h1, .h1 { font-size: 2.25rem; line-height: 1.08; margin: 0 0 0.4rem; font-weight: var(--display-weight); letter-spacing: -0.02em; color: #0f1724; }
h2, .h2 { font-size: 1.75rem; line-height: 1.12; margin: 0 0 0.45rem; font-weight: var(--heading-weight); color: #0f1724; }
h3, .h3 { font-size: 1.25rem; line-height: 1.18; margin: 0 0 0.5rem; font-weight: 700; }
h4, .h4 { font-size: 1.05rem; line-height: 1.25; margin: 0 0 0.45rem; font-weight: 700; }
h5, h6 { font-weight: 700; color: var(--muted-2); }

p { margin: 0 0 0.9rem; color: var(--muted-2); }

/* Improve table typography for readability */
.roster-table tbody td { font-size: 0.95rem; color: #213549; }
.roster-table thead th { font-size: 0.82rem; letter-spacing: 0.06em; }

/* Form labels and inputs */
.form-group label { font-size: 0.95rem; letter-spacing: 0.01em; }
.form-control { font-size: 1rem; font-weight: var(--body-weight); }

/* Buttons text clarity */
.btn { font-weight: 700; letter-spacing: 0.02em; }
.btn .icon, .icon-left { opacity: 0.95; }

/* Small screens: scale headings down slightly */
@media (max-width: 720px) {
	h1 { font-size: 1.6rem; }
	h2 { font-size: 1.35rem; }
	.page-title { font-size: 1.25rem; }
}

/* Accessibility: increase contrast for small text when needed without changing palette */
@media (prefers-contrast: more) {
	body { color: #0b1220; }
	.roster-table tbody td { color: #0b1220; }
}

/* End typography improvements */