/* ==========================================================
   COMMANDERSPLAYS - GLOBAL DESIGN SYSTEM & BACKGROUND SYSTEM
   High-Priority Absolute Neutral Dark Matte Theme Overrides
   ========================================================== */

/* 1. GLOBAL FIXED BACKGROUND SYSTEM & TRANSPARENT LAYOUT WRAPPERS */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  width: 100%;
  background-color: #0d0d10 !important;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, #7f1d1d 0%, #1a0505 55%, #0d0d10 100%) !important;
  background-size: 30px 30px, 30px 30px, 100% 100% !important;
  background-repeat: repeat, repeat, no-repeat !important;
  background-attachment: fixed !important;
  overflow: hidden;
}

body, html, #app, #field-container, .board-container, .workspace-panel, .app-container {
    background-color: #131313 !important;
    background: #131313 !important;
    margin: 0;
    padding: 0;
}

canvas {
    display: block !important;
    vertical-align: top !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    width: 100% !important;
    height: 100% !important;
}

#field-container {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

main, #app, #root, .page-wrapper, .dashboard, .content-wrapper, .container-fluid, .view-container, .dash-wrapper, .dashboard-container, #taktik-tahtasi-section {
  background: transparent !important;
  background-color: transparent !important;
}

header, .navbar, .top-header, .top-bar {
  background-color: #0d0d0d !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 2. TOP TOOLBAR CONTAINER (Absolute Override) */
div#floating-route-toolbar div#rtToolbarContainer,
div#floating-route-toolbar .rt-toolbar-bar,
div#floating-route-toolbar > div:first-child,
#floating-route-toolbar #rtToolbarContainer,
#floating-route-toolbar .rt-toolbar-bar,
#floating-route-toolbar > div:first-child,
.token-editor-toolbar,
.portable-toolbar,
.player-modal-toolbar,
.modal-header-toolbar,
#floating-route-toolbar {
  background-color: #131313 !important;
  background: #131313 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  padding: 6px 10px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7) !important;
}

/* 3. TOP BAR BUTTONS & .rt-bar-btn (Absolute Override) */
div#floating-route-toolbar button.rt-bar-btn,
div#floating-route-toolbar button,
#floating-route-toolbar button.rt-bar-btn,
#floating-route-toolbar button,
.rt-bar-btn,
.token-editor-toolbar button,
.portable-toolbar button,
.player-modal-toolbar .btn-tool,
.modal-header-toolbar button {
  background-color: #1d1d1d !important;
  background: #1d1d1d !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  color: #e2e8f0 !important;
  height: 36px !important;
  min-height: 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

div#floating-route-toolbar button.rt-bar-btn:hover,
div#floating-route-toolbar button:hover,
#floating-route-toolbar button.rt-bar-btn:hover,
#floating-route-toolbar button:hover,
.rt-bar-btn:hover,
.token-editor-toolbar button:hover,
.portable-toolbar button:hover,
.player-modal-toolbar .btn-tool:hover,
.modal-header-toolbar button:hover {
  background-color: #2a2a2a !important;
  background: #2a2a2a !important;
  border: 1px solid rgba(220, 38, 38, 0.8) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

div#floating-route-toolbar button.rt-bar-btn:active,
div#floating-route-toolbar button:active,
#floating-route-toolbar button.rt-bar-btn:active,
#floating-route-toolbar button:active,
.rt-bar-btn:active,
.token-editor-toolbar button:active,
.portable-toolbar button:active,
.player-modal-toolbar .btn-tool:active,
.modal-header-toolbar button:active {
  background-color: #141414 !important;
  background: #141414 !important;
  transform: scale(0.96) !important;
}

/* 4. SUB-PANELS BACKGROUND */
#rtDetailedPanel,
#rtTreeSubPanel {
  background-color: #6e0d09 !important;
  background: #6e0d09 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6) !important;
}

#iptPlayerLabel {
  background-color: #131313 !important;
  background: #131313 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

/* 5. TABS, FILL PATTERN BUTTONS, AND ROUTE NUMBER BUTTONS */
#tabSymbol,
#tabSegments {
  transition: all 0.15s ease !important;
}

#tabSymbol:not(.active),
#tabSegments:not(.active) {
  background-color: #131313 !important;
  background: #131313 !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#tabSymbol.active,
#tabSegments.active {
  background-color: #242424 !important;
  background: #242424 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.fill-pattern-btn,
.rt-pattern-btn,
button[data-pattern],
.pattern-selector-group button {
  background-color: #6e0d09 !important;
  background: #6e0d09 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

.fill-pattern-btn:hover,
.rt-pattern-btn:hover,
button[data-pattern]:hover,
.pattern-selector-group button:hover {
  background-color: #88110b !important;
  background: #88110b !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
}

.fill-pattern-btn.active,
.rt-pattern-btn.active,
button[data-pattern].active {
  background-color: #a3150e !important;
  background: #a3150e !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
}

.rt-tree-num-btn {
  background-color: #242424 !important;
  background: #242424 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #e2e8f0 !important;
}

.rt-tree-num-btn:hover {
  background-color: #2a2a2a !important;
  background: #2a2a2a !important;
  border: 1px solid rgba(220, 38, 38, 0.8) !important;
  color: #ffffff !important;
}

/* 6. SPECIAL DANGER / CLEAR BUTTON */
div#floating-route-toolbar button#btnRtClearRoute,
#floating-route-toolbar button#btnRtClearRoute,
.token-editor-toolbar button.btn-delete,
.token-editor-toolbar button.btn-danger,
.portable-toolbar button.btn-delete,
.portable-toolbar button.btn-danger,
.modal-header-toolbar button.btn-delete,
.modal-header-toolbar button.btn-danger {
  background-color: rgba(239, 68, 68, 0.1) !important;
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #f87171 !important;
}

div#floating-route-toolbar button#btnRtClearRoute:hover,
#floating-route-toolbar button#btnRtClearRoute:hover,
.token-editor-toolbar button.btn-delete:hover,
.token-editor-toolbar button.btn-danger:hover,
.portable-toolbar button.btn-delete:hover,
.portable-toolbar button.btn-danger:hover,
.modal-header-toolbar button.btn-delete:hover,
.modal-header-toolbar button.btn-danger:hover {
  background-color: rgba(239, 68, 68, 0.2) !important;
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
  color: #fca5a5 !important;
}

/* 7. SPECIAL SUCCESS CONFIRM BUTTON */
div#floating-route-toolbar button#btnRtConfirm,
#floating-route-toolbar button#btnRtConfirm,
.token-editor-toolbar button.btn-confirm,
.portable-toolbar button.btn-confirm,
.modal-header-toolbar button.btn-confirm,
.modal-header-toolbar button:last-child {
  background-color: #10b981 !important;
  background: #10b981 !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.35) !important;
}

div#floating-route-toolbar button#btnRtConfirm:hover,
#floating-route-toolbar button#btnRtConfirm:hover,
.token-editor-toolbar button.btn-confirm:hover,
.portable-toolbar button.btn-confirm:hover,
.modal-header-toolbar button.btn-confirm:hover,
.modal-header-toolbar button:last-child:hover {
  background-color: #059669 !important;
  background: #059669 !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.5) !important;
}

/* 8. DIVIDERS & SEPARATORS */
.token-editor-toolbar .toolbar-divider,
.portable-toolbar .toolbar-divider,
.modal-header-toolbar .toolbar-divider,
#floating-route-toolbar .toolbar-divider,
.toolbar-separator {
  background: rgba(255, 255, 255, 0.1) !important;
  width: 1px !important;
  height: 20px !important;
}

/* 9. MAIN ACTION TOOLBAR CONTAINER */
#tacticalBoardControlsToolbar,
#mainActionToolbar,
.editor-top-actions {
  background-color: #131313 !important;
  background: #131313 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7) !important;
  border-radius: 14px !important;
}

#tacticalBoardControlsToolbar button.btn,
#tacticalBoardControlsToolbar div[id*="toggle-playbar-btn"],
#tacticalBoardControlsToolbar .toolbar-text-btn {
  background-color: #1d1d1d !important;
  background: #1d1d1d !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}

#tacticalBoardControlsToolbar button.btn:hover,
#tacticalBoardControlsToolbar div[id*="toggle-playbar-btn"]:hover,
#tacticalBoardControlsToolbar .toolbar-text-btn:hover {
  background-color: #2a2a2a !important;
  background: #2a2a2a !important;
  border: 1px solid rgba(220, 38, 38, 0.8) !important;
  color: #ffffff !important;
}

/* 10. UNIFIED BUTTON STYLE FOR NAVBAR AND SUB-FILTERS */
.desktop-nav-link,
.user-badge,
.navbar-nav .nav-link,
.navbar .btn,
header a.nav-item,
.top-bar-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #1d1d1d !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  letter-spacing: 0.5px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
}

.desktop-nav-link:hover,
.desktop-nav-link.active,
.user-badge:hover,
.user-badge.active,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.navbar .btn:hover,
.navbar .btn.active,
header a.nav-item:hover,
header a.nav-item.active {
  background-color: #1d1d1d !important;
  border: 1.5px solid #ff2a2a !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(255, 42, 42, 0.55), inset 0 0 4px rgba(255, 42, 42, 0.25) !important;
  transform: translateY(-1px) !important;
}

/* 11. FORCE PURE WHITE TEXT ON ACTION BUTTONS */
button, .btn, .btn-cyan, .btn-orange, .btn-danger, .btn-login {
  color: #ffffff !important;
  background-color: #1f1f1f !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

button:hover, .btn:hover, .btn-cyan:hover, .btn-orange:hover, .btn-danger:hover, .btn-login:hover {
  background-color: #2a2a2a !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  cursor: pointer !important;
}

/* Custom Modern Dialog System */
.custom-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  display: none; /* MUST BE HIDDEN BY DEFAULT */
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 0;
  pointer-events: none; /* DO NOT CAPTURE CLICKS WHEN INACTIVE */
  transition: opacity 0.2s ease;
}
.custom-dialog-overlay.active {
  display: flex !important;
  opacity: 1;
  pointer-events: auto; /* ENABLE CLICKS ONLY WHEN ACTIVE */
}
.custom-dialog-card {
  background: #121418;
  border: 1px solid rgba(255, 50, 50, 0.25);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.1);
  border-radius: 16px;
  width: 90%;
  max-width: 420px;
  padding: 24px;
  color: #fff;
  transform: scale(0.95);
  transition: transform 0.2s ease;
}
.custom-dialog-overlay.active .custom-dialog-card {
  transform: scale(1);
}
.custom-dialog-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #f87171;
  margin-bottom: 12px;
}
.custom-dialog-message {
  font-size: 0.95rem;
  color: #d1d5db;
  line-height: 1.5;
  margin-bottom: 24px;
}
.custom-dialog-input {
  width: 100%;
  background: #0f1115;
  border: 1px solid #334155;
  color: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.custom-dialog-input:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.35);
}
.custom-dialog-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.custom-dialog-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}
.custom-dialog-btn-cancel {
  background: #2a2d34;
  color: #9ca3af;
}
.custom-dialog-btn-cancel:hover {
  background: #374151;
  color: #fff;
}
.custom-dialog-btn-confirm {
  background: #e11d48;
  color: #fff;
}
.custom-dialog-btn-confirm:hover {
  background: #f43f5e;
  box-shadow: 0 0 12px rgba(225, 29, 72, 0.5);
}

/* Projedeki Tüm Date & Time Input İkonlarını Beyaz Yapma */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  color-scheme: dark !important;
  color: #ffffff !important;
}

/* Shadow DOM içindeki siyah takvim/saat ikonunu ters çevirerek BEYAZ yap */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(100%) !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

/* Tactical Board Outer Canvas Wrapper & Page Section Background */
.tactical-board-container,
.board-wrapper-container,
#tacticalBoardWrapper,
#tacticalBoardCanvas,
#boardContainer,
.playbook-section,
.taktik-tahtasi-container,
.canvas-wrapper-outer {
  background-color: #131313 !important;
  background: #131313 !important;
}

/* 1. Global Reset for Radio Input & Label Borders/Outlines */
.attendance-container input[type="radio"],
.attendance-container input[type="radio"] + label,
.attendance-container label,
.attendance-container label:focus,
.attendance-container label:active,
.attendance-container input[type="radio"]:focus + label {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 2. Target specific "GELDİ" / "GELMEDİ" checked state borders */
input[type="radio"]:checked + label,
label.selected,
label.active,
.status-label.active {
  border: none !important; /* Removes the red border box around GELDİ */
  outline: none !important;
  box-shadow: none !important;
  border-radius: 4px;
}

/* 3. Modern clean color assignment without red boxes */
input[value="present"]:checked ~ span,
input[value="present"]:checked + span,
input[value="geldi"]:checked + label,
input[id*="geldi"]:checked + label {
  color: #4ade80 !important; /* Soft Green Text */
  background: transparent !important;
  border: none !important;
}

input[value="absent"]:checked ~ span,
input[value="absent"]:checked + span,
input[value="gelmedi"]:checked + label,
input[id*="gelmedi"]:checked + label {
  color: #f87171 !important; /* Soft Red Text */
  background: transparent !important;
  border: none !important;
}

/* Modern Attendance Radio Group & Custom Badges */
.attendance-radio-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.attendance-radio-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #181b22;
  color: #94a3b8;
  user-select: none;
  box-sizing: border-box;
}

.attendance-radio-item input[type="radio"] {
  display: none !important;
}

.attendance-radio-item .radio-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.attendance-radio-item.geldi-active {
  background-color: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(52, 211, 153, 0.4) !important;
  color: #4ade80 !important;
}
.attendance-radio-item.geldi-active .radio-indicator {
  opacity: 1;
}

.attendance-radio-item.gelmedi-active {
  background-color: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(248, 113, 113, 0.4) !important;
  color: #f87171 !important;
}
.attendance-radio-item.gelmedi-active .radio-indicator {
  opacity: 1;
}

/* Custom Date & Time Input Wrapper with FontAwesome White Icons */
.yoklama-datetime-container {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.custom-input-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  background-color: #1d1d1d !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
  padding: 0 36px 0 12px !important;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 40px;
}

.custom-input-wrapper:hover {
  border-color: #ff2a2a !important;
  box-shadow: 0 0 8px rgba(255, 42, 42, 0.4) !important;
}

.clean-date-input,
.clean-time-input {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-family: inherit;
  font-size: 14px;
  outline: none !important;
  cursor: pointer;
  color-scheme: dark !important;
  width: 130px;
}

.clean-time-input {
  width: 85px;
}

/* Hide native browser picker indicator since we use custom FontAwesome icon */
.clean-date-input::-webkit-calendar-picker-indicator,
.clean-time-input::-webkit-calendar-picker-indicator {
  display: none !important;
  -webkit-appearance: none !important;
}

.custom-picker-icon {
  position: absolute;
  right: 12px;
  color: #ffffff !important;
  pointer-events: none;
  font-size: 16px;
  opacity: 0.9;
}