/* ========================================================================
   STYLES.CSS - UNIFIED STYLESHEET
   Combined from players_styles.css and admin_styles.css
   Generated: 2025-02-15
   
   Structure:
   1. Shared base styles (body, container, typography, buttons, alerts, cards)
   2. Player page styles (auth, matches, leaderboard, payments, etc.)
   3. Admin page styles (badges, tabs, logs, admin-specific components)
   ======================================================================== */


/* ====================================
   SHARED BASE STYLES
   ==================================== */

:root {
    --color-primary: #06b6d4;
    --color-primary-dark: #0891b2;
    --color-secondary: #10b981;
    --color-accent: #f59e0b;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* CRITICAL: Remove default margins that cause navigation gaps */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%);
    color: #0f172a;
    line-height: 1.6;
    /* min-height: 100vh; */ /* REMOVED: This was causing mobile nav drawer scroll issues */
}

/* Mobile: Force admin buttons to stack vertically */
@media (max-width: 640px) {
    /* Target the button container in matches.php header */
    .flex.flex-col.md\:flex-row .flex.flex-col.sm\:flex-row {
        flex-direction: column !important;
    }
    
    /* Make buttons full width on mobile */
    .flex.flex-col.md\:flex-row .flex.flex-col.sm\:flex-row > * {
        width: 100% !important;
    }
}


.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1rem;
}

@media (max-width: 768px) {
    .container {
        padding: 1rem 0.75rem;
    }
}

.page-title {
    font-family: 'Clash Display', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
    margin-bottom: 2rem;
    letter-spacing: -0.02em;
}

.page-subtitle {
    font-size: 1.125rem;
    color: #64748b;
    text-align: center;
    margin-bottom: 2rem;
}

.section-title {
    font-family: 'Clash Display', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
}

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

@media (max-width: 768px) {
    .page-title {
        font-size: 2rem;
    }
    
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ====================================
   SHARED ALERT STYLES
   ==================================== */

.alert {
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alert-success {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 2px solid #6ee7b7;
    color: #065f46;
}

.alert-error {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 2px solid #fca5a5;
    color: #dc2626;
}

.alert-info {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border: 2px solid #93c5fd;
    color: #1e40af;
}

/* When alerts contain complex content (p, ul, ol), switch to block layout */
.alert:has(ul),
.alert:has(ol),
.alert:has(p) {
    display: block;
}

.alert ul,
.alert ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.alert ul li,
.alert ol li {
    margin-bottom: 0.25rem;
    line-height: 1.5;
}

.alert p {
    margin: 0.5rem 0;
}

/* ====================================
   SHARED INFO BOX STYLES
   ==================================== */

.info-box {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #86efac;
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.info-box p {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
}

.info-box-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.info-box-content {
    line-height: 1.6;
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-list li {
    padding: 0.3rem 0;
    line-height: 1.5;
}

/* ====================================
   SHARED UTILITY CLASSES
   ==================================== */

.text-muted {
    color: #64748b;
}

.small {
    font-size: 0.875rem;
}

/* ====================================
   BOOTSTRAP-COMPATIBLE LAYOUT CLASSES
   (Used by backup pages and similar)
   ==================================== */

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}

.row > * {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

.justify-content-center {
    justify-content: center;
}

.col-md-8 {
    width: 100%;
    max-width: 100%;
}

@media (min-width: 768px) {
    .col-md-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
}

.card-header {
    padding: 1.25rem 2rem;
    border-radius: 1.5rem 1.5rem 0 0;
    font-weight: 700;
}

.card-header h4 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.card-header.bg-danger {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
}

.card-header.bg-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
}

.card-body {
    padding: 2rem;
}

/* ====================================
   SHARED BUTTON STYLES
   ==================================== */

.btn-primary {
    background: linear-gradient(135deg, var(--color-secondary), #059669);
    color: white;
    padding: 0.875rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.4);
}

.btn-danger {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px -2px rgba(220, 38, 38, 0.4);
}

.btn-back {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    box-shadow: 0 4px 6px -1px rgba(100, 116, 139, 0.3);
}

.btn-back:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px -2px rgba(100, 116, 139, 0.4);
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px -2px rgba(245, 158, 11, 0.4);
}

.btn-info {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px -2px rgba(6, 182, 212, 0.4);
}

.btn-edit {
    background: linear-gradient(135deg, #ea580c, #c2410c);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(234, 88, 12, 0.4);
}

/* ====================================
   TAILWIND GRADIENT BUTTON OVERRIDES
   These ensure buttons with Tailwind classes get proper styling
   ==================================== */

/* Purple gradient buttons (Practice Match button) */
a.bg-gradient-to-r.from-purple-500.to-purple-600,
button.bg-gradient-to-r.from-purple-500.to-purple-600,
.bg-gradient-to-r.from-purple-500.to-purple-600 {
    background: linear-gradient(to right, #a855f7, #9333ea) !important;
    color: white !important;
}

a.bg-gradient-to-r.from-purple-500.to-purple-600:hover,
button.bg-gradient-to-r.from-purple-500.to-purple-600:hover,
.hover\:from-purple-600:hover.from-purple-500 {
    background: linear-gradient(to right, #9333ea, #7e22ce) !important;
}

/* Green gradient buttons (Start Playing button, Create Practice Match button) */
a.bg-gradient-to-r.from-green-500.to-green-600,
button.bg-gradient-to-r.from-green-500.to-green-600,
.bg-gradient-to-r.from-green-500.to-green-600 {
    background: linear-gradient(to right, #10b981, #059669) !important;
    color: white !important;
}

a.bg-gradient-to-r.from-green-500.to-green-600:hover,
button.bg-gradient-to-r.from-green-500.to-green-600:hover,
.hover\:from-green-600:hover.from-green-500 {
    background: linear-gradient(to right, #059669, #047857) !important;
}

/* Blue gradient (if used) */
a.bg-gradient-to-r.from-blue-500.to-blue-600,
button.bg-gradient-to-r.from-blue-500.to-blue-600,
.bg-gradient-to-r.from-blue-500.to-blue-600 {
    background: linear-gradient(to right, #3b82f6, #2563eb) !important;
    color: white !important;
}

/* Cyan gradient (if used) */
a.bg-gradient-to-r.from-cyan-500.to-cyan-600,
button.bg-gradient-to-r.from-cyan-500.to-cyan-600,
.bg-gradient-to-r.from-cyan-500.to-cyan-600 {
    background: linear-gradient(to right, #06b6d4, #0891b2) !important;
    color: white !important;
}

/* ====================================
   NAVIGATION & FOOTER BACKGROUND FIXES
   Ensures navigation and footer have backgrounds without borders
   ==================================== */

/* Navigation backgrounds - Tailwind color utility fallbacks */
.bg-blue-500 {
    background-color: #3b82f6 !important;
}

.bg-blue-600 {
    background-color: #2563eb !important;
}

.bg-cyan-500 {
    background-color: #06b6d4 !important;
}

.bg-cyan-600 {
    background-color: #0891b2 !important;
}

.bg-green-500 {
    background-color: #10b981 !important;
}

.bg-green-600 {
    background-color: #059669 !important;
}

.bg-purple-500 {
    background-color: #a855f7 !important;
}

.bg-purple-600 {
    background-color: #9333ea !important;
}

.bg-red-500 {
    background-color: #ef4444 !important;
}

.bg-red-600 {
    background-color: #dc2626 !important;
}

.bg-gray-500 {
    background-color: #6b7280 !important;
}

.bg-gray-600 {
    background-color: #4b5563 !important;
}

.bg-gray-700 {
    background-color: #374151 !important;
}

.bg-gray-800 {
    background-color: #1f2937 !important;
}

.bg-gray-900 {
    background-color: #111827 !important;
}

/* CRITICAL FIX: Make header fill full width without borders */
.modern-header {
    /* DO NOT set background-color here - it comes from PHP classes like bg-blue-500 */
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Ensure header container doesn't add extra padding on edges */
.header-container {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Footer styles - simple since footer will be moved outside containers */
.modern-footer {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.footer-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 2rem 1rem !important;
}

/* Text color utilities */
.text-white {
    color: white !important;
}

.text-gray-100 {
    color: #f3f4f6 !important;
}

.text-gray-200 {
    color: #e5e7eb !important;
}

/* ====================================
   SHARED FORM STYLES
   ==================================== */

.input-field, select {
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    width: 100%;
    transition: all 0.2s ease;
}

.input-field:focus, select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

.form-label {
    display: block;
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.form-grid {
    display: grid;
    gap: 1.5rem;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.form-textarea {
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    width: 100%;
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
    transition: all 0.2s ease;
}

.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

/* ====================================
   SHARED CARD STYLES
   ==================================== */

.card {
    background: white;
    border-radius: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    border: 1px solid #e2e8f0;
    margin-bottom: 2rem;
}

/* When card uses card-header/card-body pattern, remove card padding */
.card:has(.card-header) {
    padding: 0;
    overflow: hidden;
}

.filter-card {
    background: white;
    border-radius: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid #e2e8f0;
}

.balance-card {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 2px solid #93c5fd;
    border-radius: 1.5rem;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.balance-card.positive {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-color: #fca5a5;
}

.balance-card.negative {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-color: #6ee7b7;
}

/* ====================================
   SHARED PLAYER/TEAM CARD STYLES
   ==================================== */

.player-card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
}

.player-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.15);
}

.players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.player-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
}

.player-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 4px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.player-stats {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.player-stat {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 0.5rem;
}

.player-stat-label {
    font-weight: 600;
    color: #64748b;
}

.player-stat-value {
    font-weight: 700;
    color: #0f172a;
}

/* ====================================
   SHARED TABLE STYLES
   ==================================== */

.responsive-table {
    width: 100%;
    overflow-x: auto;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    min-width: 100%; /* Ensure table doesn't overflow container */
}

.table thead {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
}

.table thead th {
    padding: 1rem;
    text-align: left;
    font-weight: 700;
    color: #0f172a;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    white-space: nowrap; /* Prevent header text wrapping */
}

.table tbody td {
    padding: 1rem;
    border-top: 1px solid #e2e8f0;
}

.table tbody tr:hover {
    background: #f8fafc;
}

/* CRITICAL FIX: Responsive table container for matches page */
.matches-table-container {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 2rem;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Ensure table cells don't force width */
.table td,
.table th {
    max-width: none;
    overflow: visible;
}

/* Make sure long text in cells wraps properly on smaller screens */
@media (max-width: 1400px) {
    .table thead th,
    .table tbody td {
        padding: 0.75rem 0.5rem;
        font-size: 0.875rem;
    }
    
    /* Allow some text wrapping on smaller screens */
    .table tbody td {
        white-space: normal;
        word-wrap: break-word;
    }
}

/* For very wide tables on desktop, ensure they fit */
@media (min-width: 1400px) {
    .table {
        table-layout: auto; /* Let table size itself naturally */
    }
}

/* Desktop table layout - prevent horizontal scrolling */
.matches-table {
    width: 100%;
    table-layout: auto;
}

/* Desktop: Ensure table cells wrap text properly */
@media (min-width: 769px) {
    .matches-table tr {
        display: table-row;
    }
    
    .matches-table td {
        display: table-cell;
        padding: 0.75rem;
        vertical-align: top;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }
    
    .matches-table th {
        padding: 0.75rem;
        vertical-align: top;
    }
    
    /* Set minimum widths for desktop */
    .matches-table td:first-child,
    .matches-table th:first-child {
        min-width: 80px;
    }
    
    .matches-table td:nth-child(2),
    .matches-table th:nth-child(2) {
        min-width: 100px;
    }
    
    .matches-table td:nth-child(3),
    .matches-table th:nth-child(3) {
        min-width: 200px;
    }
    
    .matches-table td:nth-child(4),
    .matches-table th:nth-child(4) {
        min-width: 180px;
    }
    
    .matches-table td:nth-child(5),
    .matches-table th:nth-child(5) {
        min-width: 80px;
    }
    
    .matches-table td:nth-child(6),
    .matches-table th:nth-child(6) {
        min-width: 80px;
    }
    
    .matches-table td:last-child,
    .matches-table th:last-child {
        min-width: 180px;
    }
    
    /* Desktop: Hide mobile elements, show desktop elements */
    .matches-table .mobile-only {
        display: none !important;
    }
    
    .mobile-label {
        display: none !important; /* Hide all mobile labels on desktop */
    }
    
    .admin-delete-column {
        display: table-cell !important;
    }
    
    .mobile-delete-wrapper {
        display: none !important;
    }
    
    .desktop-division-header,
    .desktop-division-cell {
        display: table-cell !important;
    }
}

/* Mobile: Grid layout for cards */
@media (max-width: 768px) {
    .matches-table thead {
        display: none;
    }
    
    .matches-table tr {
        display: grid;
        grid-template-areas:
            "opponent opponent"
            "date division"
            "location location"
            "winner score"
            "actions actions";
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 15px;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        padding: 12px;
    }
    
    .matches-table td {
        display: flex;
        align-items: center;
        border: none;
        padding: 0;
        text-align: left;
        font-size: 14px;
    }
    
    /* Date - left side */
    .matches-table td:nth-of-type(1) {
        grid-area: date;
        justify-content: flex-start;
        padding-right: 8px;
        font-weight: normal;
    }
    
    /* Division - right side, prevent wrapping */
    .matches-table td:nth-of-type(2) {
        grid-area: division;
        justify-content: flex-end;
        text-align: right;
        padding-left: 8px;
        display: flex !important;
        white-space: nowrap; /* Prevent division from wrapping */
    }
    
    /* Opponent - full width top */
    .matches-table td:nth-of-type(3) {
        grid-area: opponent;
        justify-content: flex-start;
        text-align: left;
        padding-bottom: 8px;
        border-bottom: 1px solid #e2e8f0;
        font-weight: 700;
        font-size: 16px;
        flex-wrap: wrap; /* Allow opponent name to wrap if needed */
    }
    
    /* Location - full width */
    .matches-table td:nth-of-type(4) {
        grid-area: location;
        justify-content: flex-start;
        padding-top: 4px;
        flex-wrap: wrap; /* Allow location to wrap if needed */
    }
    
    /* Result - left side */
    .matches-table td:nth-of-type(5) {
        grid-area: winner;
        justify-content: flex-start;
        padding-right: 8px;
    }
    
    /* Score - right side, prevent wrapping */
    .matches-table td:nth-of-type(6) {
        grid-area: score;
        justify-content: flex-end;
        text-align: right;
        padding-left: 8px;
        font-weight: 700;
        white-space: nowrap; /* Prevent score from wrapping */
    }
    
    /* Actions - full width, centered */
    .matches-table td:nth-of-type(7) {
        grid-area: actions;
        justify-content: center;
        padding-top: 8px;
        display: block !important; /* Override to show actions area */
    }
    
    .mobile-label {
        font-weight: 700;
        font-size: 12px;
        color: #000000;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-right: 6px;
        flex-shrink: 0;
    }
    
    .matches-table .mobile-only {
        display: inline !important;
    }
    
    /* Hide desktop admin column, show mobile wrapper */
    .admin-delete-column {
        display: none !important;
    }
    
    .mobile-delete-wrapper {
        display: block !important;
    }
    
    /* Mobile admin dropdown styles */
    .admin-actions-mobile-content {
        display: none; /* Hidden by default */
    }
    
    .admin-actions-mobile-content.show {
        display: block !important; /* Show when toggled */
    }
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap; /* Prevent badge text from wrapping */
}

.status-badge.pending {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
}

.status-badge.playing {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
}

.status-badge.completed {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
}

.status-badge.practice {
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
    color: #581c87;
}

/* ====================================
   SHARED ICON STYLES
   ==================================== */

.icon-display {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
}

.icon-display-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
}

.icon-display-centered {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
}

/* ====================================
   MATCHES PAGE SPECIFIC STYLES
   ==================================== */

.matches-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.match-card {
    background: white;
    border-radius: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.match-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.15);
}

.match-header-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.match-teams {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.team-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
}

.match-score {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
}

.match-vs {
    font-size: 1rem;
    color: #64748b;
    font-weight: 600;
}

.match-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.match-detail-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #64748b;
}

/* ====================================
   LEADERBOARD SPECIFIC STYLES
   ==================================== */

.leaderboard-card {
    background: white;
    border-radius: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    border: 1px solid #e2e8f0;
    margin-bottom: 2rem;
}

.leaderboard-table {
    width: 100%;
}

.leaderboard-row {
    border-bottom: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.leaderboard-row:hover {
    background: #f8fafc;
}

.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.125rem;
}

.rank-badge.gold {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
}

.rank-badge.silver {
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
    color: #374151;
}

.rank-badge.bronze {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
}

/* ====================================
   MATCH SCORING SPECIFIC STYLES
   ==================================== */

.setup-form-container {
    background: white;
    border-radius: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    border: 1px solid #e2e8f0;
}

.scoreboard {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}

.scoreboard-team {
    text-align: center;
    color: white;
}

.scoreboard-score {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, #06b6d4, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.score-display {
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
    color: var(--color-primary);
}

.game-history {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.75rem;
}

.game-card {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.game-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.game-card.winner {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border-color: #10b981;
}

/* ====================================
   PAYMENTS PAGE SPECIFIC STYLES
   ==================================== */

.payment-card {
    background: white;
    border-radius: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    border: 1px solid #e2e8f0;
    margin-bottom: 2rem;
}

.payment-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.payment-stat-card {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 2px solid #93c5fd;
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
}

.payment-stat-label {
    font-size: 0.875rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.payment-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
}

/* ====================================
   PROFILE SETTINGS SPECIFIC STYLES
   ==================================== */

.profile-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .profile-container {
        grid-template-columns: 300px 1fr;
    }
}

.profile-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.profile-avatar-section {
    background: white;
    border-radius: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    border: 1px solid #e2e8f0;
    text-align: center;
}

.profile-avatar-large {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 4px solid #e2e8f0;
    margin: 0 auto 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.profile-form-section {
    background: white;
    border-radius: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    border: 1px solid #e2e8f0;
}

/* ====================================
   MODAL STYLES
   ==================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
}

.modal-container {
    background: white;
    border-radius: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
}

.modal-header {
    padding: 1.5rem 2rem;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
}

.modal-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: #e2e8f0;
    transform: rotate(90deg);
}

.modal-body {
    padding: 2rem;
}

.modal-footer {
    padding: 1.5rem 2rem;
    border-top: 2px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

/* Modal input overrides for win condition modal */
#win-condition-modal input,
#win-condition-modal select {
    background-color: white !important;
    color: #0f172a !important;
    border: 2px solid #e2e8f0 !important;
}

#win-condition-modal input:focus,
#win-condition-modal select:focus {
    border-color: var(--color-primary) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

.bg-gradient-to-br.from-blue-50 {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
}

.bg-gradient-to-br.from-purple-50 {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%) !important;
}

.bg-gradient-to-br.from-amber-100 {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
}

/* ====================================
   AUTHENTICATION PAGES STYLES
   (login, register, forgot_password, reset_password)
   ==================================== */

/* Auth page body - centered layout */
body.auth-page {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 50%, #cffafe 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Register page body - top-aligned layout */
body.register-page {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 50%, #cffafe 100%);
    min-height: 100vh;
    padding: 2rem 1rem;
}

/* Register page container */
.register-container {
    max-width: 800px;
    margin: 0 auto;
}

/* Auth cards - centered cards for login/forgot/reset */
.auth-card {
    background: white;
    border-radius: 1.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    padding: 3rem 2.5rem;
    width: 100%;
    max-width: 450px;
    border: 1px solid rgba(6, 182, 212, 0.1);
}

/* Register card - wider for form fields */
.register-card {
    background: white;
    border-radius: 1.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    padding: 3rem 2.5rem;
    border: 1px solid rgba(6, 182, 212, 0.1);
}

/* Logo section at top of auth cards */
.auth-logo-section {
    text-align: center;
    margin-bottom: 2rem;
}

/* Register logo section - slightly more spacing */
.register-logo-section {
    text-align: center;
    margin-bottom: 2.5rem;
}

/* Square logo icon for most auth pages */
.auth-logo-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: white;
    font-size: 2rem;
    box-shadow: 0 10px 15px -3px rgba(6, 182, 212, 0.3);
}

/* Circular icon for forgot password */
.auth-icon-circle {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: white;
    font-size: 3rem;
    box-shadow: 0 10px 15px -3px rgba(6, 182, 212, 0.3);
}

/* Auth page title */
.auth-page-title {
    font-family: 'Clash Display', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    text-align: center;
}

/* Auth page subtitle */
.auth-page-subtitle {
    color: #64748b;
    font-size: 1rem;
    text-align: center;
}

/* Section titles within register form */
.auth-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 2rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.auth-section-title i {
    color: var(--color-primary);
}

/* Input wrapper for icon positioning */
.auth-input-wrapper {
    position: relative;
}

.auth-input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}

/* Auth form inputs with icon */
.auth-form-input {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 3rem;
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    font-size: 1rem;
    transition: all 0.2s ease;
    font-family: inherit;
}

.auth-form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

.auth-form-input::placeholder {
    color: #cbd5e1;
}

/* Form hint text */
.auth-form-hint {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.25rem;
}

/* Required field indicator */
.auth-required {
    color: #dc2626;
}

/* Stats info section in register */
.auth-stats-section {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 2px solid #93c5fd;
    border-radius: 1rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.auth-stats-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e40af;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Auth button - full width */
.auth-btn-primary {
    width: 100%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px -1px rgba(6, 182, 212, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.auth-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(6, 182, 212, 0.4);
}

.auth-btn-primary:active {
    transform: translateY(0);
}

/* Footer links section */
.auth-footer-links {
    margin-top: 1.5rem;
    text-align: center;
}

.auth-footer-link {
    display: block;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    transition: color 0.2s ease;
}

.auth-footer-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.auth-footer-text {
    color: #64748b;
    font-size: 0.9rem;
}

.auth-footer-text a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

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

/* Back link for forgot/reset pages */
.auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.auth-back-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* reCAPTCHA notice */
.auth-recaptcha-notice {
    font-size: 0.75rem;
    color: #94a3b8;
    text-align: center;
    margin-top: 1rem;
}

.auth-recaptcha-notice a {
    color: var(--color-primary);
    text-decoration: none;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
    .auth-card,
    .register-card {
        padding: 2rem 1.5rem;
    }
    
    .auth-page-title {
        font-size: 1.75rem;
    }
    
    .auth-logo-icon {
        width: 64px;
        height: 64px;
        font-size: 1.75rem;
    }
    
    .auth-icon-circle {
        width: 80px;
        height: 80px;
        font-size: 2.5rem;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* ====================================
   RESPONSIVE UTILITIES
   ==================================== */

@media (min-width: 768px) {
    .icon-display-centered {
        width: 64px;
        height: 64px;
    }
}

@media (max-width: 768px) {
    .scoreboard-score {
        font-size: 3rem;
    }
    
    .score-display {
        font-size: 2rem;
    }
}

/* ====================================
   MATCH SCORING BUTTON SPACING
   ==================================== */

.win-scenario-button + .win-scenario-button {
    margin-top: 1.5rem !important;
}


/* ========================================================================
   ADMIN-ONLY STYLES
   Components used exclusively on admin pages
   ======================================================================== */

.btn-secondary {
    background: linear-gradient(135deg, var(--color-secondary) 0%, #059669 100%);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px -2px rgba(16, 185, 129, 0.4);
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    font-size: 1rem;
    transition: all 0.2s ease;
}

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

.alert-warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 2px solid var(--color-accent);
}

.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-success {
    background-color: #d1fae5;
    color: #065f46;
}

.badge-error {
    background-color: #fee2e2;
    color: #991b1b;
}

.badge-warning {
    background-color: #fef3c7;
    color: #92400e;
}

.badge-info {
    background-color: #dbeafe;
    color: #1e40af;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: white;
    margin: 5% auto;
    padding: 2rem;
    border-radius: 1.5rem;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}

.tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #e2e8f0;
}

.tab {
    padding: 0.75rem 1.5rem;
    border: none;
    background: transparent;
    color: #64748b;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
}

.tab:hover {
    color: var(--color-primary);
}

.tab.active {
    color: var(--color-primary, #06b6d4);
    border-bottom-color: var(--color-primary, #06b6d4);
}

.btn-primary, .btn-secondary, .btn-danger, .btn-warning {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
}

/* ========================================
   SCHEDULE MANAGEMENT SPECIFIC STYLES
   ======================================== */

.form-input, .form-select {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.checkbox-input {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.375rem;
    cursor: pointer;
}

/* Styled Input Field */

.input-field {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    font-size: 1rem;
    transition: all 0.2s ease;
    font-family: inherit;
    resize: vertical;
}

.input-field:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

/* Confirm Button (Green) */

.btn-confirm {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px -2px rgba(16, 185, 129, 0.4);
}

/* Base action button style - all buttons same size */

.action-btn {
    padding: 0.5rem 1rem !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    white-space: nowrap !important;
    min-width: 90px !important;
    justify-content: center !important;
}

.action-btn:hover {
    transform: translateY(-2px) !important;
}

/* Verify button - Green */

.btn-verify {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
}

.btn-verify:hover {
    box-shadow: 0 4px 8px -2px rgba(16, 185, 129, 0.4) !important;
}

/* Delete button - Red */

.btn-delete {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: white !important;
}

.btn-delete:hover {
    box-shadow: 0 4px 8px -2px rgba(239, 68, 68, 0.4) !important;
}

/* Grid layout for log selection items */

.log-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* Individual log card */

.log-card {
    background: white;
    border: 2px solid #e0f2fe;
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    display: block;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.log-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
    border-color: var(--color-primary);
}

/* Log card content wrapper */

.log-card-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Log icon styling */

.log-icon {
    font-size: 2rem;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    flex-shrink: 0;
}

/* Log card text */

.log-card-text {
    flex: 1;
}

/* Section headers for log categories */

.log-section-header {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-top: 2rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}


/* ====================================
   MISSING CLASS DEFINITIONS
   Added: 2026-02-16
   Audit: 106 missing classes across 30 files
   ==================================== */

/* ------------------------------------
   SHARED: Base Button (.btn)
   ------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    line-height: 1.4;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

/* ------------------------------------
   SHARED: Stat Boxes & Items
   ------------------------------------ */

.stat-box {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    transition: all 0.15s ease;
}

.stat-box:hover {
    border-color: var(--color-primary, #06b6d4);
    box-shadow: 0 4px 8px rgba(6, 182, 212, 0.1);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.stat-label {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 500;
}

/* ------------------------------------
   SHARED: Error Messages
   ------------------------------------ */

.error-message {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #ef4444;
    color: #991b1b;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
}

/* ------------------------------------
   SHARED: Form Help Text
   ------------------------------------ */

.form-help {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.35rem;
}

/* ------------------------------------
   SHARED: Super Admin Badge
   ------------------------------------ */

.super-admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 2rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.3);
}

/* ------------------------------------
   SHARED: Search Input
   ------------------------------------ */

.search-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--color-primary, #06b6d4);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

/* ------------------------------------
   SHARED: Badge Danger Variant
   ------------------------------------ */

.badge-danger {
    background-color: #fef2f2;
    color: #dc2626;
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ------------------------------------
   SHARED: Buttons
   ------------------------------------ */

.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3);
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px -2px rgba(16, 185, 129, 0.4);
}

.btn-update-db {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: white;
}

.btn-update-db:hover {
    box-shadow: 0 4px 10px rgba(6, 182, 212, 0.3);
}

.btn-update-lms {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
}

.btn-update-lms:hover {
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3);
}

.btn-remove-pic {
    background: #ef4444;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.btn-remove-pic:hover {
    background: #dc2626;
}

.btn-upload-pic {
    background: linear-gradient(135deg, var(--color-primary, #06b6d4), var(--color-primary-dark, #0891b2));
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px -1px rgba(6, 182, 212, 0.3);
}

.btn-upload-pic:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px -2px rgba(6, 182, 212, 0.4);
}

/* ------------------------------------
   SHARED: Badges
   ------------------------------------ */

.badge-new {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: white;
    padding: 0.15rem 0.6rem;
    border-radius: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-inactive {
    background-color: #f1f5f9;
    color: #64748b;
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fargorate-badge {
    display: inline-block;
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: white;
    padding: 0.2rem 0.75rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 0.9rem;
}

.race-badge {
    display: inline-block;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    padding: 0.2rem 0.75rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 0.9rem;
}

.robustness-badge {
    display: inline-block;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
    padding: 0.2rem 0.75rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 0.9rem;
}

/* ------------------------------------
   SHARED: Section Headers & Layout
   ------------------------------------ */

.section-header {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
}

.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

/* ------------------------------------
   SHARED: Filter Controls
   ------------------------------------ */

.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    border: 2px solid #e2e8f0;
    background: white;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn:hover {
    border-color: var(--color-primary, #06b6d4);
    color: var(--color-primary, #06b6d4);
    background: #f0fdfa;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.15);
}

.filter-btn.active {
    border-color: var(--color-primary, #06b6d4);
    background: linear-gradient(135deg, var(--color-primary, #06b6d4), var(--color-primary-dark, #0891b2));
    color: white;
    box-shadow: 0 4px 10px rgba(6, 182, 212, 0.3);
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: end;
}

.filter-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.5rem;
}

.filter-select {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: white;
}

.filter-select:focus {
    outline: none;
    border-color: var(--color-primary, #06b6d4);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

.filter-division-option {
    padding: 0.5rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-division-option:hover,
.filter-division-option.active {
    border-color: var(--color-primary, #06b6d4);
    background: #f0fdfa;
}

/* ------------------------------------
   SHARED: Tables
   ------------------------------------ */

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead {
    background: linear-gradient(135deg, var(--color-primary, #06b6d4) 0%, var(--color-primary-dark, #0891b2) 100%);
    color: white;
}

.data-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.data-table td {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.data-table tbody tr:hover {
    background-color: #f8fafc;
}

.package-table {
    width: 100%;
    border-collapse: collapse;
}

.package-table thead {
    background: linear-gradient(135deg, var(--color-primary, #06b6d4) 0%, var(--color-primary-dark, #0891b2) 100%);
    color: white;
}

.package-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.package-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.9rem;
}

.package-table tbody tr:hover {
    background-color: #f8fafc;
}

.table-container {
    overflow-x: auto;
}

/* ------------------------------------
   SHARED: Form Elements
   ------------------------------------ */

.required {
    color: #ef4444;
    font-weight: 700;
}

.search-box {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.search-box input {
    flex: 1;
}

.action-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.button-group {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

/* ------------------------------------
   SHARED: Financial Colors
   ------------------------------------ */

.profit {
    color: #059669;
    font-weight: 700;
}

.loss {
    color: #dc2626;
    font-weight: 700;
}

/* ------------------------------------
   SHARED: Editable Cells
   ------------------------------------ */

.editable,
.editable-cell,
.editable-field {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.editable:hover,
.editable-cell:hover,
.editable-field:hover {
    background-color: #f0fdfa;
}

.editable-select {
    cursor: pointer;
}

.editable-select:hover {
    background-color: #f0fdfa;
}

/* ------------------------------------
   SHARED: Location & Action Links
   ------------------------------------ */

.location-link {
    color: var(--color-primary, #06b6d4);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.location-link:hover {
    color: var(--color-primary-dark, #0891b2);
    text-decoration: underline;
}

.action-links {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* ------------------------------------
   CREATE LEAGUE: Forms & Tabs
   ------------------------------------ */

.form-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

.form-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.form-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.form-section-title {
    font-family: 'Clash Display', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
}

.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

@media (max-width: 768px) {
    .form-grid-3 {
        grid-template-columns: 1fr;
    }
}

.tab-buttons {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #e2e8f0;
}

.tab-button {
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    color: #64748b;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    margin-bottom: -2px;
}

.tab-button:hover {
    color: var(--color-primary, #06b6d4);
}

.tab-button.active {
    color: var(--color-primary, #06b6d4);
    border-bottom-color: var(--color-primary, #06b6d4);
}

/* ------------------------------------
   EDIT MATCH: Game Rows & Sets
   ------------------------------------ */

.set-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.game-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.15s ease;
}

.game-row:hover {
    background-color: #f8fafc;
}

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

.game-inputs {
    display: flex;
    gap: 1rem;
    align-items: end;
    flex-wrap: wrap;
}

/* ------------------------------------
   VIEW LOGS: Log Viewer
   ------------------------------------ */

.log-viewer {
    background: #1e293b;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid #334155;
}

.log-content {
    padding: 1rem;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    line-height: 1.6;
    color: #e2e8f0;
    max-height: 600px;
    overflow-y: auto;
}

.log-line-number {
    display: inline-block;
    width: 60px;
    color: #64748b;
    text-align: right;
    padding-right: 1rem;
    user-select: none;
    font-size: 0.75rem;
}

/* ------------------------------------
   MANAGE COMPOSER: Backup Items
   ------------------------------------ */

.backup-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;
    background: white;
    transition: all 0.15s ease;
}

.backup-item:hover {
    border-color: var(--color-primary, #06b6d4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.backup-info {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.backup-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #0f172a;
}

.backup-size {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #64748b;
}

.backup-actions {
    display: flex;
    gap: 0.5rem;
}

/* ------------------------------------
   MANAGE PLAYER DATA: Comparison Cards
   ------------------------------------ */

.stats-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

.comparison-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06);
}

.player-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f1f5f9;
}

.difference-row {
    padding: 1rem;
    border: 1px solid #fde68a;
    background: linear-gradient(135deg, #fffbeb, white);
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;
}

.field-name {
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.value-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.db-value,
.lms-value {
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
}

.db-value {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
}

.lms-value {
    background: #faf5ff;
    border: 1px solid #e9d5ff;
}

.value-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.value-text {
    font-weight: 500;
    color: #0f172a;
    word-break: break-word;
}

.update-status {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    display: none;
}

/* ------------------------------------
   MANAGE PAYMENT OPTIONS
   ------------------------------------ */

.payment-option-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;
    background: white;
    transition: all 0.15s ease;
}

.payment-option-row.inactive {
    opacity: 0.5;
    background: #f8fafc;
}

.payment-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, var(--color-primary, #06b6d4), var(--color-primary-dark, #0891b2));
    color: white;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.username-input {
    flex: 1;
}

.move-up,
.move-down {
    background: none;
    border: none;
    cursor: pointer;
    color: #64748b;
    font-size: 1rem;
    padding: 0.25rem;
    transition: color 0.15s ease;
}

.move-up:hover,
.move-down:hover {
    color: var(--color-primary, #06b6d4);
}

/* ------------------------------------
   MANAGE NOTIFICATIONS
   ------------------------------------ */

.notification-active-toggle,
.active-toggle {
    cursor: pointer;
}

.delete-notification-btn,
.delete-player-btn,
.delete-session-btn {
    cursor: pointer;
}

/* ------------------------------------
   MANAGE SESSIONS: Division Previews
   ------------------------------------ */

.division-option {
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}

.division-option:hover {
    border-color: var(--color-primary, #06b6d4);
    background: #f0fdfa;
}

.division-option.selected {
    border-color: var(--color-primary, #06b6d4);
    background: linear-gradient(135deg, #f0fdfa, #e0f2fe);
}

.division-checkbox {
    margin-top: 0.25rem;
}

.division-preview {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

/* ------------------------------------
   AUTH: Login & Register
   ------------------------------------ */

.auth-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.2);
}

.auth-btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px -2px rgba(16, 185, 129, 0.4);
}

.auth-divider {
    margin: 2rem 0;
    text-align: center;
    position: relative;
}

/* ------------------------------------
   MANAGE PENDING PLAYERS
   ------------------------------------ */

.accent-color-primary {
    accent-color: var(--color-primary, #06b6d4);
}

/* ------------------------------------
   MANAGE SESSION REGISTRATIONS
   ------------------------------------ */

.needs {
    /* Tab state modifier - styled by tab-btn base class */
}

/* ------------------------------------
   MATCHES: Mobile & Transitions
   ------------------------------------ */

.admin-actions-mobile-toggle {
    /* JS hook class - styled via Tailwind utilities */
}

.admin-chevron-mobile {
    transition: transform 0.2s ease;
}

.admin-chevron-mobile.rotated {
    transform: rotate(180deg);
}

.duration-150 {
    transition-duration: 150ms;
}

/* ------------------------------------
   PERFORMANCE ANALYSIS: Metric Cards
   ------------------------------------ */

.metric-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 1.5rem;
    padding: 2rem;
    margin-bottom: 1.5rem;
    border-left: 5px solid #94a3b8;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.metric-card.metric-good {
    border-left-color: var(--color-secondary, #10b981);
    background: linear-gradient(135deg, #f0fdf4 0%, white 60%);
}

.metric-card.metric-bad {
    border-left-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, white 60%);
}

.metric-card.metric-warning {
    border-left-color: var(--color-accent, #f59e0b);
    background: linear-gradient(135deg, #fffbeb 0%, white 60%);
}

/* ------------------------------------
   JS-ONLY HOOK CLASSES
   These are used as JavaScript selectors only;
   visual styling is handled by Tailwind utilities
   on the same elements.
   ------------------------------------ */

.delete-btn,
.edit-btn,
.delete-backup,
.restore-backup,
.toggle-captain,
.ball-assignment-option {
    /* JS selector hooks - styled via Tailwind utilities */
}

/* .type is used dynamically in manage_pending_players */