:root {
  /* Colors */
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-danger: #dc2626;
  --color-danger-dark: #b91c1c;
  --color-danger-bg: #fef2f2;
  --color-danger-border: #fecaca;
  --color-success: #059669;
  --color-warning: #d97706;
  
  --color-text-main: #111827;
  --color-text-secondary: #374151;
  --color-text-muted: #6b7280;
  
  --color-bg-main: #ffffff;
  --color-bg-secondary: #f9fafb;
  --color-bg-tertiary: #f3f4f6;
  
  --color-border: #e5e7eb;
  --color-border-light: #eee;
  
  /* Spacing */
  --space-xs: 4px;
  --space-sm: 6px;
  --space-md: 8px;
  --space-lg: 10px;
  --space-xl: 12px;
  --space-2xl: 16px;
  --space-3xl: 24px;
  
  /* Typography */
  --font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
  
  --font-xs: 11px;
  --font-sm: 12px;
  --font-md: 13px;
  --font-base: 14px;
  --font-lg: 16px;
  --font-xl: 18px;
  
  /* Borders */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 999px;
  
  /* Z-Index */
  --z-modal: 1000;
  --z-toast: 1100;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  --color-bg-footer: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] {
  --color-primary: #3b82f6;
  --color-primary-dark: #60a5fa;
  --color-danger: #ef4444;
  --color-danger-dark: #f87171;
  --color-danger-bg: #450a0a;
  --color-danger-border: #7f1d1d;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  
  --color-text-main: #f9fafb;
  --color-text-secondary: #d1d5db;
  --color-text-muted: #9ca3af;
  
  --color-bg-main: #111827;
  --color-bg-secondary: #1f2937;
  --color-bg-tertiary: #374151;
  
  --color-border: #4b5563;
  --color-border-light: #374151;
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  
  --color-bg-footer: rgba(17, 24, 39, 0.9);
}

/* Base */
html, body {
  height: 100%;
  margin: 0;
  font-family: var(--font-family);
  color: var(--color-text-main);
  background-color: var(--color-bg-main);
}

table { width: 100%; border-collapse: collapse; }
th, td {
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border-light);
  text-align: left;
  font-size: var(--font-base);
}

/* Layout */
.app { display: flex; flex-direction: column; height: 100%; }

header, .sub-header {
  padding: var(--space-md) var(--space-xl);
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.sub-header {
  padding: var(--space-sm) var(--space-xl);
  background-color: var(--color-bg-secondary);
}

.sub-header .nav, .nav { margin-left: auto; display: flex; gap: var(--space-sm); }
.sub-header .nav { justify-content: flex-end; }

#content { position: relative; flex: 1; min-height: 0; }

#map-container, #players-container, #games-container, #categories-container, .container-view {
  position: absolute;
  inset: 0;
}

#players-container, #games-container, #categories-container, .container-view {
  background: var(--color-bg-main);
  overflow: auto;
  padding: var(--space-xl);
}

.map-split { display: flex; height: 100%; width: 100%; }

/* Sidebars */
.map-sidebar, .map-sidebar-right {
  position: relative;
  height: 100%;
  background: var(--color-bg-main);
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease, min-width 0.3s ease;
}

.map-sidebar {
  width: 320px;
  min-width: 260px;
  max-width: 40%;
  border-right: 1px solid var(--color-border);
}

.map-sidebar-right {
  width: 260px;
  min-width: 200px;
  max-width: 30%;
  border-left: 1px solid var(--color-border);
}

.map-sidebar.collapsed, .map-sidebar-right.collapsed {
  width: 0;
  min-width: 0;
  overflow: hidden;
  border: none;
}

/* Expand Buttons */
.map-expand-btn, .map-expand-btn-right {
  position: absolute;
  top: 60px;
  z-index: 10;
  background: white;
  border: 1px solid #ccc;
  padding: 8px 12px;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  cursor: pointer;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  color: #565656;
}

.map-expand-btn:hover, .map-expand-btn-right:hover { background: #ebebeb; color: #000; }
.map-expand-btn.hidden, .map-expand-btn-right.hidden, .hidden { display: none !important; }

.map-expand-btn { left: 10px; }
.map-expand-btn-right { right: 10px; }

.map-sidebar-head {
  padding: var(--space-lg) var(--space-xl);
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.map-sidebar-controls {
  padding: var(--space-md) var(--space-xl);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  gap: var(--space-md);
  align-items: center;
  flex-wrap: wrap;
}

.map-players-list { flex: 1; overflow: auto; }
.map-pane { flex: 1; min-width: 0; height: 100%; }
#map { width: 100%; height: 100%; }

.footer {
  position: absolute;
  bottom: var(--space-xl);
  left: var(--space-xl);
  background: var(--color-bg-footer);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  font-size: var(--font-sm);
}

/* Buttons & Icons */
.icon-btn-sm {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 12px;
  color: var(--color-text-secondary);
  transition: all 0.2s;
}
.icon-btn-sm:hover { background: var(--color-bg-tertiary); color: var(--color-text-main); }

.nav-btn, .og-btn {
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: background-color 0.2s;
  color: var(--color-text-main);
}

.nav-btn {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-sm);
}
.nav-btn:hover { background-color: var(--color-bg-tertiary); }
.nav-btn.active { background: var(--color-border); }

.og-btn {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--font-base);
  font-size: var(--font-base);
}
.og-btn:hover { background-color: var(--color-bg-tertiary); }

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

.og-btn.danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger-dark); }
.og-btn.danger:hover { background: var(--color-danger-dark); }

.btn-danger-light { border-color: var(--color-danger-border); background: var(--color-danger-bg); }

.btn-send-announcement {
  align-self: flex-start;
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  padding: var(--space-md) var(--space-2xl);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.btn-clear-sos, .btn-activate-sos {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

/* List Items */
.mpl-item {
  padding: var(--space-md) var(--space-xl);
  border-bottom: 1px solid var(--color-bg-tertiary);
  cursor: pointer;
  transition: background-color 0.2s;
}
.mpl-item:hover { background: var(--color-bg-secondary); }

.mpl-name {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--color-text-main);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.mpl-sub { font-size: var(--font-sm); color: var(--color-text-muted); }
.mpl-role-container { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: 2px; }
.mpl-role-dot { width: 8px; height: 8px; border-radius: 50%; }

/* Pills */
.pill {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-xs) var(--space-lg);
  font-size: var(--font-sm);
}

.pill-success, .pill-running {
  background-color: rgba(5, 150, 105, 0.1);
  color: var(--color-text-main);
  border-color: var(--color-success);
}

.pill-error, .pill-canceled {
  background-color: rgba(220, 38, 38, 0.1);
  color: var(--color-text-main);
  border-color: var(--color-danger);
}

.pill-paused {
  background-color: rgba(217, 119, 6, 0.1);
  color: var(--color-text-main);
  border-color: var(--color-warning);
}

.pill-scheduled, .pill-ended, .pill-stopped {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.pill-ended, .pill-stopped { background-color: rgba(107, 114, 128, 0.1); }

/* Legend & Dots */
.legend { display: flex; gap: var(--space-md); align-items: center; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.me { background: var(--color-primary); }
.dot.other { background: var(--color-danger); }

.header-clock {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-right: var(--space-xl);
  align-self: center;
  font-variant-numeric: tabular-nums;
}

/* Inputs & Forms */
.select-input, .settings-input, .player-select, .form-control, .color-input, .og-input, .login-input {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-main);
  color: var(--color-text-main);
  font-family: inherit;
  box-sizing: border-box;
}

.select-input, .settings-input, .player-select, .form-control {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-sm);
}

.og-input, .login-input {
  font-size: var(--font-base);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  height: auto;
  width: 100%;
}

.og-input:focus { outline: 2px solid var(--color-primary); border-color: var(--color-primary); }

.form-control { height: 32px; }
.color-input { width: 40px; height: 32px; padding: 0; }

.select-player { width: 100%; }

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 24px !important;
  height: 24px !important;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background-color: var(--color-bg-main);
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;
}

input[type="checkbox"]:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

input[type="checkbox"]:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.og-modal input[type=text],
.og-modal input[type=number],
.og-modal input[type=date],
.og-modal input[type=time],
.og-modal textarea,
.og-modal select,
.og-modal .form-control {
    font-size: var(--font-base);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    height: auto;
    box-sizing: border-box;
    font-family: inherit;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-main);
    color: var(--color-text-main);
}

.select-game { min-width: 220px; }
.select-overlay { min-width: 200px; }

.cat-rules-textarea, .announcement-textarea {
  width: 100%;
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  resize: vertical;
  background-color: var(--color-bg-main);
  color: var(--color-text-main);
}

.cat-rules-textarea { min-height: 200px; font-family: var(--font-mono); font-size: var(--font-md); }
.announcement-textarea { min-height: 100px; font-family: inherit; font-size: var(--font-base); }

/* Sections */
.cat-rules-panel, .cat-roles-panel {
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--color-border-light);
  padding-top: var(--space-xl);
}

.announcement-section { display: flex; flex-direction: column; gap: var(--space-md); max-width: 600px; }
.announcement-controls { display: flex; gap: var(--space-md); align-items: center; }
.announcement-status { font-size: var(--font-sm); color: var(--color-text-muted); min-height: 18px; }

.settings-section { border-top: 1px solid var(--color-border); padding-top: var(--space-xl); }
.settings-input-group {
  display: flex;
  gap: var(--space-xl);
  align-items: center;
  flex-wrap: wrap;
  margin: var(--space-md) 0 var(--space-2xl);
}
.settings-label {
  font-size: var(--font-sm);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.section-actions, .section-actions-nowrap {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  margin: var(--space-md) 0 var(--space-xl);
}
.section-actions { flex-wrap: wrap; }

/* Tables */
.group-game-cell {
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  font-weight: 600;
  padding: var(--space-md) var(--space-lg);
}

.group-role-cell {
  background: var(--color-bg-main);
  color: var(--color-text-secondary);
  padding: var(--space-sm) var(--space-lg);
  border-bottom: 1px solid var(--color-bg-tertiary);
}

.player-actions-cell { white-space: nowrap; display: flex; gap: var(--space-xs); align-items: center; }

.vis-matrix-cell, .vis-matrix-header-cell, .vis-matrix-th {
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-bg-tertiary);
}
.vis-matrix-header-cell { font-weight: 600; }
.vis-matrix-th { border-bottom: 1px solid var(--color-border); }

.storage-table-url, .table-fixed-cell { max-width: 240px; word-break: break-all; }
.empty-state, .empty-cell, .empty-message { padding: var(--space-lg); color: var(--color-text-muted); }

/* Badges */
.sos-badge-text { color: var(--color-danger); font-weight: 600; margin-left: var(--space-xs); }
.sos-badge-pill { background: var(--color-danger); color: #fff; padding: 2px 6px; border-radius: var(--radius-md); font-size: var(--font-xs); }
.color-box { width: 24px; height: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }

/* Modal */
#modal-root {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}

.og-modal {
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  width: min(480px, 92%);
  box-shadow: var(--shadow-lg);
  padding: 20px;
}
.og-modal.modal-wide { width: min(900px, 92%); }
.og-modal h2 { margin: 0 0 var(--space-xl); font-size: var(--font-xl); }
.og-modal form { display: flex; flex-direction: column; gap: var(--space-xl); }
.og-modal .actions { display: flex; gap: var(--space-lg); justify-content: flex-end; margin-top: var(--space-xs); }

.modal-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
.modal-col { display: flex; flex-direction: column; gap: var(--space-md); }

/* Toast */
#toast-root {
  position: fixed;
  bottom: var(--space-2xl);
  right: var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  z-index: var(--z-toast);
  max-width: 320px;
}

.og-toast {
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--font-base) var(--space-lg) var(--space-xl);
  font-size: var(--font-md);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  position: relative;
  overflow: hidden;
  animation: ogToastIn 0.25s ease-out;
}

.og-toast::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-primary);
}
.og-toast[data-type=success]::before { background: var(--color-success); }
.og-toast[data-type=error]::before { background: var(--color-danger); }
.og-toast[data-type=warn]::before { background: var(--color-warning); }

.og-toast button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-lg);
  line-height: 1;
  padding: 0;
  color: var(--color-text-muted);
  position: absolute;
  top: 6px;
  right: 8px;
}

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

/* Utilities */
.w-full { width: 100%; }
.flex-wrap { flex-wrap: wrap; }
.text-sm { font-size: var(--font-sm); }
.text-gray, .text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }
.flex-1 { flex: 1; }
.items-end { align-items: flex-end; }

.mb-8 { margin-bottom: var(--space-md); }
.mb-12 { margin-bottom: var(--space-xl); }
.mt-8 { margin-top: var(--space-md); }
.mt-16 { margin-top: var(--space-2xl); }
.mt-24 { margin-top: var(--space-3xl); }
.mt-32 { margin-top: 32px; }
.mt-0 { margin-top: 0; }

.my-xs-sm { margin: var(--space-xs) 0 var(--space-md); }
.my-md-0 { margin: var(--space-md) 0; }
.my-xs-xl { margin: var(--space-xs) 0 var(--space-xl); }

.flex-gap-8 { display: flex; gap: var(--space-md); align-items: center; }

.w-120 { width: 120px; }
.w-140 { width: 140px; }
.min-w-120 { min-width: 120px; }
.min-w-220 { min-width: 220px; }
.min-w-480 { min-width: 480px; }
.max-w-800 { max-width: 800px; }

.overflow-box { overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.bg-dynamic { background-color: var(--dynamic-color); }

.form-label { display: block; }
.form-label > input, .form-label > select, .form-label > textarea { display: block; width: 100%; margin-top: var(--space-xs); }
.form-label > .color-input { width: 40px; }

.mobile-info-box { font-family: var(--font-family); font-size: var(--font-sm); }
.checkbox-label { display: flex; gap: var(--space-sm); align-items: center; margin-bottom: var(--space-xs); }

/* Admin & Login */
.admin-wrap { max-width: 800px; margin: 0 auto; padding: var(--space-2xl); }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-xl); }
.admin-input { padding: var(--space-md); width: 260px; }
.admin-btn { padding: var(--space-md) var(--space-xl); }

.login-wrap { display: grid; place-items: center; height: 100%; background: var(--color-bg-secondary); }
.login-card {
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 20px;
  width: 320px;
  box-shadow: var(--shadow-sm);
}

.login-title { margin: 0 0 var(--space-xl); font-size: var(--font-lg); }
.login-row { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-xl); }

.login-btn {
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-text-main);
  color: #fff;
  cursor: pointer;
  width: 100%;
}
.login-msg { min-height: 18px; font-size: var(--font-sm); color: var(--color-danger-dark); }
.login-msg.success { color: var(--color-success); }
.req-star { color: var(--color-danger); margin-left: var(--space-xs); font-weight: 700; font-size: 0.9em; }

.player-left { opacity: 0.6; background-color: var(--color-bg-tertiary); }
.player-left td { color: var(--color-text-muted); text-decoration: line-through; }
.player-left .pill-error, .player-left .nav-btn { text-decoration: none; }

/* Google Maps Overrides */
.gm-ui-hover-effect { display: none !important; }
[data-theme="dark"] .gm-ui-hover-effect > img { filter: invert(1) brightness(0.9); }

.gm-style-iw-c {
  padding: 0 !important;
  background-color: var(--color-bg-main) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}

.gm-style-iw-tc::after { background: var(--color-bg-main) !important; }
.gm-style-iw-d { overflow: hidden !important; max-height: none !important; }
.gm-style-iw-ch { padding: 0 !important; margin: 0 !important; }

/* Info Window */
.info-window-container {
  font-size: var(--font-sm);
  padding: var(--space-md);
  color: var(--color-text-main);
  font-family: var(--font-family);
}

.info-window-header {
  margin-bottom: var(--space-xs);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.info-window-name { font-size: var(--font-lg); font-weight: 600; }
.info-window-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-xl);
  line-height: 1;
  padding: 0;
  color: var(--color-text-muted);
  font-weight: bold;
}

.info-window-device { color: var(--color-text-muted); font-size: var(--font-xs); margin-bottom: var(--space-sm); }
.info-window-role { display: inline-flex; align-items: center; gap: var(--space-xs); }
.info-window-role-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* Popup Styles */
.popup-close-btn { color: var(--color-text-muted); }
.popup-close-btn:hover { color: var(--color-text-main); }
.popup-waypoint-label { color: var(--color-text-muted); }
.popup-name { color: var(--color-text-main); }
.popup-disqualified { color: var(--color-danger); background-color: var(--color-danger-bg); }
.popup-role, .popup-details { color: var(--color-text-secondary); }
.popup-no-time { color: var(--color-text-muted); font-style: italic; }

/* Role Management */
.role-badge { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.color-swatch { width: 24px; height: 24px; border-radius: 4px; border: 1px solid var(--color-border); }

.color-swatch-input {
  width: 24px !important;
  height: 24px !important;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: none;
  cursor: pointer;
  margin-top: var(--space-xs);
  box-sizing: border-box;
}
.color-swatch-input::-webkit-color-swatch-wrapper { padding: 0; }
.color-swatch-input::-webkit-color-swatch { border: none; border-radius: 3px; }

.h-40 { height: 40px !important; }
#map-role-select { width: 100%; }

/* Games Module */
.form-label-checkbox { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.lag-roles-container { display: none; margin-bottom: var(--space-lg); }
.lag-roles-list {
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-bg-main);
  color: var(--color-text-main);
}
.lag-role-item { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; padding: 2px 0; }

.map-preview-container {
  height: 400px;
  width: 100%;
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg-tertiary);
}

.input-zoom { width: 80px; }
.help-text-mt { margin-top: 0.5rem; }

/* Utility classes for Disqualified status */
.badge {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
}
.bg-red-50 { background-color: var(--color-danger-bg); }
.bg-gray-50 { background-color: var(--color-bg-tertiary); }
.text-red-500 { color: var(--color-danger); }
.line-through { text-decoration: line-through; }
.ml-2 { margin-left: 0.5rem; }

/* Toggle Switch */
.toggle-switch { position: relative; display: inline-block; width: 34px; height: 20px; margin-left: auto; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; }
input:checked + .slider { background-color: var(--color-primary); }
input:focus + .slider { box-shadow: 0 0 1px var(--color-primary); }
input:checked + .slider:before { transform: translateX(14px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

/* Marker Popup */
.marker-popup { min-width: 200px; color: var(--color-text-main); font-family: var(--font-family); }
.marker-popup h3 { margin: 0 0 var(--space-md) 0; font-size: var(--font-lg); font-weight: 600; color: var(--color-text-main); }
.marker-popup .form-group { margin-bottom: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); }
.marker-popup label { font-size: var(--font-sm); color: var(--color-text-secondary); }
.marker-popup .actions { display: flex; justify-content: flex-end; gap: var(--space-sm); margin-top: var(--space-lg); }

.og-input-color {
  width: 100%;
  height: 40px;
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-main);
  cursor: pointer;
}

/* Utility Classes */
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }
.font-bold { font-weight: 700; }

.bg-primary { background-color: var(--color-primary); color: #fff; }
.bg-secondary { background-color: var(--color-text-muted); color: #fff; }
.bg-success { background-color: var(--color-success); color: #fff; }
.bg-warning { background-color: var(--color-warning); color: #fff; }
.bg-danger { background-color: var(--color-danger); color: #fff; }
.ms-1 { margin-left: 0.25rem; }
.text-gray-500 { color: var(--color-text-muted); }