@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg-primary: #1a1d21;
  --bg-secondary: #22262b;
  --bg-tertiary: #2a2e34;
  --bg-card: #2a2e34;
  --bg-hover: #33383f;
  --border-color: #3a3f47;
  --text-primary: #e8e8e8;
  --text-secondary: #a0a0a0;
  --text-muted: #6b7280;
  --green-accent: #2ecc71;
  --green-dark: #27ae60;
  --green-bg: #1a3a2a;
  --red-accent: #e74c3c;
  --blue-accent: #3498db;
  --orange-accent: #e67e22;
  --yellow-accent: #f1c40f;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  /* iOS PWA safe area support */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================
   TOP NAVBAR
   ========================================== */
.top-navbar {
  display: flex;
  align-items: center;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: 0 20px;
  height: 56px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.top-navbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 16px;
  flex-shrink: 0;
}

.top-navbar .brand .logo {
  width: 32px;
  height: 32px;
  background: var(--green-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.top-navbar .brand h1 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.brand-separator {
  color: rgba(255, 255, 255, 0.2);
  font-size: 18px;
  font-weight: 300;
  margin: 0 2px;
}

/* Brand Club Name Input */
.brand-club-name-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand-club-name-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary, #e8eaed);
  font-family: 'Inter', 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 4px 8px;
  border-radius: 6px;
  width: 160px;
  max-width: 200px;
  transition: all 0.25s ease;
  border-bottom: 2px solid transparent;
}

.brand-club-name-input::placeholder {
  color: var(--text-muted, #6b7280);
  font-weight: 400;
  font-style: italic;
}

.brand-club-name-input:hover {
  background: rgba(255, 255, 255, 0.06);
}

.brand-club-name-input:focus {
  background: rgba(255, 255, 255, 0.08);
  border-bottom-color: var(--accent, #2ecc71);
}


.top-navbar .nav-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  padding: 0 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.top-navbar .nav-tabs::-webkit-scrollbar {
  display: none;
}

.top-navbar .nav-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  transition: all 0.25s cubic-bezier(.4, 0, .2, 1);
  white-space: nowrap;
  position: relative;
  letter-spacing: 0.2px;
  user-select: none;
  flex-shrink: 0;
  border: 1px solid transparent;
}

.top-navbar .nav-tab::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60%;
  height: 2px;
  border-radius: 2px;
  background: var(--green-accent);
  transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
}

.top-navbar .nav-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.04);
}

.top-navbar .nav-tab.active {
  color: #ffffff;
  font-weight: 600;
  background: rgba(46, 204, 113, 0.10);
  border-color: rgba(46, 204, 113, 0.18);
}

.top-navbar .nav-tab.active::after {
  transform: translateX(-50%) scaleX(1);
}

.top-navbar .nav-tab .tab-icon {
  font-size: 13px;
  opacity: 0.7;
  transition: opacity 0.25s, transform 0.25s;
}

.top-navbar .nav-tab:hover .tab-icon {
  opacity: 1;
  transform: scale(1.08);
}

.top-navbar .nav-tab.active .tab-icon {
  opacity: 1;
}

/* Old PDF tab styles removed — now in settings dropdown */

.top-navbar .nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.top-navbar .nav-right .icon-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 4px;
  transition: all 0.2s;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}

.top-navbar .nav-right .icon-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

/* ==========================================
   NAV SAVE BUTTON
   ========================================== */
.nav-save-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.15), rgba(46, 204, 113, 0.08));
  border: 1px solid rgba(46, 204, 113, 0.3);
  color: var(--green-accent);
  padding: 6px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.nav-save-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.2), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.nav-save-btn:hover {
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.25), rgba(46, 204, 113, 0.15));
  border-color: rgba(46, 204, 113, 0.55);
  box-shadow: 0 2px 16px rgba(46, 204, 113, 0.2), 0 0 0 1px rgba(46, 204, 113, 0.1);
  transform: translateY(-1px);
}

.nav-save-btn:hover::before {
  opacity: 1;
}

.nav-save-btn:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 1px 8px rgba(46, 204, 113, 0.15);
}

.nav-save-icon {
  font-size: 14px;
  position: relative;
  z-index: 1;
  transition: transform 0.3s;
}

.nav-save-text {
  position: relative;
  z-index: 1;
}

.nav-save-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(46, 204, 113, 0.3);
  border-top-color: var(--green-accent);
  border-radius: 50%;
  animation: navSaveSpin 0.7s linear infinite;
  position: relative;
  z-index: 1;
}

.nav-save-check {
  display: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--green-accent);
  position: relative;
  z-index: 1;
  animation: navSaveCheckPop 0.4s cubic-bezier(.175, .885, .32, 1.275);
}

/* Saving state */
.nav-save-btn.saving {
  pointer-events: none;
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.12), rgba(46, 204, 113, 0.06));
  border-color: rgba(46, 204, 113, 0.4);
}

.nav-save-btn.saving .nav-save-icon {
  display: none;
}

.nav-save-btn.saving .nav-save-spinner {
  display: block;
}

.nav-save-btn.saving .nav-save-text::after {
  content: '...';
  animation: navSaveDots 1.2s steps(3, end) infinite;
}

/* Saved state */
.nav-save-btn.saved {
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.3), rgba(46, 204, 113, 0.15));
  border-color: rgba(46, 204, 113, 0.6);
  box-shadow: 0 0 20px rgba(46, 204, 113, 0.15);
}

.nav-save-btn.saved .nav-save-icon {
  display: none;
}

.nav-save-btn.saved .nav-save-spinner {
  display: none;
}

.nav-save-btn.saved .nav-save-check {
  display: inline-flex;
}

/* Error state */
.nav-save-btn.save-error {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1));
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
}

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

@keyframes navSaveCheckPop {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  60% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes navSaveDots {
  0% {
    content: '';
  }

  33% {
    content: '.';
  }

  66% {
    content: '..';
  }

  100% {
    content: '...';
  }
}

/* ==========================================
   SETTINGS AREA & DROPDOWN
   ========================================== */
.settings-area {
  position: relative;
}

.settings-area .settings-btn {
  font-size: 18px;
  padding: 6px 8px;
  border-radius: 8px;
  transition: all 0.25s ease;
}

.settings-area .settings-btn:hover {
  transform: rotate(30deg);
}

.settings-area.open .settings-btn {
  color: var(--green-accent);
  background: rgba(46, 204, 113, 0.12);
  transform: rotate(90deg);
}

.settings-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  background: rgba(22, 26, 32, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(24px);
  z-index: 500;
  opacity: 0;
  transform: translateY(-6px) scale(0.95);
  transition: opacity 0.2s cubic-bezier(.4, 0, .2, 1), transform 0.2s cubic-bezier(.4, 0, .2, 1);
}

.settings-area.open .settings-dropdown {
  display: block;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.settings-dropdown-header {
  padding: 8px 12px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 4px;
}

.settings-dropdown-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.settings-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.settings-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.settings-dropdown-item.active {
  background: rgba(74, 44, 138, 0.15);
  color: #c4a8f0;
}

.settings-item-icon {
  font-size: 15px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.settings-item-label {
  flex: 1;
}

.settings-dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 4px 8px;
}

/* Auth items inside settings dropdown */
.settings-auth-slot {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-auth-slot .settings-dropdown-item .auth-role-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.settings-auth-slot .settings-dropdown-item.settings-logout-item:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
}

/* ==========================================
   SETTINGS — Health Team Section
   ========================================== */
.settings-health-section {
  margin-top: 2px;
}

.settings-health-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.3), transparent);
  margin: 6px 8px 8px;
}

.settings-health-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 4px;
}

.settings-health-icon {
  font-size: 15px;
}

.settings-health-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #10b981;
}

.settings-health-body {
  padding: 4px 8px 4px;
}

.settings-health-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: var(--text-muted);
  font-size: 11px;
}

.settings-health-spinner {
  display: inline-block;
  animation: navSaveSpin 1s linear infinite;
  font-size: 14px;
}

.settings-health-error {
  padding: 8px 12px;
  color: #f87171;
  font-size: 11px;
  font-weight: 500;
}

/* Health Team — Invite Form */
.settings-health-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-health-input-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.settings-health-email-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--text-primary);
  font-size: 11px;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: all 0.2s;
  min-width: 0;
}

.settings-health-email-input::placeholder {
  color: var(--text-muted);
  font-size: 11px;
}

.settings-health-email-input:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
  background: rgba(255, 255, 255, 0.06);
}

.settings-health-send-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1));
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10b981;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.settings-health-send-btn:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(16, 185, 129, 0.18));
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.2);
}

.settings-health-send-btn:active {
  transform: scale(0.97);
}

.settings-health-send-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.settings-health-send-icon {
  font-size: 12px;
}

.settings-health-form-error {
  display: none;
  padding: 4px 8px;
  color: #f87171;
  font-size: 10px;
  font-weight: 500;
  background: rgba(239, 68, 68, 0.08);
  border-radius: 6px;
  border: 1px solid rgba(239, 68, 68, 0.15);
}

.settings-health-hint {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 2px 0 0;
  padding: 0 2px;
}

/* Health Team — Status Display */
.settings-health-status {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-health-status-row {
  display: flex;
  align-items: center;
}

.settings-health-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
}

.settings-health-status-badge.pending {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.settings-health-status-badge.active {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.settings-health-email-display {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-health-email-icon {
  font-size: 12px;
  flex-shrink: 0;
}

.settings-health-email-text {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
  word-break: break-all;
}

.settings-health-revoke-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.15);
  color: #f87171;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  justify-content: center;
}

.settings-health-revoke-btn:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
}

.settings-health-revoke-btn:active {
  transform: scale(0.97);
}

/* -- Coach Name & Age Category -- */
.nav-coach-area {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 8px;
  margin-right: 12px;
  flex-shrink: 0;
}

.nav-separator {
  color: rgba(255, 255, 255, 0.15);
  font-size: 18px;
  font-weight: 300;
}

.nav-coach-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  outline: none;
  cursor: text;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all 0.2s;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-coach-name:hover {
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.nav-coach-name:focus {
  border-color: var(--green-accent);
  background: rgba(46, 204, 113, 0.08);
  color: var(--text-primary);
}

#nav-coach-name:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  opacity: 0.5;
  font-weight: 400;
  font-style: italic;
}

.nav-age-selector {
  position: relative;
}

/* Locked age selector (antrenor mode) */
.nav-age-selector.age-locked .nav-age-btn {
  cursor: not-allowed;
  opacity: 0.85;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.08));
  border-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}

.nav-age-selector.age-locked .nav-age-chevron {
  display: none;
}

.nav-age-selector.age-locked .nav-age-btn::after {
  content: '🔒';
  font-size: 10px;
  margin-left: 2px;
}

.nav-age-selector.age-locked .nav-age-dropdown {
  display: none !important;
}

/* Shake animation for locked age selector */
.nav-age-selector.age-lock-shake .nav-age-btn {
  animation: authShake 0.5s ease;
}

.nav-age-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.15), rgba(46, 204, 113, 0.08));
  border: 1px solid rgba(46, 204, 113, 0.3);
  color: var(--green-accent);
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
  letter-spacing: 0.5px;
}

.nav-age-btn:hover {
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.25), rgba(46, 204, 113, 0.15));
  border-color: rgba(46, 204, 113, 0.5);
  box-shadow: 0 2px 10px rgba(46, 204, 113, 0.2);
}

.nav-age-chevron {
  font-size: 10px;
  transition: transform 0.2s;
}

.nav-age-selector.open .nav-age-chevron {
  transform: rotate(180deg);
}

.nav-age-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(28, 32, 38, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 6px;
  min-width: 90px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  z-index: 200;
  animation: ageDropIn 0.2s cubic-bezier(.4, 0, .2, 1);
  max-height: 320px;
  overflow-y: auto;
}

.nav-age-selector.open .nav-age-dropdown {
  display: flex;
  flex-direction: column;
}

@keyframes ageDropIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-6px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.nav-age-dropdown::-webkit-scrollbar {
  width: 4px;
}

.nav-age-dropdown::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.nav-age-option {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  padding: 7px 14px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  letter-spacing: 0.3px;
}

.nav-age-option:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.nav-age-option.active {
  background: rgba(46, 204, 113, 0.15);
  color: var(--green-accent);
}

.nav-age-option.nav-age-locked {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.nav-age-locked-selector {
  opacity: 0.5;
  pointer-events: none;
}

.nav-age-locked-selector .nav-age-btn {
  cursor: not-allowed;
}

/* ==========================================
   LAYOUT
   ========================================== */
.app-layout {
  display: flex;
  margin-top: 56px;
  height: calc(100vh - 56px);
}

/* ==========================================
   LEFT SIDEBAR — Squad Panel
   ========================================== */
.left-sidebar {
  width: 240px;
  min-width: 240px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

/* -- Header -- */
.sb-squad-header {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(180deg, rgba(46, 204, 113, 0.06) 0%, transparent 100%);
  flex-shrink: 0;
}

.sb-squad-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sb-squad-icon {
  font-size: 16px;
  width: 28px;
  height: 28px;
  background: rgba(46, 204, 113, 0.12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sb-squad-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--text-primary);
  flex: 1;
}

.sb-squad-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--green-accent);
  background: rgba(46, 204, 113, 0.12);
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

/* -- Search -- */
.sb-squad-search-wrap {
  padding: 10px 14px 6px;
  flex-shrink: 0;
}

.sb-squad-search {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--text-primary);
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.sb-squad-search::placeholder {
  color: var(--text-muted);
}

.sb-squad-search:focus {
  border-color: var(--green-accent);
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.12);
}

/* -- Position Filter Pills -- */
.sb-squad-filters {
  display: flex;
  gap: 4px;
  padding: 4px 14px 10px;
  flex-shrink: 0;
}

.sb-filter-pill {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.sb-filter-pill:hover {
  color: var(--text-secondary);
  border-color: var(--text-muted);
}

.sb-filter-pill.active {
  background: rgba(46, 204, 113, 0.12);
  border-color: rgba(46, 204, 113, 0.35);
  color: var(--green-accent);
}

/* -- Player List Container -- */
.sb-squad-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

/* -- Position Group Header -- */
.sb-pos-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 5px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-secondary);
}

.sb-pos-group-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sb-pos-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  flex: 1;
}

.sb-pos-group-count {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  padding: 1px 5px;
  border-radius: 4px;
}

/* -- Player Item -- */
.sb-player-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  cursor: pointer;
  user-select: none;
  transition: all 0.18s ease;
  border-left: 3px solid transparent;
  position: relative;
}

.sb-player-item:hover {
  background: var(--bg-hover);
  border-left-color: rgba(46, 204, 113, 0.5);
}

.sb-player-item.sb-active {
  background: rgba(46, 204, 113, 0.08);
  border-left-color: var(--green-accent);
}

.sb-player-item.sb-on-pitch::after {
  display: none;
}

.sb-player-number {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  position: relative;
  line-height: 1;
}

.sb-player-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sb-player-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.sb-player-pos {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3px;
  line-height: 1.2;
}

/* -- Group assignment indicator -- */
.sb-player-item.sb-in-group {
  background: rgba(46, 204, 113, 0.06);
  border-left-color: rgba(46, 204, 113, 0.3);
}

.sb-player-item.sb-in-group .sb-player-name {
  color: #fff;
}

.sb-group-indicator {
  display: flex;
  gap: 3px;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
  padding-right: 2px;
}

.sb-group-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: block;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* -- Empty state -- */
.sb-squad-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  text-align: center;
}

.sb-squad-empty-icon {
  font-size: 28px;
  margin-bottom: 8px;
  opacity: 0.5;
}

.sb-squad-empty-text {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.sb-squad-empty-hint {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 4px;
  opacity: 0.7;
}

/* -- Draggable sidebar player -- */
.sb-player-item[draggable="true"] {
  cursor: grab;
}

.sb-player-item[draggable="true"]:active {
  cursor: grabbing;
}

.sb-player-item.sb-dragging {
  opacity: 0.4;
  transform: scale(0.97);
}

/* ==========================================
   SIDEBAR — Multi-Select Checkbox
   ========================================== */
.sb-select-checkbox {
  width: 0;
  height: 18px;
  overflow: hidden;
  opacity: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(.4, 0, .2, 1);
}

.sb-select-check-icon {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  opacity: 0;
}

/* Show empty checkbox on ALL players in select mode */
.sb-select-mode .sb-select-checkbox {
  width: 22px;
  opacity: 1;
}

.sb-select-mode .sb-select-check-icon {
  opacity: 1;
  color: transparent;
}

/* Fill checkbox only on selected players */
.sb-player-item.sb-selected .sb-select-check-icon {
  opacity: 1;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  border-color: #2563eb;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.4);
}

/* ==========================================
   SIDEBAR — Multi-Select Player State
   ========================================== */
.sb-player-item.sb-selected {
  background: linear-gradient(90deg,
      rgba(37, 99, 235, 0.18) 0%,
      rgba(79, 70, 229, 0.10) 50%,
      rgba(37, 99, 235, 0.04) 100%) !important;
  border-left-color: #3b82f6 !important;
  border-left-width: 3px;
  box-shadow:
    inset 0 0 12px rgba(37, 99, 235, 0.08),
    0 1px 4px rgba(37, 99, 235, 0.15);
  position: relative;
}

.sb-player-item.sb-selected::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, #3b82f6, #818cf8, #3b82f6);
  background-size: 100% 200%;
  animation: sbSelectedBorderGlow 2s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}

@keyframes sbSelectedBorderGlow {

  0%,
  100% {
    background-position: 0% 0%;
  }

  50% {
    background-position: 0% 100%;
  }
}

.sb-player-item.sb-selected .sb-player-name {
  color: #bfdbfe;
  text-shadow: 0 0 6px rgba(59, 130, 246, 0.3);
  font-weight: 700;
}

.sb-player-item.sb-selected .sb-player-pos {
  color: #93c5fd !important;
}

.sb-player-item.sb-selected .sb-player-number {
  box-shadow:
    0 0 0 2px rgba(59, 130, 246, 0.5),
    0 0 10px rgba(59, 130, 246, 0.3);
  transform: scale(1.05);
  transition: all 0.25s cubic-bezier(.4, 0, .2, 1);
}

/* Hover in select mode */
.sb-select-mode .sb-player-item:hover {
  border-left-color: rgba(37, 99, 235, 0.5);
}

/* ==========================================
   SIDEBAR — Context Menu
   ========================================== */
.sb-context-menu {
  position: absolute;
  z-index: 1000;
  background: rgba(22, 26, 32, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 4px;
  min-width: 140px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  opacity: 0;
  transform: scale(0.92) translateY(-4px);
  transition: all 0.2s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}

.sb-context-menu.active {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.sb-ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  padding: 8px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}

.sb-ctx-item:hover {
  background: rgba(37, 99, 235, 0.12);
  color: #93c5fd;
}

.sb-ctx-icon {
  font-size: 12px;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: rgba(37, 99, 235, 0.15);
  color: #60a5fa;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sb-ctx-item:hover .sb-ctx-icon {
  background: rgba(37, 99, 235, 0.25);
  color: #93c5fd;
}

/* ==========================================
   SIDEBAR — Floating Selection Bar
   ========================================== */
.sb-selection-bar {
  position: absolute;
  bottom: 12px;
  left: 10px;
  right: 10px;
  z-index: 100;
  animation: sbSelBarSlideUp 0.35s cubic-bezier(.4, 0, .2, 1);
}

.sb-selection-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.92), rgba(79, 70, 229, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: 0 8px 32px rgba(37, 99, 235, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
}

.sb-selection-info {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
}

.sb-selection-check {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

.sb-selection-count {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.sb-selection-label {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.sb-selection-clear {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.sb-selection-clear:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.4);
}

@keyframes sbSelBarSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================
   BATCH DRAG GHOST
   ========================================== */
.sb-drag-ghost {
  font-family: 'Inter', sans-serif;
}

.sb-drag-ghost-count {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  line-height: 1;
}

.sb-drag-ghost-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1;
}

/* ==========================================
   SIDEBAR — Select Mode Grip Indicator
   ========================================== */
.sb-select-mode .sb-player-item {
  cursor: pointer;
}

.sb-select-mode .sb-player-item:hover {
  background: rgba(37, 99, 235, 0.08);
}

/* Enhanced dropzone glow when batch dragging */
.is-player-dragging .group-dropzone {
  transition: all 0.3s;
}

.is-player-dragging .group-dropzone.drag-over {
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.3),
    inset 0 0 12px rgba(37, 99, 235, 0.15);
  transform: scale(1.01);
}


/* ==========================================
   MAIN CONTENT
   ========================================== */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.content-header {
  display: flex;
  align-items: center;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-primary);
  position: sticky;
  top: 0;
  z-index: 10;
}

.sub-tabs {
  display: flex;
  gap: 6px;
  flex: 1;
}

.sub-tab {
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px 16px;
  border-radius: 8px;
  transition: all 0.25s cubic-bezier(.4, 0, .2, 1);
  font-weight: 500;
  background: transparent;
  border: 1px solid transparent;
}

.sub-tab:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.sub-tab.active {
  color: var(--text-primary);
  font-weight: 600;
  background: rgba(46, 204, 113, 0.08);
  border-color: rgba(46, 204, 113, 0.25);
}

.btn-kaydet {
  background: linear-gradient(135deg, var(--green-accent), var(--green-dark));
  color: #fff;
  border: none;
  padding: 8px 22px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  transition: all 0.25s;
  margin-left: auto;
  box-shadow: 0 2px 8px rgba(46, 204, 113, 0.2);
}

.btn-kaydet:hover {
  box-shadow: 0 4px 16px rgba(46, 204, 113, 0.35);
  transform: translateY(-1px);
}

/* ==========================================
   DRILL CARDS — overlay editable titles
   ========================================== */
.content-body {
  padding: 24px 28px;
  flex: 1;
  overflow-y: auto;
  min-width: 0;
  position: relative;
}

.drill-cards {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 12px;
}

.drill-card {
  background: var(--bg-card);
  border-radius: 14px;
  overflow: hidden;
  min-width: 220px;
  max-width: 250px;
  flex-shrink: 0;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
  position: relative;
}

.drill-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.1);
}

.drill-card-media {
  position: relative;
  width: 100%;
  height: 170px;
  overflow: hidden;
}

.drill-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(.4, 0, .2, 1);
}

.drill-card:hover .drill-card-media img {
  transform: scale(1.06);
}

.drill-overlay-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 2;
}

.drill-title-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  width: 100%;
  padding: 2px 0;
  outline: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transition: border-color 0.2s;
  letter-spacing: 0.2px;
}

.drill-title-input:hover {
  border-bottom-color: rgba(255, 255, 255, 0.3);
}

.drill-title-input:focus {
  border-bottom-color: var(--green-accent);
  text-shadow: none;
}

.drill-overlay-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 12px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
  display: flex;
  gap: 6px;
  z-index: 2;
}

.drill-badge {
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.85);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  letter-spacing: 0.2px;
}

.drill-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: 46px;
  height: 46px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 17px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s;
  opacity: 0;
  z-index: 3;
}

.drill-card:hover .drill-play-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.drill-play-btn:hover {
  background: rgba(46, 204, 113, 0.6);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ============================================
   TRAINING VIDEO VIEWER MODAL
   ============================================ */
.tv-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(.4, 0, .2, 1);
}

.tv-modal.active {
  opacity: 1;
}

.tv-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
}

.tv-container {
  position: relative;
  width: 90vw;
  max-width: 960px;
  background: rgba(22, 26, 32, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  transform: scale(0.92);
  transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
}

.tv-modal.active .tv-container {
  transform: scale(1);
}

.tv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.2);
}

.tv-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.2px;
}

.tv-close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.tv-close:hover {
  background: rgba(231, 76, 60, 0.2);
  border-color: rgba(231, 76, 60, 0.3);
  color: #e74c3c;
}

.tv-video-wrap {
  width: 100%;
  background: #000;
}

.tv-video {
  width: 100%;
  max-height: 75vh;
  display: block;
  outline: none;
}

/* Make play button always visible on video cards */
.drill-card:has(video) .drill-play-btn,
.drill-card:has(.drill-card-media img) .drill-play-btn {
  opacity: 0.7;
}

.drill-card:has(video):hover .drill-play-btn,
.drill-card:has(.drill-card-media img):hover .drill-play-btn {
  opacity: 1;
}

/* ============================================
   TRAINING IMAGE VIEWER MODAL
   ============================================ */
.ti-container {
  max-width: 1100px;
  width: 92vw;
}

.ti-image-wrap {
  width: 100%;
  background: #0a0c10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.ti-image {
  max-width: 100%;
  max-height: 80vh;
  display: block;
  border-radius: 6px;
  object-fit: contain;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* Change play button icon to zoom for image-only cards (no video) */
.drill-card:has(.drill-card-media img):not(:has(video)) .drill-play-btn {
  font-size: 0;
}

.drill-card:has(.drill-card-media img):not(:has(video)) .drill-play-btn::after {
  content: '🔍';
  font-size: 17px;
}

.drill-card-add {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 2px dashed var(--border-color);
  min-height: 170px;
}

.drill-card-add:hover {
  border-color: var(--green-accent);
  background: rgba(46, 204, 113, 0.04);
}

.drill-card-add-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.drill-card-add .add-icon {
  font-size: 28px;
  color: var(--text-muted);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--border-color);
  border-radius: 50%;
  transition: all 0.25s;
}

.drill-card-add:hover .add-icon {
  color: var(--green-accent);
  border-color: var(--green-accent);
}

.drill-card-add .add-text {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Dosya Ekle variant */
.drill-card-add-media {
  border-color: rgba(59, 130, 246, 0.25);
}

.drill-card-add-media:hover {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.04);
}

.drill-card-add-media .add-icon {
  border-color: rgba(59, 130, 246, 0.25);
}

.drill-card-add-media:hover .add-icon {
  color: #3b82f6;
  border-color: #3b82f6;
}

/* Card body — description + actions */
.drill-card-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drill-desc-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  cursor: text;
  min-height: 16px;
}

.drill-desc-text:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  font-style: italic;
}

.drill-card-actions {
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s;
}

.drill-card:hover .drill-card-actions {
  opacity: 1;
}

.drill-action-btn {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.drill-action-select:hover {
  background: rgba(46, 204, 113, 0.1);
  border-color: var(--green-accent);
  color: var(--green-accent);
}

.drill-action-delete:hover {
  background: rgba(231, 76, 60, 0.1);
  border-color: var(--red-accent);
  color: var(--red-accent);
}

/* Selected card */
.drill-card.selected {
  border-color: var(--green-accent);
  box-shadow: 0 0 0 1px var(--green-accent), 0 6px 20px rgba(46, 204, 113, 0.15);
}

/* Drag-and-drop reorder styles — instant swap */
.drill-card[draggable="true"] {
  cursor: grab;
  transition: transform 0.3s cubic-bezier(.4, 0, .2, 1),
    opacity 0.3s cubic-bezier(.4, 0, .2, 1),
    box-shadow 0.3s cubic-bezier(.4, 0, .2, 1),
    border-color 0.2s ease;
}

.drill-card[draggable="true"]:active {
  cursor: grabbing;
}

.drill-card.dc-dragging {
  opacity: 0.25;
  transform: scale(0.92);
  box-shadow: none !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  filter: blur(1px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s, filter 0.2s;
}

.drill-card.dc-swap-highlight {
  border-color: var(--green-accent) !important;
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.3), 0 8px 24px rgba(46, 204, 113, 0.15) !important;
  transform: scale(1.02);
  transition: all 0.2s cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================
   GROUPS MODULE — titles above, dropzones
   ========================================== */
.groups-module {
  margin-top: 32px;
}

.groups-module-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.groups-module-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.3px;
}

.groups-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-left: 4px;
}

.btn-balance-groups {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
  letter-spacing: 0.2px;
}

.btn-balance-groups:first-of-type {
  margin-left: auto;
}

.btn-balance-groups:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.btn-balance-groups:active {
  transform: scale(0.97);
}

.btn-color-group {
  border-color: rgba(139, 92, 246, 0.3);
  color: #a78bfa;
}

.btn-color-group:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.5);
  color: #c4b5fd;
}

.btn-reset-groups {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
}

.btn-reset-groups:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--text-muted);
}

/* -- Apply Groups Button -- */
.btn-apply-groups {
  background: none;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
  letter-spacing: 0.2px;
}

.btn-apply-groups:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.btn-apply-groups:active {
  transform: scale(0.97);
}

/* -- Apply Groups Popup -- */
.groups-module {
  position: relative;
}

.apply-groups-popup {
  position: absolute;
  top: 52px;
  right: 0;
  width: 360px;
  max-height: 420px;
  background: rgba(30, 34, 40, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: agpSlideIn 0.25s cubic-bezier(.4, 0, .2, 1);
}

@keyframes agpSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.agp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.agp-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.2px;
}

.agp-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s;
}

.agp-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.agp-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  padding: 8px 16px 4px;
  line-height: 1.4;
  margin: 0;
}

.agp-select-all-row {
  padding: 8px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.agp-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
}

.agp-checkbox-label:hover {
  color: var(--text-primary);
}

.agp-checkbox {
  display: none;
}

.agp-checkbox-custom {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
  position: relative;
}

.agp-checkbox:checked+.agp-checkbox-custom {
  background: var(--green-accent);
  border-color: var(--green-accent);
}

.agp-checkbox:checked+.agp-checkbox-custom::after {
  content: '✓';
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.agp-drill-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px;
  max-height: 220px;
}

.agp-drill-list::-webkit-scrollbar {
  width: 5px;
}

.agp-drill-list::-webkit-scrollbar-track {
  background: transparent;
}

.agp-drill-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.agp-drill-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s;
  margin-bottom: 2px;
}

.agp-drill-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.agp-drill-item.selected {
  background: rgba(46, 204, 113, 0.1);
}

.agp-drill-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

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

.agp-drill-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agp-drill-meta {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
}

.agp-drill-empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--text-muted);
  font-size: 12px;
}

.agp-footer {
  display: flex;
  gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  justify-content: flex-end;
}

.agp-btn {
  padding: 7px 18px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
  border: none;
}

.agp-btn-cancel {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.agp-btn-cancel:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.agp-btn-apply {
  background: linear-gradient(135deg, var(--green-accent), var(--green-dark));
  color: #fff;
  box-shadow: 0 2px 8px rgba(46, 204, 113, 0.25);
}

.agp-btn-apply:hover {
  box-shadow: 0 4px 16px rgba(46, 204, 113, 0.4);
  transform: translateY(-1px);
}

.agp-btn-apply:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.groups-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

.group-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 2px;
}

.group-title-input {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  outline: none;
  padding: 2px 6px;
  font-family: 'Inter', sans-serif;
  min-width: 0;
  flex: 1;
  transition: all 0.2s;
}

.group-title-input:hover {
  border-color: var(--border-color);
  background: var(--bg-tertiary);
}

.group-title-input:focus {
  border-color: var(--green-accent);
  background: var(--bg-tertiary);
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.1);
}

.group-delete-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 15px;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 5px;
  line-height: 1;
  transition: all 0.2s;
  opacity: 0;
}

.group-wrapper:hover .group-delete-btn {
  opacity: 1;
}

.group-delete-btn:hover {
  color: var(--red-accent);
  background: rgba(231, 76, 60, 0.1);
}

/* Add Group Card */
.group-add-card {
  border: 2px dashed var(--border-color);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  cursor: pointer;
  transition: all 0.25s;
  background: rgba(255, 255, 255, 0.01);
}

.group-add-card:hover {
  border-color: var(--green-accent);
  background: rgba(46, 204, 113, 0.04);
}

.group-add-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.group-add-card .add-icon {
  font-size: 24px;
  color: var(--text-muted);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  transition: all 0.25s;
}

.group-add-card:hover .add-icon {
  color: var(--green-accent);
  border-color: var(--green-accent);
}

.group-add-card .add-text {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.group-color-trigger {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.group-color-trigger:hover {
  border-color: var(--text-muted);
  background: var(--bg-hover);
}

.color-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: block;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.15);
}

.group-color-panel {
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  margin-bottom: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.cp-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
  outline: none;
}

.cp-dot:hover {
  transform: scale(1.3);
  border-color: rgba(255, 255, 255, 0.4);
}

.cp-dot.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
  transform: scale(1.15);
}

.group-dropzone {
  border: 2px dashed;
  border-radius: 12px;
  padding: 10px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
  position: relative;
}

.group-dropzone.drag-over {
  border-style: solid !important;
  border-color: var(--green-accent) !important;
  box-shadow: inset 0 0 20px rgba(46, 204, 113, 0.1), 0 0 16px rgba(46, 204, 113, 0.15);
  transform: scale(1.02);
  background: rgba(46, 204, 113, 0.04) !important;
}

/* During drag: make dropzone children non-interactive so entire zone is one hit target */
body.is-player-dragging .group-dropzone>*,
body.is-player-dragging .joker-dropzone>* {
  pointer-events: none;
}

.group-dropzone.drag-over .drop-placeholder {
  display: block;
  color: var(--green-accent);
  opacity: 1;
  font-weight: 600;
  font-style: normal;
  animation: dropPulse 1.2s ease-in-out infinite;
}

@keyframes dropPulse {

  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}

.player-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  transition: all 0.2s;
  border: 1px solid transparent;
  cursor: grab;
}

.player-slot:active {
  cursor: grabbing;
}

.player-slot:hover {
  border-color: var(--border-color);
  background: var(--bg-hover);
}

.player-slot.dragging {
  opacity: 0.4;
  transform: scale(0.95);
}

.slot-num {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.slot-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
}

.slot-x {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  border-radius: 4px;
  transition: all 0.15s;
  opacity: 0;
}

.player-slot:hover .slot-x {
  opacity: 1;
}

.slot-x:hover {
  color: var(--red-accent);
  background: rgba(231, 76, 60, 0.1);
}

.drop-placeholder {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  padding: 8px 0;
  font-style: italic;
  opacity: 0.6;
  display: none;
}

.group-dropzone:not(:has(.player-slot)) .drop-placeholder {
  display: block;
}

.group-dropzone.drag-over .drop-placeholder {
  display: block;
}

/* ==========================================
   GROUP HEADING ACTIONS (joker toggle + color)
   ========================================== */
.group-heading-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ==========================================
   JOKER TOGGLE BUTTON
   ========================================== */
.joker-toggle-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 3px 7px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  transition: all 0.25s ease;
  opacity: 0.5;
}

.joker-toggle-btn:hover {
  opacity: 0.8;
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.08);
}

.joker-toggle-btn.active {
  opacity: 1;
  border-color: rgba(245, 158, 11, 0.6);
  background: rgba(245, 158, 11, 0.12);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.2), 0 0 2px rgba(245, 158, 11, 0.15);
}

/* ==========================================
   JOKER ZONES
   ========================================== */
.joker-zone {
  margin-top: 8px;
  max-height: 300px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(.4, 0, .2, 1),
    opacity 0.25s ease,
    margin-top 0.35s cubic-bezier(.4, 0, .2, 1);
}

.joker-zone.collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  pointer-events: none;
}

.joker-zone-header {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #f59e0b;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 0 2px;
  margin-bottom: 5px;
}

.joker-icon {
  font-size: 12px;
}

.joker-dropzone {
  border: 2px dashed rgba(245, 158, 11, 0.35);
  border-radius: 10px;
  padding: 6px 8px;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(245, 158, 11, 0.04);
  transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
  position: relative;
}

.joker-dropzone.drag-over {
  border-style: solid !important;
  border-color: #f59e0b !important;
  box-shadow: inset 0 0 14px rgba(245, 158, 11, 0.1), 0 0 12px rgba(245, 158, 11, 0.12);
  transform: scale(1.02);
  background: rgba(245, 158, 11, 0.08) !important;
}

.joker-dropzone .player-slot {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.2);
}

.joker-dropzone .player-slot:hover {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.35);
}

.joker-dropzone .slot-num {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.joker-dropzone:not(:has(.player-slot)) .drop-placeholder {
  display: block;
  color: rgba(245, 158, 11, 0.5);
}

.joker-dropzone.drag-over .drop-placeholder {
  display: block;
  color: #f59e0b;
  opacity: 1;
  font-weight: 600;
  font-style: normal;
  animation: dropPulse 1.2s ease-in-out infinite;
}

/* ==========================================
   BOTTOM BAR
   ========================================== */
.bottom-bar {
  display: flex;
  align-items: center;
  padding: 10px 28px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  margin-top: auto;
}

.bottom-tabs {
  display: flex;
  gap: 8px;
}

.bottom-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.2s;
}

.bottom-tab:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.bottom-tab .tab-icon {
  font-size: 14px;
}

.bottom-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.bottom-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.bottom-icon-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.btn-paylas {
  background: linear-gradient(135deg, var(--green-accent), var(--green-dark));
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  transition: all 0.25s;
  box-shadow: 0 2px 8px rgba(46, 204, 113, 0.15);
}

.btn-paylas:hover {
  box-shadow: 0 4px 16px rgba(46, 204, 113, 0.3);
  transform: translateY(-1px);
}

/* ==========================================
   RIGHT PANEL — Drill Description Editor
   ========================================== */
.right-panel {
  width: 300px;
  min-width: 300px;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-color);
  padding: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Empty State */
.rp-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  gap: 10px;
}

.rp-empty-icon {
  font-size: 36px;
  opacity: 0.3;
}

.rp-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0;
}

.rp-empty-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  max-width: 180px;
  line-height: 1.5;
}

/* Selected State */
.rp-selected {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.rp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border-color);
}

.rp-header-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.rp-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.2s;
}

.rp-close-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Sections */
.rp-section {
  padding: 12px 18px 0;
}

.rp-section-title {
  padding-top: 16px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
}

.rp-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rp-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.rp-title-input {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  padding: 8px 12px;
  border-radius: 8px;
  outline: none;
  transition: all 0.2s;
}

.rp-title-input:focus {
  border-color: var(--green-accent);
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.1);
}

.rp-desc-textarea {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  padding: 8px 12px;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: none;
  min-height: 60px;
  line-height: 1.6;
  overflow: hidden;
}

.rp-desc-textarea:focus {
  border-color: var(--green-accent);
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.1);
}

.rp-desc-textarea::placeholder {
  color: var(--text-muted);
}

/* Info Grid */
.rp-info-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rp-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 3px 10px;
  transition: border-color 0.2s;
}

.rp-info-item:focus-within {
  border-color: var(--green-accent);
}

.rp-info-icon {
  font-size: 13px;
  flex-shrink: 0;
}

.rp-info-input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  padding: 6px 0;
  outline: none;
}

/* Notes */
.rp-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.rp-section-header .rp-label {
  margin-bottom: 0;
}

.rp-add-note-btn {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
}

.rp-add-note-btn:hover {
  border-color: var(--green-accent);
  color: var(--green-accent);
  background: rgba(46, 204, 113, 0.06);
}

.rp-notes-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 28px;
}

.rp-note-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px 8px;
  animation: noteIn 0.2s ease;
}

@keyframes noteIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rp-note-text {
  flex: 1;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  background: none;
  border: none;
  outline: none;
  font-family: 'Inter', sans-serif;
  resize: none;
  min-height: 18px;
  padding: 0;
}

.rp-note-delete {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 0 2px;
  line-height: 1;
  border-radius: 4px;
  transition: all 0.15s;
}

.rp-note-delete:hover {
  color: var(--red-accent);
  background: rgba(231, 76, 60, 0.1);
}

.rp-notes-empty {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: 10px 0;
}

/* Divider + Actions */
.rp-divider {
  height: 1px;
  background: var(--border-color);
  margin: 14px 18px 0;
}

.rp-actions {
  display: flex;
  gap: 8px;
  padding: 14px 18px 18px;
  margin-top: auto;
}

.rp-save-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  border: none;
  background: linear-gradient(135deg, var(--green-accent), var(--green-dark));
  color: #fff;
  box-shadow: 0 2px 8px rgba(46, 204, 113, 0.2);
  transition: all 0.25s;
}

.rp-save-btn:hover {
  box-shadow: 0 4px 14px rgba(46, 204, 113, 0.3);
  transform: translateY(-1px);
}

.rp-delete-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  background: rgba(231, 76, 60, 0.08);
  color: var(--red-accent);
  border: 1px solid rgba(231, 76, 60, 0.2);
  transition: all 0.25s;
}

.rp-delete-btn:hover {
  background: rgba(231, 76, 60, 0.15);
  border-color: var(--red-accent);
}

/* Mobile right panel */
@media (max-width: 1024px) {
  .right-panel {
    position: fixed;
    right: -340px;
    top: 56px;
    height: calc(100vh - 56px);
    z-index: 50;
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.4);
    transition: right 0.3s cubic-bezier(.4, 0, .2, 1);
  }

  .right-panel.mobile-open {
    right: 0;
  }
}

/* ==========================================
   SCROLLBAR STYLES
   ========================================== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ==========================================
   PAGE CONTAINERS
   ========================================== */
.page-container {
  display: none;
  flex: 1;
  height: 100%;
  overflow: hidden;
  min-width: 0;
}

.page-container.active {
  display: flex;
}

/* ==========================================
   CALENDAR PAGE (MAÇ TAKVİMİ)
   ========================================== */
.calendar-page {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  background: linear-gradient(160deg, #0c1219 0%, #111a24 40%, #141e2a 100%);
}

/* ==========================================
   CALENDAR SUB-TABS
   ========================================== */
.cal-subtabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 24px;
  padding: 4px;
  background: rgba(15, 20, 28, 0.6);
  border: 1px solid rgba(46, 204, 113, 0.12);
  border-radius: 14px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  backdrop-filter: blur(8px);
}

.cal-subtab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  flex: 1;
  justify-content: center;
  letter-spacing: 0.3px;
}

.cal-subtab:hover:not(.active) {
  color: var(--text-secondary);
  background: rgba(46, 204, 113, 0.06);
}

.cal-subtab.active {
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.18), rgba(46, 204, 113, 0.08));
  color: var(--green-accent);
  box-shadow: 0 2px 12px rgba(46, 204, 113, 0.15),
    inset 0 1px 0 rgba(46, 204, 113, 0.15);
  border: 1px solid rgba(46, 204, 113, 0.2);
}

.cal-subtab-icon {
  font-size: 15px;
  line-height: 1;
}

.cal-subtab-label {
  white-space: nowrap;
}

/* Sub-tab content panels */
.cal-subtab-content {
  animation: calSubtabFadeIn 0.35s ease;
}

@keyframes calSubtabFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================
   CALENDAR FILE MANAGER (CFM) — Performans & Analiz
   ========================================== */

/* ==========================================
   CFM — SPLIT LAYOUT (sidebar + main panel)
   ========================================== */
.cfm-split-layout {
  display: flex;
  gap: 0;
  min-height: 520px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: rgba(12, 18, 25, 0.5);
}

/* LEFT SIDEBAR */
.cfm-sidebar {
  width: 230px;
  min-width: 230px;
  background: rgba(14, 20, 28, 0.95);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
}

.cfm-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
}

.cfm-sidebar-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.cfm-sidebar-add {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid rgba(46, 204, 113, 0.3);
  background: rgba(46, 204, 113, 0.1);
  color: var(--green-accent);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  line-height: 1;
}

.cfm-sidebar-add:hover {
  background: rgba(46, 204, 113, 0.2);
  border-color: rgba(46, 204, 113, 0.5);
  transform: scale(1.08);
}

.cfm-sidebar-search {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
}

.cfm-sidebar-search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  padding: 7px 10px;
  border-radius: 7px;
  outline: none;
  transition: all 0.2s;
  box-sizing: border-box;
}

.cfm-sidebar-search-input:focus {
  border-color: rgba(46, 204, 113, 0.3);
  background: rgba(255, 255, 255, 0.06);
}

.cfm-sidebar-search-input::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.cfm-sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}

.cfm-sidebar-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.6;
}

/* Sidebar folder item */
.cfm-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  font-family: 'Inter', sans-serif;
  position: relative;
  border-left: 3px solid transparent;
}

.cfm-sidebar-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.cfm-sidebar-item.active {
  background: rgba(46, 204, 113, 0.08);
  border-left-color: var(--green-accent);
}

.cfm-sidebar-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cfm-sidebar-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cfm-sidebar-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cfm-sidebar-item.active .cfm-sidebar-item-name {
  color: var(--green-accent);
}

.cfm-sidebar-item-count {
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.7;
}

.cfm-sidebar-item-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.cfm-sidebar-item:hover .cfm-sidebar-item-actions {
  opacity: 1;
}

.cfm-sb-act {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: all 0.15s;
  padding: 0;
}

.cfm-sb-act:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(1.1);
}

/* Storage bar */
.cfm-sidebar-storage {
  padding: 12px 14px;
  border-top: 1px solid var(--border-color);
}

.cfm-storage-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}

.cfm-storage-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green-accent), #27ae60);
  border-radius: 4px;
  transition: width 0.5s cubic-bezier(.4, 0, .2, 1);
  width: 0%;
}

.cfm-storage-label {
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.6;
}

/* RIGHT MAIN PANEL */
.cfm-main-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: rgba(16, 22, 30, 0.6);
}

.cfm-main-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-color);
}

.cfm-main-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: 0.5px;
}

/* Toolbar */
.cfm-main-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-color);
  gap: 10px;
}

.cfm-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.cfm-toolbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.cfm-toolbar-search {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0 10px;
  flex: 1;
  max-width: 260px;
}

.cfm-toolbar-search-icon {
  font-size: 12px;
  opacity: 0.5;
  margin-right: 6px;
}

.cfm-toolbar-search-input {
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  padding: 7px 0;
  outline: none;
  width: 100%;
}

.cfm-toolbar-search-input::placeholder {
  color: var(--text-muted);
  opacity: 0.5;
}

.cfm-toolbar-btn {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--border-color);
  white-space: nowrap;
}

.cfm-toolbar-add {
  background: rgba(46, 204, 113, 0.12);
  color: var(--green-accent);
  border-color: rgba(46, 204, 113, 0.3);
}

.cfm-toolbar-add:hover {
  background: rgba(46, 204, 113, 0.2);
  box-shadow: 0 2px 10px rgba(46, 204, 113, 0.15);
}

.cfm-toolbar-filter-btn {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
}

.cfm-toolbar-filter-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* View toggle buttons */
.cfm-view-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.cfm-view-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

.cfm-view-btn.active {
  background: rgba(46, 204, 113, 0.12);
  border-color: rgba(46, 204, 113, 0.3);
  color: var(--green-accent);
}

/* List view override for the files grid */
.cfm-split-layout .cfm-files-grid {
  padding: 16px 20px;
  flex: 1;
  margin-bottom: 0;
}

.cfm-split-layout .cfm-dropzone {
  margin: 16px 20px;
}

.cfm-split-layout .cfm-empty {
  padding: 60px 20px;
}

.cfm-files-grid.cfm-list-view {
  grid-template-columns: 1fr;
  gap: 6px;
}

.cfm-list-view .cfm-file-card {
  display: flex;
  flex-direction: row;
  border-radius: 10px;
}

.cfm-list-view .cfm-card-thumb {
  width: 80px;
  min-width: 80px;
  height: 60px;
  border-radius: 10px 0 0 10px;
}

.cfm-list-view .cfm-card-body {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 8px 14px;
  gap: 12px;
}

.cfm-container {
  max-width: 1100px;
  margin: 0 auto;
}

/* Header */
.cfm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.cfm-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cfm-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 1px;
  margin: 0;
}

.cfm-file-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(46, 204, 113, 0.08);
  border: 1px solid rgba(46, 204, 113, 0.15);
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}

.cfm-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cfm-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(.4, 0, .2, 1);
  letter-spacing: 0.3px;
}

.cfm-btn-create {
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.15), rgba(46, 204, 113, 0.08));
  color: var(--green-accent);
  border: 1px solid rgba(46, 204, 113, 0.25);
}

.cfm-btn-create:hover {
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.25), rgba(46, 204, 113, 0.12));
  box-shadow: 0 4px 16px rgba(46, 204, 113, 0.2);
  transform: translateY(-1px);
}

.cfm-btn-upload {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.15), rgba(52, 152, 219, 0.08));
  color: #3498db;
  border: 1px solid rgba(52, 152, 219, 0.25);
}

.cfm-btn-upload:hover {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.25), rgba(52, 152, 219, 0.12));
  box-shadow: 0 4px 16px rgba(52, 152, 219, 0.2);
  transform: translateY(-1px);
}

/* Drop Zone */
.cfm-dropzone {
  border: 2px dashed rgba(46, 204, 113, 0.2);
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  transition: all 0.3s ease;
  margin-bottom: 24px;
  background: rgba(46, 204, 113, 0.02);
  display: none;
}

.cfm-dropzone.visible {
  display: block;
}

.cfm-dropzone.drag-active {
  border-color: var(--green-accent);
  background: rgba(46, 204, 113, 0.08);
  box-shadow: 0 0 30px rgba(46, 204, 113, 0.1);
  transform: scale(1.01);
}

.cfm-dropzone-inner {
  pointer-events: none;
}

.cfm-dropzone-icon {
  font-size: 40px;
  margin-bottom: 8px;
  opacity: 0.7;
}

.cfm-dropzone-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 4px;
}

.cfm-dropzone-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.cfm-dropzone-formats {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.6;
  margin: 0;
  letter-spacing: 1px;
  font-weight: 500;
}

/* Files Grid */
.cfm-files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

/* Individual File Card */
.cfm-file-card {
  background: rgba(20, 28, 38, 0.85);
  border: 1px solid rgba(46, 204, 113, 0.08);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(.4, 0, .2, 1);
  cursor: pointer;
  position: relative;
  animation: cfmCardIn 0.4s ease both;
}

@keyframes cfmCardIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.cfm-file-card:hover {
  border-color: rgba(46, 204, 113, 0.25);
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35),
    0 0 20px rgba(46, 204, 113, 0.06);
}

/* Card Thumbnail */
.cfm-card-thumb {
  width: 100%;
  height: 140px;
  background: rgba(12, 18, 25, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.cfm-card-thumb img,
.cfm-card-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(.4, 0, .2, 1);
}

.cfm-file-card:hover .cfm-card-thumb img,
.cfm-file-card:hover .cfm-card-thumb video {
  transform: scale(1.05);
}

.cfm-card-thumb-placeholder {
  font-size: 42px;
  opacity: 0.4;
}

/* Type badge */
.cfm-card-type-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
  transition: opacity 0.25s;
}

.cfm-file-card:hover .cfm-card-type-badge {
  opacity: 0;
}

.cfm-card-type-badge.type-image {
  background: rgba(46, 204, 113, 0.55);
}

.cfm-card-type-badge.type-video {
  background: rgba(52, 152, 219, 0.55);
}

.cfm-card-type-badge.type-document {
  background: rgba(155, 89, 182, 0.55);
}

/* Video play icon overlay */
.cfm-card-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(.4, 0, .2, 1);
  z-index: 1;
}

.cfm-file-card:hover .cfm-card-play-icon {
  background: rgba(46, 204, 113, 0.7);
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 0 20px rgba(46, 204, 113, 0.3);
}

/* ==========================================
   CFM — MEDIA HOVER OVERLAY (action buttons)
   ========================================== */
.cfm-media-hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(.4, 0, .2, 1);
  z-index: 3;
}

.cfm-file-card.cfm-media-card:hover .cfm-media-hover-overlay {
  opacity: 1;
}

.cfm-media-act {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(.4, 0, .2, 1);
  backdrop-filter: blur(4px);
}

.cfm-media-act:hover {
  transform: scale(1.12);
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.cfm-media-act.cfm-media-preview:hover {
  background: rgba(46, 204, 113, 0.4);
  border-color: rgba(46, 204, 113, 0.5);
}

.cfm-media-act.cfm-media-move:hover {
  background: rgba(52, 152, 219, 0.4);
  border-color: rgba(52, 152, 219, 0.5);
}

.cfm-media-act.cfm-media-delete:hover {
  background: rgba(231, 76, 60, 0.5);
  border-color: rgba(231, 76, 60, 0.6);
}

/* Card Body */
.cfm-card-body {
  padding: 12px 14px;
}

.cfm-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cfm-card-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cfm-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cfm-card-date {
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.7;
}

/* ==========================================
   CFM — EMPTY STATE
   ========================================== */
.cfm-empty {
  text-align: center;
  padding: 60px 20px;
  animation: cfmCardIn 0.5s ease both;
}

.cfm-empty-visual {
  margin-bottom: 20px;
}

.cfm-empty-icon-ring {
  width: 88px;
  height: 88px;
  margin: 0 auto;
  border-radius: 50%;
  border: 2px dashed rgba(46, 204, 113, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cfmRingPulse 3s ease-in-out infinite;
}

@keyframes cfmRingPulse {

  0%,
  100% {
    border-color: rgba(46, 204, 113, 0.15);
    transform: scale(1);
  }

  50% {
    border-color: rgba(46, 204, 113, 0.3);
    transform: scale(1.03);
  }
}

.cfm-empty-icon {
  font-size: 40px;
  opacity: 0.6;
}

.cfm-empty-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 0 0 8px;
}

.cfm-empty-sub {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 340px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ==========================================
   CFM — CREATE FILE MODAL
   ========================================== */
.cfm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cfmOverlayIn 0.25s ease;
}

@keyframes cfmOverlayIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.cfm-modal {
  background: rgba(22, 30, 40, 0.97);
  border: 1px solid rgba(46, 204, 113, 0.15);
  border-radius: 18px;
  width: 90%;
  max-width: 480px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  animation: cfmModalIn 0.3s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
}

@keyframes cfmModalIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(12px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.cfm-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-color);
}

.cfm-modal-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.cfm-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.2s;
  line-height: 1;
}

.cfm-modal-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.cfm-modal-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cfm-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cfm-form-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.cfm-form-input {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  padding: 10px 14px;
  border-radius: 10px;
  outline: none;
  transition: all 0.2s;
}

.cfm-form-input:focus {
  border-color: var(--green-accent);
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.1);
}

.cfm-form-textarea {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  padding: 10px 14px;
  border-radius: 10px;
  outline: none;
  resize: none;
  min-height: 70px;
  transition: all 0.2s;
}

.cfm-form-textarea:focus {
  border-color: var(--green-accent);
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.1);
}

.cfm-modal-footer {
  display: flex;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid var(--border-color);
  justify-content: flex-end;
}

.cfm-modal-btn {
  padding: 9px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.25s;
  border: none;
}

.cfm-modal-cancel {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.cfm-modal-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
}

.cfm-modal-confirm {
  background: linear-gradient(135deg, var(--green-accent), var(--green-dark));
  color: #fff;
  box-shadow: 0 2px 12px rgba(46, 204, 113, 0.25);
}

.cfm-modal-confirm:hover {
  box-shadow: 0 4px 18px rgba(46, 204, 113, 0.35);
  transform: translateY(-1px);
}

/* ==========================================
   CFM — COLOR PICKER (folder creation modal)
   ========================================== */
.cfm-color-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 4px 0;
}

.cfm-color-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(.4, 0, .2, 1);
  outline: none;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.cfm-color-circle:hover {
  transform: scale(1.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.cfm-color-circle.active {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15),
    0 4px 14px rgba(0, 0, 0, 0.4);
  transform: scale(1.08);
}

.cfm-color-circle.active::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ==========================================
   CFM — CONFIRM DIALOG
   ========================================== */
.cfm-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cfmOverlayIn 0.2s ease;
}

.cfm-confirm-dialog {
  background: rgba(24, 32, 44, 0.98);
  border: 1px solid rgba(231, 76, 60, 0.2);
  border-radius: 16px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: cfmModalIn 0.25s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
}

.cfm-confirm-header {
  padding: 18px 22px 0;
}

.cfm-confirm-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.cfm-confirm-body {
  padding: 14px 22px;
}

.cfm-confirm-msg {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 4px;
  line-height: 1.5;
}

.cfm-confirm-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  opacity: 0.7;
}

.cfm-confirm-footer {
  display: flex;
  gap: 10px;
  padding: 14px 22px 18px;
  justify-content: flex-end;
}

.cfm-confirm-btn {
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.25s;
  border: none;
}

.cfm-confirm-cancel {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.cfm-confirm-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
}

.cfm-confirm-delete {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: #fff;
  box-shadow: 0 2px 12px rgba(231, 76, 60, 0.25);
}

.cfm-confirm-delete:hover {
  box-shadow: 0 4px 18px rgba(231, 76, 60, 0.4);
  transform: translateY(-1px);
}

/* ==========================================
   CFM — MOVE MEDIA DIALOG
   ========================================== */
.cfm-move-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 12px;
  line-height: 1.5;
}

.cfm-move-folder-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
}

.cfm-move-folder-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.cfm-move-folder-btn:hover {
  background: rgba(46, 204, 113, 0.08);
  border-color: rgba(46, 204, 113, 0.25);
  transform: translateX(3px);
}

.cfm-move-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cfm-move-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
}

/* ==========================================
   CFM — PREVIEW MODAL (full-screen media viewer)
   ========================================== */
.cfm-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(12px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cfmOverlayIn 0.25s ease;
}

.cfm-preview-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-direction: column;
}

.cfm-preview-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
  z-index: 3;
}

.cfm-preview-counter {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1px;
  min-width: 60px;
}

.cfm-preview-filename {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 16px;
}

.cfm-preview-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 18px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.cfm-preview-close:hover {
  background: rgba(231, 76, 60, 0.5);
  border-color: rgba(231, 76, 60, 0.5);
}

.cfm-preview-media {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 85vh;
}

.cfm-preview-media img {
  max-width: 88vw;
  max-height: 82vh;
  border-radius: 10px;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5);
  object-fit: contain;
}

.cfm-preview-media video {
  max-width: 88vw;
  max-height: 82vh;
  border-radius: 10px;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5);
}

/* Preview Nav Arrows */
.cfm-preview-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(.4, 0, .2, 1);
  z-index: 4;
  backdrop-filter: blur(4px);
}

.cfm-preview-nav:hover {
  background: rgba(46, 204, 113, 0.3);
  border-color: rgba(46, 204, 113, 0.4);
  transform: translateY(-50%) scale(1.1);
}

.cfm-preview-prev {
  left: 16px;
}

.cfm-preview-next {
  right: 16px;
}

.cfm-preview-title {
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 600;
  margin-top: 14px;
}

/* Upload progress indicator */
.cfm-upload-progress {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: rgba(22, 30, 40, 0.95);
  border: 1px solid rgba(46, 204, 113, 0.2);
  border-radius: 14px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 9999;
  animation: cfmCardIn 0.3s ease;
  backdrop-filter: blur(8px);
}

.cfm-upload-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(46, 204, 113, 0.2);
  border-top-color: var(--green-accent);
  border-radius: 50%;
  animation: cfmSpin 0.6s linear infinite;
}

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

.cfm-upload-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}


/* ==========================================
   CFM — FOLDER BACK BUTTON & FOLDER CARDS
   ========================================== */
.cfm-folder-back-btn {
  background: rgba(46, 204, 113, 0.1);
  border: 1px solid rgba(46, 204, 113, 0.2);
  color: var(--green-accent);
  font-size: 16px;
  font-weight: 700;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
}

.cfm-folder-back-btn:hover {
  background: rgba(46, 204, 113, 0.2);
  transform: translateX(-2px);
}

/* Folder Card */
.cfm-file-card.cfm-folder-card {
  cursor: pointer;
}

.cfm-folder-card .cfm-card-thumb {
  background: linear-gradient(135deg, rgba(20, 28, 38, 0.95), rgba(16, 22, 30, 0.9));
}

/* SVG Folder Icon Wrapper */
.cfm-folder-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s cubic-bezier(.4, 0, .2, 1);
}

.cfm-folder-svg {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
  transition: all 0.35s cubic-bezier(.4, 0, .2, 1);
}

.cfm-file-card.cfm-folder-card:hover .cfm-folder-svg {
  transform: scale(1.1) translateY(-2px);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.4));
}

/* Color bar */
.cfm-folder-color-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  opacity: 0.9;
  transition: height 0.3s cubic-bezier(.4, 0, .2, 1);
}

.cfm-file-card.cfm-folder-card:hover .cfm-folder-color-bar {
  height: 4px;
}

/* Folder card actions overlay */
.cfm-card-actions-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  z-index: 4;
  opacity: 0;
  transform: translateY(-4px);
  transition: all 0.25s cubic-bezier(.4, 0, .2, 1);
}

.cfm-file-card.cfm-folder-card:hover .cfm-card-actions-overlay {
  opacity: 1;
  transform: translateY(0);
}

.cfm-card-act {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.cfm-card-act:hover {
  transform: scale(1.1);
}

.cfm-act-edit:hover {
  background: rgba(52, 152, 219, 0.55);
  border-color: rgba(52, 152, 219, 0.6);
  color: #fff;
}

.cfm-act-delete:hover {
  background: rgba(231, 76, 60, 0.55);
  border-color: rgba(231, 76, 60, 0.6);
  color: #fff;
}

/* Count dot badge inside folder card meta */
.cfm-count-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 2px;
  vertical-align: middle;
}

/* Media count badge on folder card */
.cfm-folder-media-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Folder detail breadcrumb-like title */
.cfm-title.cfm-title-folder {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==========================================
   CFM V2 — Page Header, Detail, Filters, Footer
   Performans & Analiz Tab Enhancements
   ========================================== */
.cfm-page-header {
  padding: 18px 24px 12px;
}

.cfm-page-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 4px;
  letter-spacing: 0.3px;
}

.cfm-page-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  font-weight: 400;
  line-height: 1.4;
}

/* — Sidebar "Dosyalar" title (non all-caps) — */
.cfm-sidebar .cfm-sidebar-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: none;
}

/* — Green "+ Yeni" button — */
.cfm-sidebar-add-btn {
  background: linear-gradient(135deg, var(--green-accent), var(--green-dark));
  border: none;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.25s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 2px 10px rgba(46, 204, 113, 0.25);
}

.cfm-sidebar-add-btn:hover {
  box-shadow: 0 4px 16px rgba(46, 204, 113, 0.4);
  transform: translateY(-1px);
}

.cfm-add-plus {
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

/* — Sidebar search icon — */
.cfm-sidebar-search {
  position: relative;
}

.cfm-search-ico {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}

.cfm-sidebar-search .cfm-sidebar-search-input {
  padding-left: 30px;
}

/* — Sidebar folder item with category badge — */
.cfm-sidebar-item .cfm-folder-category {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 4px;
  line-height: 1.6;
  margin-top: 2px;
  letter-spacing: 0.3px;
}

.cfm-folder-category.cat-performans {
  background: rgba(46, 204, 113, 0.15);
  color: #2ecc71;
}

.cfm-folder-category.cat-taktik {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.cfm-folder-category.cat-analiz {
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
}

.cfm-folder-category.cat-mac {
  background: rgba(249, 115, 22, 0.15);
  color: #f97316;
}

.cfm-folder-category.cat-kondisyon {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.cfm-sidebar-item .cfm-sidebar-item-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

.cfm-sidebar-item .cfm-sidebar-three-dot {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: all 0.2s;
  opacity: 0;
  line-height: 1;
}

.cfm-sidebar-item:hover .cfm-sidebar-three-dot {
  opacity: 1;
}

.cfm-sidebar-three-dot:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

/* — Detail Header (folder selected on right panel) — */
.cfm-detail-header {
  padding: 16px 20px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0;
}

.cfm-detail-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.cfm-detail-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cfm-detail-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.cfm-badge-green {
  background: rgba(46, 204, 113, 0.15);
  color: #2ecc71;
  border: 1px solid rgba(46, 204, 113, 0.2);
}

.cfm-badge-blue {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.cfm-badge-purple {
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.cfm-detail-count {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  margin-left: auto;
}

/* — Detail Actions (Medya Yükle, Yeni Klasör, Paylaş) — */
.cfm-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.cfm-act-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(.4, 0, .2, 1);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  white-space: nowrap;
}

.cfm-act-btn:hover {
  background: rgba(46, 204, 113, 0.08);
  border-color: rgba(46, 204, 113, 0.25);
  color: var(--green-accent);
  transform: translateY(-1px);
}

.cfm-act-btn svg {
  flex-shrink: 0;
}

/* — Filter Tabs (Tümü, Resimler, Videolar, Son Eklenenler) — */
.cfm-filter-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 12px;
}

.cfm-filter-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(.4, 0, .2, 1);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  white-space: nowrap;
}

.cfm-filter-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  border-color: rgba(255, 255, 255, 0.1);
}

.cfm-filter-tab.active {
  background: linear-gradient(135deg, var(--green-accent), var(--green-dark));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(46, 204, 113, 0.25);
}

.cfm-filter-tab.active svg {
  stroke: #fff;
}

.cfm-filter-tab svg {
  flex-shrink: 0;
  stroke: currentColor;
}

/* — Media Card V2 (enhanced with duration badge) — */
.cfm-files-grid .cfm-file-card .cfm-card-duration {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 3;
  font-family: 'Inter', monospace;
  letter-spacing: 0.5px;
}

/* — Footer Stats Bar — */
.cfm-footer-stats {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 20px;
  border-top: 1px solid var(--border-color);
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  gap: 4px;
  background: rgba(0, 0, 0, 0.15);
  margin-top: auto;
}

.cfm-footer-stats .cfm-stat-sep {
  color: rgba(255, 255, 255, 0.15);
  margin: 0 2px;
}

/* — Welcome / Empty state enhancements — */
.cfm-split-layout .cfm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  padding: 40px 20px;
}

.cfm-empty-visual {
  margin-bottom: 16px;
}

.cfm-empty-icon-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(46, 204, 113, 0.08);
  border: 2px solid rgba(46, 204, 113, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  animation: cfmPulse 2.5s ease-in-out infinite;
}

@keyframes cfmPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.05);
    opacity: 0.85;
  }
}

.cfm-empty-icon {
  font-size: 28px;
}

.cfm-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
}

.cfm-empty-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.calendar-title-bar {
  text-align: center;
  margin-bottom: 16px;
}

.calendar-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--text-primary);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.calendar-title-underline {
  width: 320px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--green-accent), transparent);
  margin: 8px auto 0;
}

/* Month navigation */
.calendar-month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 16px;
}

.month-nav-btn {
  background: none;
  border: none;
  color: var(--green-accent);
  font-size: 18px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 4px;
  transition: all 0.2s;
  font-family: 'Inter', sans-serif;
}

.month-nav-btn:hover {
  background: rgba(46, 204, 113, 0.15);
}

.month-label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--text-primary);
}

/* ==========================================
   CALENDAR GRID
   ========================================== */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: rgba(46, 204, 113, 0.08);
  border: 1px solid rgba(46, 204, 113, 0.15);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 24px;
}

.calendar-day-header {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 10px 4px;
  background: rgba(15, 20, 28, 0.8);
  letter-spacing: 1.5px;
  border-bottom: 2px solid rgba(46, 204, 113, 0.2);
}

.calendar-day-header.cum-header {
  color: var(--green-accent);
}

.calendar-cell {
  min-height: 80px;
  background: rgba(18, 24, 32, 0.9);
  padding: 6px 8px;
  position: relative;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  cursor: default;
}

.calendar-cell:hover:not(.empty) {
  background: rgba(28, 36, 48, 0.95);
}

.calendar-cell.empty {
  background: rgba(12, 16, 22, 0.5);
  cursor: default;
}

.cell-date {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
}

/* Cell with content */
.calendar-cell.has-content {
  background: rgba(25, 35, 48, 0.95);
}

/* ==========================================
   CONTEXT MENU
   ========================================== */
.context-menu {
  display: none;
  position: fixed;
  z-index: 1000;
  background: rgba(28, 34, 42, 0.97);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 6px 0;
  min-width: 170px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: background 0.15s;
  text-align: left;
}

.context-menu-item:hover {
  background: rgba(46, 204, 113, 0.1);
}

.context-menu-item.active {
  background: rgba(46, 204, 113, 0.08);
  color: var(--green-accent);
}

.context-menu-item.active::after {
  content: '✓';
  margin-left: auto;
  font-size: 12px;
  color: var(--green-accent);
}

.context-menu-item.danger {
  color: var(--red-accent);
}

.context-menu-item.danger:hover {
  background: rgba(231, 76, 60, 0.1);
}

.context-menu-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 12px;
}

/* ==========================================
   CALENDAR — CELL NOTES
   ========================================== */
.cell-note {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  padding: 4px 6px;
}

/* Container for PDF + GPS buttons at bottom-left of cell */
.cell-training-btns {
  position: absolute;
  bottom: 3px;
  left: 3px;
  display: flex;
  gap: 3px;
  z-index: 4;
}

.cell-training-pdf-btn,
.cell-training-gps-btn {
  padding: 2px 5px;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all 0.15s;
  line-height: 1.4;
  text-transform: uppercase;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

.cell-training-pdf-btn {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
}

.cell-training-pdf-btn:hover {
  background: linear-gradient(135deg, #36d87e, #2ecc71);
  box-shadow: 0 2px 8px rgba(46, 204, 113, 0.5);
  transform: scale(1.08);
}

.cell-training-gps-btn {
  background: linear-gradient(135deg, #3498db, #2980b9);
}

.cell-training-gps-btn:hover {
  background: linear-gradient(135deg, #4aa3df, #3498db);
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.5);
  transform: scale(1.08);
}

/* GPS Preview nav buttons */
.cfm-gps-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 10;
}

.cfm-gps-nav-btn:hover {
  background: rgba(46, 204, 113, 0.3);
  border-color: rgba(46, 204, 113, 0.5);
  transform: translateY(-50%) scale(1.1);
}

.cfm-gps-nav-prev {
  left: -56px;
}

.cfm-gps-nav-next {
  right: -56px;
}

/* Drill Library selection bar — Takvime Ekle button */
.dl-selection-calendar {
  background: rgba(52, 152, 219, 0.15) !important;
  border-color: rgba(52, 152, 219, 0.3) !important;
  color: #3498db !important;
}

.dl-selection-calendar:hover {
  background: rgba(52, 152, 219, 0.25) !important;
  border-color: rgba(52, 152, 219, 0.5) !important;
}

.cell-file-indicators {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 5;
}

.cell-file-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transition: transform 0.2s;
}

.cell-file-dot:hover {
  transform: scale(1.4);
}

.cell-file-perf {
  background: #2ecc71;
  box-shadow: 0 0 6px rgba(46, 204, 113, 0.5);
}

.cell-file-analiz {
  background: #3498db;
  box-shadow: 0 0 6px rgba(52, 152, 219, 0.5);
}

.calendar-cell.has-files {
  cursor: pointer;
  box-shadow: inset 0 -2px 8px rgba(46, 204, 113, 0.08);
}

.calendar-cell.has-files:hover {
  box-shadow: inset 0 0 20px rgba(46, 204, 113, 0.1), 0 0 12px rgba(46, 204, 113, 0.1);
}

/* ==========================================
   CALENDAR — DAY FILES PANEL (modal)
   ========================================== */
.cfm-day-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cfmFadeIn 0.2s ease;
}

.cfm-day-panel {
  width: 90%;
  max-width: 700px;
  max-height: 80vh;
  background: linear-gradient(145deg, rgba(22, 28, 40, 0.98), rgba(14, 18, 26, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  animation: cfmSlideUp 0.3s ease;
  overflow: hidden;
}

.cfm-day-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cfm-day-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.cfm-day-panel-icon {
  font-size: 22px;
}

.cfm-day-panel-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s;
}

.cfm-day-panel-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.cfm-day-panel-body {
  overflow-y: auto;
  padding: 16px 22px;
  flex: 1;
}

/* Section (Performans / Analiz) */
.cfm-day-section {
  margin-bottom: 20px;
}

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

.cfm-day-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cfm-day-section-icon {
  font-size: 16px;
}

.cfm-day-section-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}

.cfm-day-section-count {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}

/* Individual folder in the day panel */
.cfm-day-folder {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.cfm-day-folder:last-child {
  margin-bottom: 0;
}

.cfm-day-folder-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.cfm-day-folder-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cfm-day-folder-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.cfm-day-folder-media-count {
  font-size: 11px;
  color: var(--text-muted);
}

.cfm-day-goto {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(46, 204, 113, 0.2);
  background: rgba(46, 204, 113, 0.08);
  color: var(--green-accent);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.cfm-day-goto:hover {
  background: rgba(46, 204, 113, 0.2);
  border-color: rgba(46, 204, 113, 0.4);
  transform: translateX(2px);
}

.cfm-day-folder-empty {
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.6;
  text-align: center;
  padding: 8px 0;
}

/* Media grid inside the day panel */
.cfm-day-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.cfm-day-media-item {
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 8px;
  overflow: hidden;
}

.cfm-day-media-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.cfm-day-media-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  overflow: hidden;
}

.cfm-day-media-thumb img,
.cfm-day-media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cfm-day-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
}

.cfm-day-type-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 8px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.cfm-day-type-badge.img {
  background: rgba(46, 204, 113, 0.8);
  color: #fff;
}

.cfm-day-type-badge.vid {
  background: rgba(52, 152, 219, 0.8);
  color: #fff;
}

.cfm-day-media-name {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  padding: 5px 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cfm-day-media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 24px;
  opacity: 0.4;
}

/* ==========================================
   CALENDAR — NOTE EDITOR
   ========================================== */
.cal-note-editor {
  position: fixed;
  width: 260px;
  background: linear-gradient(145deg, rgba(22, 28, 40, 0.98), rgba(16, 20, 30, 0.98));
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  z-index: 500;
  animation: calNoteIn 0.2s ease-out;
  overflow: hidden;
}

@keyframes calNoteIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.cal-note-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cal-note-editor-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.3px;
}

.cal-note-editor-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: all 0.15s;
  line-height: 1;
}

.cal-note-editor-close:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

.cal-note-editor-textarea {
  width: 100%;
  min-height: 80px;
  max-height: 160px;
  padding: 12px 14px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  resize: vertical;
  outline: none;
}

.cal-note-editor-textarea::placeholder {
  color: var(--text-muted);
}

.cal-note-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  gap: 8px;
}

.cal-note-btn {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.cal-note-btn-save {
  background: rgba(46, 204, 113, 0.2);
  color: #2ecc71;
  flex: 1;
}

.cal-note-btn-save:hover {
  background: rgba(46, 204, 113, 0.35);
}

.cal-note-btn-delete {
  background: rgba(231, 76, 60, 0.1);
  color: rgba(231, 76, 60, 0.7);
}

.cal-note-btn-delete:hover {
  background: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
}

/* ==========================================
   SQUAD PAGE — Tactical Formation Screen
   ========================================== */
.squad-page {
  display: flex;
  flex: 1;
  height: 100%;
  overflow: hidden;
  background: var(--bg-primary);
}

/* --- Left Player Panel --- */
.sq-player-panel {
  width: 290px;
  min-width: 260px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sq-panel-header {
  padding: 18px 16px 12px;
  border-bottom: 1px solid var(--border-color);
}

.sq-panel-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}

.sq-counts {
  display: flex;
  gap: 8px;
}

.sq-count-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}

.sq-count-on {
  background: rgba(46, 204, 113, 0.12);
  color: var(--green-accent);
  border: 1px solid rgba(46, 204, 113, 0.25);
}

.sq-count-sub {
  background: rgba(52, 152, 219, 0.1);
  color: var(--blue-accent);
  border: 1px solid rgba(52, 152, 219, 0.2);
}

/* Panel title row */
.sq-panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.sq-panel-title-row .sq-panel-title {
  margin-bottom: 0;
}

.sq-add-player-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--green-accent);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  line-height: 1;
  padding: 0;
  font-family: 'Inter', sans-serif;
}

.sq-add-player-btn:hover {
  background: rgba(46, 204, 113, 0.12);
  border-color: var(--green-accent);
  transform: scale(1.08);
}

/* Player card delete button */
.sq-pc-delete {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.2s;
  padding: 0;
  margin-left: 4px;
}

.sq-player-card:hover .sq-pc-delete {
  opacity: 1;
}

.sq-pc-delete:hover {
  background: rgba(231, 76, 60, 0.15);
  color: var(--red-accent);
}

/* ===== Add Player Modal ===== */
/* ===== Pitch Switch Confirmation Modal ===== */
.sq-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: sqConfirmFadeIn 0.2s ease-out;
}

@keyframes sqConfirmFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes sqConfirmSlideIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(12px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes sqConfirmIconPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }
}

.sq-confirm-dialog {
  background: linear-gradient(145deg, rgba(22, 28, 40, 0.98), rgba(16, 20, 28, 0.98));
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 20px;
  padding: 32px 28px 24px;
  width: 400px;
  max-width: 90vw;
  text-align: center;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: sqConfirmSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sq-confirm-icon {
  font-size: 48px;
  margin-bottom: 12px;
  animation: sqConfirmIconPulse 2s ease-in-out infinite;
  line-height: 1;
}

.sq-confirm-title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #f8fafc;
  margin: 0 0 12px;
  letter-spacing: -0.2px;
}

.sq-confirm-message {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: rgba(248, 250, 252, 0.75);
  line-height: 1.6;
  margin: 0 0 6px;
}

.sq-confirm-message strong {
  color: #fbbf24;
  font-weight: 700;
}

.sq-confirm-sub {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  color: rgba(248, 250, 252, 0.4);
  margin: 0 0 24px;
  font-style: italic;
}

.sq-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.sq-confirm-btn {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  letter-spacing: 0.2px;
}

.sq-confirm-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(248, 250, 252, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.sq-confirm-cancel:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #f8fafc;
  transform: translateY(-1px);
}

.sq-confirm-proceed {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #1a1a2e;
  border: 1px solid rgba(251, 191, 36, 0.3);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.25);
}

.sq-confirm-proceed:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  box-shadow: 0 6px 24px rgba(245, 158, 11, 0.35);
  transform: translateY(-1px);
}

.sq-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sq-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  width: 360px;
  max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: sq-fadeIn 0.2s ease;
}

.sq-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border-color);
}

.sq-modal-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.sq-modal-close {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  padding: 0;
}

.sq-modal-close:hover {
  background: rgba(231, 76, 60, 0.15);
  color: var(--red-accent);
}

.sq-modal-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sq-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sq-form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}

.sq-form-input {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  padding: 9px 12px;
  border-radius: 10px;
  outline: none;
  transition: all 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.sq-form-input:focus {
  border-color: var(--green-accent);
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.1);
}

.sq-form-input option {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.sq-modal-footer {
  display: flex;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border-color);
}

.sq-modal-btn {
  flex: 1;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
  border: none;
  text-align: center;
}

.sq-modal-cancel {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.sq-modal-cancel:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.sq-modal-confirm {
  background: linear-gradient(135deg, var(--green-accent), var(--green-dark));
  color: #fff;
  box-shadow: 0 2px 10px rgba(46, 204, 113, 0.25);
}

.sq-modal-confirm:hover {
  box-shadow: 0 4px 18px rgba(46, 204, 113, 0.4);
  transform: translateY(-1px);
}

.sq-search-wrap {
  padding: 10px 16px;
}

.sq-search-input {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  padding: 9px 14px;
  border-radius: 10px;
  outline: none;
  transition: all 0.2s;
}

.sq-search-input::placeholder {
  color: var(--text-muted);
}

.sq-search-input:focus {
  border-color: var(--green-accent);
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.1);
}

.sq-filters {
  display: flex;
  gap: 4px;
  padding: 0 16px 10px;
  flex-wrap: wrap;
}

.sq-filter-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
  white-space: nowrap;
}

.sq-filter-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.sq-filter-btn.active {
  background: rgba(46, 204, 113, 0.12);
  color: var(--green-accent);
  border-color: rgba(46, 204, 113, 0.3);
}

.sq-player-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Player Card */
.sq-player-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--bg-tertiary);
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: grab;
  user-select: none;
  transition: all 0.2s;
  position: relative;
}

.sq-player-card:hover {
  border-color: var(--border-color);
  background: var(--bg-hover);
  transform: translateX(2px);
}

.sq-player-card:active {
  cursor: grabbing;
}

.sq-player-card.dragging {
  opacity: 0.35;
  transform: scale(0.97);
}

.sq-player-card.on-pitch {
  opacity: 0.5;
  cursor: default;
  background: rgba(46, 204, 113, 0.04);
  border-color: rgba(46, 204, 113, 0.1);
}

/* ==========================================
   SQUAD LIST — Multi-Select Player State
   ========================================== */
.sq-player-card.sb-selected {
  background: linear-gradient(90deg,
      rgba(37, 99, 235, 0.18) 0%,
      rgba(79, 70, 229, 0.10) 50%,
      rgba(37, 99, 235, 0.04) 100%) !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
  box-shadow:
    inset 0 0 12px rgba(37, 99, 235, 0.08),
    0 1px 4px rgba(37, 99, 235, 0.15) !important;
  position: relative;
}

.sq-player-card.sb-selected::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, #3b82f6, #818cf8, #3b82f6);
  background-size: 100% 200%;
  animation: sbSelectedBorderGlow 2s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.sq-player-card.sb-selected .sq-pc-name {
  color: #bfdbfe;
  text-shadow: 0 0 6px rgba(59, 130, 246, 0.3);
  font-weight: 700;
}

.sq-player-card.sb-selected .sq-pc-pos {
  color: #93c5fd !important;
}

.sq-player-card.sb-selected .sq-pc-number {
  box-shadow:
    0 0 0 2px rgba(59, 130, 246, 0.5),
    0 0 10px rgba(59, 130, 246, 0.3);
  transform: scale(1.05);
  transition: all 0.25s cubic-bezier(.4, 0, .2, 1);
}

.sb-select-mode .sq-player-card:hover {
  border-color: rgba(37, 99, 235, 0.5);
}

.sq-player-card.sb-selected .sb-select-check-icon {
  opacity: 1;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  border-color: #2563eb;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.4);
}

.sq-pc-number {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

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

.sq-pc-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sq-captain-badge {
  display: inline-block;
  background: #f59e0b;
  color: #000;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
}

.sq-pc-meta {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

.sq-pc-pos {
  font-size: 11px;
  font-weight: 600;
}

.sq-pc-rating {
  font-size: 11px;
  color: var(--text-muted);
}

.sq-pc-status {
  flex-shrink: 0;
}

.sq-status-on {
  font-size: 10px;
  font-weight: 600;
  color: var(--green-accent);
  background: rgba(46, 204, 113, 0.1);
  padding: 2px 8px;
  border-radius: 6px;
}

.sq-list-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 6px;
  padding: 0 4px;
}

.sq-list-divider span {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}

.sq-list-divider::before,
.sq-list-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

/* -- Position Group Header (Main Player List) -- */
.sq-pos-group-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 8px 5px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-secondary);
}

.sq-pos-group-header:first-child {
  padding-top: 4px;
}

.sq-pos-group-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.1);
}

.sq-pos-group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  flex: 1;
}

.sq-pos-group-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 7px;
  border-radius: 6px;
  min-width: 18px;
  text-align: center;
}

.sq-empty-list {
  text-align: center;
  padding: 30px 0;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
}

/* --- Center Pitch Area --- */
.sq-pitch-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  padding: 12px 16px;
}

.sq-pitch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 4px;
}

.sq-formation-display {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sq-formation-icon {
  font-size: 16px;
}

.sq-formation-text {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.sq-formation-number {
  font-size: 18px;
  font-weight: 800;
  color: var(--green-accent);
  letter-spacing: 1px;
}

.sq-squad-name-input {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  padding: 7px 14px;
  border-radius: 8px;
  outline: none;
  transition: all 0.2s;
  text-align: center;
  max-width: 200px;
}

.sq-squad-name-input:focus {
  border-color: var(--green-accent);
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.1);
}

/* --- Football Pitch --- */
.sq-pitch-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
}

.sq-pitch-surface {
  position: relative;
  height: 100%;
  aspect-ratio: 2 / 3;
  max-width: 100%;
  background:
    linear-gradient(180deg,
      #2d7a2d 0%, #2d7a2d 3%,
      transparent 3%, transparent 97%,
      #2d7a2d 97%, #2d7a2d 100%),
    repeating-linear-gradient(180deg,
      #2d7a2d 3%, #2d7a2d 7.7%,
      #3a9a3a 7.7%, #3a9a3a 12.4%);
  border: none;
  border-radius: 4px;
  box-shadow:
    0 0 0 8px #1a1a2e,
    0 4px 30px rgba(0, 0, 0, 0.4),
    0 12px 50px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

/* Inner white boundary line */
.sq-pitch-surface::after {
  content: '';
  position: absolute;
  top: 3%;
  left: 3%;
  right: 3%;
  bottom: 3%;
  border: 2.5px solid rgba(255, 255, 255, 0.75);
  border-radius: 1px;
  pointer-events: none;
  z-index: 2;
}

/* Subtle vignette / stadium lighting effect */
.sq-pitch-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%,
      rgba(255, 255, 255, 0.03) 0%,
      transparent 55%,
      rgba(0, 0, 0, 0.08) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Capture mode — hide pseudo-elements so html2canvas only captures markers */
.sq-pitch-surface.sq-capture-mode::before,
.sq-pitch-surface.sq-capture-mode::after {
  display: none !important;
}

.sq-pitch-surface.sq-capture-mode {
  background: transparent !important;
}

/* Pitch line base */
.sq-pitch-line {
  position: absolute;
  pointer-events: none;
}

/* Half-way line */
.sq-pitch-half {
  top: 50%;
  left: 3%;
  right: 3%;
  height: 2px;
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-50%);
  box-shadow: none;
}

/* Center circle */
.sq-pitch-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 27%;
  aspect-ratio: 1;
  border: 2.5px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Center dot */
.sq-pitch-center-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: none;
}

/* Top penalty area (attack) */
.sq-pitch-penalty-top {
  position: absolute;
  top: 3%;
  left: 50%;
  width: 56.5%;
  height: 14%;
  border: 2.5px solid rgba(255, 255, 255, 0.75);
  border-top: none;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Bottom penalty area (defense) */
.sq-pitch-penalty-bottom {
  position: absolute;
  bottom: 3%;
  left: 50%;
  width: 56.5%;
  height: 14%;
  border: 2.5px solid rgba(255, 255, 255, 0.75);
  border-bottom: none;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Top goal area (6-yard box) */
.sq-pitch-goal-top {
  position: absolute;
  top: 3%;
  left: 50%;
  width: 26%;
  height: 5%;
  border: 2.5px solid rgba(255, 255, 255, 0.75);
  border-top: none;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Bottom goal area (6-yard box) */
.sq-pitch-goal-bottom {
  position: absolute;
  bottom: 3%;
  left: 50%;
  width: 26%;
  height: 5%;
  border: 2.5px solid rgba(255, 255, 255, 0.75);
  border-bottom: none;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Top penalty arc */
.sq-pitch-arc-top {
  position: absolute;
  top: 12%;
  left: 50%;
  width: 18%;
  height: 10%;
  border: 2.5px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  transform: translateX(-50%);
  clip-path: inset(50% 0 0 0);
  pointer-events: none;
}

/* Bottom penalty arc */
.sq-pitch-arc-bottom {
  position: absolute;
  bottom: 12%;
  left: 50%;
  width: 18%;
  height: 10%;
  border: 2.5px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  transform: translateX(-50%);
  clip-path: inset(0 0 50% 0);
  pointer-events: none;
}

/* Corner arcs */
.sq-pitch-corner {
  position: absolute;
  width: 3%;
  aspect-ratio: 1;
  border: 2.5px solid rgba(255, 255, 255, 0.75);
  pointer-events: none;
}

.sq-corner-tl {
  top: 3%;
  left: 3%;
  border-radius: 0 0 100% 0;
  border-top: none;
  border-left: none;
}

.sq-corner-tr {
  top: 3%;
  right: 3%;
  border-radius: 0 0 0 100%;
  border-top: none;
  border-right: none;
}

.sq-corner-bl {
  bottom: 3%;
  left: 3%;
  border-radius: 0 100% 0 0;
  border-bottom: none;
  border-left: none;
}

.sq-corner-br {
  bottom: 3%;
  right: 3%;
  border-radius: 100% 0 0 0;
  border-bottom: none;
  border-right: none;
}

/* Penalty spots */
.sq-pitch-spot {
  position: absolute;
  left: 50%;
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  box-shadow: none;
}

.sq-spot-top {
  top: 13%;
}

.sq-spot-bottom {
  bottom: 13%;
}

/* Goals are visible on all pitch types (except plain-half) */

/* Goal frames — positioned OUTSIDE the pitch boundary (3% margin) */
.sq-pitch-goalframe {
  position: absolute;
  left: 50%;
  width: 16%;
  height: 3%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
}

.sq-goalframe-top {
  top: 0;
  height: 3%;
  border-left: 3px solid rgba(255, 255, 255, 0.95);
  border-right: 3px solid rgba(255, 255, 255, 0.95);
  border-top: 3px solid rgba(255, 255, 255, 0.95);
  border-bottom: none;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.15);
}

.sq-goalframe-bottom {
  bottom: 0;
  height: 3%;
  border-left: 3px solid rgba(255, 255, 255, 0.95);
  border-right: 3px solid rgba(255, 255, 255, 0.95);
  border-bottom: 3px solid rgba(255, 255, 255, 0.95);
  border-top: none;
  box-shadow: 0 -2px 8px rgba(255, 255, 255, 0.15);
}

/* Goal net — fills inside the goalframe outside the boundary */
.sq-pitch-goalnet {
  position: absolute;
  left: 50%;
  width: 15%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}

.sq-goalnet-top {
  top: 0.2%;
  height: 2.6%;
  background: repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.18) 0px,
      rgba(255, 255, 255, 0.18) 1px,
      transparent 1px,
      transparent 5px),
    repeating-linear-gradient(0deg,
      rgba(255, 255, 255, 0.18) 0px,
      rgba(255, 255, 255, 0.18) 1px,
      transparent 1px,
      transparent 5px);
  background-color: rgba(255, 255, 255, 0.04);
  border-radius: 3px 3px 0 0;
}

.sq-goalnet-bottom {
  bottom: 0.2%;
  height: 2.6%;
  background: repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.18) 0px,
      rgba(255, 255, 255, 0.18) 1px,
      transparent 1px,
      transparent 5px),
    repeating-linear-gradient(0deg,
      rgba(255, 255, 255, 0.18) 0px,
      rgba(255, 255, 255, 0.18) 1px,
      transparent 1px,
      transparent 5px);
  background-color: rgba(255, 255, 255, 0.04);
  border-radius: 0 0 3px 3px;
}

/* --- Ghost formation slots --- */
.sq-pitch-ghost {
  position: absolute;
  width: 42px;
  height: 42px;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: all 0.25s;
  cursor: default;
}

.sq-pitch-ghost.sq-ghost-hover {
  border-color: var(--green-accent);
  background: rgba(46, 204, 113, 0.2);
  box-shadow: 0 0 16px rgba(46, 204, 113, 0.4);
  transform: translate(-50%, -50%) scale(1.15);
}

.sq-ghost-label {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 0.5px;
}

.sq-pitch-ghost.sq-ghost-hover .sq-ghost-label {
  color: var(--green-accent);
}

/* --- Player markers on pitch --- */
.sq-pitch-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  z-index: 20;
  cursor: grab;
  user-select: none;
  transition: transform 0.15s;
}

.sq-pitch-marker:active {
  cursor: grabbing;
}

.sq-pitch-marker.dragging {
  opacity: 0.85;
  transform: translate(-50%, -50%) scale(1.15);
  cursor: grabbing;
  filter: drop-shadow(0 0 8px rgba(46, 204, 113, 0.5));
}

.sq-pitch-marker:hover {
  z-index: 20;
}

.sq-pitch-marker:hover .sq-marker-circle {
  transform: scale(1.12);
}

.sq-pitch-marker:hover .sq-marker-remove {
  opacity: 1;
  transform: translate(50%, -50%) scale(1);
}

.sq-marker-circle {
  width: var(--marker-size, 40px);
  height: var(--marker-size, 40px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--marker-font, 14px);
  font-weight: 800;
  color: #fff;
  border: 2.5px solid rgba(255, 255, 255, 0.5);
  transition: transform 0.2s;
  position: relative;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.sq-marker-captain {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  background: #f59e0b;
  color: #000;
  font-size: 8px;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}

.sq-marker-name {
  font-size: var(--marker-name-font, 10px);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  letter-spacing: 0.3px;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* --- High-fidelity Export Overrides --- */
.sq-pitch-surface.sq-exporting .sq-marker-circle,
.sq-pitch-surface.sq-exporting .sq-opp-circle {
  border: 3px solid rgba(255, 255, 255, 0.5) !important;
  background-clip: border-box !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: scale(1.1) !important;
}

.sq-pitch-surface.sq-exporting .sq-marker-name {
  font-size: calc(var(--marker-name-font, 10px) + 2px) !important;
  background: transparent !important;
  padding: 0 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.5) !important;
  letter-spacing: 0.5px !important;
  margin-top: 3px !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

.sq-marker-remove {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  background: rgba(231, 76, 60, 0.9);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translate(50%, -50%) scale(0.7);
  transition: all 0.2s;
  padding: 0;
}

.sq-marker-remove:hover {
  background: var(--red-accent);
  transform: translate(50%, -50%) scale(1.15);
}

/* --- Opponent markers on pitch (blue) --- */
.sq-opponent-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 18;
  cursor: grab;
  user-select: none;
  transition: transform 0.15s;
}

.sq-opponent-marker:active {
  cursor: grabbing;
}

.sq-opponent-marker.dragging {
  opacity: 0.85;
  transform: translate(-50%, -50%) scale(1.15);
  cursor: grabbing;
  filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.5));
}

.sq-opp-circle {
  width: var(--marker-size, 40px);
  height: var(--marker-size, 40px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--marker-font, 14px);
  font-weight: 800;
  color: #fff;
  background: #2563eb;
  border: 2.5px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.4);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  opacity: 0.75;
}

/* Opponent accordion badge */
.sq-opponent-badge {
  background: rgba(37, 99, 235, 0.15) !important;
  color: #60a5fa !important;
  border-color: rgba(37, 99, 235, 0.25) !important;
}

/* Opponent formation buttons */
.sq-opp-formation-btn {
  padding: 7px 0;
  border-radius: 8px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.5px;
  text-align: center;
}

.sq-opp-formation-btn:hover {
  border-color: rgba(37, 99, 235, 0.5);
  background: rgba(37, 99, 235, 0.08);
  color: #60a5fa;
}

.sq-opp-formation-btn.active {
  border-color: #2563eb;
  background: rgba(37, 99, 235, 0.15);
  color: #60a5fa;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.2);
}

/* Drop active state on pitch — ZERO visual change to prevent iPad darkening */
.sq-drop-active {
  /* Preserve the pitch's original shadow, block any additional overlay */
  box-shadow:
    0 0 0 8px #1a1a2e,
    0 4px 30px rgba(0, 0, 0, 0.4),
    0 12px 50px rgba(0, 0, 0, 0.2) !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  background-color: transparent !important;
}

.sq-drop-active::before,
.sq-drop-active::after {
  filter: none !important;
  opacity: 1 !important;
}

/* Disable canvas pointer events during drag so drop events reach pitch surface.
   Canvas stays VISIBLE so drawings and placed objects remain on screen. */
.sq-drop-active .sq-draw-canvas {
  pointer-events: none !important;
}

.sq-drop-active .sq-pitch-ghost {
  border-color: rgba(255, 255, 255, 0.35);
  animation: sq-pulse 1.5s ease-in-out infinite;
}

@keyframes sq-pulse {

  0%,
  100% {
    border-color: rgba(255, 255, 255, 0.2);
  }

  50% {
    border-color: rgba(46, 204, 113, 0.5);
  }
}

/* --- Right Settings Panel --- */
.sq-settings-panel {
  width: 260px;
  min-width: 240px;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 0;
}

/* --- Yeni Proje Button --- */
.sq-new-project-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 16px 10px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.12), rgba(46, 204, 113, 0.06));
  border: 1.5px solid rgba(46, 204, 113, 0.3);
  border-radius: 12px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.sq-new-project-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.08), transparent);
  opacity: 0;
  transition: opacity 0.25s;
}

.sq-new-project-btn:hover::before {
  opacity: 1;
}

.sq-new-project-btn:hover {
  border-color: rgba(46, 204, 113, 0.55);
  box-shadow: 0 4px 20px rgba(46, 204, 113, 0.15), 0 0 0 1px rgba(46, 204, 113, 0.08);
  transform: translateY(-1px);
}

.sq-new-project-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(46, 204, 113, 0.12);
}

.sq-new-project-icon {
  font-size: 16px;
  color: var(--green-accent);
  font-weight: 700;
  line-height: 1;
  transition: transform 0.25s;
}

.sq-new-project-btn:hover .sq-new-project-icon {
  transform: rotate(90deg);
}

.sq-new-project-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--green-accent);
  letter-spacing: 0.3px;
}

/* --- Yeni Proje Modal extras --- */
.sq-newproject-dialog {
  border-color: rgba(46, 204, 113, 0.25);
}

.sq-newproject-actions {
  gap: 8px;
  flex-wrap: wrap;
}

.sq-newproject-no {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.sq-newproject-no:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.45);
  transform: translateY(-1px);
}

.sq-newproject-save {
  background: linear-gradient(135deg, var(--green-accent), var(--green-dark));
  color: #fff;
  border: 1px solid rgba(46, 204, 113, 0.3);
  box-shadow: 0 4px 16px rgba(46, 204, 113, 0.25);
}

.sq-newproject-save:hover {
  background: linear-gradient(135deg, #3ae080, var(--green-accent));
  box-shadow: 0 6px 24px rgba(46, 204, 113, 0.35);
  transform: translateY(-1px);
}

.sq-settings-section {
  padding: 16px 16px 12px;
}

/* --- Accordion --- */
.sq-accordion .sq-settings-title {
  margin-bottom: 0;
}

.sq-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 4px 0;
  border-radius: 8px;
  user-select: none;
  transition: opacity 0.2s;
}

.sq-accordion-header:hover {
  opacity: 0.85;
}

.sq-accordion-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sq-accordion-badge {
  font-size: 12px;
  font-weight: 800;
  color: var(--green-accent);
  background: rgba(46, 204, 113, 0.1);
  padding: 2px 10px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.sq-accordion-chevron {
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
}

.sq-accordion.open .sq-accordion-chevron {
  transform: rotate(90deg);
}

.sq-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease;
  opacity: 0;
}

.sq-accordion.open .sq-accordion-body {
  max-height: 200px;
  opacity: 1;
  margin-top: 12px;
}

.sq-settings-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  letter-spacing: 0.3px;
}

.sq-settings-divider {
  height: 1px;
  background: var(--border-color);
  margin: 0 16px;
}

/* Formation buttons grid */
.sq-formation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.sq-formation-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 10px 8px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.25s;
  letter-spacing: 0.5px;
  text-align: center;
}

.sq-formation-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
  background: var(--bg-hover);
  transform: translateY(-1px);
}

.sq-formation-btn.active {
  background: rgba(46, 204, 113, 0.12);
  color: var(--green-accent);
  border-color: rgba(46, 204, 113, 0.35);
  box-shadow: 0 0 12px rgba(46, 204, 113, 0.1);
}

/* Action buttons */
.sq-action-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sq-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.25s;
  border: none;
}

.sq-action-primary {
  background: linear-gradient(135deg, var(--green-accent), var(--green-dark));
  color: #fff;
  box-shadow: 0 2px 10px rgba(46, 204, 113, 0.25);
}

.sq-action-primary:hover {
  box-shadow: 0 4px 18px rgba(46, 204, 113, 0.4);
  transform: translateY(-1px);
}

.sq-action-secondary {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.sq-action-secondary:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
  background: var(--bg-hover);
}

.sq-action-secondary.active {
  background: rgba(46, 204, 113, 0.1);
  color: var(--green-accent);
  border-color: rgba(46, 204, 113, 0.3);
}

.sq-action-danger {
  background: rgba(231, 76, 60, 0.08);
  color: var(--red-accent);
  border: 1px solid rgba(231, 76, 60, 0.2);
}

.sq-action-danger:hover {
  background: rgba(231, 76, 60, 0.15);
  border-color: var(--red-accent);
}

/* --- Icon Size Control --- */
.sq-size-control {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sq-size-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sq-size-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}

.sq-size-value {
  font-size: 11px;
  font-weight: 700;
  color: var(--green-accent);
  background: rgba(46, 204, 113, 0.1);
  padding: 2px 8px;
  border-radius: 6px;
  min-width: 28px;
  text-align: center;
}

.sq-size-slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sq-size-icon {
  color: var(--text-muted);
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
}

.sq-size-sm {
  font-size: 10px;
}

.sq-size-lg {
  font-size: 16px;
}

.sq-size-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  background: var(--border-color);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}

.sq-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green-accent);
  border: 2px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}

.sq-size-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.4);
}

.sq-size-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green-accent);
  border: 2px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.sq-size-presets {
  display: flex;
  gap: 4px;
}

.sq-size-preset {
  flex: 1;
  padding: 4px 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.sq-size-preset:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.sq-size-preset.active {
  background: rgba(46, 204, 113, 0.12);
  color: var(--green-accent);
  border-color: rgba(46, 204, 113, 0.3);
}

/* Player info card */
.sq-player-info {
  min-height: 80px;
}

.sq-info-empty {
  text-align: center;
  padding: 20px 0;
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}

.sq-info-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: sq-fadeIn 0.25s ease;
}

.sq-info-card.sq-info-image-only {
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(46, 204, 113, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(46, 204, 113, 0.1);
}

.sq-info-player-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  object-fit: cover;
}

@keyframes sq-fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sq-info-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.sq-info-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
}

.sq-info-details {
  display: flex;
  gap: 12px;
}

.sq-info-pos {
  font-size: 12px;
  font-weight: 600;
}

.sq-info-rating {
  font-size: 12px;
  color: var(--text-muted);
}

.sq-info-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 2px;
}

.sq-info-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  width: 100%;
}

.sq-info-btn {
  flex: 1;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
  text-align: center;
}

.sq-info-remove {
  background: rgba(231, 76, 60, 0.08);
  color: var(--red-accent);
  border: 1px solid rgba(231, 76, 60, 0.2);
}

.sq-info-remove:hover {
  background: rgba(231, 76, 60, 0.15);
}

.sq-info-captain {
  background: var(--bg-hover);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.sq-info-captain:hover {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.4);
}

.sq-info-captain.active {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.3);
}

/* Settings footer */
.sq-settings-footer {
  padding: 16px;
  margin-top: auto;
  border-top: 1px solid var(--border-color);
}

.sq-save-btn {
  width: 100%;
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  border: none;
  background: linear-gradient(135deg, var(--green-accent), var(--green-dark));
  color: #fff;
  box-shadow: 0 3px 12px rgba(46, 204, 113, 0.25);
  transition: all 0.25s;
  letter-spacing: 0.3px;
}

.sq-save-btn:hover {
  box-shadow: 0 5px 20px rgba(46, 204, 113, 0.4);
  transform: translateY(-1px);
}

/* --- Responsive --- */
@media (max-width: 1200px) {
  .sq-settings-panel {
    width: 220px;
    min-width: 200px;
  }

  .sq-player-panel {
    width: 250px;
    min-width: 230px;
  }
}

@media (max-width: 1024px) {
  .squad-page {
    flex-direction: column;
  }

  .sq-player-panel,
  .sq-settings-panel {
    width: 100%;
    min-width: unset;
    max-height: 200px;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid var(--border-color);
  }

  .sq-player-list {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .sq-player-card {
    min-width: 180px;
    flex-shrink: 0;
  }

  .sq-pitch-area {
    flex: 1;
    min-height: 400px;
  }
}

/* ==========================================
   DRILL KÜTÜPHANESİ PAGE
   ========================================== */
.drill-library-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  background: linear-gradient(160deg, #0f1318 0%, #151a21 40%, #181e27 100%);
}

/* -- Internal Top Sub-Nav -- */
.dl-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 46px;
  min-height: 46px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.dl-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.dl-topbar-icon {
  font-size: 16px;
  width: 28px;
  height: 28px;
  background: rgba(46, 204, 113, 0.12);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dl-topbar-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.5px;
  white-space: nowrap;
  margin: 0;
}

.dl-topbar-divider {
  width: 1px;
  height: 20px;
  background: var(--border-color);
  flex-shrink: 0;
}

.dl-topbar-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.dl-topbar-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.dl-topbar-tab:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.dl-topbar-tab.active {
  background: rgba(46, 204, 113, 0.1);
  color: var(--green-accent);
  font-weight: 600;
}

.dl-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.dl-btn-sm {
  padding: 6px 14px !important;
  font-size: 12px !important;
}

/* -- Workspace (Sidebar + Main) -- */
.dl-workspace {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* -- Left Sidebar — Folder Tree -- */
.dl-sidebar {
  width: 260px;
  min-width: 260px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

.dl-sb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(180deg, rgba(46, 204, 113, 0.04) 0%, transparent 100%);
  flex-shrink: 0;
}

.dl-sb-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  margin: 0;
}

.dl-sb-add-folder {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  font-family: 'Inter', sans-serif;
  line-height: 1;
}

.dl-sb-add-folder:hover {
  background: rgba(46, 204, 113, 0.12);
  border-color: var(--green-accent);
  color: var(--green-accent);
}

.dl-sb-search-wrap {
  padding: 10px 14px 8px;
  flex-shrink: 0;
}

.dl-sb-search {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  padding: 6px 10px;
  color: var(--text-primary);
  font-size: 11px;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.dl-sb-search::placeholder {
  color: var(--text-muted);
}

.dl-sb-search:focus {
  border-color: var(--green-accent);
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.1);
}

/* Folder List */
.dl-sb-folder-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}

.dl-sb-folder-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.18s ease;
  border-left: 3px solid transparent;
  position: relative;
  user-select: none;
}

.dl-sb-folder-item:hover {
  background: var(--bg-hover);
  border-left-color: rgba(46, 204, 113, 0.3);
}

.dl-sb-folder-item.active {
  background: rgba(46, 204, 113, 0.08);
  border-left-color: var(--green-accent);
}

.dl-sb-folder-icon {
  font-size: 18px;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.dl-sb-folder-item:hover .dl-sb-folder-icon {
  transform: scale(1.08);
}

.dl-sb-folder-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dl-sb-folder-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.dl-sb-folder-count {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.2;
}

.dl-sb-folder-color {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.dl-sb-folder-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.2s;
}

.dl-sb-folder-item:hover .dl-sb-folder-actions {
  opacity: 1;
}

.dl-sb-folder-action {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: all 0.15s;
  line-height: 1;
}

.dl-sb-folder-action:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

/* Drag-and-Drop: Card being dragged */
.dl-card-dragging {
  opacity: 0.4 !important;
  transform: scale(0.96) !important;
  box-shadow: 0 0 0 2px var(--green-accent), 0 8px 32px rgba(46, 204, 113, 0.3) !important;
  transition: opacity 0.2s, transform 0.2s !important;
}

/* Drag-and-Drop: Sidebar active during drag */
.dl-sidebar-drag-active .dl-sb-folder-item[data-folder-id]:not([data-folder-id="all"]) {
  transition: all 0.2s cubic-bezier(.4, 0, .2, 1);
  border-left-color: rgba(46, 204, 113, 0.15);
}

.dl-sidebar-drag-active .dl-sb-folder-item[data-folder-id]:not([data-folder-id="all"])::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 8px;
  border: 1px dashed rgba(46, 204, 113, 0.15);
  pointer-events: none;
  opacity: 0.7;
  animation: dl-folder-pulse-hint 2s ease-in-out infinite;
}

@keyframes dl-folder-pulse-hint {

  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }
}

/* Drag-and-Drop: Folder as active drop target */
.dl-sb-folder-drop-target {
  background: rgba(46, 204, 113, 0.12) !important;
  border-left-color: var(--green-accent) !important;
  transform: scale(1.03);
  box-shadow: inset 0 0 0 1px rgba(46, 204, 113, 0.3),
    0 0 20px rgba(46, 204, 113, 0.1);
  z-index: 10;
}

.dl-sb-folder-drop-target::after {
  border-color: var(--green-accent) !important;
  opacity: 1 !important;
  animation: none !important;
  border-style: solid !important;
  border-width: 1.5px !important;
}

.dl-sb-folder-drop-target .dl-sb-folder-icon {
  transform: scale(1.15) !important;
  filter: drop-shadow(0 0 6px rgba(46, 204, 113, 0.4));
}

.dl-sb-folder-drop-target .dl-sb-folder-name {
  color: var(--green-accent) !important;
}

/* Drag-and-Drop: Folder drop success pulse */
.dl-sb-folder-drop-success {
  animation: dl-folder-drop-success 0.6s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes dl-folder-drop-success {
  0% {
    background: rgba(46, 204, 113, 0.25);
    box-shadow: inset 0 0 0 2px var(--green-accent), 0 0 24px rgba(46, 204, 113, 0.3);
    transform: scale(1.05);
  }

  60% {
    background: rgba(46, 204, 113, 0.15);
    transform: scale(1.0);
  }

  100% {
    background: transparent;
    box-shadow: none;
    transform: scale(1);
  }
}

/* Custom drag ghost image */
.dl-drag-ghost {
  position: fixed;
  top: -9999px;
  left: -9999px;
  z-index: 99999;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(20, 26, 34, 0.95);
  border: 1.5px solid var(--green-accent);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(46, 204, 113, 0.2);
  backdrop-filter: blur(12px);
  font-family: 'Inter', sans-serif;
  max-width: 220px;
}

.dl-drag-ghost-thumb {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(46, 204, 113, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.dl-drag-ghost-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dl-drag-ghost-badge {
  font-size: 9px;
  font-weight: 700;
  color: var(--green-accent);
  background: rgba(46, 204, 113, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Sidebar Separator */
.dl-sb-separator {
  height: 1px;
  background: var(--border-color);
  margin: 6px 14px;
}

/* All Drills root item */
.dl-sb-folder-item.dl-sb-root {
  padding: 10px 16px;
}

.dl-sb-folder-item.dl-sb-root .dl-sb-folder-name {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}

/* Sidebar Footer */
.dl-sb-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}

.dl-sb-storage {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dl-sb-storage-bar {
  width: 100%;
  height: 4px;
  background: var(--bg-primary);
  border-radius: 2px;
  overflow: hidden;
}

.dl-sb-storage-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green-accent), var(--green-dark));
  border-radius: 2px;
  transition: width 0.5s ease;
}

.dl-sb-storage-text {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
}

/* -- Main Content -- */
.dl-main-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px 32px;
  min-width: 0;
}

/* -- Breadcrumb -- */
.dl-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  font-size: 12px;
}

.dl-breadcrumb-item {
  color: var(--text-muted);
  font-weight: 500;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 5px;
  transition: all 0.2s;
}

.dl-breadcrumb-item:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.dl-breadcrumb-item:last-child {
  color: var(--text-primary);
  font-weight: 600;
}

.dl-breadcrumb-sep {
  color: var(--text-muted);
  font-size: 10px;
  opacity: 0.5;
}

/* -- Page Header (removed, replaced by topbar) -- */

.dl-header-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.dl-btn-primary {
  background: linear-gradient(135deg, var(--green-accent), var(--green-dark));
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.25s;
  box-shadow: 0 2px 10px rgba(46, 204, 113, 0.25);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.2px;
}

.dl-btn-primary:hover {
  box-shadow: 0 4px 20px rgba(46, 204, 113, 0.4);
  transform: translateY(-2px);
}

.dl-btn-primary:active {
  transform: translateY(0) scale(0.98);
}

.dl-btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dl-btn-secondary:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--text-muted);
}

/* -- Toolbar -- */
.dl-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.dl-search-wrap {
  display: flex;
  align-items: center;
  min-width: 160px;
  max-width: 220px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.dl-search-wrap:focus-within {
  border-color: var(--green-accent);
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.1);
}

.dl-search-icon {
  font-size: 14px;
  opacity: 0.5;
  flex-shrink: 0;
}

.dl-search-input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  padding: 10px 10px;
  outline: none;
}

.dl-search-input::placeholder {
  color: var(--text-muted);
}

.dl-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.dl-filter-group {
  display: flex;
  gap: 8px;
}

.dl-select {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.dl-select:hover {
  border-color: var(--text-muted);
  color: var(--text-primary);
}

.dl-select:focus {
  border-color: var(--green-accent);
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.1);
}

.dl-add-media-btn {
  background: rgba(46, 204, 113, 0.15) !important;
  background-image: none !important;
  border-color: rgba(46, 204, 113, 0.3);
  color: #2ecc71 !important;
  padding-right: 12px !important;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.2s;
}

.dl-add-media-btn:hover {
  background: rgba(46, 204, 113, 0.25) !important;
  border-color: rgba(46, 204, 113, 0.5);
  color: #27ae60 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(46, 204, 113, 0.2);
}

.dl-add-media-btn:active {
  transform: translateY(0);
}

/* Media Type Dropdown Selector */
.dl-media-type-selector {
  position: relative;
}

.dl-media-type-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.15), rgba(46, 204, 113, 0.08));
  border: 1px solid rgba(46, 204, 113, 0.3);
  color: var(--green-accent);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
  letter-spacing: 0.3px;
}

.dl-media-type-btn:hover {
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.25), rgba(46, 204, 113, 0.15));
  border-color: rgba(46, 204, 113, 0.5);
  box-shadow: 0 2px 10px rgba(46, 204, 113, 0.2);
}

.dl-media-type-chevron {
  font-size: 10px;
  transition: transform 0.2s;
}

.dl-media-type-selector.open .dl-media-type-chevron {
  transform: rotate(180deg);
}

.dl-media-type-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(28, 32, 38, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 6px;
  min-width: 120px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  z-index: 200;
  animation: mediaDropIn 0.2s cubic-bezier(.4, 0, .2, 1);
}

.dl-media-type-selector.open .dl-media-type-dropdown {
  display: flex;
  flex-direction: column;
}

@keyframes mediaDropIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-6px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.dl-media-type-option {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  padding: 7px 14px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.dl-media-type-option:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.dl-media-type-option.active {
  background: rgba(46, 204, 113, 0.15);
  color: var(--green-accent);
}

.dl-sort-group {
  display: flex;
  gap: 8px;
}

.dl-view-toggle {
  display: flex;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.dl-view-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 7px 12px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s;
  font-family: 'Inter', sans-serif;
  line-height: 1;
}

.dl-view-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.dl-view-btn.active {
  color: var(--green-accent);
  background: rgba(46, 204, 113, 0.1);
}

/* -- Category Pills -- */
.dl-categories {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.dl-cat-pill {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.25s;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.dl-cat-pill:hover {
  color: var(--text-secondary);
  border-color: var(--text-muted);
  background: var(--bg-hover);
}

.dl-cat-pill.active {
  background: rgba(46, 204, 113, 0.12);
  border-color: rgba(46, 204, 113, 0.4);
  color: var(--green-accent);
}

/* -- Stats Bar -- */
.dl-stats-bar {
  display: flex;
  gap: 2px;
  margin-bottom: 24px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
}

.dl-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 12px;
  gap: 4px;
  transition: background 0.2s;
}

.dl-stat:hover {
  background: rgba(255, 255, 255, 0.02);
}

.dl-stat+.dl-stat {
  border-left: 1px solid var(--border-color);
}

.dl-stat-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.dl-stat-num.dl-stat-live {
  color: var(--green-accent);
}

.dl-stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* -- Content Area -- */
.dl-content-area {
  margin-bottom: 32px;
  position: relative;
}

/* -- Marquee / Lasso Selection Rectangle -- */
.dl-marquee-rect {
  position: fixed;
  border: 1.5px solid var(--green-accent);
  background: rgba(46, 204, 113, 0.08);
  border-radius: 4px;
  pointer-events: none;
  z-index: 100;
  box-shadow: 0 0 12px rgba(46, 204, 113, 0.15),
    inset 0 0 12px rgba(46, 204, 113, 0.05);
  transition: none;
}

.dl-marquee-rect::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px dashed rgba(46, 204, 113, 0.4);
  border-radius: 5px;
  animation: dl-marquee-dash 0.8s linear infinite;
}

@keyframes dl-marquee-dash {
  to {
    stroke-dashoffset: -8px;
  }
}

/* Card highlight during lasso selection */
.dl-card.dl-lasso-hover {
  outline: 2px solid var(--green-accent);
  outline-offset: -2px;
  box-shadow: 0 0 16px rgba(46, 204, 113, 0.2);
}

/* Prevent text selection during marquee drag */
.dl-marquee-active {
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: crosshair !important;
}

/* -- Drop Overlay -- */
.dl-drop-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(10, 15, 20, 0.85);
  backdrop-filter: blur(8px);
  border: 2px dashed var(--green-accent);
  border-radius: 14px;
  align-items: center;
  justify-content: center;
  animation: dl-drop-pulse 1.5s ease-in-out infinite;
}

.dl-drop-overlay.active {
  display: flex;
}

@keyframes dl-drop-pulse {

  0%,
  100% {
    border-color: var(--green-accent);
  }

  50% {
    border-color: rgba(46, 204, 113, 0.3);
  }
}

.dl-drop-overlay-inner {
  text-align: center;
  padding: 40px;
}

.dl-drop-icon {
  font-size: 56px;
  margin-bottom: 16px;
  animation: dl-drop-bounce 1s ease-in-out infinite;
}

@keyframes dl-drop-bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.dl-drop-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.dl-drop-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

/* -- Drill Grid (Card View) -- */
.dl-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.dl-card {
  background: var(--bg-card);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
  cursor: pointer;
  position: relative;
}

.dl-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.1);
}

.dl-card-media {
  position: relative;
  width: 100%;
  height: 110px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a2a3a 0%, #2a3a4a 100%);
}

.dl-card-media img,
.dl-card-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(.4, 0, .2, 1);
  background: #0d1117;
}

.dl-card:hover .dl-card-media img,
.dl-card:hover .dl-card-media video {
  transform: scale(1.06);
}

.dl-card-video-preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0d1117;
  transition: transform 0.5s cubic-bezier(.4, 0, .2, 1);
}

.dl-card:hover .dl-card-video-preview {
  transform: scale(1.06);
}

.dl-card-media-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  opacity: 0.4;
}

.dl-card-type-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* — Card Label Dot — */
.dl-card-label-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}

.dl-card-label-dot:hover {
  transform: scale(1.3);
}

.dl-card-label-dot.dl-label-empty {
  border: 2px dashed rgba(255, 255, 255, 0.2);
  background: transparent;
}

.dl-card-label-dot.dl-label-empty:hover {
  border-color: rgba(255, 255, 255, 0.4);
}

/* — Always-visible label indicator on card media — */
.dl-card-label-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  z-index: 3;
  animation: dlLabelPulse 2s ease-in-out infinite;
}

@keyframes dlLabelPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }
}

/* — Professional Label Color Picker — */
.dl-label-picker {
  position: absolute;
  bottom: 42px;
  right: -8px;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: linear-gradient(145deg, rgba(22, 28, 40, 0.98), rgba(16, 20, 30, 0.98));
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  z-index: 100;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  animation: dlPickerIn 0.18s ease-out;
  min-width: 200px;
}

@keyframes dlPickerIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dl-label-picker-header {
  padding: 10px 14px 8px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dl-label-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 6px;
}

.dl-label-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.dl-label-picker-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.dl-label-picker-item.active {
  background: rgba(255, 255, 255, 0.1);
}

.dl-label-picker-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.dl-label-picker-item:hover .dl-label-picker-circle {
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
}

.dl-label-picker-item.active .dl-label-picker-circle {
  border-color: #fff;
  box-shadow: 0 0 10px currentColor;
}

.dl-label-picker-name {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
}

.dl-label-picker-item:hover .dl-label-picker-name {
  color: #fff;
}

.dl-label-picker-item.active .dl-label-picker-name {
  color: #fff;
  font-weight: 600;
}

.dl-label-picker-remove {
  padding: 8px 14px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.15s;
  border-radius: 0 0 14px 14px;
}

.dl-label-picker-remove:hover {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.08);
}

.dl-card-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s;
  opacity: 0.7;
  z-index: 3;
}

.dl-card:hover .dl-card-play-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.dl-card-play-btn:hover {
  background: rgba(46, 204, 113, 0.6);
  border-color: rgba(255, 255, 255, 0.3);
}

.dl-card-body {
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  position: relative;
}

.dl-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
  min-width: 0;
  flex: 1;
  cursor: text;
  word-break: break-word;
}

.dl-card-title.dl-editing {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  outline: none;
  background: var(--bg-tertiary);
  border-radius: 4px;
  padding: 2px 4px;
  border: 1px solid var(--green-accent);
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.15);
}

.dl-card-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dl-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dl-card-tag {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.05);
  letter-spacing: 0.2px;
}

.dl-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-top: 1px solid var(--border-color);
}

.dl-card-date {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
}

.dl-card-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.dl-card:hover .dl-card-actions {
  opacity: 1;
}

.dl-card-action-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Inter', sans-serif;
  line-height: 1;
}

.dl-card-action-btn:hover {
  background: rgba(46, 204, 113, 0.1);
  border-color: var(--green-accent);
  color: var(--green-accent);
}

.dl-card-action-btn.dl-action-danger:hover {
  background: rgba(231, 76, 60, 0.1);
  border-color: var(--red-accent);
  color: var(--red-accent);
}

.dl-card-action-btn.dl-action-publish:hover {
  background: rgba(52, 152, 219, 0.1);
  border-color: var(--blue-accent);
  color: var(--blue-accent);
}

.dl-card-action-btn.dl-action-restore:hover {
  background: rgba(243, 156, 18, 0.1);
  border-color: var(--yellow-accent);
  color: var(--yellow-accent);
}

/* -- Table View -- */
.dl-table-wrap {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-secondary);
}

.dl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.dl-table thead th {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.dl-table tbody tr {
  transition: background 0.15s;
  border-bottom: 1px solid rgba(58, 63, 71, 0.4);
}

.dl-table tbody tr:last-child {
  border-bottom: none;
}

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

.dl-table tbody td {
  padding: 10px 16px;
  color: var(--text-primary);
  vertical-align: middle;
}

.dl-table-thumb {
  width: 48px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--bg-tertiary);
}

.dl-table-name {
  font-weight: 600;
  font-size: 13px;
}

.dl-table-cat {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

.dl-table-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.dl-table-status.status-yayinda {
  background: rgba(46, 204, 113, 0.1);
  color: var(--green-accent);
}

.dl-table-status.status-taslak {
  background: rgba(241, 196, 15, 0.1);
  color: var(--yellow-accent);
}

.dl-table-status.status-arsiv {
  background: rgba(107, 114, 128, 0.1);
  color: var(--text-muted);
}

.dl-table-actions {
  display: flex;
  gap: 6px;
}

/* -- Empty State -- */
.dl-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 32px;
  text-align: center;
}

.dl-empty-icon {
  font-size: 56px;
  opacity: 0.3;
  margin-bottom: 16px;
}

.dl-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 0 0 8px;
}

.dl-empty-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 24px;
  max-width: 320px;
  line-height: 1.6;
}

/* ============================================
   MOVE TO FOLDER POPOVER
   ============================================ */
.dl-move-popover {
  position: fixed;
  z-index: 600;
  width: 220px;
  background: rgba(28, 32, 38, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  animation: movePopIn 0.2s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
}

@keyframes movePopIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dl-move-header {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  letter-spacing: 0.3px;
}

.dl-move-list {
  padding: 6px;
  max-height: 240px;
  overflow-y: auto;
}

.dl-move-list::-webkit-scrollbar {
  width: 4px;
}

.dl-move-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.dl-move-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}

.dl-move-option:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.dl-move-option.active {
  background: rgba(46, 204, 113, 0.1);
  color: var(--green-accent);
}

.dl-move-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.dl-move-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-move-check {
  font-size: 11px;
  color: var(--green-accent);
  font-weight: 700;
  flex-shrink: 0;
}

.dl-move-empty {
  padding: 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}

.dl-action-move {
  opacity: 0.7;
  transition: opacity 0.2s;
}

.dl-action-move:hover {
  opacity: 1;
}

/* ============================================
   DRILL CARD — MULTI-SELECT STYLES
   ============================================ */

/* Selected card */
.dl-card.dl-card-selected {
  border-color: rgba(46, 204, 113, 0.6);
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.25), 0 4px 20px rgba(46, 204, 113, 0.15);
  transform: translateY(-2px);
}

/* Checkbox overlay on card */
.dl-card-checkbox {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(.4, 0, .2, 1);
  backdrop-filter: blur(6px);
  font-size: 0;
  color: white;
  opacity: 0;
}

.dl-card:hover .dl-card-checkbox {
  opacity: 1;
}

.dl-card.dl-card-selected .dl-card-checkbox {
  opacity: 1;
  background: var(--green-accent);
  border-color: var(--green-accent);
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(46, 204, 113, 0.4);
  transform: scale(1);
  animation: checkPop 0.3s cubic-bezier(.4, 0, .2, 1);
}

@keyframes checkPop {
  0% {
    transform: scale(0.5);
  }

  50% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1);
  }
}

/* Dim unselected cards when selection mode is active */
.dl-grid.dl-selection-active .dl-card:not(.dl-card-selected) {
  opacity: 0.6;
}

.dl-grid.dl-selection-active .dl-card:not(.dl-card-selected):hover {
  opacity: 0.85;
}

/* ============================================
   FLOATING SELECTION ACTION BAR
   ============================================ */
.dl-selection-bar {
  position: fixed;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  transition: bottom 0.35s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}

.dl-selection-bar.active {
  bottom: 28px;
  pointer-events: all;
}

.dl-selection-bar-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(22, 26, 32, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 10px 12px 10px 20px;
  backdrop-filter: blur(24px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.dl-selection-info {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.dl-selection-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
}

.dl-selection-count {
  font-size: 16px;
  font-weight: 800;
  color: var(--green-accent);
  font-family: 'Inter', sans-serif;
}

.dl-selection-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.dl-selection-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.dl-selection-btn {
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  padding: 9px 18px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.dl-selection-btn>* {
  pointer-events: none;
}

.dl-selection-add {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  color: #fff;
  box-shadow: 0 3px 12px rgba(46, 204, 113, 0.3);
}

.dl-selection-add:hover {
  box-shadow: 0 6px 20px rgba(46, 204, 113, 0.45);
  transform: translateY(-1px);
}

.dl-selection-add:active {
  transform: translateY(0);
}

.dl-selection-delete {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: #fff;
  box-shadow: 0 3px 12px rgba(231, 76, 60, 0.3);
}

.dl-selection-delete:hover {
  box-shadow: 0 6px 20px rgba(231, 76, 60, 0.45);
  transform: translateY(-1px);
}

.dl-selection-delete:active {
  transform: translateY(0);
}

.dl-selection-clear {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.dl-selection-clear:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

/* ============================================
   MEDIA VIEWER MODAL
   ============================================ */
.dl-media-viewer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dl-media-viewer.active {
  display: flex;
  animation: dl-mv-fadein 0.3s ease;
}

@keyframes dl-mv-fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.dl-mv-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(20px);
}

/* Close button */
.dl-mv-close {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  backdrop-filter: blur(8px);
}

.dl-mv-close:hover {
  background: rgba(231, 76, 60, 0.6);
  border-color: rgba(231, 76, 60, 0.8);
  transform: scale(1.1);
}

/* Header */
.dl-mv-header {
  position: absolute;
  top: 16px;
  left: 24px;
  z-index: 10;
  max-width: 60%;
}

.dl-mv-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dl-mv-info {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

/* Content area */
.dl-mv-content {
  position: relative;
  z-index: 5;
  max-width: 90vw;
  max-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dl-mv-content video {
  max-width: 90vw;
  max-height: 75vh;
  border-radius: 8px;
  background: #000;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.dl-mv-content img {
  max-width: 90vw;
  max-height: 80vh;
  border-radius: 8px;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  user-select: none;
}

/* ---- Video Controls Bar ---- */
.dl-mv-controls {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: none;
  align-items: center;
  gap: 10px;
  background: rgba(10, 12, 18, 0.85);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 10px 16px;
  width: min(800px, 85vw);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.dl-mv-controls.active {
  display: flex;
}

/* Control buttons */
.dl-mv-btn {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  padding: 6px;
  border-radius: 6px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
}

.dl-mv-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dl-mv-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(46, 204, 113, 0.2);
  border: 1px solid rgba(46, 204, 113, 0.3);
}

.dl-mv-play-btn:hover {
  background: rgba(46, 204, 113, 0.4) !important;
}

.dl-mv-play-icon {
  font-size: 14px;
}

/* Time */
.dl-mv-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  font-family: 'Inter', monospace;
  min-width: 36px;
  text-align: center;
  flex-shrink: 0;
  user-select: none;
}

/* Progress bar */
.dl-mv-progress {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  min-width: 100px;
}

.dl-mv-progress-buffered {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  pointer-events: none;
}

.dl-mv-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--green-accent), #27d673);
  border-radius: 3px;
  pointer-events: none;
  transition: width 0.1s linear;
}

.dl-mv-progress-input {
  position: absolute;
  top: -6px;
  left: 0;
  width: 100%;
  height: 18px;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  -webkit-appearance: none;
}

.dl-mv-progress:hover .dl-mv-progress-fill {
  height: 8px;
  top: -1px;
}

/* Volume */
.dl-mv-volume-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.dl-mv-volume {
  width: 60px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.dl-mv-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Speed button */
.dl-mv-speed-btn {
  font-size: 11px;
  font-weight: 700;
  min-width: 32px;
  letter-spacing: -0.3px;
}

/* Fullscreen */
.dl-mv-fs-btn {
  font-size: 18px;
}

/* Navigation arrows */
.dl-mv-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 22px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
  backdrop-filter: blur(8px);
}

.dl-mv-nav:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-50%) scale(1.1);
}

.dl-mv-prev {
  left: 16px;
}

.dl-mv-next {
  right: 16px;
}

/* -- Upload Section -- */
.dl-upload-section {
  margin-top: 8px;
}

.dl-upload-header {
  margin-bottom: 14px;
}

.dl-upload-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.dl-upload-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

.dl-upload-zone {
  border: 2px dashed var(--border-color);
  border-radius: 16px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(.4, 0, .2, 1);
  background: rgba(255, 255, 255, 0.01);
  position: relative;
  overflow: hidden;
}

.dl-upload-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(46, 204, 113, 0.03) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}

.dl-upload-zone:hover {
  border-color: rgba(46, 204, 113, 0.4);
  background: rgba(46, 204, 113, 0.03);
}

.dl-upload-zone:hover::before {
  opacity: 1;
}

.dl-upload-zone.drag-active {
  border-color: var(--green-accent);
  border-style: solid;
  background: rgba(46, 204, 113, 0.06);
  box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.08), inset 0 0 30px rgba(46, 204, 113, 0.05);
  transform: scale(1.01);
}

.dl-upload-zone.drag-active::before {
  opacity: 1;
}

.dl-upload-zone.drag-active .dl-upload-main-text {
  color: var(--green-accent);
}

.dl-upload-zone.drag-active .dl-upload-icon {
  transform: scale(1.15);
}

.dl-upload-zone-inner {
  position: relative;
  z-index: 2;
}

.dl-upload-icon {
  font-size: 44px;
  margin-bottom: 12px;
  transition: transform 0.3s;
  display: block;
}

.dl-upload-main-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
  transition: color 0.3s;
}

.dl-upload-sub-text {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 12px;
}

.dl-upload-browse-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 10px 24px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.25s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dl-upload-browse-btn:hover {
  background: var(--bg-hover);
  border-color: var(--green-accent);
  color: var(--green-accent);
  box-shadow: 0 2px 12px rgba(46, 204, 113, 0.15);
}

.dl-upload-types {
  font-size: 11px;
  color: var(--text-muted);
  margin: 12px 0 0;
  font-weight: 500;
}

/* -- Upload Preview Area -- */
.dl-upload-preview-area {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
}

.dl-preview-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px;
  width: 180px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  transition: all 0.25s;
  animation: dlPreviewIn 0.3s ease;
}

@keyframes dlPreviewIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dl-preview-item:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.dl-preview-thumb {
  width: 100%;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dl-preview-thumb img,
.dl-preview-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dl-preview-thumb-icon {
  font-size: 28px;
  opacity: 0.4;
}

.dl-preview-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dl-preview-size {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
}

.dl-preview-progress {
  width: 100%;
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: 2px;
  overflow: hidden;
}

.dl-preview-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--green-accent), var(--green-dark));
  border-radius: 2px;
  transition: width 0.5s ease;
}

.dl-preview-status {
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.dl-preview-status.status-uploading {
  color: var(--blue-accent);
}

.dl-preview-status.status-success {
  color: var(--green-accent);
}

.dl-preview-status.status-error {
  color: var(--red-accent);
}

.dl-preview-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  opacity: 0;
  backdrop-filter: blur(4px);
}

.dl-preview-item:hover .dl-preview-remove {
  opacity: 1;
}

.dl-preview-remove:hover {
  background: var(--red-accent);
}

/* -- New Drill Modal -- */
.dl-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: dlOverlayIn 0.2s ease;
}

@keyframes dlOverlayIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.dl-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  width: 520px;
  max-width: 92vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: dlModalIn 0.25s cubic-bezier(.4, 0, .2, 1);
}

@keyframes dlModalIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dl-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border-color);
}

.dl-modal-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.dl-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s;
  line-height: 1;
}

.dl-modal-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.dl-modal-body {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dl-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.dl-form-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.dl-form-input {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  padding: 9px 12px;
  border-radius: 8px;
  outline: none;
  transition: all 0.2s;
  width: 100%;
}

.dl-form-input:focus {
  border-color: var(--green-accent);
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.1);
}

.dl-form-input::placeholder {
  color: var(--text-muted);
}

.dl-form-textarea {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  padding: 9px 12px;
  border-radius: 8px;
  outline: none;
  transition: all 0.2s;
  resize: vertical;
  min-height: 60px;
  line-height: 1.6;
  width: 100%;
}

.dl-form-textarea:focus {
  border-color: var(--green-accent);
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.1);
}

.dl-form-textarea::placeholder {
  color: var(--text-muted);
}

.dl-form-row {
  display: flex;
  gap: 12px;
}

.dl-modal-footer {
  display: flex;
  gap: 10px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border-color);
  justify-content: flex-end;
}

.dl-modal-btn {
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.25s;
  border: none;
}

.dl-modal-cancel {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.dl-modal-cancel:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.dl-modal-confirm {
  background: linear-gradient(135deg, var(--green-accent), var(--green-dark));
  color: #fff;
  box-shadow: 0 2px 10px rgba(46, 204, 113, 0.25);
}

.dl-modal-confirm:hover {
  box-shadow: 0 4px 16px rgba(46, 204, 113, 0.4);
  transform: translateY(-1px);
}

/* -- Responsive Tablet -- */
@media (max-width: 1200px) {
  .dl-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .dl-sidebar {
    display: none;
  }

  .dl-main-content {
    padding: 16px 20px 24px;
  }

  .dl-topbar-nav {
    display: none;
  }

  .dl-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .dl-toolbar-right {
    flex-wrap: wrap;
    gap: 8px;
  }

  .dl-filter-group {
    flex-wrap: wrap;
  }

  .dl-stats-bar {
    flex-wrap: wrap;
  }
}

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

.dl-modal-confirm {
  background: linear-gradient(135deg, var(--green-accent), var(--green-dark));
  color: #fff;
  box-shadow: 0 2px 10px rgba(46, 204, 113, 0.25);
}

.dl-modal-confirm:hover {
  box-shadow: 0 4px 16px rgba(46, 204, 113, 0.4);
  transform: translateY(-1px);
}

/* -- Responsive Tablet -- */
@media (max-width: 1200px) {
  .dl-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .dl-sidebar {
    display: none;
  }

  .dl-main-content {
    padding: 16px 20px 24px;
  }

  .dl-topbar-nav {
    display: none;
  }

  .dl-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .dl-toolbar-right {
    flex-wrap: wrap;
    gap: 8px;
  }

  .dl-filter-group {
    flex-wrap: wrap;
  }

  .dl-stats-bar {
    flex-wrap: wrap;
  }
}

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

/* ==========================================
   ANALİZ PAGE
   ========================================== */
.analiz-page {
  flex: 1;
  height: 100%;
  display: flex;
  background: var(--bg-primary);
}

/* ==========================================
   TACTICAL DRAWING BOARD
   ========================================== */
.sq-draw-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
  pointer-events: none;
  cursor: crosshair;
  touch-action: none;
  background: transparent;
}

.sq-pitch-surface.sq-draw-mode .sq-draw-canvas {
  z-index: 100;
}

/* Only hide ghost slots so they don't block the canvas */
.sq-pitch-surface.sq-draw-mode .sq-pitch-ghost {
  pointer-events: none !important;
}

/* Render markers fully transparent to pointer when actively using drawing tools so the mouse swipe reaches the canvas */
.sq-pitch-surface.sq-draw-mode .sq-pitch-marker,
.sq-pitch-surface.sq-draw-mode .sq-opponent-marker {
  pointer-events: none !important;
}

/* Extra transitions for active moveplayer state */
.sq-pitch-surface.sq-draw-mode.sq-draw-moveplayer .sq-pitch-marker,
.sq-pitch-surface.sq-draw-mode.sq-draw-moveplayer .sq-opponent-marker {
  pointer-events: auto !important;
  cursor: grab !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sq-pitch-surface.sq-draw-mode.sq-draw-moveplayer .sq-pitch-marker:hover {
  transform: translate(-50%, -50%) scale(1.12);
  filter: brightness(1.15);
}

.sq-pitch-surface.sq-draw-mode.sq-draw-moveplayer .sq-pitch-marker:hover .sq-marker-circle {
  box-shadow: 0 0 18px rgba(46, 204, 113, 0.5), 0 0 6px rgba(255, 255, 255, 0.3) !important;
}

.sq-pitch-surface.sq-draw-mode.sq-draw-moveplayer .sq-pitch-marker.dragging {
  cursor: grabbing !important;
  transform: translate(-50%, -50%) scale(1.18);
  z-index: 50 !important;
}

/* ==========================================
   SAHA (FIELD) SELECTOR
   ========================================== */
/* ===== SAHA FIELD PICKER - Visual Thumbnail Grid ===== */
.sq-field-accordion {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.sq-field-accordion.open .sq-accordion-body {
  max-height: 500px;
}

.sq-field-badge {
  background: rgba(46, 204, 113, 0.12) !important;
  color: var(--green-accent) !important;
}

.sq-field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 4px 0;
}

.sq-field-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 10px;
  border: 2px solid transparent;
  background: var(--bg-tertiary);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.sq-field-card:hover {
  border-color: var(--border-color);
  background: var(--bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sq-field-card.active {
  border-color: var(--green-accent);
  background: rgba(46, 204, 113, 0.06);
  box-shadow: 0 0 0 1px rgba(46, 204, 113, 0.2), 0 4px 12px rgba(46, 204, 113, 0.1);
}

.sq-field-card.active::after {
  content: '✓';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  background: var(--green-accent);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.sq-field-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.2px;
  transition: color 0.2s;
  text-align: center;
  line-height: 1.2;
}

.sq-field-card:hover .sq-field-label {
  color: var(--text-primary);
}

.sq-field-card.active .sq-field-label {
  color: var(--green-accent);
}

/* --- Field Thumbnail (miniature pitch) --- */
.sq-field-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  display: flex;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.15);
}

/* --- Stripes (horizontal layout = vertical stripes for landscape pitch) --- */
.sq-ft-stripe {
  flex: 1;
  transition: background 0.3s;
}

/* Green Field Stripes */
.sq-field-thumb-green .sq-ft-stripe:nth-child(odd) {
  background: #3aae3a;
}

.sq-field-thumb-green .sq-ft-stripe:nth-child(even) {
  background: #45c045;
}

/* Dark Field Stripes */
.sq-field-thumb-dark .sq-ft-stripe:nth-child(odd) {
  background: #1a3d1a;
}

.sq-field-thumb-dark .sq-ft-stripe:nth-child(even) {
  background: #234e23;
}

/* Light Field Stripes */
.sq-field-thumb-light .sq-ft-stripe:nth-child(odd) {
  background: #4a9e4a;
}

.sq-field-thumb-light .sq-ft-stripe:nth-child(even) {
  background: #5cb85c;
}

/* Striped (high contrast) Field Stripes */
.sq-field-thumb-striped .sq-ft-stripe:nth-child(odd) {
  background: #3a8a3a;
}

.sq-field-thumb-striped .sq-ft-stripe:nth-child(even) {
  background: #5ebd5e;
}

/* Brown Field */
.sq-field-thumb-brown .sq-ft-stripe:nth-child(odd) {
  background: #6b4c2a;
}

.sq-field-thumb-brown .sq-ft-stripe:nth-child(even) {
  background: #7a5a35;
}

/* Indoor / Parke */
.sq-field-thumb-indoor .sq-ft-stripe:nth-child(odd) {
  background: #b08850;
}

.sq-field-thumb-indoor .sq-ft-stripe:nth-child(even) {
  background: #c49a5c;
}

/* Snow Field */
.sq-field-thumb-snow .sq-ft-stripe:nth-child(odd) {
  background: #c8d8e4;
}

.sq-field-thumb-snow .sq-ft-stripe:nth-child(even) {
  background: #dce8f0;
}

/* Night Field */
.sq-field-thumb-night .sq-ft-stripe:nth-child(odd) {
  background: #1a3020;
}

.sq-field-thumb-night .sq-ft-stripe:nth-child(even) {
  background: #243d2a;
}

/* --- Pitch Line Markings (inside thumbnail) --- */
.sq-ft-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Center line (vertical in landscape) */
.sq-ft-half {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.55);
  transform: translateX(-50%);
}

/* Center circle */
.sq-ft-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Left penalty area */
.sq-ft-penalty-l {
  position: absolute;
  left: 0;
  top: 50%;
  width: 16%;
  height: 55%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-left: none;
  transform: translateY(-50%);
}

/* Right penalty area */
.sq-ft-penalty-r {
  position: absolute;
  right: 0;
  top: 50%;
  width: 16%;
  height: 55%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-right: none;
  transform: translateY(-50%);
}

/* Left goal area */
.sq-ft-goal-l {
  position: absolute;
  left: 0;
  top: 50%;
  width: 6%;
  height: 26%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-left: none;
  transform: translateY(-50%);
}

/* Right goal area */
.sq-ft-goal-r {
  position: absolute;
  right: 0;
  top: 50%;
  width: 6%;
  height: 26%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-right: none;
  transform: translateY(-50%);
}

/* Snow/Indoor thumb with darker lines for contrast */
.sq-field-thumb-snow .sq-ft-half,
.sq-field-thumb-snow .sq-ft-circle,
.sq-field-thumb-snow .sq-ft-penalty-l,
.sq-field-thumb-snow .sq-ft-penalty-r,
.sq-field-thumb-snow .sq-ft-goal-l,
.sq-field-thumb-snow .sq-ft-goal-r {
  border-color: rgba(0, 0, 0, 0.2);
}

.sq-field-thumb-snow .sq-ft-half {
  background: rgba(0, 0, 0, 0.2);
}

.sq-field-thumb-indoor .sq-ft-half,
.sq-field-thumb-indoor .sq-ft-circle,
.sq-field-thumb-indoor .sq-ft-penalty-l,
.sq-field-thumb-indoor .sq-ft-penalty-r,
.sq-field-thumb-indoor .sq-ft-goal-l,
.sq-field-thumb-indoor .sq-ft-goal-r {
  border-color: rgba(0, 0, 0, 0.2);
}

.sq-field-thumb-indoor .sq-ft-half {
  background: rgba(0, 0, 0, 0.2);
}

/* --- Pitch Surface Color Variants --- */
.sq-pitch-surface.field-dark {
  background: linear-gradient(180deg, #1a3d1a 0%, #1e4620 50%, #1a3d1a 100%) !important;
}

.sq-pitch-surface.field-light {
  background: linear-gradient(180deg, #4a9e4a 0%, #55b855 50%, #4a9e4a 100%) !important;
}

.sq-pitch-surface.field-striped {
  background:
    repeating-linear-gradient(90deg,
      #3a8a3a 0px, #3a8a3a calc(100% / 8),
      #5ebd5e calc(100% / 8), #5ebd5e calc(100% / 4)) !important;
}

.sq-pitch-surface.field-brown {
  background: linear-gradient(180deg, #6b4c2a 0%, #7a5a35 50%, #6b4c2a 100%) !important;
}

.sq-pitch-surface.field-indoor {
  background: linear-gradient(180deg, #b08850 0%, #c49a5c 50%, #b08850 100%) !important;
}

.sq-pitch-surface.field-snow {
  background: linear-gradient(180deg, #c8d8e4 0%, #dce8f0 50%, #c8d8e4 100%) !important;
}

.sq-pitch-surface.field-night {
  background:
    repeating-linear-gradient(90deg,
      #1a3020 0px, #1a3020 calc(100% / 8),
      #243d2a calc(100% / 8), #243d2a calc(100% / 4)) !important;
}

.sq-pitch-surface.field-night::before {
  background:
    radial-gradient(ellipse 60% 40% at 50% 50%,
      rgba(255, 255, 200, 0.04) 0%,
      transparent 50%,
      rgba(0, 0, 0, 0.2) 100%) !important;
}

.sq-pitch-surface.field-snow .sq-pitch-line,
.sq-pitch-surface.field-snow .sq-pitch-half,
.sq-pitch-surface.field-snow .sq-pitch-circle,
.sq-pitch-surface.field-snow .sq-pitch-penalty-top,
.sq-pitch-surface.field-snow .sq-pitch-penalty-bottom,
.sq-pitch-surface.field-snow .sq-pitch-goal-top,
.sq-pitch-surface.field-snow .sq-pitch-goal-bottom {
  border-color: rgba(0, 0, 0, 0.25) !important;
}

.sq-pitch-surface.field-snow .sq-marker-name {
  color: #222 !important;
}

.sq-pitch-surface.field-brown .sq-pitch-line,
.sq-pitch-surface.field-brown .sq-pitch-half,
.sq-pitch-surface.field-brown .sq-pitch-circle,
.sq-pitch-surface.field-brown .sq-pitch-penalty-top,
.sq-pitch-surface.field-brown .sq-pitch-penalty-bottom,
.sq-pitch-surface.field-brown .sq-pitch-goal-top,
.sq-pitch-surface.field-brown .sq-pitch-goal-bottom {
  border-color: rgba(255, 255, 255, 0.35) !important;
}

.sq-pitch-surface.field-indoor .sq-pitch-line,
.sq-pitch-surface.field-indoor .sq-pitch-half,
.sq-pitch-surface.field-indoor .sq-pitch-circle,
.sq-pitch-surface.field-indoor .sq-pitch-penalty-top,
.sq-pitch-surface.field-indoor .sq-pitch-penalty-bottom,
.sq-pitch-surface.field-indoor .sq-pitch-goal-top,
.sq-pitch-surface.field-indoor .sq-pitch-goal-bottom {
  border-color: rgba(0, 0, 0, 0.25) !important;
}

/* --- Trigger Button --- */
.sq-draw-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.sq-draw-trigger:hover {
  background: rgba(255, 255, 255, 0.04);
}

.sq-draw-trigger-icon {
  font-size: 16px;
}

.sq-draw-trigger-text {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
}

.sq-draw-trigger-chevron {
  font-size: 11px;
  color: var(--text-muted);
  transition: transform 0.2s;
}

/* --- Full Panel --- */
.sq-draw-fullpanel {
  padding: 0;
  overflow-y: auto;
  flex: 1;
}

.sq-draw-fp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: sticky;
  top: 0;
  background: var(--bg-secondary);
  z-index: 2;
}

.sq-draw-fp-back {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 5px 12px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
}

.sq-draw-fp-back:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.sq-draw-fp-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

/* --- Sections --- */
.sq-draw-fp-section {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.sq-draw-fp-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}

/* --- Tool Grid --- */
.sq-draw-fp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.sq-draw-fp-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 2px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Inter', sans-serif;
}

.sq-draw-fp-tool:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.sq-draw-fp-tool.active {
  background: rgba(46, 204, 113, 0.12);
  border-color: rgba(46, 204, 113, 0.35);
  color: var(--green-accent);
}

.sq-fp-ico {
  font-size: 16px;
  line-height: 1;
}

.sq-fp-txt {
  font-size: 9px;
  font-weight: 600;
  opacity: 0.7;
}

.sq-draw-fp-tool.active .sq-fp-txt {
  opacity: 1;
}

/* --- Colors --- */
.sq-draw-fp-colors {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.sq-draw-fp-color {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
  margin: 0 auto;
}

.sq-draw-fp-color:hover {
  transform: scale(1.15);
  border-color: rgba(255, 255, 255, 0.35);
}

.sq-draw-fp-color.active {
  border-color: #fff;
  transform: scale(1.1);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
}

/* --- Widths --- */
.sq-draw-fp-widths {
  display: flex;
  gap: 4px;
}

.sq-draw-fp-width {
  flex: 1;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  padding: 0;
}

.sq-draw-fp-width:hover {
  background: rgba(255, 255, 255, 0.06);
}

.sq-draw-fp-width.active {
  background: rgba(46, 204, 113, 0.12);
  border-color: rgba(46, 204, 113, 0.35);
}

.sq-fp-wline {
  display: block;
  width: 65%;
  background: var(--text-secondary);
  border-radius: 2px;
}

.sq-draw-fp-width.active .sq-fp-wline {
  background: var(--green-accent);
}

/* --- Opacity --- */
.sq-draw-fp-opacity-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sq-draw-fp-opacity {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  outline: none;
}

.sq-draw-fp-opacity::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--green-accent);
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.sq-draw-fp-opacity-val {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 34px;
  text-align: right;
}

/* --- Actions --- */
.sq-draw-fp-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.sq-draw-fp-act {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}

.sq-draw-fp-act:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-primary);
}

.sq-draw-fp-act span {
  font-size: 14px;
}

.sq-fp-act-danger:hover {
  background: rgba(231, 76, 60, 0.12);
  color: #ef4444;
}

.sq-fp-act-export:hover {
  background: rgba(46, 204, 113, 0.12);
  color: var(--green-accent);
}

.sq-fp-act-save,
.sq-action-save-lib {
  grid-column: 1 / -1;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: #60a5fa;
}

.sq-fp-act-save:hover,
.sq-action-save-lib:hover {
  background: rgba(59, 130, 246, 0.18);
  color: #93bbfc;
  border-color: rgba(59, 130, 246, 0.4);
}

/* ==========================================
   SAVE TO LIBRARY MODAL
   ========================================== */
.sq-save-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: sqSaveFade 0.2s ease;
}

@keyframes sqSaveFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.sq-save-modal {
  background: linear-gradient(145deg, #1a2030, #14181f);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  width: 380px;
  max-height: 520px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  animation: sqSaveSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

@keyframes sqSaveSlide {
  from {
    transform: translateY(24px) scale(0.95);
    opacity: 0;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.sq-save-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sq-save-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: #e8e8e8;
  margin: 0;
  font-family: 'Inter', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sq-save-close {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #8a8a8a;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.sq-save-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e8e8e8;
}

/* Preview thumbnail */
.sq-save-preview {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.sq-save-thumb {
  width: 72px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #0d1117;
  flex-shrink: 0;
}

.sq-save-name-wrap {
  flex: 1;
  min-width: 0;
}

.sq-save-label {
  font-size: 9px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
  font-family: 'Inter', sans-serif;
}

.sq-save-name-input {
  width: 100%;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #e8e8e8;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.sq-save-name-input:focus {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
}

/* Folder list */
.sq-save-folder-label {
  font-size: 9px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px 20px 6px;
  font-family: 'Inter', sans-serif;
}

.sq-save-folders {
  flex: 1;
  overflow-y: auto;
  padding: 0 12px 8px;
  max-height: 220px;
}

.sq-save-folders::-webkit-scrollbar {
  width: 4px;
}

.sq-save-folders::-webkit-scrollbar-track {
  background: transparent;
}

.sq-save-folders::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}

.sq-save-folder {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1.5px solid transparent;
  margin-bottom: 2px;
}

.sq-save-folder:hover {
  background: rgba(255, 255, 255, 0.04);
}

.sq-save-folder.active {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.35);
}

.sq-save-folder-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sq-save-folder-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #d1d5db;
  font-family: 'Inter', sans-serif;
}

.sq-save-folder.active .sq-save-folder-name {
  color: #93bbfc;
}

.sq-save-folder-cnt {
  font-size: 10px;
  color: #6b7280;
  font-family: 'Inter', sans-serif;
}

.sq-save-folder-tick {
  font-size: 12px;
  color: #3b82f6;
  opacity: 0;
  transition: opacity 0.15s;
}

.sq-save-folder.active .sq-save-folder-tick {
  opacity: 1;
}

/* Footer */
.sq-save-footer {
  display: flex;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sq-save-btn {
  flex: 1;
  padding: 10px 0;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  border: none;
}

.sq-save-btn-cancel {
  background: rgba(255, 255, 255, 0.05);
  color: #9ca3af;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.sq-save-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #d1d5db;
}

.sq-save-btn-save {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.sq-save-btn-save:hover {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
  transform: translateY(-1px);
}

.sq-save-btn-save:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* --- Text Input --- */
.sq-draw-text-input-wrap {
  position: absolute;
  z-index: 20;
}

.sq-draw-text-input {
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  color: #fff;
  outline: none;
  min-width: 100px;
}

.sq-draw-text-input:focus {
  border-color: var(--green-accent);
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.2);
}

/* ==========================================
   SAHA PANEL — Horizontal Field Thumbnail
   ========================================== */
.sq-saha-card-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sq-saha-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 8px;
  border: 2px solid transparent;
  background: var(--bg-tertiary);
  cursor: pointer;
  transition: all 0.25s;
  position: relative;
}

.sq-saha-card:hover {
  border-color: var(--border-color);
  background: var(--bg-hover);
}

.sq-saha-card.active {
  border-color: var(--green-accent);
  background: rgba(46, 204, 113, 0.06);
}

.sq-saha-card.active::after {
  content: '✓';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 14px;
  height: 14px;
  background: var(--green-accent);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.sq-saha-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.2px;
}

.sq-saha-card.active .sq-saha-label {
  color: var(--green-accent);
}

/* --- Horizontal landscape field thumbnail --- */
.sq-saha-thumb {
  pointer-events: none;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.15);
}

/* Horizontal stripes (rows) */
.sq-saha-stripe {
  flex: 1;
}

.sq-saha-stripe:nth-child(odd) {
  background: #2d7a2d;
}

.sq-saha-stripe:nth-child(even) {
  background: #3a9a3a;
}

/* Pitch line markings overlay */
.sq-saha-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Outer border */
.sq-saha-border {
  position: absolute;
  inset: 3%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
}

/* Center line (vertical) */
.sq-saha-half {
  position: absolute;
  top: 3%;
  bottom: 3%;
  left: 50%;
  width: 1.5px;
  background: rgba(255, 255, 255, 0.7);
  transform: translateX(-50%);
}

/* Center circle */
.sq-saha-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16%;
  aspect-ratio: 1;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Center dot */
.sq-saha-center-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Left penalty area */
.sq-saha-penalty-l {
  position: absolute;
  left: 3%;
  top: 50%;
  width: 13%;
  height: 54%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-left: none;
  transform: translateY(-50%);
}

/* Right penalty area */
.sq-saha-penalty-r {
  position: absolute;
  right: 3%;
  top: 50%;
  width: 13%;
  height: 54%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-right: none;
  transform: translateY(-50%);
}

/* Left goal area */
.sq-saha-goal-l {
  position: absolute;
  left: 3%;
  top: 50%;
  width: 5%;
  height: 24%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-left: none;
  transform: translateY(-50%);
}

/* Right goal area */
.sq-saha-goal-r {
  position: absolute;
  right: 3%;
  top: 50%;
  width: 5%;
  height: 24%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-right: none;
  transform: translateY(-50%);
}

/* Left penalty arc */
.sq-saha-arc-l {
  position: absolute;
  left: 13%;
  top: 50%;
  width: 8%;
  height: 20%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  transform: translateY(-50%);
  clip-path: inset(0 0 0 50%);
}

/* Right penalty arc */
.sq-saha-arc-r {
  position: absolute;
  right: 13%;
  top: 50%;
  width: 8%;
  height: 20%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  transform: translateY(-50%);
  clip-path: inset(0 50% 0 0);
}

/* --- Portrait pitch thumbnail (2:3 aspect ratio) --- */
.sq-saha-thumb-portrait {
  aspect-ratio: 2 / 3;
  flex-direction: column;
}

/* Horizontal half-line (for portrait) */
.sq-saha-half-h {
  position: absolute;
  left: 3%;
  right: 3%;
  top: 50%;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.7);
  transform: translateY(-50%);
}

/* Top penalty area (portrait) */
.sq-saha-penalty-t {
  position: absolute;
  top: 3%;
  left: 50%;
  width: 54%;
  height: 13%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-top: none;
  transform: translateX(-50%);
}

/* Bottom penalty area (portrait) */
.sq-saha-penalty-b {
  position: absolute;
  bottom: 3%;
  left: 50%;
  width: 54%;
  height: 13%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-bottom: none;
  transform: translateX(-50%);
}

/* Top goal area (portrait) */
.sq-saha-goal-t {
  position: absolute;
  top: 3%;
  left: 50%;
  width: 24%;
  height: 5%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-top: none;
  transform: translateX(-50%);
}

/* Bottom goal area (portrait) */
.sq-saha-goal-b {
  position: absolute;
  bottom: 3%;
  left: 50%;
  width: 24%;
  height: 5%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-bottom: none;
  transform: translateX(-50%);
}

/* Top penalty arc (portrait) */
.sq-saha-arc-t {
  position: absolute;
  top: 13%;
  left: 50%;
  width: 20%;
  height: 8%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  transform: translateX(-50%);
  clip-path: inset(50% 0 0 0);
}

/* Bottom penalty arc (portrait) */
.sq-saha-arc-b {
  position: absolute;
  bottom: 13%;
  left: 50%;
  width: 20%;
  height: 8%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  transform: translateX(-50%);
  clip-path: inset(0 0 50% 0);
}

/* ==========================================
   LANDSCAPE PITCH MODE
   ========================================== */
.sq-pitch-surface.sq-pitch-landscape {
  aspect-ratio: 3 / 2;
  height: auto;
  width: 100%;
  max-height: 100%;
  background:
    linear-gradient(90deg,
      #2d7a2d 0%, #2d7a2d 3%,
      transparent 3%, transparent 97%,
      #2d7a2d 97%, #2d7a2d 100%),
    repeating-linear-gradient(90deg,
      #2d7a2d 3%, #2d7a2d 7.7%,
      #3a9a3a 7.7%, #3a9a3a 12.4%) !important;
}

.sq-pitch-landscape .sq-pitch-half {
  top: 3%;
  bottom: 3%;
  left: 50%;
  right: auto;
  height: auto;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.85);
}

.sq-pitch-landscape .sq-pitch-circle {
  width: 20%;
}

.sq-pitch-landscape .sq-pitch-penalty-top {
  top: 50%;
  left: 3%;
  right: auto;
  bottom: auto;
  width: 14%;
  height: 56.5%;
  border: 2.5px solid rgba(255, 255, 255, 0.75);
  border-left: none;
  transform: translateY(-50%);
}

.sq-pitch-landscape .sq-pitch-penalty-bottom {
  top: 50%;
  right: 3%;
  left: auto;
  bottom: auto;
  width: 14%;
  height: 56.5%;
  border: 2.5px solid rgba(255, 255, 255, 0.75);
  border-right: none;
  transform: translateY(-50%);
}

.sq-pitch-landscape .sq-pitch-goal-top {
  top: 50%;
  left: 3%;
  right: auto;
  bottom: auto;
  width: 5%;
  height: 26%;
  border: 2.5px solid rgba(255, 255, 255, 0.75);
  border-left: none;
  transform: translateY(-50%);
}

.sq-pitch-landscape .sq-pitch-goal-bottom {
  top: 50%;
  right: 3%;
  left: auto;
  bottom: auto;
  width: 5%;
  height: 26%;
  border: 2.5px solid rgba(255, 255, 255, 0.75);
  border-right: none;
  transform: translateY(-50%);
}

.sq-pitch-landscape .sq-pitch-arc-top {
  top: 50%;
  left: 12%;
  right: auto;
  bottom: auto;
  width: 10%;
  height: 18%;
  transform: translateY(-50%);
  clip-path: inset(0 0 0 50%);
}

.sq-pitch-landscape .sq-pitch-arc-bottom {
  top: 50%;
  right: 12%;
  left: auto;
  bottom: auto;
  width: 10%;
  height: 18%;
  transform: translateY(-50%);
  clip-path: inset(0 50% 0 0);
}

.sq-pitch-landscape .sq-spot-top {
  top: 50%;
  left: 13%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
}

.sq-pitch-landscape .sq-spot-bottom {
  top: 50%;
  right: 13%;
  left: auto;
  bottom: auto;
  transform: translate(50%, -50%);
}

/* Landscape: goals on left and right sides — OUTSIDE boundary */
.sq-pitch-landscape .sq-goalframe-top {
  /* Left goal */
  top: 50%;
  left: 0;
  right: auto;
  bottom: auto;
  width: 3%;
  height: 16%;
  border: none;
  border-left: 3px solid rgba(255, 255, 255, 0.95);
  border-top: 3px solid rgba(255, 255, 255, 0.95);
  border-bottom: 3px solid rgba(255, 255, 255, 0.95);
  transform: translateY(-50%);
  box-shadow: 2px 0 8px rgba(255, 255, 255, 0.15);
}

.sq-pitch-landscape .sq-goalframe-bottom {
  /* Right goal */
  top: 50%;
  right: 0;
  left: auto;
  bottom: auto;
  width: 3%;
  height: 16%;
  border: none;
  border-right: 3px solid rgba(255, 255, 255, 0.95);
  border-top: 3px solid rgba(255, 255, 255, 0.95);
  border-bottom: 3px solid rgba(255, 255, 255, 0.95);
  transform: translateY(-50%);
  box-shadow: -2px 0 8px rgba(255, 255, 255, 0.15);
}

.sq-pitch-landscape .sq-goalnet-top {
  /* Left net */
  top: 50%;
  left: 0.2%;
  right: auto;
  bottom: auto;
  width: 2.6%;
  height: 15%;
  transform: translateY(-50%);
  background: repeating-linear-gradient(0deg,
      rgba(255, 255, 255, 0.18) 0px,
      rgba(255, 255, 255, 0.18) 1px,
      transparent 1px,
      transparent 5px),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.18) 0px,
      rgba(255, 255, 255, 0.18) 1px,
      transparent 1px,
      transparent 5px);
  background-color: rgba(255, 255, 255, 0.04);
  border-radius: 3px 0 0 3px;
}

.sq-pitch-landscape .sq-goalnet-bottom {
  /* Right net */
  top: 50%;
  right: 0.2%;
  left: auto;
  bottom: auto;
  width: 2.6%;
  height: 15%;
  transform: translateY(-50%);
  background: repeating-linear-gradient(0deg,
      rgba(255, 255, 255, 0.18) 0px,
      rgba(255, 255, 255, 0.18) 1px,
      transparent 1px,
      transparent 5px),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.18) 0px,
      rgba(255, 255, 255, 0.18) 1px,
      transparent 1px,
      transparent 5px);
  background-color: rgba(255, 255, 255, 0.04);
  border-radius: 0 3px 3px 0;
}

/* ==========================================
   HALF-PITCH THUMBNAIL
   ========================================== */
.sq-saha-thumb-half {
  aspect-ratio: 4 / 3;
  flex-direction: column;
}

/* Top line (halfway line at top edge) */
.sq-saha-half-top-line {
  position: absolute;
  left: 3%;
  right: 3%;
  top: 3%;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.7);
}

/* Semicircle at top (center arc visible from half-line) */
.sq-saha-half-semicircle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 28%;
  height: 16%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: 0 0 50% 50%;
  border-top: none;
  transform: translateX(-50%);
}

/* Center dot at top edge for half-pitch thumb */
.sq-saha-thumb-half .sq-saha-center-dot {
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
}

/* Bottom penalty area position for half-pitch */
.sq-saha-thumb-half .sq-saha-penalty-b {
  bottom: 3%;
  height: 22%;
  width: 54%;
}

/* Bottom goal area position for half-pitch */
.sq-saha-thumb-half .sq-saha-goal-b {
  bottom: 3%;
  height: 8%;
  width: 24%;
}

/* Penalty arc for half-pitch thumb */
.sq-saha-arc-b-half {
  position: absolute;
  bottom: 22%;
  left: 50%;
  width: 22%;
  height: 10%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  transform: translateX(-50%);
  clip-path: inset(0 0 50% 0);
}

/* ==========================================
   HALF-PITCH MODE (main pitch)
   ========================================== */
.sq-pitch-surface.sq-pitch-half {
  aspect-ratio: 4 / 3;
  height: auto;
  width: 100%;
  max-height: 100%;
  align-self: flex-start;
  background:
    linear-gradient(180deg,
      #2d7a2d 0%, #2d7a2d 10%,
      transparent 10%, transparent 97%,
      #2d7a2d 97%, #2d7a2d 100%),
    repeating-linear-gradient(180deg,
      #2d7a2d 10%, #2d7a2d 18.7%,
      #3a9a3a 18.7%, #3a9a3a 27.4%) !important;
}

.sq-pitch-surface.sq-pitch-half::after {
  top: 10%;
  border-top: none;
}

/* Hide top-side elements (only show bottom half) */
.sq-pitch-half .sq-pitch-penalty-top,
.sq-pitch-half .sq-pitch-goal-top,
.sq-pitch-half .sq-pitch-arc-top,
.sq-pitch-half .sq-spot-top,
.sq-pitch-half .sq-goalframe-top,
.sq-pitch-half .sq-goalnet-top {
  display: none;
}

/* Halfway line at 10% — aligned with stripe boundary */
.sq-pitch-half .sq-pitch-half {
  top: 10%;
  left: 3%;
  right: 3%;
  bottom: auto;
  height: 2px;
  width: auto;
  transform: none;
  background: rgba(255, 255, 255, 0.85);
}

/* Center circle semicircle — connected to center line at 10% */
.sq-pitch-half .sq-pitch-circle {
  top: 10%;
  transform: translate(-50%, -50%);
  clip-path: inset(50% 0 0 0);
  width: 22%;
}

/* Center dot at line */
.sq-pitch-half .sq-pitch-center-dot {
  top: 10%;
  transform: translate(-50%, -50%);
}

/* Penalty area — aligned to stripe boundary at 70.9% */
.sq-pitch-half .sq-pitch-penalty-bottom {
  height: 26.1%;
  width: 60%;
}

/* Goal area — aligned to stripe boundary at 88.3% */
.sq-pitch-half .sq-pitch-goal-bottom {
  height: 8.7%;
}

/* Penalty arc — connected to penalty area at 26.1% + 3% = 29.1% */
.sq-pitch-half .sq-pitch-arc-bottom {
  bottom: 24.1%;
}

/* Penalty spot */
.sq-pitch-half .sq-spot-bottom {
  bottom: 22%;
}

/* Half-pitch: show bottom goal only, hide top */
.sq-pitch-half .sq-goalframe-top,
.sq-pitch-half .sq-goalnet-top {
  display: none;
}

.sq-pitch-half .sq-goalframe-bottom {
  bottom: 0;
  width: 16%;
  height: 3%;
  border-left: 3px solid rgba(255, 255, 255, 0.95);
  border-right: 3px solid rgba(255, 255, 255, 0.95);
  border-bottom: 3px solid rgba(255, 255, 255, 0.95);
  border-top: none;
  box-shadow: 0 -2px 8px rgba(255, 255, 255, 0.15);
}

.sq-pitch-half .sq-goalnet-bottom {
  bottom: 0.2%;
  width: 15%;
  height: 2.6%;
}

/* Corner arcs — only bottom ones */
.sq-pitch-half .sq-pitch-corner.sq-corner-tl,
.sq-pitch-half .sq-pitch-corner.sq-corner-tr {
  display: none;
}

/* Flipped thumbnail preview */
.sq-saha-thumb-flip {
  transform: rotate(180deg);
}

/* ==========================================
   REVERSE HALF-PITCH MODE (kale yukarıda)
   Same as half-pitch but rotated 180°
   ========================================== */
.sq-pitch-surface.sq-pitch-half-reverse {
  aspect-ratio: 4 / 3;
  height: auto;
  width: 100%;
  max-height: 100%;
  align-self: flex-start;
  transform: rotate(180deg);
  background:
    linear-gradient(180deg,
      #2d7a2d 0%, #2d7a2d 10%,
      transparent 10%, transparent 97%,
      #2d7a2d 97%, #2d7a2d 100%),
    repeating-linear-gradient(180deg,
      #2d7a2d 10%, #2d7a2d 18.7%,
      #3a9a3a 18.7%, #3a9a3a 27.4%) !important;
}

.sq-pitch-surface.sq-pitch-half-reverse::after {
  top: 10%;
  border-top: none;
}

/* Hide top-side elements */
.sq-pitch-half-reverse .sq-pitch-penalty-top,
.sq-pitch-half-reverse .sq-pitch-goal-top,
.sq-pitch-half-reverse .sq-pitch-arc-top,
.sq-pitch-half-reverse .sq-spot-top,
.sq-pitch-half-reverse .sq-goalframe-top,
.sq-pitch-half-reverse .sq-goalnet-top {
  display: none;
}

/* Halfway line at 10% */
.sq-pitch-half-reverse .sq-pitch-half {
  top: 10%;
  left: 3%;
  right: 3%;
  bottom: auto;
  height: 2px;
  width: auto;
  transform: none;
  background: rgba(255, 255, 255, 0.85);
}

/* Center circle semicircle */
.sq-pitch-half-reverse .sq-pitch-circle {
  top: 10%;
  transform: translate(-50%, -50%);
  clip-path: inset(50% 0 0 0);
  width: 22%;
}

/* Center dot */
.sq-pitch-half-reverse .sq-pitch-center-dot {
  top: 10%;
  transform: translate(-50%, -50%);
}

/* Penalty area — aligned to stripe boundary at 70.9% */
.sq-pitch-half-reverse .sq-pitch-penalty-bottom {
  height: 26.1%;
  width: 60%;
}

/* Goal area — aligned to stripe boundary at 88.3% */
.sq-pitch-half-reverse .sq-pitch-goal-bottom {
  height: 8.7%;
}

/* Penalty arc — connected to penalty area */
.sq-pitch-half-reverse .sq-pitch-arc-bottom {
  bottom: 24.1%;
}

/* Penalty spot */
.sq-pitch-half-reverse .sq-spot-bottom {
  bottom: 22%;
}

/* Half-reverse: show bottom goal only (visually top due to 180° rotation), hide top */
.sq-pitch-half-reverse .sq-goalframe-top,
.sq-pitch-half-reverse .sq-goalnet-top {
  display: none;
}

.sq-pitch-half-reverse .sq-goalframe-bottom {
  bottom: 0;
  width: 16%;
  height: 3%;
  border-left: 3px solid rgba(255, 255, 255, 0.95);
  border-right: 3px solid rgba(255, 255, 255, 0.95);
  border-bottom: 3px solid rgba(255, 255, 255, 0.95);
  border-top: none;
  box-shadow: 0 -2px 8px rgba(255, 255, 255, 0.15);
}

.sq-pitch-half-reverse .sq-goalnet-bottom {
  bottom: 0.2%;
  width: 15%;
  height: 2.6%;
}

/* Corner arcs — only bottom */
.sq-pitch-half-reverse .sq-pitch-corner.sq-corner-tl,
.sq-pitch-half-reverse .sq-pitch-corner.sq-corner-tr {
  display: none;
}

/* ==========================================
   HORIZONTAL HALF-PITCH THUMBNAIL
   ========================================== */
.sq-saha-thumb-half-landscape {
  aspect-ratio: 3 / 2;
  flex-direction: row;
}

/* Remove left border and align with midfield line */
.sq-saha-thumb-half-landscape .sq-saha-border {
  inset: 3% 3% 3% 10% !important;
  border-left: none !important;
}

/* Hide center dot outside the playing area */
.sq-saha-thumb-half-landscape .sq-saha-center-dot {
  display: none;
}

/* Vertical center line on the left */
.sq-saha-hl-center-line {
  position: absolute;
  top: 3%;
  bottom: 3%;
  left: 10%;
  width: 1.5px;
  background: rgba(255, 255, 255, 0.7);
}

/* Semicircle on left side */
.sq-saha-hl-semicircle {
  position: absolute;
  left: 10%;
  top: 50%;
  width: 16%;
  height: 28%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: 0 50% 50% 0;
  border-left: none;
  transform: translateY(-50%);
}

/* Right penalty area */
.sq-saha-thumb-half-landscape .sq-saha-penalty-r {
  position: absolute;
  right: 3%;
  top: 50%;
  width: 22%;
  height: 54%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-right: none;
  transform: translateY(-50%);
}

/* Right goal area */
.sq-saha-thumb-half-landscape .sq-saha-goal-r {
  position: absolute;
  right: 3%;
  top: 50%;
  width: 8%;
  height: 24%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-right: none;
  transform: translateY(-50%);
}

/* Right penalty arc */
.sq-saha-hl-arc-r {
  position: absolute;
  right: 22%;
  top: 50%;
  width: 10%;
  height: 22%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  transform: translateY(-50%);
  clip-path: inset(0 50% 0 0);
}

/* ==========================================
   HALF-LANDSCAPE MODE (main pitch)
   ========================================== */
.sq-pitch-surface.sq-pitch-half-landscape {
  aspect-ratio: 3 / 4;
  height: auto;
  width: 100%;
  max-height: 100%;
  background:
    linear-gradient(90deg,
      #2d7a2d 0%, #2d7a2d 10%,
      transparent 10%, transparent 97%,
      #2d7a2d 97%, #2d7a2d 100%),
    repeating-linear-gradient(90deg,
      #2d7a2d 10%, #2d7a2d 18.7%,
      #3a9a3a 18.7%, #3a9a3a 27.4%) !important;
}

.sq-pitch-surface.sq-pitch-half-landscape::after {
  left: 10%;
  border-left: none;
}

/* Hide top-side (portrait) elements */
.sq-pitch-half-landscape .sq-pitch-penalty-top,
.sq-pitch-half-landscape .sq-pitch-goal-top,
.sq-pitch-half-landscape .sq-pitch-arc-top,
.sq-pitch-half-landscape .sq-spot-top,
.sq-pitch-half-landscape .sq-goalframe-top,
.sq-pitch-half-landscape .sq-goalnet-top {
  display: none;
}

/* Center line becomes vertical on the left at 10% */
.sq-pitch-half-landscape .sq-pitch-half {
  top: 3%;
  bottom: 3%;
  left: 10%;
  right: auto;
  height: auto;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.85);
}

/* Center circle — semicircle on left */
.sq-pitch-half-landscape .sq-pitch-circle {
  left: 10%;
  top: 50%;
  transform: translate(-50%, -50%);
  clip-path: inset(0 0 0 50%);
  width: 20%;
}

/* Center dot */
.sq-pitch-half-landscape .sq-pitch-center-dot {
  left: 10%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Penalty area on the right — aligned to stripe boundary */
.sq-pitch-half-landscape .sq-pitch-penalty-bottom {
  top: 50%;
  right: 3%;
  left: auto;
  bottom: auto;
  width: 26.1%;
  height: 60%;
  border: 2.5px solid rgba(255, 255, 255, 0.75);
  border-right: none;
  transform: translateY(-50%);
}

/* Goal area on the right — aligned to stripe boundary at 88.3% */
.sq-pitch-half-landscape .sq-pitch-goal-bottom {
  top: 50%;
  right: 3%;
  left: auto;
  bottom: auto;
  width: 8.7%;
  height: 26%;
  border: 2.5px solid rgba(255, 255, 255, 0.75);
  border-right: none;
  transform: translateY(-50%);
}

/* Penalty arc on the right — connected to penalty area */
.sq-pitch-half-landscape .sq-pitch-arc-bottom {
  top: 50%;
  right: 24.1%;
  left: auto;
  bottom: auto;
  width: 10%;
  height: 18%;
  transform: translateY(-50%);
  clip-path: inset(0 50% 0 0);
}

/* Penalty spot */
.sq-pitch-half-landscape .sq-spot-bottom {
  top: 50%;
  right: 15%;
  left: auto;
  bottom: auto;
  transform: translate(50%, -50%);
}

/* Half-landscape: show right-side goal only — OUTSIDE boundary */
.sq-pitch-half-landscape .sq-goalframe-top,
.sq-pitch-half-landscape .sq-goalnet-top {
  display: none;
}

.sq-pitch-half-landscape .sq-goalframe-bottom {
  top: 50%;
  right: 0;
  left: auto;
  bottom: auto;
  width: 3%;
  height: 16%;
  border: none;
  border-right: 3px solid rgba(255, 255, 255, 0.95);
  border-top: 3px solid rgba(255, 255, 255, 0.95);
  border-bottom: 3px solid rgba(255, 255, 255, 0.95);
  transform: translateY(-50%);
  box-shadow: -2px 0 8px rgba(255, 255, 255, 0.15);
}

.sq-pitch-half-landscape .sq-goalnet-bottom {
  top: 50%;
  right: 0.2%;
  left: auto;
  bottom: auto;
  width: 2.6%;
  height: 15%;
  transform: translateY(-50%);
  background: repeating-linear-gradient(0deg,
      rgba(255, 255, 255, 0.18) 0px,
      rgba(255, 255, 255, 0.18) 1px,
      transparent 1px,
      transparent 5px),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.18) 0px,
      rgba(255, 255, 255, 0.18) 1px,
      transparent 1px,
      transparent 5px);
  background-color: rgba(255, 255, 255, 0.04);
  border-radius: 0 3px 3px 0;
}

/* Hide left-side corner arcs */
.sq-pitch-half-landscape .sq-pitch-corner.sq-corner-tl,
.sq-pitch-half-landscape .sq-pitch-corner.sq-corner-bl {
  display: none;
}

/* ==========================================
   REVERSE HALF-LANDSCAPE MODE
   Same as half-landscape but rotated 180°
   ========================================== */
.sq-pitch-surface.sq-pitch-half-landscape-reverse {
  aspect-ratio: 3 / 4;
  height: auto;
  width: 100%;
  max-height: 100%;
  transform: rotate(180deg);
  background:
    linear-gradient(90deg,
      #2d7a2d 0%, #2d7a2d 10%,
      transparent 10%, transparent 97%,
      #2d7a2d 97%, #2d7a2d 100%),
    repeating-linear-gradient(90deg,
      #2d7a2d 10%, #2d7a2d 18.7%,
      #3a9a3a 18.7%, #3a9a3a 27.4%) !important;
}

.sq-pitch-surface.sq-pitch-half-landscape-reverse::after {
  left: 10%;
  border-left: none;
}

.sq-pitch-half-landscape-reverse .sq-pitch-penalty-top,
.sq-pitch-half-landscape-reverse .sq-pitch-goal-top,
.sq-pitch-half-landscape-reverse .sq-pitch-arc-top,
.sq-pitch-half-landscape-reverse .sq-spot-top,
.sq-pitch-half-landscape-reverse .sq-goalframe-top,
.sq-pitch-half-landscape-reverse .sq-goalnet-top {
  display: none;
}

.sq-pitch-half-landscape-reverse .sq-pitch-half {
  top: 3%;
  bottom: 3%;
  left: 10%;
  right: auto;
  height: auto;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.85);
}

.sq-pitch-half-landscape-reverse .sq-pitch-circle {
  left: 10%;
  top: 50%;
  transform: translate(-50%, -50%);
  clip-path: inset(0 0 0 50%);
  width: 20%;
}

.sq-pitch-half-landscape-reverse .sq-pitch-center-dot {
  left: 10%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.sq-pitch-half-landscape-reverse .sq-pitch-penalty-bottom {
  top: 50%;
  right: 3%;
  left: auto;
  bottom: auto;
  width: 26.1%;
  height: 60%;
  border: 2.5px solid rgba(255, 255, 255, 0.75);
  border-right: none;
  transform: translateY(-50%);
}

/* Goal area — aligned to stripe boundary at 88.3% */
.sq-pitch-half-landscape-reverse .sq-pitch-goal-bottom {
  top: 50%;
  right: 3%;
  left: auto;
  bottom: auto;
  width: 8.7%;
  height: 26%;
  border: 2.5px solid rgba(255, 255, 255, 0.75);
  border-right: none;
  transform: translateY(-50%);
}

.sq-pitch-half-landscape-reverse .sq-pitch-arc-bottom {
  top: 50%;
  right: 24.1%;
  left: auto;
  bottom: auto;
  width: 10%;
  height: 18%;
  transform: translateY(-50%);
  clip-path: inset(0 50% 0 0);
}

.sq-pitch-half-landscape-reverse .sq-spot-bottom {
  top: 50%;
  right: 15%;
  left: auto;
  bottom: auto;
  transform: translate(50%, -50%);
}

/* Half-landscape-reverse: show right-side goal (visually left due to 180° rotation) — OUTSIDE boundary */
.sq-pitch-half-landscape-reverse .sq-goalframe-top,
.sq-pitch-half-landscape-reverse .sq-goalnet-top {
  display: none;
}

.sq-pitch-half-landscape-reverse .sq-goalframe-bottom {
  top: 50%;
  right: 0;
  left: auto;
  bottom: auto;
  width: 3%;
  height: 16%;
  border: none;
  border-right: 3px solid rgba(255, 255, 255, 0.95);
  border-top: 3px solid rgba(255, 255, 255, 0.95);
  border-bottom: 3px solid rgba(255, 255, 255, 0.95);
  transform: translateY(-50%);
  box-shadow: -2px 0 8px rgba(255, 255, 255, 0.15);
}

.sq-pitch-half-landscape-reverse .sq-goalnet-bottom {
  top: 50%;
  right: 0.2%;
  left: auto;
  bottom: auto;
  width: 2.6%;
  height: 15%;
  transform: translateY(-50%);
  background: repeating-linear-gradient(0deg,
      rgba(255, 255, 255, 0.18) 0px,
      rgba(255, 255, 255, 0.18) 1px,
      transparent 1px,
      transparent 5px),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.18) 0px,
      rgba(255, 255, 255, 0.18) 1px,
      transparent 1px,
      transparent 5px);
  background-color: rgba(255, 255, 255, 0.04);
  border-radius: 0 3px 3px 0;
}

.sq-pitch-half-landscape-reverse .sq-pitch-corner.sq-corner-tl,
.sq-pitch-half-landscape-reverse .sq-pitch-corner.sq-corner-bl {
  display: none;
}

/* ====== Plain Half Pitch (no lines) ====== */
.sq-pitch-surface.sq-pitch-plain-half {
  aspect-ratio: 1 / 1;
  height: auto;
  width: 100%;
  max-height: 100%;
  transform: rotate(180deg);
  background:
    repeating-linear-gradient(90deg,
      #2d7a2d 0%, #2d7a2d 10%,
      #3a9a3a 10%, #3a9a3a 20%) !important;
}

.sq-pitch-surface.sq-pitch-plain-half::after {
  display: none !important;
}

.sq-pitch-plain-half .sq-pitch-half,
.sq-pitch-plain-half .sq-pitch-circle,
.sq-pitch-plain-half .sq-pitch-center-dot,
.sq-pitch-plain-half .sq-pitch-penalty-top,
.sq-pitch-plain-half .sq-pitch-penalty-bottom,
.sq-pitch-plain-half .sq-pitch-goal-top,
.sq-pitch-plain-half .sq-pitch-goal-bottom,
.sq-pitch-plain-half .sq-pitch-arc-top,
.sq-pitch-plain-half .sq-pitch-arc-bottom,
.sq-pitch-plain-half .sq-spot-top,
.sq-pitch-plain-half .sq-spot-bottom,
.sq-pitch-plain-half .sq-pitch-goalframe,
.sq-pitch-plain-half .sq-pitch-goalnet,
.sq-pitch-plain-half .sq-goalframe-top,
.sq-pitch-plain-half .sq-goalnet-top,
.sq-pitch-plain-half .sq-goalframe-bottom,
.sq-pitch-plain-half .sq-goalnet-bottom,
.sq-pitch-plain-half .sq-pitch-corner {
  display: none !important;
}

/* ==========================================
   COUNTER-ROTATE PLAYER MARKERS ON 180° PITCHES
   These pitch types use transform: rotate(180deg) on the
   container, so child markers need counter-rotation to
   appear right-side up.
   ========================================== */
.sq-pitch-half-reverse .sq-pitch-marker,
.sq-pitch-half-reverse .sq-pitch-ghost,
.sq-pitch-half-landscape-reverse .sq-pitch-marker,
.sq-pitch-half-landscape-reverse .sq-pitch-ghost,
.sq-pitch-plain-half .sq-pitch-marker,
.sq-pitch-plain-half .sq-pitch-ghost {
  transform: translate(-50%, -50%) rotate(180deg);
}

.sq-pitch-half-reverse .sq-pitch-marker.dragging,
.sq-pitch-half-landscape-reverse .sq-pitch-marker.dragging,
.sq-pitch-plain-half .sq-pitch-marker.dragging {
  transform: translate(-50%, -50%) scale(1.15) rotate(180deg);
}

.sq-pitch-half-reverse .sq-pitch-marker:hover,
.sq-pitch-half-landscape-reverse .sq-pitch-marker:hover,
.sq-pitch-plain-half .sq-pitch-marker:hover,
.sq-pitch-surface.sq-pitch-half-reverse.sq-draw-mode.sq-draw-moveplayer .sq-pitch-marker:hover,
.sq-pitch-surface.sq-pitch-half-landscape-reverse.sq-draw-mode.sq-draw-moveplayer .sq-pitch-marker:hover,
.sq-pitch-surface.sq-pitch-plain-half.sq-draw-mode.sq-draw-moveplayer .sq-pitch-marker:hover {
  transform: translate(-50%, -50%) scale(1.12) rotate(180deg);
}

.sq-pitch-surface.sq-pitch-half-reverse.sq-draw-mode.sq-draw-moveplayer .sq-pitch-marker.dragging,
.sq-pitch-surface.sq-pitch-half-landscape-reverse.sq-draw-mode.sq-draw-moveplayer .sq-pitch-marker.dragging,
.sq-pitch-surface.sq-pitch-plain-half.sq-draw-mode.sq-draw-moveplayer .sq-pitch-marker.dragging {
  transform: translate(-50%, -50%) scale(1.18) rotate(180deg);
}

.sq-pitch-half-reverse .sq-pitch-ghost.sq-ghost-hover,
.sq-pitch-half-landscape-reverse .sq-pitch-ghost.sq-ghost-hover,
.sq-pitch-plain-half .sq-pitch-ghost.sq-ghost-hover {
  transform: translate(-50%, -50%) scale(1.15) rotate(180deg);
}

/* Counter-rotate drawing canvas on 180° pitch types */
.sq-pitch-half-reverse .sq-draw-canvas,
.sq-pitch-half-landscape-reverse .sq-draw-canvas,
.sq-pitch-plain-half .sq-draw-canvas {
  transform: rotate(180deg);
}

/* Object Context Menu */
.sq-obj-ctx-menu {
  display: none;
  position: fixed;
  z-index: 10000;
  min-width: 185px;
  background: rgba(16, 20, 28, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 4px 0;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(46, 204, 113, 0.15);
  font-family: 'Inter', sans-serif;
  animation: sq-ctx-pop 0.15s ease-out;
  user-select: none;
}

@keyframes sq-ctx-pop {
  from {
    opacity: 0;
    transform: scale(0.92);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.sq-obj-ctx-header {
  padding: 8px 14px 6px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(46, 204, 113, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.sq-obj-ctx-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  color: #d1d5db;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  text-align: left;
}

.sq-obj-ctx-menu button:hover {
  background: rgba(46, 204, 113, 0.12);
  color: #fff;
}

.sq-obj-ctx-menu button:active {
  background: rgba(46, 204, 113, 0.22);
}

.sq-obj-ctx-menu button span {
  font-size: 14px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.sq-ctx-val {
  margin-left: auto;
  font-size: 11px;
  color: rgba(46, 204, 113, 0.6);
  font-weight: 600;
}

.sq-obj-ctx-row {
  display: flex;
  gap: 2px;
  padding: 0 4px;
}

.sq-ctx-half {
  flex: 1;
  border-radius: 6px !important;
  justify-content: center;
}

.sq-ctx-scale-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 14px 6px;
  border-radius: 2px;
  overflow: hidden;
}

.sq-ctx-scale-fill {
  height: 100%;
  background: linear-gradient(90deg, #2ecc71, #27ae60);
  border-radius: 2px;
  transition: width 0.15s ease;
  width: 25%;
}

.sq-obj-ctx-colors {
  display: flex;
  gap: 6px;
  padding: 8px 14px;
  justify-content: center;
}

.sq-ctx-color-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.sq-ctx-color-dot:hover {
  transform: scale(1.2);
  box-shadow: 0 0 8px currentColor;
}

.sq-ctx-color-dot.active {
  border-color: #fff;
  transform: scale(1.15);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.sq-obj-ctx-danger {
  color: #ef4444 !important;
}

.sq-obj-ctx-danger:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ff6b6b !important;
}

.sq-obj-ctx-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 3px 12px;
}

/* Context Menu — Seç (Multi-Select) Button */
.sq-ctx-select-btn {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), rgba(79, 70, 229, 0.08)) !important;
  border-left: 2px solid #3b82f6 !important;
}

.sq-ctx-select-btn:hover {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.22), rgba(79, 70, 229, 0.15)) !important;
  color: #93c5fd !important;
}

/* ==========================================
   DRAWING — Multi-Select Floating Bar
   ========================================== */
.sq-draw-select-bar {
  display: none;
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 9998;
  opacity: 0;
  transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}

.sq-draw-select-bar.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.sq-draw-select-bar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(16, 20, 28, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 16px;
  padding: 8px 14px;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(59, 130, 246, 0.1),
    0 0 30px rgba(59, 130, 246, 0.08);
  font-family: 'Inter', sans-serif;
  user-select: none;
  animation: sq-ms-bar-glow 3s ease-in-out infinite;
}

@keyframes sq-ms-bar-glow {

  0%,
  100% {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(59, 130, 246, 0.1), 0 0 30px rgba(59, 130, 246, 0.08);
  }

  50% {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(59, 130, 246, 0.2), 0 0 40px rgba(59, 130, 246, 0.12);
  }
}

/* Info section */
.sq-draw-select-info {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.sq-draw-select-check-icon {
  font-size: 16px;
  color: #3b82f6;
}

.sq-draw-select-count {
  font-size: 18px;
  font-weight: 800;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  min-width: 20px;
  text-align: center;
}

.sq-draw-select-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}

/* Actions row */
.sq-draw-select-actions {
  display: flex;
  align-items: center;
  gap: 3px;
}

.sq-draw-select-btn-action {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  color: #d1d5db;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.sq-draw-select-btn-action span {
  font-size: 13px;
}

.sq-draw-select-btn-action:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  color: #fff;
  transform: translateY(-1px);
}

.sq-draw-select-btn-action:active {
  transform: translateY(0);
  background: rgba(59, 130, 246, 0.25);
}

/* Danger delete button */
.sq-draw-select-btn-danger {
  color: #f87171 !important;
  border-color: rgba(248, 113, 113, 0.12) !important;
}

.sq-draw-select-btn-danger:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: #fca5a5 !important;
}

/* Select All button */
.sq-draw-select-btn-all {
  color: #93c5fd !important;
}

.sq-draw-select-btn-all:hover {
  background: rgba(59, 130, 246, 0.15) !important;
}

/* Divider between action groups */
.sq-draw-select-divider {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 4px;
}

/* Close button */
.sq-draw-select-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
  margin-left: 4px;
  font-family: inherit;
}

.sq-draw-select-close:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}

/* Color wrap (relative for popup) */
.sq-draw-select-color-wrap {
  position: relative;
}

/* Color button highlight */
.sq-draw-select-btn-color {
  position: relative;
}

/* Color popup */
.sq-draw-select-color-popup {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) scale(0.92);
  background: rgba(16, 20, 28, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 10px;
  gap: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(59, 130, 246, 0.15);
  opacity: 0;
  transition: all 0.2s cubic-bezier(.4, 0, .2, 1);
  z-index: 10001;
  flex-wrap: wrap;
  width: 140px;
  justify-content: center;
}

.sq-draw-select-color-popup.open {
  display: flex;
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.sq-ms-color {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  border: 2.5px solid transparent;
  transition: all 0.15s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.sq-ms-color:hover {
  transform: scale(1.2);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 12px currentColor;
}

/* ==========================================
   PDF EDITOR MODAL
   ========================================== */
.pde-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(8, 10, 18, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.3s ease, transform 0.3s ease;
  font-family: 'Inter', 'Segoe UI', sans-serif;
}

.pde-modal.active {
  opacity: 1;
  transform: scale(1);
}

.pde-layout {
  display: flex;
  width: 100%;
  height: 100%;
}

/* Preview Pane (left 60%) */
.pde-preview-pane {
  flex: 0 0 60%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(20, 24, 36, 0.5);
}

.pde-preview-header {
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
}

.pde-preview-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.5px;
}

.pde-preview-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  justify-content: center;
  background: rgba(128, 128, 128, 0.08);
}

.pde-preview-paper {
  width: 100%;
  max-width: 700px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  padding: 16px;
  height: fit-content;
}

/* Editor Pane (right 40%) */
.pde-editor-pane {
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
  background: rgba(14, 17, 26, 0.95);
}

.pde-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pde-editor-title {
  font-size: 16px;
  font-weight: 800;
  color: #e8e8e8;
  margin: 0;
}

.pde-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #999;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.pde-close-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}

.pde-editor-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

/* Sections */
.pde-section {
  margin-bottom: 20px;
}

.pde-section-title {
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Fields */
.pde-field {
  margin-bottom: 10px;
}

.pde-field-full {
  width: 100%;
}

.pde-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 0;
}

.pde-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

.pde-input {
  width: 100%;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #e2e2e2;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  outline: none;
  transition: all 0.15s;
  box-sizing: border-box;
}

.pde-input:focus {
  border-color: rgba(74, 44, 138, 0.5);
  background: rgba(74, 44, 138, 0.08);
  box-shadow: 0 0 0 3px rgba(74, 44, 138, 0.1);
}

.pde-input::placeholder {
  color: rgba(255, 255, 255, 0.2);
}

.pde-textarea {
  width: 100%;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #e2e2e2;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  outline: none;
  resize: vertical;
  min-height: 60px;
  transition: all 0.15s;
  box-sizing: border-box;
  line-height: 1.5;
}

.pde-textarea:focus {
  border-color: rgba(74, 44, 138, 0.5);
  background: rgba(74, 44, 138, 0.08);
  box-shadow: 0 0 0 3px rgba(74, 44, 138, 0.1);
}

.pde-textarea::placeholder {
  color: rgba(255, 255, 255, 0.2);
}

/* Drill Accordion Cards */
.pde-drill-card {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.15s;
}

.pde-drill-card:hover {
  border-color: rgba(255, 255, 255, 0.1);
}

.pde-drill-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.pde-drill-card-header:hover {
  background: rgba(255, 255, 255, 0.03);
}

.pde-drill-card-num {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, #1a6b1a, #228b22);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pde-drill-card-title {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: #d0d0d0;
}

.pde-drill-card-chevron {
  color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
  transition: transform 0.2s;
}

.pde-drill-card.collapsed .pde-drill-card-chevron {
  transform: rotate(-90deg);
}

.pde-drill-card-body {
  padding: 8px 14px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  display: block;
}

.pde-drill-card.collapsed .pde-drill-card-body {
  display: none;
}

/* Action Buttons */
.pde-actions {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(14, 17, 26, 0.98);
}

.pde-btn {
  flex: 1;
  padding: 11px 16px;
  border-radius: 10px;
  border: none;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s;
}

.pde-btn-close {
  background: rgba(255, 255, 255, 0.05);
  color: #aaa;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.pde-btn-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ddd;
}

.pde-btn-print {
  background: linear-gradient(135deg, #4a2c8a, #6b3fa0);
  color: #fff;
  box-shadow: 0 4px 16px rgba(74, 44, 138, 0.3);
}

.pde-btn-print:hover {
  background: linear-gradient(135deg, #5a3c9a, #7b4fb0);
  box-shadow: 0 6px 24px rgba(74, 44, 138, 0.4);
  transform: translateY(-1px);
}

.pde-btn-print:active {
  transform: translateY(0);
}

/* Range Slider */
.pde-range {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  margin-top: 4px;
}

.pde-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6b3fa0, #8b5fc0);
  border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.1s;
}

.pde-range::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.pde-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6b3fa0, #8b5fc0);
  border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
}

.pde-range-val {
  float: right;
  font-weight: 800;
  color: #8b5fc0;
  font-size: 10px;
  letter-spacing: 0.5px;
}

/* Hide editor in print */
@media print {
  .pde-modal {
    display: none !important;
  }
}

/* ==========================================
   PRINT CONTAINER — hidden when not printing
   ========================================== */
#print-container {
  display: none;
}

body.print-active #print-container {
  display: block;
}

/* ==========================================
   PROFESSIONAL A4 PRINT LAYOUT
   ========================================== */
@media print {
  @page {
    size: A4 portrait;
    margin: 6mm 8mm;
  }

  /* Hide everything except print container */
  body * {
    visibility: hidden;
  }

  body {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #print-container,
  #print-container * {
    visibility: visible;
  }

  #print-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: block !important;
  }

  .top-navbar,
  .left-sidebar,
  .app-layout,
  .page-container,
  #tactix-toast,
  .sb-context-menu,
  .sb-selection-bar,
  .sq-obj-ctx-menu,
  .sq-draw-select-bar {
    display: none !important;
  }
}

/* ===== PR- PREFIX: Print Layout Component Styles ===== */
.pr-page {
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color: #1a1a2e;
  line-height: 1.35;
  font-size: 12px;
}

/* ===== HEADER ===== */
.pr-header {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #2d1b69 0%, #4a2c8a 40%, #6b3fa0 100%);
  padding: 8px 14px;
  border-radius: 6px;
  margin-bottom: 4px;
  box-shadow: 0 2px 8px rgba(45, 27, 105, 0.3);
}

.pr-club-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.pr-club-logo-placeholder {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.pr-header-text {
  flex: 1;
}

.pr-club-name {
  font-size: 24px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 3px;
  margin: 0;
  line-height: 1.1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.pr-header-subtitle {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 5px;
  margin: 2px 0 0;
  text-indent: 1px;
}

/* ===== PLAYER ROSTER ===== */
.pr-roster {
  border: 1.5px solid #d0d0d0;
  border-radius: 4px;
  margin-bottom: 4px;
  overflow: hidden;
  columns: 4;
  column-gap: 0;
}

.pr-roster-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  font-size: 10px;
  border-bottom: 0.5px solid #e0e0e0;
  break-inside: avoid;
  background: #fafbfc;
}

.pr-roster-row:nth-child(odd) {
  background: #f0f1f4;
}

.pr-roster-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #4a2c8a;
  color: #fff;
  font-weight: 800;
  font-size: 9px;
  flex-shrink: 0;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.pr-roster-name {
  font-weight: 600;
  color: #1a1a2e;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== META ROW (Left: metadata table, Right: schedule) ===== */
.pr-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 4px;
}

.pr-meta-left {
  border: 1.5px solid #4a2c8a;
  border-radius: 4px;
  overflow: hidden;
}

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

.pr-meta-table tr {
  border-bottom: 0.5px solid rgba(74, 44, 138, 0.15);
}

.pr-meta-table tr:last-child {
  border-bottom: none;
}

.pr-meta-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #4a2c8a;
  padding: 3.5px 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: 42%;
  background: rgba(74, 44, 138, 0.06);
  border-right: 0.5px solid rgba(74, 44, 138, 0.15);
}

.pr-meta-value {
  font-size: 11px;
  font-weight: 600;
  color: #1a1a2e;
  padding: 3.5px 8px;
}

.pr-meta-date {
  color: #e53e3e;
  font-weight: 800;
  font-size: 12px;
}

/* ===== TRAINING PLAN SCHEDULE (RIGHT) ===== */
.pr-meta-right {
  border: 1.5px solid #4a2c8a;
  border-radius: 4px;
  overflow: hidden;
}

.pr-schedule-header {
  background: linear-gradient(135deg, #4a2c8a, #6b3fa0);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-align: center;
}

.pr-schedule-list {
  padding: 2px 0;
}

.pr-schedule-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 10px;
  font-size: 10.5px;
  border-bottom: 0.5px solid rgba(74, 44, 138, 0.08);
}

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

.pr-schedule-name {
  font-weight: 600;
  color: #2d3748;
}

.pr-schedule-dur {
  font-weight: 700;
  color: #4a2c8a;
  font-size: 10px;
}

/* ===== DRILL SECTIONS ===== */
.pr-drill-section {
  border: 1.5px solid #c0c0c0;
  border-radius: 5px;
  margin-bottom: 4px;
  overflow: hidden;
  page-break-inside: avoid;
  break-inside: avoid;
}

.pr-drill-header {
  background: linear-gradient(135deg, #1a6b1a, #228b22, #2ea82e);
  color: #fff;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 2px solid #166916;
}

.pr-drill-num {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.pr-drill-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.pr-drill-body {
  display: grid;
  grid-template-columns: 3fr 2fr;
  min-height: 160px;
}

.pr-drill-media {
  border-right: 1px solid #e0e0e0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f4f0;
  min-height: 160px;
}

.pr-drill-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: 220px;
}

.pr-drill-placeholder {
  font-size: 48px;
  opacity: 0.3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 160px;
  background: linear-gradient(135deg, #e8f5e8, #d4edda);
}

.pr-drill-info {
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* ===== INFO TABLE ===== */
.pr-info-table {
  width: 100%;
  border-collapse: collapse;
  border-bottom: 1px solid #d0d0d0;
}

.pr-info-table tr {
  border-bottom: 0.5px solid #e5e5e5;
}

.pr-info-table tr:last-child {
  border-bottom: none;
}

.pr-info-label {
  font-size: 10px;
  font-weight: 800;
  color: #1a1a2e;
  padding: 3px 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  width: 40%;
  background: #f7f8fa;
  border-right: 0.5px solid #e5e5e5;
}

.pr-info-value {
  font-size: 11px;
  font-weight: 600;
  color: #2d3748;
  padding: 3px 10px;
}

/* ===== KEY FACTORS ===== */
.pr-kf-section {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pr-kf-header {
  background: linear-gradient(135deg, #e53e3e, #c53030);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 3px 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-align: center;
}

.pr-kf-body {
  padding: 5px 8px;
  flex: 1;
}

.pr-kf-text {
  font-size: 10px;
  font-weight: 500;
  color: #2d3748;
  margin: 0 0 3px;
  line-height: 1.45;
  white-space: pre-wrap;
}

/* ===== GROUP CARDS (below drill image) ===== */
.pr-grp-section {
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  background: #f8f9fa;
  border-top: 1px solid #e0e0e0;
  flex-wrap: wrap;
}

.pr-grp-card {
  flex: 1;
  min-width: 100px;
  border-radius: 6px;
  overflow: hidden;
  border: 1.5px solid #ccc;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.pr-grp-card-header {
  padding: 3px 8px;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.pr-grp-card-name {
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.pr-grp-card-body {
  padding: 4px 6px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  gap: 3px;
  background: #fff;
  border-top: none;
}

.pr-grp-player {
  font-size: 9.5px;
  font-weight: 600;
  color: #2d3748;
  padding: 2px 6px;
  background: #f0f1f3;
  border-radius: 4px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.2;
}

.pr-grp-joker {
  color: #b45309;
  font-style: italic;
  background: #fef3c7;
  border-left: 2px solid #f59e0b;
}

/* ===== PRINT COLOR PRESERVATION ===== */
@media print {

  .pr-header,
  .pr-drill-header,
  .pr-kf-header,
  .pr-schedule-header,
  .pr-grp-card,
  .pr-grp-card-header,
  .pr-grp-player,
  .pr-roster-row,
  .pr-roster-num,
  .pr-meta-label,
  .pr-info-label,
  .pr-drill-placeholder,
  .pr-drill-media,
  .pr-grp-section {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
  }

  .pr-drill-section {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .pr-page {
    width: 100%;
  }
}

/* ===== SCREEN PREVIEW (when print-active) ===== */
body.print-active .top-navbar,
body.print-active .app-layout,
body.print-active .left-sidebar {
  display: none !important;
}

body.print-active #print-container {
  display: block !important;
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: #fff;
  overflow-y: auto;
  padding: 20px;
}

body.print-active .pr-page {
  max-width: 210mm;
  margin: 0 auto;
}

/* ==============================================
   TP-PDF VIEW — In-page PDF-like Training View
   ============================================== */

/* Toggle Bar */
.tp-view-toggle {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  background: rgba(20, 24, 38, 0.6);
  border-radius: 12px;
  margin-bottom: 12px;
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.06);
  align-items: center;
}

.tp-view-divider {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 6px;
}

.tp-reset-btn {
  padding: 7px 14px;
  border: none;
  border-radius: 8px;
  background: rgba(220, 38, 38, 0.12);
  color: rgba(248, 113, 113, 0.8);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.3px;
}

.tp-reset-btn:hover {
  background: rgba(220, 38, 38, 0.25);
  color: #f87171;
}

/* Takvime Ekle Button */
.tp-cal-add-btn {
  background: rgba(46, 204, 113, 0.12) !important;
  color: rgba(46, 204, 113, 0.9) !important;
  border: 1px solid rgba(46, 204, 113, 0.15) !important;
}

.tp-cal-add-btn:hover {
  background: rgba(46, 204, 113, 0.22) !important;
  color: #2ecc71 !important;
  border-color: rgba(46, 204, 113, 0.3) !important;
}

/* ==========================================
   MINI CALENDAR MODAL — Takvime Ekle
   ========================================== */
.tp-cal-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  z-index: 9998;
  animation: tpCalFadeIn 0.2s ease;
}

.tp-cal-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: 380px;
  max-width: 92vw;
  background: linear-gradient(180deg, rgba(22, 28, 38, 0.98) 0%, rgba(16, 20, 28, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
  animation: tpCalSlideIn 0.25s cubic-bezier(.4, 0, .2, 1);
  font-family: 'Inter', sans-serif;
}

@keyframes tpCalFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes tpCalSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Modal Header */
.tp-cal-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tp-cal-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tp-cal-modal-title-icon {
  font-size: 18px;
}

.tp-cal-modal-close {
  width: 30px;
  height: 30px;
  border: none;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.tp-cal-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

/* Month Navigation */
.tp-cal-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 8px;
}

.tp-cal-month-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}

.tp-cal-nav-btn {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.tp-cal-nav-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Day Headers */
.tp-cal-day-headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 4px 16px 0;
  gap: 2px;
}

.tp-cal-day-header {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 6px 0;
  letter-spacing: 0.5px;
}

/* Day Grid */
.tp-cal-day-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 4px 16px 16px;
  gap: 3px;
}

.tp-cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Inter', sans-serif;
  position: relative;
}

.tp-cal-day:hover {
  background: rgba(46, 204, 113, 0.12);
  color: #2ecc71;
}

.tp-cal-day.today {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  font-weight: 800;
}

.tp-cal-day.today::after {
  content: '';
  position: absolute;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #60a5fa;
}

.tp-cal-day.selected {
  background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(46, 204, 113, 0.35);
}

.tp-cal-day.empty {
  cursor: default;
  pointer-events: none;
}

.tp-cal-day.has-note::before {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f39c12;
}

/* Modal Footer */
.tp-cal-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  gap: 10px;
}

.tp-cal-selected-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.tp-cal-selected-label strong {
  color: #2ecc71;
  font-weight: 700;
}

.tp-cal-confirm-btn {
  padding: 9px 22px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 10px rgba(46, 204, 113, 0.2);
}

.tp-cal-confirm-btn:hover {
  background: linear-gradient(135deg, #36d87e, #2ecc71);
  box-shadow: 0 4px 18px rgba(46, 204, 113, 0.35);
  transform: translateY(-1px);
}

.tp-cal-confirm-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.tp-view-btn {
  padding: 7px 18px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.3px;
}

.tp-view-btn:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
}

.tp-view-btn.active {
  background: linear-gradient(135deg, #4a2c8a, #6b3fa0);
  color: #fff;
  box-shadow: 0 2px 10px rgba(74, 44, 138, 0.3);
}

/* PDF Zoom Dropdown */
.tp-pdf-zoom-select {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e0e0e0;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
}

.tp-pdf-zoom-select:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.tp-pdf-zoom-select option {
  background: #1a1a2e;
  color: #e0e0e0;
}


/* PDF View Container */
.tp-pdf-view {
  background: #e8eaed;
  border-radius: 10px;
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  gap: 0;
  max-width: 100%;
}

/* A4 Paper */
.tp-pdf-paper {
  width: 210mm;
  height: 297mm;
  background: #ffffff;
  margin: 0 auto 24px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.2);
  padding: 2mm 3mm;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color: #1a1a2e;
  line-height: 1.3;
  font-size: 11px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ===== PDF HEADER (matches image) ===== */
.tp-pdf-header {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #2d1b69 0%, #4a2c8a 40%, #6b3fa0 100%);
  padding: 5px 10px;
  border-radius: 5px;
  margin-bottom: 2px;
  box-shadow: 0 2px 8px rgba(45, 27, 105, 0.3);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.tp-pdf-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.tp-pdf-header-logo img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.tp-pdf-header-text h1 {
  font-size: 21px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 3px;
  margin: 0;
  line-height: 1.1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.tp-pdf-header-text h2 {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 4px;
  margin: 1px 0 0;
}

.tp-pdf-header-right {
  color: #fff;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
}

.tp-pdf-header-right .tp-pdf-hinfo {
  display: contents;
}

.tp-pdf-hinfo-lbl {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
  white-space: nowrap;
  justify-self: end;
}

.tp-pdf-hinfo-lbl .tp-pdf-hinfo-icon {
  font-size: 12px;
  opacity: 0.9;
}

.tp-pdf-hinfo-value {
  font-weight: 800;
  font-size: 12.5px;
  text-align: left;
  white-space: nowrap;
}

/* ===== INFO ROW (roster + schedule side by side) ===== */
.tp-pdf-info-row {
  display: flex;
  gap: 4px;
  margin-bottom: 2px;
  align-items: stretch;
}

.tp-pdf-info-row .tp-pdf-roster {
  flex: 3;
  margin-bottom: 0;
}

.tp-pdf-info-row .tp-pdf-meta-right {
  flex: 1;
  min-width: 140px;
}

/* ===== ROSTER GRID ===== */
.tp-pdf-roster {
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  margin-bottom: 2px;
  overflow: hidden;
  columns: 4;
  column-gap: 0;
}

.tp-pdf-roster-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 1.5px 5px;
  font-size: 10px;
  border-bottom: 0.5px solid #e0e0e0;
  break-inside: avoid;
  background: #fafbfc;
}

.tp-pdf-roster-row:nth-child(odd) {
  background: #f0f1f4;
}

.tp-pdf-roster-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #4a2c8a;
  color: #fff;
  font-weight: 800;
  font-size: 9.5px;
  flex-shrink: 0;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.tp-pdf-roster-name {
  font-weight: 600;
  color: #1a1a2e;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== META ROW ===== */
.tp-pdf-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 4px;
}

.tp-pdf-meta-left {
  border: 1.5px solid #4a2c8a;
  border-radius: 4px;
  overflow: hidden;
}

.tp-pdf-meta-left table {
  width: 100%;
  border-collapse: collapse;
}

.tp-pdf-meta-left tr {
  border-bottom: 0.5px solid rgba(74, 44, 138, 0.15);
}

.tp-pdf-meta-left tr:last-child {
  border-bottom: none;
}

.tp-pdf-meta-left .tp-pdf-ml {
  font-size: 11.5px;
  font-weight: 700;
  color: #4a2c8a;
  padding: 3.5px 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: 42%;
  background: rgba(74, 44, 138, 0.06);
  border-right: 0.5px solid rgba(74, 44, 138, 0.15);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.tp-pdf-meta-left .tp-pdf-mv {
  font-size: 12px;
  font-weight: 600;
  color: #1a1a2e;
  padding: 3.5px 8px;
}

.tp-pdf-meta-right {
  border: 1.5px solid #4a2c8a;
  border-radius: 4px;
  overflow: hidden;
}

.tp-pdf-schedule-header {
  background: linear-gradient(135deg, #4a2c8a, #6b3fa0);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-align: center;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.tp-pdf-schedule-list {
  padding: 1px 0;
}

.tp-pdf-schedule-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 8px;
  font-size: 10.5px;
  border-bottom: 0.5px solid rgba(74, 44, 138, 0.08);
}

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

.tp-pdf-schedule-name {
  font-weight: 600;
  color: #2d3748;
}

.tp-pdf-schedule-dur {
  font-weight: 700;
  color: #4a2c8a;
  font-size: 12px;
}

/* ===== DRILL SECTIONS ===== */
.tp-pdf-drills-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 0;
}

.tp-pdf-drill {
  border: 1.5px solid #c0c0c0;
  border-radius: 5px;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tp-pdf-drill-header {
  background: linear-gradient(135deg, #1a6b1a, #228b22, #2ea82e);
  color: #fff;
  padding: 2px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1.5px solid #166916;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.tp-pdf-drill-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tp-pdf-drill-num {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.tp-pdf-drill-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.tp-pdf-drill-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.95;
}

.tp-pdf-drill-header-right span {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* 2-Column drill body */
.tp-pdf-drill-body {
  display: grid;
  grid-template-columns: 3fr 7fr;
  flex: 1;
  min-height: 0;
}

/* Left column - Info */
.tp-pdf-drill-left {
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  font-size: 11px;
  overflow: hidden;
  min-height: 0;
}

.tp-pdf-drill-info-table {
  width: 100%;
  border-collapse: collapse;
  border-bottom: 1px solid #d0d0d0;
}

.tp-pdf-drill-info-table tr {
  border-bottom: 0.5px solid #e5e5e5;
}

.tp-pdf-drill-info-table tr:last-child {
  border-bottom: none;
}

.tp-pdf-drill-info-table .tp-pdf-dil {
  font-size: 11px;
  font-weight: 800;
  color: #1a1a2e;
  padding: 2px 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: 35%;
  background: #f7f8fa;
  border-right: 0.5px solid #e5e5e5;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.tp-pdf-drill-info-table .tp-pdf-dil .tp-pdf-dil-icon {
  margin-right: 3px;
  font-size: 12px;
}

.tp-pdf-drill-info-table .tp-pdf-div {
  font-size: 11.5px;
  font-weight: 600;
  color: #2d3748;
  padding: 2px 6px;
}

/* Açıklama (Key Factors) */
.tp-pdf-kf-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tp-pdf-kf-header {
  background: linear-gradient(135deg, #e53e3e, #c53030);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 6px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-align: center;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.tp-pdf-kf-body {
  padding: 3px 6px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.tp-pdf-kf-body p {
  font-size: 12px;
  font-weight: 700;
  color: #2d3748;
  margin: 0 0 2px;
  line-height: 1.4;
  white-space: pre-wrap;
}

/* Groups inside kf-section — at bottom of AÇIKLAMA */
.tp-pdf-groups-section {
  margin-top: auto;
  flex-shrink: 0;
  border-top: 2px solid #b0b0b0;
  padding: 4px 5px 5px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  background: linear-gradient(180deg, #f0f2f5, #e8eaef);
  align-items: stretch;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.tp-pdf-grp-card {
  flex: 1;
  min-width: 50px;
  border-radius: 5px;
  overflow: visible;
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.tp-pdf-grp-card-header {
  padding: 2px 6px;
  text-align: center;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.tp-pdf-grp-card-name {
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.tp-pdf-grp-card-body {
  padding: 3px 4px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  gap: 2.5px;
  background: #fff;
}

.tp-pdf-grp-player {
  font-size: 9.5px;
  font-weight: 800;
  color: #1a1a2e;
  padding: 0;
  background: none;
  border-radius: 0;
  white-space: normal;
  word-break: break-word;
  line-height: 1.2;
  border: none;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.tp-pdf-grp-joker {
  color: #b45309;
  font-style: italic;
  border-left: 2px solid #f59e0b;
  padding-left: 3px;
  font-size: 9px;
}

.tp-pdf-grp-empty {
  font-size: 10.5px;
  color: #a0a0a0;
  font-style: italic;
  padding: 2.5px 6px;
}

/* Center column - Image */
.tp-pdf-drill-center {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f4f0;
}

.tp-pdf-drill-center img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.tp-pdf-drill-center .tp-pdf-drill-placeholder {
  font-size: 48px;
  opacity: 0.3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e8f5e8, #d4edda);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* Right column - Game Description */
.tp-pdf-drill-right {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.tp-pdf-drill-right-header {
  background: linear-gradient(135deg, #4a2c8a, #6b3fa0);
  color: #fff;
  font-size: 7.5px;
  font-weight: 800;
  padding: 3px 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.tp-pdf-drill-right-body {
  padding: 6px 8px;
  flex: 1;
  font-size: 7.5px;
  font-weight: 500;
  color: #2d3748;
  line-height: 1.5;
}

/* ===== GENERAL NOTES ===== */
.tp-pdf-general-notes {
  border: 1.5px solid #c0c0c0;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 8px;
}

.tp-pdf-general-notes-header {
  background: linear-gradient(135deg, #b45309, #d97706);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  padding: 4px 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.tp-pdf-general-notes-body {
  padding: 6px 12px;
  min-height: 30px;
  font-size: 8px;
  color: #4a5568;
}

/* ============================================================
   SINGLE DRILL PER PAGE LAYOUT
   Image on top (full width), description + groups below
   ============================================================ */

/* Drills wrap in single mode fills all available space */
.tp-pdf-drills-wrap-single {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}

/* Full-page drills wrap (pages without header) */
.tp-pdf-drills-wrap-full {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}

/* Single drill fills the entire wrap */
.tp-pdf-drill-single {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 2px solid #b0b0b0;
  border-radius: 6px;
  overflow: hidden;
}

/* Enlarged header for single mode */
.tp-pdf-drill-single .tp-pdf-drill-header {
  padding: 6px 14px;
}

.tp-pdf-drill-single .tp-pdf-drill-num {
  font-size: 14px;
}

.tp-pdf-drill-single .tp-pdf-drill-title {
  font-size: 14px;
  letter-spacing: 1.5px;
}

.tp-pdf-drill-single .tp-pdf-drill-header-right {
  gap: 16px;
  font-size: 12px;
}

/* ===== Full-width image area ===== */
.tp-pdf-drill-image-full {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f4f0;
  overflow: hidden;
  min-height: 0;
}

.tp-pdf-drill-image-full img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.tp-pdf-drill-image-full .tp-pdf-drill-placeholder {
  font-size: 64px;
  opacity: 0.3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e8f5e8, #d4edda);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* ===== Bottom bar: description + groups side by side ===== */
.tp-pdf-drill-bottom {
  display: flex;
  border-top: 2px solid #b0b0b0;
  background: #fff;
  min-height: 0;
  flex-shrink: 0;
}

/* Description panel */
.tp-pdf-drill-bottom-desc {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #d0d0d0;
  min-width: 0;
}

.tp-pdf-drill-bottom-desc .tp-pdf-kf-header {
  font-size: 11px;
  padding: 4px 10px;
  letter-spacing: 2px;
}

.tp-pdf-drill-bottom-desc .tp-pdf-kf-body {
  padding: 6px 10px;
  flex: 1;
}

.tp-pdf-drill-bottom-desc .tp-pdf-kf-body p {
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 3px;
  font-weight: 700;
  color: #2d3748;
}

/* Groups panel in bottom bar */
.tp-pdf-drill-bottom-groups {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tp-pdf-drill-bottom-groups .tp-pdf-groups-section {
  flex: 1;
  margin-top: 0;
  border-top: none;
  padding: 6px 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  background: linear-gradient(180deg, #f0f2f5, #e8eaef);
  align-items: stretch;
  align-content: flex-start;
}

.tp-pdf-drill-bottom-groups .tp-pdf-grp-card-name {
  font-size: 10.5px;
  letter-spacing: 1.2px;
}

.tp-pdf-drill-bottom-groups .tp-pdf-grp-card-header {
  padding: 3px 8px;
}

.tp-pdf-drill-bottom-groups .tp-pdf-grp-card-body {
  padding: 4px 6px;
  gap: 3px;
}

.tp-pdf-drill-bottom-groups .tp-pdf-grp-player {
  font-size: 10.5px;
}

/* ============================================================
   PDF OUTPUT PAGE — Professional Print Preview + Settings
   ============================================================ */

/* ── Main Layout ── */
#page-pdf-output .pdf-output-page {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  background: #111827;
}

/* ── Left: Preview Canvas ── */
.pout-preview {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(139, 92, 246, 0.04), transparent 500px),
    radial-gradient(ellipse at 70% 80%, rgba(59, 130, 246, 0.03), transparent 500px),
    #d1d5db;
  padding: 28px 20px 48px;
  gap: 28px;
}

.pout-preview::-webkit-scrollbar {
  width: 6px;
}

.pout-preview::-webkit-scrollbar-track {
  background: transparent;
}

.pout-preview::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

.pout-preview::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.pout-preview-canvas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* A4 Paper */
.pout-preview-canvas .tp-pdf-paper {
  width: 210mm;
  height: 297mm;
  background: #ffffff;
  margin: 0 auto;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.1),
    0 16px 48px rgba(0, 0, 0, 0.08);
  padding: 4mm 6mm;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color: #1a1a2e;
  line-height: 1.3;
  font-size: 9px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* ── Right: Settings Panel ── */
.pout-settings {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%);
  border-left: 1px solid rgba(139, 92, 246, 0.12);
  box-shadow: -4px 0 30px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 2;
}

.pout-settings::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.3), rgba(236, 72, 153, 0.2), transparent);
}

.pout-settings-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 20px;
  overflow-y: auto;
  gap: 2px;
}

.pout-settings-inner::-webkit-scrollbar {
  width: 4px;
}

.pout-settings-inner::-webkit-scrollbar-track {
  background: transparent;
}

.pout-settings-inner::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.2);
  border-radius: 2px;
}

/* ── Settings Header ── */
.pout-settings-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}

.pout-settings-header-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(236, 72, 153, 0.08));
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 12px;
  flex-shrink: 0;
}

.pout-settings-title {
  font-size: 20px;
  font-weight: 800;
  margin: 0;
  letter-spacing: 0.5px;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  background: linear-gradient(135deg, #f1f5f9, #c4b5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pout-settings-subtitle {
  font-size: 11px;
  color: #94a3b8;
  margin: 2px 0 0;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  letter-spacing: 0.3px;
}

/* ── Divider ── */
.pout-settings-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.2), transparent);
  margin: 14px 0;
}

/* ── Setting Group ── */
.pout-setting-group {
  margin-bottom: 6px;
}

.pout-setting-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* ── Page Info ── */
.pout-page-info {
  display: flex;
  gap: 8px;
}

.pout-page-info-item {
  flex: 1;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.pout-page-info-key {
  font-size: 10px;
  color: #64748b;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  letter-spacing: 0.3px;
}

.pout-page-info-val {
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(135deg, #a78bfa, #818cf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* ── Select ── */
.pout-select {
  width: 100%;
  padding: 10px 14px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 10px;
  color: #e2e8f0;
  font-size: 13px;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.pout-select:hover {
  border-color: rgba(139, 92, 246, 0.35);
  background-color: rgba(30, 41, 59, 0.8);
}

.pout-select:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.pout-select option {
  background: #1e293b;
  color: #e2e8f0;
}

/* ── Radio Card Group ── */
.pout-radio-group {
  display: flex;
  gap: 8px;
}

.pout-radio-card {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(100, 116, 139, 0.2);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  font-family: 'Inter', 'Segoe UI', sans-serif;
}

.pout-radio-card:hover {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(139, 92, 246, 0.25);
  color: #c4b5fd;
}

.pout-radio-card.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(139, 92, 246, 0.12));
  border-color: rgba(139, 92, 246, 0.5);
  color: #e0e7ff;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.1);
}

.pout-radio-icon {
  font-size: 16px;
}

/* ── Color Picker Row ── */
.pout-color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}

.pout-color-row+.pout-color-row {
  border-top: 1px solid rgba(100, 116, 139, 0.08);
}

.pout-color-text {
  font-size: 13px;
  color: #cbd5e1;
  font-family: 'Inter', 'Segoe UI', sans-serif;
}

.pout-color-pick-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pout-color-input {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 32px;
  border: 2px solid rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  background: none;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pout-color-input::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.pout-color-input::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

.pout-color-input::-moz-color-swatch {
  border: none;
  border-radius: 4px;
}

.pout-color-input:hover {
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.2);
}

.pout-color-input:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.pout-color-hex {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  font-family: 'Inter', monospace;
  letter-spacing: 0.3px;
  min-width: 58px;
  text-align: right;
}

/* ── Toggle Switch ── */
.pout-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}

.pout-toggle-row+.pout-toggle-row {
  border-top: 1px solid rgba(100, 116, 139, 0.08);
}

.pout-toggle-text {
  font-size: 13px;
  color: #cbd5e1;
  font-family: 'Inter', 'Segoe UI', sans-serif;
}

.pout-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  cursor: pointer;
}

.pout-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.pout-toggle-slider {
  position: absolute;
  inset: 0;
  background: rgba(100, 116, 139, 0.3);
  border-radius: 22px;
  transition: all 0.25s ease;
}

.pout-toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  bottom: 3px;
  background: #94a3b8;
  border-radius: 50%;
  transition: all 0.25s ease;
}

.pout-toggle input:checked+.pout-toggle-slider {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.pout-toggle input:checked+.pout-toggle-slider::before {
  transform: translateX(18px);
  background: #fff;
}

/* ── Print Actions ── */
.pout-actions {
  padding-top: 16px;
  border-top: 1px solid rgba(139, 92, 246, 0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pout-btn-print {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.5px;
  box-shadow:
    0 4px 15px rgba(124, 58, 237, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  font-family: 'Inter', 'Segoe UI', sans-serif;
  position: relative;
  overflow: hidden;
}

.pout-btn-print::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transition: left 0.5s ease;
}

.pout-btn-print:hover {
  background: linear-gradient(135deg, #8b5cf6, #c084fc);
  box-shadow: 0 6px 25px rgba(124, 58, 237, 0.55);
  transform: translateY(-2px);
}

.pout-btn-print:hover::before {
  left: 100%;
}

.pout-btn-print:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.3);
}

.pout-btn-print-icon {
  font-size: 18px;
}

/* JSON Save Button */
.pout-btn-save-json {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.3px;
  box-shadow:
    0 4px 15px rgba(37, 99, 235, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  font-family: 'Inter', 'Segoe UI', sans-serif;
  position: relative;
  overflow: hidden;
}

.pout-btn-save-json::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.pout-btn-save-json:hover {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  box-shadow: 0 6px 25px rgba(37, 99, 235, 0.5);
  transform: translateY(-2px);
}

.pout-btn-save-json:hover::before {
  left: 100%;
}

.pout-btn-save-json:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.3);
}

.pout-btn-save-json-icon {
  font-size: 18px;
}

/* Save Button */
.pout-btn-save {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.3px;
  box-shadow:
    0 4px 15px rgba(5, 150, 105, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  font-family: 'Inter', 'Segoe UI', sans-serif;
  position: relative;
  overflow: hidden;
}

.pout-btn-save::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.pout-btn-save:hover {
  background: linear-gradient(135deg, #0d9488, #34d399);
  box-shadow: 0 6px 25px rgba(5, 150, 105, 0.5);
  transform: translateY(-2px);
}

.pout-btn-save:hover::before {
  left: 100%;
}

.pout-btn-save:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(5, 150, 105, 0.3);
}

.pout-btn-save-icon {
  font-size: 18px;
}

/* PDF Save Button */
.pout-btn-save-pdf {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #dc2626, #f97316);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.3px;
  box-shadow:
    0 4px 15px rgba(220, 38, 38, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  font-family: 'Inter', 'Segoe UI', sans-serif;
  position: relative;
  overflow: hidden;
}

.pout-btn-save-pdf::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.pout-btn-save-pdf:hover {
  background: linear-gradient(135deg, #ef4444, #fb923c);
  box-shadow: 0 6px 25px rgba(220, 38, 38, 0.5);
  transform: translateY(-2px);
}

.pout-btn-save-pdf:hover::before {
  left: 100%;
}

.pout-btn-save-pdf:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.3);
}

.pout-btn-save-pdf-icon {
  font-size: 18px;
}

.pout-actions-hint {
  margin: 10px 0 0;
  text-align: center;
  font-size: 11px;
  color: #475569;
  font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* ==========================================
   SQUAD PAGE — Player Context Menu
   ========================================== */
.sq-ctx-menu {
  position: absolute;
  z-index: 1000;
  background: rgba(22, 26, 32, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 4px;
  min-width: 160px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  opacity: 0;
  transform: scale(0.92) translateY(-4px);
  transition: all 0.2s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}

.sq-ctx-menu.active {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.sq-ctx-menu .sq-ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  padding: 8px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}

.sq-ctx-menu .sq-ctx-item:hover {
  background: rgba(37, 99, 235, 0.12);
  color: #93c5fd;
}

.sq-ctx-menu .sq-ctx-icon {
  font-size: 12px;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: rgba(37, 99, 235, 0.15);
  color: #60a5fa;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sq-ctx-menu .sq-ctx-item:hover .sq-ctx-icon {
  background: rgba(37, 99, 235, 0.25);
  color: #93c5fd;
}

.sq-ctx-menu .sq-ctx-injury:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}

.sq-ctx-menu .sq-ctx-injury:hover .sq-ctx-icon {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

/* ==========================================
   INJURED PLAYERS — Nav Badge
   ========================================== */
.injured-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  margin-left: 4px;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
  animation: injBadgePulse 2s ease-in-out infinite;
}

@keyframes injBadgePulse {

  0%,
  100% {
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
  }

  50% {
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.7);
  }
}

/* ==========================================
   INJURED PLAYERS — Context Menu Injury Item
   ========================================== */
.sb-ctx-injury:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #fca5a5 !important;
}

.sb-ctx-injury:hover .sb-ctx-icon {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
}

/* ==========================================
   SIDEBAR — Injury Indicators
   ========================================== */
.sb-injury-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 12px;
  filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.4));
  animation: injBadgeFloat 2s ease-in-out infinite;
}

@keyframes injBadgeFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-1px);
  }
}

.sb-player-item.sb-injured {
  opacity: 0.55;
  border-left-color: rgba(239, 68, 68, 0.4) !important;
}

.sb-player-item.sb-injured:hover {
  opacity: 0.75;
}

.sb-player-item.sb-injured .sb-player-name {
  text-decoration: line-through;
  text-decoration-color: rgba(239, 68, 68, 0.5);
}

/* Squad Page - Injury Badge */
.sq-injury-badge {
  position: absolute;
  top: 4px;
  right: 28px;
  font-size: 12px;
  filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.4));
  z-index: 2;
}

.sq-player-card.sq-injured {
  opacity: 0.5;
  border-left: 3px solid rgba(239, 68, 68, 0.5);
}

.sq-player-card.sq-injured .sq-pc-name {
  text-decoration: line-through;
  text-decoration-color: rgba(239, 68, 68, 0.5);
}

/* ==========================================
   INJURED PLAYERS — Page Layout
   ========================================== */
.injured-page {
  padding: 32px 40px;
  max-width: 1100px;
  margin: 0 auto;
  height: 100%;
  overflow-y: auto;
}

/* -- Header -- */
.inj-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 24px;
}

.inj-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.inj-header-icon {
  font-size: 36px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.inj-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.inj-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

.inj-header-right {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

/* -- Stat Cards -- */
.inj-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.03));
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 14px;
  gap: 2px;
}

.inj-stat-card.inj-stat-available {
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.1), rgba(46, 204, 113, 0.03));
  border-color: rgba(46, 204, 113, 0.2);
}

.inj-stat-number {
  font-size: 26px;
  font-weight: 800;
  color: #ef4444;
  line-height: 1;
}

.inj-stat-available .inj-stat-number {
  color: #2ecc71;
}

.inj-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}

/* -- Info Banner -- */
.inj-info-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.04));
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

.inj-info-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.inj-info-text {
  font-size: 12px;
  color: var(--text-secondary);
  flex: 1;
  line-height: 1.5;
}

.inj-info-text strong {
  color: #60a5fa;
  font-weight: 700;
}

.inj-info-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.2s;
  line-height: 1;
  flex-shrink: 0;
}

.inj-info-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

/* -- Content Area -- */
.inj-content {
  min-height: 300px;
}

/* -- Empty State -- */
.inj-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 32px;
  text-align: center;
}

.inj-empty-icon {
  font-size: 56px;
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
  animation: injEmptyFloat 3s ease-in-out infinite;
}

@keyframes injEmptyFloat {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-6px) scale(1.05);
  }
}

.inj-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.inj-empty-desc {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 320px;
}

/* -- Injured Player List -- */
.inj-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* -- Injured Player Card (New Layout) -- */
.inj-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(239, 68, 68, 0.12);
  border-radius: 14px;
  transition: all 0.25s ease;
  animation: injCardIn 0.4s ease-out both;
  overflow: hidden;
}

@keyframes injCardIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.inj-card:hover {
  background: rgba(239, 68, 68, 0.03);
  border-color: rgba(239, 68, 68, 0.22);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

/* Top Row — Player Info + Status + Actions */
.inj-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(239, 68, 68, 0.03);
  border-bottom: 1px solid rgba(239, 68, 68, 0.08);
  gap: 16px;
}

.inj-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.inj-card-number {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.inj-card-number::after {
  content: '🏥';
  position: absolute;
  bottom: -4px;
  right: -4px;
  font-size: 12px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.inj-card-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.inj-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inj-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.inj-card-pos {
  font-weight: 600;
}

.inj-card-divider {
  color: var(--text-muted);
  font-size: 8px;
}

.inj-card-days {
  color: var(--text-muted);
  font-weight: 500;
}

/* Inline status elements — visible without expanding */
.inj-card-reason-inline {
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.inj-card-training-inline {
  font-weight: 600;
  white-space: nowrap;
}

.inj-card-meta-secondary {
  margin-top: 2px;
}

.inj-card-return-inline {
  font-weight: 600;
}

.inj-card-return-inline .inj-return-overdue {
  color: #ef4444;
}

.inj-card-return-inline .inj-return-today {
  color: #10b981;
}

.inj-card-return-inline .inj-return-soon {
  color: #f59e0b;
}

.inj-card-return-inline .inj-return-near {
  color: #3b82f6;
}

.inj-card-return-inline .inj-return-far {
  color: var(--text-muted);
}

.inj-card-return-inline .inj-return-unset {
  color: var(--text-muted);
  font-style: italic;
}

/* Card Right - Status + Remove */
.inj-card-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.inj-card-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.inj-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
  animation: injStatusPulse 1.5s ease-in-out infinite;
}

@keyframes injStatusPulse {

  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
  }

  50% {
    opacity: 0.6;
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.3);
  }
}

.inj-status-text {
  font-size: 11px;
  font-weight: 700;
  color: #ef4444;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.inj-card-remove {
  display: flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.12), rgba(46, 204, 113, 0.06));
  border: 1px solid rgba(46, 204, 113, 0.25);
  color: #2ecc71;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.inj-card-remove:hover {
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.25), rgba(46, 204, 113, 0.15));
  border-color: rgba(46, 204, 113, 0.5);
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.2);
  transform: translateY(-1px);
}

.inj-card-remove:active {
  transform: translateY(0);
}

/* Clickable Toggle Area */
.inj-card-toggle {
  cursor: pointer;
  border-radius: 10px;
  padding: 4px;
  margin: -4px;
  transition: background 0.15s;
}

.inj-card-toggle:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Chevron Indicator */
.inj-chevron {
  display: inline-block;
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 4px;
  transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
  vertical-align: middle;
}

.inj-expanded .inj-chevron {
  transform: rotate(180deg);
  color: var(--text-secondary);
}

/* Summary Tags (visible when collapsed) */
.inj-card-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 20px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.3s ease;
}

.inj-expanded .inj-card-summary {
  display: none;
}

.inj-summary-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}

/* Detail Rows Area (collapsed by default) */
.inj-card-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(.4, 0, .2, 1);
}

.inj-expanded .inj-card-details {
  max-height: 500px;
}

.inj-card-details-inner {
  padding: 14px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.inj-detail-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.inj-detail-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.inj-field-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}

/* Reason Select */
.inj-reason-select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--text-primary);
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
}

.inj-reason-select:hover {
  border-color: rgba(239, 68, 68, 0.3);
}

.inj-reason-select:focus {
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
}

.inj-reason-select option {
  background: #1a1d21;
  color: var(--text-primary);
}

/* Date Inputs */
.inj-date-input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--text-secondary);
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  outline: none;
  cursor: pointer;
  transition: all 0.2s;
  color-scheme: dark;
  width: 100%;
}

.inj-date-input:focus {
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.08);
}

/* Note Input */
.inj-note-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--text-secondary);
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: all 0.2s;
}

.inj-note-input::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.inj-note-input:focus {
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

/* ==========================================
   INJURED PLAYERS — Return Countdown
   ========================================== */
.inj-return-row {
  background: rgba(255, 255, 255, 0.015);
  margin: 0 -20px;
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.inj-return-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inj-return-countdown {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.inj-return-unset {
  color: var(--text-muted);
  font-style: italic;
  font-weight: 500;
}

.inj-return-overdue {
  color: #ef4444;
  animation: injReturnPulse 1.5s ease-in-out infinite;
}

@keyframes injReturnPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

.inj-return-today {
  color: #10b981;
  font-weight: 800;
}

.inj-return-soon {
  color: #f59e0b;
  font-weight: 700;
}

.inj-return-near {
  color: #3b82f6;
}

.inj-return-far {
  color: var(--text-secondary);
}

/* Progress Bar */
.inj-progress-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inj-progress-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.inj-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
  position: relative;
}

.inj-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: injProgressShine 2s ease-in-out infinite;
}

@keyframes injProgressShine {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.inj-progress-pct {
  font-size: 10px;
  font-weight: 800;
  min-width: 30px;
  text-align: right;
}

/* ==========================================
   INJURED PLAYERS — Training Status Pills
   ========================================== */
.inj-training-field {
  flex: 1 1 100% !important;
}

.inj-training-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.inj-training-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 12px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.inj-training-pill:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-secondary);
  transform: translateY(-1px);
}

.inj-training-pill.active {
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.inj-pill-icon {
  font-size: 13px;
}

.inj-pill-label {
  font-size: 11px;
}

/* ==========================================
   INJURED PLAYERS — Responsive
   ========================================== */
@media (max-width: 900px) {
  .injured-page {
    padding: 20px 16px;
  }

  .inj-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .inj-card-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .inj-card-right {
    width: 100%;
    justify-content: space-between;
  }

  .inj-detail-row {
    flex-direction: column;
    gap: 10px;
  }

  .inj-return-row {
    margin: 0 -16px;
    padding: 12px 16px;
  }

  .inj-training-pills {
    gap: 4px;
  }

  .inj-training-pill {
    padding: 5px 8px;
    font-size: 10px;
  }

  .inj-pill-label {
    display: none;
  }
}


/* ==========================================
   AUTH — LOGIN OVERLAY
   ========================================== */
.auth-login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  background: linear-gradient(135deg, #0d1117 0%, #161b22 40%, #0d1117 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: authFadeIn 0.5s ease;
}

.auth-login-overlay.auth-fade-out {
  animation: authFadeOut 0.4s ease forwards;
}

@keyframes authFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes authFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

body.auth-locked {
  overflow: hidden;
}

.auth-login-container {
  text-align: center;
  max-width: 1060px;
  width: 100%;
  padding: 0 24px;
  animation: authSlideUp 0.6s cubic-bezier(.4, 0, .2, 1);
}

@keyframes authSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-login-header {
  margin-bottom: 40px;
}

.auth-login-logo {
  font-size: 52px;
  margin-bottom: 12px;
  animation: authLogoPulse 3s infinite ease-in-out;
}

@keyframes authLogoPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

.auth-login-title {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: 3px;
  background: linear-gradient(135deg, #2ecc71, #3498db);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}

.auth-login-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* -- Role Cards -- */
.auth-role-cards {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.auth-role-card {
  position: relative;
  background: rgba(30, 34, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 28px 20px 24px;
  width: 225px;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  text-align: center;
  backdrop-filter: blur(20px);
}

.auth-role-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.auth-role-card:hover .auth-role-glow {
  opacity: 1;
}

.auth-role-card:active {
  transform: translateY(-2px) scale(0.99);
}

.auth-role-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.auth-glow-teknik {
  background: linear-gradient(90deg, #3b82f6, #6366f1, #3b82f6);
}

.auth-glow-antrenor {
  background: linear-gradient(90deg, #3b82f6, #60a5fa, #3b82f6);
}

.auth-glow-atakim {
  background: linear-gradient(90deg, #ef4444, #f87171, #ef4444);
}

.auth-glow-koordinator {
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
}

.auth-glow-saglik {
  background: linear-gradient(90deg, #10b981, #34d399, #10b981);
}

.auth-role-icon {
  font-size: 44px;
  margin-bottom: 14px;
}

.auth-role-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.auth-role-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.auth-role-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 16px;
}

.auth-role-features span {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.auth-role-arrow {
  font-size: 20px;
  color: var(--text-muted);
  transition: transform 0.3s, color 0.3s;
}

.auth-role-card:hover .auth-role-arrow {
  transform: translateX(6px);
  color: var(--text-primary);
}

.auth-role-card:hover .auth-glow-teknik {
  opacity: 1;
}

.auth-role-card:hover .auth-glow-antrenor {
  opacity: 1;
}

.auth-role-card:hover .auth-glow-atakim {
  opacity: 1;
}

.auth-role-card:hover .auth-glow-koordinator {
  opacity: 1;
}

.auth-role-card-saglik:hover {
  border-color: rgba(16, 185, 129, 0.3);
}

.auth-role-card-antrenor:hover {
  border-color: rgba(59, 130, 246, 0.3);
}

.auth-role-card-atakim:hover {
  border-color: rgba(239, 68, 68, 0.3);
}

.auth-role-card-koordinator:hover {
  border-color: rgba(245, 158, 11, 0.3);
}

.auth-login-footer {
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.6;
}

.auth-login-footer span {
  letter-spacing: 0.5px;
}

/* ==========================================
   AUTH — EMAIL/PASSWORD FORM
   ========================================== */
.auth-step {
  animation: authSlideUp 0.5s cubic-bezier(.4, 0, .2, 1);
}

/* -- Auth Tabs (Login / Register) -- */
.auth-tabs {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 28px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.auth-tab {
  flex: 1;
  padding: 11px 16px;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
  letter-spacing: 0.2px;
}

.auth-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.auth-tab.active {
  background: rgba(46, 204, 113, 0.15);
  color: #2ecc71;
  box-shadow: 0 2px 12px rgba(46, 204, 113, 0.15);
}

.auth-tab-content {
  animation: authSlideUp 0.35s cubic-bezier(.4, 0, .2, 1);
}

/* -- Setup Sections -- */
.auth-setup-section {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.auth-setup-section:last-of-type {
  border-bottom: none;
  margin-bottom: 8px;
  padding-bottom: 0;
}

.auth-setup-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-setup-label span {
  font-size: 18px;
}

/* -- Back Link Button -- */
.auth-back-link {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 10px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 10px;
  text-align: center;
}

.auth-back-link:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

/* -- Profile Card TD hover -- */
.auth-role-card-td:hover {
  border-color: rgba(239, 68, 68, 0.3);
}

.auth-email-form {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

.auth-form-card {
  background: rgba(30, 34, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 40px 36px 36px;
  max-width: 420px;
  width: 100%;
  backdrop-filter: blur(24px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  position: relative;
  overflow: hidden;
}

.auth-form-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #2ecc71, #3498db, #9b59b6, #2ecc71);
  background-size: 300% 100%;
  animation: authGradientShift 4s linear infinite;
}

@keyframes authGradientShift {
  0% {
    background-position: 0% 0;
  }

  100% {
    background-position: 300% 0;
  }
}

.auth-form-card.shake {
  animation: authShake 0.5s ease;
}

.auth-form-icon {
  font-size: 44px;
  margin-bottom: 8px;
}

.auth-form-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.auth-form-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 28px;
  font-weight: 500;
}

.auth-input-group {
  margin-bottom: 18px;
  text-align: left;
}

.auth-input-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.auth-input-wrap {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 0 14px;
  transition: all 0.3s ease;
  position: relative;
}

.auth-input-wrap:focus-within {
  border-color: rgba(46, 204, 113, 0.5);
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.1), 0 4px 16px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.auth-input-icon {
  font-size: 16px;
  margin-right: 10px;
  flex-shrink: 0;
  opacity: 0.7;
}

.auth-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  padding: 14px 0;
  width: 100%;
}

.auth-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
  font-weight: 400;
}

.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px rgba(30, 34, 42, 1) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  font-family: 'Inter', sans-serif !important;
}

.auth-toggle-pw {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 4px 2px;
  opacity: 0.5;
  transition: opacity 0.2s, transform 0.2s;
  flex-shrink: 0;
}

.auth-toggle-pw:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* -- Remember Me Checkbox -- */
.auth-remember-row {
  display: flex;
  align-items: center;
  margin-top: 4px;
  margin-bottom: 16px;
}

.auth-remember-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.auth-remember-checkbox {
  display: none;
}

.auth-remember-check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(.4, 0, .2, 1);
  flex-shrink: 0;
  position: relative;
}

.auth-remember-check::after {
  content: '';
  width: 10px;
  height: 6px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) scale(0);
  transition: transform 0.2s cubic-bezier(.4, 0, .2, 1);
  position: absolute;
  top: 4px;
  left: 3px;
}

.auth-remember-checkbox:checked+.auth-remember-check {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  border-color: #2ecc71;
  box-shadow: 0 0 12px rgba(46, 204, 113, 0.3);
}

.auth-remember-checkbox:checked+.auth-remember-check::after {
  transform: rotate(-45deg) scale(1);
}

.auth-remember-label:hover .auth-remember-check {
  border-color: rgba(46, 204, 113, 0.5);
  background: rgba(46, 204, 113, 0.08);
}

.auth-remember-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.2px;
  transition: color 0.2s;
}

.auth-remember-label:hover .auth-remember-text {
  color: var(--text-secondary);
}

/* -- Error Message -- */
.auth-form-error {
  font-size: 13px;
  color: #ef4444;
  min-height: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  text-align: center;
  font-weight: 600;
  padding: 0;
  border-radius: 10px;
}

.auth-form-error.visible {
  min-height: auto;
  max-height: 60px;
  opacity: 1;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* -- Submit Button -- */
.auth-submit-btn {
  width: 100%;
  padding: 15px 24px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
  margin-top: 6px;
}

.auth-submit-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transition: left 0.5s ease;
}

.auth-submit-btn:hover::before {
  left: 100%;
}

.auth-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(46, 204, 113, 0.35);
}

.auth-submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(46, 204, 113, 0.25);
}

.auth-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.auth-submit-spinner {
  display: inline-block;
  animation: authSpinRotate 1s linear infinite;
  font-size: 18px;
}

@keyframes authSpinRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ==========================================
   AUTH — PIN MODAL
   ========================================== */
.auth-pin-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10001;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: authFadeIn 0.3s ease;
}

.auth-pin-modal.auth-fade-out {
  animation: authFadeOut 0.3s ease forwards;
}

.auth-pin-card {
  background: rgba(22, 26, 34, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 36px 40px 32px;
  text-align: center;
  max-width: 340px;
  width: 100%;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  animation: authSlideUp 0.35s cubic-bezier(.4, 0, .2, 1);
  position: relative;
}

.auth-pin-card.shake {
  animation: authShake 0.5s ease;
}

@keyframes authShake {

  0%,
  100% {
    transform: translateX(0);
  }

  15% {
    transform: translateX(-8px);
  }

  30% {
    transform: translateX(8px);
  }

  45% {
    transform: translateX(-6px);
  }

  60% {
    transform: translateX(6px);
  }

  75% {
    transform: translateX(-3px);
  }

  90% {
    transform: translateX(3px);
  }
}

.auth-pin-back {
  position: absolute;
  top: 16px;
  left: 16px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.2s;
}

.auth-pin-back:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.auth-pin-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

.auth-pin-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.auth-pin-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* -- PIN Dots -- */
.auth-pin-dots {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 8px;
}

.auth-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  transition: all 0.2s cubic-bezier(.4, 0, .2, 1);
}

.auth-dot.filled {
  background: var(--green-accent);
  border-color: var(--green-accent);
  box-shadow: 0 0 10px rgba(46, 204, 113, 0.4);
  transform: scale(1.1);
}

/* -- PIN Error -- */
.auth-pin-error {
  font-size: 12px;
  color: #ef4444;
  height: 24px;
  line-height: 24px;
  margin-bottom: 6px;
  opacity: 0;
  transition: opacity 0.3s;
}

.auth-pin-error.visible {
  opacity: 1;
}

/* -- PIN Keypad -- */
.auth-pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 240px;
  margin: 0 auto;
}

.auth-key {
  width: 64px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.auth-key:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.auth-key:active {
  transform: scale(0.95);
  background: rgba(46, 204, 113, 0.15);
  border-color: rgba(46, 204, 113, 0.3);
}

.auth-key-empty {
  visibility: hidden;
}

.auth-key-delete {
  font-size: 18px;
  color: var(--text-muted);
}

.auth-key-delete:hover {
  color: #ef4444;
}

/* ==========================================
   AUTH — LOCKED TAB STYLES
   ========================================== */
.auth-locked-tab {
  opacity: 0.35 !important;
  pointer-events: none;
  position: relative;
  cursor: not-allowed !important;
}

.auth-locked-tab::after {
  content: '🔒';
  font-size: 9px;
  margin-left: 4px;
}

.auth-lock-shake {
  animation: authShake 0.5s ease;
  pointer-events: auto !important;
  opacity: 0.6 !important;
}

/* ==========================================
   AUTH — USER INFO & LOGOUT
   ========================================== */
.auth-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-user-role {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--role-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--role-color) 30%, transparent);
}

.auth-user-role-icon {
  font-size: 14px;
}

.auth-user-role-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.3px;
}

.auth-logout-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #f87171;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}

.auth-logout-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.auth-logout-btn span {
  font-size: 13px;
}

/* ==========================================
   AUTH — TOAST
   ========================================== */
.auth-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(16, 20, 28, 0.96);
  color: #f87171;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  border: 1px solid rgba(239, 68, 68, 0.3);
  backdrop-filter: blur(16px);
  z-index: 9999;
  opacity: 0;
  transition: all 0.3s ease;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.auth-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ==========================================
   TAKIP MODU (READ-ONLY) BANNER
   ========================================== */
.takip-mode-banner {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 20px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.06));
  border-bottom: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.3px;
  z-index: 90;
  animation: takipBannerIn 0.3s ease;
}

.takip-mode-banner .takip-icon {
  font-size: 14px;
}

@keyframes takipBannerIn {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================
   READ-ONLY MODE — Disable editing
   ========================================== */

/* Show the takip banner */
body.read-only-mode .takip-mode-banner {
  display: flex;
}

/* --- Disable contenteditable fields --- */
body.read-only-mode [contenteditable="true"] {
  pointer-events: none !important;
  cursor: default !important;
  opacity: 0.7;
}

/* --- Hide drill editing controls --- */
body.read-only-mode .drill-card-actions,
body.read-only-mode .drill-add-card,
body.read-only-mode .section-add-btn,
body.read-only-mode .drill-delete-btn,
body.read-only-mode .section-options-btn {
  display: none !important;
}

/* --- Hide group management buttons --- */
body.read-only-mode .groups-actions,
body.read-only-mode .group-add-card,
body.read-only-mode .group-header-actions,
body.read-only-mode .player-remove-btn {
  display: none !important;
}

/* --- Disable drag-and-drop zones --- */
body.read-only-mode .drop-zone,
body.read-only-mode .player-drop-target {
  pointer-events: none !important;
}

/* --- Disable player sidebar drag --- */
body.read-only-mode .left-sidebar .player-card {
  cursor: default !important;
  -webkit-user-drag: none !important;
}

body.read-only-mode .left-sidebar .player-card:active {
  transform: none !important;
}

/* --- Disable drawing tools --- */
body.read-only-mode .drawing-toolbar,
body.read-only-mode .drawing-tools-panel {
  pointer-events: none !important;
  opacity: 0.5;
}

/* --- Disable calendar editing --- */
body.read-only-mode .cal-day-content {
  pointer-events: none !important;
}

/* --- Disable library editing --- */
body.read-only-mode .lib-drill-delete,
body.read-only-mode .lib-add-drill-btn,
body.read-only-mode .lib-import-btn {
  display: none !important;
}

/* --- Disable squad editing --- */
body.read-only-mode .squad-edit-btn,
body.read-only-mode .squad-save-btn,
body.read-only-mode .squad-add-player {
  display: none !important;
}

/* --- Disable injured page editing in read-only --- */
body.read-only-mode .inj-add-btn,
body.read-only-mode .inj-player-delete,
body.read-only-mode .inj-edit-btn {
  display: none !important;
}

/* --- Optional: subtle overlay on main workspace --- */
body.read-only-mode .main-workspace::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.02);
  pointer-events: none;
  z-index: 1;
}

/* ==========================================
   SAGLIK MODE — Hide non-essential UI
   ========================================== */
body.saglik-mode .left-sidebar {
  display: none !important;
}

body.saglik-mode .nav-coach-name,
body.saglik-mode .nav-separator {
  display: none !important;
}

/* In saglik mode, hide PDF option in settings dropdown but keep logout */
body.saglik-mode #settings-pdf-btn {
  display: none !important;
}

body.saglik-mode .settings-dropdown-divider {
  display: none !important;
}

/* ==========================================
   HEALTH TEAM BANNER
   ========================================== */
.inj-health-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.04) 100%);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 14px;
  margin-bottom: 20px;
  animation: injBannerIn 0.5s ease;
}

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.inj-health-banner-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.inj-health-banner-content {
  flex: 1;
}

.inj-health-banner-title {
  font-size: 16px;
  font-weight: 700;
  color: #34d399;
  margin-bottom: 2px;
}

.inj-health-banner-desc {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.inj-health-banner-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  flex-shrink: 0;
}

.inj-save-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  animation: injSaveDotPulse 2s infinite;
}

.inj-save-dot.saved {
  background: #10b981;
  animation: none;
}

@keyframes injSaveDotPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.inj-save-text {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

/* ==========================================
   INJURED PAGE — HEADER ACTIONS (Add + Save)
   ========================================== */
.inj-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}

.inj-header {
  flex-wrap: wrap;
}

.inj-add-player-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
  border: 1px solid rgba(59, 130, 246, 0.35);
  border-radius: 10px;
  color: #60a5fa;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.inj-add-player-btn:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.15));
  border-color: rgba(59, 130, 246, 0.5);
  color: #93bbfc;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
  transform: translateY(-1px);
}

.inj-add-player-btn:active {
  transform: translateY(0);
}

.inj-save-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.12));
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: 10px;
  color: #34d399;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.inj-save-btn:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.35), rgba(16, 185, 129, 0.2));
  border-color: rgba(16, 185, 129, 0.6);
  color: #6ee7b7;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25);
  transform: translateY(-1px);
}

.inj-save-btn:active {
  transform: translateY(0);
}

.inj-save-btn.saving {
  animation: injSavePulse 0.6s ease;
}

@keyframes injSavePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* ==========================================
   INJURED PAGE — ADD PLAYER DROPDOWN
   ========================================== */
.inj-add-dropdown {
  position: relative;
  background: rgba(22, 26, 34, 0.97);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  animation: injDropdownIn 0.3s ease;
}

@keyframes injDropdownIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.inj-add-dropdown-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.inj-add-search {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.2s;
}

.inj-add-search:focus {
  border-color: rgba(59, 130, 246, 0.4);
}

.inj-add-search::placeholder {
  color: var(--text-muted);
}

.inj-add-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s;
}

.inj-add-close:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.inj-add-list {
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
}

.inj-add-list::-webkit-scrollbar {
  width: 4px;
}

.inj-add-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.inj-add-player-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}

.inj-add-player-item:hover {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.15);
}

.inj-add-player-num {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.inj-add-player-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.inj-add-player-pos {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.inj-add-player-item.already-injured {
  opacity: 0.35;
  pointer-events: none;
}

.inj-add-player-item.already-injured::after {
  content: '🏥 Zaten listede';
  font-size: 10px;
  color: var(--text-muted);
  margin-left: auto;
}

/* ==========================================
   INJURED PAGE — EMPTY STATE (no players added message)
   ========================================== */
.inj-add-empty {
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
  font-size: 13px;
}

.inj-add-empty-icon {
  font-size: 28px;
  margin-bottom: 8px;
  opacity: 0.5;
}

.dl-sb-folder-item[draggable='true'] {
  cursor: grab;
}

.dl-sb-folder-item:active {
  cursor: grabbing;
}

/* Premium Drag & Drop Indicators (Notion/Trello Style) */
.dl-sb-folder-item.dl-is-dragging {
  opacity: 0.4;
  transform: scale(0.98);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
  background: var(--bg-hover);
}

.dl-sb-folder-item.dl-drag-top::before,
.dl-sb-folder-item.dl-drag-bottom::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--green-accent, #5ebd5e);
  z-index: 20;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(94, 189, 94, 0.5);
  border-radius: 2px;
}

.dl-sb-folder-item.dl-drag-top::after,
.dl-sb-folder-item.dl-drag-bottom::after {
  content: '';
  position: absolute;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--green-accent, #5ebd5e);
  background: #141a22;
  /* match dark background */
  z-index: 21;
  pointer-events: none;
  box-shadow: 0 0 6px rgba(94, 189, 94, 0.4);
}

.dl-sb-folder-item.dl-drag-top::before {
  top: -1px;
}

.dl-sb-folder-item.dl-drag-top::after {
  top: -4px;
}

.dl-sb-folder-item.dl-drag-bottom::before {
  bottom: -1px;
}

.dl-sb-folder-item.dl-drag-bottom::after {
  bottom: -4px;
}

/* ==========================================
   AI GROUP BUTTON
   ========================================== */
.btn-ai-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(168, 85, 247, 0.12));
  border: 1px solid rgba(139, 92, 246, 0.35);
  color: #c4b5fd;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
  letter-spacing: 0.2px;
  position: relative;
  overflow: hidden;
}

.btn-ai-group::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.1));
  opacity: 0;
  transition: opacity 0.3s;
}

.btn-ai-group:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.28), rgba(168, 85, 247, 0.2));
  border-color: rgba(139, 92, 246, 0.6);
  color: #ddd6fe;
  box-shadow: 0 2px 16px rgba(139, 92, 246, 0.25), 0 0 0 1px rgba(139, 92, 246, 0.1);
  transform: translateY(-1px);
}

.btn-ai-group:hover::before {
  opacity: 1;
}

.btn-ai-group:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 1px 6px rgba(139, 92, 246, 0.15);
}

.btn-ai-group:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-ai-group.ai-loading {
  pointer-events: none;
  opacity: 0.8;
}

.btn-ai-group.ai-loading .ai-btn-text {
  opacity: 0;
}

.btn-ai-group.ai-loading .ai-btn-spinner {
  display: block !important;
}

.ai-btn-icon {
  font-size: 14px;
  position: relative;
  z-index: 1;
  transition: transform 0.3s;
}

.btn-ai-group:hover .ai-btn-icon {
  transform: scale(1.12);
}

.ai-btn-text {
  position: relative;
  z-index: 1;
  transition: opacity 0.2s;
}

.ai-btn-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(139, 92, 246, 0.3);
  border-top-color: #c4b5fd;
  border-radius: 50%;
  animation: aiSpin 0.7s linear infinite;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -7px;
  margin-top: -7px;
  z-index: 2;
}

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

/* ==========================================
   AI GROUP RESULT MODAL
   ========================================== */
.ai-group-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: aiOverlayIn 0.25s ease;
}

@keyframes aiOverlayIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.ai-group-modal {
  width: 90%;
  max-width: 720px;
  max-height: 85vh;
  background: rgba(26, 30, 36, 0.98);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 18px;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 60px rgba(139, 92, 246, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: aiModalIn 0.3s cubic-bezier(.4, 0, .2, 1);
}

@keyframes aiModalIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.ai-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.08) 0%, transparent 100%);
}

.ai-modal-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-modal-icon {
  font-size: 22px;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.12));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.ai-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.2px;
}

.ai-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.ai-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.ai-modal-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  padding: 10px 22px 6px;
  line-height: 1.5;
}

.ai-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 22px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.ai-modal-body::-webkit-scrollbar {
  width: 5px;
}

.ai-modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

/* AI Color Group Card */
.ai-color-group {
  flex: 1;
  min-width: 200px;
  max-width: 320px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 0.2s;
}

.ai-color-group:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.ai-color-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ai-color-swatch {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.ai-color-group-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}

.ai-color-group-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: 8px;
}

.ai-color-group-players {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-player-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.15s;
}

.ai-player-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.ai-player-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ai-player-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
}

.ai-player-match {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.ai-player-match.match-exact {
  background: rgba(46, 204, 113, 0.12);
  color: #4ade80;
}

.ai-player-match.match-fuzzy {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
}

.ai-player-match.match-none {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

.ai-player-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.15s;
  flex-shrink: 0;
}

.ai-player-row:hover .ai-player-remove {
  opacity: 1;
}

.ai-player-remove:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

/* Modal Footer */
.ai-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.15);
}

.ai-modal-stats {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  gap: 12px;
}

.ai-modal-stats .stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ai-modal-stats .stat-value {
  font-weight: 700;
  color: var(--text-secondary);
}

.ai-modal-actions {
  display: flex;
  gap: 8px;
}

.ai-modal-btn {
  padding: 9px 20px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.ai-modal-cancel {
  background: none;
  border-color: var(--border-color);
  color: var(--text-secondary);
}

.ai-modal-cancel:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.ai-modal-confirm {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.2));
  border-color: rgba(139, 92, 246, 0.4);
  color: #ddd6fe;
}

.ai-modal-confirm:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(99, 102, 241, 0.3));
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.2);
  transform: translateY(-1px);
}

.ai-modal-confirm:active {
  transform: translateY(0) scale(0.97);
}

/* AI Loading State in modal */
.ai-modal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px;
  width: 100%;
}

.ai-loading-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(139, 92, 246, 0.15);
  border-top-color: #a78bfa;
  border-radius: 50%;
  animation: aiSpin 0.8s linear infinite;
}

.ai-loading-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
}

.ai-loading-subtext {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin-top: -8px;
}

/* AI Error State */
.ai-modal-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px;
  width: 100%;
  text-align: center;
}

.ai-error-icon {
  font-size: 36px;
}

.ai-error-title {
  font-size: 15px;
  font-weight: 700;
  color: #f87171;
}

.ai-error-message {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 400px;
  line-height: 1.5;
}

.ai-error-retry {
  background: none;
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  padding: 7px 18px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
  margin-top: 4px;
}

.ai-error-retry:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.5);
}

/* ==========================================
   SETTINGS — AI API KEY SECTION
   ========================================== */
.settings-ai-section {
  padding: 4px 8px 8px;
}

.settings-ai-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 4px;
}

.settings-ai-icon {
  font-size: 14px;
}

.settings-ai-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.settings-ai-body {
  padding: 4px;
}

.settings-ai-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
  display: block;
}

.settings-ai-key-row {
  display: flex;
  gap: 4px;
}

.settings-ai-key-input {
  flex: 1;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  padding: 6px 10px;
  color: var(--text-primary);
  font-size: 12px;
  font-family: 'Inter', monospace;
  outline: none;
  transition: border-color 0.2s;
  min-width: 0;
}

.settings-ai-key-input:focus {
  border-color: rgba(139, 92, 246, 0.5);
}

.settings-ai-key-input::placeholder {
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
}

.settings-ai-key-save,
.settings-ai-key-toggle {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.settings-ai-key-save:hover {
  background: rgba(46, 204, 113, 0.1);
  border-color: rgba(46, 204, 113, 0.3);
  color: var(--green-accent);
}

.settings-ai-key-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

.settings-ai-key-status {
  font-size: 10px;
  padding: 4px 4px 0;
  min-height: 16px;
  color: var(--text-muted);
}

.settings-ai-key-status.saved {
  color: var(--green-accent);
}

.settings-ai-key-status.error {
  color: #f87171;
}

/* ==========================================
   TAKVİM — Performans & Analiz vertical scroll
   Only targets the calendar file-manager containers.
   ========================================== */
#perf-cfm-container,
#analiz-cfm-container {
  height: calc(100vh - 150px);
  min-height: 500px;
}

#perf-main-panel,
#analiz-main-panel {
  overflow-y: auto;
}

/* ==========================================
   TAKVİM (PERFORMANS & ANALİZ) ALT KLASÖRLER
   ========================================== */
.cfm-subfolder-card {
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.cfm-subfolder-card:hover {
  border-color: rgba(46, 204, 113, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.cfm-subfolder-card .cfm-card-thumb svg {
  transition: all 0.25s cubic-bezier(.4, 0, .2, 1);
}

.cfm-subfolder-card:hover .cfm-card-thumb svg {
  transform: scale(1.1);
  opacity: 1;
}

.cfm-back-btn:hover {
  color: #fff !important;
}

/* ==========================================================================
   TABLET RESPONSIVE (≤1024px)
   Desktop deneyimi HİÇ DEĞİŞMEZ. Bu kurallar sadece tablet ekranlarda aktif.
   ========================================================================== */

/* --- Sidebar Toggle Button (hidden on desktop) --- */
.sidebar-toggle-btn {
  display: none;
}

.sidebar-overlay {
  display: none;
}

@media (max-width: 1024px) {

  /* ============================
     1. NAVBAR — Kompakt Mod
     ============================ */
  .top-navbar {
    padding: 0 12px;
    height: 50px;
    gap: 4px;
  }

  .top-navbar .brand .logo {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .top-navbar .brand h1 {
    font-size: 13px;
  }

  .brand-separator {
    display: none;
  }

  .brand-club-name-wrap {
    display: none;
  }

  .top-navbar .nav-tabs {
    gap: 1px;
    padding: 0 4px;
  }

  /* Tab'larda sadece icon göster, yazıyı gizle */
  .top-navbar .nav-tab {
    padding: 6px 10px;
    font-size: 0;
    gap: 0;
  }

  .top-navbar .nav-tab .tab-icon {
    font-size: 16px;
    opacity: 0.85;
  }

  .top-navbar .nav-tab.active .tab-icon {
    opacity: 1;
  }

  /* Aktif tab'da yazıyı göster */
  .top-navbar .nav-tab.active {
    font-size: 12px;
    gap: 4px;
    padding: 6px 12px;
  }

  .nav-coach-area {
    display: none;
  }

  .nav-right {
    gap: 6px;
  }

  .nav-save-btn {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 8px;
  }

  .nav-save-text {
    display: none;
  }

  /* Injured badge */
  .injured-count-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 9px;
    min-width: 16px;
    height: 16px;
  }

  /* ============================
     2. SIDEBAR — Overlay Panel
     ============================ */
  .sidebar-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 10px;
    bottom: 20px;
    z-index: 60;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.9), rgba(39, 174, 96, 0.95));
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(46, 204, 113, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
  }

  .sidebar-toggle-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 28px rgba(46, 204, 113, 0.5);
  }

  .sidebar-toggle-btn.active {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 50, 50, 0.95));
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4);
    transform: rotate(90deg);
  }

  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    top: 50px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 39;
    backdrop-filter: blur(2px);
  }

  .sidebar-overlay.active {
    display: block;
    animation: fadeIn 0.2s ease;
  }

  .app-layout {
    margin-top: 50px;
    height: calc(100vh - 50px);
  }

  .left-sidebar {
    position: fixed;
    left: -280px;
    top: 50px;
    height: calc(100vh - 50px);
    width: 260px;
    min-width: 260px;
    z-index: 40;
    box-shadow: 6px 0 30px rgba(0, 0, 0, 0.5);
    transition: left 0.3s cubic-bezier(.4, 0, .2, 1);
  }

  .left-sidebar.tablet-open {
    left: 0;
  }

  /* ============================
     3. TAKVİM — Grid Uyumu
     ============================ */
  .calendar-page {
    padding: 16px;
  }

  .calendar-title {
    font-size: 20px;
    letter-spacing: 3px;
  }

  .calendar-grid {
    gap: 1px;
  }

  .calendar-day-header {
    font-size: 11px;
    padding: 8px 2px;
    letter-spacing: 0.5px;
  }

  .calendar-cell {
    min-height: 65px;
    padding: 4px 5px;
  }

  .cell-date {
    font-size: 12px;
  }

  .cell-teams {
    gap: 2px;
    margin-top: 3px;
  }

  .cell-team-badge {
    font-size: 9px;
    padding: 1px 4px;
  }

  .cell-icons {
    gap: 2px;
  }

  .cell-icons span {
    font-size: 10px;
  }

  /* Takvim Note Editor — tablette ortalanmış */
  .cal-note-editor {
    width: 90vw;
    max-width: 340px;
  }

  /* ============================
     4. ANTRENMAN — Kartlar
     ============================ */
  .content-header {
    padding: 10px 16px;
  }

  .sub-tabs .sub-tab {
    padding: 6px 12px;
    font-size: 12px;
  }

  /* Drill cards single column on narrow tablets */
  #drill-cards-container {
    gap: 12px;
  }

  .drill-card {
    min-width: unset;
  }

  /* Groups module */
  .groups-module {
    padding: 0 8px;
  }

  .group-card {
    min-width: 200px;
  }

  /* ============================
     5. TAKIM KADRO / ÇİZİM
     ============================ */
  /* Pitch panels */
  .sq-player-panel {
    width: 220px;
    min-width: 200px;
  }

  .sq-settings-panel {
    width: 200px;
    min-width: 180px;
  }

  /* Drawing tools — bigger touch targets */
  .draw-tool-btn {
    min-width: 40px;
    min-height: 40px;
    padding: 6px;
  }

  .draw-tools-row {
    gap: 4px;
    flex-wrap: wrap;
  }

  /* ============================
     6. AUTH & MODALS
     ============================ */
  .auth-login-container {
    max-width: 100%;
    padding: 0 16px;
  }

  .auth-form-card {
    padding: 24px 20px;
    max-width: 400px;
  }

  .auth-input {
    padding: 12px 14px;
    font-size: 15px;
    /* iOS zoom prevention */
  }

  .auth-submit-btn {
    padding: 14px;
    font-size: 15px;
    min-height: 48px;
  }

  /* Settings dropdown */
  .settings-dropdown {
    min-width: 260px;
    right: -8px;
  }

  .settings-dropdown-item {
    padding: 12px 14px;
    font-size: 14px;
    min-height: 44px;
  }

  /* ============================
     7. DRILL KÜTÜPHANESI
     ============================ */
  .dl-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* ============================
     8. SAKAT OYUNCULAR
     ============================ */
  .injured-page {
    padding: 16px;
  }

  .inj-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* ============================
     9. CFM (Calendar File Manager)
     ============================ */
  .cfm-day-panel {
    width: 90vw;
    max-width: 600px;
  }

  .cfm-modal {
    width: 90vw;
    max-width: 440px;
  }

  /* ============================
     10. PDF OUTPUT
     ============================ */
  .pout-preview {
    min-width: unset;
  }

  /* ============================
     GENEL TOUCH İYİLEŞTİRMELERİ
     ============================ */
  /* Minimum 44px touch target (Apple HIG) */
  button,
  .nav-tab,
  .sub-tab,
  .sq-filter-btn,
  .sq-formation-btn {
    min-height: 36px;
  }

  /* Smooth scrolling for iOS */
  .sb-squad-list,
  .sq-player-list,
  .dl-grid,
  .groups-scroll {
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent text selection on interactive elements */
  .nav-tab,
  .sub-tab,
  .sidebar-toggle-btn,
  .sq-filter-btn {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Prevent iOS zoom on input focus */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Fix for autocomplete dropdowns */
  input:-webkit-autofill {
    -webkit-text-fill-color: var(--text-primary);
    transition: background-color 5000s ease-in-out 0s;
  }
}

/* ==========================================================================
   SMALL TABLET / LARGE PHONE (≤768px)
   ========================================================================== */
@media (max-width: 768px) {

  /* Nav tabs even more compact */
  .top-navbar .nav-tab {
    padding: 5px 8px;
  }

  .top-navbar .nav-tab .tab-icon {
    font-size: 15px;
  }

  .top-navbar .nav-tab.active {
    font-size: 0;
    gap: 0;
  }

  /* Calendar cells smaller */
  .calendar-cell {
    min-height: 55px;
    padding: 3px 4px;
  }

  .cell-date {
    font-size: 11px;
  }

  .calendar-day-header {
    font-size: 10px;
    padding: 6px 2px;
  }

  /* Drill grid 1 column */
  .dl-grid {
    grid-template-columns: 1fr;
  }

  /* Squad panels full overlay */
  .sq-player-panel,
  .sq-settings-panel {
    position: fixed;
    top: 50px;
    right: 0;
    height: calc(100vh - 50px);
    z-index: 50;
    width: 280px;
    box-shadow: -6px 0 30px rgba(0, 0, 0, 0.5);
  }

  /* Training sub-tabs scrollable */
  .sub-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .sub-tabs::-webkit-scrollbar {
    display: none;
  }

  /* CFM panels full width */
  .cfm-day-panel {
    width: 95vw;
  }

  .cfm-modal {
    width: 95vw;
  }
}

/* Utility animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ==========================================================================
   TOUCH DRAG & DROP — iPad Only
   Activated by touch-drag.js on touch devices.
   ========================================================================== */

/* --- Ghost Element (floating preview while dragging) --- */
.touch-drag-ghost {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(79, 70, 229, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  color: #fff;
  box-shadow: 0 8px 32px rgba(37, 99, 235, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  white-space: nowrap;
  min-width: 100px;
}

.touch-drag-ghost .tdg-number {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.touch-drag-ghost .tdg-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

/* Batch ghost (multiple players) */
.touch-drag-ghost.tdg-batch {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(79, 70, 229, 0.95));
  padding: 10px 18px;
}

.touch-drag-ghost .tdg-batch-count {
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.touch-drag-ghost .tdg-batch-label {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.85;
}

/* Slot ghost (player in group) */
.touch-drag-ghost.tdg-slot {
  background: linear-gradient(135deg, rgba(30, 38, 48, 0.95), rgba(25, 30, 40, 0.95));
  padding: 6px 14px;
  gap: 6px;
  min-width: 80px;
}

.touch-drag-ghost .tdg-slot-num {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.5);
  width: 18px;
  text-align: center;
}

.touch-drag-ghost .tdg-slot-name {
  font-size: 12px;
  font-weight: 600;
}

/* Drill card ghost */
.touch-drag-ghost.tdg-drill-ghost {
  background: linear-gradient(135deg, rgba(30, 38, 48, 0.95), rgba(22, 28, 36, 0.95));
  border-color: rgba(46, 204, 113, 0.3);
  padding: 10px 16px;
}

.touch-drag-ghost .tdg-drill {
  font-size: 13px;
  font-weight: 600;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Source element while being dragged --- */
.touch-dragging {
  opacity: 0.35 !important;
  transform: scale(0.95);
  transition: opacity 0.15s, transform 0.15s;
}

/* --- Drop zone highlight --- */
.touch-drag-over {
  border-color: rgba(46, 204, 113, 0.7) !important;
  background: rgba(46, 204, 113, 0.12) !important;
  box-shadow: inset 0 0 0 2px rgba(46, 204, 113, 0.3),
    0 0 20px rgba(46, 204, 113, 0.15) !important;
  transition: all 0.15s ease !important;
}

/* Drill card drag-over highlight */
.drill-card.touch-drag-over {
  border-color: rgba(46, 204, 113, 0.5) !important;
  box-shadow: 0 0 24px rgba(46, 204, 113, 0.2) !important;
}

/* --- Body state while touch-dragging --- */
body.is-touch-dragging {
  -webkit-user-select: none;
  user-select: none;
  cursor: grabbing;
}

/* Prevent scroll while dragging */
body.is-touch-dragging .sb-squad-list,
body.is-touch-dragging .groups-grid-v2,
body.is-touch-dragging #drill-cards-container {
  overflow: hidden !important;
}

/* Show drop zones more prominently while dragging */
body.is-touch-dragging .group-dropzone,
body.is-touch-dragging .joker-dropzone {
  transition: all 0.15s ease;
}

body.is-touch-dragging .drop-placeholder {
  color: rgba(46, 204, 113, 0.6);
  font-weight: 600;
}

/* iPad-specific: disable HTML5 draggable to avoid conflict with touch system */
@media (pointer: coarse) {

  .sb-player-item,
  .player-slot {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}

@media (pointer: coarse) {

  .sb-player-item,
  .player-slot {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  /* ===== iPad Touch Highlight & Callout Suppression ===== */

  /* Kill Safari tap highlight on ALL interactive elements */
  *,
  *::before,
  *::after {
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Remove focus ring/outline on touch — desktop keyboard a11y preserved */
  button:focus,
  a:focus,
  input:focus,
  select:focus,
  textarea:focus,
  [tabindex]:focus,
  canvas:focus,
  div:focus {
    outline: none !important;
    box-shadow: none !important;
  }

  /* Pitch & drawing area — full callout suppression */
  .sq-pitch-surface,
  .sq-pitch-surface *,
  .sq-draw-canvas,
  .sq-draw-fullpanel,
  .sq-draw-fullpanel * {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  /* Cards, markers, player items — no selection highlight */
  .sq-player-card,
  .sq-pitch-marker,
  .sq-opponent-marker,
  .dl-card,
  .calendar-cell,
  .drill-card {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}