/**
 * Component Library
 * Reusable UI components for HockeyShare application
 * These components complement Tailwind utilities for complex patterns
 */

/* Note: tokens.css already imported via base.css */

/* ===========================================
   Note: Card components moved to universal cards.css
   =========================================== */

/* ===========================================
   Note: Button components moved to universal buttons.css
   =========================================== */

/* ===========================================
   Note: Form components moved to universal forms.css
   =========================================== */

/* ===========================================
   Note: Table components moved to universal tables.css
   =========================================== */

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

/* Utility class for hiding elements via JavaScript */
.js-hidden {
    display: none !important;
}

/* ===========================================
   BREADCRUMB NAVIGATION
   =========================================== */

.breadcrumb-nav {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-lg);
  padding: var(--space-sm) 0;
}

.breadcrumb-nav ol {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb-nav li {
  display: flex;
  align-items: center;
}

.breadcrumb-nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: var(--transition-colors);
}

.breadcrumb-nav a:hover {
  color: var(--color-primary);
}

.breadcrumb-nav .fas {
  color: var(--color-gray-400);
  margin: 0 var(--space-sm);
  font-size: 0.75rem;
}

/* ===========================================
   STATUS INDICATORS
   =========================================== */

.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.status-dot-success {
  background-color: var(--color-success);
}

.status-dot-warning {
  background-color: var(--color-warning);
}

.status-dot-danger {
  background-color: var(--color-danger);
}

.status-dot-info {
  background-color: var(--color-info);
}

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1;
  border-radius: var(--radius-sm);
}

.status-badge-success {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.status-badge-warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning-hover);
}

.status-badge-danger {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
}


/* ===========================================
   EMPTY STATES
   =========================================== */

.empty-state {
  text-align: center;
  padding: var(--space-3xl) var(--space-xl);
  color: var(--text-muted);
}

.empty-state-icon {
  font-size: var(--space-3xl);
  color: var(--color-gray-300);
  margin-bottom: var(--space-md);
}

.empty-state-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.empty-state-description {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

/* ===========================================
   FORM COMPONENTS  
   =========================================== */

/* Form groups and structure */
.form-group {
  margin-bottom: var(--space-lg);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.form-label.required::after {
  content: " *";
  color: var(--color-danger);
}

/* Form inputs */
.form-input {
  display: block;
  width: 100%;
  padding: 0.75rem;
  border: var(--component-border);
  border-radius: var(--component-radius);
  background-color: var(--bg-primary);
  font-size: var(--text-sm);
  font-family: inherit;
  line-height: 1.5;
  color: var(--text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.form-input:disabled {
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: not-allowed;
  opacity: 0.6;
}

.form-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

/* Form input variants */
.form-input.error {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.form-input.success {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

/* Form textarea */
textarea.form-input {
  min-height: 100px;
  resize: vertical;
}

/* Form select */
.form-select {
  display: block;
  width: 100%;
  padding: 0.75rem;
  border: var(--component-border);
  border-radius: var(--component-radius);
  background-color: var(--bg-primary);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1rem;
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  padding-right: 2.5rem;
}

.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

/* Form checkboxes and radios */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.form-check-input {
  width: 1rem;
  height: 1rem;
  margin-top: 0.125rem;
  border: var(--component-border);
  border-radius: var(--component-radius);
  background-color: var(--bg-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.form-check-input[type="radio"] {
  border-radius: 50%;
}

.form-check-label {
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
  line-height: 1.5;
}

/* Form help text */
.form-help {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

.form-help.error {
  color: var(--color-danger);
}

.form-help.success {
  color: var(--color-success);
}

/* Form layouts */
.form-inline {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.form-inline .form-group {
  margin-bottom: 0;
  flex: 1;
}

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

.form-grid.cols-2 {
  grid-template-columns: 1fr 1fr;
}

.form-grid.cols-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Form sections */
.form-section {
  padding: var(--space-xl);
  border: var(--component-border);
  border-radius: var(--component-radius);
  background: var(--bg-secondary);
  margin-bottom: var(--space-xl);
}

.form-section-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: var(--component-border);
}

/* Form responsive */
@media (max-width: 768px) {
  .form-grid.cols-2,
  .form-grid.cols-3 {
    grid-template-columns: 1fr;
  }
  
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }
  
  .form-section {
    padding: var(--space-lg);
  }
}

/* ===========================================
   LOADING STATES
   =========================================== */

.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-gray-200);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

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

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

.loading-skeleton {
  background: linear-gradient(90deg, 
    var(--color-gray-200) 25%, 
    var(--color-gray-100) 50%, 
    var(--color-gray-200) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===========================================
   CARD COMPONENTS
   =========================================== */

/* Base card structure */
.card { 
  background: var(--bg-primary); 
  border: var(--component-border); 
  border-radius: var(--component-radius); 
  box-shadow: var(--component-shadow);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Card sections */
.card-header { 
  background: var(--bg-secondary); 
  padding: var(--space-lg); 
  border-bottom: var(--component-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-body,
.card-content { 
  padding: var(--space-lg); 
}

.card-footer {
  background: var(--bg-secondary);
  padding: var(--space-lg);
  border-top: var(--component-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Card titles */
.card-title { 
  font-size: var(--text-lg); 
  font-weight: 600; 
  color: var(--text-primary); 
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.card-subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: var(--space-xs) 0 0 0;
  font-weight: normal;
}

/* Card variants */
.card.card-flat {
  box-shadow: none;
  border: var(--component-border);
}

.card.card-elevated {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card.card-bordered {
  border: 2px solid var(--component-border);
}

/* Card color variants */
.card.card-border-primary {
  border-left: 4px solid var(--color-primary);
}

.card.card-border-success {
  border-left: 4px solid var(--color-success);
}

.card.card-border-warning {
  border-left: 4px solid var(--color-warning);
}

.card.card-border-danger {
  border-left: 4px solid var(--color-danger);
}

.card.card-border-info {
  border-left: 4px solid var(--color-info);
}

/* Stats grid and items */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

.stat-item {
  text-align: center;
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--component-radius);
  border: var(--component-border);
}

.stat-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  display: block;
  line-height: 1.2;
}

.stat-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: var(--space-xs);
  font-weight: 500;
}

/* Card grid layouts */
.card-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

.card-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.card-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.card-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Responsive card grids */
@media (min-width: 768px) {
  .card-grid.md-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .card-grid.md-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .card-grid.lg-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .card-grid.lg-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Card actions */
.card-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

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

.card-actions.card-actions-end {
  justify-content: flex-end;
}

/* Compact cards */
.card.card-compact .card-header,
.card.card-compact .card-body,
.card.card-compact .card-content,
.card.card-compact .card-footer {
  padding: var(--space-md);
}

/* Large cards */
.card.card-large .card-header,
.card.card-large .card-body,
.card.card-large .card-content,
.card.card-large .card-footer {
  padding: var(--space-xl);
}

/* Card responsive behavior */
@media (max-width: 768px) {
  .card-grid.cols-2,
  .card-grid.cols-3,
  .card-grid.cols-4 {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  }
  
  .card-header,
  .card-body,
  .card-content,
  .card-footer {
    padding: var(--space-md);
  }
  
  .card-actions {
    flex-direction: column;
  }
}

/* ===========================================
   BUTTON COMPONENTS
   =========================================== */

/* Base button styles (enhanced from inline CSS) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.75rem 1.5rem;
  border-radius: var(--component-radius);
  font-weight: 500;
  font-size: var(--text-sm);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
}

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

/* Button variants */
.btn-primary { 
  background: var(--color-primary); 
  color: white; 
  border: 1px solid var(--color-primary);
}

.btn-primary:hover:not(:disabled) { 
  background: #c82333; 
  border-color: #c82333;
}

.btn-secondary { 
  background: var(--color-secondary); 
  color: white; 
  border: 1px solid var(--color-secondary);
}

.btn-secondary:hover:not(:disabled) { 
  background: #5a6268; 
  border-color: #5a6268;
}

.btn-success {
  background: var(--color-success);
  color: white;
  border: 1px solid var(--color-success);
}

.btn-success:hover:not(:disabled) {
  background: #16a34a;
  border-color: #16a34a;
}

.btn-warning {
  background: var(--color-warning);
  color: var(--text-primary);
  border: 1px solid var(--color-warning);
}

.btn-warning:hover:not(:disabled) {
  background: #d97706;
  border-color: #d97706;
  color: white;
}

.btn-danger {
  background: var(--color-danger);
  color: white;
  border: 1px solid var(--color-danger);
}

.btn-danger:hover:not(:disabled) {
  background: #dc2626;
  border-color: #dc2626;
}

.btn-info {
  background: var(--color-info);
  color: white;
  border: 1px solid var(--color-info);
}

.btn-info:hover:not(:disabled) {
  background: #0369a1;
  border-color: #0369a1;
}

.btn-gray {
  background: var(--color-secondary);
  color: white;
  border: 1px solid var(--color-secondary);
}

.btn-gray:hover:not(:disabled) {
  background: #4b5563;
  border-color: #4b5563;
}

.btn-red {
  background: var(--color-danger);
  color: white;
  border: 1px solid var(--color-danger);
}

.btn-red:hover:not(:disabled) {
  background: #dc2626;
  border-color: #dc2626;
}

/* Outline button variants */
.btn-outline-primary {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.btn-outline-primary:hover:not(:disabled) {
  background: var(--color-primary);
  color: white;
}

.btn-outline-secondary {
  background: transparent;
  color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
}

.btn-outline-secondary:hover:not(:disabled) {
  background: var(--color-secondary);
  color: white;
}

.btn-outline-success {
  background: transparent;
  color: var(--color-success);
  border: 1px solid var(--color-success);
}

.btn-outline-success:hover:not(:disabled) {
  background: var(--color-success);
  color: white;
}

.btn-outline-danger {
  background: transparent;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}

.btn-outline-danger:hover:not(:disabled) {
  background: var(--color-danger);
  color: white;
}

/* Button sizes */
.btn-xs {
  padding: 0.25rem 0.5rem;
  font-size: var(--text-xs);
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: var(--text-sm);
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: var(--text-lg);
}

.btn-xl {
  padding: 1.25rem 2.5rem;
  font-size: var(--text-xl);
}

/* Button layouts */
.btn-block {
  width: 100%;
  justify-content: center;
}

.btn-icon {
  padding: 0.75rem;
  width: auto;
  aspect-ratio: 1;
}

.btn-icon.btn-sm {
  padding: 0.5rem;
}

.btn-icon.btn-lg {
  padding: 1rem;
}

/* Button groups */
.btn-group {
  display: inline-flex;
  border-radius: var(--component-radius);
  overflow: hidden;
  box-shadow: var(--component-shadow);
}

.btn-group .btn {
  border-radius: 0;
  border-right-width: 0;
  flex: 1;
}

.btn-group .btn:first-child {
  border-top-left-radius: var(--component-radius);
  border-bottom-left-radius: var(--component-radius);
}

.btn-group .btn:last-child {
  border-top-right-radius: var(--component-radius);
  border-bottom-right-radius: var(--component-radius);
  border-right-width: 1px;
}

/* Button loading state */
.btn.loading {
  color: transparent;
}

.btn.loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-loading 0.8s linear infinite;
}

@keyframes btn-loading {
  to {
    transform: rotate(360deg);
  }
}

/* Button responsive behavior */
@media (max-width: 768px) {
  .btn {
    padding: 0.625rem 1.25rem;
  }
  
  .btn-sm {
    padding: 0.375rem 0.75rem;
  }
  
  .btn-lg {
    padding: 0.875rem 1.75rem;
  }
}

/* ===========================================
   LIST COMPONENTS
   =========================================== */

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-lg) 0;
  border-bottom: var(--component-border);
  gap: var(--space-md);
}

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

.list-item.list-item-compact {
  padding: var(--space-md) 0;
}

.list-item.list-item-spacious {
  padding: var(--space-xl) 0;
}

.list-primary {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
  line-height: 1.4;
}

.list-primary a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

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

.list-secondary {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.list-meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

.list-actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
  align-items: flex-start;
}

/* List variants */
.list-striped .list-item:nth-child(even) {
  background: var(--bg-tertiary);
  margin: 0 calc(-1 * var(--space-lg));
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

.list-bordered {
  border: var(--component-border);
  border-radius: var(--component-radius);
  overflow: hidden;
}

.list-bordered .list-item {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

.list-bordered .list-item:first-child {
  padding-top: var(--space-lg);
}

.list-bordered .list-item:last-child {
  padding-bottom: var(--space-lg);
}

/* Hover effects */
.list-hover .list-item {
  transition: background-color 0.2s ease;
  margin: 0 calc(-1 * var(--space-lg));
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

.list-hover .list-item:hover {
  background: var(--bg-tertiary);
}

/* ===========================================
   EMPTY STATE SYSTEM
   =========================================== */

.empty-state {
  text-align: center;
  padding: var(--space-3xl) var(--space-xl);
  color: var(--text-secondary);
}

.empty-state-icon {
  font-size: 3rem;
  color: var(--color-gray-300);
  margin-bottom: var(--space-lg);
  display: block;
}

.empty-state-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.empty-state-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.empty-state-actions {
  margin-top: var(--space-lg);
}

/* Empty state variants */
.empty-state.empty-state-compact {
  padding: var(--space-xl) var(--space-lg);
}

.empty-state.empty-state-compact .empty-state-icon {
  font-size: 2rem;
  margin-bottom: var(--space-md);
}

.empty-state.empty-state-large {
  padding: var(--space-4xl) var(--space-2xl);
}

.empty-state.empty-state-large .empty-state-icon {
  font-size: 4rem;
  margin-bottom: var(--space-xl);
}

/* Empty state with illustrations */
.empty-state-illustration {
  width: 200px;
  height: 150px;
  margin: 0 auto var(--space-lg);
  background: var(--bg-tertiary);
  border-radius: var(--component-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-300);
}

/* ===========================================
   DRILL COMPONENTS
   =========================================== */

.drill-filters {
  background: var(--bg-primary);
  border: var(--component-border);
  border-radius: var(--component-radius);
  padding: var(--space-lg);
  box-shadow: var(--component-shadow);
}

.drill-filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: var(--component-border);
}

.drill-filters-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.drill-filters-clear {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--component-radius);
  transition: all 0.2s ease;
}

.drill-filters-clear:hover {
  background: var(--bg-secondary);
}

.drill-filter-group {
  margin-bottom: var(--space-lg);
}

.drill-filter-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.drill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: var(--space-lg);
}

.drill-card {
  background: var(--bg-primary);
  border: var(--component-border);
  border-radius: var(--component-radius);
  box-shadow: var(--component-shadow);
  transition: all 0.2s ease;
  overflow: hidden;
}

.drill-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.drill-card-header {
  padding: var(--space-lg);
  border-bottom: var(--component-border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.drill-card-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.drill-card-category {
  background: var(--color-primary);
  color: white;
  font-size: var(--text-xs);
  font-weight: 500;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--component-radius);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

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

.drill-card-description {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin-bottom: var(--space-md);
}

.drill-card-meta {
  display: flex;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.drill-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.drill-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.drill-tags {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.drill-tag {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--component-radius);
  border: 1px solid var(--bg-tertiary);
}

/* Table Pagination */
.table-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: var(--component-border);
}

.table-pagination-info {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.table-pagination-controls {
  display: flex;
  gap: var(--space-xs);
}

/* ===========================================
   TEAMS-SPECIFIC COMPONENTS
   =========================================== */

/* Create team call-to-action section */
.create-team-section {
  background: linear-gradient(135deg, var(--color-primary) 0%, #b91c1c 100%);
  color: white;
  padding: var(--space-2xl);
  border-radius: var(--component-radius);
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.create-team-section h2 {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.create-team-section p {
  margin-bottom: var(--space-xl);
  opacity: 0.9;
}

.btn-create {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: var(--space-md) var(--space-xl);
  font-weight: 600;
  border-radius: var(--component-radius);
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.btn-create:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  color: white;
}

/* Team deletion notices */
.deletion-notice {
  background: #fef2f2;
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
  padding: var(--space-md);
  border-radius: var(--component-radius);
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.deletion-notice .icon {
  color: var(--color-danger);
}

.deletion-urgent {
  background: var(--color-danger);
  color: white;
  border-color: #b91c1c;
}

.deletion-urgent .icon {
  color: #fecaca;
}

.scheduled-deletion {
  border-color: #fecaca !important;
}

.scheduled-deletion:hover {
  border-color: var(--color-danger) !important;
}

/* Team dashboard specific components */
.team-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
  padding: var(--space-lg);
  background: var(--bg-secondary);
  border-radius: var(--component-radius);
  border: var(--component-border);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-primary);
  border-radius: var(--component-radius);
  font-size: var(--text-sm);
  color: var(--text-primary);
  border: var(--component-border);
}

.meta-item i {
  color: var(--color-primary);
  width: 16px;
  text-align: center;
}

.section-divider {
  margin: var(--space-2xl) 0;
  border-top: 2px solid var(--color-gray-200);
}

/* Announcement preview components */
.announcement-preview {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-sm);
  line-height: 1.5;
  position: relative;
  max-height: 10em;
  overflow: hidden;
}

.announcement-preview.has-more::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2em;
  background: linear-gradient(to bottom, transparent, var(--bg-primary));
}

.announcement-preview p {
  margin: 0 0 var(--space-sm) 0;
}

.announcement-preview p:last-child {
  margin-bottom: 0;
}

.announcement-preview * {
  font-size: inherit !important;
  line-height: inherit !important;
}

.announcement-preview strong {
  font-weight: 600;
  color: var(--text-secondary);
}

.announcement-preview em {
  font-style: italic;
}

.announcement-preview ul, 
.announcement-preview ol {
  margin: 0;
  padding-left: var(--space-lg);
}

.announcement-preview li {
  margin: 0;
}

.announcement-preview h1, 
.announcement-preview h2, 
.announcement-preview h3,
.announcement-preview h4, 
.announcement-preview h5, 
.announcement-preview h6 {
  font-size: inherit !important;
  font-weight: 600;
  margin: 0;
  color: var(--text-secondary);
}

/* Calendar subscription components */
.subscription-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-md) 0;
  border-bottom: var(--component-border);
  gap: var(--space-md);
}

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

.subscription-info {
  flex: 1;
  min-width: 0;
}

.subscription-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs) 0;
}

.subscription-desc {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin: 0;
}

.subscription-url {
  margin-top: var(--space-sm);
  max-width: 100%;
}

.subscription-url code {
  background-color: var(--bg-tertiary);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--component-radius);
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  display: inline-block;
}

.subscription-actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.subscription-help {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--component-border);
}

/* Page header components (used by team header) */
.page-header {
  color: white;
  padding: 2rem;
  border-radius: var(--component-radius);
  margin-bottom: 2rem;
}

.page-header.red {
  background: linear-gradient(135deg, #dc3545 0%, #b91c1c 100%);
}

.page-header.blue {
  background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
}

.page-header.green {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.page-header.purple {
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
}

/* Button white variant for header actions */
.btn-white {
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.btn-white:hover:not(:disabled) {
  background: white;
  color: var(--text-primary);
  border-color: white;
}

/* Team header component styles */
.team-header-container {
  margin-bottom: var(--space-2xl);
}

.team-header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xl) var(--space-2xl);
  margin-bottom: var(--space-lg);
}

.team-header-info {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex: 1;
  min-width: 0;
}

.team-header-logo {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: var(--component-radius);
  border: 2px solid rgba(255,255,255,0.3);
  flex-shrink: 0;
}

.team-header-text {
  min-width: 0;
  flex: 1;
}

.team-header-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: white;
  margin: 0;
  word-break: break-word;
}

.section-navigation {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.section-nav-button {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--component-radius);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.section-nav-button:hover {
  background: rgba(255, 255, 255, 0.3);
  color: white;
}

.section-nav-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-xs);
  background: var(--bg-primary);
  border: var(--component-border);
  border-radius: var(--component-radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  min-width: 280px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
}

.section-nav-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.section-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 0.625rem var(--space-lg);
  color: var(--text-primary);
  text-decoration: none;
  transition: all 0.15s ease;
  border-bottom: 1px solid var(--color-gray-100);
  font-size: 0.9375rem;
  font-weight: 500;
}

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

.section-nav-item:hover {
  background: #f3f4f6;
  color: var(--text-primary);
  padding-left: 1.125rem;
}

.section-nav-item:first-child {
  border-radius: var(--component-radius) var(--component-radius) 0 0;
}

.section-nav-item:last-child {
  border-radius: 0 0 var(--component-radius) var(--component-radius);
}

.section-nav-item i {
  width: 18px;
  height: 18px;
  text-align: center;
  font-size: 0.9375rem;
  flex-shrink: 0;
}

.section-nav-item span {
  flex: 1;
}

.section-nav-item.active {
  background: #eff6ff;
  color: #2563eb;
  font-weight: 600;
  border-left: 3px solid #2563eb;
  padding-left: calc(var(--space-lg) - 3px);
}

.section-nav-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6b7280;
  background: #f9fafb;
  border-bottom: 2px solid #e5e7eb;
  border-top: 1px solid #e5e7eb;
  margin-top: var(--space-sm);
}

.section-nav-section-header:first-child {
  margin-top: 0;
  border-top: none;
  border-radius: var(--component-radius) var(--component-radius) 0 0;
}

.section-nav-section-header i {
  display: none;
}

.team-header-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: 0 var(--space-lg);
}

.team-header-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all 0.2s ease;
}

.section-nav-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: none;
}

.section-nav-dropdown-overlay.show {
  display: block;
}

/* Button Group for 3 Dropdowns */
.section-nav-button-group {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Wrapper for each button + dropdown pair */
.section-nav-item-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* Grouped button styles - override border-radius for middle buttons */
.section-nav-button-first {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.section-nav-button-middle {
  border-radius: 0;
  border-right: none;
}

.section-nav-button-last {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Dropdown positioning - now relative to wrapper */
.section-nav-item-wrapper .section-nav-dropdown {
  left: 0;
  right: auto;
}

/* Team header responsive */
@media (max-width: 768px) {
  .team-header-main {
    padding: var(--space-lg);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
  }
  
  .team-header-info {
    width: 100%;
  }
  
  .team-header-logo {
    width: 40px;
    height: 40px;
  }
  
  .team-header-title {
    font-size: var(--text-xl);
  }
  
  .section-navigation {
    width: 100%;
  }

  .section-nav-button-group {
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%;
  }

  .section-nav-item-wrapper {
    width: 100%;
  }

  .section-nav-button {
    width: 100%;
    justify-content: center;
  }

  /* Reset border-radius on mobile for stacked buttons */
  .section-nav-button-first,
  .section-nav-button-middle,
  .section-nav-button-last {
    border-radius: var(--component-radius);
    border-right: 1px solid rgba(255, 255, 255, 0.3);
  }

  .section-nav-dropdown {
    left: 0;
    right: 0;
  }
  
  .team-header-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xs);
  }
  
  .team-header-actions .btn {
    justify-content: center;
    width: 100%;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .team-header-main {
    padding: var(--space-xl);
  }
  
  .team-header-title {
    font-size: var(--text-xl);
  }
  
  .team-header-actions .btn {
    font-size: var(--text-xs);
    padding: var(--space-xs) var(--space-md);
  }
}

/* ===========================================
   HOCKEY-SPECIFIC COMPONENTS
   =========================================== */

/* Player Components */
.player-card {
  background: var(--bg-primary);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-shadow);
}

.player-card:hover {
  box-shadow: var(--shadow-md);
}

.player-photo {
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--color-gray-200);
}

.player-photo-lg {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
}

.player-jersey-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  color: var(--text-inverse);
  border-radius: var(--radius-full);
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
}

.player-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-lg);
}

/* Statistics Components */
.stats-table-advanced {
  width: 100%;
  background: var(--bg-primary);
  border-collapse: collapse;
  font-size: var(--text-sm);
  border: var(--border);
}

.stats-table-advanced th {
  background: var(--bg-secondary);
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-color);
  position: relative;
  cursor: pointer;
}

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

.stats-table-advanced th.sort-asc::after {
  content: '↑';
  position: absolute;
  right: 8px;
  color: var(--color-primary);
}

.stats-table-advanced th.sort-desc::after {
  content: '↓';
  position: absolute;
  right: 8px;
  color: var(--color-primary);
}

.stats-table-advanced td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border);
  text-align: center;
}

.stats-table-advanced tbody tr:hover {
  background: var(--bg-tertiary);
}

.stats-filter-panel {
  background: var(--bg-secondary);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
  border: var(--border);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

.stat-item {
  text-align: center;
  padding: var(--space-md);
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  border: var(--border);
}

.stat-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  display: block;
}

.stat-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: var(--space-xs);
}

/* Calendar Components */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--color-gray-200);
  border: var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.calendar-day {
  background: var(--bg-primary);
  padding: var(--space-sm);
  min-height: 100px;
  position: relative;
}

.calendar-day.other-month {
  background: var(--bg-tertiary);
  opacity: 0.5;
}

.calendar-day.today {
  background: var(--color-primary-light);
}

.calendar-event {
  background: var(--color-primary);
  color: var(--text-inverse);
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  margin-bottom: var(--space-xs);
  cursor: pointer;
}

.calendar-event.practice {
  background: var(--color-info);
}

.calendar-event.game {
  background: var(--color-success);
}

.game-schedule-item {
  display: flex;
  align-items: center;
  padding: var(--space-md);
  background: var(--bg-primary);
  border: var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
}

.game-schedule-item:hover {
  box-shadow: var(--shadow-sm);
}

/* Game Components */
.game-score-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--bg-primary);
  border: var(--border);
  border-radius: var(--radius-lg);
}

.team-score {
  text-align: center;
}

.team-name {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

.score-value {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.score-separator {
  font-size: var(--text-2xl);
  color: var(--text-muted);
  font-weight: var(--font-bold);
}

.team-comparison {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-lg);
  background: var(--bg-primary);
  border: var(--border);
  border-radius: var(--radius-lg);
}

.game-result-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.game-result-badge.win {
  background: var(--color-success-light);
  color: var(--color-success);
}

.game-result-badge.loss {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.game-result-badge.tie {
  background: var(--color-warning-light);
  color: var(--color-warning-hover);
}

/* Badge Components */
.captain-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-warning);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
}

.captain-badge.alternate {
  background: var(--color-info);
  color: var(--text-inverse);
}

.player-status-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.player-status-badge.active {
  background: var(--color-success-light);
  color: var(--color-success);
}

.player-status-badge.injured {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.player-status-badge.inactive {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

/* Extended Form Components */
.email-manager {
  background: var(--bg-primary);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.email-recipient-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}

.email-recipient {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.photo-upload-zone {
  border: 2px dashed var(--color-gray-300);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  text-align: center;
  background: var(--bg-secondary);
  transition: var(--transition-colors);
  cursor: pointer;
}

.photo-upload-zone:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.photo-upload-zone.drag-over {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.data-grid-advanced {
  background: var(--bg-primary);
  border: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.data-grid-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg);
  background: var(--bg-secondary);
  border-bottom: var(--border);
}

.data-grid-controls {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

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

@media (max-width: 768px) {
  .card-body {
    padding: var(--space-md);
  }
  
  .form-section {
    padding: var(--space-lg);
  }
  
  .data-table {
    font-size: var(--text-xs);
  }
  
  .modal-container {
    max-width: 95%;
  }
  
  .player-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  }
  
  .calendar-grid {
    font-size: var(--text-xs);
  }
  
  .game-score-display {
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  .team-comparison {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* ===========================================
   ANNOUNCEMENT CONTENT STYLING
   =========================================== */

/* Rich text content styling for announcements */
.announcement-body p {
  margin: var(--space-md) 0;
}

.announcement-body p:first-child {
  margin-top: 0;
}

.announcement-body p:last-child {
  margin-bottom: 0;
}

.announcement-body ul,
.announcement-body ol {
  margin: var(--space-md) 0;
  padding-left: var(--space-xl);
  list-style-position: outside;
}

.announcement-body ul {
  list-style-type: disc;
}

.announcement-body ol {
  list-style-type: decimal;
}

.announcement-body li {
  margin: var(--space-xs) 0;
}

.announcement-body strong {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.announcement-body em {
  font-style: italic;
}

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

.announcement-body a:hover {
  color: var(--color-primary-dark);
}

.announcement-body blockquote {
  border-left: 4px solid var(--color-primary);
  padding-left: var(--space-md);
  margin: var(--space-md) 0;
  font-style: italic;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-xl);
  border-radius: var(--component-radius);
}

.announcement-body pre {
  background: var(--bg-secondary);
  padding: var(--space-md);
  border-radius: var(--component-radius);
  overflow-x: auto;
  font-size: var(--text-sm);
  margin: var(--space-md) 0;
}

.announcement-body code {
  background: var(--bg-secondary);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--component-radius-sm);
  font-size: var(--text-sm);
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
}

.announcement-body h1,
.announcement-body h2,
.announcement-body h3 {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: var(--space-lg) 0 var(--space-sm) 0;
}

.announcement-body h1:first-child,
.announcement-body h2:first-child,
.announcement-body h3:first-child {
  margin-top: 0;
}

.announcement-body h1 {
  font-size: var(--text-xl);
}

.announcement-body h2 {
  font-size: var(--text-lg);
}

.announcement-body h3 {
  font-size: var(--text-base);
}

.announcement-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--component-radius);
  margin: var(--space-md) 0;
}

.announcement-body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-md) 0;
}

.announcement-body th,
.announcement-body td {
  border: var(--component-border);
  padding: var(--space-sm);
  text-align: left;
}

.announcement-body th {
  background: var(--bg-secondary);
  font-weight: var(--font-semibold);
}

/* ===========================================
   STEP INDICATOR COMPONENTS
   =========================================== */

.step-indicator {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-2xl);
  gap: var(--space-md);
}

.step {
  display: flex;
  align-items: center;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--component-radius);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  transition: all 0.3s ease;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.step.active {
  background: var(--color-primary);
  color: white;
}

.step.completed {
  background: var(--color-success);
  color: white;
}

.step-content {
  display: none;
}

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

/* ===========================================
   COLLAPSIBLE SECTIONS
   =========================================== */

.edit-section {
  border: 2px solid var(--bg-secondary);
  border-radius: var(--component-radius);
  margin-bottom: var(--space-xl);
  overflow: hidden;
}

.edit-section.active {
  border-color: var(--color-primary);
}

.section-header {
  background: var(--bg-secondary);
  padding: var(--space-lg);
  border-bottom: var(--component-border);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s ease;
}

.section-header:hover {
  background: var(--bg-tertiary);
}

/* Collapsible sections - only for drill editing */
.collapsible-section .section-content {
  padding: var(--space-xl);
  display: none;
}

.collapsible-section .section-content.active {
  display: block;
}

/* ===========================================
   DRILL-SPECIFIC COMPONENTS
   =========================================== */

.drill-diagrammer {
  width: 100%;
  height: 640px;
  border: 2px solid var(--component-border);
  border-radius: var(--component-radius);
  background: var(--bg-primary);
}

.diagram-option {
  padding: var(--space-md);
  border: var(--component-border);
  border-radius: var(--component-radius);
  cursor: pointer;
  transition: all 0.2s ease;
}

.diagram-option:hover {
  background: var(--bg-secondary);
  border-color: var(--color-primary);
}

/* ===========================================
   DRILL ADD/EDIT FORM COMPONENTS
   =========================================== */

.field-group {
  background: var(--bg-secondary);
  border: var(--component-border);
  border-radius: var(--component-radius);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.field-group h4 {
  margin: 0 0 var(--space-md) 0;
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* Tag input components */
.tag-input-container {
  position: relative;
}

.tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.tag-chip {
  background: var(--color-primary);
  color: white;
  padding: var(--space-xs) var(--space-md);
  border-radius: 9999px;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.tag-chip button {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0;
  font-size: var(--text-xs);
  opacity: 0.8;
}

.tag-chip button:hover {
  opacity: 1;
}

.tag-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-primary);
  border: var(--component-border);
  border-radius: var(--component-radius);
  box-shadow: var(--component-shadow);
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
  display: none;
}

.tag-autocomplete.show {
  display: block;
}

.tag-suggestion {
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  transition: background 0.2s;
}

.tag-suggestion:hover {
  background: var(--bg-secondary);
}

.tag-suggestion.highlighted {
  background: var(--color-primary);
  color: white;
}

/* Drill preview components */
.drill-preview {
  background: var(--bg-secondary);
  border: 2px solid var(--component-border);
  border-radius: var(--component-radius);
  padding: var(--space-xl);
  margin-top: var(--space-2xl);
}

.drill-preview h3 {
  margin: 0 0 var(--space-lg) 0;
  color: var(--text-primary);
}

.preview-section {
  background: var(--bg-primary);
  border: var(--component-border);
  border-radius: var(--component-radius);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.preview-section h4 {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.preview-tag {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: 9999px;
  font-size: var(--text-xs);
}

/* Navigation and diagram components */
.navigation-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: var(--component-border);
}

.diagram-placeholder {
  width: 100%;
  height: 300px;
  border: 2px dashed var(--component-border);
  border-radius: var(--component-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  text-align: center;
}

.diagram-placeholder i {
  font-size: 3rem;
  margin-bottom: var(--space-lg);
  display: block;
}

.upload-area {
  border: 2px dashed var(--component-border);
  border-radius: var(--component-radius);
  padding: var(--space-3xl) var(--space-2xl);
  text-align: center;
  background: var(--bg-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-area:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-lightest);
}

.upload-area.dragover {
  border-color: var(--color-primary);
  background: var(--color-primary-lightest);
}

/* Additional drill edit components */
.current-diagram {
  border: 2px solid var(--component-border);
  border-radius: var(--component-radius);
  padding: var(--space-2xl);
  text-align: center;
  background: var(--bg-secondary);
  margin-bottom: var(--space-xl);
}

.diagram-controls {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-lg);
}

.diagram-option.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-lightest);
}

.add-category-btn {
  display: inline-flex;
  align-items: center;
  color: var(--color-info);
  font-size: var(--text-xs);
  cursor: pointer;
  margin-top: var(--space-sm);
}

.add-category-btn:hover {
  color: var(--color-info-dark);
}

.custom-category-2 {
  display: none;
  margin-top: var(--space-md);
}

.custom-category-2.show {
  display: block;
}

/* ===========================================
   STATISTICS PAGE COMPONENTS
   =========================================== */

/* Statistics cards and tables */
.stats-card-full-width {
  width: 100%;
  max-width: none;
}

.stats-card-full-width .card-content,
.stats-card-full-width .card-body {
  padding: 0;
}

.stats-card-full-width table {
  width: 100%;
  min-width: 100%;
}

.stats-card-full-width .table-container {
  overflow-x: auto;
  padding: var(--space-lg);
}

/* Overview grid for team stats */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
}

/* Record display styles */
.record-display {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-primary);
}

.win-percentage {
  color: var(--color-success);
  font-weight: 600;
}

/* Player name styling in stats tables */
.player-name {
  font-weight: 500;
  color: var(--text-primary);
  text-align: left;
}

.player-number {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.numeric-cell {
  text-align: center;
  font-weight: 500;
}

.percentage-cell {
  text-align: center;
  font-weight: 500;
  color: var(--color-success);
}

/* Sortable table headers */
.sortable-header {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 20px !important;
  transition: background-color 0.2s ease;
}

.sortable-header:hover {
  background: var(--bg-tertiary) !important;
}

.sort-icon {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
  font-size: var(--text-xs);
}

.sortable-header.sort-asc .sort-icon:before {
  content: "▲";
  opacity: 1;
  color: var(--color-primary);
}

.sortable-header.sort-desc .sort-icon:before {
  content: "▼";
  opacity: 1;
  color: var(--color-primary);
}

.sortable-header:not(.sort-asc):not(.sort-desc) .sort-icon:before {
  content: "⇅";
}

/* Filter panel for statistics */
.filter-panel-enhanced {
  background: var(--bg-secondary);
  border: 2px solid var(--component-border);
  margin-bottom: var(--space-xl);
}

.filter-header-enhanced {
  background: var(--color-primary-lightest);
  border-bottom: 1px solid var(--color-primary-light);
}

.filter-title-enhanced {
  color: var(--color-primary);
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

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

.filter-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.filter-input, .filter-select {
  padding: var(--space-sm) var(--space-md);
  border: var(--component-border);
  border-radius: var(--component-radius);
  font-size: var(--text-sm);
  background: var(--bg-primary);
}

.filter-input:focus, .filter-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}

.filter-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: flex-end;
  margin-top: var(--space-md);
}

.btn-filter {
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--component-radius);
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--text-sm);
}

.btn-apply {
  background: var(--color-primary);
  color: white;
}

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

.btn-clear {
  background: var(--color-secondary);
  color: white;
}

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

.btn-toggle {
  background: var(--color-primary);
  color: white;
  border: none;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--component-radius);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-toggle:hover {
  background: var(--color-primary-dark);
  color: white;
}

/* Filter status displays */
.filter-status {
  background: var(--color-primary-lightest);
  border: 1px solid var(--color-primary-light);
  border-radius: var(--component-radius);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.filter-status-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.filter-status-details {
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.selected-games {
  margin-top: var(--space-sm);
  max-height: 200px;
  overflow-y: auto;
}

.game-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--component-border);
  font-size: var(--text-xs);
}

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

.game-date {
  font-weight: 500;
  color: var(--text-primary);
}

.game-opponent {
  color: var(--text-secondary);
}

/* Game selection components */
.game-selection {
  border: var(--component-border);
  border-radius: var(--component-radius);
  background: var(--bg-secondary);
  padding: var(--space-lg);
  margin-top: var(--space-lg);
}

.game-selection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.game-selection-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.game-selection-actions {
  display: flex;
  gap: var(--space-sm);
}

.btn-game-select {
  font-size: var(--text-xs);
  padding: var(--space-xs) var(--space-sm);
  border: var(--component-border);
  background: var(--bg-primary);
  color: var(--text-primary);
  border-radius: var(--component-radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-game-select:hover {
  background: var(--bg-tertiary);
  border-color: var(--text-secondary);
}

.games-list {
  max-height: 300px;
  overflow-y: auto;
  border: var(--component-border);
  border-radius: var(--component-radius-sm);
  background: var(--bg-primary);
}

.game-checkbox-item {
  display: flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--bg-tertiary);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.game-checkbox-item:hover {
  background: var(--bg-secondary);
}

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

.game-checkbox {
  margin-right: var(--space-md);
  cursor: pointer;
}

.game-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.game-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.game-date-opponent {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.game-type-location {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.game-score {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.game-score.win {
  color: var(--color-success);
}

.game-score.loss {
  color: var(--color-danger);
}

.game-score.tie {
  color: var(--color-warning);
}

.selection-summary {
  margin-top: var(--space-md);
  padding: var(--space-sm);
  background: var(--color-primary-lightest);
  border: 1px solid var(--color-primary-light);
  border-radius: var(--component-radius-sm);
  font-size: var(--text-sm);
  color: var(--color-primary);
}

/* Responsive adjustments for statistics */
@media (max-width: 768px) {
  .overview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .filter-grid {
    grid-template-columns: 1fr;
  }
  
  .filter-actions {
    justify-content: center;
  }
  
  .filter-status {
    margin: var(--space-md) 0;
  }
  
  .game-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
  
  .game-selection-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
  }
  
  .game-selection-actions {
    justify-content: center;
  }
  
  .game-checkbox-item {
    padding: var(--space-md) var(--space-sm);
  }
  
  .game-details {
    gap: var(--space-xs);
  }
  
  .game-date-opponent {
    font-size: var(--text-sm);
  }
  
  .game-type-location {
    font-size: var(--text-xs);
  }
  
  .game-score {
    font-size: var(--text-sm);
  }
  
  .sortable-header {
    padding-right: 15px !important;
  }
}

/* ===========================================
   PLAYER DETAIL PAGE COMPONENTS
   =========================================== */

/* Player profile components */
.profile-content {
  padding: var(--space-2xl);
}

.profile-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.player-photo {
  width: 150px;
  height: 150px;
  border-radius: var(--component-radius);
  object-fit: cover;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: var(--text-3xl);
}

.player-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
}

.detail-group {
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--component-radius);
}

.detail-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}

.detail-value {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
}

/* Game result badges */
.game-result {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--component-radius-sm);
  font-weight: 600;
  font-size: var(--text-xs);
  display: inline-block;
}

.result-W {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}

.result-L {
  background: var(--color-danger-light);
  color: var(--color-danger-dark);
}

.result-T {
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
}

/* Captain and alternate badges */
.captain-badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--component-radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  margin-left: var(--space-sm);
}

.captain-badge.captain {
  background: var(--color-warning);
  color: var(--color-warning-dark);
}

.captain-badge.alternate {
  background: var(--color-info);
  color: var(--color-info-dark);
}

/* Status badges */
.status-badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--component-radius);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
}

.status-Active {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}

.status-Injured {
  background: var(--color-danger-light);
  color: var(--color-danger-dark);
}

.status-Suspended {
  background: var(--color-danger-light);
  color: var(--color-danger-dark);
}

.status-Inactive {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

/* Player info grid */
.player-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.info-item {
  background: rgba(255, 255, 255, 0.2);
  padding: var(--space-sm);
  border-radius: var(--component-radius);
  text-align: center;
}

.info-label {
  font-size: var(--text-xs);
  opacity: 0.8;
  margin-bottom: var(--space-xs);
}

.info-value {
  font-weight: 600;
  font-size: var(--text-sm);
}

/* Responsive adjustments for player detail */
@media (max-width: 768px) {
  .profile-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .player-photo {
    margin: 0 auto;
  }
  
  .player-details {
    grid-template-columns: 1fr;
  }
  
  .player-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===========================================
   GAME STATISTICS ENTRY COMPONENTS  
   =========================================== */

/* Stats sections */
.stats-container {
  display: grid;
  gap: var(--space-2xl);
}

.stats-section {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.section-header {
  background: var(--bg-tertiary);
  padding: var(--space-lg) var(--space-xl);
  border-bottom: var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.section-content {
  padding: var(--space-xl);
}

/* Spreadsheet-like table styling */
.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.stats-table th {
  background: var(--bg-secondary);
  padding: var(--space-md) var(--space-sm);
  text-align: left;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  border-bottom: 2px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 10;
}

.stats-table td {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
  text-align: center;
}

.stats-table td.player-name {
  text-align: left;
}

.stats-table tbody tr:hover {
  background: var(--bg-secondary);
}

/* Form inputs */
.stat-input {
  width: 60px;
  padding: var(--space-xs) var(--space-sm);
  border: var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: var(--text-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
}

.stat-input:focus {
  outline: none;
  border-color: var(--color-info);
  box-shadow: 0 0 0 2px var(--color-info-light);
}

.stat-checkbox {
  transform: scale(1.2);
  margin: 0 auto;
  display: block;
}

.wide-input {
  width: 100px;
}

.custom-input {
  width: 80px;
}

/* Box Score Grid */
.box-score-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
}

.box-score-group {
  padding: var(--space-lg);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.box-score-label {
  display: block;
  font-weight: var(--font-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.box-score-input {
  width: 100%;
  padding: var(--space-sm);
  border: var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* Action buttons */
.stats-actions {
  background: var(--bg-tertiary);
  padding: var(--space-xl);
  border-top: var(--border);
  display: flex;
  gap: var(--space-lg);
  justify-content: space-between;
  align-items: center;
}

.btn-group {
  display: flex;
  gap: var(--space-sm);
}

/* Points display */
.points-display {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

/* Calculated stats display */
.save-percentage,
.goals-against-avg {
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

/* Game stats loading state */
.stats-container.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Form help text */
.form-help {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

/* Responsive */
@media (max-width: 768px) {
  .stats-table {
    font-size: var(--text-xs);
  }
  
  .stat-input {
    width: 50px;
    padding: var(--space-xs);
  }
  
  .box-score-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-actions {
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  .btn-group {
    width: 100%;
  }
  
  .btn-group .btn {
    flex: 1;
  }
}

/* ===========================================
   TEAM BOX SCORES COMPONENTS  
   =========================================== */

/* Games List Header */
.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.games-count {
  background: var(--color-primary);
  color: white;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

/* Game Card Styling */
.game-card {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-light);
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

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

.game-card:hover {
  background: var(--bg-tertiary);
}

/* Game Info Section */
.game-info {
  flex: 1;
  min-width: 0; /* Allow flex item to shrink */
}

.matchup {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.game-details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-sm);
}

.detail-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.game-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.meta-badge {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  text-transform: uppercase;
}

.badge-home {
  background: var(--color-gray-100);
  color: var(--color-primary);
}

.badge-away {
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
}

.badge-game-type {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* Score Section */
.score-section {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: 0 var(--space-md);
}

.score-display {
  text-align: center;
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  min-width: 120px;
}

.score-teams {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.score-numbers {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-xs);
}

.score-result {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Result Color Coding */
.result-win {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}

.result-win .score-numbers {
  color: var(--color-success);
}

.result-loss {
  background: var(--color-danger-light);
  color: var(--color-danger-dark);
}

.result-loss .score-numbers {
  color: var(--color-danger);
}

.result-tie {
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
}

.result-tie .score-numbers {
  color: var(--color-warning);
}

.no-score {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.no-score .score-numbers {
  color: var(--text-tertiary);
  font-size: var(--text-base);
  font-style: italic;
}

/* Action Buttons */
.game-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 200px;
}

/* Game Indicators */
.game-indicators {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.indicator {
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  font-size: 0.65rem;
  font-weight: var(--font-semibold);
  text-transform: uppercase;
}

.indicator-ot {
  background: var(--color-warning);
  color: var(--color-warning-dark);
}

.indicator-so {
  background: var(--color-purple-400);
  color: var(--color-purple-700);
}

/* Summary Stats */
.summary-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
  padding: var(--space-lg);
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

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

.stat-value {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.stat-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Responsive Design for Box Scores */
@media (max-width: 768px) {
  .game-card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
  }
  
  .score-section {
    margin: 0;
    justify-content: center;
  }
  
  .game-actions {
    min-width: auto;
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .game-details {
    justify-content: center;
    text-align: center;
  }
  
  .summary-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .game-actions {
    flex-direction: column;
  }
  
  .summary-stats {
    grid-template-columns: 1fr;
  }
}

/* ===========================================
   TEAM EDIT SETTINGS COMPONENTS
   =========================================== */

/* Team settings page form sections */
.form-section {
  margin-bottom: var(--space-xl);
  padding: var(--space-xl);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
}

.form-section-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-md);
}

/* Section titles */
.section-title {
  font-size: 1.125rem;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-gray-200);
}

/* Form actions */
.form-actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: var(--border);
}

/* Danger zone styling */
.danger-zone {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.danger-zone-title {
  color: var(--color-danger);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-sm);
}

.danger-zone-description {
  color: var(--color-gray-600);
  font-size: var(--text-sm);
  margin-bottom: var(--space-md);
}

/* Team edit specific containers */
.max-w-7xl {
  max-width: 80rem;
}

/* ===========================================
   TEAM DELETION SETTINGS COMPONENTS
   =========================================== */

/* Deletion warning container */
.deletion-warning {
  background: var(--color-danger-lightest);
  border: 1px solid var(--color-danger-light);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  margin-bottom: var(--space-3xl);
}

.deletion-warning-title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-danger-dark);
  margin-bottom: var(--space-lg);
}

.deletion-warning-content {
  margin-bottom: var(--space-2xl);
}

.deletion-warning-text {
  color: var(--color-danger-dark);
  margin-bottom: var(--space-lg);
}

.deletion-list {
  list-style-type: disc;
  list-style-position: inside;
  color: var(--color-danger-dark);
  margin-left: var(--space-lg);
}

/* Scheduled deletion notice */
.scheduled-deletion-notice {
  background: var(--color-warning-light);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.scheduled-deletion-title {
  font-weight: var(--font-semibold);
  color: var(--color-warning-dark);
  margin-bottom: var(--space-sm);
}

.scheduled-deletion-text {
  color: var(--color-warning-dark);
}

.scheduled-deletion-actions {
  margin-top: var(--space-lg);
  display: flex;
  gap: var(--space-lg);
}

/* Deletion options */
.deletion-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.deletion-section-title {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.deletion-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.deletion-radio-label {
  display: flex;
  align-items: center;
}

.deletion-radio-input {
  margin-right: var(--space-sm);
}

.deletion-radio-text {
  color: var(--text-secondary);
}

/* Scheduled options container */
.scheduled-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Immediate deletion confirmation */
.immediate-confirmation {
  background: var(--color-danger-lightest);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.immediate-confirmation-title {
  color: var(--color-danger-dark);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-sm);
}

.immediate-confirmation-text {
  color: var(--color-danger);
  font-size: var(--text-sm);
  margin-bottom: var(--space-lg);
}

.immediate-confirmation-input {
  margin-bottom: var(--space-lg);
}

/* Form label styling */
.form-label-block {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.form-label-danger {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-danger-dark);
  margin-bottom: var(--space-xs);
}

/* Action buttons container */
.deletion-actions {
  display: flex;
  gap: var(--space-lg);
}

/* ===========================================
   TEAM CREATE FORM COMPONENTS
   =========================================== */

/* Form container for team creation */
.create-form-container {
  max-width: 800px;
  margin: 0 auto;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-2xl);
}

/* Page header for creation pages */
.create-page-header {
  margin-bottom: var(--space-2xl);
}

.create-page-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.create-page-description {
  color: var(--text-secondary);
}

/* ===========================================
   ROSTER PAGE COMPONENTS
   =========================================== */

/* Player header section */
.roster-player-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-md);
}

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

.roster-player-name {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

/* Email management components */
.roster-email-group {
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.roster-email-inputs {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.roster-email-input-row {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.btn-add-email {
  background: var(--color-success);
  color: var(--text-inverse);
  padding: var(--space-xs) var(--space-sm);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  cursor: pointer;
}

.btn-add-email:hover {
  background: var(--color-success-hover);
}

.btn-remove-email {
  background: var(--color-danger);
  color: var(--text-inverse);
  padding: var(--space-xs) var(--space-sm);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  cursor: pointer;
}

.btn-remove-email:hover {
  background: var(--color-danger-hover);
}

/* Photo upload components */
.roster-photo-preview {
  width: 120px;
  height: 120px;
  margin: var(--space-sm) auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 2px solid var(--color-gray-200);
}

.roster-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.roster-photo-preview-placeholder {
  width: 100%;
  height: 100%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 3rem;
}

/* Uploadcare widget button override */
.uploadcare-widget-button {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-primary);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-md);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: var(--transition-colors);
}

.uploadcare-widget-button:hover {
  background: var(--color-primary-hover);
}

/* ===========================================
   SCORESHEETS PAGE COMPONENTS
   =========================================== */

/* Game Details */
.scoresheet-game-date {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.scoresheet-game-time {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  margin-top: var(--space-xs);
}

.scoresheet-opponent {
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.scoresheet-location {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  margin-top: var(--space-xs);
}

.scoresheet-venue-indicator {
  display: inline-block;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.625rem;
  font-weight: var(--font-medium);
  text-transform: uppercase;
  margin-left: var(--space-sm);
}

.scoresheet-venue-home {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}

.scoresheet-venue-away {
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
}

/* Score Display */
.scoresheet-score {
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
}

.scoresheet-score.win {
  color: var(--color-success);
}

.scoresheet-score.loss {
  color: var(--color-danger);
}

.scoresheet-score.tie {
  color: var(--text-secondary);
}

.scoresheet-score-pending {
  color: var(--text-secondary);
  font-style: italic;
  font-size: var(--text-sm);
}

/* Scoresheet Actions */
.scoresheet-action {
  text-align: center;
}

.scoresheet-no-scoresheet {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-style: italic;
}

/* Game Type Badges */
.scoresheet-game-type {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.625rem;
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.scoresheet-game-type.regular {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.scoresheet-game-type.playoff {
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
}

.scoresheet-game-type.tournament {
  background: var(--color-purple-100);
  color: var(--color-purple-700);
}

.scoresheet-game-type.exhibition {
  background: var(--color-info-light);
  color: var(--color-info-dark);
}

/* Responsive Design */
@media (max-width: 768px) {
  .scoresheet-venue-indicator {
    display: block;
    margin-left: 0;
    margin-top: var(--space-xs);
    width: fit-content;
  }
}

/* ===========================================
   MANAGER INVITE PAGE COMPONENTS
   =========================================== */

/* Invite Container */
.manager-invite-container {
  max-width: 600px;
  margin: var(--space-2xl) auto;
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  border: var(--border);
}

/* Invite Header */
.manager-invite-header {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  padding: var(--space-2xl);
  text-align: center;
}

.manager-invite-icon {
  font-size: var(--text-5xl);
  margin-bottom: var(--space-lg);
  opacity: 0.9;
}

.manager-invite-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-md);
}

.manager-invite-subtitle {
  opacity: 0.9;
  font-size: 1rem;
}

/* Invite Body */
.manager-invite-body {
  padding: var(--space-2xl);
}

/* Team Info */
.manager-invite-team-info {
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-2xl);
  border-left: 4px solid #10b981;
}

.manager-invite-team-name {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
}

.manager-invite-team-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.manager-invite-team-detail {
  display: flex;
  flex-direction: column;
}

.manager-invite-detail-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-sm);
}

.manager-invite-detail-value {
  font-size: var(--text-base);
  color: var(--text-primary);
  font-weight: var(--font-medium);
}

/* Permissions Info */
.manager-invite-permissions-info {
  background: var(--color-warning-light);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.manager-invite-permissions-title {
  font-weight: 600;
  color: #92400e;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}

.manager-invite-permissions-list {
  color: #92400e;
  font-size: 0.875rem;
}

.manager-invite-permissions-list ul {
  margin: 0;
  padding-left: 1.5rem;
}

.manager-invite-permissions-list li {
  margin-bottom: 0.25rem;
}

/* Actions */
.manager-invite-actions {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

/* User Info */
.manager-invite-user-info {
  background: #f3f4f6;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 2rem;
  text-align: center;
}

.manager-invite-user-name {
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.25rem;
}

.manager-invite-user-email {
  color: #6b7280;
  font-size: 0.875rem;
}

/* Responsive Design */
@media (max-width: 640px) {
  .manager-invite-container {
    margin: 1rem;
    border-radius: 0.5rem;
  }
  
  .manager-invite-header,
  .manager-invite-body {
    padding: 1.5rem;
  }
  
  .manager-invite-actions {
    flex-direction: column;
  }
  
  .manager-invite-team-details {
    grid-template-columns: 1fr;
  }
}

/* ===========================================
   MESSAGE RATE LIMITED PAGE COMPONENTS
   =========================================== */

/* Rate Limit Container */
.rate-limit-container {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

/* Rate Limit Header */
.rate-limit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-lg);
  border-bottom: 2px solid var(--border-color);
}

.rate-limit-title {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

/* Rate Limit Card */
.rate-limit-card {
  background: var(--bg-primary);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  margin-bottom: var(--space-2xl);
  box-shadow: var(--shadow-sm);
}

.rate-limit-icon {
  font-size: var(--text-6xl);
  color: var(--color-warning);
  margin-bottom: var(--space-lg);
}

.rate-limit-message {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-warning-dark);
  margin-bottom: var(--space-lg);
}

.rate-limit-details {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-xl);
}

/* Rate Limit Stats */
.rate-limit-stats {
  background: #fef3c7;
  border-radius: 0.375rem;
  padding: 1rem;
  margin: 1rem 0;
  border-left: 4px solid #f59e0b;
}

.rate-limit-stats-title {
  font-weight: 600;
  color: #92400e;
  margin-bottom: 0.5rem;
}

.rate-limit-stats-footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #f59e0b;
}

.rate-limit-info-note {
  margin-top: 2rem;
  padding: 1rem;
  background: #f3f4f6;
  border-radius: 0.375rem;
  color: #6b7280;
  font-size: 0.875rem;
}

.rate-limit-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.rate-limit-stat-item {
  text-align: center;
}

.rate-limit-stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #92400e;
}

.rate-limit-stat-label {
  font-size: 0.875rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Recent Messages */
.rate-limit-recent-messages {
  background: #f9fafb;
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-top: 2rem;
  text-align: left;
}

.rate-limit-recent-messages-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 1rem;
}

.rate-limit-message-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid #e5e7eb;
}

.rate-limit-message-item:last-child {
  border-bottom: none;
}

.rate-limit-message-subject {
  font-weight: 500;
  color: #111827;
  flex: 1;
}

.rate-limit-message-time {
  font-size: 0.875rem;
  color: #6b7280;
}

.rate-limit-message-recipients {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-left: 1rem;
}

/* Actions */
.rate-limit-actions {
  margin-top: var(--space-2xl);
}

/* Responsive Design */
@media (max-width: 768px) {
  .rate-limit-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .rate-limit-message-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .rate-limit-message-time,
  .rate-limit-message-recipients {
    margin-left: 0;
    margin-top: 0.25rem;
  }
}

/* ===========================================
   GAME BOXSCORE PAGE COMPONENTS
   =========================================== */

/* Game Information Grid */
.boxscore-game-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.boxscore-info-item {
  background: var(--bg-tertiary);
  border: var(--border);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  text-align: center;
}

.boxscore-info-label {
  font-size: var(--text-xs);
  opacity: 0.8;
  margin-bottom: var(--space-xs);
}

.boxscore-info-value {
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
}

/* Teams Score Display */
.boxscore-teams-score {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2xl);
  margin-bottom: var(--space-md);
}

.boxscore-team-score {
  text-align: center;
  flex: 1;
  max-width: 200px;
}

.boxscore-team-name {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.boxscore-score-number {
  font-size: 4rem;
  font-weight: var(--font-bold);
  color: #dc2626;
  line-height: 1;
}

.boxscore-vs-separator {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
}

.boxscore-game-result {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  display: inline-block;
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  font-size: var(--text-sm);
}

.boxscore-result-win {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}

.boxscore-result-loss {
  background: var(--color-danger-light);
  color: var(--color-danger-dark);
}

.boxscore-result-tie {
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
}

.boxscore-no-score {
  color: var(--text-tertiary);
  font-style: italic;
}

/* Game Details */
.boxscore-game-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.boxscore-detail-item {
  text-align: center;
}

.boxscore-detail-value {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.boxscore-detail-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Action Buttons */
.boxscore-action-buttons {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin: var(--space-2xl) 0;
  flex-wrap: wrap;
}

/* Stats Grid */
.boxscore-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
}

@media (max-width: 1024px) {
  .boxscore-stats-grid {
    grid-template-columns: 1fr;
  }
}

.boxscore-stats-card-full-width {
  grid-column: 1 / -1;
  width: 100%;
}

/* Team Statistics Layout */
.boxscore-team-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
}

/* Power Play and Penalty Kill Rows */
.boxscore-pp-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.boxscore-pk-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

/* Stats Tables */
.boxscore-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.boxscore-stats-table th {
  background: var(--bg-tertiary);
  padding: var(--space-sm);
  text-align: center !important;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  border-bottom: 2px solid var(--border-color);
}

.boxscore-stats-table th.text-left {
  text-align: left !important;
}

.boxscore-stats-table td {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--border-light);
  text-align: center !important;
}

.boxscore-stats-table td.player-name {
  text-align: left !important;
}

.boxscore-stats-table tbody tr:hover {
  background: var(--bg-tertiary);
}

.boxscore-player-name {
  text-align: left;
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.boxscore-player-number {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

/* Responsive Design */
@media (max-width: 768px) {
  .boxscore-stats-grid {
    grid-template-columns: 1fr;
  }
  
  .boxscore-teams-score {
    flex-direction: column;
    gap: var(--space-md);
  }
  
  .boxscore-vs-separator {
    transform: rotate(90deg);
  }
  
  .boxscore-action-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .boxscore-game-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Additional Boxscore Utility Classes */
.boxscore-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.boxscore-overflow-auto {
  overflow-x: auto;
}

.boxscore-text-center {
  text-align: center;
}

.boxscore-action-flex {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  justify-content: center;
}

.boxscore-margin-spacer {
  margin: 2rem 0;
}

.boxscore-no-score-large {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.boxscore-link-clean {
  text-decoration: none;
  color: inherit;
}

.boxscore-opacity-half {
  opacity: 0.5;
}

.boxscore-strikethrough {
  text-decoration: line-through;
  color: #9ca3af;
}

.boxscore-check-icon {
  color: #059669;
}

.boxscore-times-icon {
  color: #dc2626;
}

.boxscore-pdf-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  border: 2px dashed #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}

.boxscore-pdf-content {
  text-align: center;
}

.boxscore-pdf-icon {
  font-size: 3rem;
  color: #dc2626;
  margin-bottom: 1rem;
}

.boxscore-pdf-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 0.5rem 0;
}

.boxscore-pdf-subtitle {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0 0 1rem 0;
}

.boxscore-pdf-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 2px solid #e5e7eb;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.boxscore-pdf-caption {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 1rem 0 0 0;
}

.boxscore-btn-inline-flex {
  display: inline-flex;
  align-items: center;
}

.boxscore-team-card-spacing {
  margin-top: 3rem;
}

/* ===========================================
   MESSAGES PAGE COMPONENTS
   =========================================== */

/* Messages Container */
.messages-container {
  width: 100%;
}

/* Message Items */
.messages-message-item {
  padding: var(--space-xl);
  border-bottom: 1px solid var(--border-light);
  transition: background 0.2s ease;
}

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

.messages-message-item:hover {
  background: var(--bg-tertiary);
}

/* Message Header */
.messages-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-md);
}

.messages-info {
  flex: 1;
}

.messages-subject {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.messages-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.messages-sender {
  font-weight: var(--font-medium);
}

.messages-date {
  color: var(--text-tertiary);
}

/* Message Stats */
.messages-stats {
  display: flex;
  gap: var(--space-lg);
  font-size: var(--text-sm);
}

.messages-stat-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.messages-stat-success {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}

.messages-stat-failed {
  background: var(--color-danger-light);
  color: var(--color-danger-dark);
}

.messages-stat-total {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* Message Preview */
.messages-preview {
  margin-top: var(--space-md);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.messages-preview p {
  margin: var(--space-sm) 0;
}

.messages-preview p:first-child {
  margin-top: 0;
}

.messages-preview p:last-child {
  margin-bottom: 0;
}

.messages-preview ul,
.messages-preview ol {
  margin: var(--space-sm) 0;
  padding-left: var(--space-xl);
}

.messages-preview strong {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.messages-preview em {
  font-style: italic;
}

.messages-preview a {
  color: var(--color-primary);
  text-decoration: underline;
}

.messages-preview a:hover {
  color: var(--color-primary-dark);
}

.messages-preview blockquote {
  border-left: 4px solid var(--border-color);
  padding-left: var(--space-lg);
  margin: var(--space-sm) 0;
  font-style: italic;
  color: var(--text-secondary);
}

.messages-preview pre {
  background: var(--bg-secondary);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: var(--text-xs);
}

.messages-preview code {
  background: var(--bg-secondary);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}

/* Message Actions */
.messages-actions {
  margin-top: var(--space-md);
  display: flex;
  gap: var(--space-sm);
}

/* Pagination */
.messages-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
}

.messages-pagination-btn {
  padding: var(--space-sm) var(--space-md);
  border: var(--border);
  background: white;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.messages-pagination-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--text-tertiary);
}

.messages-pagination-btn.current {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

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

.messages-pagination-info {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* Expand Toggle */
.messages-expand-toggle {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: 0;
  margin-top: var(--space-sm);
}

.messages-expand-toggle:hover {
  text-decoration: underline;
}

/* Message Full */
.messages-full {
  display: none;
  margin-top: var(--space-md);
  padding: var(--space-lg);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  border: var(--border);
}

.messages-full.expanded {
  display: block;
}

/* Additional Messages Utility Classes */
.messages-scroll-container {
  max-height: 400px;
  overflow-y: auto;
}

.messages-tab-container {
  display: flex;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
  border-bottom: 2px solid var(--border-color);
}

.messages-tab-button {
  padding: var(--space-sm) var(--space-lg);
  background: none;
  border: none;
  color: var(--text-secondary);
  font-weight: var(--font-medium);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.messages-tab-content {
  display: none;
}

.messages-section-margin {
  margin-bottom: var(--space-lg);
}

.messages-button-margin {
  margin-right: var(--space-sm);
}

.messages-contacts-list {
  max-height: 300px;
  overflow-y: auto;
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
}

.messages-center-text {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--text-secondary);
}

.messages-manual-list {
  margin-top: var(--space-lg);
  max-height: 200px;
  overflow-y: auto;
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
}

.messages-contact-item {
  display: flex;
  align-items: center;
  padding: var(--space-md);
  border-radius: var(--radius-sm);
}

.messages-contact-checkbox {
  margin-right: 0.75rem;
}

.messages-contact-label {
  flex: 1;
  cursor: pointer;
}

.messages-contact-name {
  font-weight: 500;
  color: #111827;
}

.messages-contact-email {
  font-size: 0.875rem;
  color: #6b7280;
}

.messages-icon-success {
  color: #10b981;
  margin-right: 0.5rem;
}

.messages-icon-error {
  color: #ef4444;
  margin-right: 0.5rem;
}

.messages-delivery-item {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border-bottom: 1px solid #f3f4f6;
}

.messages-delivery-email {
  font-weight: 500;
}

.messages-error-container {
  padding: 1rem;
  border-bottom: 1px solid #f3f4f6;
}

.messages-error-title {
  font-weight: 500;
  color: #ef4444;
  margin-bottom: 0.25rem;
}

.messages-error-detail {
  font-size: 0.875rem;
  color: #6b7280;
}

.messages-center-error {
  text-align: center;
  padding: 2rem;
  color: #ef4444;
}

.messages-center-empty {
  text-align: center;
  padding: 2rem;
  color: #6b7280;
}

.messages-manual-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  border-bottom: 1px solid #f3f4f6;
}

.messages-manual-email {
  font-weight: 500;
  color: #111827;
}

.messages-remove-button {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  padding: 0.25rem;
}

.messages-manual-empty {
  text-align: center;
  padding: 1rem;
  color: #6b7280;
}

/* ===========================================
   SCHEDULE LIST PAGE COMPONENTS
   =========================================== */

/* Modal and Google Maps Autocomplete */
.schedule-modal {
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}

.schedule-gmp-place-autocomplete {
    width: 100%;
    padding: var(--space-sm);
    border: var(--border);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-family: inherit;
}

.schedule-gmp-place-autocomplete:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

/* Form Layout */
.schedule-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
}

.schedule-form-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* Header Components - REMOVED DUPLICATE */

/* Event Cards */
.schedule-event-card {
    padding: var(--space-lg);
    border: var(--border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    transition: var(--transition-all);
}

.schedule-event-card:last-child {
    margin-bottom: 0;
}

/* Today's Events Highlight */
.schedule-event-card.schedule-today {
    background: linear-gradient(135deg, var(--color-warning-light) 0%, var(--color-warning) 100%);
    border-color: var(--color-warning);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.schedule-event-card.schedule-today .schedule-event-title {
    color: var(--color-warning-dark);
    font-weight: var(--font-bold);
}

.schedule-event-card.schedule-today .schedule-event-details {
    color: var(--color-warning-dark);
}

/* Past Events */
.schedule-past-event {
    border-left: 4px solid var(--color-gray-400);
    opacity: 0.7;
}

/* Game Events */
.schedule-event-card.schedule-game {
    border-left: 4px solid var(--color-success);
    border-color: var(--color-success);
}

/* Location Links */
.schedule-location-link {
    color: var(--color-primary);
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px dotted var(--color-primary);
}

.schedule-location-link:hover {
    color: var(--color-primary-dark);
    border-bottom-style: solid;
}

/* Event Layout */
.schedule-event-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.schedule-event-info {
    flex: 1;
}

.schedule-event-title {
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
}

.schedule-event-details {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.schedule-event-actions {
    display: flex;
    gap: var(--space-md);
}

/* Event Type Color Coding */
.schedule-event-type-practice { 
    color: var(--color-danger); 
}

.schedule-event-type-gym { 
    color: var(--color-warning); 
}

.schedule-event-type-video { 
    color: var(--color-primary); 
}

.schedule-event-type-meeting { 
    color: var(--text-primary); 
}

.schedule-event-type-meal { 
    color: var(--color-warning-dark); 
}

.schedule-event-type-other { 
    color: var(--text-secondary); 
}

/* Game Icons */
.schedule-game-icon {
    color: var(--color-success);
}

/* Today Badge */
.schedule-today-badge {
    background: var(--color-warning-dark);
    color: var(--text-inverse);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    margin-left: var(--space-sm);
    font-size: var(--text-xs);
}

/* Practice Plan Link */
.schedule-practice-plan-link {
    background: #8b5cf6;
    color: var(--text-inverse);
}

/* Sections */
.schedule-section {
    margin-bottom: var(--space-2xl);
}

.schedule-section-with-border {
    margin-top: var(--space-xl);
}

/* Load More Components */
.schedule-load-more-container {
    text-align: center;
    padding: var(--space-lg) 0;
    margin-top: var(--space-lg);
}

.schedule-load-more-container .btn {
    min-width: 200px;
}

/* Past Events Container */
.schedule-past-events-container {
    border-top: 2px solid var(--border-color);
    margin-top: var(--space-md);
    padding-top: var(--space-lg);
}

/* View Toggle */
.schedule-view-toggle {
    display: flex;
    gap: var(--space-sm);
    background: var(--bg-tertiary);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.schedule-view-toggle a,
.schedule-view-toggle button {
    padding: var(--space-sm) var(--space-md);
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: var(--transition-all);
    text-decoration: none;
    color: inherit;
}

.schedule-view-toggle .btn:hover {
    background: var(--bg-secondary);
}

/* Calendar View Button */
.schedule-calendar-btn {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    text-decoration: none;
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

/* Active List View Button */
.schedule-list-btn {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--color-info);
    box-shadow: var(--shadow-sm);
    border: none;
}

/* Filter Components */
.schedule-filter-container {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-lg);
    padding: var(--space-xl);
}

.schedule-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
}

.schedule-filter-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.schedule-filter-controls {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-md);
    justify-content: center;
}

.schedule-filter-btn {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-xs);
    border: var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-all);
}

.schedule-filter-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Filter Toggle Button */
.schedule-filter-toggle {
    background: var(--color-info);
    color: var(--text-inverse);
    border: none;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: var(--transition-all);
}

.schedule-filter-content {
    display: none;
}

.schedule-filter-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-md);
}

.schedule-filter-option {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    transition: var(--transition-colors);
}

.schedule-filter-option:hover {
    background: var(--bg-secondary);
}

.schedule-filter-checkbox {
    width: var(--space-lg);
    height: var(--space-lg);
    accent-color: var(--color-primary);
}

.schedule-filter-label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.schedule-filter-count {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}

.schedule-filter-icon {
    width: var(--space-md);
    height: var(--space-md);
    border-radius: var(--radius-sm);
    display: inline-block;
    margin-right: var(--space-xs);
}

/* Filter Icon Colors */
.schedule-icon-game { 
    background: var(--color-success); 
}

.schedule-icon-practice { 
    background: var(--color-danger); 
}

.schedule-icon-gym { 
    background: #ea580c; 
}

.schedule-icon-video { 
    background: var(--color-info); 
}

.schedule-icon-meeting { 
    background: var(--color-gray-800); 
}

.schedule-icon-meal { 
    background: var(--color-warning-dark); 
}

.schedule-icon-other { 
    background: var(--color-gray-500); 
}

/* Month Headers */
.schedule-month-header {
    margin: var(--space-2xl) 0 var(--space-md) 0;
    padding: var(--space-md) 0;
    border-bottom: 2px solid var(--border-color);
}

.schedule-month-header h4 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.schedule-month-header:first-child {
    margin-top: 0;
}

/* Button Overrides */
.schedule-btn-blue {
    background: var(--color-info) !important;
    color: var(--text-inverse) !important;
}

.schedule-btn-blue:hover {
    background: var(--color-info-dark) !important;
    color: var(--text-inverse) !important;
}

/* Form Components */
.schedule-form-container {
    padding: var(--space-xl);
}

.schedule-form-checkbox-container {
    margin-top: var(--space-sm);
}

.schedule-form-checkbox-label {
    margin: 0;
    font-size: var(--text-sm);
}

/* Timezone Selector */
.schedule-timezone-selector {
    cursor: pointer;
    font-size: var(--text-xs);
    color: var(--color-info);
    padding: var(--space-sm);
    background: #f0f9ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.schedule-timezone-dropdown {
    display: none;
    position: relative;
    z-index: 10;
}

.schedule-timezone-select {
    font-size: var(--text-sm);
}

.schedule-timezone-info {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-xs);
}

/* Delete Sections */
.schedule-delete-section {
    display: none;
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
}

.schedule-delete-content {
    margin-bottom: var(--space-md);
}

.schedule-delete-title {
    color: var(--color-danger);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-sm);
}

.schedule-delete-description {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-md);
}

.schedule-delete-btn {
    background: var(--color-danger);
    color: var(--text-inverse);
    font-size: var(--text-sm);
}

.schedule-delete-selector {
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--color-danger);
    padding: var(--space-md);
    background: var(--color-danger-light);
    border: 1px solid #fca5a5;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.schedule-delete-chevron {
    font-size: 0.6rem;
    float: right;
    transition: var(--transition-transform);
}

.schedule-delete-warning {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-md);
}

.schedule-delete-warning-icon {
    color: var(--color-danger);
}

/* Repeat Options */
.schedule-repeat-options-container {
    display: none;
}

.schedule-repeat-info {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-xs);
}

.schedule-repeat-edit-options {
    display: none;
    font-size: var(--text-sm);
    padding: var(--space-md);
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    margin-top: var(--space-sm);
}

.schedule-repeat-edit-title {
    margin-bottom: var(--space-sm);
    font-weight: var(--font-semibold);
    color: var(--color-warning-dark);
}

.schedule-repeat-edit-description {
    margin-bottom: var(--space-sm);
    color: var(--color-warning-dark);
}

.schedule-repeat-edit-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.schedule-repeat-edit-radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.schedule-repeat-edit-radio-input {
    margin-right: var(--space-sm);
}

.schedule-repeat-delete-options {
    display: none;
    font-size: var(--text-sm);
    padding: var(--space-md);
    background: var(--color-danger-light);
    border: 1px solid #fca5a5;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.schedule-repeat-delete-title {
    margin-bottom: var(--space-sm);
    font-weight: var(--font-semibold);
    color: var(--color-danger);
}

.schedule-repeat-delete-description {
    margin-bottom: var(--space-sm);
    color: var(--color-danger-dark);
}

.schedule-repeat-delete-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.schedule-repeat-delete-radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.schedule-repeat-delete-radio-input {
    margin-right: var(--space-sm);
}

/* Practice Plan Group */
.schedule-practice-plan-group {
    display: block;
}

/* ===========================================
   PRACTICES PAGE COMPONENTS
   =========================================== */

/* Practice Header */
.practices-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: white;
  padding: var(--space-2xl);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-2xl);
}

.practices-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-md);
}

.practices-actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* Calendar Container */
.practices-calendar-container {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-2xl);
}

.practices-calendar-header {
  background: var(--bg-tertiary);
  padding: var(--space-lg);
  border-bottom: var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.practices-calendar-nav {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

.practices-calendar-nav button {
  background: var(--bg-secondary);
  border: none;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-colors);
}

.practices-calendar-nav button:hover {
  background: var(--color-gray-300);
}

.practices-calendar-month {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.practices-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.practices-calendar-day-header {
  padding: var(--space-lg) var(--space-sm);
  text-align: center;
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border-bottom: var(--border);
  font-size: var(--text-sm);
}

.practices-calendar-day {
  min-height: 120px;
  border-right: var(--border);
  border-bottom: var(--border);
  padding: var(--space-sm);
  position: relative;
}

.practices-calendar-day:last-child {
  border-right: none;
}

.practices-calendar-day-number {
  font-weight: var(--font-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.practices-calendar-day.other-month .practices-calendar-day-number {
  color: var(--text-tertiary);
}

.practices-calendar-day.today {
  background: var(--color-primary-light);
}

.practices-calendar-day.today .practices-calendar-day-number {
  background: var(--color-primary);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
}

/* Practice Items */
.practices-item {
  background: var(--color-primary);
  color: white;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  margin-bottom: var(--space-sm);
  cursor: pointer;
  transition: var(--transition-all);
}

.practices-item:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.practices-item.repeat {
  background: var(--color-primary-dark);
}

.practices-item.repeat:hover {
  background: var(--color-primary-darker);
}

/* Practices List */
.practices-list {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.practices-list-header {
  background: var(--bg-tertiary);
  padding: var(--space-lg);
  border-bottom: var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.practices-list-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.practices-card {
  padding: var(--space-lg);
  border-bottom: var(--border);
  transition: var(--transition-colors);
}

.practices-card:hover {
  background: var(--bg-tertiary);
}

.practices-card:last-child {
  border-bottom: none;
}

.practices-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-sm);
}

.practices-info {
  flex: 1;
}

.practices-card-title {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.practices-details {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.practices-badge {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.practices-badge-regular {
  background: var(--color-primary-lightest);
  color: var(--color-primary);
}

.practices-badge-repeat {
  background: var(--color-success-light);
  color: var(--color-primary-dark);
}

.practices-card-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* View Toggle */
.practices-view-toggle {
  display: flex;
  gap: var(--space-xs);
  background: var(--bg-tertiary);
  padding: var(--space-xs);
  border-radius: var(--radius-md);
}

.practices-view-toggle button {
  padding: var(--space-sm) var(--space-lg);
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: var(--transition-all);
}

.practices-view-toggle button.active {
  background: var(--bg-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* Repeat Section */
.practices-repeat-section {
  background: var(--bg-tertiary);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-top: var(--space-lg);
}

.practices-repeat-section.hidden {
  display: none;
}

/* ===========================================
   SCHEDULE PAGE COMPONENTS
   =========================================== */

/* Schedule Actions */
.schedule-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  flex-wrap: wrap;
}

/* Calendar Components */
.schedule-calendar-header {
  background: var(--bg-secondary);
  padding: var(--space-md);
  border-bottom: var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.schedule-calendar-nav {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.schedule-calendar-nav button {
  background: var(--color-gray-200);
  border: none;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-all);
}

.schedule-calendar-nav button:hover {
  background: var(--color-gray-300);
}

.schedule-calendar-month {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.schedule-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.schedule-calendar-day-header {
  padding: var(--space-lg) var(--space-sm);
  text-align: center;
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border-bottom: var(--border);
  font-size: var(--text-sm);
}

.schedule-calendar-day {
  min-height: 120px;
  border-right: var(--border);
  border-bottom: var(--border);
  padding: var(--space-sm);
  position: relative;
}

.schedule-calendar-day:last-child {
  border-right: none;
}

.schedule-calendar-day-number {
  font-weight: var(--font-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.schedule-calendar-day.other-month .schedule-calendar-day-number {
  color: var(--color-gray-300);
}

.schedule-calendar-day.today {
  background: var(--color-primary-lightest);
}

.schedule-calendar-day.today .schedule-calendar-day-number {
  background: var(--color-primary);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
}

/* Game Items */
.schedule-game-item {
  background: var(--color-danger);
  color: white;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  margin-bottom: var(--space-xs);
  cursor: pointer;
  transition: var(--transition-all);
}

.schedule-game-item:hover {
  background: var(--color-danger-dark);
  transform: translateY(-1px);
}

.schedule-game-item.home {
  background: var(--color-success);
}

.schedule-game-item.home:hover {
  background: var(--color-success-dark);
}

/* Event Items */
.schedule-event-item {
  color: white;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  margin-bottom: var(--space-xs);
  cursor: pointer;
  transition: var(--transition-all);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.schedule-event-item:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}

.schedule-event-item i {
  font-size: 0.6rem;
}

/* Event Type Colors */
.schedule-event-item.practice {
  background: var(--color-danger);
}
.schedule-event-item.practice:hover {
  background: var(--color-danger-dark);
}

.schedule-event-item.gym {
  background: var(--color-warning);
}
.schedule-event-item.gym:hover {
  background: var(--color-warning-dark);
}

.schedule-event-item.video {
  background: var(--color-primary);
}
.schedule-event-item.video:hover {
  background: var(--color-primary-dark);
}

.schedule-event-item.meeting {
  background: var(--color-gray-800);
}
.schedule-event-item.meeting:hover {
  background: var(--color-gray-900);
}

.schedule-event-item.meal {
  background: var(--color-warning-dark);
}
.schedule-event-item.meal:hover {
  background: var(--color-warning-darker);
}

.schedule-event-item.study {
  background: var(--color-info);
}
.schedule-event-item.study:hover {
  background: var(--color-info-dark);
}

.schedule-event-item.other {
  background: var(--color-gray-500);
}
.schedule-event-item.other:hover {
  background: var(--color-gray-600);
}

/* Schedule List */
.schedule-list-header {
  background: var(--bg-tertiary);
  padding: var(--space-lg);
  border-bottom: var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xl);
}

.schedule-list-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.schedule-list-title button {
  color: inherit;
  text-align: left;
  width: 100%;
}

.schedule-list-title button:hover {
  color: var(--color-primary);
}

.schedule-event-card {
  padding: var(--space-lg);
  border-bottom: var(--border);
  transition: var(--transition-colors);
}

.schedule-event-card:hover {
  background: var(--bg-tertiary);
}

.schedule-event-card:last-child {
  border-bottom: none;
}

.schedule-event-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-sm);
}

.schedule-event-info {
  flex: 1;
}

.schedule-event-title {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.schedule-event-details {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.schedule-event-badge {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.schedule-badge-game {
  background: var(--color-danger-lightest);
  color: var(--color-danger);
}

.schedule-badge-game.home {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}

.schedule-badge-practice {
  background: var(--color-info-light);
  color: var(--color-info-dark);
}

.schedule-badge-regular-season {
  background: var(--color-primary-lightest);
  color: var(--color-primary);
}

.schedule-badge-league {
  background: var(--color-primary-lightest);
  color: var(--color-primary);
}

.schedule-badge-exhibition {
  background: var(--color-purple-light);
  color: var(--color-purple-dark);
}

.schedule-event-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* Form Grid */
.schedule-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
}

.schedule-form-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* View Toggle */
.schedule-view-toggle {
  display: flex;
  gap: var(--space-xs);
  background: var(--bg-tertiary);
  padding: var(--space-xs);
  border-radius: var(--radius-md);
}

.schedule-view-toggle button {
  padding: var(--space-sm) var(--space-lg);
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: var(--transition-all);
}

.schedule-view-toggle button.active {
  background: var(--bg-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* Legend */
.schedule-legend {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
  flex-wrap: wrap;
}

.schedule-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
}

.schedule-legend-color {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-sm);
}

.schedule-legend-game {
  background: var(--color-danger);
}

.schedule-legend-game-home {
  background: var(--color-success);
}

.schedule-legend-practice {
  background: var(--color-danger);
}

.schedule-legend-gym {
  background: var(--color-warning);
}

.schedule-legend-video {
  background: var(--color-primary);
}

.schedule-legend-meeting {
  background: var(--color-gray-800);
}

.schedule-legend-meal {
  background: var(--color-warning-dark);
}

.schedule-legend-study {
  background: var(--color-info);
}

.schedule-legend-other {
  background: var(--color-gray-500);
}

.schedule-time-tbd {
  color: var(--text-secondary);
  font-style: italic;
}

/* ===========================================
   NAVIGATION TABS (Universal)
   =========================================== */

.nav-tabs {
  display: flex;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
  border-bottom: 2px solid var(--border-color);
}

.nav-tab {
  padding: var(--space-sm) var(--space-lg);
  background: none;
  border: none;
  color: var(--text-secondary);
  font-weight: var(--font-medium);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: var(--transition-all);
}

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

.nav-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.tab-content {
  display: block;
}

.tab-pane {
  display: none;
}

.tab-pane.show,
.tab-pane.active {
  display: block;
}

.select-buttons {
  display: flex;
  gap: var(--space-sm);
}

/* Badges */
.badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: var(--space-sm);
}

/* ===========================================
   SCHEDULE LIST PAGE COMPONENTS
   =========================================== */

/* Schedule Modal Dropdown Styles */
.schedule-list-modal-dropdown {
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

/* Google Maps PlaceAutocompleteElement Styling */
gmp-place-autocomplete {
  width: 100%;
  padding: var(--space-sm);
  border: var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: inherit;
}

gmp-place-autocomplete:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* Form Elements */
.schedule-list-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
}

.schedule-list-form-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Schedule Header - REMOVED DUPLICATE */

/* Event Cards */
.schedule-list-event-card {
  padding: var(--space-lg);
  border: var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  transition: var(--transition-all);
}

.schedule-list-event-card:last-child {
  margin-bottom: 0;
}

.schedule-list-event-card.today {
  background: linear-gradient(135deg, var(--color-warning-light) 0%, var(--color-warning) 100%);
  border-color: var(--color-warning);
  box-shadow: var(--shadow-lg);
}

.schedule-list-event-card.today .schedule-list-event-title {
  color: var(--color-warning-dark);
  font-weight: var(--font-bold);
}

.schedule-list-event-card.today .schedule-list-event-details {
  color: var(--color-warning-dark);
}

.schedule-list-event-card.game {
  border-left: 4px solid var(--color-success);
  border-color: var(--color-success);
}

.schedule-list-past-event {
  border-left: 4px solid var(--color-gray-400);
}

/* Event Content */
.schedule-list-event-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.schedule-list-event-info {
  flex: 1;
}

.schedule-list-event-title {
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

.schedule-list-event-details {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.schedule-list-event-actions {
  display: flex;
  gap: var(--space-md);
}

/* Event Type Colors */
.schedule-list-event-type-practice { color: var(--color-danger); }
.schedule-list-event-type-gym { color: var(--color-warning); }
.schedule-list-event-type-video { color: var(--color-primary); }
.schedule-list-event-type-meeting { color: var(--text-primary); }
.schedule-list-event-type-meal { color: var(--color-warning-dark); }
.schedule-list-event-type-other { color: var(--text-secondary); }

/* Location Links */
.schedule-list-location-link {
  color: var(--color-primary);
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px dotted var(--color-primary);
}

.schedule-list-location-link:hover {
  color: var(--color-primary-dark);
  border-bottom-style: solid;
}

/* Schedule Sections */
.schedule-list-section {
  margin-bottom: var(--space-2xl);
}

.schedule-list-load-more-container {
  text-align: center;
  padding: var(--space-lg) 0;
  margin-top: var(--space-lg);
}

.schedule-list-load-more-container .btn {
  min-width: 200px;
}

/* Past Events Container */
#past-events-container {
  border-top: 2px solid var(--border-color);
  margin-top: var(--space-md);
  padding-top: var(--space-lg);
}

/* View Toggle */
.schedule-list-view-toggle {
  display: flex;
  gap: var(--space-sm);
  background: var(--bg-tertiary);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
}

.schedule-list-view-toggle a,
.schedule-list-view-toggle button {
  padding: var(--space-md) var(--space-lg);
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: var(--transition-all);
  text-decoration: none;
  color: inherit;
}

.schedule-list-view-toggle .btn:hover {
  background: var(--bg-secondary);
}

/* Event Filters */
.schedule-list-filter-container {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-lg);
  padding: var(--space-xl);
}

.schedule-list-filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
}

.schedule-list-filter-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.schedule-list-filter-controls {
  display: flex;
  gap: var(--space-md);
}

.schedule-list-filter-btn {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-xs);
  border: var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-all);
}

.schedule-list-filter-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--border-color);
}

.schedule-list-filter-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
}

.schedule-list-filter-option {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  transition: var(--transition-colors);
}

.schedule-list-filter-option:hover {
  background: var(--bg-secondary);
}

.schedule-list-filter-checkbox {
  width: var(--space-lg);
  height: var(--space-lg);
  accent-color: var(--color-primary);
}

.schedule-list-filter-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.schedule-list-filter-count {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.schedule-list-filter-icon {
  width: var(--space-lg);
  height: var(--space-lg);
  border-radius: var(--radius-sm);
  display: inline-block;
  margin-right: var(--space-xs);
}

/* Filter Icon Colors */
.schedule-list-icon-game { background: var(--color-success); }
.schedule-list-icon-practice { background: var(--color-danger); }
.schedule-list-icon-gym { background: var(--color-warning); }
.schedule-list-icon-video { background: var(--color-primary); }
.schedule-list-icon-meeting { background: var(--color-gray-800); }
.schedule-list-icon-meal { background: var(--color-warning-dark); }
.schedule-list-icon-other { background: var(--color-gray-500); }

/* Month Headers */
.schedule-list-month-header {
  margin: var(--space-2xl) 0 var(--space-lg) 0;
  padding: var(--space-md) 0;
  border-bottom: 2px solid var(--border-color);
}

.schedule-list-month-header h4 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.schedule-list-month-header:first-child {
  margin-top: 0;
}

/* Button Overrides */
.schedule-list-btn-blue {
  background: var(--color-primary) !important;
  color: white !important;
}

.schedule-list-btn-blue:hover {
  background: var(--color-primary-dark) !important;
  color: white !important;
}

/* Layout Utilities */
.schedule-list-flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.schedule-list-filter-controls-centered {
  margin-top: var(--space-lg);
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
}

.schedule-list-card-margin {
  margin-bottom: var(--space-2xl);
}

.schedule-list-hidden {
  display: none;
}

.schedule-list-card-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.schedule-list-filter-title-primary {
  color: var(--color-primary);
}

.schedule-list-toggle-btn {
  background: var(--color-primary);
  color: white;
  border: none;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: var(--transition-all);
}

.schedule-list-toggle-btn:hover {
  background: var(--color-primary-dark);
}

.schedule-list-view-btn-inactive {
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  text-decoration: none;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.schedule-list-view-btn-active {
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  background: white;
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  border: none;
}

.schedule-list-hockey-icon {
  color: var(--color-success);
}

.schedule-list-today-badge {
  background: var(--color-warning-dark);
  color: white;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  margin-left: var(--space-sm);
  font-size: var(--text-xs);
}

.schedule-list-section-margin {
  margin-top: var(--space-2xl);
}

.schedule-list-past-event-opacity {
  opacity: 0.7;
}

.schedule-list-plan-btn {
  background: var(--color-purple-600);
  color: white;
}

.schedule-list-hidden-btn {
  display: none;
}

.schedule-list-past-title-btn {
  padding: 0;
  text-decoration: none;
  background: none;
  border: none;
  font-size: inherit;
  font-weight: inherit;
}

.schedule-list-form-padding {
  padding: var(--space-xl);
}

.schedule-list-form-checkbox-margin {
  margin-top: var(--space-sm);
}

.schedule-list-form-label {
  margin: 0;
  font-size: var(--text-sm);
}

.schedule-list-timezone-selector {
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--color-primary);
  padding: var(--space-sm);
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}

.schedule-list-timezone-chevron {
  font-size: 0.6rem;
}

.schedule-list-timezone-dropdown {
  display: none;
  position: relative;
  z-index: 10;
}

.schedule-list-timezone-select {
  font-size: var(--text-sm);
}

.schedule-list-timezone-note {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

.schedule-list-delete-section {
  display: none;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: var(--border);
}

.schedule-list-delete-section-visible {
  display: block;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: var(--border);
}

.schedule-list-delete-heading {
  color: var(--color-danger);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-sm);
}

.schedule-list-delete-text {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

.schedule-list-help-text {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

.schedule-list-delete-btn {
  background: var(--color-danger);
  color: white;
  font-size: var(--text-sm);
}

.schedule-list-form-group-margin {
  margin-bottom: var(--space-lg);
}

.schedule-list-form-group-visible {
  display: block;
}

.schedule-list-repeat-edit-options {
  display: none;
  font-size: var(--text-sm);
  padding: var(--space-md);
  background: var(--color-warning-light);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  margin-top: var(--space-sm);
}

.schedule-list-repeat-title {
  margin-bottom: var(--space-sm);
  font-weight: var(--font-semibold);
  color: var(--color-warning-dark);
}

.schedule-list-repeat-description {
  margin-bottom: var(--space-sm);
  color: var(--color-warning-dark);
}

.schedule-list-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.schedule-list-radio-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.schedule-list-radio-input {
  margin-right: var(--space-sm);
}

.schedule-list-delete-selector {
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-danger);
  padding: var(--space-md);
  background: var(--color-danger-light);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}

.schedule-list-delete-chevron {
  font-size: 0.6rem;
  float: right;
  transition: transform 0.2s ease;
}

.schedule-list-warning-icon {
  color: var(--color-danger);
}

.schedule-list-repeat-delete-options {
  display: none;
  font-size: var(--text-sm);
  padding: var(--space-md);
  background: var(--color-danger-light);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}

.schedule-list-delete-warning-title {
  margin-bottom: var(--space-sm);
  font-weight: var(--font-semibold);
  color: var(--color-danger);
}

.schedule-list-delete-warning-text {
  margin-bottom: var(--space-sm);
  color: var(--color-danger-dark);
}

/* ===========================================
   MESSAGE PAGE COMPONENTS
   =========================================== */

/* Recipients Section */
.message-recipients-section {
  background: var(--bg-primary);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.message-recipients-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: var(--border);
}

.message-recipients-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.message-select-buttons {
  display: flex;
  gap: var(--space-sm);
}

/* Recipients Tabs */
.message-recipients-tabs {
  display: flex;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
  border-bottom: 2px solid var(--border-color);
}

.message-tab-button {
  padding: var(--space-sm) var(--space-lg);
  background: none;
  border: none;
  color: var(--text-secondary);
  font-weight: var(--font-medium);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: var(--transition-all);
}

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

.message-tab-button.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Recipients List */
.message-recipients-list {
  max-height: 400px;
  overflow-y: auto;
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
}

.message-recipient-group {
  margin-bottom: var(--space-lg);
}

.message-recipient-group-title {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

.message-recipient-item {
  display: flex;
  align-items: center;
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  transition: var(--transition-colors);
  border-bottom: 1px solid var(--border-light);
}

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

.message-recipient-item:hover {
  background: var(--bg-tertiary);
}

.message-recipient-checkbox {
  margin-right: var(--space-md);
}

.message-recipient-info {
  flex: 1;
  cursor: pointer;
}

.message-recipient-name {
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.message-recipient-details {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.message-recipient-email {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Quill Editor Styles */
.message-editor {
  min-height: 200px;
  background: var(--bg-primary);
}

.message-ql-toolbar {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
  border: var(--border);
  border-bottom: none;
  background: var(--bg-tertiary);
}

/* High specificity selectors to override Quill CDN CSS */
#messageEditor .ql-container {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  border: var(--border);
  font-size: var(--text-base);
  height: 400px !important;
}

#messageEditor .ql-editor {
  min-height: 400px !important;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* Fallback selectors for compatibility */
.message-ql-container {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  border: var(--border);
  font-size: var(--text-base);
  height: 400px;
}

.message-ql-editor {
  min-height: 400px;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.message-ql-editor.ql-blank::before {
  color: var(--text-tertiary);
  font-style: normal;
}

/* Quill Theme Customization */
.ql-snow .ql-picker-label {
  color: var(--text-primary);
}

.ql-snow .ql-stroke {
  stroke: var(--text-secondary);
}

.ql-snow .ql-fill {
  fill: var(--text-secondary);
}

.ql-snow button:hover .ql-stroke,
.ql-snow button.ql-active .ql-stroke {
  stroke: var(--color-primary);
}

.ql-snow button:hover .ql-fill,
.ql-snow button.ql-active .ql-fill {
  fill: var(--color-primary);
}

/* Playbook Quill Editor Styles */
#quill-editor {
  min-height: 150px;
  background: var(--bg-primary);
}

#quill-editor .ql-container {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  border: var(--border);
  font-size: var(--text-base);
}

#quill-editor .ql-toolbar {
  border: var(--border);
  border-bottom: none;
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
  background: var(--bg-secondary);
}

#quill-editor .ql-editor {
  color: var(--text-primary);
  background: var(--bg-primary);
}

#quill-editor .ql-editor.ql-blank::before {
  color: var(--text-tertiary);
  font-style: italic;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
  #quill-editor {
    min-height: 120px;
  }
  
  #quill-editor .ql-toolbar {
    padding: 8px;
  }
  
  #quill-editor .ql-toolbar .ql-formats {
    margin-right: 8px;
  }
}

/* Playbook Content List Styling - Updated for Quill compatibility */
/* Note: These rules are superseded by more specific Quill rules further down */

/* Form Elements */
.message-form-textarea {
  min-height: 200px;
  resize: vertical;
}

.message-selected-count {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-sm);
}

.message-loading-spinner {
  display: none;
  margin-left: var(--space-sm);
}

.btn-primary:disabled .message-loading-spinner {
  display: inline-block;
}

/* Message Results */
.message-result {
  display: none;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
}

.message-success {
  background: var(--color-success-light);
  color: var(--color-success-dark);
  border: 1px solid var(--color-success);
}

.message-error {
  background: var(--color-danger-light);
  color: var(--color-danger-dark);
  border: 1px solid var(--color-danger);
}

.message-failure-list {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
}

/* Manual Email Entry */
.message-manual-entry-section {
  padding: var(--space-lg);
}

.message-manual-emails-list {
  border: var(--border);
  border-radius: var(--radius-md);
  max-height: 300px;
  overflow-y: auto;
}

.manual-email-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: var(--border-light);
}

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

.manual-email-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.manual-email-address {
  font-weight: var(--font-medium);
  color: var(--text-primary);
  cursor: pointer;
}

.remove-email-btn {
  background: none;
  border: none;
  color: var(--color-danger);
  cursor: pointer;
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  transition: var(--transition-colors);
}

.remove-email-btn:hover {
  background: var(--color-danger-light);
}

.message-manual-email-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: var(--border-light);
}

.message-manual-email-item:last-child {
  border-bottom: none;
}

.message-manual-email-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.message-manual-email-checkbox {
  margin-right: var(--space-md);
}

.message-manual-email-address {
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.message-remove-email-btn {
  background: none;
  border: none;
  color: var(--color-danger);
  cursor: pointer;
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  transition: var(--transition-colors);
}

.message-remove-email-btn:hover {
  background: var(--color-danger-light);
}

/* Mailing Lists */
.message-mailing-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg);
  border-bottom: var(--border-light);
  transition: var(--transition-colors);
}

.message-mailing-list-item:hover {
  background: var(--bg-tertiary);
}

.message-mailing-list-item:last-child {
  border-bottom: none;
}

.message-mailing-list-info {
  flex: 1;
  display: flex;
  align-items: center;
}

.message-mailing-list-name {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.message-mailing-list-meta {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.message-mailing-list-actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.message-mailing-list-action-btn {
  padding: var(--space-sm);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-all);
  font-size: var(--text-sm);
}

.message-mailing-list-action-btn:hover {
  background: var(--border-color);
  color: var(--text-primary);
}

.message-mailing-list-action-btn.delete-btn:hover {
  background: var(--color-danger-light);
  color: var(--color-danger-dark);
}

.message-no-lists-message {
  text-align: center;
  padding: var(--space-3xl);
  color: var(--text-secondary);
}

.message-no-lists-message i {
  font-size: var(--text-3xl);
  color: var(--border-color);
  margin-bottom: var(--space-lg);
}

/* Rate Limit Indicator */
.message-rate-limit-indicator {
  background: var(--color-info-lightest);
  border: 1px solid var(--color-info);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.message-rate-limit-indicator.warning {
  background: var(--color-warning-lightest);
  border-color: var(--color-warning);
}

.message-rate-limit-icon {
  font-size: var(--text-lg);
  color: var(--color-info);
}

.message-rate-limit-indicator.warning .message-rate-limit-icon {
  color: var(--color-warning);
}

.message-rate-limit-info {
  flex: 1;
}

.message-rate-limit-title {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.message-rate-limit-details {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.message-rate-limit-usage {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

/* Schedule List - Additional classes for remaining inline styles - REMOVED DUPLICATES */

.schedule-list-repeat-edit-warning-title {
  margin-bottom: var(--space-sm);
  font-weight: var(--font-semibold);
  color: #92400e;
}

.schedule-list-repeat-edit-warning-desc {
  margin-bottom: var(--space-sm);
  color: #a16207;
}

.schedule-list-radio-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.schedule-list-radio-input {
  margin-right: var(--space-sm);
}

.schedule-list-delete-selector {
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-danger);
  padding: var(--space-md);
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}

.schedule-list-delete-chevron {
  font-size: 0.6rem;
  float: right;
  transition: transform 0.2s ease;
}

.schedule-list-delete-warning-icon {
  color: var(--color-danger);
}

.schedule-list-repeat-delete-options {
  display: none;
  font-size: var(--text-sm);
  padding: var(--space-md);
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}

.schedule-list-repeat-delete-title {
  margin-bottom: var(--space-sm);
  font-weight: var(--font-semibold);
  color: var(--color-danger);
}

.schedule-list-repeat-delete-desc {
  margin-bottom: var(--space-sm);
  color: #991b1b;
}

/* ===========================================
   PLAYBOOK COMPONENTS
   =========================================== */

/* Playbook Grid Layout */
.playbook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

/* Playbook Card */
.playbook-card {
  background: var(--bg-primary);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: var(--transition-all);
  box-shadow: var(--shadow-sm);
}

.playbook-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.playbook-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.playbook-description {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin-bottom: var(--space-lg);
}

.playbook-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--space-lg);
}

.playbook-actions {
  display: flex;
  gap: var(--space-md);
}

/* Create Playbook Section */
.playbook-create-section {
  background: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
  color: white;
  padding: var(--space-2xl);
  border-radius: var(--radius-lg);
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.playbook-create-section h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-md);
}

.playbook-create-section p {
  margin-bottom: var(--space-xl);
  opacity: 0.9;
}

/* Playbook Section Counter */
.playbook-section-counter {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.playbook-section-counter-public {
  background: var(--color-info-light);
  color: var(--color-info-dark);
}

.playbook-section-counter-protected {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

/* Playbook Password Protection */
.playbook-password-container {
  max-width: 500px;
  margin: var(--space-2xl) auto;
  background: var(--bg-primary);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-md);
}

.playbook-password-icon {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.playbook-password-icon i {
  font-size: var(--text-5xl);
  color: var(--color-primary);
}

.playbook-password-title {
  text-align: center;
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.playbook-password-subtitle {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: var(--space-2xl);
}

.playbook-password-error {
  background: var(--color-danger-lightest);
  color: var(--color-danger-dark);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-danger);
  margin-bottom: var(--space-lg);
  font-size: var(--text-sm);
}

.playbook-info {
  background: var(--color-primary-lightest);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
  text-align: center;
}

.playbook-info-title {
  font-weight: var(--font-semibold);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-sm);
}

.playbook-info-desc {
  font-size: var(--text-sm);
  color: var(--color-primary-dark);
}

/* ===========================================
   PLAYBOOK EDITOR COMPONENTS
   =========================================== */

/* Editor Layout */
.playbook-editor {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
}

/* Content Sidebar */
.playbook-content-sidebar {
  background: var(--bg-tertiary);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  height: fit-content;
  max-height: calc(100vh - var(--space-2xl) - var(--space-2xl));
  overflow-y: auto;
  position: sticky;
  top: var(--space-2xl);
  z-index: 1200; /* Higher than inter-section drop zones (1100) to prevent interference */
}

/* Custom scrollbar styling for sidebar */
.playbook-content-sidebar::-webkit-scrollbar {
  width: 6px;
}

.playbook-content-sidebar::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.playbook-content-sidebar::-webkit-scrollbar-thumb {
  background: var(--border-hover);
  border-radius: var(--radius-sm);
  transition: var(--transition-all);
}

.playbook-content-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* Firefox scrollbar styling */
.playbook-content-sidebar {
  scrollbar-width: thin;
  scrollbar-color: var(--border-hover) var(--bg-secondary);
}

.playbook-content-sidebar h3 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
}

/* Content Types (Draggable) */
.playbook-content-type {
  display: flex;
  align-items: center;
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  background: var(--bg-primary);
  border: var(--border);
  border-radius: var(--radius-md);
  cursor: grab;
  transition: var(--transition-all);
  /* Enable native drag support */
  -webkit-user-drag: element;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.playbook-content-type:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.playbook-content-type:active {
  cursor: grabbing;
}

.playbook-content-type.dragging {
  opacity: 0.8;
  transform: scale(1.1) rotate(3deg);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  cursor: grabbing;
  z-index: 1000;
  border-color: var(--color-primary);
  background: var(--color-primary-lightest);
  transition: all 0.2s ease;
}

.playbook-content-type i {
  width: var(--space-xl);
  text-align: center;
  margin-right: var(--space-md);
}

.playbook-content-type-name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

/* Editor Container */
.playbook-editor-container {
  background: var(--bg-primary);
  border: var(--border);
  border-radius: var(--radius-lg);
  min-height: 600px;
}

.playbook-editor-header {
  border-bottom: var(--border);
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transition: all 0.3s ease;
  overflow: hidden;
}

.playbook-editor-content {
  padding: var(--space-xl);
}

.playbook-sections {
  min-height: 400px;
}

/* Drop Zone */
.playbook-drop-zone {
  border: 3px dashed var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  text-align: center;
  color: var(--text-secondary);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: all 0.3s ease;
  position: relative;
  background: var(--bg-primary);
}

.playbook-drop-zone:hover {
  border-color: var(--color-primary-light);
  background: var(--bg-secondary);
}

.playbook-drop-zone.drag-over {
  border-color: var(--color-success);
  border-width: 4px;
  background: linear-gradient(135deg, var(--color-success-lightest), var(--color-primary-lightest));
  color: var(--color-success-dark);
  transform: scale(1.02);
  box-shadow: 0 0 30px rgba(34, 197, 94, 0.3);
  animation: pulse-drop-zone 1.5s ease-in-out infinite;
}

@keyframes pulse-drop-zone {
  0%, 100% {
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(34, 197, 94, 0.5);
  }
}

.playbook-drop-zone i {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-lg);
  opacity: 0.5;
}

/* Success Feedback Animation */
.drop-zone-success {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(34, 197, 94, 0.95);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: white;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s ease;
  z-index: 10;
}

.drop-zone-success.show {
  opacity: 1;
  transform: scale(1);
}

.drop-zone-success.hide {
  opacity: 0;
  transform: scale(1.1);
}

.drop-zone-success .success-icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
  animation: success-bounce 0.6s ease;
}

.drop-zone-success .success-text {
  text-align: center;
  font-size: var(--text-lg);
}

.drop-zone-success .success-text strong {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
}

@keyframes success-bounce {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Inter-Section Drop Zones - Compact and less intrusive */
.inter-section-drop-zone {
  height: 24px; /* Compact default height */
  margin: 12px 0; /* More space around zones */
  border-radius: 8px; /* More rounded */
  background: rgba(34, 197, 94, 0.3); /* More visible background */
  border: 3px dashed rgba(34, 197, 94, 0.7); /* Thicker, more visible border */
  transition: all 0.2s ease; /* Faster transitions for better responsiveness */
  position: relative;
  opacity: 0;
  transform: scaleY(0);
  min-height: 24px;
  display: block;
  z-index: 1100; /* Higher than dragged sections */
  pointer-events: auto; /* Ensure they can receive events */
  cursor: copy; /* Visual feedback for drop capability */
}

.inter-section-drop-zone.drag-over {
  height: 32px; /* Slightly bigger on hover */
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.4), rgba(34, 197, 94, 0.6));
  border-color: rgba(34, 197, 94, 0.9);
  border-width: 4px;
  opacity: 1;
  transform: scaleY(1) scaleX(1.02); /* Slight horizontal expand */
  box-shadow: 0 4px 20px rgba(34, 197, 94, 0.3);
}

.inter-section-drop-zone .drop-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-success-dark);
  font-size: var(--text-base); /* Bigger text */
  font-weight: var(--font-semibold); /* Bolder text */
  opacity: 0.8; /* Always slightly visible */
  transition: opacity 0.2s ease;
  text-align: center;
  pointer-events: none;
}

.inter-section-drop-zone.drag-over .drop-indicator {
  opacity: 1;
}

/* Show drop zones when any section is being dragged - Use container class instead of body */
.playbook-editor.dragging .inter-section-drop-zone,
.playbook-sections.dragging .inter-section-drop-zone,
body.playbook-dragging .inter-section-drop-zone {
  opacity: 1 !important;
  transform: scaleY(1) !important;
  background: rgba(34, 197, 94, 0.2) !important;
  border-color: rgba(34, 197, 94, 0.6) !important;
  height: 24px !important;
  visibility: visible !important;
  display: block !important;
  z-index: 1100 !important; /* Ensure they're above dragged elements */
  pointer-events: auto !important; /* Force event reception */
  cursor: copy !important; /* Visual feedback */
}

/* Enhanced visual feedback for drop zones during active dragging */
body.playbook-dragging .inter-section-drop-zone:hover {
  background: var(--color-primary-lightest);
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Drag Handle Styling - Enhanced for mouse events */
.drag-handle {
  cursor: grab;
  transition: all 0.2s ease;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  touch-action: none; /* Prevent touch scrolling during drag */
}

.drag-handle:hover {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  transform: scale(1.05);
}

.drag-handle:active {
  cursor: grabbing;
  transform: scale(0.95);
  background: var(--color-primary);
  color: white;
}

/* Ensure drag handle is always visible and clickable */
.drag-handle i {
  pointer-events: none;
}

/* Reorder Success Message */
.reorder-success-message {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-lg);
  background: var(--color-success);
  color: white;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  opacity: 0;
  transform: translateX(100px);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.reorder-success-message.show {
  opacity: 1;
  transform: translateX(0);
}

.reorder-success-message.hide {
  opacity: 0;
  transform: translateX(100px);
}

/* Playbook Sections */
.playbook-section {
  background: var(--bg-tertiary);
  border: var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
  position: relative;
  transition: var(--transition-all);
}

.playbook-section:hover {
  border-color: var(--color-primary);
}

.playbook-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-secondary);
  border-bottom: var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.playbook-section-type {
  display: flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  flex: 1;
}

.playbook-section-type i {
  width: var(--space-xl);
  text-align: center;
  margin-right: var(--space-sm);
}

.playbook-section-actions {
  display: flex;
  gap: var(--space-sm);
}

.playbook-section-content {
  padding: var(--space-lg);
}

/* Section Action Buttons */
.playbook-btn-icon {
  width: 2rem;
  height: 2rem;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: var(--transition-all);
}

.playbook-btn-icon:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.playbook-drag-handle {
  cursor: grab;
}

.playbook-drag-handle:active {
  cursor: grabbing;
}

/* Text Formatting Toolbar */
.playbook-formatting-toolbar {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border: var(--border);
  border-radius: var(--radius-md);
}

.playbook-format-btn {
  width: 2rem;
  height: 2rem;
  border: var(--border);
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-xs);
  transition: var(--transition-all);
}

.playbook-format-btn:hover,
.playbook-format-btn.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.playbook-color-picker {
  width: 2rem;
  height: 2rem;
  border: var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* Access Management Sections */
.playbook-password-section {
  background: var(--color-danger-lightest);
  border: 1px solid var(--color-danger-light);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.playbook-password-section-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-danger);
  margin-bottom: var(--space-sm);
}

.playbook-access-management {
  background: var(--color-warning-lightest);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.playbook-access-management-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-warning-dark);
  margin-bottom: var(--space-sm);
}

/* Additional form and layout utility classes for playbook editor */
.playbook-form-text-secondary {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

.playbook-form-checkbox-label {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.playbook-form-checkbox {
  margin-right: var(--space-sm);
}

.playbook-form-label-inline {
  margin-bottom: 0;
}

.playbook-form-note {
  font-size: var(--text-xs);
  color: var(--color-info-dark);
  margin-top: var(--space-xs);
}

.playbook-form-note-secondary {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

.playbook-password-input-hidden {
  display: none;
}

.playbook-password-toggle-icon {
  color: var(--text-secondary);
  cursor: pointer;
}

.playbook-save-actions {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2xl);
}

.playbook-save-buttons {
  display: flex;
  gap: var(--space-sm);
}

.playbook-auto-save-icon {
  margin-right: var(--space-sm);
}

.playbook-section-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 1300;
}

.playbook-modal-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-lg);
  width: 100%;
}

.playbook-modal-content {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  max-width: 48rem;
  min-width: 32rem;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.playbook-modal-inner {
  padding: var(--space-2xl);
}

.playbook-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
}

.playbook-modal-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.playbook-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
}

/* Playbook Section Components */
.playbook-section {
  background: var(--bg-primary);
  border: var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  overflow: hidden;
  transition: all 0.2s ease;
}

.playbook-section:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.playbook-section.dragging-section {
  opacity: 0.5; /* Make it more transparent to show it's being moved */
  transform: scale(0.95); /* Slightly smaller, no rotation for cleaner look */
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
  z-index: 900; /* Lower than drop zones (1100) */
  border: 2px solid var(--color-primary);
  background: var(--color-primary-lightest);
  transition: none; /* Disable transitions during drag for better performance */
  position: relative; /* Ensure proper stacking context */
  /* Removed pointer-events: none to allow drag events to work properly */
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-secondary);
  border-bottom: var(--border);
}

.section-type {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.section-actions {
  display: flex;
  gap: var(--space-xs);
}

.section-content {
  padding: var(--space-lg);
}

/* Section content styling */
.section-content h2,
.section-content h3,
.section-content p,
.section-content ul,
.section-content ol {
  margin: 0;
}

.youtube-preview,
.streamable-preview,
.drill-preview,
.plan-preview,
.image-preview,
.file-preview,
.divider-preview {
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-color);
}

.drag-over {
  background: var(--color-primary-light) !important;
  border-color: var(--color-primary) !important;
}

/* Playbook Visibility Settings */
.playbook-visibility-settings {
  background: var(--bg-secondary);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.playbook-visibility-header {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
}

.visibility-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.visibility-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.visibility-option:hover {
  border-color: var(--color-primary-light);
  background: var(--bg-primary);
}

.visibility-option input[type="radio"] {
  margin-top: 2px;
  flex-shrink: 0;
}

.visibility-option input[type="radio"]:checked + .option-content {
  color: var(--color-primary);
}

.visibility-option:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-lightest);
}

.option-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.option-content strong {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.option-content span {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Public Options Section */
.public-options {
  border-top: var(--border);
  padding-top: var(--space-lg);
  margin-top: var(--space-lg);
}

.public-options.hidden {
  display: none;
}

/* Playbook URL Section */
.playbook-url-section {
  margin-bottom: var(--space-lg);
}

.url-input-group {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.url-input {
  flex: 1;
  background: var(--bg-tertiary);
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.copy-btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all 0.2s ease;
}

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

.copy-btn:active {
  transform: translateY(1px);
}

/* Password Protection Option */
.password-protection-option {
  margin-top: var(--space-lg);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  flex-shrink: 0;
}

.password-input {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  margin-top: var(--space-sm);
}

.password-input.hidden {
  display: none;
}

.password-input input[type="password"] {
  flex: 1;
}

.password-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--bg-secondary);
  border: var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.password-toggle:hover {
  background: var(--bg-tertiary);
}

/* Responsive */
@media (max-width: 768px) {
  .playbook-editor {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  
  .playbook-content-sidebar {
    order: 2;
    position: static;
  }
  
  .playbook-modal-content {
    min-width: 20rem;
    width: 95%;
    margin: var(--space-md);
  }
  
  .playbook-modal-container {
    padding: var(--space-md);
  }
  
  .playbook-modal-inner {
    padding: var(--space-lg);
  }
  
  .visibility-options {
    gap: var(--space-sm);
  }
  
  .visibility-option {
    padding: var(--space-sm);
  }
  
  .url-input-group {
    flex-direction: column;
  }
  
  .copy-btn {
    align-self: flex-start;
  }
}

/* Collapsible Header for Playbook Editor */
.playbook-editor-header.collapsed .playbook-header-content {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.playbook-editor-header:not(.collapsed) .playbook-header-content {
  max-height: 1000px;
  opacity: 1;
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.playbook-header-toggle {
  padding: var(--space-md) var(--space-xl);
  background: var(--bg-secondary);
  border-bottom: var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.header-toggle-button {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  background: none;
  border: none;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: var(--space-sm) 0;
}

.header-toggle-button:hover {
  color: var(--color-primary);
}

.header-toggle-button .toggle-icon {
  margin-left: auto;
  transition: transform 0.3s ease;
}

.playbook-editor-header:not(.collapsed) .toggle-icon {
  transform: rotate(180deg);
}

.playbook-header-content {
  transition: all 0.3s ease;
  overflow: hidden;
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}

/* Inter-section Drop Zones */
.inter-section-drop-zone {
  opacity: 0;
  transform: scaleY(0);
  height: 0;
  margin: 0;
  padding: 0;
  transition: all 0.3s ease;
  border: 2px dashed transparent;
  border-radius: var(--radius-md);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  pointer-events: none;
}

/* Show drop zones when dragging */
.playbook-dragging .inter-section-drop-zone {
  opacity: 0.7;
  transform: scaleY(1);
  height: 24px;
  margin: var(--space-md) 0;
  padding: var(--space-sm);
  border-color: var(--color-primary);
  background: var(--color-primary-lightest);
  pointer-events: auto;
}

/* Hover and drag-over states */
.playbook-dragging .inter-section-drop-zone:hover,
.inter-section-drop-zone.drag-over {
  opacity: 1;
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  transform: scaleY(1.05);
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.2);
}

.inter-section-drop-zone .drop-indicator {
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: var(--font-medium);
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
}

/* ===========================================
   SHARED PLAYBOOK COMPONENTS
   For public/shared playbook viewing
   =========================================== */

/* Shared page wrapper for consistent width */
.shared-page-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--space-lg);
}

/* Responsive behavior for shared pages */
@media (max-width: 768px) {
  .shared-page-wrapper {
    padding: 0 var(--space-md);
  }
}

@media (max-width: 480px) {
  .shared-page-wrapper {
    padding: 0 var(--space-sm);
  }
}

/* Shared header navigation - extends full width across wrapper */
.shared-header {
  background: var(--bg-secondary);
  border-bottom: var(--border);
  padding: var(--space-2xl) 0;
  margin: 0 calc(-1 * var(--space-lg)) var(--space-2xl);
}

.shared-header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  text-align: center;
}

.shared-breadcrumbs {
  background: var(--bg-primary);
  padding: var(--space-md) 0;
  border-bottom: var(--border);
  margin: 0 calc(-1 * var(--space-lg)) var(--space-lg);
}

.shared-breadcrumbs .breadcrumbs {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.shared-breadcrumbs a {
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition-colors);
}

.shared-breadcrumbs a:hover {
  text-decoration: underline;
}

.shared-breadcrumbs span {
  color: var(--text-secondary);
}

/* Team branding */
.shared-team-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin: 0 auto var(--space-lg);
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.shared-team-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shared-team-name {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.shared-playbook-title {
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.shared-playbook-description {
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Password protection */
.shared-password-container {
  max-width: 500px;
  margin: var(--space-3xl) auto;
  padding: 0 var(--space-lg);
}

.shared-password-card {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2xl);
  text-align: center;
}

.shared-lock-icon {
  width: 4rem;
  height: 4rem;
  background: var(--color-danger-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-lg);
}

.shared-lock-icon i {
  font-size: var(--text-2xl);
  color: var(--color-danger);
}

.shared-password-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.shared-password-description {
  color: var(--text-secondary);
  margin-bottom: var(--space-2xl);
}

/* Content area - now inherits width from wrapper */
.shared-content {
  padding: 0 0 var(--space-3xl);
}

.shared-playbook-sections {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-2xl);
}

/* Empty state */
.shared-empty-state {
  text-align: center;
  padding: var(--space-4xl) var(--space-2xl);
  color: var(--text-secondary);
}

.shared-empty-state i {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-lg);
  opacity: 0.5;
}

.shared-empty-state h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

/* Hide main navigation for shared views */
.shared-view .navbar,
.shared-view .main-header {
  display: none !important;
}

.shared-view body {
  padding-top: 0 !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .shared-team-logo {
    width: 80px;
    height: 80px;
  }
  
  .shared-team-name {
    font-size: var(--text-xl);
  }
  
  .shared-playbook-title {
    font-size: var(--text-lg);
  }
  
  .shared-password-card {
    padding: var(--space-xl) var(--space-lg);
  }
  
  .shared-password-title {
    font-size: var(--text-lg);
  }
}

/* Content styling for shared playbooks */
.shared-content .content-heading {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  margin: var(--space-2xl) 0 var(--space-md);
  color: var(--text-primary);
}

.shared-content .content-heading:first-child {
  margin-top: 0;
}

.shared-content .content-subheading {
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
  margin: var(--space-xl) 0 var(--space-md);
  color: var(--text-secondary);
}

.shared-content .content-text {
  font-size: var(--text-base);
  line-height: 1.75;
  margin: var(--space-md) 0;
  color: var(--text-secondary);
}

.shared-content .content-list {
  margin: var(--space-md) 0;
  padding-left: var(--space-xl);
  color: var(--text-secondary);
}

.shared-content .content-list li {
  margin: var(--space-sm) 0;
  line-height: 1.75;
}

.shared-content .content-link {
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  margin: var(--space-sm) 0;
  transition: var(--transition-colors);
}

.shared-content .content-link:hover {
  text-decoration: underline;
}

/* Let Quill handle all list formatting - only override display spacing */

/* Override Quill editor styles for display mode only */
.content-text.ql-editor,
.shared-content .content-text.ql-editor {
  height: auto !important;
  min-height: 0 !important;
  /* Keep horizontal padding for bullets, remove only vertical */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  /* Fix whitespace issue - don't preserve newlines in display mode */
  white-space: normal !important;
}

/* Override container margins for display mode */
.shared-content .content-text.ql-editor {
  margin: 0 !important;
}

/* Remove excess vertical spacing from paragraphs in lists */
.content-text.ql-editor p,
.shared-content .content-text.ql-editor p {
  margin: 0 !important;
}

/* Ensure reasonable list spacing */
.content-text.ql-editor > ul:first-child,
.content-text.ql-editor > ol:first-child,
.shared-content .content-text.ql-editor > ul:first-child,
.shared-content .content-text.ql-editor > ol:first-child {
  margin-top: 0 !important;
}

.content-text.ql-editor > ul:last-child,
.content-text.ql-editor > ol:last-child,
.shared-content .content-text.ql-editor > ul:last-child,
.shared-content .content-text.ql-editor > ol:last-child {
  margin-bottom: 0 !important;
}

/* YouTube embeds */
.shared-content .youtube-embed {
  margin: var(--space-2xl) 0;
}

/* Streamable embeds */
.shared-content .streamable-embed {
  margin: var(--space-2xl) 0;
}

.shared-content .video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.shared-content .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Images */
.shared-content .content-image {
  margin: var(--space-2xl) 0;
  text-align: center;
}

.shared-content .content-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.shared-content .image-caption {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-style: italic;
}

/* Image size classes */
.shared-content .content-image-small {
  display: inline-block;
  max-width: 300px;
}

.shared-content .content-image-medium {
  display: inline-block;
  max-width: 500px;
}

.shared-content .content-image-large {
  display: inline-block;
  max-width: 800px;
}

.shared-content .content-image-full {
  display: inline-block;
  max-width: 100%;
}

/* File downloads */
.shared-content .content-file {
  margin: var(--space-xl) 0;
  padding: var(--space-md);
  background: var(--bg-secondary);
  border: var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.shared-content .file-icon {
  font-size: var(--text-2xl);
  color: var(--color-primary);
}

.shared-content .file-info {
  flex: 1;
}

.shared-content .file-name {
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.shared-content .file-download {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-primary);
  color: white;
  text-decoration: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  transition: var(--transition-colors);
}

.shared-content .file-download:hover {
  background: var(--color-primary-hover);
  color: white;
  text-decoration: none;
}

/* Dividers */
.shared-content .content-divider {
  margin: var(--space-2xl) 0;
  border: none;
  border-top: var(--border);
}

/* Practice Plan References */
.shared-content .practice-plan-reference {
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  background: var(--bg-secondary);
  border: var(--border);
  border-radius: var(--radius-lg);
  border-left: 4px solid #4f46e5; /* Indigo accent */
}

.shared-content .practice-plan-reference .reference-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.shared-content .practice-plan-reference .reference-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.shared-content .practice-plan-reference .reference-meta {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--font-medium);
}

/* Drill References */
.shared-content .drill-reference {
  margin: 32px 0;
  padding: 32px;
  background: var(--bg-secondary);
  border: var(--border);
  border-radius: 16px;
  border-left: 6px solid #f97316; /* Orange accent */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.shared-content .drill-reference .reference-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.shared-content .drill-reference .reference-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.shared-content .drill-reference .reference-meta {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--font-medium);
}

/* Team playbook detail page reference styles */
.practice-plan-reference {
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  background: var(--bg-secondary);
  border: var(--border);
  border-radius: var(--radius-lg);
  border-left: 4px solid #4f46e5; /* Indigo accent */
}

.practice-plan-reference .reference-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.practice-plan-reference .reference-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.practice-plan-reference .reference-meta {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--font-medium);
}

.drill-reference {
  margin: 32px 0;
  padding: 32px;
  background: var(--bg-secondary);
  border: var(--border);
  border-radius: 16px;
  border-left: 6px solid #f97316; /* Orange accent */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.drill-reference .reference-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.drill-reference .reference-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.drill-reference .reference-meta {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--font-medium);
}

/* New Drill Reference Layout */
.drill-reference-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f3f4f6;
}

.drill-reference-header i {
  font-size: 28px;
}

.drill-reference-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

.drill-reference-media-section {
  margin-bottom: 0;
}

.drill-reference-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.drill-media-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #e5e7eb;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.drill-media-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.1);
}

.drill-media-thumb {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  height: auto;
  width: auto;
}

.drill-animation-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-size: 16px;
  gap: 8px;
  font-weight: 500;
}

.drill-animation-placeholder i {
  font-size: 48px;
  color: #3b82f6;
  opacity: 0.9;
}

.drill-media-more {
  text-align: center;
  padding: 8px;
  background: #f9fafb;
  border-radius: 6px;
  font-size: 14px;
  color: #6b7280;
  font-style: italic;
}

.drill-reference-description {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #f3f4f6;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.drill-reference-description h1,
.drill-reference-description h2,
.drill-reference-description h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 600;
  line-height: 1.4;
}

.drill-reference-description p {
  margin-bottom: 12px;
  line-height: 1.6;
}

.drill-reference-description ul,
.drill-reference-description ol {
  margin-left: 20px;
  margin-bottom: 12px;
  line-height: 1.6;
}

.drill-reference-description li {
  margin-bottom: 6px;
}

.drill-reference-description br {
  line-height: 1.6;
}

/* Handle both HTML and plain text content */
.drill-reference-description:not(:empty) {
  min-height: 1.6em;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .drill-reference-media-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .drill-reference {
    padding: 24px;
    margin: 24px 0;
  }
  
  .drill-reference-media-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .drill-media-item {
    min-height: 180px;
  }
  
  .drill-reference-header {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
  }
  
  .drill-reference-title {
    font-size: 24px;
  }
  
  .drill-reference-header i {
    font-size: 24px;
  }
  
  .drill-animation-placeholder i {
    font-size: 40px;
  }
}

@media (max-width: 480px) {
  .drill-reference {
    padding: 20px;
    margin: 20px 0;
  }
  
  .drill-media-item {
    min-height: 150px;
  }
  
  .drill-reference-title {
    font-size: 20px;
  }
  
  .drill-reference-header i {
    font-size: 20px;
  }
  
  .drill-animation-placeholder i {
    font-size: 36px;
  }
}

/* ===========================================
   FEATURE ACCESS COMPONENTS
   =========================================== */

/* Hero section for unauthenticated users */
.feature-access-hero {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
  color: white;
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  border-radius: var(--border-radius-lg);
  margin-bottom: var(--space-lg);
}

.feature-access-hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
}

.feature-access-hero p {
  font-size: 1.125rem;
  opacity: 0.9;
  margin-bottom: var(--space-lg);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.feature-access-hero .btn {
  background: white;
  color: var(--color-primary);
  padding: var(--space-md) var(--space-lg);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--border-radius-md);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  transition: all 0.2s ease;
}

.feature-access-hero .btn:hover {
  background: #f8f9fa;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Feature grid layout */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

/* Individual feature cards */
.feature-card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: var(--color-primary);
}

/* Feature card header */
.feature-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.feature-icon {
  font-size: 2rem;
  color: var(--color-primary);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(220, 53, 69, 0.1);
  border-radius: var(--border-radius-md);
  flex-shrink: 0;
}

.feature-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-xs) 0;
}

.feature-description {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}

/* Feature status indicator */
.feature-status {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--border-radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.feature-status.active {
  background: var(--color-success);
  color: white;
}

.feature-status.available {
  background: var(--color-warning);
  color: var(--color-text-primary);
}

/* Feature benefits list */
.feature-benefits {
  margin: var(--space-md) 0;
}

.feature-benefits h4 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-sm) 0;
}

.feature-benefits ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-benefits li {
  position: relative;
  padding-left: var(--space-md);
  margin-bottom: var(--space-xs);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.feature-benefits li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: 600;
}

/* Feature action button */
.feature-action {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: var(--border-radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  text-decoration: none;
}

.feature-action.btn-primary {
  background: var(--color-primary);
  color: white;
}

.feature-action.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

.feature-action.btn-success {
  background: var(--color-success);
  color: white;
  cursor: default;
}

.feature-action.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.feature-action.btn-outline:hover {
  background: var(--color-primary);
  color: white;
}

/* Access request form */
.access-request-form {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.access-request-form h2 {
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.access-request-form h2 i {
  color: var(--color-primary);
}

/* Selected features display */
.selected-features {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: var(--border-radius-md);
  padding: var(--space-md);
  margin: var(--space-md) 0;
}

.selected-features h4 {
  margin: 0 0 var(--space-sm) 0;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  font-weight: 600;
}

.selected-features-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.selected-feature-tag {
  background: var(--color-primary);
  color: white;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--border-radius-full);
  font-size: 0.75rem;
  font-weight: 600;
}

/* Rate limit info */
.rate-limit-info {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: var(--border-radius-md);
  padding: var(--space-md);
  margin: var(--space-md) 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.rate-limit-info i {
  color: #856404;
  font-size: 1.125rem;
}

.rate-limit-info span {
  color: #856404;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Responsive design */
@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  
  .feature-card {
    padding: var(--space-md);
  }
  
  .feature-card-header {
    gap: var(--space-sm);
  }
  
  .feature-icon {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }
  
  .feature-title {
    font-size: 1.125rem;
  }
  
  .access-request-form {
    padding: var(--space-lg);
  }
  
  .feature-access-hero h1 {
    font-size: 2rem;
  }
  
  .feature-access-hero p {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .feature-access-hero {
    padding: var(--space-lg) var(--space-md);
  }
  
  .feature-card {
    padding: var(--space-md);
  }
  
  .access-request-form {
    padding: var(--space-md);
  }
  
  .feature-card-header {
    flex-direction: column;
    text-align: center;
    gap: var(--space-sm);
  }
  
  .feature-status {
    position: static;
    display: inline-block;
    margin-top: var(--space-xs);
  }
}

/* ===========================================
   LEGACY MODAL STYLES (for .modal-backdrop pattern)
   NOTE: New modals should use universal-components/modals.css
   =========================================== */

/* Modal Backdrop - Full screen overlay */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.modal-backdrop.hidden {
    display: none !important;
}

/* Legacy Modal Content Container (scoped to modal-backdrop only) */
.modal-backdrop .modal-content {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    max-width: 32rem;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

/* Modal Header */
.modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Modal Body */
.modal-body {
    padding: 1.5rem;
}

/* Modal Footer */
.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Modal Close Button */
.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    transition: all 0.15s ease;
}

.modal-close:hover {
    background-color: #f3f4f6;
    color: #374151;
}

/* Modal Cancel Button */
.modal-cancel {
    cursor: pointer;
}

/* Responsive Modal Styles */
@media (max-width: 768px) {
    .modal-backdrop .modal-content {
        width: 95%;
        margin: 1rem;
    }
}

/* Print styles */
@media print {
  .shared-header,
  .shared-breadcrumbs {
    display: none !important;
  }

  .shared-content {
    max-width: 100%;
    padding: 0;
  }

  .shared-playbook-sections {
    box-shadow: none;
    padding: 0;
  }
}