@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');
/* Font size preference via data-font (shared across site). Ensure rems scale accordingly */
:root[data-font='md'] {
    font-size: 16px;
}
:root[data-font='lg'] {
    font-size: 18px;
}
/* Quick Stats Popover Styles */
.quick-stats-popover {
  z-index: 99999;
  min-width: 220px;
  max-width: 320px;
  background: #fff;
  border: 1.5px solid var(--color-primary-300, #93c5fd);
  border-radius: 10px;
    box-shadow: none; /* remove drop shadow */
  padding: 0.5rem 1rem 1rem 1rem;
  font-size: 0.98rem;
  color: var(--color-text, #2c3e50);
  position: absolute;
  transition: opacity 0.2s;
}
.quick-stats-header {
    font-weight: var(--font-weight-bold);
  font-size: 1.05em;
  margin-bottom: 0.5em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.close-popover-btn {
  background: none;
  border: none;
  font-size: 1.2em;
  color: #888;
  cursor: pointer;
  margin-left: 0.5em;
}
.quick-stats-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.2em;
}
.quick-stats-table th, .quick-stats-table td {
  padding: 0.25em 0.5em;
  text-align: center;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.97em;
}
.quick-stats-table th {
  background: var(--color-primary-50, #eff6ff);
    font-weight: var(--font-weight-normal);
}
.quick-stats-loading, .quick-stats-empty, .quick-stats-error {
  text-align: center;
  color: #888;
  padding: 0.5em 0;
  font-size: 0.97em;
}
.quick-stats-btn {
  background: none;
  border: none;
  color: var(--color-primary-500, #3b82f6);
  margin-left: 0.5em;
  cursor: pointer;
  font-size: 1em;
  vertical-align: middle;
  padding: 0 2px;
  transition: color 0.15s;
}
.quick-stats-btn:hover {
  color: var(--color-primary-dark, #374e64);
}
.empty-team-message i,
.empty-team-message p {
    display: none !important;
}
.card-content {
    height: calc(100vh - 166px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* OCC SWAT - Standard Site Styles */
/* This file contains all reusable styles for the entire website */

/* Import Professional Fonts (moved to top to satisfy CSS @import ordering rules) */

/* Global spacing lives on .main-content to avoid stacking with inner containers */

/* Color Palette Variables */
:root {
    /* Primary Color Palette */
    --color-primary-dark: #374e64;      /* Dark Blue */
    --color-primary-light: #3498db;     /* Light Blue */
    --color-grey-dark: #34495e;         /* Dark Grey */
    --color-grey-light: #ecf0f1;        /* Light Grey */
    
    /* Extended Palette */
    --color-white: #ffffff;
    --color-black: #2c3e50;
    --color-text: #2c3e50;
    --color-text-light: #7f8c8d;
    --color-background: #f8f9fa;
    
    /* Status Colors */
    --color-success: #27ae60;
    --color-warning: #f39c12;
    --color-error: #e74c3c;
    --color-info: #3498db;
    
    /* Border and Shadow Colors */
    --color-border: #bdc3c7;
    --color-border-light: #e1e8ed;
    
    /* Additional Color Variables for Player Management */
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-300: #93c5fd;
    --color-primary-500: #3b82f6;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-900: #111827;
    --color-yellow-200: #fef08a;
    
    /* Spacing Variables */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    
    /* Typography Variables */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-4xl: 2.25rem;
    
    /* Border Radius Variables */
    --radius-sm: 0.125rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    
    /* Shadow Variables */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --color-shadow: rgba(44, 62, 80, 0.1);
    --color-shadow-hover: rgba(44, 62, 80, 0.2);
    
    /* Typography Variables */
    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    --font-family-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    
    /* Font Sizes */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */
    
    /* Font Weights (standardized to 400 normal, 600 bold) */
    --font-weight-thin: 400;      /* alias to normal */
    --font-weight-light: 400;     /* alias to normal */
    --font-weight-normal: 400;    /* normal */
    --font-weight-medium: 400;    /* alias to normal */
    --font-weight-semibold: 600;  /* alias to bold */
    --font-weight-bold: 600;       /* bold */
    
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
}

/* CSS Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography Styles */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
    margin-bottom: 0.5em;
}

h1 { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); font-weight: var(--font-weight-normal); }

p {
    margin-bottom: 1em;
    line-height: var(--line-height-normal);
}

/* SWAT History Stats Styling */
.stats-wrapper.vertical {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* tighter between cards */
}
.stats-card {
    background: #ffffff10;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    padding: 0.55rem 0.85rem 0.65rem 0.85rem; /* reduced vertical padding */
    backdrop-filter: blur(2px);
    box-shadow: none; /* shadow removed */
    transition: border-color .2s;
}
.stats-card:hover {
    box-shadow: none; /* no hover shadow */
    border-color: var(--color-border-light);
}
.stats-title {
    font-size: 1rem; /* 16px consistent */
    margin: 0 0 .5rem 0;
    letter-spacing: .5px;
    color: var(--color-primary-dark);
}
.stats-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1rem; /* 16px */
    line-height: 1.25; /* tighter */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .18rem 2.2rem; /* even tighter rows, slightly more col gap */
}
@media (max-width: 900px){
  .stats-list { grid-template-columns: 1fr; }
}
.stats-list li {
    display: flex;
    justify-content: space-between;
    background: linear-gradient(90deg, rgba(255,255,255,0.035), rgba(255,255,255,0));
    padding: .18rem .45rem; /* further reduced */
    border: 1px solid rgba(255,255,255,0.035);
    border-radius: 4px;
    font-weight: 400; /* normal weight for labels */
}
.stats-list li strong { font-weight: 600; color: var(--color-primary-500); }
.hole-table-wrapper { overflow-x: auto; margin-top: .25rem; }
.hole-tables-split { display:flex; flex-direction:column; gap:.75rem; }
.hole-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.hole-table th, .hole-table td { text-align: center; padding: 4px 6px; border: 1px solid var(--color-gray-200); line-height:1.15; }
.hole-table thead th { background: var(--color-primary-100); font-weight: var(--font-weight-bold); font-size: .85rem; letter-spacing:.5px; }
.hole-table tbody td { background: var(--color-white); font-weight: var(--font-weight-normal); font-size:.95rem; }
.hole-table-block { background: #ffffff; padding:.5rem .6rem .75rem .6rem; border:1px solid var(--color-border-light); border-radius:6px; box-shadow:none; }
.hole-table-label { font-size:.85rem; font-weight:var(--font-weight-bold); text-transform:uppercase; letter-spacing:.75px; color:var(--color-muted); margin-bottom:.35rem; opacity:.9; }
.hole-table tbody tr { transition: background .15s; }
/* Hole table row hover moved to forms.standard.css using token --ui-table-row-hover */

/* Subtle banner for date range */
.subtle-banner {
    margin-bottom: 0.5rem;
    text-align: center;
    font-size: 0.875rem; /* 14px */
    font-style: italic;
    color: var(--color-muted);
    padding: 4px 8px;
    background: var(--color-gray-50); /* gradient removed */
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    letter-spacing: 0.3px;
}

/* Standard Container - 1200px max width for all pages */
.container {
    max-width: 1420px;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
}

/* Wide Container - Fixed dimensions for app-like layout */
.container-wide {
    /* Keep total width 1420 with 20px L/R padding -> content 1380 */
    width: 1420px;
    height: 742px;
    margin: 0 auto;
    padding: 0 20px; /* 20px L/R padding */
    box-sizing: border-box; /* Ensure total stays 1420 including padding */
    overflow: hidden;
}

/* Header Container - Same width as container-wide but no height constraint */
.container-header {
    width: 1420px; /* Match container-wide width */
    margin: 0 auto; /* center header; remove 40px left offset */
    padding: 0 20px; /* 20px L/R padding */
    box-sizing: border-box; /* keep total width within 1420 */
}

/* Two Column Grid Layout with 1/3 - 2/3 split for Player Management */
.content-grid-two-column-wide {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Reverted to original 1/3 - 2/3 split */
    gap: var(--space-4);
    height: 100%;
    align-items: start;
}

.directory-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.details-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    height: 100%;
    overflow: hidden;
}

/* Ensure both cards in the details column take appropriate height */
.details-column .card.player-data-card {
    flex: 2; /* Profile card takes 2/3 of height */
    display: flex;
    flex-direction: column;
    min-height: 0; /* Allow flex shrinking */
    max-height: 66.67%; /* Ensure it doesn't exceed 2/3 of container */
}

.details-column .card.player-stats-card {
    flex: 1; /* Stats card takes 1/3 of height */
    display: flex;
    flex-direction: column;
    min-height: 0; /* Allow flex shrinking */
    max-height: 33.33%; /* Ensure it doesn't exceed 1/3 of container */
}

/* Three Column Grid Layout for Player Management (keeping for potential future use) */
.content-grid-three-column {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Equal width columns */
    gap: var(--space-4);
    height: 100%;
    align-items: start;
}

.profile-column,
.stats-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Scrollable card content for fixed height layouts */
.card-content-scrollable {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-4);
    min-height: 0; /* Allow flex shrinking */
}

/* Directory column specific adjustments */
.directory-column .card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.directory-column .card-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.directory-column .search-container {
    flex-shrink: 0;
    margin-bottom: var(--space-3);
}

.directory-column .player-table-container {
    height: 580px; /* Fixed height for consistent layout */
    overflow-y: auto;
    min-height: 0;
}

.directory-column .player-list-table {
    height: auto;
}

/* Collapsible form sections */
.form-section.collapsible {
    margin-bottom: var(--space-3);
}

.form-section.collapsible .section-title {
    margin: 0;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-gray-200);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: background-color 0.2s ease;
    gap: var(--space-2);
}

.form-section.collapsible .section-title:hover {
    background: var(--color-gray-50);
}

.form-section.collapsible .section-title .caret {
    transition: transform 0.2s ease;
    color: var(--color-muted);
    font-size: 1.4rem; /* further increased */
    line-height: 1;
    margin-left: var(--space-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem; /* larger click target */
    height: 2rem;
    border-radius: var(--radius-sm);
}

/* Improve focus + hover states for caret area */
.form-section.collapsible .section-title:focus-visible .caret,
.form-section.collapsible .section-title:hover .caret {
    color: var(--color-text);
}

.form-section.collapsible.collapsed .section-title .caret {
    transform: rotate(-90deg);
}

.form-section.collapsible .section-content {
    padding: var(--space-4) 0;
    transition: max-height 0.3s ease, padding 0.3s ease;
    overflow: hidden;
}

.form-section.collapsible.collapsed .section-content {
    max-height: 0;
    padding: 0;
}

/* Non-collapsible sections maintain original styling */
.form-section:not(.collapsible) .section-title {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--color-gray-200);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

/* Fixed layout - no responsive adjustments for app-like interface */
@media (max-width: 1280px) {
    .container-wide {
        width: 1420px; /* Maintain fixed width */
        height: 742px; /* Maintain fixed height */
        padding: 0 40px;
    }
    
    .content-grid-two-column-wide {
        grid-template-columns: 0.4fr 1fr; /* Slightly narrower directory column */
        gap: var(--space-3);
    }
    
    .content-grid-three-column {
        grid-template-columns: 0.8fr 1fr 1fr;
        gap: var(--space-3);
    }
}

@media (max-width: 1024px) {
    .container-wide {
        width: 1420px; /* Maintain fixed width */
        height: 742px; /* Maintain fixed height */
        overflow: hidden; /* Keep no scrolling */
    }
    
    .content-grid-two-column-wide {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    .content-grid-three-column {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    .directory-column,
    .details-column,
    .profile-column,
    .stats-column {
        height: auto;
        overflow: visible;
    }
    
    .card-content-scrollable {
        overflow-y: visible;
        max-height: none;
    }
    
    /* Two-column layout mobile order */
    .directory-column {
        order: 1;
    }
    
    .details-column {
        order: 2;
    }
    
    /* Three-column layout mobile order */
    .profile-column {
        order: 2;
    }
    
    .stats-column {
        order: 3;
    }
}

/* ===== STANDARDIZED SITE HEADER STYLES ===== */
/* Reusable header for all pages */

.site-header {
    background: var(--color-primary-dark);
    color: var(--color-white);
    box-shadow: none; /* remove header shadow */
    position: relative;
    padding: 13px 0; /* reduce to ~70px total header height incl. inner elements */
    margin: 0; /* Remove auto margins for full width */
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.header-left,
.header-right {
    flex: 0 0 150px; /* Fixed flex basis for equal width */
    width: 150px; /* Fixed width for balance */
}

/* Allow header-left to grow to fit notices + pills without wrapping,
   while keeping center title alignment stable. We scope to .site-header
   to avoid impacting legacy headers elsewhere. */
.site-header .header-left {
    flex: 0 1 auto; /* allow content-based width */
    width: auto;
    display: flex;            /* ensure vertical centering within header */
    align-items: center;
}
.site-header .header-right { /* allow right area to flex while preserving current min width */
    flex: 0 1 auto;
    width: auto;
    min-width: 150px; /* keep previous fixed size as the minimum */
}

.header-center {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-left {
    display: flex;
    justify-content: flex-start;
}

.header-right {
    display: flex;
    justify-content: flex-end;
}

/* Header quick access button (converted to ui-btn outline) - force white border/text for contrast on dark header */
.header-right #headerQuickAccessBtn.ui-btn { 
    border-color: var(--color-white) !important; 
    color: var(--color-white) !important; 
    /* Flex-size with tighter horizontal padding and preserved minimum */
    padding-left: 8px; 
    padding-right: 8px;
    min-width: 150px; /* match previous fixed area width */
    flex: 0 1 auto;    /* allow the button to expand beyond the min when label is longer */
}
.header-right #headerQuickAccessBtn.ui-btn:hover:not(:disabled),
.header-right #headerQuickAccessBtn.ui-btn:focus-visible:not(:disabled) {
    border-color: var(--color-white) !important; 
    color: var(--color-white) !important; 
    background: rgba(255,255,255,0.12);
}
.header-right #headerQuickAccessBtn.ui-btn:active:not(:disabled) {
    border-color: var(--color-white) !important; 
    color: var(--color-white) !important; 
    background: rgba(255,255,255,0.18);
}

.site-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    text-align: center;
    letter-spacing: 2px;
    text-shadow: none; /* remove text shadow */
    line-height: var(--line-height-tight);
    margin: 0;
}

/* Hamburger Menu Styles */
.hamburger-menu {
    position: relative;
    display: flex;            /* align hamburger + notices icon + pills inline */
    align-items: center;      /* vertically center all items */
    gap: 10px;                /* consistent spacing between items */
    flex-wrap: nowrap;        /* prevent Backup DB pill from wrapping under */
}

.hamburger-btn {
    background: transparent;
    border: none;
    color: var(--color-white);
    padding: 8px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* Ensure generic .dropdown-toggle styles don't override the hamburger visuals */
.hamburger-menu .dropdown-toggle {
    background: transparent !important;
    color: var(--color-white) !important;
    display: inline-flex;              /* keep next items on same row */
    flex-direction: column;            /* stack the three bars vertically */
    align-items: center;
    justify-content: center;
    width: 36px;                       /* slightly larger for clearer icon */
    height: 36px;
    padding: 6px;                      /* ensure internal bars have room */
    border-radius: 4px;
    line-height: 1;                    /* avoid baseline drift */
    transform: translateY(-8px);       /* move menu icon up 3px */
}
.hamburger-menu .dropdown-toggle:hover { background-color: rgba(255, 255, 255, 0.1); }
.hamburger-menu .dropdown-toggle:focus { outline: none; background-color: rgba(255, 255, 255, 0.1); }

/* Keep the optical offset stable across hover/focus/active/open states */
.hamburger-menu .dropdown-toggle:hover,
.hamburger-menu .dropdown-toggle:focus,
.hamburger-menu .dropdown-toggle:active,
.hamburger-menu .dropdown-toggle[aria-expanded="true"] {
    transform: translateY(-8px);
}

.hamburger-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.hamburger-btn.active {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Ensure the 3-bar icon is always visible inside the dropdown toggle */
.site-header .hamburger-line {
    display: block;
    width: 24px;                       /* wider bars per design */
    height: 2px;
    background-color: var(--color-white) !important; /* force white bars */
    margin: 3px 0;                     /* balanced spacing */
    border-radius: 1px;
    transition: all 0.2s ease;
}

/* Match system notices icon to the hamburger toggle for consistent vertical alignment */
.site-header .header-icon-btn {
    width: 36px;
    height: 36px;
    padding: 0; /* size controlled by width/height */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transform: translateY(6px);        /* move system notice down 3px */
}

/* Backup DB pill: center and nudge down for alignment */
.site-header .hamburger-menu > span[title="Backup database in use"] {
    align-self: center;
    display: inline-flex;
    align-items: center;
    height: 28px;                      /* stabilize height */
    transform: translateY(4px);        /* move Backup pill down 4px */
}

.hamburger-btn.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger-btn.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-btn.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Header icon button (system notices) - match hamburger sizing */
.header-icon-btn {
    background: transparent;
    border: none;
    color: var(--color-white);
    padding: 8px; /* same as .hamburger-btn */
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
    line-height: 1;
    display: inline-flex;     /* ensure icon is centered inside button */
    align-items: center;
    justify-content: center;
}
.header-icon-btn:hover { background-color: rgba(255,255,255,0.1); }
.header-icon-btn:active, .header-icon-btn:focus { outline: none; }
.header-icon-btn i { font-size: 20px; } /* slightly larger for clarity, centered like hamburger */

/* Flashing alert state for system notices icon */
@keyframes headerAlertFlash {
    0%, 39% { color: #ffffff; }
    40%, 59% { color: var(--color-danger, #dc2626); }
    60%, 100% { color: #ffffff; }
}
.header-icon-btn--flash i {
    animation: headerAlertFlash 1.25s steps(1, end) infinite;
}
@media (prefers-reduced-motion: reduce) {
    .header-icon-btn--flash i { animation: none; color: var(--color-danger, #dc2626); }
}

/* Hamburger Dropdown styles removed in favor of shared dropdown utility */

/* Section label inside hamburger dropdown */
.hamburger-section-label {
    padding: 6px 12px;
    font-size: 12px;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Header Quick Access Button */
.btn-header-quick-access {
    display: inline-block;
    padding: 8px 12px;
    font-family: var(--font-family-primary);
    font-size: 13px;
    font-weight: var(--font-weight-normal, 400);
    text-align: center;
    text-decoration: none;
    background-color: var(--color-primary-500);
    color: var(--color-white);
    border: 2px solid var(--color-primary-500);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none;
    line-height: 1.2;
    box-sizing: border-box;
    white-space: nowrap;
}

.btn-header-quick-access:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: none;
    color: var(--color-white);
    text-decoration: none;
}

/* Legacy header quick access button removed in favor of ui-btn outline variant. */

/* Override for header quick access button when using btn-secondary class */
.header-right .btn-secondary {
    background-color: var(--color-primary-500);
    color: var(--color-white);
    border: 2px solid var(--color-primary-500);
}

.header-right .btn-secondary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
    text-decoration: none;
}

/* Responsive Design for Site Header */
@media (max-width: 768px) {
    .header-left,
    .header-right {
        width: auto;
        min-width: 60px;
    }

    .site-title {
        font-size: var(--font-size-2xl);
        letter-spacing: 1px;
    }

    /* (hamburger-dropdown responsive rules removed) */
}

@media (max-width: 480px) {
    .site-title {
        font-size: 1.5rem;
    }
}

/* Alternative Header Styles for Player Management Pages */
.header {
    background: var(--color-primary-dark);
    color: var(--color-white);
    padding: 15px 0;
    box-shadow: none;
}

.header-content {
    max-width: 1420px; /* Match container-wide width */
    margin: 0 auto;
    padding: 0; /* Remove padding since container-header handles it */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left,
.header-right {
    flex: 0 0 auto;
    width: 150px; /* Fixed width for balance */
    display: flex;
    align-items: center;
}

.header-center {
    flex: 1;
    text-align: center;
}

.header-left {
    justify-content: flex-start;
}

.header-right {
    justify-content: flex-end;
}

.header-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    letter-spacing: 2px;
    text-shadow: none;
    line-height: var(--line-height-tight);
    margin: 0;
}

.hamburger-line {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-white);
    margin: 4px 0;
    border-radius: 1px;
    transition: all 0.3s ease;
}

.hamburger-btn.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger-btn.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-btn.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Profile Button and Dropdown */
.profile-dropdown {
    position: relative;
}

.profile-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--color-white);
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.profile-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.dropdown-menu { display: none; }

.dropdown-menu.show {
    display: block;
    animation: dropdownSlide 0.2s ease-out;
}

/* Hamburger Dropdown for Player Management */
.hamburger-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; /* anchor to left edge of button so it opens to the right */
    right: auto;
    background-color: var(--color-white);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 5000;
    border: 1px solid var(--color-border-light);
    min-width: 260px;
    border-radius: 8px;
    overflow: hidden;
    padding: 8px 0;
    margin-top: 8px;
}

.hamburger-dropdown.show {
    display: block;
    animation: dropdownSlide 0.2s ease-out;
}

.hamburger-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    color: var(--color-text);
    text-decoration: none;
    transition: background-color 0.2s ease;
    border: none;
    white-space: nowrap;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
}

.hamburger-item:hover { background: var(--color-gray-100); }

.hamburger-item.active {
    background-color: var(--color-primary-100);
    color: var(--color-primary-dark);
    font-weight: var(--font-weight-normal);
}

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

.hamburger-icon {
    font-size: var(--font-size-lg);
}

.user-profile-menu {
    display: flex;
    align-items: center;
    position: relative;
}

/* Hamburger Menu Button */
.hamburger-btn {
    background: transparent;
    border: none;
    color: var(--color-white);
    padding: 8px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.hamburger-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.hamburger-btn.active {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Hamburger Icon */
.hamburger-icon {
    display: flex;
    flex-direction: column;
    width: 24px;
    height: 18px;
    justify-content: space-between;
}

.hamburger-icon span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-white);
    border-radius: 1px;
    transition: all 0.3s ease;
}

.hamburger-btn.active .hamburger-icon span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger-btn.active .hamburger-icon span:nth-child(2) {
    opacity: 0;
}

.hamburger-btn.active .hamburger-icon span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Dropdown Menu */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background-color: var(--color-white);
    min-width: 200px;
    box-shadow: none;
    border-radius: 8px;
    z-index: 1000;
    margin-top: 8px;
    overflow: hidden;
    border: 1px solid var(--color-border-light);
}

.dropdown-content.show {
    display: block;
    animation: dropdownSlide 0.2s ease-out;
}

@keyframes dropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-profile-btn {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: 6px;
}

.user-profile-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--color-white);
    transform: none;
}

/* Main Content Area - Fixed dimensions for app-like layout */
.main-content {
    padding: 22px 0 10px; /* 2px top spacing below header; bottom padding 10px */
    width: 1420px; /* align with container-wide */
    min-height: 782px;
    margin: 0 auto; /* center main content */
    overflow-y: auto; /* allow vertical scroll */
    overflow-x: hidden;
}
/* Style guide pages can grow beyond base width */
body.page-form-controls .main-content { width: 100%; max-width: 1600px; }

/* Navigation Menu Styles */
.nav-menu {
    background: var(--color-white);
    border-radius: 12px;
    padding: 30px 15px;
    box-shadow: none;
    margin-bottom: 30px;
}

.nav-menu h2 {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    color: var(--color-primary-dark);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    border-bottom: 1px solid var(--color-border-light);
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    max-width: 980px;
    margin: 0 auto;
}

/* Standard Button Styles - Reusable */
.btn {
    display: inline-block;
    padding: 10px 16px;
    width: auto; /* Auto-size to fit content */
    min-width: 100px; /* Recommended minimum width for consistency */
    font-family: var(--font-family-primary);
    font-size: 14px; /* Standardized 14px font size */
    font-weight: 500; /* Standardized 500 font weight */
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: none;
    line-height: var(--line-height-tight);
    box-sizing: border-box;
    white-space: nowrap; /* Prevent text wrapping */
}

/* Primary Button Style */
.btn-primary {
    background-color: var(--color-primary-500);
    color: var(--color-white);
    border: 2px solid var(--color-primary-500);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: none;
}

/* Secondary Button Style */
.btn-secondary {
    background-color: transparent;
    color: var(--color-text);
    border: 2px solid var(--color-gray-300);
}

.btn-secondary:hover {
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-400);
    transform: translateY(-1px);
    color: var(--color-text);
}

/* Tertiary Button Style */
.btn-tertiary {
    background-color: transparent;
    color: var(--color-muted);
    border: 2px solid transparent;
}

.btn-tertiary:hover {
    color: var(--color-text);
    background-color: var(--color-gray-100);
}

/* Success Button Style */
.btn-success {
    background-color: var(--color-success);
    color: var(--color-white);
    border: 2px solid var(--color-success);
}

.btn-success:hover {
    background-color: #219a52; /* Darker shade of --color-success */
    border-color: #219a52;
    transform: translateY(-1px);
}

/* Danger Button Style */
.btn-danger {
    /* Use existing error palette variable instead of undefined danger variables */
    background-color: var(--color-error);
    color: var(--color-white);
    border: 2px solid var(--color-error);
}

.btn-danger:hover {
    background-color: #c0392b; /* Darker shade for hover */
    border-color: #c0392b;
    transform: translateY(-1px);
}

/* Warning Button Style */
.btn-warning {
    background-color: var(--color-warning-500);
    color: var(--color-white);
    border: 2px solid var(--color-warning-500);
}

.btn-warning:hover {
    background-color: var(--color-warning-600);
    border-color: var(--color-warning-600);
    transform: translateY(-1px);
}

/* Menu Button Style - For main navigation/homepage menu buttons */
.btn-menu {
    /* Independent button style - doesn't inherit from .btn */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 30px;
    width: auto; /* Override fixed width from .btn */
    min-height: 60px;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    text-decoration: none;
    background-color: var(--color-primary-light);
    color: var(--color-white);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: none;
    line-height: var(--line-height-tight);
    box-sizing: border-box;
}

.btn-menu:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-3px);
    box-shadow: none;
    color: var(--color-white); /* Ensure text stays white on hover */
}

/* Large variant for homepage main menu */
/* Increase size ~25%, plus an additional ~30% based on feedback */
.btn-menu.btn-menu-lg {
    flex-direction: column;
    padding: 54px 40px 60px 40px; /* larger padding */
    min-height: 270px; /* increased height */
    font-size: 1.45rem; /* slightly larger text */
    line-height: 1.25;
    gap: 10px;
}

/* Larger icon size (increased again) */
.btn-menu.btn-menu-lg i {
    color: var(--color-white);
    text-shadow: none;
    font-size: 65px !important;

/* Global no-shadow override: remove visual drop shadows across UI while preserving focus rings */
/* Do not touch outlines or focus box-shadows used as rings */
.ui-card, .card, .panel, .standard-modal, .standard-modal .modal, .modal-overlay .standard-modal, .ui-table, .ui-table-wrapper,
.ui-btn, button, .btn, .ui-chip, .ui-datalist, .ui-collapse,
.team-card, .player-card, .stat-card, .notification, .banner, .alert, .popover, .tooltip, .quick-stats-popover,
.site-header, .site-footer, .ui-rte, .rte-wrapper, .ui-select-wrapper, .ui-field, .ui-input, .ui-select, .ui-textarea {
    box-shadow: none !important;
}
/* Remove text shadows globally where applied to headings or titles */
.site-title, h1, h2, h3, h4, h5, h6 { text-shadow: none !important; }
/* Preserve focus rings: allow box-shadow on focus where it's used as a ring */
.ui-btn:focus-visible, button:focus-visible, .btn:focus-visible,
.ui-field:focus, .ui-input:focus, .ui-select:focus, .ui-textarea:focus,
.ui-rte:focus-within, .rte-wrapper:focus-within { box-shadow: var(--ui-field-ring-focus, 0 0 0 3px rgba(59,130,246,0.1)); }
    transition: transform .3s ease;
}

.btn-menu.btn-menu-lg:hover i {
    transform: scale(1.08) translateY(-2px);
}

/* Split button variant for home menu */
.home-menu .btn-menu.btn-menu--split {
    padding: 0;
    min-height: 0;
    border: 1px solid var(--color-primary-dark); /* 1px dark blue border */
    overflow: hidden;
    align-items: stretch; /* let sections fill width */
    justify-content: stretch;
    flex-direction: column; /* ensure vertical split */
    gap: 0; /* remove space between sections to eliminate line */
}

.home-menu .btn-menu--split .btn-menu-top {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white); /* top 2/3 white background */
    color: var(--color-primary-dark); /* dark blue icon */
    padding: 36px 28px; /* larger top area */
}

.home-menu .btn-menu--split .btn-menu-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-dark); /* bottom 1/3 dark blue */
    color: var(--color-white); /* white text */
    padding: 20px 24px; /* larger bottom bar */
}

/* Label text styling: normal weight, 20px, ALL CAPS */
.home-menu .btn-menu--split .btn-menu-bottom span {
    font-weight: var(--font-weight-normal);
    font-size: 20px;
    text-transform: uppercase;
}

/* Ensure approximate 2/3 top, 1/3 bottom proportion */
/* Use flex ratios instead of percentage heights */
.home-menu .btn-menu--split .btn-menu-top { flex: 2 1 0; }
.home-menu .btn-menu--split .btn-menu-bottom { flex: 1 1 0; }

/* Hover: keep split backgrounds intact */
.home-menu .btn-menu.btn-menu--split:hover {
    background: transparent;
    transform: translateY(-3px);
    box-shadow: none;
}

/* Icon color override for split variant */
.home-menu .btn-menu--split .btn-menu-icon { color: var(--color-primary-dark) !important; }

/* Disabled state */
.home-menu .btn-menu.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Small screens: scale down a bit while keeping proportions */
@media (max-width: 520px) {
    .home-menu .btn-menu.btn-menu-lg { min-height: 220px; padding: 0; }
    .home-menu .btn-menu--split .btn-menu-top { padding: 28px 20px; }
    .home-menu .btn-menu--split .btn-menu-bottom { padding: 16px 18px; }
    .home-menu .btn-menu--split .btn-menu-icon { font-size: 50px !important; }
}

/* Responsive tweak: reduce size on very small screens */
@media (max-width: 520px) {
    .btn-menu.btn-menu-lg {
        min-height: 180px;
        padding: 36px 24px 40px 24px;
    }
    .btn-menu.btn-menu-lg i { font-size: 44px !important; }
}

/* Navigation Button Style - For page navigation, breadcrumbs, etc. (TBD) */
.btn-nav {
    background-color: var(--color-grey-light);
    color: var(--color-primary-dark);
    padding: 12px 20px;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    border: 2px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 2px 4px var(--color-shadow);
}

.btn-nav:hover {
    background-color: var(--color-white);
    border-color: var(--color-primary-light);
    color: var(--color-primary-light);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px var(--color-shadow);
}

/* Action Button Style - For forms, confirmations, actions (Green version) */
.btn-action-green {
    background-color: var(--color-success);
    color: var(--color-white);
    padding: 12px 24px;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    border-radius: 6px;
    box-shadow: 0 2px 6px var(--color-shadow);
}

.btn-action-green:hover {
    background-color: #229954;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--color-shadow-hover);
}

/* Loading States */
.btn.loading {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

.loading {
    display: inline-block;
    padding: 20px;
    text-align: center;
    color: var(--color-text-light);
}

/* Loading Spinner */
.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-gray-300);
    border-top: 2px solid var(--color-primary-500);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-spinner.large {
    width: 40px;
    height: 40px;
    border-width: 3px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-content {
    background: var(--color-white);
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.loading-text {
    margin-top: var(--space-4);
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}

/* Keyboard Shortcut Tooltips */
.btn-menu[data-shortcut]:hover::after {
    content: attr(data-shortcut);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-black);
    color: var(--color-white);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    white-space: nowrap;
    z-index: 1000;
}

.btn-menu {
    position: relative;
}

/* Action Button Variants */
.btn-action.btn-action-warning {
    background-color: var(--color-warning);
}

.btn-action.btn-action-warning:hover {
    background-color: #e67e22;
}

.btn-action.btn-action-danger {
    background-color: var(--color-error);
}

.btn-action.btn-action-danger:hover {
    background-color: #c0392b;
}

.btn-action.btn-action-secondary {
    background-color: var(--color-grey-dark);
}

.btn-action.btn-action-secondary:hover {
    background-color: var(--color-primary-dark);
}

/* Card Styles - Reusable with reduced padding for fixed layout */
.card {
    background: var(--color-white);
    border-radius: 12px;
    padding: 10px 15px; /* Reduced vertical padding for fixed layout */
    box-shadow: 0 4px 20px var(--color-shadow);
    margin-bottom: 0; /* Remove default bottom margin */
}

/* ====================================================================== */
/* UNIVERSAL CARD HEADER SYSTEM - Based on SWAT Events Format           */
/* ====================================================================== */

/* Standard card header - applies to all cards */
.card-header {
    padding: 0 var(--space-2) 0 var(--space-2);
    border-bottom: 1px solid var(--color-gray-200);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    text-align: left;
    margin-bottom: 0;
    position: relative;
}

/* Card header title container */
.card-header-title {
    flex: 1;
    text-align: left;
    padding-right: var(--space-4);
    padding-bottom: 8px;
}

/* Card title styling */
.card-title {
    margin: 0;
    color: var(--color-primary-dark);
    font-size: 1.8rem;
    font-weight: 600;
    text-align: left;
}

/* Card header buttons container */
.card-header-buttons {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    padding-bottom: 8px;
}

/* Card header center section for player counts */
.card-header-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding-bottom: 8px;
}

/* Player counts container */
.player-counts {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Individual player count box - smaller with light blue background */
.player-count-box {
    background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%); /* Light blue gradient */
    color: white;
    padding: 4px 8px; /* Smaller padding */
    border-radius: 4px; /* Smaller border radius */
    font-size: 0.75rem; /* Smaller font */
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px; /* Smaller gap */
    box-shadow: 0 1px 3px rgba(147, 197, 253, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Red variant for unassigned count when > 0 */
.player-count-box.red {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%); /* Red gradient */
    box-shadow: 0 1px 3px rgba(248, 113, 113, 0.3);
}

/* Warning variant for notification count */
.player-count-box.warning {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); /* Orange/yellow gradient */
    box-shadow: 0 1px 3px rgba(251, 191, 36, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}

.player-count-box.warning:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); /* Darker on hover */
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(251, 191, 36, 0.4);
}

.player-count-box .count-label {
    opacity: 0.9;
}

.player-count-box .count-value {
    font-weight: var(--font-weight-bold, 600);
}

.player-count-box .count-icon {
    font-weight: var(--font-weight-bold, 600);
    opacity: 0.9;
}

/* Standard button sizing for card headers */
.card-header-buttons .btn {
    white-space: nowrap;
    min-width: 80px; /* Minimum width for card header buttons */
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal, 400);
}

/* Ensure primary buttons in card headers have proper text color */
.card-header-buttons .btn-primary {
    color: var(--color-white) !important;
    background-color: var(--color-primary-500) !important;
}

/* Ensure success buttons in card headers have proper text color */
.card-header-buttons .btn-success {
    color: var(--color-white) !important;
    background-color: var(--color-success) !important;
}

/* Legacy support for old header format */
.card-header-left {
    flex: 1;
    text-align: left;
}

.card-header-right {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.card-body {
    color: var(--color-text-light);
}

/* Form Styles - Reusable */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-muted);
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--color-border-light);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.form-select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--color-border-light);
    border-radius: 8px;
    font-size: 1rem;
    background-color: var(--color-white);
    transition: border-color 0.3s ease;
}

.form-select:focus {
    outline: none;
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

/* Table Styles - Reusable */
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px var(--color-shadow);
}

.table th,
.table td {
    padding: 6px 8px; /* Reduced padding for smaller row height */
    border-bottom: 1px solid var(--color-border-light);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflow text */
    text-overflow: ellipsis; /* Show ellipsis for long text */
    line-height: 1.2; /* Tighter line height */
}

.player-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-base);
    table-layout: fixed;
    position: relative;
}

/* Force table headers to display properly */
.player-table thead tr {
    display: table-row !important;
}

.player-table thead th {
    display: table-cell !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    vertical-align: middle !important;
}

/* Explicit column width specifications with high specificity */
.player-table thead th.name-column {
    width: 46% !important;
    max-width: 46% !important;
    min-width: 46% !important;
    text-align: left !important;
}

.player-table thead th.stats-column {
    width: 18% !important;
    max-width: 18% !important;
    min-width: 18% !important;
    text-align: center !important;
}

/* Specific stats column formatting */
.player-table th.stats-column,
.player-table td.stats-column {
    text-align: center !important;
}

.player-table .stats-rounds {
    text-align: center !important;
}

.player-table .stats-ways {
    text-align: center !important;
}

.player-table .stats-dollars {
    text-align: right !important;
    width: 18% !important;
    min-width: 65px !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

.player-table thead th.registration-status-column {
    width: 30% !important;
    max-width: 30% !important;
    min-width: 30% !important;
    text-align: center !important;
}

/* Override for event registration page (name + registration only) */
.player-table thead tr th:first-child:nth-last-child(2) {
    width: 70% !important;
    max-width: 70% !important;
    min-width: 70% !important;
}

.player-table thead tr th:last-child:nth-child(2) {
    width: 30% !important;
    max-width: 30% !important;
    min-width: 30% !important;
}

.player-table th {
    background: var(--color-gray-50);
    font-weight: 600;
    color: var(--color-text);
    font-size: var(--font-size-base); /* Match selected player list font size */
    height: 40px; /* Increased header height to match registration table */
    padding: var(--space-3) !important; /* Add padding to match registration table */
    text-align: left !important;
    vertical-align: middle !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important; /* Higher z-index to ensure headers stay above content */
}

/* Specific header alignment rules */
.player-table th.name-column {
    text-align: left;
}

.player-table th.stats-column {
    text-align: center;
}

.player-table th.team-column {
    text-align: center;
    width: 120px;
}

.player-table td.team-column {
    text-align: center;
    font-weight: 500;
    color: var(--color-text);
}

.player-table th.registration-status-column {
    text-align: center;
}

.player-table td.registration-status-column {
    text-align: center;
}

/* Center align registration status column data cells for check icons */
.player-table td.registration-status {
    text-align: center;
}

/* Sortable table styles */
.sortable-table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: background-color 0.2s ease;
}

.sortable-table th.sortable:hover {
    background-color: var(--color-gray-50);
}

.sortable-table th.sortable .sort-icon {
    margin-left: 5px;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.sortable-table th.sortable:hover .sort-icon {
    opacity: 0.8;
}

.sortable-table th.sortable.sort-asc .sort-icon,
.sortable-table th.sortable.sort-desc .sort-icon {
    opacity: 1;
    color: var(--color-primary-600);
}

/* Assigned vs unassigned player styling */
.assigned-player {
    opacity: 0.6;
    background-color: var(--color-gray-100);
    color: var(--color-muted);
    cursor: not-allowed;
    position: relative;
}

.assigned-player:hover {
    opacity: 0.7;
    background-color: var(--color-gray-150);
    cursor: not-allowed;
    color: var(--color-muted);
}

/* Style for draggable (unassigned) players */
.draggable-player {
    cursor: move; /* unified cross/move cursor */
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.draggable-player:hover {
    background-color: var(--color-blue-50);
    border-left-color: var(--color-primary-400);
    transform: translateX(2px);
}

.draggable-player:active {
    cursor: move; /* keep move cursor while active */
    background-color: var(--color-blue-100);
    transform: scale(1.02);
}

/* Drag legend styling */
.drag-legend {
    display: flex;
    gap: 15px;
    margin-top: 8px;
    font-size: var(--font-size-sm);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    background-color: var(--color-gray-50);
    color: var(--color-text);
    font-size: 11px;
    font-weight: 500;
}

.draggable-legend {
    background-color: var(--color-blue-50);
    color: var(--color-blue-700);
}

.assigned-legend {
    background-color: var(--color-gray-100);
    color: var(--color-muted);
}

/* View All Players Modal */
.view-all-modal {
    max-width: 1200px;
    width: 95%;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

/* Fixed header styling to match page headers */
.view-all-modal .modal-header.fixed-header {
    flex-shrink: 0;
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    border-bottom: 2px solid #e2e2e2;
    background: white;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.view-all-modal .modal-header-title {
    margin: 0;
}

.view-all-modal .modal-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Scrollable content area */
.view-all-modal .modal-body.scrollable-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
}

.view-all-players-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    min-height: 300px;
    width: 100%;
}

.view-all-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0; /* Allow columns to shrink */
}

.view-all-player {
    font-size: var(--font-size-base);
    line-height: 1.4;
    color: var(--color-text);
    font-weight: 400;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 1.5rem;
}

.view-all-player .player-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 0.5rem;
}

.view-all-player:last-child {
    border-bottom: none;
}

/* Time preference styling - smaller blue text */
.time-pref-text {
    font-size: 0.8rem;
    color: #007bff;
    font-weight: 500;
    flex-shrink: 0;
    margin-left: 0.25rem;
}

/* Fixed footer */
.view-all-modal .modal-footer.fixed-footer {
    flex-shrink: 0;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e9ecef;
    background-color: #f8f9fa;
    display: flex;
    justify-content: flex-end;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.error-message {
    grid-column: 1 / -1;
    text-align: center;
    color: #dc3545;
    font-style: italic;
    padding: 2rem;
    font-size: var(--font-size-base);
}

.player-table td {
    height: 36px; /* Standard row height for all player tables */
    font-size: var(--font-size-base); /* Match selected player list font size */
    padding: var(--space-3); /* Add padding to match registration table */
    vertical-align: middle;
}

.player-table tbody tr {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.player-table tbody tr:hover {
    background-color: var(--ui-table-row-hover, var(--color-primary-100,#dbeafe));
}

/* Registered Players table: enforce correct drag cursors over generic pointer */
.registered-players-table tbody tr { cursor: default !important; }
.registered-players-table tbody tr.draggable-player { cursor: move !important; }
.registered-players-table tbody tr.draggable-player:active { cursor: move !important; }
.registered-players-table tbody tr.assigned-player { cursor: not-allowed !important; }

.player-table tbody tr.selected {
    background-color: var(--ui-table-row-selected, var(--color-primary-100,#dbeafe));
}

.player-table tbody tr.selected:hover {
    background-color: var(--ui-table-row-selected, var(--color-primary-100,#dbeafe));
}

/* Sortable column styling */
.player-table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 20px; /* Space for sort indicator */
}

.player-table th.sortable:hover {
    background-color: var(--color-gray-100);
}

.sort-indicator {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--color-gray-400);
    transition: color 0.15s ease;
}

.player-table th.sort-asc .sort-indicator::after,
.player-table th.sort-desc .sort-indicator::after {
    content: '' !important;
    display: none !important;
}

/* Player name formatting */
.player-name {
    font-weight: 400;
    color: var(--color-text);
    font-size: 16px !important;
}

/* Override player name font weight for directory tables */
.player-table .player-name,
.player-table td {
    font-weight: 400; /* Normal weight instead of medium */
}

/* Force standard row heights for player tables */
.player-table th {
    height: 40px !important;
    padding: var(--space-3) !important;
    vertical-align: middle !important;
}

.player-table td {
    height: 36px !important; /* Standard row height for all player tables */
    padding: var(--space-3) !important;
    vertical-align: middle !important;
}

/* Stats formatting */
.stats-value {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xs);
}

.stats-currency {
    color: var(--color-green-600);
    font-weight: 500;
}

/* Table container */
.player-table-wrapper {
    max-height: 800px; /* Increased to better fill the card space and reduce white space at bottom */
    overflow-y: auto;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-white);
    position: relative; /* Ensure sticky positioning context */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .player-table .name-column {
        width: 50%;
    }
    
    .player-table .stats-column {
        width: 16.6%;
        font-size: 10px;
    }
    
    .player-table th,
    .player-table td {
        padding: 4px 6px;
    }
}

/* Enhanced row highlighting removed in favor of token-based rules (see forms.standard.css) */

/* ====================================================================== */
/* WEBSITE-WIDE MODAL SYSTEM                                           */
/* ====================================================================== */

/* Modal overlay - covers entire screen */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Show modal overlay */
.modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Modal container */
.modal {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.95) translateY(-20px);
    transition: transform 0.3s ease;
    margin: var(--space-4);
}

/* Modal shown state */
.modal-overlay.show .modal {
    transform: scale(1) translateY(0);
}

/* Modal header */
.modal-header {
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
}

.modal-title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    padding-bottom: var(--space-4);
}

/* Modal body */
.modal-body {
    padding: var(--space-6);
    color: var(--color-text);
    line-height: 1.6;
}

/* Modal footer */
.modal-footer {
    padding: 0 var(--space-6) var(--space-6) var(--space-6);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    border-top: 1px solid var(--color-border-light);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
}

/* Generic inline modal text helpers */
.modal-text { margin-bottom: 12px; }
.modal-warning-text { color: var(--color-danger-600, #b91c1c); font-weight: 600; }

/* Modal button styles */
.modal-btn {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-medium);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

.modal-btn-primary {
    background-color: var(--color-primary-light);
    color: var(--color-white);
    border-color: var(--color-primary-light);
}

.modal-btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.modal-btn-secondary {
    background-color: var(--color-white);
    color: var(--color-text);
    border-color: var(--color-border);
}

.modal-btn-secondary:hover {
    background-color: var(--color-grey-light);
    border-color: var(--color-grey-dark);
}

.modal-btn-danger {
    background-color: var(--color-error);
    color: var(--color-white);
    border-color: var(--color-error);
}

.modal-btn-danger:hover {
    background-color: #c0392b;
    border-color: #c0392b;
}

.modal-btn-warning {
    background-color: var(--color-warning);
    color: var(--color-white);
    border-color: var(--color-warning);
}

.modal-btn-warning:hover {
    background-color: #e67e22;
    border-color: #e67e22;
}

/* Modal size variants */
.modal-sm {
    width: 300px;
}

.modal-md {
    width: 500px;
}

.modal-lg {
    width: 700px;
}

.modal-xxl {
    width: 1420px; /* align with main width */
    max-width: 95vw; /* prevent overflow on smaller viewports */
}


/* Center generic modal headers (non-container variant) */
.modal.modal-xxl .modal-header,
.modal.modal-xl .modal-header,
.modal.modal-lg .modal-header,
.modal.modal-md .modal-header {
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.modal .modal-header .modal-title { margin:0 auto; }

.modal-large {
    width: 95vw;
    max-width: 1400px;
    height: 90vh;
    max-height: 90vh;
}

/* Modal container for large modals */
.modal-container {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    transform: scale(0.95) translateY(-20px);
    transition: transform 0.3s ease;
    margin: var(--space-4);
    display: flex;
    flex-direction: column;
}

.modal-overlay.show .modal-container {
    transform: scale(1) translateY(0);
}

/* Modal header with close button */
.modal-container .modal-header {
    padding: var(--space-6) var(--space-6) var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: center; /* center header content */
    background: var(--color-white);
    position: relative;
    z-index: 10;
    text-align: center;
}

/* Ensure title stays centered even if future left/right buttons appear */
.modal-container .modal-header .modal-title {
    flex: 0 1 auto;
    margin: 0 auto;
}

.modal-container .modal-title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    padding-bottom: 0;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.modal-close-btn:hover {
    background-color: var(--color-gray-100);
    color: var(--color-text);
}

/* Modal content area */
.modal-container .modal-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) 0;
}

/* Event Registration Specific Styles */
.event-registration-card .event-info-section {
    margin-bottom: var(--space-6);
}

.event-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.event-info-grid .info-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.event-info-grid .info-item label {
    font-weight: var(--font-weight-medium);
    color: var(--color-muted);
    font-size: var(--font-size-sm);
}

.event-info-grid .info-item span {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.selected-players-section {
    margin-bottom: var(--space-6);
}

.selected-players-section .section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.player-count {
    background-color: var(--color-primary-light);
    color: var(--color-white);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.selected-players-list {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 0; /* Remove padding so table fills the container */
    min-height: 580px; /* Increased to better utilize 742px card */
    max-height: 650px; /* Approximately 742px card minus header space */
    overflow-y: auto;
    background: var(--color-white);
}

.empty-selection-state {
    text-align: center;
    color: var(--color-text-light);
}

.empty-selection-state .empty-state-icon {
    margin-bottom: var(--space-3);
    opacity: 0.5;
}

.empty-selection-state p {
    margin: var(--space-2) 0;
}

.empty-selection-state .help-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.selected-players-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.selected-player-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
}

.selected-player-item .player-name {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.remove-player-btn {
    background: none;
    border: none;
    color: var(--color-text-light);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.remove-player-btn:hover {
    background-color: var(--color-error);
    color: var(--color-white);
}

.registration-options-section {
    border-top: 1px solid var(--color-border-light);
    padding-top: var(--space-4);
}

/* Player row selection styles (handled by forms.standard.css tokens) */
/* .player-row.selected, .player-row.highlighted removed to defer to token-based .ui-table rules */

.player-checkbox {
    margin: 0;
}

/* Registration Table Styles */
.registration-table-container {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* (Removed legacy .registration-table base block; using .ui-table standards) */

/* Time preference column (registered players) */
.selected-players-list .time-preference { color: var(--color-text-light); font-style: italic; }

.selected-players-list td.actions { text-align:center; width:60px; }

/* Remove button (legacy minimal) - unified compact */
.selected-players-list .btn-remove { background:none; border:none; color: var(--color-error-600,var(--color-danger,#dc2626)); cursor:pointer; padding:2px; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; font-size:13px; line-height:1; }
.selected-players-list .btn-remove:hover { background: var(--color-error-50,#fef2f2); color: var(--color-error-700,#b91c1c); }

.registration-error {
    padding: var(--space-4);
    text-align: center;
    color: var(--color-text-light);
    background-color: var(--color-gray-25);
    border-radius: var(--radius-md);
}

/* Responsive adjustments for modal */
@media (max-width: 768px) {
    .modal-large {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
    
    .modal-container {
        border-radius: 0;
        margin: 0;
        height: 100vh;
    }
    
    .event-info-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    .content-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .left-column, .right-column {
        order: 0;
    }
}

/* Modal icon styles */
.modal-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4) auto;
    font-size: 24px;
}

.modal-icon-success {
    background-color: rgba(39, 174, 96, 0.1);
    color: var(--color-success);
}

.modal-icon-warning {
    background-color: rgba(243, 156, 18, 0.1);
    color: var(--color-warning);
}

.modal-icon-error {
    background-color: rgba(231, 76, 60, 0.1);
    color: var(--color-error);
}

.modal-icon-info {
    background-color: rgba(52, 152, 219, 0.1);
    color: var(--color-info);
}

/* Modal content alignment */
.modal-content-center {
    text-align: center;
}

/* Responsive modal adjustments */
@media (max-width: 768px) {
    .modal {
        margin: var(--space-2);
        max-width: calc(100vw - var(--space-4));
    }
    
    .modal-sm,
    .modal-md,
    .modal-lg,
    .modal-xl {
        width: 100%;
    }
    
    .modal-footer {
        flex-direction: column;
    }
    
    .modal-btn {
        width: 100%;
    }
}

/* ===== PLAYER MANAGEMENT PAGE STYLES ===== */

/* Page Header */
.page-header {
    margin-bottom: var(--space-6);
    text-align: center;
}

.page-title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--space-2) 0;
}

.page-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-muted);
    margin: 0;


}

/* Action Buttons Section */
.action-buttons-section {
    margin-bottom: var(--space-3);
}

.action-buttons-card {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-sm);
    /* Remove fixed height now that we use ui-card header/content */
    height:auto !important;
}
.action-buttons-card .ui-card__header { display:none; }
.action-buttons-card .ui-card__content { padding:12px 16px 14px; }
.action-buttons-card .action-buttons-grid { width:100%; }
/* Active range button highlight: stronger visual on secondary buttons */
.history-filters .ui-btn.active,
.history-filters .ui-btn.is-active {
    color: var(--color-primary-800, #1e40af) !important;
    background: var(--color-primary-50, #eff6ff) !important;
    border-color: var(--color-primary-300, #93c5fd) !important;
    box-shadow: inset 0 0 0 1px var(--color-primary-200, #bfdbfe);
}
/* Remove default sibling margin so grid gap controls spacing uniformly */
.action-buttons-grid .ui-btn { margin: 0 !important; }
/* Compact the action buttons card to avoid pushing main content off-screen */
.action-buttons-card .card-content,
.action-buttons-card .ui-card__content {
    /* Override global card-content viewport height */
    height: auto !important;
    overflow: visible;
    display: block;
    padding: 10px 12px; /* equal vertical padding for medium buttons */
}
/* Make buttons inline-sized within the action grid (override block width) */
.action-buttons-card .action-buttons-grid .ui-btn.ui-btn--block {
    width: auto !important; /* prevent full-width stretching in this grid */
    min-width: 120px;
}

body.desktop-responsive .swat-history-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 12px);
    min-height: 0;
    height: calc(100vh - var(--dl-viewport-offset, 120px));
    max-height: calc(100vh - var(--dl-viewport-offset, 120px));
}

body.desktop-responsive .swat-history-layout .action-buttons-section {
    flex: 0 0 auto;
}

body.desktop-responsive .swat-history-grid {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

body.desktop-responsive .swat-history-grid.dl-grid--fixed-left {
    height: 100%;
    max-height: 100%;
    grid-template-columns: 520px minmax(520px, 1fr);
}

body.desktop-responsive .swat-history-grid .dl-col--dir,
body.desktop-responsive .swat-history-grid .dl-col--details {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 16px);
    min-height: 0;
    height: 100%;
}

body.desktop-responsive .swat-history-grid .events-list,
body.desktop-responsive .swat-history-grid .event-details {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

body.desktop-responsive .swat-history-grid .events-list-card,
body.desktop-responsive .swat-history-grid .event-details-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100% !important;
    max-height: none !important;
}

body.desktop-responsive .swat-history-grid .events-list-card .ui-card__content,
body.desktop-responsive .swat-history-grid .event-details-card .ui-card__content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body.desktop-responsive .swat-history-grid .events-list-card .ui-table-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

body.desktop-responsive .swat-history-grid .event-details-card .ui-card__content {
    gap: var(--space-3, 16px);
    overflow: hidden;
}

body.desktop-responsive .swat-history-grid .event-details-card #histStatsContent {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-right: 6px;
}

body.desktop-responsive .email-dashboard-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 12px);
    min-height: 0;
    height: calc(100vh - var(--dl-viewport-offset, 120px));
    max-height: calc(100vh - var(--dl-viewport-offset, 120px));
}

body.desktop-responsive .email-dashboard-grid {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    gap: var(--space-3, 16px);
}

body.desktop-responsive .email-dashboard-grid.dl-grid--fixed-left {
    height: 100%;
    max-height: 100%;
    grid-template-columns: minmax(540px, 60%) minmax(420px, 40%);
}

.email-logs-modal,
.sms-logs-modal {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 16px);
    min-height: 0;
}

.email-logs-modal .email-logs-table-wrapper,
.sms-logs-modal .sms-logs-table-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    max-height: clamp(240px, calc(100vh - 360px), 460px);
    scrollbar-gutter: stable;
}

#emailLogsModal .standard-modal-body,
#emailErrorsModal .standard-modal-body,
#smsLogsModal .standard-modal-body,
#smsErrorsModal .standard-modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 16px);
    overflow: hidden;
    min-height: 0;
}

#emailLogsModal .standard-modal-body .email-logs-modal,
#emailErrorsModal .standard-modal-body .email-logs-modal,
#smsLogsModal .standard-modal-body .sms-logs-modal,
#smsErrorsModal .standard-modal-body .sms-logs-modal {
    flex: 1 1 auto;
    min-height: 0;
}

body.desktop-responsive .reports-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 16px);
    min-height: 0;
    height: calc(100vh - var(--dl-viewport-offset, 120px));
    max-height: calc(100vh - var(--dl-viewport-offset, 120px));
}

body.desktop-responsive .reports-layout .reports-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3, 16px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
}

@media (max-width: 1100px) {
    body.desktop-responsive .reports-layout .reports-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    body.desktop-responsive .reports-layout .reports-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

body.desktop-responsive .reports-layout .reports-grid .ui-card--mini {
    display: flex;
    flex-direction: column;
    height: 200px;
}

body.desktop-responsive .reports-layout .reports-grid .ui-card--mini .ui-card__content {
    flex: 1 1 auto;
}

body.desktop-responsive .reports-layout .reports-grid .ui-card--mini .ui-card__footer {
    justify-content: flex-end;
}

body.desktop-responsive .admin-settings-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 12px);
    min-height: 0;
    height: calc(100vh - var(--dl-viewport-offset, 120px));
    max-height: calc(100vh - var(--dl-viewport-offset, 120px));
}

body.desktop-responsive .admin-settings-grid {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3, 16px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    padding-bottom: var(--space-1, 4px);
    scrollbar-gutter: stable;
}

@media (max-width: 980px) {
    body.desktop-responsive .admin-settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    body.desktop-responsive .admin-settings-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

body.desktop-responsive .admin-settings-grid .admin-settings-group {
    flex: 1 1 auto;
    min-height: 0;
}

body.desktop-responsive .admin-settings-grid .admin-settings-group .ui-card__content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    gap: var(--space-3, 16px);
    padding-right: 8px;
}

body.desktop-responsive .swat-calculator-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 12px);
    min-height: 0;
    height: calc(100vh - var(--dl-viewport-offset, 120px));
    max-height: calc(100vh - var(--dl-viewport-offset, 120px));
}

body.desktop-responsive .swat-calculator-grid {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(420px, 1fr) minmax(420px, 1fr);
    gap: var(--space-3, 16px);
}

body.desktop-responsive .swat-calculator-grid .ui-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100% !important;
    max-height: none !important;
}

body.desktop-responsive .swat-calculator-grid .ui-card__content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.desktop-responsive .teams-list-card .ui-card__content {
    overflow: hidden;
    gap: var(--space-3, 16px);
}

body.desktop-responsive .teams-list-card .teams-directory {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

body.desktop-responsive .score-entry-card .ui-card__content {
    overflow: hidden;
}

body.desktop-responsive .score-entry-card .score-entry-form {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

body.desktop-responsive .swat-calculator-layout .teams-directory table.ui-table {
    table-layout: fixed;
}

body.desktop-responsive .swat-calculator-layout .teams-directory table.ui-table col:nth-child(1),
body.desktop-responsive .swat-calculator-layout .teams-directory table.ui-table th:nth-child(1),
body.desktop-responsive .swat-calculator-layout .teams-directory table.ui-table td:nth-child(1) {
    width: 10% !important;
    text-align: center;
}

body.desktop-responsive .swat-calculator-layout .teams-directory table.ui-table col:nth-child(2),
body.desktop-responsive .swat-calculator-layout .teams-directory table.ui-table th:nth-child(2),
body.desktop-responsive .swat-calculator-layout .teams-directory table.ui-table td:nth-child(2) {
    width: 34% !important;
    text-align: left;
}

body.desktop-responsive .swat-calculator-layout .teams-directory table.ui-table col:nth-child(3),
body.desktop-responsive .swat-calculator-layout .teams-directory table.ui-table th:nth-child(3),
body.desktop-responsive .swat-calculator-layout .teams-directory table.ui-table td:nth-child(3),
body.desktop-responsive .swat-calculator-layout .teams-directory table.ui-table col:nth-child(4),
body.desktop-responsive .swat-calculator-layout .teams-directory table.ui-table th:nth-child(4),
body.desktop-responsive .swat-calculator-layout .teams-directory table.ui-table td:nth-child(4),
body.desktop-responsive .swat-calculator-layout .teams-directory table.ui-table col:nth-child(5),
body.desktop-responsive .swat-calculator-layout .teams-directory table.ui-table th:nth-child(5),
body.desktop-responsive .swat-calculator-layout .teams-directory table.ui-table td:nth-child(5) {
    width: 10% !important;
    text-align: center;
}

body.desktop-responsive .swat-calculator-layout .teams-directory table.ui-table col:nth-child(6),
body.desktop-responsive .swat-calculator-layout .teams-directory table.ui-table th:nth-child(6),
body.desktop-responsive .swat-calculator-layout .teams-directory table.ui-table td:nth-child(6) {
    width: 16% !important;
    text-align: center;
}

body.desktop-responsive .swat-calculator-layout .teams-directory table.ui-table col:nth-child(7),
body.desktop-responsive .swat-calculator-layout .teams-directory table.ui-table th:nth-child(7),
body.desktop-responsive .swat-calculator-layout .teams-directory table.ui-table td:nth-child(7) {
    width: 10% !important;
    text-align: center;
}
body.desktop-responsive .player-comm-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 12px);
    min-height: 0;
    height: calc(100vh - var(--dl-viewport-offset, 120px));
    max-height: calc(100vh - var(--dl-viewport-offset, 120px));
}

body.desktop-responsive .player-comm-grid {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    gap: var(--space-3, 16px);
}

body.desktop-responsive .player-comm-grid.dl-grid--fixed-left {
    height: 100%;
    max-height: 100%;
    grid-template-columns: minmax(420px, 35%) minmax(560px, 65%);
}

body.desktop-responsive .player-comm-grid .dl-col--dir,
body.desktop-responsive .player-comm-grid .dl-col--details {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 16px);
    min-height: 0;
    height: 100%;
}

body.desktop-responsive .player-comm-grid .player-comm-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100% !important;
    max-height: none !important;
}

body.desktop-responsive .player-comm-card .ui-card__content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 16px);
    overflow-y: auto;
    overflow-x: hidden;
}

body.desktop-responsive #pc-settings-card .ui-card__content {
    padding-right: 8px;
}

body.desktop-responsive #pc-contents-card .ui-card__content {
    padding-right: 8px;
}

body.desktop-responsive #pc-contents-card .pc-rte-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body.desktop-responsive #pc-contents-card .pc-rte-wrapper .ui-rte__editor {
    flex: 1 1 auto;
    min-height: 260px;
    max-height: 480px;
    overflow-y: auto;
    overflow-x: hidden;
}

body.desktop-responsive .email-dashboard-grid .dl-col--dir,
body.desktop-responsive .email-dashboard-grid .dl-col--details {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 16px);
    min-height: 0;
    height: 100%;
}

body.desktop-responsive .recent-sends-section,
body.desktop-responsive .email-dashboard-right {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.recent-sends-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100% !important;
    max-height: none !important;
}

.recent-sends-card .ui-card__content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.recent-sends-table-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 0 12px;
}

.email-dashboard-layout .dashboard-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

body.desktop-responsive .email-dashboard-right .dashboard-card {
    flex: 1 1 auto;
}

.email-dashboard-layout .dashboard-card .ui-card__content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    gap: var(--space-3, 16px);
}

.history-range-card .ui-card__header { display: none; }

/* Events table selection handled in forms.standard.css; keep header behavior */
table#eventsTable thead th { user-select:none; }
/* (Removed old absolute/padding approach for Notes RTE; inline toolbar now handled in template) */
/* .event-details-card .form-group-notes { position:relative; } */
/* .event-details-card .form-group-notes > label[for="swatNotes"] { display:inline-block; width:100%; padding-right:200px; } */
/* .event-details-card .form-group-notes .rte-wrapper { margin-top:0; } */
/* (Swat Events) Previous absolute toolbar + margin-top removed after inline label toolbar refactor */
/* .event-details-card .form-group-notes .rte-wrapper .rte-toolbar { ...removed... } */
/* .event-details-card .form-group-notes .rte-wrapper .rte-editor.form-control { margin-top:44px; } */
 .event-details-card .form-group-notes .rte-wrapper .rte-editor.form-control { margin-top:0; }
/* Sort indicators */
table#eventsTable thead th[data-sort] { position:relative; padding-right:20px; }
table#eventsTable thead th[data-sort]::after {
    content:'';
    position:absolute; right:6px; top:50%; width:0; height:0; pointer-events:none;
    border-left:4px solid transparent; border-right:4px solid transparent; border-top:6px solid var(--color-gray-400,#9ca3af);
    transform:translateY(-2px);
    opacity:0.35;
}
table#eventsTable thead th[data-sort].sort-asc::after {
    border-top:none; border-bottom:6px solid var(--color-gray-700,#374151); transform:translateY(-4px);
    opacity:0.9;
}
table#eventsTable thead th[data-sort].sort-desc::after {
    border-top:6px solid var(--color-gray-700,#374151); opacity:0.9; transform:translateY(-2px);
}
table#eventsTable thead th[data-sort]:hover::after { opacity:0.7; }

/* Events list table: ensure internal scroll without fixed viewport */
.events-list-card .ui-card__content { padding:12px 14px 10px; }
.events-list-card .ui-table-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* borders/radius/background are provided by .ui-table-wrapper base */
}
/* table width and sticky header handled by forms.standard.css (.ui-table) */

.action-buttons-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-2);
    align-items: stretch;
}
.action-buttons-card .action-buttons-grid .ui-btn { width: 100%; }

@media (max-width: 1024px) {
    .action-buttons-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .action-buttons-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .action-buttons-grid { grid-template-columns: 1fr; }
}

.btn-action {
    background-color: #87CEEB; /* Light blue color */
    color: var(--color-white);
    padding: 12px 24px; /* Restored original padding */
    font-size: 16px; /* Increased from 14px to 16px for better visibility */
    font-weight: 500; /* Standardized 500 font weight */
    border-radius: 6px;
    box-shadow: 0 2px 6px var(--color-shadow);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap; /* Prevent text wrapping */
    flex: 1; /* Allow buttons to grow equally */
    min-width: 130px; /* Base width, 30% wider than typical button (~100px) */
}

.btn-action:hover {
    background-color: #4682B4; /* Darker blue on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--color-shadow-hover);
}

.btn-action:disabled {
    background-color: #6c757d; /* Gray color for disabled state */
    color: #adb5bd; /* Lighter gray text */
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
    box-shadow: 0 2px 6px var(--color-shadow);
}

.btn-action:disabled:hover {
    background-color: #6c757d; /* Keep gray on hover when disabled */
    transform: none;
    box-shadow: 0 2px 6px var(--color-shadow);
}

@media (max-width: 1024px) {
    .action-buttons-grid {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    
    .btn-action {
        flex: 1 1 calc(33.333% - var(--space-2)); /* 3 buttons per row */
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    .action-buttons-grid {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    
    .btn-action {
        flex: 1 1 calc(50% - var(--space-1)); /* 2 buttons per row */
        min-width: 110px;
    }
}

@media (max-width: 480px) {
    .action-buttons-grid {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .btn-action {
        flex: none;
        width: 100%; /* Full width on small screens */
        min-width: auto;
    }
}

/* Content Layout */
.content-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.35fr; /* Default split; page-specific overrides adjust as needed */
    gap: var(--space-3);
    align-items: start;
}

/* Left Column: Directory and Stats */
.left-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-3); /* Restored to original 12px gap */
    height: auto; /* Let it calculate naturally */
}

/* Right Column: Player Data */
.right-column {
    display: flex;
    flex-direction: column;
}

/* Stats wrapper spacing for mini cards */
#histStatsWrapper { display:flex; flex-direction:column; gap: var(--space-3); }

@media (max-width: 1024px) {
    .content-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
    
    .left-column {
        order: 2; /* Move left column below right column on mobile */
    }
    
    .right-column {
        order: 1; /* Move right column above left column on mobile */
    }
}

/* Card Styles */
.card {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card-header-left {
    flex: 1;
    text-align: center;
}

.card-header-right {
    display: flex;
    gap: var(--space-2);
    position: absolute;
    right: var(--space-2);
    top: var(--space-4);
}

.card-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-primary-dark);  /* Dark blue color #374e64 */
    margin: 0;
    text-transform: uppercase;  /* All caps */
    text-align: left;  /* Left justified */
    width: 100%;
    letter-spacing: 0.5px;  /* Slight letter spacing for readability */
}

.card-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-muted);
    margin: 0;
}

.card-content {
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-2);
}

/* Player Search Card */
.player-search-card {
    position: sticky;
    top: var(--space-4);
}

.search-container {
    position: relative;
    margin-bottom: var(--space-4);
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input {
    width: 100%;
    padding: var(--space-3) var(--space-10) var(--space-3) var(--space-3);
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-family: var(--font-family-base);
    transition: all 0.2s ease;
    background: white;
}

.search-input:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-100);
}

.search-input:not(:placeholder-shown) {
    border-color: var(--color-primary-500);
}

.search-icon {
    position: absolute;
    right: var(--space-3);
    color: var(--color-gray-400);
    pointer-events: none;
}

.clear-search-btn {
    position: absolute;
    right: var(--space-8);
    background: none;
    border: none;
    color: var(--color-gray-400);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.clear-search-btn:hover {
    color: var(--color-text);
    background: var(--color-gray-100);
}

/* Search Results Dropdown (removed - component unused in repo) */
/* Previously defined: .search-results, .search-results-list, .search-result-item, .search-highlight, etc. */

/* Player Data Card */
/* Override legacy fixed height: allow profile card to shrink when sections collapsed */
.player-data-card {
    min-height: var(--player-profile-card-min-h, 450px);
    height: var(--player-profile-card-min-h, 450px);
    display:flex;
    flex-direction:column;
}
.player-data-card .ui-card__content { flex:1 1 auto; overflow:auto; }

/* Player Directory Card - Fixed height to match data card */
/* Allow directory card to size naturally under new ui-card layout (can add explicit height later) */
.player-directory-card {
    height: var(--player-directory-card-h-with-search, 742px);
    min-height: var(--player-directory-card-h-with-search, 742px);
    display: flex;
    flex-direction: column;
    min-height: 0; /* allow internal flex children to shrink */
}

/* Ensure inner content scrolls when taller than fixed card height */
.player-directory-card .ui-card__content {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0; /* allow flexbox to shrink for overflow */
}

/* Ensure the list container itself can scroll if it grows beyond card height */
.player-directory-card .player-list-container {
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
}

/* Allow table wrapper to expand and scroll independently (nested scroll if needed) */
.player-directory-card .player-table-wrapper {
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
}

/* Increase table height within player directory card to reduce white space */
.player-directory-card .player-table-wrapper {
    max-height: 590px; /* Adjusted to allow slightly more visible rows */
    min-height: 500px; /* Set minimum height to ensure it takes up more space */
}

/* Player Stats Card */
.player-stats-card {
    height: 312px; /* Fixed height - can be adjusted to match data card bottom */
    min-height: 200px; /* Minimum height for content */
}

.player-stats-container {
    height: 194px; /* Updated per request */
    display: flex;
    align-items: flex-start; /* align to top */
    justify-content: flex-start; /* align content to left */
}

/* Stats Content */
.player-stats-content {
    width: 100%;
    padding: 0; /* remove all internal padding */
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns for better use of wider card */
    gap: var(--space-4) 48px; /* Increased column gap from var(--space-4) to var(--space-6) for better separation */
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0; /* Remove padding */
    /* Remove background, border-radius, and border for simple text style */
}

.stat-label {
    font-weight: 500;
    color: var(--color-muted);
    font-size: var(--font-size-base); /* Match form field font size */
}

.stat-value {
    font-weight: 600;
    color: var(--color-text);
    font-size: var(--font-size-base); /* Match form field font size */
}

.player-data-container {
    min-height: 320px; /* Reverted to original min height */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: var(--space-8);
}

.empty-state-icon {
    color: var(--color-gray-300);
    margin-bottom: var(--space-4);
}

.empty-state h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--space-2) 0;
}

.empty-state p {
    font-size: var(--font-size-base);
    color: var(--color-muted);
    margin: 0;
}

/* Player Form */
.player-form {
    width: 100%;
    max-width: none;
}

.form-section {
    margin-bottom: 8px; /* Reduced from 12px to 8px for tighter spacing */
}

.form-section:last-child {
    margin-bottom: 0;
}

.section-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--space-2) 0; /* Reduced from var(--space-4) to var(--space-2) */
    padding-bottom: var(--space-1); /* Reduced from var(--space-2) to var(--space-1) */
    border-bottom: 2px solid var(--color-gray-100);
}

/* Hide the first "Player Information" section title to save space */
.form-section:first-of-type .section-title {
    display: none;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-2); /* Reduced from var(--space-3) to var(--space-2) for tighter spacing */
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-muted);
    margin-bottom: var(--space-2);
}

.form-group input,
.form-group select {
    padding: var(--space-3);
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-family: var(--font-family-base);
    transition: all 0.2s ease;
    background: white;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-100);
}

.form-group input[readonly],
.form-group select[disabled] {
    background: var(--color-gray-50);
    color: var(--color-muted);
    cursor: not-allowed;
}

.form-group input:not([readonly]):not([disabled]),
.form-group select:not([disabled]) {
    background: white;
    border-color: var(--color-primary-300);
}

/* Custom Datalist/Searchable Dropdown */
.custom-datalist-container {
    position: relative;
}

.custom-datalist-input {
    width: 100%;
}

.custom-datalist-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: white;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 1000;
    margin-top: 2px;
}

.custom-datalist-option {
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    font-size: var(--font-size-base);
    border-bottom: 1px solid var(--color-gray-100);
}

.custom-datalist-option:last-child {
    border-bottom: none;
}

.custom-datalist-option:hover,
.custom-datalist-option.highlighted {
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
}

.custom-datalist-option.selected {
    background-color: var(--color-primary-100);
    color: var(--color-primary-800);
}

/* Remove the old datalist styles since we're using custom dropdown */
datalist {
    display: none;
}

/* Player Directory Disabled State */
.player-directory-card.disabled {
    position: relative;
}

.player-directory-card.disabled::before {
    content: "Player editing in progress...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-muted);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    font-weight: 500;
    z-index: 10;
    box-shadow: var(--shadow-md);
    border: 2px solid var(--color-gray-300);
}

/* Checkbox Groups - Override form-group column layout */
.form-group.checkbox-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-bottom: var(--space-3);
}

.checkbox-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

.checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2);
    cursor: pointer;
    margin-bottom: 0;
    font-size: var(--font-size-base);
    color: var(--color-text);
    white-space: nowrap;
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: white;
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--color-primary-500);
    border-color: var(--color-primary-500);
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '✓';
    color: white;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold, 600);
}

.checkbox-label input[type="checkbox"]:disabled + .checkbox-custom {
    background: var(--color-gray-50);
    border-color: var(--color-gray-200);
    cursor: not-allowed;
}

.checkbox-label input[type="checkbox"]:disabled:checked + .checkbox-custom {
    background: var(--color-gray-400);
    border-color: var(--color-gray-400);
}

/* Edit Mode Styles */
.player-form.edit-mode input:not([readonly]),
.player-form.edit-mode select:not([disabled]) {
    border-color: var(--color-primary-300);
    background: white;
}

.player-form.edit-mode .checkbox-label {
    cursor: pointer;
}

.player-form.edit-mode .checkbox-custom {
    cursor: pointer;
}

/* Animation for search results */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design for Player Management */
@media (max-width: 768px) {
    .page-header {
        margin-bottom: var(--space-4);
    }

    .page-title {
        font-size: var(--font-size-xl);
    }

    .page-subtitle {
        font-size: var(--font-size-base);
    }

    .card-header {
        flex-direction: column;
        gap: var(--space-3);
        align-items: stretch;
    }

    .card-header-right {
        justify-content: flex-end;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .player-search-card {
        position: static;
    }
}
.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.gap-1 { gap: 10px; }
.gap-2 { gap: 20px; }
.gap-3 { gap: 30px; }

/* Mobile override for grid utilities inside form-grid */
@media (max-width: 768px) {
    .form-grid.grid-2 { grid-template-columns: 1fr; }
}

/* Color Utilities */
.text-primary { color: var(--color-primary-light); }
.text-secondary { color: var(--color-grey-dark); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }
.text-dark { color: var(--color-primary-dark); }
.text-muted { color: var(--color-text-light); }
/* Datalist label/value styles are defined in forms.standard.css; removed duplicates here to avoid overlap. */

/* Background Utilities */
.bg-primary { background-color: var(--color-primary-light); }
.bg-secondary { background-color: var(--color-grey-dark); }
.bg-success { background-color: var(--color-success); }
.bg-warning { background-color: var(--color-warning); }
.bg-info { background-color: var(--color-info); }
.bg-dark { background-color: var(--color-primary-dark); }
.bg-light { background-color: var(--color-grey-light); }
.bg-white { background-color: var(--color-white); }

/* Display Utilities */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }

/* Width Utilities */
.w-25 { width: 25%; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-100 { width: 100%; }

/* Height Utilities */
.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }

/* ===== PLAYER TABLE STYLES ===== */

/* Player List Container */
.player-list-container {
    margin-top: 8px; /* Reduced from var(--space-4) which is typically 16px */
}

.player-directory-card .player-list-container {
    margin-top: 8px; /* Ensure consistency for player directory component */
    flex: 1 1 auto; /* Take remaining space */
    display: flex;
    flex-direction: column;
    min-height: 0; /* allow inner scroll areas to size */
}

.player-list-loading,
.player-list-empty,
.player-list-error {
    padding: var(--space-6);
    text-align: center;
    color: var(--color-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 2px dashed var(--color-gray-300);
    border-radius: var(--radius-md);
    flex: 1; /* Take up available space in flex container */
    min-height: 200px; /* Ensure minimum height for better appearance */
}

.player-list-error {
    color: var(--color-error);
    border-color: var(--color-error-200);
    background: var(--color-error-50);
}

/* Player Table Wrapper */
.player-table-wrapper {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    max-height: 600px;
    overflow-y: auto;
}

/* Player Table */
.player-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-base); /* Match selected player list font size */
    table-layout: fixed; /* Fixed layout for consistent column widths */
}

.player-table th,
.player-table td {
    padding: 6px 8px; /* Reduced padding for smaller row height */
    border-bottom: 1px solid var(--color-border-light);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflow text */
    text-overflow: ellipsis; /* Show ellipsis for long text */
    line-height: 1.2; /* Tighter line height */
}

/* Column width specifications */
.player-table .name-column {
    width: 55%; /* Increased width for names column */
    min-width: 120px;
}

.player-table .stats-column {
    width: 15%; /* Reduced width for stats columns */
    text-align: center;
    min-width: 45px;
}

.player-table th {
    background: var(--color-gray-50);
    font-weight: 600;
    color: var(--color-text);
    font-size: var(--font-size-base); /* Match selected player list font size */
    height: 32px; /* Fixed header height */
}

.player-table td {
    height: 36px; /* Standard row height for all player tables */
    font-size: var(--font-size-base); /* Match selected player list font size */
}

.player-table tbody tr {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.player-table tbody tr:hover {
    background-color: var(--ui-table-row-hover, var(--color-primary-100,#dbeafe));
}

.player-table tbody tr.selected {
    background-color: var(--ui-table-row-selected, var(--color-primary-100,#dbeafe));
}

.player-table tbody tr.selected:hover {
    background-color: var(--ui-table-row-selected, var(--color-primary-100,#dbeafe));
}

/* Sortable column styling */
.player-table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 20px; /* Space for sort indicator */
}

.player-table th.sortable:hover {
    background-color: var(--color-gray-100);
}

.sort-indicator {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size:  10px;
    color: var(--color-gray-400);
    transition: color 0.15s ease;
}

.player-table th.sort-asc .sort-indicator::after,
.player-table th.sort-desc .sort-indicator::after {
    content: '' !important;
    display: none !important;
}

/* Stats formatting */
.stats-value {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xs);
}

.stats-currency {
    color: var(--color-green-600);
    font-weight: 500;
}

/* Table container */
.player-table-wrapper {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-white);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .player-table .name-column {
        width: 50%;
    }
    
    .player-table .stats-column {
        width: 16.6%;
        font-size: 10px;
    }
    
    .player-table th,
    .player-table td {
        padding: 4px 6px;
    }
}

/* Enhanced row highlighting removed in favor of token-based rules (see forms.standard.css) */

/* ====================================================================== */
/* WEBSITE-WIDE MODAL SYSTEM                                           */
/* ====================================================================== */

/* Modal overlay - covers entire screen */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Show modal overlay */
.modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Modal container */
.modal {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.95) translateY(-20px);
    transition: transform 0.3s ease;
    margin: var(--space-4);
}

/* Modal shown state */
.modal-overlay.show .modal {
    transform: scale(1) translateY(0);
}

/* Modal header */
.modal-header {
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
}

.modal-title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    padding-bottom: var(--space-4);
}

/* Modal body */
.modal-body {
    padding: var(--space-6);
    color: var(--color-text);
    line-height: 1.6;
}

/* Modal footer */
.modal-footer {
    padding: 0 var(--space-6) var(--space-6) var(--space-6);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    border-top: 1px solid var(--color-border-light);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
}

/* Modal button styles */
.modal-btn {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-medium);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

.modal-btn-primary {
    background-color: var(--color-primary-light);
    color: var(--color-white);
    border-color: var(--color-primary-light);
}

.modal-btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.modal-btn-secondary {
    background-color: var(--color-white);
    color: var(--color-text);
    border-color: var(--color-border);
}

.modal-btn-secondary:hover {
    background-color: var(--color-grey-light);
    border-color: var(--color-grey-dark);
}

.modal-btn-danger {
    background-color: var(--color-error);
    color: var(--color-white);
    border-color: var(--color-error);
}

.modal-btn-danger:hover {
    background-color: #c0392b;
    border-color: #c0392b;
}

.modal-btn-warning {
    background-color: var(--color-warning);
    color: var(--color-white);
    border-color: var(--color-warning);
}

.modal-btn-warning:hover {
    background-color: #e67e22;
    border-color: #e67e22;
}

/* Modal size variants */
.modal-sm {
    width: 300px;
}

.modal-md {
    width: 500px;
}

.modal-lg {
    width: 700px;
}

.modal-xl {
    width: 900px;
}

.modal-large {
    width: 95vw;
    max-width: 1400px;
    height: 90vh;
    max-height: 90vh;
}

/* Modal container for large modals */
.modal-container {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    transform: scale(0.95) translateY(-20px);
    transition: transform 0.3s ease;
    margin: var(--space-4);
    display: flex;
    flex-direction: column;
}

.modal-overlay.show .modal-container {
    transform: scale(1) translateY(0);
}

/* Modal header with close button */
.modal-container .modal-header {
    padding: var(--space-6) var(--space-6) var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-white);
    position: relative;
    z-index: 10;
}

.modal-container .modal-title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    padding-bottom: 0;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.modal-close-btn:hover {
    background-color: var(--color-gray-100);
    color: var(--color-text);
}

/* Modal content area */
.modal-container .modal-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) 0;
}

/* Event Registration Specific Styles */
.event-registration-card .event-info-section {
    margin-bottom: var(--space-6);
}

.event-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.event-info-grid .info-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.event-info-grid .info-item label {
    font-weight: var(--font-weight-medium);
    color: var(--color-muted);
    font-size: var(--font-size-sm);
}

.event-info-grid .info-item span {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.selected-players-section {
    margin-bottom: var(--space-6);
}

.selected-players-section .section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.player-count {
    background-color: var(--color-primary-light);
    color: var(--color-white);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.empty-selection-state {
    text-align: center;
    color: var(--color-text-light);
}

.empty-selection-state .empty-state-icon {
    margin-bottom: var(--space-3);
    opacity: 0.5;
}

.empty-selection-state p {
    margin: var(--space-2) 0;
}

.empty-selection-state .help-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.selected-players-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.selected-player-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
}

.selected-player-item .player-name {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.remove-player-btn {
    background: none;
    border: none;
    color: var(--color-text-light);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.remove-player-btn:hover {
    background-color: var(--color-error);
    color: var(--color-white);
}

.registration-options-section {
    border-top: 1px solid var(--color-border-light);
    padding-top: var(--space-4);
}

/* Player row selection styles (handled by forms.standard.css tokens) */
/* Duplicate block removed: .player-row.selected, .player-row.highlighted */

.player-checkbox {
    margin: 0;
}

/* (Removed legacy registration-table styles in favor of .ui-table) */

.registration-error {
    padding: var(--space-4);
    text-align: center;
    color: var(--color-text-light);
    background-color: var(--color-gray-25);
    border-radius: var(--radius-md);
}

/* Responsive adjustments for modal */
@media (max-width: 768px) {
    .modal-large {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
    
    .modal-container {
        border-radius: 0;
        margin: 0;
        height: 100vh;
    }
    
    .event-info-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    .content-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .left-column, .right-column {
        order: 0;
    }
}

/* Modal icon styles */
.modal-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4) auto;
    font-size: 24px;
}

.modal-icon-success {
    background-color: rgba(39, 174, 96, 0.1);
    color: var(--color-success);
}

.modal-icon-warning {
    background-color: rgba(243, 156, 18, 0.1);
    color: var(--color-warning);
}

.modal-icon-error {
    background-color: rgba(231, 76, 60, 0.1);
    color: var(--color-error);
}

.modal-icon-info {
    background-color: rgba(52, 152, 219, 0.1);
    color: var(--color-info);
}

/* Modal content alignment */
.modal-content-center {
    text-align: center;
}

/* Responsive modal adjustments */
@media (max-width: 768px) {
    .modal {
        margin: var(--space-2);
        max-width: calc(100vw - var(--space-4));
    }
    
    .modal-sm,
    .modal-md,
    .modal-lg,
    .modal-xl {
        width: 100%;
    }
    
    .modal-footer {
        flex-direction: column;
    }
    
    .modal-btn {
        width: 100%;
    }
}

/* ===== STATS MODAL OVERRIDES - FORCE APPLY ===== */
/* Updated: 2025-07-31 - Force header styling for stats modal */
.modal-lg .modal-header.stats-modal-header {
    background: #374e64 !important;
    color: #ffffff !important;
    border-bottom: 1px solid #374e64 !important;
    padding: 12px 24px !important;
    text-align: center !important;
}

.modal-lg .modal-header.stats-modal-header .modal-title.stats-modal-title {
    color: #ffffff !important;
    margin: 0 !important;
    font-weight: var(--font-weight-bold, 600) !important;
    text-transform: uppercase !important;
    padding-bottom: 0 !important;
    font-size: 1.25rem !important;
}

/* Stats section styling */
.all-stats-modal .stats-section-title {
    margin: 0;
    padding: 24px 24px 12px;
    background: #ffffff;
    font-size: 1.125rem;
    font-weight: 600;
    color: #374e64;
    border-radius: 8px 8px 0 0;
}

.all-stats-modal .stats-grid {
    padding: 0 24px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 4px;
}

.all-stats-modal .stats-grid .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 16px;
    margin-left: 24px;
}

.all-stats-modal .stats-grid .stat-item:last-child {
    border-bottom: none;
}

.all-stats-modal .stats-grid .stat-label {
    font-weight: var(--font-weight-normal, 400);
    color: var(--color-muted);
    flex: 1;
}

.all-stats-modal .stats-grid .stat-value {
    font-weight: var(--font-weight-bold, 600);
    /* Use standard text color token (emphasis token not defined) */
    color: var(--color-text);
    text-align: right;
    min-width: 80px;
}

.all-stats-modal .stats-section {
    margin-bottom: 24px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
}

.all-stats-modal .stats-section:last-child {
    margin-bottom: 0;
}

.all-stats-modal {
    max-height: 70vh;
    overflow-y: auto;
}

/* Mobile responsive for stats modal */
@media (max-width: 768px) {
    .all-stats-modal .stats-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .all-stats-modal {
        max-height: 80vh;
    }
    
    .all-stats-modal .stats-section-title {
        padding: 16px 16px 8px;
        font-size: 1rem;
    }
    
    .all-stats-modal .stats-grid {
        padding: 0 16px 16px;
    }
    
    .all-stats-modal .stats-grid .stat-item {
        margin-left: 16px;
        padding: 8px 12px;
    }
    
    .modal-lg .modal-header.stats-modal-header {
        padding: 8px 16px !important;
    }
}

/* Stats Modal Button Override - Match main button size */
.modal-lg .modal-footer .modal-btn {
    padding: 10px 16px !important;
    width: 150px !important;
    font-size: 1rem !important;
    font-weight: var(--font-weight-normal, 400) !important;
}

/* ===== SWAT EVENTS MANAGEMENT STYLES ===== */
/* Layout specific to SWAT Events management page */

/* Events Directory Styles */
.events-directory {
    overflow-y: auto;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.events-directory .directory-header {
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-gray-50);
    border-bottom: 1px solid var(--color-border-light);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    position: sticky;
    top: 0;
    z-index: 1;
}

.events-directory .directory-list {
    overflow-y: auto;
}

.events-directory .directory-item {
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--color-white);
}

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

.events-directory .directory-item.selected {
    background-color: var(--color-primary-50);
    border-left: 4px solid var(--color-primary-500);
    padding-left: calc(var(--space-4) - 4px);
}

.events-directory .directory-item.selected:hover {
    background-color: var(--color-primary-100);
}

.events-directory .col-date {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.events-directory .col-status {
    font-size: var(--font-size-sm);
    color: var(--color-muted);
}

.events-directory .directory-item.selected .col-date {
    color: var(--color-primary-dark);
    font-weight: var(--font-weight-semibold);
}

.events-directory .directory-item.selected .col-status {
    color: var(--color-primary-500);
}

/* Event Form Styles */
.event-details-card .ui-card__content { flex:1 1 auto; display:flex; flex-direction:column; padding:12px 14px 6px; overflow:auto; }

.event-form { padding: var(--space-1); flex:1 1 auto; height:auto; }

.event-form .form-group {
    margin-bottom: 0px;
}

.event-form .form-group.checkbox-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-bottom: 0px;
}

.event-form .checkbox-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-top: 0px;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    border: none;
}

.event-form .checkbox-group h3 {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.event-form .checkbox-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.event-form .checkbox-item:last-child {
    margin-bottom: 0;
}

.event-form .checkbox-item input[type="checkbox"] {
    margin-right: var(--space-3);
    transform: scale(1.1);
}

.event-form .checkbox-item label {
    margin: 0;
    font-weight: var(--font-weight-normal);
    cursor: pointer;
}

/* Input Group for Currency Display */
.input-group {
    display: flex;
    align-items: center;
}

.input-addon {
    background-color: var(--color-gray-100);
    border: 1px solid var(--color-border);
    border-right: none;
    padding: var(--space-3);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.input-group input {
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
    border-left: none !important;
}

/* No Results State */
.events-directory .no-results {
    padding: var(--space-8);
    text-align: center;
    color: var(--color-muted);
    font-style: italic;
}

/* No Event Selected State */
.no-selection {
    padding: var(--space-8);
    text-align: center;
    color: var(--color-muted);
    font-style: italic;
}

/* Responsive Layout for SWAT Events */
@media (max-width: 768px) {
    .events-directory .directory-header,
    .events-directory .directory-item {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
    
    .events-directory .col-status {
        font-size: var(--font-size-xs);
        margin-top: var(--space-1);
    }
}

/* Form Layout Improvements */
.event-form .form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    align-items: start;
}

/* Special layout for special message field - span full width */
.form-group-special-message {
    grid-column: 1 / -1;
}

/* Special layout for notes field - span full width and increase height */
.form-group-notes {
    grid-column: 1 / -1;
}

.form-group-notes textarea {
    min-height: 130px; /* 30% increase from rows="4" equivalent */
    padding: var(--space-3);
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-family: var(--font-family-base);
    transition: all 0.2s ease;
    background: white;
}

.form-group-notes textarea:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-100);
}

.form-group-notes textarea[readonly] {
    background: var(--color-gray-50);
    color: var(--color-muted);
    cursor: not-allowed;
}

.form-group-notes textarea:not([readonly]):not([disabled]) {
    background: white;
    border-color: var(--color-primary-300);
}

/* Checkbox grid layout (event options) */
.checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    align-items: center;
}

/* Ensure checkbox labels don't wrap text */
.checkbox-grid .checkbox-group {
    min-width: 0; /* Allow flex items to shrink */
}

.checkbox-grid .checkbox-label {
    white-space: nowrap;
}

/* Notes display for HTML content - match standard form input styling */
.notes-display {
    height: calc(4 * 1.5em + 24px); /* 4 rows of text at 1.5 line-height + padding */
    padding: var(--space-3);
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    background-color: var(--color-gray-50);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: 1.5;
    overflow-y: auto;
    overflow-x: hidden;
    color: var(--color-muted);
}

.notes-display p {
    margin: 0 0 var(--space-2) 0;
}

.notes-display p:last-child {
    margin-bottom: 0;
}

.notes-display ul,
.notes-display ol {
    margin: 0;
    padding-left: var(--space-4, 1.25rem);
    list-style-position: outside;
}

.notes-display strong, .notes-display b {
    font-weight: 600;
}

.notes-display em, .notes-display i {
    font-style: italic;
}

.notes-display br {
    line-height: 1.5;
}

/* Read-only RTE display (used in event notes, etc.) */
.ui-rte--display ul,
.ui-rte--display ol {
    margin: 0;
    padding-left: var(--space-4, 1.25rem);
    list-style-position: outside;
}

/* Event Registration Modal Formatting Updates */

/* Make the registration table match the directory table styling */
/* Event Registration table now uses pure ui-table defaults (compact padding via .ui-table--compact) */

/* Compact row height for registration table */
/* Allow natural compact height (remove fixed row height) */
.selected-players-list table tr { height:auto; }

/* Style the remove buttons */
.selected-players-list .btn-remove {
    background: none;
    border: none;
    color: var(--color-danger);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--border-radius-sm);
    transition: background-color 0.2s ease;
}

.selected-players-list .btn-remove:hover {
    background-color: var(--color-danger-light);
    color: var(--color-danger-dark);
}

/* Ensure the registration card matches fixed layout */
.event-registration-card {
    height: 742px; /* Fixed height to match app layout */
    min-height: 742px; /* Consistent with other cards */
}

.event-registration-card .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: calc(100% - 60px); /* Account for card header height */
}

.registration-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.selected-players-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 0; /* Remove bottom margin to use full height */
}

/* Time preference dropdown styling */
/* Time preference dropdown minimal styling */
.selected-players-list .time-pref-dropdown {
    width:100%;
    padding:0;
    border:0;
    background:transparent;
    color: var(--color-muted);
    font-size: var(--font-size-sm);
    font-family: inherit;
    font-style: italic;
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    cursor:pointer;
    outline:none;
}

.selected-players-list .time-pref-dropdown:focus {
    outline: none;
    background-color: var(--color-background-hover);
    border-radius: 4px;
    padding: 2px 4px;
}

.selected-players-list .time-pref-dropdown:hover {
    background-color: var(--color-background-hover);
    border-radius: 4px;
    padding: 2px 4px;
}

/* ===== EVENT REGISTRATION PAGE STYLES ===== */

/* Navigation Header */
.navigation-header {
    margin-bottom: var(--space-4);
}

/* Event Info Card */
.event-info-card {
    background: var(--color-white);
    border-radius: 12px;
    padding: var(--space-4);
    box-shadow: 0 4px 20px var(--color-shadow);
}

.event-info-section {
    width: 100%;
}

.event-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    align-items: center;
}

.event-info-grid .info-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.event-info-grid .info-item label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-muted);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.event-info-grid .info-item span {
    font-size: var(--font-size-base);
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}

/* ===== TEAM MANAGEMENT STYLES ===== */

/* Team Management Layout */
.team-management-container {
    display: grid;
    grid-template-columns: 40% 60%; /* 40% for players, 60% for teams */
    gap: 20px; /* Reduced gap to make more room */
    height: 742px; /* Fixed height for app-like layout */
    overflow: hidden;
}

/* Teams Header Dropdown Menu */
.dropdown {
    position: relative;
    display: inline-block;
}

.card-header-buttons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.dropdown-toggle {
    background: white;
    color: black;
    border: none;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 24px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.dropdown-toggle:hover {
    background: #f0f0f0;
    color: black;
}

.dropdown-toggle:focus {
    outline: none;
    background: #f0f0f0;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px; /* base radius; title bar menus override to 8px */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* base shadow; title bar menus override */
    min-width: 220px; /* Increased from 200px to accommodate "Update Status to Final" */
    z-index: 1000;
    padding: 8px 0;
    margin-top: 4px;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    color: #374e64;
    text-decoration: none;
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.dropdown-item:hover {
    background: #f3f4f6;
    color: #374e64;
    text-decoration: none;
}

.dropdown-item.disabled {
    color: #9ca3af;
    cursor: not-allowed;
    opacity: 0.6;
}

.dropdown-item.disabled:hover {
    background: transparent;
}

.dropdown-item.text-danger {
    color: #dc2626;
}

.dropdown-item.text-danger:hover {
    background: #fef2f2;
    color: #dc2626;
}

.dropdown-divider {
    height: 1px;
    background: #e5e7eb;
    border: none;
    margin: 4px 0;
}

/* Start Times Modal Styles */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    backdrop-filter: blur(2px);
}

.modal-overlay.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay .modal {
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-md {
    width: 500px;
}

.modal .modal-header {
    background: #374e64;
    color: white;
    padding: 16px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.modal .modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: white !important;
}

.modal .modal-body {
    padding: 24px;
}

.modal .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.modal .form-group {
    margin-bottom: 20px;
}

.modal .form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--color-muted);
    font-size: 14px;
}

.modal .form-group input,
.modal .form-group select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.2s ease;
}

.modal .form-group input:focus,
.modal .form-group select:focus {
    outline: none;
    border-color: #374e64;
    box-shadow: 0 0 0 3px rgba(55, 78, 100, 0.1);
}

.modal .form-group input[readonly] {
    background-color: #f9fafb;
    color: #6b7280;
    cursor: not-allowed;
}

.modal .modal-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-base, 1rem);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal .modal-btn-primary {
    background: #374e64;
    color: white;
}

.modal .modal-btn-primary:hover {
    background: #2d3e54;
}

.modal .modal-btn-secondary {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.modal .modal-btn-secondary:hover {
    background: #e5e7eb;
}

.left-column,
.right-column {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.left-column .card,
.right-column .card {
    height: 742px; /* Fixed height to match app layout */
}

.left-column .card-body,
.right-column .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: calc(100% - 60px); /* Account for card header */
}

/* Specific override for right column to allow teams grid scrolling */
.right-column .card-body {
    overflow: visible; /* Allow scrolling within child elements */
}

.registered-players-table-container {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    padding-bottom: 16px; /* Add bottom padding for spacing */
}

.right-column .card-body {
    flex: 1;
    overflow: visible; /* Allow scrolling within child elements */
    display: flex;
    flex-direction: column;
}

.teams-grid-container {
    height: 600px; /* Fixed height to ensure scrollbar appears */
    max-height: 600px; /* Consistent max height */
    overflow-y: auto;
    overflow-x: hidden; /* Prevent horizontal scroll */
    flex: 1 1 auto;
    padding: 8px; /* Add small padding for better appearance */
}

/* Teams card content container with fixed height for scrolling */
.teams-card .card-content {
    height: 680px; /* Use full available height minus padding */
    max-height: calc(100% - 20px); /* Consistent max height */
    overflow-y: auto;
    overflow-x: hidden; /* Prevent horizontal scroll */
    padding: 8px; /* Add small padding for better appearance */
}

/* Teams Grid */
.teams-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 teams per row instead of 3 */
    gap: 8px; /* Reduced gap to fit more teams */
    margin: 0;
    padding: 0;
    /* Stretch cards to match tallest card in each row */
    align-items: stretch;
    align-content: start;  /* Keep grid content pinned to start vertically */
    position: relative; /* Anchor for absolute-positioned drop indicator */
}

/* Team Card */
.team-card {
    background: #ffffff; /* White background */
    border: 1px solid #d1d5db; /* Light grey border */
    border-radius: 6px;
    /* decorative shadow removed by policy */
    transition: all 0.2s ease;
    min-width: 0; /* Allow cards to shrink below content width */
    /* Stretch to row height so all cards match tallest in the row */
    align-self: stretch;
    display: flex;
    flex-direction: column;
    position: relative; /* For vertical insert indicator positioning */
}

/* Hover shadow intentionally removed to match no-shadow policy */

/* Drag and Drop Styles */
.team-drag-handle {
    cursor: move; /* unified cross/move cursor */
}

.team-drag-handle:active {
    cursor: move;
}

.team-card.team-dragging { opacity: 0.6; z-index: 1; position: relative; }

/* Visual insertion indicators for team reorder */
.team-card.drag-over-before { box-shadow: inset 0 3px 0 0 #374e64; }
.team-card.drag-over-after { box-shadow: inset 0 -3px 0 0 #374e64; }

/* Single large vertical drop indicator (absolutely positioned in grid) */
.team-insert-indicator {
    position: absolute;
    background: #2563eb; /* Blue */
    border-radius: 3px;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
    z-index: 2;
    pointer-events: none;
}

/* Slight visual nudge without reflow */
.teams-grid .team-card.insert-left { transform: translateX(4px); }
.teams-grid .team-card.insert-right { transform: translateX(-4px); }

/* Placeholder bar to show drop target between cards */
/* Placeholder no longer used for teams grid; keep class harmless if present */
.team-reorder-placeholder { display: none; }

.team-header {
    display: flex;
    flex-direction: column;
    padding: 2px 4px; /* tighter header padding to reduce overall height */
    border-bottom: 1px solid #e5e7eb; /* Light grey divider line */
    background: #ffffff; /* White background */
    border-radius: 6px 6px 0 0;
    position: relative;
}

/* Line 1: Team #, Start Time (centered), Trash Icon */
.team-header-line1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px; /* reduce gap between header rows */
}

.team-number {
    font-size: 13px;
    font-weight: 600;
    color: #2d3748;
    flex: 0 0 auto;
}

.team-start-time-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.team-time-slot.clickable {
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 2px 6px;
    border-radius: 4px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    font-weight: 500;
    min-width: 60px;
    text-align: center;
    display: inline-block;
}

.team-time-slot.clickable:hover {
    background-color: #e2e8f0;
    border-color: #cbd5e0;
    transform: scale(1.05);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.team-time-slot.clickable:active {
    transform: scale(0.98);
    background-color: #cbd5e0;
}

.team-header-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}

/* Line 2: Stats */
.team-header-line2 {
    display: flex;
    justify-content: center;
}

.team-title {
    margin: 0;
    font-size: 13px; /* Slightly smaller font for narrower cards */
    font-weight: 600;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 6px; /* Reduced gap */
}

.team-time-slot {
    font-size: 10px; /* Same size as other stats */
    padding: 1px 4px; /* Same padding as other stats */
    background: #f8fafc; /* Same background as other stats */
    border-radius: 3px;
    color: #4a5568;
    white-space: nowrap;
    min-width: fit-content;
}

.team-time-slot.clickable {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.team-time-slot.clickable:hover {
    background-color: #374e64;
    color: white;
    transform: scale(1.05);
    border: 1px solid #2d3e54;
}

/* Chip-based roster header stats (new) */
.team-stats-chips { display:flex; gap:6px; justify-content:center; padding-top:0; /* tighter spacing under line1 */ }
.team-stat-chip { font-size:11px; }
.team-time-chip { display:inline-flex; }
.team-time-chip:focus-visible { outline:2px solid var(--color-primary-500,#3b82f6); outline-offset:2px; }
.team-time-chip.ui-chip--interactive:hover { box-shadow:0 0 0 3px rgba(59,130,246,0.15); }
/* Match stat chip hover/focus visuals to time chip for parity */
.team-stat-chip:focus-visible { outline:2px solid var(--color-primary-500,#3b82f6); outline-offset:2px; }
.team-stat-chip.ui-chip--interactive:hover { box-shadow:0 0 0 3px rgba(59,130,246,0.15); }
/* Normalize inner time span so it doesn't render a second pill */
.team-time-chip .team-time-slot { 
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    min-width: 0;
    display: inline;
}

/* Edit team time modal form styling */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: var(--color-muted);
}

.form-control {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
    background-color: white;
    transition: border-color 0.2s ease;
}

.form-control:focus {
    outline: none;
    border-color: #374e64;
    box-shadow: 0 0 0 2px rgba(55, 78, 100, 0.1);
}

.team-stats {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.team-stat {
    font-size: 10px; /* Smaller stats text for narrower cards */
    padding: 1px 4px; /* Reduced padding */
    background: #f8fafc; /* Lighter grey background */
    border-radius: 3px;
    color: #4a5568;
}

.team-header-actions {
    display: flex;
    gap: 4px; /* Reduced gap for narrower cards */
    align-items: center;
    justify-content: flex-end;
}

/* Team stats styling */

.add-position-btn {
    background: none;
    border: none;
    color: #38a169;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 14px;
}

.add-position-btn:hover {
    background: #c6f6d5;
    color: #2f855a;
    transform: scale(1.1);
}

.delete-team-btn {
    background: none;
    border: none;
    color: #e53e3e;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 14px;
}

.delete-team-btn:hover {
    background: #fed7d7;
    color: #c53030;
    transform: scale(1.1);
}

/* Team Players Container - simplified approach */
.team-players-container {
    padding: 1px 4px 1px 4px; /* tighter vertical padding inside roster */
    min-height: 120px;
    position: relative;
    background: #ffffff; /* White background */
    border-radius: 0 0 6px 6px;
    flex: 1 1 auto; /* allow the roster area to stretch and fill card height */
}

/* Individual team player styling */
.team-player {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1px 4px; /* tighter row padding */
    margin-bottom: 0; /* remove extra space between rows */
    background: #f9fafb; /* Light grey background */
    border: 1px solid #e5e7eb; /* Light grey border */
    border-radius: 4px;
    cursor: move;
    transition: all 0.2s ease;
    position: relative;
    max-height: 26px; /* allow enough vertical room for descenders (g, y, p, q, j) */
    font-size: 12px;
}

.team-player .player-name {
    color: var(--color-text-light) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; /* fill width of .player-info so ellipsis works */
    width: 100%;
    max-width: 100%;
}

.team-player:hover {
    background: #f3f4f6; /* Slightly darker grey on hover */
    border-color: #d1d5db; /* Darker grey border on hover */
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.team-player.dragging {
    opacity: 0.5;
    transform: rotate(1deg);
}

.player-info {
    display: flex;
    align-items: center; /* Ensure vertical centering of indicator */
    gap: 4px; /* Reduced gap for narrower cards */
    flex: 1;
    min-width: 0; /* allow flex child to shrink so ellipsis can apply */
}

/* Right side of player row: time pref, points, delete */
.team-player .player-right {
    display: grid;
    grid-auto-flow: column;
    /* Fixed tracks to align columns across all rows */
    grid-template-columns: 18px 3ch 12px; /* time (18 incl. spacer), pts (tabular width), X (narrow) */
    column-gap: 0; /* keep points and X touching visually */
    align-items: center;
}
/* Ensure consistent column assignment whether or not the icon exists */
.team-player .player-right .time-pref-indicator { grid-column: 1; }
.team-player .player-right .player-pts-avg { grid-column: 2; justify-self: end; }
.team-player .player-right .remove-player-btn.team-remove { grid-column: 3; justify-self: end; }

/* Scope roster icon to avoid global overrides and ensure centering */
.team-player .time-pref-indicator {
    background: #4299e1;
    color: white;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    font-size: 10px; /* increased from 8px */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    line-height: 14px;
    margin: 0 !important; /* prevent late global margins from shifting alignment */
    justify-self: center;
    align-self: center;
}

.time-pref-indicator.right-align {
    margin-right: 6px;
    margin-left: 4px;
}

/* Ensure single-line vertical centering for player name text */
.team-player .player-name {
    line-height: 16px; /* slightly larger line-height to avoid clipping descenders */
}

/* Fix widths so columns align across rows */
.team-player .player-pts-avg {
    width: 3ch; /* reserve space for up to 3 digits */
    text-align: right;
    /* Use proportional numbers so digits render with natural spacing like directory */
    font-variant-numeric: proportional-nums;
    font-size: 14px;
}

.team-player .remove-player-btn.team-remove {
    width: 12px;
    height: 18px;
    padding: 0; /* center icon within fixed slot */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Drop zones between players */
.team-drop-zone {
height: 28px;
margin: -11px 0; /* tighter inter-row spacing without changing card height */
border-radius: 6px;
background: transparent;
border: none;
transition: all 0.3s ease;
opacity: 0;
    cursor: default;
    pointer-events: none; /* let player rows receive drag interactions */
display: flex;
align-items: center;
justify-content: center;
}

.team-drop-zone.drag-over {
    background: rgba(66, 153, 225, 0.4);
    border: 2px dashed rgba(66, 153, 225, 0.7);
    height: 32px;
    opacity: 1;
    box-shadow: 0 4px 12px rgba(66, 153, 225, 0.5);
    transform: scaleY(1.5);
    cursor: pointer;
}

/* Empty team container */
.team-empty-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    border: 2px dashed #cbd5e0;
    border-radius: 6px;
    background: #f7fafc;
    transition: all 0.2s ease;
    cursor: pointer;
}

.team-empty-container:hover,
.team-empty-container.drag-over {
    border-color: #4299e1;
    background: #ebf8ff;
    border-style: solid;
}

.empty-team-message {
    text-align: center;
    color: #718096;
}

.empty-team-message i {
    font-size: 36px;
    margin-bottom: 8px;
    color: #cbd5e0;
    display: block;
}

.empty-team-message p {
    margin: 4px 0;
    font-size: 14px;
    font-weight: 500;
}

.team-capacity {
    font-size: 12px;
    color: #a0aec0;
    font-weight: normal;
}

/* Remove player button */
.remove-player-btn.team-remove {
    background: none;
    border: none;
    color: #e53e3e;
    cursor: pointer;
    padding: 1px 2px; /* even tighter to reduce distance from points */
    border-radius: 4px;
    opacity: 0; /* hidden by default */
    transition: all 0.2s ease;
    font-size: 12px;
}

.remove-player-btn.team-remove:hover {
    opacity: 1;
    background: #fed7d7;
    color: #c53030;
}

/* Show delete X on hover of row */
.team-player:hover .remove-player-btn.team-remove {
    opacity: 1;
}

/* Hide points on hover to make space for X */
.team-player:hover .player-pts-avg {
    opacity: 0;
}

/* Team stats styling */

/* Solid-line drop indicator for player insert (horizontal) */
.team-players-container { position: relative; }
.player-insert-indicator {
    position: absolute;
    left: 4px;
    right: 4px;
    height: 4px;
    background: #2563eb;
    border-radius: 2px;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.12);
    display: none;
    pointer-events: none;
    z-index: 1;
}

.team-time-slot {
    font-size: 12px;
    font-weight: 500;
    color: #4299e1;
    background: #ebf8ff;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #bee3f8;
}

.team-stats {
    display: flex;
    gap: 8px;
}

.team-stat {
    font-size: 11px;
    padding: 2px 6px;
    background: #e2e8f0;
    border-radius: 3px;
    color: #4a5568;
    font-weight: 500;
}

/* Remove Position Button */
.remove-position-btn {
    background: none;
    border: none;
    color: #e53e3e;
    cursor: pointer;
    padding: 2px;
    border-radius: 2px;
    opacity: 0.6;
    transition: all 0.2s ease;
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 12px;
}

.remove-position-btn:hover {
    opacity: 1;
    background: #fed7d7;
    color: #c53030;
}

.team-placeholder {
    position: relative;
}

/* Time Preference Indicator */
.time-pref-indicator {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: #4299e1;
    color: white;
    border-radius: 50%;
    font-size: 10px;
    text-align: center;
    line-height: 16px;
    margin-left: 6px;
    font-weight: bold;
}

/* Treasurer Indicator (reuses time-pref-indicator size slot) */
.treasurer-indicator {
    background: var(--color-primary-dark);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    width: 14px; /* slightly larger for clearer circle */
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    border-radius: 50%;
    font-size: 10px;
    line-height: 1; /* flex centers text */
    box-sizing: border-box;
}
/* Slightly larger in team rosters modal context where horizontal space is wider */
#teamRostersContainer .treasurer-indicator {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    font-size: 11px;
}
.treasurer-indicator-empty { /* reserve space but keep fully invisible */
    display: inline-block;
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    visibility: hidden; /* remove visible circle */
}

/* Treasurer toggle button (appears on hover similar to remove button) */
.team-player .treasurer-player-btn {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 0 0 2px;
    width: 16px;
    height: 16px;
    display: none; /* revealed on hover */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-primary-dark);
    border-radius: 3px;
    font-size: 10px;
    line-height: 1;
    position: relative;
}
.team-player:hover .treasurer-player-btn { display: inline-flex; }
.team-player .treasurer-player-btn .treasurer-icon-symbol { font-weight: 700; }
.team-player .treasurer-player-btn.active-treasurer { color: #fff; background: var(--color-primary-dark); }
.team-player .treasurer-player-btn:hover:not(:disabled):not(.active-treasurer) { background: var(--color-primary-100); color: var(--color-primary-dark); }
.team-player .treasurer-player-btn.active-treasurer:hover:not(:disabled) { background: var(--color-primary-500); }
.team-player .treasurer-player-btn:disabled { opacity: .5; cursor: default; }
.team-player .treasurer-player-btn.working { opacity: .6; }

/* Drag and Drop States */
.drop-zone {
    transition: all 0.2s ease;
}

.drop-zone.drag-over {
    background: #ebf8ff;
    border: 2px dashed #4299e1;
}

.draggable-player {
    cursor: move;
    transition: all 0.2s ease;
}

.draggable-player:hover {
    background: #f7fafc;
}

.draggable-player.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

/* Empty States */
.empty-team-message {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #718096;
    text-align: center;
}

.empty-teams-state .help-text {
    font-size: 13px;
    color: #a0aec0;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .team-management-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .teams-grid {
        grid-template-columns: repeat(4, 1fr); /* Keep 4 teams even on smaller screens */
        gap: 6px;
    }
}

@media (max-width: 900px) {
    .teams-grid {
        grid-template-columns: repeat(3, 1fr); /* Drop to 3 teams on tablets */
        gap: 8px;
    }
    
    .dropdown-menu {
        right: auto;
        left: 0;
        min-width: 160px;
    }
    
    .modal-md {
        width: 90vw;
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    .team-management-container {
        height: auto;
        overflow: visible;
    }
    .left-column,
    .right-column {
        height: auto;
    }
    .registered-players-table-container {
        overflow-y: visible;
        max-height: 400px;
    }
    .teams-grid-container {
        max-height: 400px;
        overflow-y: auto;
    }
    .teams-grid {
        grid-template-columns: 1fr;
    }
    
    .dropdown-item {
        font-size: 16px; /* Larger touch targets */
        padding: 12px 16px;
    }
    
    .modal .modal-body {
        padding: 16px;
    }
    
    .modal .modal-footer {
        padding: 12px 16px;
        flex-direction: row;
        justify-content: space-between;
        gap: 8px;
    }
    
    .modal .modal-btn {
        flex: 1;
        padding: 12px 16px;
    }
}

/* ====================================================================== */
/* TEAM MANAGEMENT REGISTERED PLAYERS TABLE STYLES                      */
/* ====================================================================== */

/* Specific styles for the registered players table in team management */
.registered-players-table-container .player-table-wrapper {
    max-height: calc(100vh - 250px); /* Fill available card height, adjust as needed */
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: none;
}

/* Team management registered players table alignment fixes */
.registered-players-table th.team-column,
.registered-players-table td.team-column {
    display: table-cell !important;
    text-align: center !important;
    vertical-align: middle !important;
    width: 48px;
    min-width: 48px;
}

.registered-players-table th.stats-column,
.registered-players-table td.stats-column {
    display: table-cell !important;
    text-align: center !important;
    vertical-align: middle !important;
    width: 60px;
    min-width: 60px;
    font-weight: 600;
}

.registered-players-table th.player-name-column,
.registered-players-table td.player-name {
    display: table-cell !important;
    text-align: left !important;
    vertical-align: middle !important;
}

/* WL$ column */
.registered-players-table th.wld-column,
.registered-players-table td.wld-column {
    display: table-cell !important;
    text-align: center !important;
    vertical-align: middle !important;
    width: 80px;
    min-width: 80px;
    /* Use proportional numbers so it doesn't appear monospaced like tabular digits */
    font-variant-numeric: proportional-nums;
}

/* Ensure all cells have consistent padding and alignment */
.registered-players-table th,
.registered-players-table td {
    padding: var(--space-3) !important;
    vertical-align: middle !important;
    height: 40px !important;
    line-height: 1.2 !important;
}

/* Prevent text selection on key columns to reduce accidental highlighting during drag */
.registered-players-table th.team-column,
.registered-players-table th.player-name-column,
.registered-players-table th.stats-column,
.registered-players-table th.wld-column,
.registered-players-table td.team-column,
.registered-players-table td.player-name,
.registered-players-table td.stats-column,
.registered-players-table td.wld-column {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Notification System Styles - DEPRECATED: Now using count box format */
/* 
.card-header-notifications {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 8px;
}
*/

.btn-notification {
    position: relative;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

.btn-notification:hover {
    background: #c82333;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4);
}

.notification-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #fff;
    color: #dc3545;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #dc3545;
    min-width: 18px;
}

/* Notifications Modal styles centralized in notices.modal.css */

/* Team Rosters Modal Styles */
.modal-header-dark {
    background: #1e3a8a !important; /* Dark blue */
    color: white !important;
}

.modal-header-dark h3 {
    color: white !important;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.modal-header-dark .modal-close {
    color: white !important;
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-header-dark .modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.team-rosters-container {
    max-height: 500px;
    overflow-y: auto;
    font-family: var(--font-family-primary);
}

.roster-team {
    margin-bottom: 24px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 16px;
}

.roster-team:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.roster-team-header {
    font-weight: bold;
    margin-bottom: 8px;
    color: #1e40af;
    font-size: 1.1rem;
}

.roster-team-stats {
    color: #6b7280;
    font-size: 0.95rem;
    margin-left: 2rem;
}

.roster-player {
    margin-left: 2rem;
    padding: 2px 0;
    font-size: 0.95rem;
    display: flex;
    justify-content: space-between;
}

.roster-player-name {
    flex: 1;
}

.roster-player-color {
    color: #6b7280;
    font-weight: bold;
    min-width: 30px;
    text-align: right;
}

.loading-state {
    text-align: center;
    padding: 40px;
    color: #6b7280;
}

.loading-state i {
    font-size: 24px;
    margin-bottom: 12px;
}

.modal-lg {
    max-width: 700px;
}

/* Stats modal footer layout */
.modal-footer-left {
    display: flex;
    gap: var(--space-3);
}

.modal-footer-right {
    display: flex;
    gap: var(--space-3);
}

/* ========================================
   STANDARDIZED MODAL SYSTEM
   Based on All Stats Modal Design
   ======================================== */

/* Standard Modal Container */
.standard-modal {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Standard Modal Header */
.standard-modal-header {
    background: var(--color-primary-dark) !important;
    color: white !important;
    border-bottom: 1px solid var(--color-primary-dark) !important;
    padding: var(--space-4) var(--space-6) !important;
    text-align: center !important;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.standard-modal-header .modal-title {
    color: white !important;
    margin: 0 !important;
    font-weight: var(--font-weight-bold) !important;
    text-transform: uppercase !important;
    font-size: var(--font-size-lg) !important;
    padding: 0 !important;
}

/* Standard Modal Body */
.standard-modal-body {
    padding: var(--space-6);
    overflow-y: auto;
    flex-grow: 1;
}

/* Standard Modal Footer */
.standard-modal-footer {
    padding: var(--space-4) var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    border-top: 1px solid var(--color-border-light);
    background: var(--color-white);
    min-height: 70px;
    flex-shrink: 0;
}

.standard-modal-footer-left {
    display: flex;
    gap: var(--space-3);
}

.standard-modal-footer-right {
    display: flex;
    gap: var(--space-3);
}

/* Ensure button variants render correctly inside standardized modals (override any conflicting resets) */
.standard-modal .btn-danger {
    background-color: var(--color-error) !important;
    border: 2px solid var(--color-error) !important;
    color: var(--color-white) !important;
}
.standard-modal .btn-danger:hover:not(:disabled) {
    background-color: #c0392b !important;
    border-color: #c0392b !important;
}
.standard-modal .btn-secondary {
    background-color: transparent !important;
    color: var(--color-text) !important;
    border: 2px solid var(--color-gray-300) !important;
}
.standard-modal .btn-secondary:hover:not(:disabled) {
    background-color: var(--color-gray-100) !important;
    border-color: var(--color-gray-400) !important;
}

/* Warning modal variant header color tweak */
.standard-modal.warning-modal .standard-modal-header {
    background: var(--color-error) !important;
    border-bottom-color: var(--color-error) !important;
}

/* Player average points styling in team roster cards */
.player-pts-avg {
    color: var(--color-primary-300, #93c5fd);
    font-weight: 500;
}

/* SWAT Results Modal */
#swatResultsModal .results-teams-header,
#swatResultsModal .result-team-summary {
    display: grid;
    /* 8 columns: Team(25%), Spacer(5%), Out(10%), In(10%), Total(15%), W/L(15%), Team Pts(10%), Exp Pts(10%) */
    grid-template-columns: 25% 5% 10% 10% 15% 15% 10% 10%;
    gap: 0; /* ensure continuous vertical borders */
    align-items: center;
    font-size: 16px;
    padding: 10px; /* taller row height */
    min-height: 44px; /* row height target */
}
#swatResultsModal .results-teams-header {
    font-weight: 600;
    border-bottom: 1px solid var(--ui-table-border, var(--color-gray-200));
    background: var(--ui-table-header-bg, var(--color-gray-50));
    text-transform: uppercase;
    font-size: calc(var(--ui-table-font-size, 16px) * 0.75);
}
#swatResultsModal .results-teams-list .result-team:nth-child(even) .result-team-summary { background: #fff; }
#swatResultsModal .result-team-summary { cursor: pointer; user-select: none; border-bottom: 1px solid var(--ui-table-border, var(--color-gray-200)); background:#fff; }
#swatResultsModal .result-team-summary:hover { background: var(--color-gray-50); }
#swatResultsModal .caret { font-size: 10px; line-height:1; }
#swatResultsModal .result-team-players {
    background: var(--color-gray-50, #f1f5f9);
    padding: 6px 0 10px 0;
    border-top: 1px solid var(--ui-table-border, var(--color-gray-200));
}
#swatResultsModal .result-player-header {
    display: grid;
    /* Mirror 8-column team grid for alignment */
    grid-template-columns: 25% 5% 10% 10% 15% 15% 10% 10%;
    gap: 0;
    font-size: calc(var(--ui-table-font-size, 16px) * 0.75);
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 10px;
    min-height: 20px;
    background: var(--ui-table-header-bg, var(--color-gray-50));
}
#swatResultsModal .result-player-header { user-select: none; cursor: default; }

#swatResultsModal .result-player-row {
    display: grid;
    grid-template-columns: 25% 5% 10% 10% 15% 15% 10% 10%;
    gap: 0;
    font-size: 16px; /* increased for readability */
    padding: 4px 10px; /* slightly more vertical padding */
    min-height: 26px; /* accommodate larger font */
    background: #f9fafb;
}
#swatResultsModal .result-player-row { user-select: none; cursor: default; }
#swatResultsModal .rt-teampts, #swatResultsModal .rt-exppts, #swatResultsModal .rp-teampts, #swatResultsModal .rp-exppts { text-align:center; font-weight:400; }
/* Full-height WL vertical rule using ::before/::after to avoid grid gap issues */
.results-table .results-teams-header .rh-wl,
.results-table .result-team-summary .rt-wl { position: relative; }
.results-table .results-teams-header .rh-wl::before,
.results-table .result-team-summary .rt-wl::before,
.results-table .result-team-summary .rt-wl::after { content:""; position:absolute; top:0; bottom:0; width:2px; background: var(--ui-table-border, var(--color-gray-200)); }
.results-table .results-teams-header .rh-wl::before,
.results-table .result-team-summary .rt-wl::before { left:-1px; }
.results-table .result-team-summary .rt-wl::after { right:-1px; }
#swatResultsModal .results-teams-header .rh-wl::after { content:""; position:absolute; top:0; bottom:0; width:2px; right:-1px; background: var(--ui-table-border, var(--color-gray-200)); }
#swatResultsModal .results-teams-header { padding-left:10px !important; padding-right:10px !important; }
#swatResultsModal .result-player-header { padding-left:10px !important; padding-right:10px !important; }
#swatResultsModal .result-player-row:nth-child(even){ background: #f1f5f9; }
#swatResultsModal .rp-name { overflow:hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 8px; }
#swatResultsModal .rt-team { display:flex; align-items:center; justify-content:space-between; gap:8px; }
#swatResultsModal .rt-team .rt-team-label {
    font-weight: var(--font-weight-semibold, 600);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
#swatResultsModal .rp-points, #swatResultsModal .rp-bet { text-align: center !important; }
/* Center new player stat columns */
#swatResultsModal .rp-ptsl10, #swatResultsModal .rp-wldollars { text-align: center !important; }
/* Center alignment for player header (except Player name) */
#swatResultsModal .result-player-header .ph-points,
#swatResultsModal .result-player-header .ph-ptsl10,
#swatResultsModal .result-player-header .ph-bet,
#swatResultsModal .result-player-header .ph-wldollars { text-align:center; }
/* Place Player at col 1; align Pts with Out (col 3), Pts L10 with In (col 4), Bet with Total (col 5), WL$ with W/L (col 6) */
#swatResultsModal .result-player-header .ph-name { grid-column: 1 / 2; }
#swatResultsModal .result-player-header .ph-points { grid-column: 3 / 4; }
#swatResultsModal .result-player-header .ph-ptsl10 { grid-column: 4 / 5; }
#swatResultsModal .result-player-header .ph-bet { grid-column: 5 / 6; }
#swatResultsModal .result-player-header .ph-wldollars { grid-column: 6 / 7; }
/* Payouts-mode header mapping: two empty columns then Bet/WL Ways/WL $ */
#swatResultsModal .result-player-header .ph-empty2 { grid-column: 2 / 3; }
#swatResultsModal .result-player-header .ph-empty3 { grid-column: 3 / 4; }
#swatResultsModal .result-player-header .ph-wlways { grid-column: 6 / 7; }

#swatResultsModal .result-player-row .rp-name { grid-column: 1 / 2; }
#swatResultsModal .result-player-row .rp-points { grid-column: 3 / 4; text-align:center !important; }
#swatResultsModal .result-player-row .rp-ptsl10 { grid-column: 4 / 5; text-align:center !important; }
#swatResultsModal .result-player-row .rp-bet { grid-column: 5 / 6; text-align:center !important; }
#swatResultsModal .result-player-row .rp-wldollars { grid-column: 6 / 7; text-align:center !important; }
/* Italicize scoring view columns: Pts L10 (player) and Exp Pts (team) */
#swatResultsModal .result-player-header .ph-ptsl10,
#swatResultsModal .result-player-row .rp-ptsl10,
#swatResultsModal .results-teams-header .rh-exppts,
#swatResultsModal .result-team-summary .rt-exppts { font-style: italic; }
/* Payouts-mode rows: two empty columns then Bet/WL Ways/WL $ */
#swatResultsModal .result-player-row .rp-empty2 { grid-column: 2 / 3; }
#swatResultsModal .result-player-row .rp-empty3 { grid-column: 3 / 4; }
#swatResultsModal .result-player-row .rp-wlways { grid-column: 6 / 7; text-align:center !important; }

/* Make Total column bold */
#swatResultsModal .result-team-summary .rt-total,
#swatResultsModal .result-player-row .rp-total { font-weight:700; }
#swatResultsModal .results-loading { padding: 20px; text-align: center; font-size: 16px; }
/* Alignment & sizing adjustments per new requirements */
#swatResultsModal.standard-modal { width: 960px; max-width: 960px; height:750px; display:flex; flex-direction:column; }
#swatResultsModal .standard-modal-body { flex:1 1 auto; overflow-y:auto; overflow-x:hidden; }
/* Center align numeric/stat columns */
#swatResultsModal .results-teams-header .rh-out,
#swatResultsModal .results-teams-header .rh-in,
#swatResultsModal .results-teams-header .rh-total,
#swatResultsModal .results-teams-header .rh-wl,
#swatResultsModal .results-teams-header .rh-teampts,
#swatResultsModal .result-team-summary .rt-out,
#swatResultsModal .result-team-summary .rt-in,
#swatResultsModal .result-team-summary .rt-total,
#swatResultsModal .result-team-summary .rt-wl,
#swatResultsModal .result-team-summary .rt-teampts,
#swatResultsModal .result-player-row .rp-points,
#swatResultsModal .result-player-row .rp-ptsl10,
#swatResultsModal .result-player-row .rp-bet,
#swatResultsModal .result-player-row .rp-wldollars,
#swatResultsModal .results-teams-header .rh-exppts,
#swatResultsModal .result-team-summary .rt-exppts,
#swatResultsModal .result-player-row .rp-teampts,
#swatResultsModal .result-player-row .rp-exppts { text-align: center !important; }

#swatResultsModal .results-teams-header .rh-teampts,
#swatResultsModal .result-team-summary .rt-teampts,
#swatResultsModal .result-player-row .rp-teampts {
    padding-left: 12px;
}
#swatResultsModal .expand-all-caret { cursor:pointer; user-select:none; font-size:14px; display:flex; align-items:center; justify-content:center; width:28px; height:28px; line-height:1; }
#swatResultsModal .expand-all-caret:focus { outline:2px solid var(--color-primary-300); outline-offset:2px; border-radius:4px; }
/* Player points & bet override to center (previously left) */
#swatResultsModal .rp-points, #swatResultsModal .rp-bet { text-align:center !important; }

/* Highlight animation for targeted player row */
#swatResultsModal .result-player-row.highlight-player {
    position: relative;
    animation: swatPlayerHighlight 2.4s ease-out 0s 1;
    box-shadow: 0 0 0 0 rgba(34,197,94,0.7); /* initial for animation */
    background: linear-gradient(90deg, #d1fae5 0%, #e6f2ff 60%);
}
@keyframes swatPlayerHighlight {
    0% { background: #bbf7d0; box-shadow: 0 0 0 4px rgba(34,197,94,0.35); }
    40% { background: #d1fae5; box-shadow: 0 0 0 2px rgba(34,197,94,0.25); }
    70% { background: #e6f2ff; box-shadow: 0 0 0 1px rgba(34,197,94,0.15); }
    100% { background: #e6f2ff; box-shadow: none; }
}

/* W/L Ways conditional coloring */
#swatResultsModal .rt-wl.wl-pos { color: #15803d; font-weight: 700; } /* green */
#swatResultsModal .rt-wl.wl-neg { color: #b91c1c; font-weight: 700; } /* red */
#swatResultsModal .rt-wl.wl-zero { color: #000000; font-weight: 700; } /* black */
/* Player WL$ values use default text color (no bold) */
#swatResultsModal .rp-wldollars.wl-pos { color: inherit; font-weight: 400; }
#swatResultsModal .rp-wldollars.wl-neg { color: inherit; font-weight: 400; }
#swatResultsModal .rp-wldollars.wl-zero { color: inherit; font-weight: 400; }

/* Size variants for standard modals */
.standard-modal.modal-sm {
    width: 400px;
    max-width: 400px;
}

.standard-modal.modal-md {
    width: 600px;
    max-width: 600px;
}

.standard-modal.modal-lg {
    width: 800px;
    max-width: 800px;
}

.standard-modal.modal-xl {
    width: 1200px;
    max-width: 1200px;
}
/* 50% wider variant than modal-md (600px -> 900px) */
.standard-modal.modal-md-150 {
    width: 900px;
    max-width: 900px;
}

/* 25% wider than md-150 (~900px -> 1125px) for expanded statement editor */
.standard-modal.modal-md-190 {
    width: 1125px;
    max-width: 1125px;
}

/* Standard progress modal size (centralized for all long-running job progress) */
.standard-modal.modal-progress {
    width: 520px;
    max-width: 520px;
}

/* Team Rosters Modal Specific Styles */
.team-rosters-container-wide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-height: 70vh;
    overflow-y: auto; /* Single scroll bar for entire content */
    overflow-x: hidden; /* Prevent horizontal scroll */
    padding: 10px;
}

.team-rosters-column {
    display: flex;
    flex-direction: column;
    overflow: visible; /* Remove individual column scroll bars */
    height: auto; /* Let content determine height */
}

/* Override for team rosters in modal */
.team-rosters-container-wide .team-roster-item {
    margin-bottom: 10px; /* Reduced from 15px */
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: visible; /* Allow content to expand */
    min-height: auto; /* Let height adjust to content */
}

.team-rosters-container-wide .team-roster-header {
    background: #f8f9fa;
    padding: 8px 12px; /* Reduced padding */
    font-weight: bold;
    border-bottom: 1px solid #e5e7eb;
}

.team-rosters-container-wide .team-roster-players {
    padding: 8px 12px; /* Reduced padding to match header */
    min-height: auto; /* Ensure it expands for content */
    height: auto; /* Explicit auto height */
    flex: 1; /* Allow it to expand */
}

/* Ensure team roster items don't have height restrictions */
.team-rosters-container-wide .team-roster-item * {
    height: auto !important;
    max-height: none !important;
}

/* Override modal body scroll for team rosters modal */
#teamRostersModal .standard-modal-body,
#teamRostersOverlay .standard-modal-body {
    overflow: hidden; /* Prevent modal body scroll */
    padding: var(--space-4); /* Slightly reduce padding */
}

/* PDF preview now uses StandardModal via PageModals; legacy overlay removed */

/* Responsive adjustments for standard modals */
@media (max-width: 768px) {
    .standard-modal {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: var(--space-2);
    }
    
    .standard-modal-header {
        padding: var(--space-3) var(--space-4) !important;
        min-height: 50px;
    }
    
    .standard-modal-header .modal-title {
        font-size: var(--font-size-base) !important;
    }
    
    .standard-modal-body {
        padding: var(--space-4);
    }
    
    .standard-modal-footer {
        padding: var(--space-3) var(--space-4);
        min-height: 60px;
        flex-direction: column-reverse;
        gap: var(--space-2);
    }
    
    .standard-modal-footer-left,
    .standard-modal-footer-right {
        width: 100%;
        justify-content: center;
    }
}

/* (Legacy Team Round Times modal styles removed – replaced by PageModals implementation) */

/* ==============================================================================
   AUTO-REFRESH FUNCTIONALITY STYLES
   ============================================================================== */

/* Auto-refresh menu item styling */
#autoRefreshMenuItem.text-success {
    color: #28a745 !important;
    font-weight: 500;
}

#autoRefreshMenuItem.text-muted {
    color: #6c757d !important;
}

#autoRefreshMenuItem:hover {
    background-color: #f8f9fa;
}

/* Auto-refresh indicator styling */
.auto-refresh-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(40, 167, 69, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    z-index: 10000;
    opacity: 0.9;
    transition: opacity 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.auto-refresh-indicator i {
    margin-right: 6px;
    animation: spin 1s linear infinite;
}

/* Teams header refresh animation */
.teams-header.refreshing {
    transition: opacity 0.2s ease;
}

/* Spinning animation for refresh icons */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Dropdown menu item with icon spacing */
.dropdown-item i {
    width: 16px;
    margin-right: 8px;
    text-align: center;
}

/* Ensure dropdown stays visible during interaction */
.dropdown.show .dropdown-menu {
    display: block;
}

/* Auto-refresh status in dropdown */
.dropdown-item.auto-refresh-enabled {
    background-color: #e8f5e8;
    border-left: 3px solid #28a745;
}

.dropdown-item.auto-refresh-enabled:hover {
    background-color: #d1f2d1;
}

/* ==============================================================================
   TEMPORARY POINTS MODAL STYLES
   ============================================================================== */

/* Temporary points modal specific styling */
.temp-points-modal .modal-body {
    padding: var(--space-6) var(--space-6) var(--space-4) var(--space-6);
}

/* Form message styling */
.temp-points-form .form-message {
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    background-color: #f8f9fa;
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
}

.temp-points-form .form-message p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.5;
    font-size: var(--font-size-sm);
}
/* Match Create Teams input width for Temporary Points modal */
.temp-points-modal .standard-modal-body #tempPointsInput,
.temp-points-modal .modal-body #tempPointsInput {
    width: 130px !important;
    max-width: 130px !important;
    display: inline-block;
}

/* Recommended temp points bullet list */
.temp-points-form .temp-points-reco-list {
    margin: var(--space-2) 0 0 var(--space-4);
    padding-left: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.temp-points-form .temp-points-reco-list li { margin: 2px 0; }

/* Form group styling */
.temp-points-form .form-group {
    margin-bottom: 0;
}

.temp-points-form .form-label {
    display: inline-block;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: 0;
    margin-right: var(--space-3);
    font-size: var(--font-size-sm);
    vertical-align: middle;
}

/* Center the Points Estimate label and input */
.temp-points-modal .standard-modal-body .temp-points-form .form-group,
.temp-points-modal .modal-body .temp-points-form .form-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}
.temp-points-modal .standard-modal-body .temp-points-form .form-group #tempPointsInput,
.temp-points-modal .modal-body .temp-points-form .form-group #tempPointsInput {
    text-align: center;
}

/* Number input container - styled like attached image with up/down arrows */
.number-input-container {
    position: relative;
    max-width: 200px;
    margin: 0;
    display: inline-flex;
    align-items: center;
}

/* Number input field - styled like attached with native arrows */
.number-input {
    flex: 1;
    border: 2px solid #4285f4;
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-3);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    text-align: left;
    background: var(--color-white);
    color: var(--color-text);
    min-height: 48px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.number-input:focus {
    border-color: #4285f4;
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
}

/* Hide webkit default spinners */
.number-input::-webkit-outer-spin-button,
.number-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Number spinner buttons container */
.number-spinner-buttons {
    display: flex;
    flex-direction: column;
    border: 2px solid #4285f4;
    border-left: none;
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    background: var(--color-white);
    height: 48px;
}

/* Individual spinner buttons */
.number-spinner-up,
.number-spinner-down {
    flex: 1;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.2s ease;
    width: 30px;
}

.number-spinner-up:hover,
.number-spinner-down:hover {
    background-color: rgba(66, 133, 244, 0.1);
}

.number-spinner-up:active,
.number-spinner-down:active {
    background-color: rgba(66, 133, 244, 0.2);
}

/* Triangle shapes */
.triangle-up {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid #666;
    display: block;
}

.triangle-down {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #666;
    display: block;
}

/* Separate the buttons with a subtle line */
.number-spinner-up {
    border-bottom: 1px solid #e0e0e0;
    border-top-right-radius: var(--radius-md);
}

.number-spinner-down {
    border-bottom-right-radius: var(--radius-md);
}

/* Hide the old adjustment buttons since we're using the new spinner */
.number-btn {
    display: none;
}

/* Modal footer for temp points modal */
.temp-points-modal .modal-footer {
    padding-top: var(--space-5);
}

.temp-points-modal .modal-footer .modal-btn {
    min-width: 100px;
}

/* =============================================================
    Transaction History Table Column Width Adjustments
    Ensures player names do not wrap and amounts/balances have
    more breathing room for readability.
============================================================= */
#txHistoryTable th.col-player, #txHistoryTable td.col-player { width:190px; min-width:190px; white-space:nowrap; }
#txHistoryTable th.col-amt, #txHistoryTable td.col-amt { width:95px; min-width:95px; }
#txHistoryTable th.col-bal, #txHistoryTable td.col-bal { width:110px; min-width:110px; }
#txHistoryTable th.col-type, #txHistoryTable td.col-type { width:110px; min-width:110px; }
#txHistoryTable th.col-date, #txHistoryTable td.col-date { width:110px; min-width:110px; }
#txHistoryTable tbody tr td:nth-child(2) { white-space:nowrap; }
/* Enforce table layout and right alignment for numeric columns */
#txHistoryTable { table-layout: fixed; }
#txHistoryTable th.col-amt, #txHistoryTable th.col-bal, #txHistoryTable td.col-amt, #txHistoryTable td.col-bal { text-align: right !important; }
/* === Transaction History Column Width Overrides (Percent-based) === */
#txHistoryTable { width:100%; }
#txHistoryTable th.col-date, #txHistoryTable td.col-date { width:15% !important; }
#txHistoryTable th.col-player, #txHistoryTable td.col-player { width:20% !important; }
#txHistoryTable th.col-type, #txHistoryTable td.col-type { width:40% !important; }
#txHistoryTable th.col-amt, #txHistoryTable td.col-amt { width:12.5% !important; }
#txHistoryTable th.col-bal, #txHistoryTable td.col-bal { width:12.5% !important; }
/* Ensure long Type values truncate gracefully */
#txHistoryTable td.col-type { overflow:visible; text-overflow:clip; white-space:normal; word-break:break-word; }
#txHistoryTable tr.swat-anchor-row { background: #f0f9ff !important; position:relative; }
#txHistoryTable tr.swat-anchor-row td { font-weight:600; }

/* Highlight selected row in Transaction History table */
#txHistoryTable tbody tr.row-selected,
#txHistoryTable tbody tr[aria-selected="true"] {
    background: var(--ui-table-row-selected, var(--color-primary-100,#dbeafe)) !important;
    color: var(--color-text, #111827) !important;
    font-weight: var(--ui-table-row-selected-weight, 600);
}
#txHistoryTable tbody tr.row-selected:hover {
    background: var(--ui-table-row-selected, var(--color-primary-100,#dbeafe)) !important;
}
#txHistoryTable tbody tr.row-selected td {
    font-weight: var(--ui-table-row-selected-weight, 600) !important;
}

/* Standardize selectable table behavior: pointer cursor + disable text selection */
.ui-table[data-selectable="true"] tbody { user-select: none; }
.ui-table[data-selectable="true"] tbody tr { cursor: pointer; }

/* Non-selectable tables: restore default text selection/cursor and suppress hover highlight */
.ui-table[data-selectable="false"] tbody { user-select: none; }
.ui-table[data-selectable="false"] tbody tr { cursor: default; }
/* Use !important to override any broad hover rules applied elsewhere */
.ui-table[data-selectable="false"] tbody tr:hover { background: transparent !important; }

/* Event Registration: All Registered Players modal is read-only */
.registered-players-list-modal,
.registered-players-list-container { user-select: none; }
.registered-players-list-container .view-all-player { cursor: default; }
.registered-players-list-container .view-all-player:hover { background: transparent !important; }

/* ======================================================================
   Create Teams Modal: reduce input widths
   Scope: Only the Create Teams modal number inputs
   ====================================================================== */
#createTeamsModal .standard-modal-body #createTeamsForm input[type="number"] {
    width: 130px;
}

/* Create Teams layout: single row with left/right sections */
#createTeamsModal .standard-modal-body #createTeamsForm .create-teams-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--space-8);
}
#createTeamsModal .standard-modal-body #createTeamsForm .create-teams-section {
    flex: 1 1 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#createTeamsModal .standard-modal-body #createTeamsForm .create-teams-section .form-group {
    margin: 0;
    text-align: center;
}
#createTeamsModal .standard-modal-body #createTeamsForm .create-teams-section label {
    display: block;
    margin-bottom: var(--space-2);
}