/* theme.css - Custom global styles for EFCM app */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@600&display=swap');

body {
  background-color: #282A36;
  color: #F8F8F2;
  font-family: JetBrains Mono, monospace;
}

.navbar {
  background-color: #282A36;
  color: #F8F8F2;
  box-shadow: 0 2px 8px rgba(40, 42, 54, 0.10);
}

.btn-primary {
  background-color: #BD93F9;
  border-color: #BD93F9;
  color: #282A36;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #8BE9FD;
  border-color: #8BE9FD;
  color: #282A36;
}

/* Cropper modal image tweaks
#modalCropperImage {
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
} */

/* Custom form tweaks */
.form-label {
  color: #F8F8F2;
}

/* Checkbox spacing */
.form-check-inline {
  margin-right: 1.5rem;
}

/* Input field styles */

input,
textarea {
  background-color: #20222C;
  color: #F8F8F2;
  border: none;
  outline: none;
  font-size: 1.2rem;
  border-radius: 4px;
  text-align: center;
  box-shadow: none;
  border: 2px solid #44475A;
}

input::placeholder,
textarea::placeholder {
  color: #6272A4 !important;
  opacity: 0.7;
}

/* Table styles */

#preview {
  display: none !important;
}

td span.form-label {
  white-space: nowrap;
  padding: 24px 24px 12px 24px;
  /* Adjust as needed */
  display: inline;
}


table th,
td {
  align-items: center;
  background-color: #282A36;
  color: #F8F8F2;
  border: none !important;
  border-bottom: none
}

.table-bordered>:not(caption)>* {
  background-color: #282A36 !important;
  color: #F8F8F2 !important;
  border: none !important;
  border-bottom: none
}

.table>:not(caption)>*>* {
  background-color: #282A36 !important;
  color: #F8F8F2 !important;
  border: none !important;
  border-bottom: none
}

.table {
  background-color: #282A36 !important;
  color: #F8F8F2 !important;
  border: none !important;
}

.form-table {
  align-items: center !important;
  background-color: #282A36 !important;
  color: #F8F8F2 !important;
  border: none !important;
}



.btn-save,
.btn-ocr,
.btn-clear {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Save Button */
.btn-save {
  background-color: #20222C;
  color: #BD93F9;
  border: 2px solid #BD93F9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.btn-save:hover {
  border: 2px solid #BD93F9;
  background-color: #BD93F9;
  color: #20222C;
}

.btn-save:active {
  background-color: #BD93F9 !important;
  color: #282A36 !important;
}

/* OCR Button */
.btn-ocr {
  background-color: #20222C;
  color: #BD93F9;
  border: 2px solid #BD93F9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.btn-ocr:hover {
  border: 2px solid #BD93F9;
  background:#BD93F9;
  color: #20222C;
}

.btn-ocr:active {
  background-color: #BD93F9!important;
  color: #282A36 !important;
}

/* Clear Button */
.btn-clear {
  background-color: #20222C;
  color: #BD93F9;
  border: 2px solid #BD93F9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.btn-clear:hover {
  border: 2px solid #BD93F9;
  color: #20222C;
  background:#BD93F9;
}

.btn-clear:active {
  background-color: #BD93F9 !important;
  color: #282A36 !important;
}

.btn-colvis {
  background-color: #20222C !important;
  color: #FF79C6 !important;
  border: 2px solid #20222C !important;
}


.input-missing {
  border: 2px solid #FF5555 !important;
}

#statsForm .form-select {
  border: 2px solid #44475A !important;
  background-color: #20222C;
  color: #F8F8F2 !important;
  box-shadow: none !important;
  text-align: center;
}



#statsForm .form-select.input-missing {
  border-color: #20222C !important;
  background-color: #20222C !important;
}

select:focus {
  outline: none !important;
  box-shadow: none !important;
}

.form-select:focus {
  outline: none !important;
  box-shadow: none !important;
}

.form-select option {
  background-color: #282A36;
  color: #F8F8F2;
}


/* Modal */


.btn-close {
  display: none !important;
}

.cropper-bg {
  background-image: none !important;
  background-color: #282A36 !important;
  /* or any solid color you prefer */
}

.cropper-modal {
  background-color: #282A36;
}

.cropper-view-box {
  outline: 2px solid #FF79C6 !important;
  /* change to your desired color */
  box-shadow: 0 0 0 1px #FF79C6 !important;
  /* for inner shadow effect */
}

.cropper-point {
  background-color: #FF79C6 !important;
  border: 1px solid #FF79C6 !important;
  /* optional contrast */
}

.modal-body {
  background-color: #282A36;
  border: none;

}

.modal-header {
  color: var(--card-accent-5);
  font-size: 1.5rem;
  background-color: #282A36;
  border: none;
}

.modal-footer {
  background-color: #282A36;
  border: none;
}

.modal-content {
  border: 2px solid #6272A4;
}


/* Override DataTables dt-buttons for custom colvis button */
.btn-colvis {
  background: #007bff !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 6px 16px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  outline: none !important;
  transition: background 0.2s;
}

.btn-colvis:hover,
.btn-colvis:focus {
  background: #0056b3 !important;
  color: #fff !important;
}

/* Remove unwanted DataTables button styles from .btn-colvis */
.btn-colvis.dt-button,
.btn-colvis.buttons-collection,
.btn-colvis.buttons-colvis {
  background-color: #20222C !important;
  color: #BD93F9 !important;
  border: 2px solid #44475a !important
}

/* Hide DataTables column visibility dropdown arrow */
.dt-button-down-arrow {
  display: none !important;
}

/* Custom theming for DataTables search input */
.dataTables_wrapper .dataTables_filter input[type="search"] {
  background-color: #20222C !important;
  color: #F8F8F2 !important;
  border: none;
  /*2px solid #44475a !important;*/
  border-radius: 6px !important;
  padding: 8px 16px !important;
  font-size: 1.1rem !important;
  font-family: 'JetBrains Mono', monospace;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);

}

.dataTables_wrapper .dataTables_filter input[type="search"]:focus {
  border-color: #FF79C6 !important;
  outline: none !important;
}

/* Hide only the label text, not the input */
.dataTables_wrapper .dataTables_filter label {
  text-indent: -9999px;
  color: transparent !important;
  font-size: 0 !important;
  margin: 0;
  padding: 0;
  display: inline;
}

.dataTables_wrapper .dataTables_filter input[type="search"] {
  text-indent: 0;
  color: #F8F8F2 !important;
  background-color: #20222C !important;
  border: none;
  border-radius: 6px !important;
  font-size: 1.1rem !important;
  font-family: 'JetBrains Mono', monospace;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  padding: 8px 16px !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  visibility: visible !important;
  position: static !important;
}

/* Custom theming for DataTables pagination navigation buttons */
.dataTables_paginate.paging_simple_numbers {
  background: transparent;
  padding: 0.5rem 0;
  text-align: center;
}

.dataTables_paginate.paging_simple_numbers ul.pagination {
  display: inline-flex;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 6px;
  box-shadow: none;
}

.dataTables_paginate.paging_simple_numbers .paginate_button,
.dataTables_paginate.paging_simple_numbers .paginate_button.page-item,
.dataTables_paginate.paging_simple_numbers .page-item {
  background: #20222C !important;
  color: #BD93F9 !important;
  /* border: 1.5px solid #44475a !important; */
  border-radius: 4px !important;
  margin: 0 2px;
  padding: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.05rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer;
  list-style: none;
}

.dataTables_paginate.paging_simple_numbers .paginate_button a,
.dataTables_paginate.paging_simple_numbers .page-link {
  background: transparent !important;
  color: #F8F8F2 !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 6px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: none !important;
  outline: none !important;
  transition: background 0.2s, color 0.2s;
  display: block;
}

.dataTables_paginate.paging_simple_numbers .paginate_button.current,
.dataTables_paginate.paging_simple_numbers .paginate_button.active,
.dataTables_paginate.paging_simple_numbers .paginate_button.page-item.active,
.dataTables_paginate.paging_simple_numbers .page-item.active,
.dataTables_paginate.paging_simple_numbers .paginate_button:active {
  background: #20222C !important;
  color: #BD93F9 !important;
  border-color: #BD93F9 !important;
}

.dataTables_paginate.paging_simple_numbers .paginate_button.current a,
.dataTables_paginate.paging_simple_numbers .paginate_button.active a,
.dataTables_paginate.paging_simple_numbers .page-item.active .page-link {
  background: #20222C !important;
  color: #BD93F9 !important;
  border-color: #BD93F9 !important;
}

.dataTables_paginate.paging_simple_numbers .paginate_button:hover,
.dataTables_paginate.paging_simple_numbers .paginate_button.page-item:hover,
.dataTables_paginate.paging_simple_numbers .page-item:hover,
.dataTables_paginate.paging_simple_numbers .page-link:hover {
  background: #44475a !important;
  color: #fff !important;
  border-color: #BD93F9 !important;
}

.dataTables_paginate.paging_simple_numbers .paginate_button.disabled,
.dataTables_paginate.paging_simple_numbers .paginate_button.page-item.disabled,
.dataTables_paginate.paging_simple_numbers .page-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #282A36 !important;
  color: #888 !important;
  border-color: #44475a !important;
}

.dataTables_paginate.paging_simple_numbers .paginate_button.disabled a,
.dataTables_paginate.paging_simple_numbers .page-item.disabled .page-link {
  color: #888 !important;
  pointer-events: none;
  background: #282A36 !important;
}

/* Custom theming for DataTables info bar */
.dataTables_info {
  background: transparent;
  color: #F8F8F2 !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.08rem;
  font-weight: 500;
  padding: 0.5rem 0 0.5rem 0.5rem;
  border-radius: 4px;
  letter-spacing: 0.01em;
  text-align: left;
}

/* Custom theming for DataTables length selector (entries per page) */
.dataTables_length {
  background: transparent;
  color: #F8F8F2 !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.08rem;
  font-weight: 500;
  
  border-radius: 4px;
  letter-spacing: 0.01em;
  text-align: left;
  border: 2px solid #44475a !important;
  border-radius:6px;
}

.dataTables_length label {
  color: #FF79C6 !important;
  font-weight: 500;
  font-size: 1.08rem;
  margin-right: 0.5em;
}

.dataTables_length select {
  background-color: #20222C !important;
  color: #F8F8F2 !important;
  border: none;
  border-radius: 4px !important;
  padding: 4px 12px !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.05rem;
  margin-left: 0.5em;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s;
}

.dataTables_length select:focus {
  border-color: #F8F8F2 !important;
}

/* DataTables Portuguese language tweaks (if needed, but most is handled by JS config) */
.dataTables_length label:after {
  content: '';
}

/* Skeleton loader for DataTable */
#datatable-skeleton {
  width: 100%;
  margin: 1.5rem 0;
}

.skeleton-row {
  display: flex;
  margin-bottom: 10px;
}

.skeleton-cell {
  flex: 1;
  height: 32px;
  margin-right: 8px;
  background: linear-gradient(90deg, #282a36 25%, #44475a 50%, #282a36 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.2s infinite linear;
  border-radius: 4px;
}

.skeleton-row .skeleton-cell:last-child {
  margin-right: 0;
}

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

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

/* DataTables ColVis modal custom styling */
.dt-button-collection.fixed.two-column {
  background: #20222C !important;
  border: 2px solid #44475a !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(40, 42, 54, 0.85) !important;
  padding: 1.2rem 1.5rem 1.2rem 1.5rem !important;
  min-width: 340px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto !important;  
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.dt-button-collection.fixed.two-column [role="menu"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  width: 100%;
}

.dt-button-collection.fixed.two-column .dt-button {
  flex: 1 1 45%;
  min-width: 120px;
  box-sizing: border-box;
  background-color: #20222C !important;
  color: #F8F8F2 !important;
  border: 2px solid #20222C !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.05rem;
  border-radius: 4px !important;
  padding: 8px 16px !important;
  font-weight: 500;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.dt-button-collection.fixed.two-column .dt-button:hover,
.dt-button-collection.fixed.two-column .dt-button:focus {
  background-color: #44475a !important;
  color: #F8F8F2 !important;
  border: 2px solid #F8F8F2 !important;
}

.dt-button-collection.fixed.two-column .dt-button:active {
  background-color: #F8F8F2 !important;
  color: #282A36 !important;
  border: 2px solid #F8F8F2 !important;
}

/* DataTables bottom bar: align pagination and info in one line */
.dataTables_wrapper .bottom {
  display: block;
  margin-top: 1.2rem;
}

.dataTables_wrapper .bottom .dataTables_info {
  float: left;
  margin: 0;
  padding: 0;
  text-align: left;
}

.dataTables_wrapper .bottom .dataTables_paginate {
  float: right;
  margin: 0;
  padding: 0;
}

@media (max-width: 900px) {

  .dataTables_wrapper .bottom .dataTables_info,
  .dataTables_wrapper .bottom .dataTables_paginate {
    float: none;
    display: block;
    text-align: left;
    margin-bottom: 0.5rem;
  }
}

/* DataTables top bar: align entries selector and search in one line */
.dataTables_wrapper .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}

.dataTables_wrapper .top .dataTables_length {
  order: 1;
  margin: 0;
  padding: 0;
}

.dataTables_wrapper .top .dataTables_filter {
  order: 2;
  margin: 0;
  padding: 0;
}

.table.dataTable {
  margin: 0px 0px 0px 0px !important;
}

/* Remove custom .dataTables-wrapper-alert flexbox layout */
.dataTables-wrapper-alert {
  display: none !important;
}

.datatable-controls-top,
.datatable-controls-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.datatable-controls-top>*,
.datatable-controls-bottom>* {
  margin-bottom: 0 !important;
}

@media (max-width: 900px) {

  .datatable-controls-top,
  .datatable-controls-bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
}

/* Dracula pill style */
.dracula-pill {
  color: #f8f8f2 !important;
  background: #20222c !important;
  border-radius: 50px;
  padding: 0;
  margin: 0;
  transition: border 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
  border: none !important;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
  min-width: 40px;
  min-height: 40px;
}

.dracula-pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  width: 100%;
  height: 100%;
  transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0;
  padding: 0;
}

.dracula-pill-text {
  display: inline-block;
  margin-left: 0;
  padding: 0;
  white-space: nowrap;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
}

.dracula-pill:hover,
.dracula-pill:focus,
.dracula-pill.active {
  padding: 0.5rem 1.2rem;
  margin: 0 0.25rem;
}

.dracula-pill:hover .dracula-pill-text,
.dracula-pill:focus .dracula-pill-text,
.dracula-pill.active .dracula-pill-text {
  margin-left: 0.5rem;
  opacity: 1;
  max-width: 200px;
  overflow: visible;
  visibility: visible;
}

/* Accent color classes for each nav button - manual colors, no variables */
.dracula-pill-dashboard {
  border: none !important;
  color: #8be9fd !important;
  background: #20222c !important;
  transition: border 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.dracula-pill-dashboard .dracula-pill-icon {
  color: #8be9fd !important;
  transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.dracula-pill-dashboard:hover,
.dracula-pill-dashboard:focus,
.dracula-pill-dashboard.active {
  background: #8be9fd !important;
  color: #282a36 !important;
  border: none !important;
}

.dracula-pill-dashboard:hover .dracula-pill-icon,
.dracula-pill-dashboard:focus .dracula-pill-icon,
.dracula-pill-dashboard.active .dracula-pill-icon {
  color: #282a36 !important;
}

.dracula-pill-results {
  border: none !important;
  color: #50fa7b !important;
  background: #20222c !important;
  transition: border 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.dracula-pill-results .dracula-pill-icon {
  color: #50fa7b !important;
  transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.dracula-pill-results:hover,
.dracula-pill-results:focus,
.dracula-pill-results.active {
  background: #50fa7b !important;
  color: #282a36 !important;
  border: none !important;
}

.dracula-pill-results:hover .dracula-pill-icon,
.dracula-pill-results:focus .dracula-pill-icon,
.dracula-pill-results.active .dracula-pill-icon {
  color: #282a36 !important;
}

.dracula-pill-newgame {
  border: none !important;
  color: #bd93f9 !important;
  background: #20222c !important;
  transition: border 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.dracula-pill-newgame .dracula-pill-icon {
  color: #bd93f9 !important;
  transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.dracula-pill-newgame:hover,
.dracula-pill-newgame:focus,
.dracula-pill-newgame.active {
  background: #bd93f9 !important;
  color: #282a36 !important;
  border: none !important;
}

.dracula-pill-newgame:hover .dracula-pill-icon,
.dracula-pill-newgame:focus .dracula-pill-icon,
.dracula-pill-newgame.active .dracula-pill-icon {
  color: #282a36 !important;
}

/* --- Dracula pill ranking and history icon colors (fixed hover backgrounds) --- */
.dracula-pill-ranking {
  border: none !important;
  color: #FFD600 !important;
  background: #20222c !important;
  transition: border 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.dracula-pill-ranking .dracula-pill-icon {
  color: #FFD600 !important;
  transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.dracula-pill-ranking:hover,
.dracula-pill-ranking:focus,
.dracula-pill-ranking.active {
  background: #FFD600 !important;
  color: #282a36 !important;
  border: none !important;
}

.dracula-pill-ranking:hover .dracula-pill-icon,
.dracula-pill-ranking:focus .dracula-pill-icon,
.dracula-pill-ranking.active .dracula-pill-icon {
  color: #282a36 !important;
}

.dracula-pill-profile {
  border: none !important;
  color: #FF79C6 !important;
  background: #20222c !important;
  transition: border 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.dracula-pill-profile .dracula-pill-icon {
  color: #FF79C6 !important;
  transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.dracula-pill-profile:hover,
.dracula-pill-profile:focus,
.dracula-pill-profile.active {
  background: #FF79C6 !important;
  color: #282a36 !important;
  border: none !important;
}

.dracula-pill-profile:hover .dracula-pill-icon,
.dracula-pill-profile:focus .dracula-pill-icon,
.dracula-pill-profile.active .dracula-pill-icon {
  color: #282a36 !important;
}

.wrapper-newgame{
  background: #20222C;
  border-radius: 6px;
}

.new-game-table th, td{
  background: #20222C;
}

/* Remove all --dracula-accent logic and variable-based hover/active rules */
/* .dracula-pill:hover, .dracula-pill:focus, .dracula-pill.active {
  color: var(--dracula-accent) !important;
  border: 2px solid var(--dracula-accent) !important;
}
.dracula-pill:hover .dracula-pill-icon,
.dracula-pill:focus .dracula-pill-icon,
.dracula-pill.active .dracula-pill-icon {
  color: var(--dracula-accent) !important;
} */

/* SweetAlert2 Dracula Theme + Button Styles */
.swal2-popup {
  background: #282A36 !important;
  color: #F8F8F2 !important;
}

.swal2-title,
.swal2-html-container {
  color: #F8F8F2 !important;
}

.swal2-confirm {
  background-color: #20222C !important;
  color: #50FA7B !important;
  border: 2px solid #20222C !important;
}

.swal2-confirm:hover,
.swal2-confirm:focus {
  border: 2px solid #50FA7B !important;
  color: #50FA7B !important;
}

.swal2-cancel {
  background-color: #20222C !important;
  color: #FF5555 !important;
  border: 2px solid #20222C !important;
}

.swal2-cancel:hover,
.swal2-cancel:focus {
  border: 2px solid #FF5555 !important;
  color: #FF5555 !important;
}

/* --- Dashboard Card Grid & Card Styles --- */

.pending-dashboard {
  background-color: #20222C;
  border-radius: 10px;
}

.pending-matches-cards {
  /* row g-4 is Bootstrap, but ensure spacing for custom grid */
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 0;
}

.dashboard-match-card {
  background: #282A36;
  border-radius: 14px;
  /* border: 2px solid #6272A4; */
  color: #F8F8F2;
  box-shadow: 0 2px 8px rgba(40, 42, 54, 0.10);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

.dashboard-match-card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  min-width: 0;
  height: 100%;
}

.dashboard-match-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  min-width: 0;
}


.dashboard-player-name {
  font-weight: bold;
  font-size: 1.1rem;
  color: #F8F8F2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.dashboard-metrics-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2em;
  min-width: 0;
  width: 100%;
  justify-content: space-between;
}

.dashboard-badge-goals,
.dashboard-badge-yellow,
.dashboard-badge-red {
  font-size: 1rem;
  letter-spacing: 1px;
  padding: 0.5em 1em;
  background: #20222C;
  border-radius: 8px;
  min-width: 70px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  border: none;
}

.dashboard-badge-goals .fa-futbol {
  color: #50fa7b;
}

.dashboard-badge-yellow .fa-square {
  color: #F1FA8C;
}

.dashboard-badge-red .fa-square {
  color: #FF5555;
}

.dashboard-date {
  font-size: 0.95rem;
  color: #6272A4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-card-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 0.5rem;
  gap: 0.5em;
}

.dashboard-card-actions .btn-link {
  padding: 0;
  margin-right: 0.5em;
  border: none;
  background: none;
  box-shadow: none;
}

.dashboard-card-actions .btn-link:last-child {
  margin-right: 0;
}

.dashboard-card-actions .dashboard-action-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #20222C;
  width: 38px;
  height: 38px;
  transition: background 0.2s;
  margin-right: 0.2em;
}

.dashboard-card-actions .dashboard-action-bubble:last-child {
  margin-right: 0;
}

.dashboard-card-actions .btn-link:focus .dashboard-action-bubble,
.dashboard-card-actions .btn-link:hover .dashboard-action-bubble {
  background: #F1FA8C;
}

.dashboard-card-actions .btn-link:focus .dashboard-action-bubble .fa-magnifying-glass,
.dashboard-card-actions .btn-link:hover .dashboard-action-bubble .fa-magnifying-glass {
  color: #282A36 !important;
}

.dashboard-card-actions .dashboard-btn-approve:focus .dashboard-action-bubble,
.dashboard-card-actions .dashboard-btn-approve:hover .dashboard-action-bubble {
  background: #50FA7B;
}

.dashboard-card-actions .dashboard-btn-approve:focus .dashboard-action-bubble .fa-check,
.dashboard-card-actions .dashboard-btn-approve:hover .dashboard-action-bubble .fa-check {
  color: #282A36 !important;
}

.dashboard-card-actions .dashboard-btn-reject:focus .dashboard-action-bubble,
.dashboard-card-actions .dashboard-btn-reject:hover .dashboard-action-bubble {
  background: #FF5555;
}

.dashboard-card-actions .dashboard-btn-reject:focus .dashboard-action-bubble .fa-xmark,
.dashboard-card-actions .dashboard-btn-reject:hover .dashboard-action-bubble .fa-xmark {
  color: #282A36 !important;
}

.efcm-modal-players-row {
  color: #6272A4;
}


#matchInfoModal .btn-close:hover {
  opacity: 1;
}

#matchInfoModal .modal-body {
  background: #282A36;
  padding: 2.5rem 2rem 2rem 2rem;
}




/* --- Simplified Dracula theme for match filter switches --- */

/* Dracula theme for DataTables */
.dataTables_wrapper {
  background: #282A36 !important;
  color: #F8F8F2 !important;
}

.dataTable {
  background: #282A36 !important;
  color: #F8F8F2 !important;
  border-radius: 10px;
  border: none !important;
  box-shadow: 0 2px 8px rgba(40, 42, 54, 0.10);
}

.dataTable th,
.dataTable td {
  background: #282A36 !important;
  color: #F8F8F2 !important;
  border: none !important;
  vertical-align: middle;
}

.dataTable thead th {
  background: #20222C !important;
  color: #BD93F9 !important;
  font-weight: 700;
  border-bottom: 2px solid #44475a !important;
  padding-top: 0.2rem !important;
  padding-bottom: 0.2rem !important;
}

.dataTable tbody tr {
  transition: background 0.2s;
}

.dataTable tbody tr:hover {
  background: #44475a !important;
}

.dataTable tfoot th {
  background: #20222C !important;
  color: #BD93F9 !important;
  border-top: 2px solid #44475a !important;
}

.dataTable .sorting:after,
.dataTable .sorting_asc:after,
.dataTable .sorting_desc:after {
  color: #BD93F9 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: #20222C !important;
  color: #BD93F9 !important;
  border-radius: 4px !important;
  border: none !important;
  margin: 0 2px;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.active {
  background: #BD93F9 !important;
  color: #282A36 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #BD93F9 !important;
  color: #282A36 !important;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  color: #BD93F9 !important;
  font-weight: 500;
}

.dataTables_wrapper .dataTables_filter input[type="search"] {
  background: #20222C !important;
  color: #F8F8F2 !important;
  border: none !important;
  border-radius: 6px;
  padding: 8px 16px !important;
  font-size: 1.1rem !important;
  font-family: 'JetBrains Mono', monospace;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

.dataTables_wrapper .dataTables_filter input[type="search"]:focus {
  border: 2px solid #BD93F9 !important;
  outline: none !important;
}

.dataTables_info {
  color: #F8F8F2 !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.08rem;
}

.dataTables_length select {
  background-color: #20222C !important;
  color: #BD93F9 !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.05rem;
}

.dataTables_wrapper .dataTables_empty {
  color: #FF5555 !important;
  background: #282A36 !important;
}

#pending-matches-count {
  background-color: #bd93f9 !important;
  /* Dracula purple */
  color: #282a36 !important;
}

/* Dashboard action icon colors */
.dashboard-btn-view .fa-magnifying-glass {
  color: #f1fa8c !important;
}

.dashboard-btn-approve .fa-check {
  color: #50fa7b !important;
}

.dashboard-btn-reject .fa-xmark {
  color: #ff5555 !important;
}


.alert-dracula-warning {
  border: 2px solid #F1FA8C !important;
  background-color: #282A36 !important;
  color: #F1FA8C;
}

/* Dracula Admin Metrics Tab Styles */
.dracula-card {
  background-color: #282A36;
  color: #F8F8F2;
  border: 1px solid #44475a;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(40, 42, 54, 0.15);
  z-index: 1;
}

.dracula-card:hover,
.dracula-card:focus,
.dracula-card:active {
  z-index: 99 !important;
}

.dracula-card-header {
  background-color: #44475a;
  color: #F8F8F2;
  border-bottom: 1px solid #44475a;
  font-weight: bold;
  font-size: 1.2rem;
}

.dracula-card-body {
  background-color: #282A36;
  color: #F8F8F2;
}

.dracula-form-label {
  color: #8BE9FD;
  font-weight: 600;
}

.dracula-input {
  background-color: #20222C;
  color: #F8F8F2;
  border: 1px solid #44475a;
}

.dracula-input:focus {
  border-color: #BD93F9;
  box-shadow: 0 0 0 0.2rem rgba(189, 147, 249, 0.25);
}

.dracula-slider {
  accent-color: #BD93F9;
  background: #44475a;
  height: 4px;
}

.dracula-metric-row {
  background: transparent;
  border-bottom: 1px solid #44475a;
  padding-bottom: 8px;
}

.dracula-metric-value {
  color: #50FA7B;
  font-weight: bold;
  font-size: 1.1rem;
}

.dracula-metric-payout {
  color: #F1FA8C;
  font-weight: bold;
  font-size: 1.1rem;
}

.dracula-metrics-total {
  color: #FF79C6;
  font-weight: bold;
  font-size: 1.1rem;
}

.dracula-btn {
  background-color: #BD93F9;
  border-color: #BD93F9;
  color: #282A36;
  font-weight: bold;
}

.dracula-btn:disabled {
  background-color: #44475a;
  color: #6272A4;
  border-color: #44475a;
}

/* Dracula Tabs */
.nav-tabs .nav-link {
  background-color: #282A36;
  color: #F8F8F2;
  border: 1px solid #44475a;
  border-bottom: none;
  font-weight: 600;
}

.nav-tabs .nav-link.active {
  background-color: #44475a;
  color: #BD93F9;
  border-bottom: 2px solid #BD93F6;
}

.nav-tabs .nav-link:hover {
  background-color: #44475a;
  color: #BD93F9;
  border-bottom: 2px solid #BD93F6;
}


/* New dashboard layout adjustments 
@media (min-width: 1200px) {
  .dashboard-match-card {
    flex-direction: row;
    justify-content: space-between;
  }

  .dashboard-player-name {
    font-size: 1.2rem;
  }
  .dashboard-metrics-row {
    gap: 0.5em;
  }
  .dashboard-badge-goals,
  .dashboard-badge-yellow,
  .dashboard-badge-red {
    padding: 0.4em 0.8em;
    font-size: 0.9rem;
  }
  .dashboard-date {
    font-size: 1rem;
  }
  .dashboard-card-actions {
    margin-top: 1rem;
  }
}
*/

/* Adjustments for smaller screens
@media (max-width: 767.98px) {
  .dashboard-match-card {
    flex-direction: column;
  }
  .dashboard-match-card-body {
    padding: 1rem;
  }
  .dashboard-player-name {
    font-size: 1rem;
  }
  .dashboard-metrics-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .dashboard-badge-goals,
  .dashboard-badge-yellow,
  .dashboard-badge-red {
    width: 100%;
    justify-content: center;
  }
  .dashboard-date {
    font-size: 0.9rem;
  }
  .dashboard-card-actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: 0.5rem;
  }
  .dashboard-card-actions .btn-link {
    width: 100%;
    text-align: left;
  }
}

*/
/* Hide the original title in the match info modal, use the new H1 title */


/* New H1 title style in match info modal */
#matchInfoModal h1 {
  color: #8be9fd;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* Center the close button in the match info modal */
#matchInfoModal .btn-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  filter: invert(1) grayscale(1);
  opacity: 0.8;
  transition: opacity 0.2s;
}

#matchInfoModal .btn-close:hover {
  opacity: 1;
}

/* Match info modal body adjustments */
#matchInfoModal .modal-body {
  background: #282A36;
  padding: 2.5rem 2rem;
}

/* Match info modal footer adjustments */
#matchInfoModal .modal-footer {
  background: #282A36;
  padding: 1.5rem 2rem;
}

/* --- Ranking Card Grid & Card Styles --- */
.ranking-card {
  background: #282A36;
  color: #F8F8F2;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(40, 42, 54, 0.10);
  padding: 1rem 1.2rem;
  min-width: 220px;
  max-width: 340px;
  margin-bottom: 0.5rem;
  border: 2px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ranking-card .badge {
  font-size: 0.95em;
  margin-right: 0.25em;
}

.ranking-card .bg-dark {
  background: #44475a !important;
  color: #f8f8f2 !important;
}

.ranking-card .bg-warning {
  background: #f1fa8c !important;
  color: #282a36 !important;
}

.ranking-card .text-dark {
  color: #282a36 !important;
}

.ranking-card .text-info {
  color: #8be9fd !important;
}

.ranking-card .rounded-circle {
  border: 2px solid #44475a;
}

.ranking-card .fw-bold {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}

.ranking-card .card-body {
  padding: 0.8rem 0.5rem 0.5rem 0.5rem;
}

.isotope-grid {
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.isotope-item {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin-bottom: 1rem;
  width: 100%;
}

@media (min-width: 576px) {
  .isotope-item {
    width: 50%;
  }
}

@media (min-width: 992px) {
  .isotope-item {
    width: 33.3333%;
  }
}

/* Leaderboard styles */
#top3-leaderboard .dracula-card {
  background: #44475a;
  color: #f8f8f2;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(40, 42, 54, 0.10);
}

#top3-leaderboard h5 {
  color: #f1fa8c;
  font-weight: 600;
}

#top3-leaderboard .fa-crown {
  font-size: 1.2em;
  vertical-align: middle;
}

#top3-leaderboard .fw-bold {
  color: #f1fa8c;
}

#top3-leaderboard .badge {
  background: #282a36;
  color: #f8f8f2;
  font-size: 1em;
}

/* Highlight 1st place card */
.ranking-card.first-place {
  border-color: #f1fa8c;
  box-shadow: 0 0 0 2px #f1fa8c33;
}

/* Metric filter group */
#metric-filters .btn {
  background: #44475a;
  color: #f8f8f2;
  border: none;
  margin-right: 0.2em;
  transition: background 0.2s, color 0.2s;
}

#metric-filters .btn.active,
#metric-filters .btn:focus {
  background: #f1fa8c;
  color: #282a36;
}

#metric-filters .btn:hover {
  background: #6272a4;
  color: #f8f8f2;
}



/* Search box */
#ranking-search {
  background: #282a36;
  color: #f8f8f2;
  border: 1px solid #44475a;
  max-width: 250px;
}

#ranking-search:focus {
  border-color: #f1fa8c;
  background: #44475a;
  color: #f8f8f2;
}

/* Ranking search box */
#ranking-search {
  max-width: 250px;
}

/* Avatar image placeholder */
.ranking-avatar,
.avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.avatar-placeholder {
  background: #44475a;
}


/* --- Ranking Metric Search & Toggle Styles --- */
#metric-search {
  background-color: #20222C;
  color: #F8F8F2;
  border: none;
  outline: none;
  font-size: 1.2rem;
  border-radius: 4px;
  text-align: center;
  box-shadow: none;
  padding: 0.5rem 1rem;
  margin-bottom: 0.5rem;
}

#metric-search::placeholder {
  color: #6272A4 !important;
  opacity: 0.7;
}

#metric-toggle-group {
  background: #20222C;
}

#metric-toggle-group .btn {
  background: #20222C;
  color: #BD93F9;
  border: 2px solid #BD93F9;
  margin: 0 0.25rem 0.5rem 0;
  font-weight: 600;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#metric-toggle-group .btn.active,
#metric-toggle-group .btn:active {
  background: #BD93F9;
  color: #282A36;
  border-color: #BD93F9;
}



/*metch toggle*/
#match-toggle-group {
  background: #20222C;
  padding: 4px;
}

#match-toggle-group .btn {
  background: #20222C;
  color: #BD93F9;
  border: 2px solid #BD93F9;
  margin: 0.25rem;  
  font-weight: 600;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#match-toggle-group .btn.active,
#metric-toggle-group .btn:active {
  background: #BD93F9;
  color: #282A36;
  border-color: #BD93F9;
}

/*metch toggle end*/

/* Ensure toggled (active/checked) filter buttons in match-toggle-group and match-filters are styled with a lighter color */
#match-toggle-group .btn,
#match-filters .btn {
  /* base styles can be added here if needed */
}

#match-toggle-group .btn.active,
#match-toggle-group .btn:active,
#match-toggle-group .btn:focus,
#match-toggle-group .btn-check:checked+.btn,
#match-filters .btn.active,
#match-filters .btn:active,
#match-filters .btn:focus,
#match-filters .btn-check:checked+.btn {
  background: #BD93F9;
  color: #282A36;
  border-color: #BD93F9;
}


/* Responsive tweaks */
@media (max-width: 767.98px) {
  .isotope-item {
    width: 100%;
  }

  #top3-leaderboard .dracula-card {
    font-size: 0.95em;
  }
}

/* Winrate destaque card */
.winrate-card {
  background: #282A36;
  /* border: 2.5px solid #FFD600;
  box-shadow: 0 4px 24px 0 #ffd60033; */
  color: #F8F8F2;
  border-radius: 16px;
  margin-bottom: 2rem;
  position: relative;
  padding: 1.2rem 1rem 1rem 1rem;
  font-size: 1.05em;
  transition: transform 0.25s cubic-bezier(.25, .8, .25, 1), box-shadow 0.25s cubic-bezier(.25, .8, .25, 1);
  will-change: transform, box-shadow;
  perspective: 800px;
}

/* Winrate card avatar border: always gold, with gold glow only on hover */
.winrate-card .avatar-placeholder img,
.winrate-card .avatar-placeholder .dracula-avatar-fallback {
  border: 2.5px solid #FFD600 !important;
  box-shadow: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.winrate-card:hover .avatar-placeholder img,
.winrate-card.hovered .avatar-placeholder img,
.winrate-card:hover .avatar-placeholder .dracula-avatar-fallback,
.winrate-card.hovered .avatar-placeholder .dracula-avatar-fallback {
  box-shadow: 0 0 0 2px #FFD60099;
  border: 2.5px solid #FFD600 !important;
  box-shadow: 0 4px 24px 0 #ffd60033;
}

/* Winrate card avatar border: always gold, but glow only on hover; accent border on other cards */
.dracula-card[data-accent]:hover .avatar-placeholder img,
.dracula-card[data-accent].hovered .avatar-placeholder img,
.dracula-card[data-accent]:hover .avatar-placeholder .dracula-avatar-fallback,
.dracula-card[data-accent].hovered .avatar-placeholder .dracula-avatar-fallback {
  border: 2.5px solid var(--card-accent-hover, #FF79C6) !important;
  box-shadow: 0 0 0 2px var(--card-accent-hover-shadow, #FF79C655);
}

.dracula-card .avatar-placeholder img,
.dracula-avatar-fallback {
  border: 2.5px solid #44475a;
  transition: border-color 0.3s, box-shadow 0.3s;
}

/* --- Card Text Pop Effect --- */
.dracula-card,
.winrate-card {
  /* Ensure 3D context for children */
  transform-style: preserve-3d;
}

.dracula-card .card-pop,
.winrate-card .card-pop {
  transition: transform 0.25s cubic-bezier(.25, .8, .25, 1), text-shadow 0.25s cubic-bezier(.25, .8, .25, 1);
  will-change: transform, text-shadow;
}

.dracula-card.tilt-active .card-pop,
.winrate-card.tilt-active .card-pop {
  /* This will be set dynamically by JS for the pop effect */
  transform: translateZ(32px) scale(1.06);
  text-shadow: 0 6px 24px #0008, 0 0 8px #ffd60099;
}

/* Ensure tilt.js glare overlay matches card border radius */
.js-tilt .js-tilt-glare {
  border-radius: 9px !important;
  overflow: hidden;
  pointer-events: none;
}

/* Modern Scrollbar Styles */
html,
body,
.container,
.dracula-card,
.winrate-card,
.isotope-grid,
.modal,
textarea,
input,
select,
pre,
code,
.dropdown-menu,
.table,
.list-unstyled,
.dropdown-content {
  scrollbar-width: thin;
  scrollbar-color: #BD93F9 #282A36;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: #282A36;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #BD93F9 40%, #8BE9FD 100%);
  border-radius: 8px;
  min-height: 40px;
  box-shadow: 0 2px 8px #0002;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #FFD600 40%, #BD93F9 100%);
}

::-webkit-scrollbar-corner {
  background: #282A36;
}

/* Admin pill style */
.dracula-pill-admin .dracula-pill-icon {
  color: #FF5555 !important;
}

.dracula-pill-admin:hover,
.dracula-pill-admin:focus,
.dracula-pill-admin.active {
  background: #FF5555 !important;
  color: #282A36 !important;
}

.dracula-pill-admin:hover .dracula-pill-icon,
.dracula-pill-admin:focus .dracula-pill-icon,
.dracula-pill-admin.active .dracula-pill-icon {
  color: #282A36 !important;
}

/* Ranking cards section background */
.ranking-cards-bg {
  background: #20222C;
  border-radius: 18px;
  padding: 2.5rem 1.5rem 2rem 1.5rem;
  margin-bottom: 2.5rem;
  transition: box-shadow 0.25s;
}

@media (max-width: 767.98px) {
  .ranking-cards-bg {
    padding: 1.2rem 0.5rem 1rem 0.5rem;
    border-radius: 10px;
  }
}

/* Accent color palette for card hover */
:root {
  --card-accent-1: #FF79C6;
  --card-accent-2: #8BE9FD;
  --card-accent-3: #50FA7B;
  --card-accent-4: #F1FA8C;
  --card-accent-5: #BD93F9;
}

.dracula-card[data-accent] {
  transition: border-color 0.3s, box-shadow 0.3s;
}

.dracula-card[data-accent]:hover,
.dracula-card[data-accent].hovered {
  border-color: var(--card-accent-hover, #FF79C6) !important;
  box-shadow: 0 4px 32px 0 var(--card-accent-hover-shadow, #FF79C655);
}

.dracula-card[data-accent]:hover .card-pop,
.dracula-card[data-accent].hovered .card-pop,
.dracula-card[data-accent]:hover h4,
.dracula-card[data-accent].hovered h4 {
  color: var(--card-accent-hover, #FF79C6) !important;
  text-shadow: 0 2px 12px var(--card-accent-hover-shadow, #FF79C655);
}

/* Ensure medal colors are always correct, even on hover */
.dracula-card .fa-medal,
.dracula-card .fa-medal.text-warning,
.dracula-card .fa-medal.text-secondary {
  color: #FFD700 !important;
  /* gold by default */
}

.dracula-card .fa-medal.text-secondary {
  color: #C0C0C0 !important;
  /* silver */
}

.dracula-card .fa-medal.bronze-medal {
  color: #cd7f32 !important;
  /* bronze */
}

/* Prevent accent hover from affecting medal color */
.dracula-card[data-accent]:hover .fa-medal,
.dracula-card[data-accent].hovered .fa-medal {
  color: inherit;
}

.dracula-card[data-accent]:hover .fa-medal.text-warning,
.dracula-card[data-accent].hovered .fa-medal.text-warning {
  color: #FFD700 !important;
}

.dracula-card[data-accent]:hover .fa-medal.text-secondary,
.dracula-card[data-accent].hovered .fa-medal.text-secondary {
  color: #C0C0C0 !important;
}

.dracula-card[data-accent]:hover .fa-medal.bronze-medal,
.dracula-card[data-accent].hovered .fa-medal.bronze-medal {
  color: #cd7f32 !important;
}

/* Dracula fallback avatar for player with no image */
.dracula-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #282A36;
  color: #6272A4;
  font-size: 1.5rem;
  border: 2px solid #44475a;
  box-shadow: 0 2px 8px #0002;
}

.dracula-avatar-fallback .fa-user {
  color: #6272A4;
}

/* Accent border for player avatars on card hover */
.dracula-card[data-accent]:hover .avatar-placeholder img,
.dracula-card[data-accent].hovered .avatar-placeholder img {
  border: 2.5px solid var(--card-accent-hover, #FF79C6) !important;
  box-shadow: 0 0 0 2px var(--card-accent-hover-shadow, #FF79C655);
}

/* Accent border for fallback avatar on card hover */
.dracula-card[data-accent]:hover .avatar-placeholder .dracula-avatar-fallback,
.dracula-card[data-accent].hovered .avatar-placeholder .dracula-avatar-fallback {
  border: 2.5px solid var(--card-accent-hover, #FF79C6) !important;
  box-shadow: 0 0 0 2px var(--card-accent-hover-shadow, #FF79C655);
}

/* Revert winrate trophy color override to allow inline or default coloring */
.winrate-card .winrate-medal-gold,
.winrate-card .winrate-medal-silver,
.winrate-card .winrate-medal-bronze,
.winrate-card:hover .winrate-medal-gold,
.winrate-card.hovered .winrate-medal-gold,
.winrate-card:hover .winrate-medal-silver,
.winrate-card.hovered .winrate-medal-silver,
.winrate-card:hover .winrate-medal-bronze,
.winrate-card.hovered .winrate-medal-bronze {
  color: unset !important;
}

/* Winrate card trophy colors for 1st, 2nd, 3rd place (no inline, always correct) */
.winrate-card .winrate-medal-gold {
  color: #FFD700 !important;
}

.winrate-card .winrate-medal-silver {
  color: #C0C0C0 !important;
}

.winrate-card .winrate-medal-bronze {
  color: #cd7f32 !important;
}

/* Winrate card trophy hover effect: add golden glow on hover */
.winrate-card:hover .winrate-medal-gold,
.winrate-card.hovered .winrate-medal-gold {
  text-shadow: 0 0 8px #FFD700cc, 0 0 16px #FFD70099;
}

.winrate-card:hover .winrate-medal-silver,
.winrate-card.hovered .winrate-medal-silver {
  text-shadow: 0 0 8px #C0C0C0cc, 0 0 16px #C0C0C099;
}

.winrate-card:hover .winrate-medal-bronze,
.winrate-card.hovered .winrate-medal-bronze {
  text-shadow: 0 0 8px #cd7f32cc, 0 0 16px #cd7f3299;
}

/* Metric weight badge for metric cards */
.metric-weight-badge {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 2;
  padding: 0.35em 0.85em;
  font-size: 1.05em;
  font-weight: 700;
  border-radius: 1.2em;
  background: var(--card-accent-hover, #FF79C6);
  color: #282A36;
  box-shadow: 0 2px 12px var(--card-accent-hover-shadow, #FF79C655);
  opacity: 0;
  transform: translateY(-12px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1), transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s, color 0.25s;
  text-shadow: 0 1px 2px #fff8, 0 0 1px #0002;
}

.dracula-card[data-accent]:hover .metric-weight-badge,
.dracula-card[data-accent].hovered .metric-weight-badge {
  opacity: 1;
  transform: translateY(0) scale(1.08);
  background: var(--card-accent-hover, #FF79C6);
  color: #282A36 !important;
  /* text-shadow: 0 1px 2px #fff8, 0 0 1px #0002; */
}

/* Metric weight badge: smaller size for better fit */
.metric-weight-badge {
  /* padding: 0.22em 0.65em; */
  padding: 0.09em 0.5em 0.09em 0.5em !important;
  margin-right: 0.5em;
  margin-top: 0.2em;
  font-size: 0.98em;
  color: #282a36 !important;
}

/* On card hover, align the card title left to make space for the badge */
.dracula-card[data-accent]:hover h4,
.dracula-card[data-accent].hovered h4 {
  text-align: left !important;
  padding: 0.09em 0.5em 0.09em 0.5em !important;
  color: #20222C !important;
  font-size: 1.2em !important;
  margin-left: 0.9em;
}

/* Smooth transition for card title alignment and padding */
.dracula-card[data-accent] h4 {
  /* transition: text-align 0.32s cubic-bezier(0.4,0,0.2,1), padding 0.32s cubic-bezier(0.4,0,0.2,1), margin 0.32s cubic-bezier(0.4,0,0.2,1); */
  /* margin-left: 0.5em; */
}

.winrate-card:hover,
.winrate-card.hovered,
.winrate-card:focus,
.winrate-card:active {
  box-shadow: 0 4px 32px 0 #FFD70099, 0 0 0 3px #FFD70055;
  border-color: #FFD700 !important;
}

/* Dracula theme classes for login and registration UI */
.dracula-bg {
  background-color: #282A36 !important;
}

.dracula-card {
  background: #282A36 !important;
  color: #F8F8F2 !important;
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 24px 0 rgba(40, 42, 54, 0.18);
}

.dracula-accent {
  color: #BD93F9 !important;
  font-weight: bold;
  letter-spacing: 1px;
}

.dracula-input {
  background-color: #20222C !important;
  color: #F8F8F2 !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 1.1rem;
  text-align: center;
  box-shadow: none !important;
}

.dracula-input::placeholder {
  color: #6272A4 !important;
  opacity: 0.7;
}

.dracula-label {
  color: #6272A4 !important;
  font-size: 1rem;
}

.dracula-btn {
  background-color: #BD93F9 !important;
  color: #282A36 !important;
  border: none !important;
  font-weight: bold;
}

/* Winrate card metric badge: always gold */
.winrate-card .winrate-metric-badge {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  background: #FFD700;
  color: #282A36;
  font-weight: 700;
  font-size: 1.08em;
  border-radius: 1.2em;
  padding: 0.09em 0.5em 0.09em 0.5em !important;
  box-shadow: 0 2px 12px #ffd70055;
  z-index: 2;
  border: 2px solid #FFD700;
  letter-spacing: 0.01em;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

/* Always show the winrate metric badge, styled in gold */
.winrate-card:hover .winrate-metric-badge {
  opacity: 1 !important;
  transform: translateY(0) scale(1.08) !important;
  background: #FFD700 !important;
  color: #282A36 !important;
  box-shadow: 0 2px 12px #ffd70055 !important;
  z-index: 2;
}

.winrate-title-gold {
  color: #FFD600 !important;
}

/* DataTable Responsive & Alignment Fixes (Clean, Let DataTables Handle Sizing) */
.table-wrapper {
  background: #20222C;
  border-radius: 12px;
  padding: 0;
  overflow-x: auto;
  width: 100% !important;
  margin: 0;
}

.table-responsive {
  width: 100% !important;
  overflow-x: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

#matchesTable {
  width: 100% !important;
  min-width: 1200px !important;
  table-layout: auto !important;
  border-collapse: separate !important;
}

#matchesTable th,
#matchesTable td {
  white-space: nowrap !important;
  padding: 0.75rem 1rem !important;
  text-align: center;
  /* Remove forced width/min-width/max-width */
}

#matchesTable thead th {  
  display: none;
  
}

#matchesTable_wrapper {
  border: 2px solid #44475a;
  border-radius: 6px;
  padding: 0;
  background: none;
}

#matchesTable thead th,
#matchesTable tbody td {
  border-right: 1px solid #44475a;
}
#matchesTable thead th:last-child,
#matchesTable tbody td:last-child {
  border-right: none;
}

/* Remove any forced min-width/max-width on th/td */
#matchesTable th,
#matchesTable td {
  min-width: unset !important;
  max-width: unset !important;
  width: unset !important;
}

.player-info{
  background: #20222C;
}

.player-profile-img{
  max-width: 120px;
}

.heatmap-bg{
  background: #20222C;
}

.profile-img-editable-wrapper {
  position: relative;
  max-width: 150px;
  margin-left: auto;
  margin-right: auto;
}

.profile-img-editable,
.player-profile-img {
  max-width: 150px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.fa-square-check{
  color:#50FA7B;
}

.rules-wrapper{
  background:#20222C;
  color:#f8f8f2;
}

.rules-wrapper h3 {
  color: #FF5555;
  font-weight: bold;
  margin-bottom: 1rem;
}