/* ===== TENANT SITE STYLES ===== */
/* File: assets/css/tenant.css
 * 
 * @version 1.2
 * @updated 2025-11-05 - Added professional polish and better color scheme
 * 
 * Purpose: Styles specific to tenant landing pages
 * Requires: core.css (loaded first for base system)
 */

/* ===== TENANT COLOR SCHEME ===== */
/* Custom color palette for tenant sites - distinct from marketing purple */
:root {
    --tenant-primary: #0ea5e9;      /* Sky blue - main brand color */
    --tenant-primary-dark: #0284c7; /* Darker blue for hover states */
    --tenant-secondary: #10b981;    /* Emerald green - success/active */
    --tenant-secondary-dark: #059669; /* Darker green */
    --tenant-accent: #f59e0b;       /* Amber - announcements/highlights */
    --tenant-accent-dark: #d97706;  /* Darker amber */
    --tenant-purple: #a855f7;       /* Purple accent for CTAs */
    --tenant-purple-dark: #9333ea;  /* Darker purple */
}
/* ===== END TENANT COLOR SCHEME ===== */

/* ===== CSS SECTION 0: ABOUT/WELCOME SECTION ===== */
.about-section {
    background: linear-gradient(135deg, var(--tenant-primary) 0%, var(--tenant-primary-dark) 100%);
    color: var(--color-white);
    padding: var(--spacing-2xl) 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.about-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.about-icon {
    font-size: 4rem;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
    position: absolute;
    left: -80px;
    top: 0;
}

.about-org-name {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
    color: var(--color-white);
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.about-headline {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-xl);
    color: rgba(255, 255, 255, 0.95);
    font-style: italic;
}

.about-intro {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-2xl);
    color: rgba(255, 255, 255, 0.95);
}

.about-intro p {
    margin-bottom: var(--spacing-md);
}

.about-intro p:last-child {
    margin-bottom: 0;
}

.about-highlights {
    background: rgba(255, 255, 255, 0.1);
    padding: var(--spacing-2xl);
    border-radius: var(--radius-xl);
    margin-top: var(--spacing-2xl);
    backdrop-filter: blur(10px);
}

.highlights-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    margin-bottom: var(--spacing-lg);
}

.highlights-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    display: inline-block;
}

.highlights-list li {
    font-size: var(--font-size-lg);
    padding: var(--spacing-sm) 0;
    padding-left: var(--spacing-xl);
    position: relative;
    color: rgba(255, 255, 255, 0.95);
}

.highlights-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    font-size: var(--font-size-xl);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
}
/* ===== END CSS SECTION 0 ===== */

/* ===== CSS SECTION 1: PAGE LAYOUT ===== */
/* Remove gap between header and about section */
body .public-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.tenant-page-wrapper {
    background: linear-gradient(to bottom, #dbeafe 0%, #e0f2fe 100%);
    min-height: calc(100vh - 180px);
    padding-bottom: 0;
    margin-bottom: 0;
}

.tenant-content {
    padding: var(--spacing-3xl) var(--spacing-lg);
    padding-bottom: var(--spacing-3xl);
    max-width: 1400px;
    margin: 0 auto;
}
/* ===== END CSS SECTION 1 ===== */

/* ===== CSS SECTION 2: OVERVIEW GRID (2x2) ===== */
.overview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
}

.overview-card {
    background: var(--color-white);
    border-radius: var(--radius-2xl);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-gray-300);
    display: flex;
    flex-direction: column;
    min-height: 400px;
}
.overview-card.card-red    { border-color: #ef4444; }
.overview-card.card-orange { border-color: #f97316; }
.overview-card.card-yellow { border-color: #eab308; }
.overview-card.card-green  { border-color: #22c55e; }
.overview-card.card-blue   { border-color: #3b82f6; }
.overview-card.card-indigo { border-color: #6366f1; }
.overview-card.card-purple { border-color: #8b5cf6; }

.overview-card-header {
    padding: var(--spacing-xl);
    border-bottom: 2px solid #e0f2fe;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.overview-card-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    margin: 0;
}

.overview-card-body {
    padding: var(--spacing-xl);
    flex: 1;
    overflow-y: auto;
}
/* ===== END CSS SECTION 2 ===== */

/* ===== CSS SECTION 3: CALENDAR CARD ===== */
.calendar-view-toggle {
    display: flex;
    gap: var(--spacing-xs);
    background: #e0f2fe;
    padding: var(--spacing-xs);
    border-radius: var(--radius-md);
}

.view-toggle-btn {
    padding: var(--spacing-xs) var(--spacing-md);
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
    cursor: pointer;
    transition: all var(--transition-base);
}

.view-toggle-btn.active {
    background: var(--color-white);
    color: var(--tenant-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Week View Navigation */
.calendar-week-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.calendar-week-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
}

/* Week Grid Calendar (7-column Mon-Sun) */
.calendar-compact-list {
    min-height: 80px;
}

.week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.week-grid-cell {
    border-right: 1px solid var(--color-gray-200);
    min-height: 80px;
    display: flex;
    flex-direction: column;
}

.week-grid-cell:last-child {
    border-right: none;
}

.week-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-200);
    font-size: var(--font-size-xs);
}

.week-grid-day {
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-700);
    text-transform: uppercase;
}

.week-grid-date {
    color: var(--color-gray-500);
    font-weight: var(--font-weight-semibold);
}

/* Today column */
.week-grid-cell-today .week-grid-header {
    background: #e0f2fe;
}

.week-grid-cell-today .week-grid-day,
.week-grid-cell-today .week-grid-date {
    color: var(--tenant-primary);
}

/* Past columns */
.week-grid-cell-past .week-grid-header {
    background: var(--color-gray-100);
}

.week-grid-cell-past .week-grid-day,
.week-grid-cell-past .week-grid-date {
    color: var(--color-gray-400);
}

.week-grid-cell-past .week-grid-events {
    opacity: 0.55;
}

/* Events inside day cells */
.week-grid-events {
    padding: var(--spacing-xs);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: 1;
}

.week-grid-event {
    display: flex;
    flex-direction: column;
    padding: 3px var(--spacing-xs);
    background: #f0fdf4;
    border-left: 3px solid #22c55e;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 11px;
    line-height: 1.3;
}

.week-grid-event-time {
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-800);
}

.week-grid-event-league {
    color: var(--color-gray-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Month Calendar View */
.calendar-month-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.calendar-nav-btn {
    background: none;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    transition: all var(--transition-base);
}

.calendar-nav-btn:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-900);
    border-color: var(--color-gray-400);
}

.calendar-month-label {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
}

.calendar-month-grid,
.calendar-month-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.calendar-dow {
    text-align: center;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-500);
    text-transform: uppercase;
    padding: var(--spacing-xs) 0;
}

.calendar-day {
    text-align: center;
    padding: var(--spacing-xs);
    min-height: 42px;
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    position: relative;
}

.calendar-day-empty {
    background: none;
}

.calendar-day-num {
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    line-height: 1;
}

.calendar-day-today {
    background: #e0f2fe;
    font-weight: var(--font-weight-bold);
}

.calendar-day-today .calendar-day-num {
    color: var(--tenant-primary);
}

/* Past days in month view */
.calendar-day-past .calendar-day-num {
    color: var(--color-gray-400);
}

.calendar-day-has-events {
    cursor: pointer;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    transition: all var(--transition-base);
}

/* Past days that had events - still clickable but muted */
.calendar-day-past.calendar-day-has-events {
    background: var(--color-gray-50);
    border-color: var(--color-gray-300);
}

.calendar-day-past.calendar-day-has-events:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-400);
}

.calendar-day-has-events:hover {
    background: #dcfce7;
    border-color: #86efac;
}

.calendar-day-has-events.calendar-day-today {
    background: linear-gradient(135deg, #e0f2fe 0%, #dcfce7 100%);
    border-color: #86efac;
}

.calendar-day-selected {
    background: #3b82f6 !important;
    border-color: #2563eb !important;
}

.calendar-day-selected .calendar-day-num {
    color: #fff !important;
}

.calendar-day-selected .calendar-day-dot,
.calendar-day-selected .calendar-day-dot-multi {
    background: #fff !important;
}

.calendar-day-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
}

.calendar-day-dot-multi {
    width: 10px;
    border-radius: 3px;
}

/* Day detail panel */
.calendar-day-detail {
    margin-top: var(--spacing-md);
    min-height: 0;
}

.calendar-detail-header {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-700);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-gray-200);
    margin-bottom: var(--spacing-xs);
}

.calendar-detail-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.calendar-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: #f0f9ff;
    border-radius: var(--radius-sm);
    border: 1px solid #bae6fd;
}

.calendar-detail-league {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
}

.calendar-detail-time {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}
/* ===== END CSS SECTION 3 ===== */

/* ===== CSS SECTION 4: LEAGUES CARD ===== */
.leagues-compact-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.league-compact-item {
    padding: var(--spacing-md);
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: var(--radius-lg);
    border: 2px solid #bbf7d0;
    transition: all var(--transition-base);
}

.league-compact-item:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: var(--tenant-secondary);
}

.league-compact-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.league-compact-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    margin: 0;
    flex: 1;
}

.league-compact-capacity {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--tenant-secondary);
    background: rgba(16, 185, 129, 0.1);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    flex-shrink: 0;
    margin-left: var(--spacing-md);
}

.league-compact-meta {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
}

.league-compact-skill {
    font-weight: var(--font-weight-medium);
}

.leagues-section-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 var(--spacing-sm) 0;
}

.league-type-badge {
    font-weight: var(--font-weight-medium);
    color: var(--tenant-secondary);
}

/* Past Seasons */
.past-seasons-section {
    margin-top: var(--spacing-lg);
    border-top: 1px solid var(--color-gray-200);
    padding-top: var(--spacing-md);
}

.past-seasons-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-600);
    padding: var(--spacing-xs) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.past-seasons-toggle:hover {
    color: var(--color-gray-900);
}

.past-seasons-arrow {
    font-size: 10px;
    transition: transform 0.2s ease;
    display: inline-block;
}

.past-seasons-section.expanded .past-seasons-arrow {
    transform: rotate(90deg);
}

.past-seasons-content {
    display: none;
    margin-top: var(--spacing-sm);
}

.past-seasons-section.expanded .past-seasons-content {
    display: block;
}

.past-season-group {
    margin-bottom: var(--spacing-md);
}

.past-season-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-700);
    margin: 0 0 var(--spacing-xs) 0;
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-gray-200);
}

.past-league-item {
    background: var(--color-gray-50) !important;
    border-color: var(--color-gray-200) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
}

.past-league-item:hover {
    background: var(--color-gray-100) !important;
}

.past-league-players {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    flex-shrink: 0;
}
/* ===== END CSS SECTION 4 ===== */

/* ===== CSS SECTION 5: REGISTRATION / ORG INFO CARD ===== */
.org-info-tagline {
    text-align: center;
    font-style: italic;
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-base);
}

.reg-stats {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    display: flex;
    justify-content: space-around;
    margin-bottom: var(--spacing-lg);
}

.reg-stat-item {
    text-align: center;
}

.reg-stat-value {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--tenant-purple);
    line-height: 1;
    margin-bottom: var(--spacing-xs);
}

.reg-stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    font-weight: var(--font-weight-medium);
}

.reg-divider {
    height: 2px;
    background: linear-gradient(to right, transparent, #e9d5ff, transparent);
    margin: var(--spacing-lg) 0;
}

.reg-info-content {
    text-align: center;
}

.reg-info-text {
    font-size: var(--font-size-base);
    color: var(--color-gray-700);
    margin-bottom: var(--spacing-lg);
    line-height: var(--line-height-relaxed);
}

.reg-contact-items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.reg-contact-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border-radius: var(--radius-lg);
    border: 2px solid #e9d5ff;
}

.reg-contact-icon {
    font-size: var(--font-size-xl);
}

.reg-contact-link {
    color: var(--tenant-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
}

.reg-contact-link:hover {
    color: var(--tenant-primary-dark);
    text-decoration: underline;
}
/* ===== END CSS SECTION 5 ===== */

/* ===== CSS SECTION 6: ANNOUNCEMENTS CARD ===== */
.announcements-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.announcement-item {
    padding: var(--spacing-md);
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--tenant-accent);
}

/* Weather announcements - blue tint */
.announcement-item.announcement-weather {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-left-color: #3b82f6;
}

/* Skip/holiday announcements - purple tint */
.announcement-item.announcement-skip {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border-left-color: #8b5cf6;
}

/* Urgent announcements - red accent */
.announcement-item.announcement-urgent {
    border-left-color: var(--color-error);
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

.announcement-icon {
    margin-right: var(--spacing-xs);
}

.announcement-date {
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.announcement-item.announcement-urgent .announcement-date {
    color: #991b1b;
}

.announcement-item.announcement-weather .announcement-date {
    color: #1e40af;
}

.announcement-item-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-xs);
}

.announcement-item-content {
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

.announcements-view-all {
    text-align: center;
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
/* Announcement detail page */
.announcement-detail-nav {
    margin-bottom: var(--spacing-lg);
}

.announcement-detail-card {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.announcement-detail-header {
    padding: var(--spacing-xl);
    border-bottom: 1px solid var(--color-gray-100);
}

.announcement-detail-title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    margin: var(--spacing-sm) 0 var(--spacing-xs);
}

.announcement-detail-date {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-lg);
}

.announcement-detail-body {
    padding: var(--spacing-xl);
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--color-gray-800);
}

.announcement-detail-body ul {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-xl);
    list-style: disc;
}

.announcement-detail-body ol {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-xl);
    list-style: decimal;
}

.announcement-detail-body li {
    margin-bottom: var(--spacing-xs);
}

.announcement-detail-body a {
    color: var(--color-primary);
    text-decoration: underline;
}

.announcement-detail-body strong {
    font-weight: var(--font-weight-bold);
}

/* Read More link in card */
.announcement-read-more {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
}

.announcement-read-more:hover {
    text-decoration: underline;
}
/* ===== END CSS SECTION 6 ===== */

/* ===== CSS SECTION 7: COMPACT EMPTY STATES ===== */
.empty-state-compact {
    padding: var(--spacing-2xl);
    text-align: center;
}

.empty-state-icon-compact {
    font-size: 4rem;
    opacity: 0.15;
    margin-bottom: var(--spacing-md);
    filter: grayscale(100%);
}

.empty-state-text-compact {
    font-size: var(--font-size-base);
    color: var(--color-gray-500);
    margin: 0;
}
/* ===== END CSS SECTION 7 ===== */

/* ===== CSS SECTION 8: PLAYER DASHBOARD ===== */
.player-dashboard-wrapper {
    background: linear-gradient(to bottom, #dbeafe 0%, #e0f2fe 100%);
    min-height: calc(100vh - 180px);
    padding-bottom: 0;
}

.dashboard-hero {
    background: linear-gradient(135deg, var(--tenant-primary) 0%, var(--tenant-primary-dark) 100%);
    color: var(--color-white);
    padding: var(--spacing-2xl) 0;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.dashboard-hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.profile-selector {
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.profile-selector-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.profile-selector-dropdown {
    font-size: var(--font-size-lg);
    padding: var(--spacing-sm) var(--spacing-xl);
    border-radius: var(--radius-lg);
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-gray-900);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    min-width: 300px;
}

.profile-selector-dropdown:hover {
    background: var(--color-white);
    border-color: var(--color-white);
}

.profile-selector-dropdown:focus {
    outline: none;
    border-color: var(--color-white);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.dashboard-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-sm);
    color: var(--color-white);
}

.dashboard-subtitle {
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}

.dashboard-content {
    padding: var(--spacing-3xl) var(--spacing-xl);
    padding-bottom: var(--spacing-3xl);
    max-width: 1200px;
    margin: 0 auto;
}

/* Dashboard Stats Bar - compact horizontal stats with color */
.stats-bar-header {
    text-align: center;
    margin-bottom: var(--spacing-xs);
}

.stats-bar-title {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-gray-400);
    font-weight: var(--font-weight-semibold);
}

.dashboard-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.stats-bar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 2px solid;
}

.stats-bar-item:nth-child(1) {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #93c5fd;
}

.stats-bar-item:nth-child(2) {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #86efac;
}

.stats-bar-item:nth-child(3) {
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border-color: #fde047;
}

.stats-bar-item:nth-child(4) {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border-color: #c4b5fd;
}

.stats-bar-icon {
    font-size: 1.75rem;
    flex-shrink: 0;
}

.stats-bar-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stats-bar-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}

.stats-bar-item:nth-child(1) .stats-bar-value { color: #2563eb; }
.stats-bar-item:nth-child(2) .stats-bar-value { color: #16a34a; }
.stats-bar-item:nth-child(3) .stats-bar-value { color: #ca8a04; }
.stats-bar-item:nth-child(4) .stats-bar-value { color: #7c3aed; }

.stats-bar-label {
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

/* Content cards for dashboard */
.content-card {
    background: var(--color-white);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-3xl);
    margin-bottom: var(--spacing-xl);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-gray-300);
}

/* Skill color card accents */
.content-card.card-red    { border-color: #ef4444; }
.content-card.card-orange { border-color: #f97316; }
.content-card.card-yellow { border-color: #eab308; }
.content-card.card-green  { border-color: #22c55e; }
.content-card.card-blue   { border-color: #3b82f6; }
.content-card.card-indigo { border-color: #6366f1; }
.content-card.card-purple { border-color: #8b5cf6; }

/* Remove bottom margin on last content card */
.content-card:last-child {
    margin-bottom: 0;
}

.card-header-section {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 2px solid #e0f2fe;
}

.card-section-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-sm);
}

.card-section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-gray-600);
    margin: 0;
}

/* Profile cards for multiple profiles */
.profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.profile-card-small {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 2px solid #bae6fd;
    text-align: center;
}

.profile-name-small {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-sm);
}

.profile-meta-small {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    align-items: center;
}

.profile-gender {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

/* Content lists for leagues/dates */
.content-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.content-item {
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, var(--color-white) 0%, #f9fafb 100%);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-gray-300);
    transition: all var(--transition-base);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.content-item:hover {
    background: var(--color-white);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateX(4px);
}

.content-item-primary {
    border-left-color: var(--tenant-primary);
}

.content-item-secondary {
    border-left-color: var(--tenant-secondary);
}

.item-title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-lg);
}

.item-meta {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
}

/* RSVP status display */
.rsvp-status {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

/* Stats cards for dashboard */
.stats-card-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--spacing-lg);
}

.stat-card {
    background: var(--color-white);
    padding: var(--spacing-3xl);
    border-radius: var(--radius-2xl);
    text-align: center;
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.12);
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-card-success {
    background: linear-gradient(135deg, var(--tenant-secondary) 0%, var(--tenant-secondary-dark) 100%);
}

.stat-card-primary {
    background: linear-gradient(135deg, var(--tenant-primary) 0%, var(--tenant-primary-dark) 100%);
}

.stat-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.stat-value {
    font-size: 4rem;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-sm);
    line-height: 1;
}

.stat-label {
    font-size: var(--font-size-lg);
    opacity: 0.95;
    font-weight: var(--font-weight-medium);
}

/* Quick actions grid */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.action-card {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    border: 2px solid #e9d5ff;
    text-align: center;
    text-decoration: none;
    transition: all var(--transition-base);
    display: block;
}

.action-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    border-color: var(--tenant-purple);
}

.action-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: var(--spacing-md);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.action-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-sm);
}

.action-description {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin: 0;
    line-height: var(--line-height-relaxed);
}

/* Action card with league select dropdown */
.action-card-select {
    cursor: default;
}

.action-card-select:hover {
    transform: none;
}

.action-league-select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid #d1d5db;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    background: var(--color-white);
    cursor: pointer;
    margin-top: var(--spacing-sm);
}

.action-league-select:focus {
    outline: none;
    border-color: var(--tenant-purple);
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);
}

/* Empty states */
.empty-state {
    padding: var(--spacing-3xl) var(--spacing-xl);
    text-align: center;
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border-radius: var(--radius-lg);
    border: 2px dashed #d1d5db;
}

.empty-state-icon {
    font-size: 5rem;
    opacity: 0.15;
    margin-bottom: var(--spacing-lg);
    filter: grayscale(100%);
}

.empty-state-text {
    font-size: var(--font-size-lg);
    color: var(--color-gray-500);
    margin: 0;
    font-weight: var(--font-weight-medium);
}

/* Two-column layout for leagues and subs */
.dashboard-two-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    align-items: start; /* Align cards to top */
}

/* Remove bottom margin from content-card when inside two-col layout */
.dashboard-two-col > .content-card {
    margin-bottom: 0;
    height: 100%; /* Make cards stretch to equal height */
    display: flex;
    flex-direction: column;
}

/* Make the card body flex to fill available space */
.dashboard-two-col > .content-card .card-header-section {
    flex-shrink: 0; /* Header stays its natural size */
}

/* Empty states and content lists should also flex properly */
.dashboard-two-col > .content-card .empty-state,
.dashboard-two-col > .content-card .content-list {
    flex: 1; /* Fill remaining space */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically in available space */
}

/* Compact stats grid */
.stats-grid-compact {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
}

.stat-item-compact {
    text-align: center;
    padding: var(--spacing-xl);
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: var(--radius-lg);
    border: 2px solid #bae6fd;
}

.stat-item-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-sm);
    display: block;
}

.stat-item-value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--tenant-primary);
    margin-bottom: var(--spacing-xs);
    line-height: 1;
}

.stat-item-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    font-weight: var(--font-weight-medium);
}

.stats-empty-note {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--color-gray-600);
    font-style: italic;
}

.stats-empty-note p {
    margin: 0;
}

/* ===== END CSS SECTION 8 ===== */

/* ===== CSS SECTION 9: RESPONSIVE ===== */
/* ===== FLUID GRID OVERRIDES (no breakpoints needed) ===== */

/* Make grids flow naturally */
.overview-grid {
    grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px) {
    .overview-grid {
        grid-template-columns: 1fr;
    }
}
.dashboard-two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--spacing-xl);
    align-items: start;
}
.dashboard-stats-bar {
    grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
}
.stats-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
}
.quick-actions-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

/* Overflow protection for all tenant cards */
.overview-card,
.content-card,
.league-compact-item {
    max-width: 100%;
    overflow: hidden;
}

/* Flex containers that should wrap */
.item-meta,
.league-compact-meta {
    flex-wrap: wrap;
}

/* Long text protection */
.reg-contact-link {
    word-break: break-all;
    overflow-wrap: break-word;
}

/* Profile selector scales with screen */
.profile-selector-dropdown {
    min-width: min(300px, 100%);
}

/* Content card uses fluid padding from variables */
.content-card {
    padding: var(--spacing-xl);
}

@media (max-width: 768px) {
    /* Calendar: vertical list instead of 7-col grid */
    .week-grid {
        grid-template-columns: 1fr;
    }
    .week-grid-cell {
        border-right: none;
        border-bottom: 1px solid var(--color-gray-200);
        min-height: auto;
    }
    .week-grid-cell:last-child {
        border-bottom: none;
    }
    .week-grid-cell-past:not(:has(.week-grid-event)) {
        display: none;
    }

    /* Overview card header stacks vertically */
    .overview-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    /* About section icon repositions */
    .about-icon {
        position: static;
        display: block;
        margin-bottom: var(--spacing-md);
    }
    .about-header-group {
        padding-left: 0;
    }
}

/* ===== END CSS SECTION 9 ===== */

/* ===== SECTION 10: PLAYER DASHBOARD ATTENDANCE RESPONSES ===== */

/* Play Dates List */
.play-dates-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Individual Play Date Item */
.play-date-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-gray-400);
    gap: var(--spacing-lg);
}

.play-date-item.play-date-response-yes {
    border-left-color: var(--color-success);
    background: linear-gradient(to right, rgba(16, 185, 129, 0.05), transparent);
}

.play-date-item.play-date-response-no {
    border-left-color: var(--color-danger);
    background: linear-gradient(to right, rgba(239, 68, 68, 0.05), transparent);
}

.play-date-item.play-date-response-pending {
    border-left-color: var(--color-warning);
    background: linear-gradient(to right, rgba(245, 158, 11, 0.05), transparent);
}

/* Play Date Info */
.play-date-info {
    flex: 1;
}

.play-date-league {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin: 0 0 var(--spacing-xs) 0;
}

.play-date-details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.play-date-date,
.play-date-time,
.play-date-week {
    white-space: nowrap;
}

.play-date-deadline {
    font-size: var(--font-size-xs);
    color: var(--color-warning-dark, #b45309);
    margin-top: var(--spacing-xs);
    font-style: italic;
}

/* Response Section */
.play-date-response {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-sm);
}

/* Response Badge */
.response-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.response-badge.response-yes {
    background: var(--color-success-light, #dcfce7);
    color: var(--color-success-dark, #166534);
}

.response-badge.response-no {
    background: var(--color-danger-light, #fee2e2);
    color: var(--color-danger-dark, #991b1b);
}

.response-badge.response-pending {
    background: var(--color-warning-light, #fef3c7);
    color: var(--color-warning-dark, #92400e);
}

/* Response Form */
.response-form {
    margin: 0;
}

.response-buttons {
    display: flex;
    gap: var(--spacing-xs);
}

.btn-response {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    background: var(--color-white);
    cursor: pointer;
    font-size: var(--font-size-lg);
    transition: all 0.15s ease;
}

.btn-response:hover {
    transform: scale(1.1);
}

/* Non-active buttons are neutral gray - only active response is colored */
.btn-response-yes,
.btn-response-no,
.btn-response-pending {
    color: var(--color-gray-400);
}

.btn-response-yes:hover {
    color: var(--color-success);
    border-color: var(--color-success);
    background: var(--color-success-light, #dcfce7);
}

.btn-response-yes.active {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-white);
}

.btn-response-no:hover {
    color: var(--color-danger);
    border-color: var(--color-danger);
    background: var(--color-danger-light, #fee2e2);
}

.btn-response-no.active {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--color-white);
}

.btn-response-pending:hover {
    color: var(--color-warning-dark, #b45309);
    border-color: var(--color-warning);
    background: var(--color-warning-light, #fef9c3);
}

.btn-response-pending.active {
    background: var(--color-warning);
    border-color: var(--color-warning);
    color: var(--color-white);
}

/* Deadline/Notice Messages */
.deadline-passed-notice,
.no-attendance-notice {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    font-style: italic;
}

/* Responsive */
@media (max-width: 640px) {
    .play-date-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .play-date-response {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: var(--spacing-sm);
        padding-top: var(--spacing-sm);
        border-top: 1px solid var(--color-gray-200);
    }
}

/* ===== END SECTION 10 ===== */

/* ===== SECTION 11: PLAYER DASHBOARD COMPACT STYLES ===== */

/* Compact Play Dates List */
.play-dates-list.compact .play-date-item {
    padding: var(--spacing-sm) var(--spacing-md);
}

.play-dates-list.compact .play-date-league {
    font-size: var(--font-size-base);
    margin-bottom: 2px;
}

.play-dates-list.compact .play-date-details {
    font-size: var(--font-size-xs);
    gap: var(--spacing-sm);
}

.play-dates-list.compact .btn-response {
    width: 28px;
    height: 28px;
    font-size: var(--font-size-sm);
}

/* Compact Empty State */
.empty-state-compact {
    padding: var(--spacing-lg);
}

.empty-state-compact .empty-state-icon {
    display: none;
}

.empty-state-compact .empty-state-text {
    margin: 0;
    color: var(--color-gray-500);
    font-style: italic;
}

/* Needs Response State */
.play-date-item.needs-response {
    border-left-color: var(--color-danger);
    background: linear-gradient(to right, rgba(239, 68, 68, 0.08), transparent);
    animation: pulse-attention 2s ease-in-out infinite;
}

@keyframes pulse-attention {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2); }
}

.response-needed-label {
    font-size: var(--font-size-xs);
    color: var(--color-danger);
    font-weight: var(--font-weight-medium);
    margin-top: var(--spacing-xs);
}

/* Make buttons more obvious for pending - subtle tint to invite action */
.play-date-item.needs-response .btn-response {
    border-width: 2px;
}

.play-date-item.needs-response .btn-response-yes {
    color: var(--color-success);
    border-color: var(--color-success);
    background: var(--color-success-light, #dcfce7);
}

.play-date-item.needs-response .btn-response-no {
    color: var(--color-danger);
    border-color: var(--color-danger);
    background: var(--color-danger-light, #fee2e2);
}

/* Upcoming Schedule List */
.upcoming-schedule-list {
    display: flex;
    flex-direction: column;
}

.upcoming-schedule-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-gray-100);
}

.upcoming-schedule-item:last-child {
    border-bottom: none;
}

.schedule-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 40px;
    padding: var(--spacing-xs);
    background: var(--color-gray-100);
    border-radius: var(--radius-sm);
}

.schedule-month {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    color: var(--color-gray-500);
    font-weight: var(--font-weight-medium);
}

.schedule-day {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-800);
    line-height: 1;
}

.schedule-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.schedule-league {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
}

.schedule-time {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

.schedule-scores-link {
    font-size: var(--font-size-xs);
    color: var(--tenant-primary, var(--color-primary));
    text-decoration: none;
    white-space: nowrap;
    padding: 2px 8px;
    border: 1px solid var(--tenant-primary, var(--color-primary));
    border-radius: var(--radius-sm);
    margin-left: auto;
}

.schedule-scores-link:hover {
    background: var(--tenant-primary, var(--color-primary));
    color: #fff;
}

.schedule-response {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
}

.schedule-response.response-yes {
    background: var(--color-success-light, #dcfce7);
    color: var(--color-success);
}

.schedule-response.response-no {
    background: var(--color-danger-light, #fee2e2);
    color: var(--color-danger);
}

.schedule-response.response-pending {
    background: var(--color-gray-100);
    color: var(--color-gray-400);
}

.schedule-response-form {
    flex-shrink: 0;
}

.schedule-response-buttons {
    display: flex;
    gap: 4px;
}

.btn-response-mini {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-gray-200);
    background: var(--color-gray-50);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: all var(--transition-fast);
    padding: 0;
}

.btn-response-mini.btn-response-yes:hover {
    background: var(--color-success-light, #dcfce7);
    color: var(--color-success);
    border-color: var(--color-success);
}

.btn-response-mini.btn-response-no:hover {
    background: var(--color-danger-light, #fee2e2);
    color: var(--color-danger);
    border-color: var(--color-danger);
}

/* ===== END SECTION 11 ===== */

/* ===== SECTION 12: ATTENDANCE RESPONSE PAGE ===== */
/* Player attendance response page (token-based, no login required) */

.attendance-response-container {
    max-width: 500px;
    margin: var(--spacing-xl) auto;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.attendance-response-header {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark, #059669) 100%);
    color: var(--color-white);
    padding: var(--spacing-xl);
    text-align: center;
}

.attendance-response-header h1 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
}

.attendance-response-header .league-name {
    font-size: var(--font-size-lg);
    opacity: 0.9;
}

.attendance-response-body {
    padding: var(--spacing-xl);
}

/* Player Greeting */
.player-greeting {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    color: var(--color-gray-600);
}

.player-greeting .name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
}

/* Play Date Info Card */
.play-date-info {
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.play-date-info .date {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-xs);
}

.play-date-info .time {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-sm);
}

.play-date-info .week {
    display: inline-block;
    background: var(--color-primary-light);
    color: var(--color-primary);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* Deadline Notice */
.deadline-notice {
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    text-align: center;
    color: var(--color-warning-dark, #92400e);
    font-size: var(--font-size-sm);
}

.deadline-notice strong {
    display: block;
    margin-bottom: var(--spacing-xs);
}

/* Current Response Display */
.current-response {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    background: var(--color-gray-100);
}

.current-response .label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-xs);
}

.current-response .value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.current-response.response-yes .value {
    color: var(--color-success);
}

.current-response.response-no .value {
    color: var(--color-danger);
}

.current-response.response-pending .value {
    color: var(--color-warning-dark, #d97706);
}

/* Response Buttons */
.response-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.response-btn {
    display: block;
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.response-btn.btn-yes {
    background: var(--color-success-light, #dcfce7);
    color: var(--color-success-dark, #166534);
    border-color: var(--color-success-border, #86efac);
}

.response-btn.btn-yes:hover {
    background: var(--color-success);
    color: var(--color-white);
}

.response-btn.btn-no {
    background: var(--color-danger-light, #fee2e2);
    color: var(--color-danger-dark, #991b1b);
    border-color: var(--color-danger-border, #fca5a5);
}

.response-btn.btn-no:hover {
    background: var(--color-danger);
    color: var(--color-white);
}

.response-btn.btn-pending {
    background: var(--color-warning-light);
    color: var(--color-warning-dark, #854d0e);
    border-color: var(--color-warning);
}

.response-btn.btn-pending:hover {
    background: var(--color-warning-dark, #854d0e);
    color: var(--color-white);
}

.response-btn.active {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

.response-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Success/Error Messages */
.response-success-message {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.response-success-message.response-yes {
    background: var(--color-success-light, #dcfce7);
    border: 1px solid var(--color-success-border, #86efac);
    color: var(--color-success-dark, #166534);
}

.response-success-message.response-no {
    background: var(--color-danger-light, #fee2e2);
    border: 1px solid var(--color-danger-border, #fca5a5);
    color: var(--color-danger-dark, #991b1b);
}

.response-success-message .response-icon {
    font-size: 32px;
    margin-bottom: var(--spacing-xs);
}

.response-error-message {
    background: var(--color-danger-light, #fee2e2);
    border: 1px solid var(--color-danger-border, #fca5a5);
    color: var(--color-danger-dark, #991b1b);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

/* Deadline Passed Notice */
.deadline-passed-notice {
    background: var(--color-danger-light, #fef2f2);
    border: 1px solid var(--color-danger-border, #fecaca);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    text-align: center;
}

.deadline-passed-notice h3 {
    color: var(--color-danger-dark, #991b1b);
    margin: 0 0 var(--spacing-sm) 0;
}

.deadline-passed-notice p {
    color: var(--color-danger-dark, #7f1d1d);
    margin: 0 0 var(--spacing-md) 0;
}

/* Contact Info Card */
.contact-info-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    text-align: left;
}

.contact-info-card .contact-label {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-xs);
}

.contact-info-card .contact-value {
    font-size: var(--font-size-base);
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-md);
}

.contact-info-card .contact-value:last-child {
    margin-bottom: 0;
}

.contact-info-card a {
    color: var(--color-primary);
    text-decoration: none;
}

.contact-info-card a:hover {
    text-decoration: underline;
}

/* Error Container */
.response-error-container {
    text-align: center;
    padding: var(--spacing-2xl);
}

.response-error-container .icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
}

.response-error-container h2 {
    color: var(--color-danger);
    margin: 0 0 var(--spacing-sm) 0;
}

.response-error-container p {
    color: var(--color-gray-600);
}

/* Response Footer */
.attendance-response-footer {
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--color-gray-50);
    border-top: 1px solid var(--color-gray-200);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.attendance-response-footer a {
    color: var(--color-primary);
    text-decoration: none;
}

.attendance-response-footer a:hover {
    text-decoration: underline;
}

/* Update message text */
.response-update-text {
    text-align: center;
    color: var(--color-gray-600);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

/* ===== END SECTION 12 ===== */

/* ===== SECTION 13: MY LEAGUES PAGE ===== */

/* Bordered card wrapper around each section */
.my-leagues-card {
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-white);
    margin-bottom: var(--spacing-lg);
}

/* Colored section header */
.my-leagues-section-header {
    margin: 0;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
}

.my-leagues-current .my-leagues-section-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, #6d28d9 100%);
}

.my-leagues-past .my-leagues-section-header {
    background: linear-gradient(135deg, var(--tenant-primary) 0%, var(--tenant-primary-dark) 100%);
}

.my-leagues-sub .my-leagues-section-header {
    background: linear-gradient(135deg, var(--tenant-accent) 0%, var(--tenant-accent-dark) 100%);
}

/* Table inside the card */
.my-leagues-table {
    width: 100%;
    border-collapse: collapse;
}

/* Column header row */
.my-leagues-col-headers th {
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-600);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-200);
}

.my-leagues-col-headers th:first-child {
    text-align: left;
}

/* Data rows */
.my-leagues-row td {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-base);
    color: var(--color-gray-800);
    border-bottom: 1px solid var(--color-gray-100);
    vertical-align: middle;
}

.my-leagues-row:last-child td {
    border-bottom: none;
}

.my-leagues-row:hover td {
    background: var(--color-gray-50);
}

/* League name cell */
.my-leagues-name {
    font-weight: var(--font-weight-normal);
}

/* Schedule column */
.my-leagues-schedule {
    text-align: center;
    white-space: nowrap;
    color: var(--color-gray-600);
}

/* Average column */
.my-leagues-avg {
    text-align: center;
    font-weight: var(--font-weight-semibold);
}

.my-leagues-avg .avg-excellent { color: var(--color-success); }
.my-leagues-avg .avg-good { color: var(--color-gray-800); }
.my-leagues-avg .avg-caution { color: var(--color-warning); }
.my-leagues-avg .avg-below { color: var(--color-error); }

/* League name column - wider */
.my-leagues-col-league {
    width: 40%;
}

/* Attendance column */
.my-leagues-att {
    text-align: center;
    font-weight: var(--font-weight-semibold);
}

.my-leagues-no-data {
    color: var(--color-gray-400);
}

/* Standings link column */
.my-leagues-standings {
    text-align: center;
    white-space: nowrap;
}

.my-leagues-standings a {
    color: var(--tenant-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.my-leagues-standings a:hover {
    color: var(--tenant-primary-dark);
    text-decoration: underline;
}

/* Empty state */
.my-leagues-empty {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-lg);
    color: var(--color-gray-500);
    font-style: italic;
    margin: 0;
}

/* Mobile: stack columns */
@media (max-width: 600px) {
    .my-leagues-col-headers {
        display: none;
    }

    .my-leagues-row {
        display: block;
        border-bottom: 1px solid var(--color-gray-200);
    }

    .my-leagues-row:last-child {
        border-bottom: none;
    }

    .my-leagues-row td {
        display: block;
        padding: var(--spacing-xs) var(--spacing-lg);
        border-bottom: none;
    }

    .my-leagues-row td.my-leagues-name {
        padding-top: var(--spacing-sm);
        font-weight: var(--font-weight-medium);
    }

    .my-leagues-row td.my-leagues-att {
        text-align: left;
    }

    .my-leagues-row td.my-leagues-att::before {
        content: 'Attendance: ';
        font-weight: var(--font-weight-normal);
        color: var(--color-gray-500);
    }

    .my-leagues-row td.my-leagues-avg {
        text-align: left;
    }

    .my-leagues-row td.my-leagues-avg::before {
        content: 'Avg: ';
        font-weight: var(--font-weight-normal);
        color: var(--color-gray-500);
    }

    .my-leagues-row td.my-leagues-standings {
        padding-bottom: var(--spacing-sm);
    }
}

/* ===== END SECTION 13 ===== */

/* ===== SECTION 14: PLAYER PROFILE VIEW ===== */

.profile-view-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 5px 0;
}

.profile-view-table th,
.profile-view-table td {
    padding: 10px 15px;
    text-align: left;
    border-bottom: 1px solid var(--color-gray-100);
    vertical-align: middle;
}

.profile-view-table tr:last-child th,
.profile-view-table tr:last-child td {
    border-bottom: none;
}

.profile-view-table th {
    width: 130px;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
    white-space: nowrap;
}

.profile-view-table td {
    color: var(--color-gray-900);
}

/* ===== END SECTION 14 ===== */

/* ===== SECTION 15: PLAYER DIRECTORY ===== */

/* Alphabetical breadcrumb navigation */
.directory-alpha-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-gray-200);
}

.directory-alpha-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.directory-alpha-link:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.directory-alpha-link.active {
    background: var(--color-primary);
    color: var(--color-white);
}

.directory-alpha-link.disabled {
    color: var(--color-gray-300);
    pointer-events: none;
}

/* Letter group headers */
.directory-letter-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

.directory-letter-header:first-of-type {
    margin-top: 0;
}

.directory-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.directory-letter-line {
    flex: 1;
    height: 1px;
    background: var(--color-gray-200);
}

/* Directory player rows */
.directory-list {
    display: flex;
    flex-direction: column;
}

.directory-row {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-gray-100);
    transition: background 0.1s ease;
    gap: var(--spacing-md);
}

.directory-row:last-child {
    border-bottom: none;
}

.directory-row:hover {
    background: var(--color-gray-50);
}

.directory-name {
    flex: 0 0 180px;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
}

.directory-skill {
    flex: 0 0 50px;
    text-align: center;
}

.directory-email {
    flex: 1;
    min-width: 0;
}

.directory-email a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
}

.directory-email a:hover {
    text-decoration: underline;
}

.directory-phone {
    flex: 0 0 140px;
    text-align: right;
}

.directory-phone a {
    color: var(--color-gray-700);
    text-decoration: none;
    font-size: var(--font-size-sm);
}

.directory-phone a:hover {
    color: var(--color-primary);
}

.directory-dash {
    color: var(--color-gray-300);
}

/* Column headers */
.directory-header {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 2px solid var(--color-gray-200);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
}

.directory-header span {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive */
@media (max-width: 640px) {
    .directory-row {
        flex-wrap: wrap;
        padding: var(--spacing-md);
        gap: var(--spacing-xs) var(--spacing-md);
    }

    .directory-name {
        flex: 0 0 100%;
        font-size: var(--font-size-base);
    }

    .directory-skill {
        flex: 0 0 auto;
    }

    .directory-email {
        flex: 1;
    }

    .directory-phone {
        flex: 0 0 100%;
        text-align: left;
    }

    .directory-header {
        display: none;
    }

    .directory-alpha-link {
        width: 26px;
        height: 26px;
        font-size: var(--font-size-xs);
    }
}

/* ===== END SECTION 15 ===== */