/* * Offseason Main Stylesheet (Consolidated & Final)
 * /assets/css/style.css
 */

/* ==========================================================================
   1. Foundational Styles & Color Palette
   ========================================================================== */

:root {
	--bg-color: #121212;
	--text-color: #F5F5F5;
	--text-muted-color: #A9A9A9;
	--card-bg-color: rgba(30, 31, 34, 0.6);
	--card-border-color: rgba(255, 255, 255, 0.1);
	--brand-color: #D4AF37;
	--brand-text-color: #121212;
	--footer-border-color: rgba(255, 255, 255, 0.1);
	--sidebar-bg-color: #1E1F22;
	--waitlist-input-bg-color: rgba(255, 255, 255, 0.05);
}

html:not(.dark) {
	--bg-color: #F3F4F6;
	--text-color: #1F2937;
	--text-muted-color: #6B7280;
	--card-bg-color: rgba(255, 255, 255, 0.6);
	--card-border-color: rgba(0, 0, 0, 0.1);
	--footer-border-color: rgba(0, 0, 0, 0.1);
	--sidebar-bg-color: #FFFFFF;
	--waitlist-input-bg-color: rgba(0, 0, 0, 0.05);
}

body {
	font-family: 'Inter', sans-serif;
	background-color: var(--bg-color);
	color: var(--text-color);
	overflow-x: hidden;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.font-logo {
	font-family: 'Roboto Slab', serif;
}

.text-muted {
	color: var(--text-muted-color);
}

.glass-card {
	background: var(--card-bg-color);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid var(--card-border-color);
}

/* ==========================================================================
   2. Layout & Navigation
   ========================================================================== */

/* --- Public Header --- */
nav a.public-header-btn {
	@apply flex items-center gap-2 text-sm font-bold px-5 py-2 rounded-full transition-all duration-200;
	color: var(--brand-text-color);
	background-color: var(--brand-color);
	box-shadow: 0 1px 3px rgba(0,0,0,0.1), inset 0 1px 1px rgba(255,255,255,0.2);
}
nav a.public-header-btn:hover {
	@apply shadow-lg -translate-y-px;
	filter: brightness(1.1);
}

body.mobile-menu-open {
	overflow: hidden;
}
#mobile-public-menu-panel.menu-visible {
	opacity: 1;
	pointer-events: auto;
}
.mobile-nav-link {
	@apply text-muted opacity-0 translate-y-4;
	transition: color 0.2s, opacity 0.3s, transform 0.3s;
}
#mobile-public-menu-panel.menu-visible .mobile-nav-link {
	@apply opacity-100 translate-y-0;
}
#mobile-public-menu-panel.menu-visible .mobile-nav-link:hover {
	color: var(--text-color);
}

/* --- Dashboard Sidebar --- */
#sidebar {
	background-color: var(--sidebar-bg-color);
}
.sidebar-link {
	color: var(--text-muted-color);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.sidebar-link:hover {
	background-color: rgba(255, 255, 255, 0.05);
	color: var(--text-color);
}
html:not(.dark) .sidebar-link:hover {
	background-color: rgba(0, 0, 0, 0.05);
}
.sidebar-link.active {
	background-color: rgba(212, 175, 55, 0.15);
	color: var(--brand-color);
	font-weight: bold;
}
.sidebar-link.active svg {
	color: var(--brand-color);
}

/* ==========================================================================
   3. Global Components (Modals, etc.)
   ========================================================================== */

.modal-overlay {
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.modal-overlay .glass-card {
	background: rgba(42, 44, 48, 0.9);
}
html:not(.dark) .modal-overlay .glass-card {
	background: rgba(243, 244, 246, 0.9);
}

/* ==========================================================================
   4. Unified Form System
   ========================================================================== */

.form-label {
	@apply block text-sm font-bold text-muted;
}
.form-label span.optional-text {
	@apply text-xs font-normal;
}
.form-input, .waitlist-input-bg {
	@apply block w-full mt-1 p-3 rounded-lg text-color transition-all duration-200;
	background-color: var(--waitlist-input-bg-color);
	border: 1px solid transparent;
}
.form-input:focus, .waitlist-input-bg:focus-within {
	@apply ring-2 outline-none;
	--tw-ring-color: var(--brand-color);
	border-color: var(--brand-color);
}
.form-input::placeholder {
	@apply text-muted/60;
}
.dark .form-input {
	background-color: #16181C;
}

.form-submit-btn {
	@apply w-full flex items-center justify-center font-bold py-3 rounded-lg transition-colors;
	background-color: var(--brand-color);
	color: var(--brand-text-color);
}
.form-submit-btn:hover {
	background-color: #b89a30;
}
.form-submit-btn:disabled {
	@apply opacity-70 cursor-not-allowed;
}
.form-submit-btn .spinner {
	margin: 0 auto;
}

.form-message-area {
	@apply text-sm text-center mt-2 h-5;
}

/* ==========================================================================
   5. Homepage Specific Styles
   ========================================================================== */

.hp-arena-card {
	@apply relative flex flex-col justify-start p-4 transition-all duration-300 ease-in-out;
	aspect-ratio: 1 / 1;
}
.hp-arena-card:hover {
	transform: scale(1.03);
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}
.hp-arena-card .card-content { @apply relative z-10; }
.hp-arena-card .card-subtitle { @apply text-sm font-semibold; color: rgba(255, 255, 255, 0.8); }
.hp-arena-card .card-title { @apply mt-1 text-2xl font-bold; color: white; }
.hp-arena-card .card-status { @apply text-sm font-semibold; color: rgba(255, 255, 255, 0.8); }

.hp-theme-open { background-color: #0038A8; }
.hp-theme-open .card-title { color: #D4AF37; }

.hp-theme-loveisland { background-color: #FF69B4; }
.hp-theme-emmys { background-color: #DAA520; }
.hp-theme-wnba { background-color: #FF6700; }

/* ==========================================================================
   6. Page-Specific Styles
   ========================================================================== */

/* --- About Page --- */
.about-tab-button {
	border-color: transparent;
	color: var(--text-muted-color);
}
.about-tab-button:hover {
	border-color: var(--card-border-color);
	color: var(--text-color);
}
.about-tab-button.active {
	color: var(--brand-color);
	border-color: var(--brand-color);
}

/* --- Draft Room --- */
.draft-pick-item.pick-made { background-color: rgba(255, 255, 255, 0.03); }
.draft-pick-item.on-clock {
	background-color: rgba(212, 175, 55, 0.15);
	border: 1px solid var(--brand-color);
	transform: scale(1.02);
}
.available-player .draft-btn { opacity: 0; transition: opacity 0.2s; }
.available-player:hover .draft-btn { opacity: 1; }

/* --- Golf Arena Waiting Page --- */
/* In assets/css/style.css */

/* --- NEW, LUXURIOUS ARENA PAGE BACKGROUND --- */
.arena-page-bg {
	background-color: #001f3f; /* A deep, dark navy blue */
	position: relative;
	overflow: hidden;
}

/* Adds a subtle, slow-moving gradient for a dynamic feel */
.arena-page-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 10% 20%, rgba(218, 165, 32, 0.1), transparent 50%),
				radial-gradient(circle at 85% 70%, rgba(0, 90, 49, 0.15), transparent 60%);
	animation: slow-pan 45s linear infinite alternate;
}

@keyframes slow-pan {
	from { transform: translateX(-10%) translateY(-10%) scale(1.2); }
	to { transform: translateX(10%) translateY(10%) scale(1.2); }
}

/* --- ARENA PAGE CARD STYLES --- */
.arena-card {
	background: var(--card-bg-color);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--card-border-color);
}

/* --- Shit Talk Chat --- */
#chat-messages { scroll-behavior: smooth; }
.chat-bubble { @apply p-3 rounded-xl max-w-xs; background-color: var(--sidebar-bg-color); }
.chat-bubble.is-own-message { @apply rounded-br-none ml-auto; background-color: var(--brand-color); color: var(--brand-text-color); }
.chat-bubble.is-other-message { @apply rounded-bl-none mr-auto; }
.chat-bubble p a { @apply text-blue-400 underline; }
.chat-bubble.is-own-message p a { @apply text-blue-200; }

/* ==========================================================================
   7. Helper Utilities
   ========================================================================== */

.footer-border {
	border-color: var(--footer-border-color);
}
[data-dropdown-toggle] > * {
	pointer-events: none;
}

/* In assets/css/style.css */

/* --- FINAL FORM & CHAT STYLES --- */

/* Add padding to placeholders for all form inputs */
.form-input::placeholder {
	@apply text-muted/60 pl-1;
}

/* Chat Bubble Styling */
.chat-entry {
	@apply flex items-start gap-3;
}
.chat-entry.is-own {
	@apply flex-row-reverse;
}
.chat-bubble {
	@apply p-3 rounded-xl max-w-xs md:max-w-sm;
	background-color: var(--sidebar-bg-color);
}
.chat-bubble p {
	@apply text-sm leading-relaxed break-words; /* Allow long words to wrap */
}
.chat-bubble.is-own-message {
	@apply rounded-br-none;
	background-color: var(--brand-color);
	color: var(--brand-text-color);
}
.chat-bubble.is-other-message {
	@apply rounded-bl-none;
}
.chat-bubble p a { @apply text-blue-400 underline; }
.chat-bubble.is-own-message p a { @apply text-blue-200; }

/* "New Messages" button for chat */
#new-message-button {
	@apply absolute bottom-20 left-1/2 -translate-x-1/2 z-20;
	@apply font-bold text-xs py-2 px-4 rounded-full backdrop-blur-md transition-all duration-300;
	background-color: rgba(212, 175, 55, 0.8); /* Brand color with alpha */
	color: var(--brand-text-color);
	transform: translateX(-50%) translateY(20px);
	opacity: 0;
	pointer-events: none;
}
#new-message-button.visible {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
	pointer-events: auto;
}