/* General styling for the body */
body {
  font-family: "Poppins", sans-serif;
  background: linear-gradient(to bottom right, #6a0572, #282f86, #343541);
  color: #ffffff;
  margin: 0;
  padding: 0;
  height: 100vh; /* Ensure body takes full viewport height */
  display: flex;
  overflow: hidden; /* Prevent body scrolling */
}

/* Dark Theme Overrides for Body */
html.dark-theme body {
  background: #1e1e2e;
  color: #00cccc;
}

/* Main content container */
#main-content-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(100vh - 60px); /* Ensure container takes the remaining height */
  padding-top: 40px !important; /* Increased padding to push content down */
  background: inherit; /* Ensure consistent background */
  margin-top: 60px !important; /* Push the table further down from the top */
}

/* Main content styles */
.main-content {
  flex: 1;
  margin-left: 350px; /* Adjusted for chat sidebar */
  padding: 20px;
  background: inherit; /* Inherit background for consistency */
  color: #ffffff;
  display: flex;
  justify-content: center;
  height: calc(
    100vh - 60px
  ); /* Ensure the content area takes the full remaining height */
  overflow: hidden; /* Prevent main content scrolling */
}

/* Dark Theme Overrides for Main Content */
html.dark-theme .main-content {
  background: #1e1e2e !important;
  color: #00cccc !important;
}

/* Container styling */
.container {
  max-width: 1600px;
  background: linear-gradient(to bottom right, #6a0572, #282f86, #343541);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%; /* Ensure container fills the height */
}

/* Dark Theme Overrides for Container */
html.dark-theme .container {
  background: rgba(34, 34, 34, 0.8);
}

/* Scrollable table body */
.table-container {
  flex: 1;
  overflow-y: auto; /* Enable vertical scroll for table */
  max-height: calc(100vh - 180px); /* Adjust height for table scrolling */
  width: 100%;
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
}

.table-container::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

/* Table styles */
.table-hover {
  color: #ffffff;
  width: 100%; /* Ensure full width */
  table-layout: auto; /* Allow table to adjust based on content */
}

.table-hover tbody tr:hover {
  background-color: rgba(241, 236, 236, 0.05); /* Subtle background on hover */
  color: white !important; /* Keep text white on hover */
}

.table-hover th,
.table-hover td {
  color: #ffffff; /* Ensure white text */
  padding: 12px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Light border for better separation */
}

.table-hover td {
  background-color: transparent; /* Transparent background for the cells */
  color: #ffffff; /* Ensure white text for table cells */
}

/* Keep text white when hovering over table cells */
.table-hover tbody tr:hover td {
  color: white !important; /* Keep text white on hover */
}

.table-hover tbody tr:hover th {
  color: white !important; /* Keep header text white on hover */
}

/* Fix the table header while scrolling */
.table-container thead th {
  position: sticky;
  top: 0;
  z-index: 10; /* Ensure the header stays above the content */
}

/* Dark Theme Overrides for Table */
html.dark-theme .table-hover tbody tr:hover {
  background-color: rgba(0, 204, 204, 0.2) !important;
}

html.dark-theme .table-hover th,
html.dark-theme .table-hover td {
  color: #00cccc !important;
}

/* Button styles */
.btn-circle {
  width: 40px;
  height: 40px;
  padding: 6px 0;
  border-radius: 50%;
  text-align: center;
  font-size: 24px;
  line-height: 1.42857;
  display: inline-block;
}

.btn-custom {
  background: rgba(34, 34, 34, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border-radius: 0.25rem;
}

.btn-custom:hover {
  background: rgba(52, 53, 65, 0.6);
}

/* Info Icon Styling - Default */
.info-icon {
  background-color: transparent; /* Transparent background */
  border: none; /* No border */
  color: #ffffff; /* White text and icons */
  padding: 0.5rem 0.5rem; /* Adjust padding */
  font-size: 0.875rem; /* Adjust font size */
  border-radius: 0.25rem; /* Slightly round the corners */
  cursor: pointer; /* Pointer cursor */
}

/* Hover effect for Info Icon */
.info-icon:hover {
  background-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* Slightly lighten the background on hover */
}

/* Dark Theme Overrides for Info Icon */
html.dark-theme .info-icon,
body.dark-theme .info-icon {
  color: #00cccc !important; /* Teal text and icons */
}

html.dark-theme .info-icon:hover,
body.dark-theme .info-icon:hover {
  background-color: rgba(0, 204, 204, 0.1) !important; /* Teal hover effect */
}

/* Styling for highlighted delete button */
.delete-pending {
  background-color: #ff6666;
  color: rgb(255, 255, 255);
  border-color: #ff6666;
}

.delete-pending .bi-trash {
  color: #ccff00 !important;
}

/* Chat Sidebar Styling with Enhanced Glassmorphism */
#chat-sidebar {
  position: fixed;
  top: 60px;
  left: 0;
  width: 300px;
  height: calc(100vh - 60px);
  background: rgba(48, 48, 70, 0.6); /* Darker glass effect */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4);
  border-radius: 0 15px 15px 0;
}

/* Chat Header with Modern Gradient */
#chat-sidebar .chat-header {
  padding: 12px;
  background: linear-gradient(
    145deg,
    #6a0572,
    #282f86,
    #343541
  ); /* Default theme gradient */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  color: #ffffff;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
  border-radius: 0 15px 0 0;
}

/* Dark Theme Chat Header - Distinct from Light Theme */
html.dark-theme #chat-sidebar .chat-header {
  background: linear-gradient(
    145deg,
    #0d1b2a,
    #1e2a38,
    #1f1f2e
  ); /* Darker, muted gradient for dark theme */
  color: #00cccc; /* Teal text to contrast with darker background */
  border-bottom: 1px solid rgba(0, 204, 204, 0.3); /* Teal border */
}

/* Chat Body */
#chat-sidebar .chat-body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: rgba(34, 34, 34, 0.4); /* Transparent glass effect */
  display: flex;
  flex-direction: column-reverse;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

/* Chat Footer */
#chat-sidebar .chat-footer {
  padding: 12px;
  background: rgba(34, 34, 34, 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.3);
  border-radius: 0 0 15px 0;
}

/* Chat Footer Dark Theme */
html.dark-theme #chat-sidebar .chat-footer {
  background: rgba(30, 30, 46, 0.8); /* Darker glass effect */
}

/* Chat Input */
#chat-sidebar .chat-footer textarea {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #f1f1f1;
  resize: none;
  outline: none;
}

html.dark-theme #chat-sidebar .chat-footer textarea {
  background: rgba(0, 204, 204, 0.1);
  color: #00cccc;
}

/* Send Button */
#chat-sidebar .chat-footer button {
  padding: 10px 20px;
  border-radius: 8px;
  background: linear-gradient(145deg, #ffb6c1, #ff69b4);
  color: #fff;
  margin-left: 10px;
  border: none;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

#chat-sidebar .chat-footer button:hover {
  background: linear-gradient(145deg, #ff69b4, #ff1493);
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4);
}

/* Timestamp Styling */
.message-timestamp {
  font-size: 0.75rem;
  color: rgba(200, 200, 200, 0.7); /* Slightly lighter color for timestamps */
  text-align: right;
  margin-top: 5px;
}

/* Dark Theme Timestamp */
html.dark-theme .message-timestamp {
  color: rgba(0, 204, 204, 0.6); /* Teal color for dark theme */
}

/* Chat Bubbles */
.user-message,
.received-message {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e1e1e1;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 10px;
  width: fit-content;
  max-width: 80%;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
  position: relative;
}

/* Sent Messages (user) */
.user-message {
  align-self: flex-end;
  background-color: rgba(
    100,
    255,
    150,
    0.2
  ); /* Softer green for sent messages */
  margin-left: auto;
}

.user-message:hover {
  background-color: rgba(100, 255, 150, 0.3);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
}

/* Received Messages */
.received-message {
  align-self: flex-start;
  background-color: rgba(
    100,
    100,
    255,
    0.2
  ); /* Soft blue for received messages */
}

.received-message:hover {
  background-color: rgba(100, 100, 255, 0.3);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
}

/* Dark Theme Overrides for Chat Bubbles */
html.dark-theme .user-message {
  background-color: rgba(0, 204, 204, 0.3); /* Teal for sent messages */
}

html.dark-theme .received-message {
  background-color: rgba(50, 50, 150, 0.2); /* Darker blue for received */
}

/* CHAT TOGGLE */

#chat-sidebar .chat-header #chat-sidebar-toggle {
  position: absolute;
  top: 10px; /* Adjust the vertical placement */
  right: 10px; /* Move it to the right corner */
  background: none; /* Ensure no background */
  border: none; /* No border */
  color: black; /* White color for visibility */
  font-size: 1.5rem; /* Adjust the icon size */
  cursor: pointer; /* Pointer cursor for better UX */
  z-index: 1200; /* Ensure it stays on top of other elements */
}

#chat-sidebar-toggle-hidden {
  position: fixed;
  top: 70px; /* Adjust vertical placement */
  left: 25px; /* Move it further to the right */
  background: none; /* No background */
  border: none; /* No border */
  color: black; /* Ensure icon is visible */
  font-size: 1.5rem; /* Adjust the icon size */
  cursor: pointer; /* Pointer cursor for better UX */
  z-index: 2000; /* Ensure it stays above other elements */
  padding: 0; /* Remove padding */
  box-shadow: none; /* Remove the shadow */
}

/* Responsive Mobile Styles */
@media (max-width: 768px) {
  #chat-sidebar {
    width: 100vw;
    height: calc(100vh - 50px);
    left: 0;
    top: 50px;
  }

  /* Adjust Header, Footer, and Bubbles */
  #chat-sidebar .chat-header {
    font-size: 16px;
    padding: 10px;
    padding-top: 20px; /* Increase the top padding to move the header text down */
  }

  #chat-sidebar .chat-footer {
    padding: 8px;
  }

  #chat-sidebar .chat-footer textarea {
    padding: 8px;
  }

  #chat-sidebar .chat-footer button {
    padding: 8px 12px;
  }

  .user-message,
  .received-message {
    max-width: 90%;
    padding: 8px;
  }
}

/* Responsive styles for mobile */
@media (max-width: 768px) {
  /* Main content adjustment */
  .main-content {
    margin-left: 0;
    padding: 15px;
  }

  @media (max-width: 768px) {
    /* Ensure text color in the <td> stays white when the row is clicked, focused, or active */
    .table tbody tr:focus td,
    .table tbody tr.active td,
    .table tbody tr:hover td {
      color: white !important; /* Keep text color white */
    }
  }

  /* Hide table headers and create card-like table rows */
  .table thead {
    display: none;
  }

  .table tbody tr td:first-child {
    border-top: none; /* Removes the top border above the "Match Date" cell */
  }

  .table tbody tr {
    display: block;
    margin-bottom: 15px;
    border-radius: 10px;
    padding: 15px;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Adding a subtle white border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .table tbody td {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    font-size: 0.9rem;
    border-bottom: none;
  }

  /* Show table headers inside each cell */
  .table tbody td:before {
    content: attr(data-label);
    flex-basis: 40%;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
  }

  /* Adjust buttons to make them more compact */
  .btn-custom {
    width: auto; /* Instead of 100%, make them auto-sized */
    margin-top: 10px;
    padding: 8px; /* Slightly reduced padding for compact size */
  }

  .btn-circle {
    width: 40px; /* Slightly smaller width */
    height: 40px; /* Slightly smaller height */
    font-size: 22px; /* Adjust the font size for smaller screens */
  }

  /* Smaller icons on mobile */
  .btn-custom i.bi-info-square,
  .btn-custom i.bi-gear,
  .btn-custom i.bi-trash {
    font-size: 16px; /* Smaller icons on mobile */
  }

  /* Ensure status icons are always clickable */
  .action-icon {
    position: relative;
    color: white;
    z-index: 10;
    cursor: pointer;
    font-size: 16px; /* Smaller size for mobile screens */
    margin: 0 5px; /* Add some margin to give more clickable space */
    pointer-events: auto; /* Ensure pointer events are enabled */
  }

  /* Reduce the gap between edit and trash buttons in Actions */
  td.actions {
    display: flex;
    justify-content: flex-start;
    gap: 5px; /* Use gap for better control over spacing */
  }

  td.actions .btn-custom {
    margin-right: 5px; /* Reduce the space between the buttons */
    padding: 6px 8px; /* Ensure buttons don't have too much padding */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  td.actions .btn-custom:last-child {
    margin-right: 0; /* Remove margin from the last button */
  }

  /* Ensure status icons have proper spacing inside the actions column */
  td.actions .action-icon {
    margin-right: 5px;
  }
}

/* Modal Content Styling */
.modal-content {
  box-shadow: 0px 6px 20px rgba(209, 6, 199, 0.3) !important; /* Slightly stronger shadow */
  border-radius: 10px; /* More pronounced card-like edges */
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5); /* Deeper shadow for card effect */
  background-color: #2c2c54 !important;
  animation: fadeIn 0.3s ease-in-out;
  border: none; /* Removed white borders */
}

/* Modal Header Styling */
.modal-header {
  color: #ffffff;
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  border-radius: 10px 10px 0 0; /* More squared corners at the top */
  border: none;
}

/* Modal Body Styling */
.modal-body {
  background-color: #2c2c54;
  color: #ffffff;
  padding: 20px;
  font-size: 16px;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 10px; /* Adds spacing between paragraphs */
}

/* Add lines between fields */
.modal-body p {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtle line between fields */
  padding-bottom: 8px;
  margin-bottom: 8px;
  line-height: 1.5;
}

/* Modal Footer Styling */
.modal-footer {
  padding: 10px;
  display: flex;
  justify-content: flex-end;
  border-radius: 0 0 10px 10px;
  border: none;
}

/* Modal Button Styling - Apply btn-custom styling */
.modal-footer .btn {
  background: rgba(
    255,
    255,
    255,
    0.1
  ) !important; /* Lighten the background for better visibility */
  color: #ffffff !important; /* White text color */
  border-radius: 0.25rem !important; /* Adjusted border-radius */
  padding: 8px 15px !important; /* Adjusted padding for better sizing */
  cursor: pointer !important; /* Pointer cursor */
  transition:
    background-color 0.3s ease,
    color 0.3s ease !important; /* Smooth transition effects */
}

/* Hover effect for modal button */
.modal-footer .btn:hover {
  color: #ffda79 !important; /* Green text on hover for contrast */
}

/* Modal Content Styling */
.modal-content {
  border-radius: 10px; /* More pronounced card-like edges */
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5); /* Deeper shadow for card effect */
  background-color: #2c2c54;
  animation: fadeIn 0.3s ease-in-out;
  border: none; /* Removed white borders */
}

/* Dark Theme Modal Overrides */
html.dark-theme .modal-content {
  box-shadow: 0px 6px 20px rgba(0, 204, 204, 0.3) !important; /* Slightly stronger shadow */
  border: 1px solid rgba(0, 204, 204, 0.2); /* Teal border for dark mode */
}

/* Modal Header and Footer */
html.dark-theme .modal-header,
html.dark-theme .modal-footer {
  color: #00cccc !important; /* Teal text color */
  background-color: transparent !important; /* Ensures the header/footer has no background, can customize if needed */
}

/* Modal Body */
html.dark-theme .modal-body {
  color: #00cccc !important; /* Teal text for modal body */
  background-color: transparent !important; /* Consider adding background color if needed for contrast */
}

/* Modal Button Styling - Dark Theme */
html.dark-theme .modal-footer .btn {
  background: rgba(0, 204, 204, 0.2) !important; /* Teal background */
  color: #00cccc !important; /* Teal text */
  border: 1px solid rgba(0, 204, 204, 0.3); /* Teal border */
}

html.dark-theme .modal-footer .btn:hover {
  background: rgba(0, 204, 204, 0.4) !important; /* Darker teal on hover */
  color: #ffffff !important; /* White text on hover */
  border: 1px solid rgba(0, 204, 204, 0.5); /* Slightly brighter border on hover */
}

/* OVERRIDES FOR WHITE TEXT IN MODALS FOR DARK THEME */

/* 1) Override all <p> text in the modal body to white */
html.dark-theme .modal-body p {
  color: #ffffff !important;
}

/* 2) Bring the label (inside <strong>) back to teal */
html.dark-theme .modal-body p strong {
  color: #00cccc !important;
}

/* Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Styles for Mobile */
@media (max-width: 768px) {
  .modal-body {
    font-size: 14px;
    padding: 15px;
  }

  .modal-header {
    font-size: 16px;
    padding: 10px;
  }

  .modal-footer .btn {
    padding: 8px 12px;
    font-size: 14px;
  }
}

#main-content-container {
  width: 80% !important; /* Set width to 80% for smaller screens */
  max-width: 1125px; /* Optional: limit the max-width to avoid it being too wide */
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  box-sizing: border-box;
}

/* General styles - Apply to all screens */
.table-hover th,
.table-hover td {
  padding: 6px 7px; /* Consistent padding */
  font-size: 12px;
  overflow-wrap: break-word; /* Ensure long words break onto the next line */
  word-break: break-word; /* Break words if they are too long */
  white-space: normal; /* Allow text to wrap to the next line */
}

/* Mobile view - Adjust minimum widths */
@media (max-width: 768px) {
  /* Match Date */
  .table-hover th:nth-child(1),
  .table-hover td:nth-child(1) {
    min-width: 10px; /* Adjusted minimum width */
  }

  /* Match Name */
  .table-hover th:nth-child(2),
  .table-hover td:nth-child(2) {
    min-width: 10px; /* Adjusted minimum width */
  }

  /* Sport */
  .table-hover th:nth-child(3),
  .table-hover td:nth-child(3) {
    min-width: 10px; /* Adjusted minimum width */
  }

  /* League */
  .table-hover th:nth-child(4),
  .table-hover td:nth-child(4) {
    min-width: 25px; /* Adjusted minimum width */
  }

  /* Category */
  .table-hover th:nth-child(5),
  .table-hover td:nth-child(5) {
    min-width: 25px; /* Adjusted minimum width */
  }

  /* Bookmaker */
  .table-hover th:nth-child(6),
  .table-hover td:nth-child(6) {
    min-width: 35px; /* Adjusted minimum width */
  }

  /* Bet */
  .table-hover th:nth-child(7),
  .table-hover td:nth-child(7) {
    min-width: 20px; /* Adjusted minimum width */
  }

  /* Odds */
  .table-hover th:nth-child(8),
  .table-hover td:nth-child(8) {
    min-width: 20px; /* Adjusted minimum width */
  }

  /* Expert */
  .table-hover th:nth-child(9),
  .table-hover td:nth-child(9) {
    min-width: 25px; /* Adjusted minimum width */
  }

  /* Units */
  .table-hover th:nth-child(10),
  .table-hover td:nth-child(10) {
    min-width: 20px; /* Adjusted minimum width */
  }

  /* Type */
  .table-hover th:nth-child(11),
  .table-hover td:nth-child(11) {
    min-width: 20px; /* Adjusted minimum width */
  }

  /* Info */
  .table-hover th:nth-child(12),
  .table-hover td:nth-child(12) {
    min-width: 10px; /* Adjusted minimum width */
  }
}

/* Desktop and laptop view - Adjust fixed widths */
@media (min-width: 769px) {
  .table-hover th,
  .table-hover td {
    padding: 8px 10px; /* Consistent padding */
  }

  /* Match Date */
  .table-hover th:nth-child(1),
  .table-hover td:nth-child(1) {
    min-width: 80px; /* Adjusted minimum width */
    max-width: 100px; /* Prevents from getting too wide */
  }

  /* Match Name */
  .table-hover th:nth-child(2),
  .table-hover td:nth-child(2) {
    min-width: 100px; /* Adjusted minimum width */
    max-width: 150px; /* Prevents from getting too wide */
  }

  /* Sport */
  .table-hover th:nth-child(3),
  .table-hover td:nth-child(3) {
    min-width: 60px; /* Adjusted minimum width */
    max-width: 80px; /* Prevents from getting too wide */
  }

  /* League */
  .table-hover th:nth-child(4),
  .table-hover td:nth-child(4) {
    min-width: 80px; /* Adjusted minimum width */
    max-width: 100px; /* Prevents from getting too wide */
  }

  /* Category */
  .table-hover th:nth-child(5),
  .table-hover td:nth-child(5) {
    min-width: 60px; /* Adjusted minimum width */
    max-width: 80px; /* Prevents from getting too wide */
  }

  /* Bookmaker */
  .table-hover th:nth-child(6),
  .table-hover td:nth-child(6) {
    min-width: 80px; /* Adjusted minimum width */
    max-width: 100px; /* Prevents from getting too wide */
  }

  /* Bet */
  .table-hover th:nth-child(7),
  .table-hover td:nth-child(7) {
    min-width: 60px; /* Adjusted minimum width */
    max-width: 80px; /* Prevents from getting too wide */
  }

  /* Odds */
  .table-hover th:nth-child(8),
  .table-hover td:nth-child(8) {
    min-width: 40px; /* Adjusted minimum width */
    max-width: 60px; /* Prevents from getting too wide */
  }

  /* Expert */
  .table-hover th:nth-child(9),
  .table-hover td:nth-child(9) {
    min-width: 70px; /* Adjusted minimum width */
    max-width: 90px; /* Prevents from getting too wide */
  }

  /* Units */
  .table-hover th:nth-child(10),
  .table-hover td:nth-child(10) {
    min-width: 30px; /* Adjusted minimum width */
    max-width: 60px; /* Prevents from getting too wide */
  }

  /* Type */
  .table-hover th:nth-child(11),
  .table-hover td:nth-child(11) {
    min-width: 40px; /* Adjusted minimum width */
    max-width: 60px; /* Prevents from getting too wide */
  }

  /* Info */
  .table-hover th:nth-child(12),
  .table-hover td:nth-child(12) {
    min-width: 30px; /* Adjusted minimum width */
    max-width: 40px; /* Prevents from getting too wide */
  }
}

/* 13/14 INCH SCREEN SETTINGS */

/* BLACK AND YELLOW START HERE */

/* Black and Yellow Theme Overrides for Body */
html.yellow-theme body {
  background: #000000;
  color: #f6e05e;
}

/* Main Content Styles - Black and Yellow Theme */
html.yellow-theme .main-content {
  background: #000000 !important;
  color: #f6e05e !important;
}

/* Container - Black and Yellow Theme */
html.yellow-theme .container {
  background: rgba(0, 0, 0, 0.8);
  color: #f6e05e;
}

/* Table Styles - Black and Yellow Theme */
html.yellow-theme .table-hover tbody tr:hover {
  background-color: rgba(246, 224, 94, 0.1) !important;
}

html.yellow-theme .table-hover th,
html.yellow-theme .table-hover td {
  color: #f6e05e !important;
  border-bottom: 1px solid rgba(246, 224, 94, 0.2);
}

/* Chat Sidebar - Black and Yellow Theme */
html.yellow-theme #chat-sidebar {
  background: rgba(0, 0, 0, 0.6);
  color: #f6e05e;
}

html.yellow-theme #chat-sidebar .chat-header {
  background: linear-gradient(
    145deg,
    #000000,
    #2f2f2f
  ); /* Darker shades of black */
  color: #f6e05e;
  border-bottom: 1px solid rgba(246, 224, 94, 0.3);
}

/* Chat Footer - Black and Yellow Theme */
html.yellow-theme #chat-sidebar .chat-footer {
  background: rgba(34, 34, 34, 0.8);
  border-top: 1px solid rgba(246, 224, 94, 0.2);
}

html.yellow-theme #chat-sidebar .chat-footer textarea {
  background: rgba(246, 224, 94, 0.1);
  color: #f6e05e;
}

html.yellow-theme #chat-sidebar .chat-footer button {
  background: #f6e05e;
  color: #000000;
}

/* Chat Bubbles - Black and Yellow Theme */
html.yellow-theme .user-message {
  background-color: rgba(
    246,
    224,
    94,
    0.2
  ); /* Yellow bubble for sent messages */
}

html.yellow-theme .received-message {
  background-color: rgba(100, 100, 100, 0.2); /* Darker grey for received */
}

/* Modal - Black and Yellow Theme */
html.yellow-theme .modal-content {
  background-color: #1f1f1f !important;
  box-shadow: 0px 6px 20px rgba(246, 224, 94, 0.3) !important;
  color: #f6e05e !important;
}

html.yellow-theme .modal-header,
html.yellow-theme .modal-footer {
  color: #f6e05e !important;
  border-bottom: 1px solid rgba(246, 224, 94, 0.2);
}

html.yellow-theme .modal-footer .btn {
  background: rgba(246, 224, 94, 0.2) !important;
  color: #f6e05e !important;
}

html.yellow-theme .modal-footer .btn:hover {
  background: rgba(246, 224, 94, 0.4) !important;
}

/* Button - Black and Yellow Theme */
html.yellow-theme .btn-custom {
  background: rgba(246, 224, 94, 0.2);
  color: #f6e05e;
  border: 1px solid rgba(246, 224, 94, 0.3);
}

html.yellow-theme .btn-custom:hover {
  background: rgba(246, 224, 94, 0.4);
  color: #000000;
}

/* Info Icon - Black and Yellow Theme */
html.yellow-theme .info-icon {
  color: #f6e05e;
}

html.yellow-theme .info-icon:hover {
  background-color: rgba(246, 224, 94, 0.1);
}

/* Timestamp - Black and Yellow Theme */
html.yellow-theme .message-timestamp {
  color: rgba(246, 224, 94, 0.6);
}

/* Yellow Theme Modal Overrides */
html.yellow-theme .modal-content {
  box-shadow: 0px 6px 20px rgba(246, 224, 94, 0.5) !important; /* Bold yellow shadow */
  border-radius: 10px !important;
  background-color: #0e0e0e !important; /* Deep black background */
  animation: fadeIn 0.3s ease-in-out !important;
  border: none !important;
}

/* Modal Header Styling - Yellow Theme */
html.yellow-theme .modal-header {
  color: #f6e05e !important; /* Vibrant yellow text */
  padding: 15px !important;
  font-size: 18px !important;
  font-weight: bold !important;
  text-align: center !important;
  text-transform: uppercase !important;
  border-radius: 10px 10px 0 0 !important;
  border: none !important;
}

/* Modal Body Styling - Yellow Theme */
html.yellow-theme .modal-body {
  background-color: #0e0e0e !important; /* Deep black for body */
  color: #f6e05e !important; /* Yellow text for body */
  padding: 20px !important;
  font-size: 16px !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Add lines between fields in the modal body - Yellow Theme */
html.yellow-theme .modal-body p {
  border-bottom: 1px solid rgba(246, 224, 94, 0.1) !important; /* Subtle yellow line */
  padding-bottom: 8px !important;
  margin-bottom: 8px !important;
  line-height: 1.5 !important;
}

/* Modal Body Input Fields - Yellow Theme */
html.yellow-theme .modal-body input,
html.yellow-theme .modal-body select,
html.yellow-theme .modal-body textarea {
  height: auto !important;
  min-height: 45px !important;
  padding: 12px 15px !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  background-color: rgba(
    255,
    255,
    255,
    0.1
  ) !important; /* Translucent white input fields */
  border: 1px solid rgba(246, 224, 94, 0.2) !important; /* Yellow border */
  color: #f6e05e !important; /* Yellow text */
  border-radius: 5px !important;
  margin-bottom: 10px !important;
}

/* Placeholder text color - Yellow Theme */
html.yellow-theme input::placeholder,
html.yellow-theme textarea::placeholder {
  color: rgba(246, 224, 94, 0.7) !important; /* Softer yellow placeholder */
}

/* Modal Footer Styling - Yellow Theme */
html.yellow-theme .modal-footer {
  padding: 10px !important;
  display: flex !important;
  justify-content: flex-end !important;
  border-radius: 0 0 10px 10px !important;
  border: none !important;
}

/* Modal Button Styling - Yellow Theme */
html.yellow-theme .modal-footer .btn {
  background: rgba(246, 224, 94, 0.1) !important; /* Yellow button background */
  color: #f6e05e !important; /* Yellow button text */
  border-radius: 0.25rem !important;
  border: 1px solid rgba(246, 224, 94, 0.2) !important; /* Yellow border */
  padding: 8px 15px !important;
  cursor: pointer !important;
  transition:
    background-color 0.3s ease,
    color 0.3s ease !important;
}

/* Hover effect for modal button - Yellow Theme */
html.yellow-theme .modal-footer .btn:hover {
  background: rgba(246, 224, 94, 0.7) !important; /* Stronger yellow on hover */
  color: #0e0e0e !important; /* Black text on hover for contrast */
  border: 1px solid rgba(246, 224, 94, 0.9) !important; /* Bold yellow border */
}

/* LIGHT THEME START HERE */

/* Light Theme Overrides for Body */
html.light-theme body {
  background: #e0e0e0 !important; /* Light grey background */
  color: #333333 !important; /* Dark grey text */
}

/* Main Content Styles - Light Theme */
html.light-theme .main-content {
  background: #ffffff !important; /* White content background */
  color: #333333 !important; /* Dark grey text */
}

/* Container - Light Theme */
html.light-theme .container {
  background: #f0f0f0 !important; /* Light grey container background */
  color: #333333 !important; /* Dark grey text */
}

/* Table Styles - Light Theme */
html.light-theme .table-hover {
  background: #ffffff !important; /* White table background */
  color: #333333 !important; /* Dark grey text */
  border: 1px solid #cccccc !important; /* Light grey border */
}

/* Fix for Mobile Table Labels in Light Theme */
html.light-theme .table tbody td:before {
  color: #333333 !important; /* Dark grey text for mobile table labels */
  font-weight: bold; /* Make it stand out more */
  padding-right: 10px; /* Space between label and value */
}

/* Fix for highlighted text color in Light Theme */
html.light-theme .table-hover tbody tr:focus td,
html.light-theme .table-hover tbody tr.active td,
html.light-theme .table-hover tbody tr:hover td {
  color: #333333 !important; /* Ensure dark grey text remains visible */
  background-color: #e0e0e0 !important; /* Light grey background for the row */
}

html.light-theme .table-hover thead th {
  background-color: #f0f0f0 !important; /* Light grey for headers */
  color: #333333 !important; /* Dark grey for headers */
  border-bottom: 1px solid #cccccc !important; /* Light grey border */
}

html.light-theme .table-hover tbody tr:nth-child(even) {
  background-color: #f9f9f9 !important; /* Very light grey for even rows */
}

html.light-theme .table-hover tbody tr:nth-child(odd) {
  background-color: #ffffff !important; /* White for odd rows */
}

html.light-theme .table-hover tbody tr:hover {
  background-color: #e0e0e0 !important; /* Light grey on hover */
  color: #000000 !important; /* Black text on hover */
}

html.light-theme .table-hover th,
html.light-theme .table-hover td {
  border-bottom: 1px solid #cccccc !important; /* Light grey border */
  color: #333333 !important; /* Dark grey text for table cells */
}

/* Button Styles - Light Theme */
html.light-theme .btn-primary {
  background-color: #333333 !important; /* Dark grey button */
  color: #ffffff !important; /* White text */
}

html.light-theme .btn-primary:hover {
  background-color: #000000 !important; /* Black on hover */
}

/* Info Icon - Light Theme */
html.light-theme .info-icon {
  color: #000000 !important; /* Black color for the info icon */
  border: none; /* Ensure no border by default */
}

/* Info Icon Hover - Light Theme */
html.light-theme .info-icon:hover {
  border: 1px solid #000000 !important; /* Black border on hover */
  background-color: rgba(
    0,
    0,
    0,
    0.1
  ) !important; /* Slight background change on hover */
}

/* Chat Sidebar - Light Theme */
html.light-theme #chat-sidebar {
  background: rgba(230, 230, 230, 0.9) !important; /* Light grey glass effect */
  color: #333333 !important; /* Dark grey text */
  border-right: 1px solid #cccccc !important; /* Light grey border */
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

html.light-theme #chat-sidebar .chat-header {
  background: #f0f0f0 !important; /* Light grey for chat header */
  color: #333333 !important; /* Dark grey text */
  border-bottom: 1px solid #cccccc !important; /* Light grey border */
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
}

html.light-theme #chat-sidebar .chat-body {
  background: #f9f9f9 !important; /* Lighter grey for chat background */
  color: #333333 !important; /* Dark grey text */
  padding: 20px;
  overflow-y: auto;
}

html.light-theme #chat-sidebar .chat-footer {
  background: #f0f0f0 !important; /* Light grey footer */
  border-top: 1px solid #cccccc !important; /* Light grey border */
  padding: 10px;
  display: flex;
  align-items: center;
}

/* Chat Input Box */
html.light-theme #chat-sidebar .chat-footer textarea {
  background: #ffffff !important; /* White input background */
  color: #333333 !important; /* Dark grey text */
  border: 1px solid #cccccc !important; /* Light grey border */
  border-radius: 5px;
  padding: 8px;
  flex: 1;
  resize: none;
  outline: none;
}

/* Send Button */
html.light-theme #chat-sidebar .chat-footer button {
  background: #333333 !important; /* Dark grey send button */
  color: #ffffff !important; /* White text */
  border-radius: 5px;
  padding: 10px 20px;
  border: none;
  margin-left: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

html.light-theme #chat-sidebar .chat-footer button:hover {
  background: #000000 !important; /* Black on hover */
}

/* Chat Timestamps - Light Theme */
html.light-theme .message-timestamp {
  color: #666666 !important; /* Lighter grey for timestamps */
}

/* Chat Bubbles - Light Theme */
html.light-theme .user-message,
html.light-theme .received-message {
  background-color: rgba(
    255,
    255,
    255,
    0.9
  ) !important; /* Light transparent white */
  border: 1px solid #cccccc !important; /* Light grey border */
  color: #333333 !important; /* Dark grey text */
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}

html.light-theme .user-message {
  align-self: flex-end;
  background-color: rgba(
    200,
    255,
    200,
    0.1
  ) !important; /* Subtle green for sent messages */
}

html.light-theme .received-message {
  align-self: flex-start;
  background-color: rgba(
    200,
    200,
    255,
    0.1
  ) !important; /* Subtle blue for received messages */
}

/* LIGHT THEME MODAL STYLING */

/* Modal Close Icon - Light Theme */
html.light-theme .modal-header .close,
html.light-theme .modal-header .btn-close {
  color: #000000 !important; /* Black color for the close icon */
  opacity: 1 !important; /* Ensure the close icon is fully visible */
}

/* Modal - Light Theme */
html.light-theme .modal-content {
  background-color: #e6e6e6 !important; /* Light grey background */
  box-shadow: 0px 6px 20px rgba(153, 153, 153, 0.3) !important; /* Soft grey shadow */
  color: #000000 !important; /* Black text */
}

/* Modal Header - Light Theme */
html.light-theme .modal-header {
  color: #000000 !important; /* Black text */
  border-bottom: 1px solid #cccccc !important; /* Light grey border */
}

/* Modal Close Icon - Light Theme */
html.light-theme .modal-header .close {
  color: #000000 !important; /* Black color for the close icon */
  opacity: 1; /* Ensure the close icon is fully visible */
}

/* Modal Header Title - Light Theme (for extra specificity) */
html.light-theme .modal-header h5,
html.light-theme .modal-header .modal-title {
  color: #000000 !important; /* Black text in the modal title */
}

/* Modal Close Button Styling - Light Theme */
html.light-theme .btn-close {
  color: #000000 !important; /* Force black color */
  opacity: 1 !important; /* Ensure the close button is fully visible */
  background-color: transparent !important; /* Remove any background */
  border: none !important; /* Remove any border */
  filter: none !important; /* Remove any filters Bootstrap may apply */
  box-shadow: none !important; /* Remove any shadows */
}

html.light-theme .modal-header .close {
  color: #000000 !important; /* Dark grey on hover */
}

html.light-theme .modal-header .close:hover {
  color: #333333 !important; /* Dark grey on hover */
}

/* Modal Body - Light Theme */
html.light-theme .modal-body {
  background-color: #e6e6e6 !important; /* Light grey body background */
  color: #000000 !important; /* Black text */
}

/* Modal Footer - Light Theme */
html.light-theme .modal-footer {
  color: #000000 !important; /* Black text */
  border-top: 1px solid #cccccc !important; /* Light grey border */
}

/* Modal Footer Buttons - Light Theme */
html.light-theme .modal-footer .btn {
  background-color: #333333 !important; /* Dark grey button */
  color: #ffffff !important; /* White text */
  border: 1px solid #cccccc !important; /* Light grey border */
  padding: 8px 15px !important;
  cursor: pointer !important;
  transition:
    background-color 0.3s ease,
    color 0.3s ease !important;
}

html.light-theme .modal-footer .btn:hover {
  background-color: #000000 !important; /* Black on hover */
  color: #ffffff !important; /* White text */
}

/* Modal Input Fields - Light Theme */
html.light-theme .modal-body input,
html.light-theme .modal-body select,
html.light-theme .modal-body textarea {
  background-color: #ffffff !important; /* White input fields */
  border: 1px solid #cccccc !important; /* Light grey border */
  color: #000000 !important; /* Black text */
}

/* Placeholder text color - Light Theme */
html.light-theme input::placeholder,
html.light-theme textarea::placeholder {
  color: rgba(102, 102, 102, 0.7) !important; /* Softer grey placeholder */
}

/* Add lines between fields in the modal body - Light Theme */
html.light-theme .modal-body p {
  border-bottom: 1px solid #cccccc !important; /* Light grey line */
  padding-bottom: 8px !important;
  margin-bottom: 8px !important;
  line-height: 1.5 !important;
}

/* Modal transitions */
html.light-theme .modal-content {
  animation: fadeIn 0.3s ease-in-out;
}

/* Desktop: Hide date on desktop */
@media (min-width: 768px) {
  .match-time-mobile {
    display: none;
  }
  .match-time-desktop {
    display: inline;
  }
}

/* Mobile: Hide time-only version on mobile */
@media (max-width: 767px) {
  .match-time-desktop {
    display: none;
  }
  .match-time-mobile {
    display: inline;
  }
}

/* UCL THEME FOR ROWS */

/* UCL-Themed Metallic Blue Background for Bet Rows */
.ucl-background {
  background: linear-gradient(
    to right,
    #002e5d,
    #003b8e,
    #004fd4
  ) !important; /* Metallic deep blue gradient */
  color: #ffffff !important; /* White text for contrast */
  border: 1px solid #004fd4; /* Brighter metallic blue border */
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(0, 79, 212, 0.3); /* Soft blue glow */
}

/* General hover effect for UCL-themed rows */
.ucl-background:hover {
  background: linear-gradient(
    to right,
    #004fd4,
    #003b8e,
    #002e5d
  ) !important; /* Reverse gradient on hover */
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.6),
    0 0 15px rgba(0, 79, 212, 0.5) !important; /* Enhanced blue glow on hover */
}

/* Force white text for UCL bets in light theme */
html.light-theme .ucl-background,
html.light-theme .ucl-background td {
  color: #ffffff !important; /* Force white text */
}

/* Completely Disable Hover Effect in Light Theme for UCL Rows */
html.light-theme .table-hover tbody tr.ucl-background:hover,
html.light-theme .table-hover tbody tr.ucl-background:hover td {
  background: linear-gradient(
    to right,
    #002e5d,
    #003b8e,
    #004fd4
  ) !important; /* Keep the original gradient */
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(0, 79, 212, 0.3) !important; /* Maintain original glow */
  color: #ffffff !important; /* Force white text on hover */
}

/* UCL THEME FOR ROWS */

/* Hidden Class for Toggling */
.hidden {
  display: none !important;
}

/* Chat Sidebar Toggle Button */
#chat-sidebar-toggle {
  position: fixed;
  top: 80px; /* Adjust to align with your design */
  right: 20px;
  z-index: 2000;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  transition: color 0.3s ease-in-out;
}

#chat-sidebar-toggle:hover {
  color: #ccc; /* Slightly lighter on hover */
}