/* Casino Pages Styling */

/* Never let page content force a horizontal scrollbar on the whole document.
   Wide, intentionally-scrollable regions (e.g. Bootstrap .table-responsive)
   keep their own internal scroll; this only clips runaway page-level overflow.
   `clip` (unlike `hidden`) does not turn body into a scroll container, so
   position: sticky keeps working (the review page's quick-facts rail relies
   on it); the `hidden` line is only a fallback for older browsers. */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* --- Content width -------------------------------------------------------
   Bootstrap caps .container at 1320px, which leaves large empty gutters on
   big monitors. Widen it with a fluid width (a percentage of the available
   content area, so it adapts as the sidebar opens/closes) up to a comfortable
   ceiling. Long-form reading content is capped separately, at a readable line
   length, so prose never stretches into an unreadable slab. */
:root {
  --content-max: 1800px;   /* ceiling for data/app pages (tables, dashboards) */
  --reading-measure: 72ch; /* ~72 chars: tight measure for short prose blurbs */
  --guide-measure: 110ch;  /* ~110 chars: roomy docs-width for guides (prose + tables) */
}

@media (min-width: 1400px) {
  .container {
    max-width: min(95%, var(--content-max));
  }

  /* The casino list carries an 8-column comparison table, more than a typical
     data page, so its container gets a wider ceiling to fill widescreens. */
  .page-casinos .container {
    max-width: min(97%, 2200px);
  }
}

/* Some headings wrap to two lines below xxl (see casinos.html), so center all
   header cells to keep the single-line labels level with the wrapped ones. */
#casino-table-view thead th {
  vertical-align: middle;
}

/* On desktop, drive column widths from the explicit percentages on the header
   cells rather than letting content (and the wide container's slack) balloon
   every column. Notes gets the largest share so long sentences wrap there and
   the data columns hug their content. Hidden columns drop out and the visible
   ones re-normalize to fill the width. Mobile keeps auto layout so the few
   visible columns aren't over-squeezed. */
@media (min-width: 992px) {
  #casino-table-view table {
    table-layout: fixed;
  }
}

/* Keep long-form reading at a comfortable measure regardless of page width. */
.prose {
  max-width: var(--reading-measure);
}

/* The casino review is short prose, so it hugs the tight measure. */
.reading-column {
  max-width: var(--reading-measure);
}

/* Guides mix prose with tables and strategy charts, so they use a wider
   docs-style column, centered in the now-wide page. */
.guide-article {
  max-width: var(--guide-measure);
  margin-inline: auto;
}

/* Card bodies use flexbox to push buttons to bottom
   d-flex flex-column is applied via Bootstrap classes in templates
   Content areas use flex-grow-1 to expand and buttons use mt-auto to stick to bottom */


.casino-card .btn {
  transition: all 0.2s ease;
}

.casino-card .btn:hover {
  transform: scale(1.05);
}

/* Card titles consistent with how it works page */
.card-title {
  font-weight: 600;
}

/* List view table styling */
.table {
  table-layout: auto;
  width: 100%;
}

.table th {
  background-color: rgba(108, 117, 125, 0.2);
  border-color: rgba(255, 255, 255, 0.1);
  font-weight: 600;
  white-space: nowrap;
}

.table td {
  border-color: rgba(255, 255, 255, 0.1);
  vertical-align: middle;
}

.table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.table .badge {
  font-size: 0.75em;
}

.table .btn-group .btn {
  padding: 0.25rem 0.5rem;
}

/* Badge styling */
.badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

.badge i {
  vertical-align: baseline;
  margin-right: 0.25rem;
}

/* Casino name prominence for table views */
.casino-name {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  transition: color 0.2s ease;
}



/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .table th,
  .table td {
    padding: 0.375rem 0.2rem;
    font-size: 0.8rem;
  }

  .table .badge {
    font-size: 0.65em;
    padding: 0.25em 0.4em;
  }


  /* Compact the min/max columns for casinos table */
  .table th:nth-child(3),
  .table td:nth-child(3),
  .table th:nth-child(4),
  .table td:nth-child(4) {
    padding: 0.375rem 0.15rem;
  }

  /* Make daily reward type column more compact */
  .table th:nth-child(5),
  .table td:nth-child(5) {
    font-size: 0.7rem;
    padding: 0.375rem 0.1rem;
  }
}

@media (max-width: 576px) {
  /* On very small screens, make everything even more compact */
  .table th,
  .table td {
    padding: 0.25rem 0.1rem;
    font-size: 0.75rem;
  }

  .casino-name {
    font-size: 1rem;
  }

  .table .btn-sm {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }
}

/* Sidebar Styles */
/* Desktop behavior - sidebar pushes content */
@media (min-width: 992px) {
  body {
    transition: margin-left 0.3s ease;
  }

  header {
    transition: left 0.3s ease;
  }

  html.sidebar-open body {
    margin-left: var(--sidebar-width, 220px);
  }

  html.sidebar-closed body {
    margin-left: 0;
  }

  /* Header should move with content when sidebar is open */
  html.sidebar-open header {
    left: var(--sidebar-width, 220px);
    right: 0;
    width: auto;
  }

  html.sidebar-closed header {
    left: 0;
    right: 0;
    width: auto;
  }
}

/* Mobile behavior - sidebar overlays content */
@media (max-width: 991.98px) {
  html.sidebar-open body,
  html.sidebar-closed body {
    margin-left: 0;
  }

  html.sidebar-open header,
  html.sidebar-closed header {
    left: 0;
    right: 0;
    width: auto;
  }
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: fit-content;
  height: 100vh;
  background-color: #212529;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

/* Show sidebar when open */
html.sidebar-open .sidebar {
  transform: translateX(0);
}

/* Hide sidebar when closed */
html.sidebar-closed .sidebar {
  transform: translateX(-100%);
}

/* Backdrop overlay for mobile */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Show overlay on mobile when sidebar is open */
@media (max-width: 991.98px) {
  html.sidebar-open .sidebar-overlay {
    opacity: 1;
    visibility: visible;
  }
}

/* Hide overlay on desktop */
@media (min-width: 992px) {
  .sidebar-overlay {
    display: none;
  }
}

.sidebar-content {
  flex: 1;
  padding: 1rem 0;
  padding-top: 1rem;
  overflow-y: auto;
}

.sidebar-link {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.sidebar-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  text-decoration: none;
}

.sidebar-link.active {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-left-color: #0d6efd;
}

.sidebar-link i {
  width: 20px;
  text-align: center;
}

/* Header alignment fixes */
header .d-flex.align-items-center {
  align-items: center !important;
}

/* Burger menu button adjustments */
#sidebarToggle {
  padding: 0.375rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

#sidebarToggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.75);
}

/* Logo link alignment */
header .h2 {
  margin: 0 !important;
  line-height: 1 !important;
}

/* Ensure sidebar appears above Bootstrap components */
@media (max-width: 991.98px) {
  .sidebar {
    z-index: 1060;
  }

  .sidebar-overlay {
    z-index: 1055;
  }
}

/* Expandable sidebar sections */
.sidebar-section {
  position: relative;
}

.sidebar-toggle {
  position: relative;
  cursor: pointer;
}

.sidebar-arrow {
  font-size: 0.75rem;
}

html.sidebar-transitions .sidebar-arrow {
  transition: transform 0.2s ease;
}

.sidebar-section.expanded .sidebar-arrow,
html.records-section-expanded #recordsSection .sidebar-arrow,
html.analytics-section-expanded #analyticsSection .sidebar-arrow,
html.settings-section-expanded #settingsSection .sidebar-arrow {
  transform: rotate(180deg);
}

.sidebar-submenu {
  max-height: 0;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.2);
}

html.sidebar-transitions .sidebar-submenu {
  transition: max-height 0.3s ease;
}

.sidebar-section.expanded .sidebar-submenu,
html.records-section-expanded #recordsSection .sidebar-submenu,
html.analytics-section-expanded #analyticsSection .sidebar-submenu,
html.settings-section-expanded #settingsSection .sidebar-submenu {
  max-height: 300px;
}

.sidebar-sublink {
  display: flex;
  align-items: center;
  padding: 0.5rem 1.5rem 0.5rem 3rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  border-left: 3px solid transparent;
}

.sidebar-sublink:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

.sidebar-sublink.active {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-left-color: #0d6efd;
}

.sidebar-sublink i {
  width: 16px;
  text-align: center;
  font-size: 0.8rem;
}

/* Disabled states for unauthenticated users */
.sidebar-link.disabled,
.sidebar-sublink.disabled {
  color: rgba(255, 255, 255, 0.4);
  cursor: not-allowed;
  position: relative;
}

.sidebar-link.disabled:hover,
.sidebar-sublink.disabled:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.5);
}

.sidebar-link.disabled .fa-lock,
.sidebar-sublink.disabled .fa-lock {
  color: rgba(255, 193, 7, 0.8);
  font-size: 0.7rem;
}

/* Locked submenu - always visible for unauthenticated users */
.sidebar-submenu.locked {
  max-height: 300px;
  opacity: 0.6;
}

/* Tooltips for disabled items */
.sidebar-link.disabled[title]:hover::after,
.sidebar-sublink.disabled[title]:hover::after {
  content: attr(title);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 10px;
  padding: 0.25rem 0.5rem;
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  font-size: 0.75rem;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 1070;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Sidebar subsections */
.sidebar-subsection {
  margin: 0.5rem 0;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  padding-left: 1rem;
  margin-left: 2rem;
}

.sidebar-subsection-title {
  display: block;
  padding: 0.375rem 0.5rem 0.25rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}

.sidebar-subsection .sidebar-sublink {
  padding: 0.375rem 1rem 0.375rem 1.5rem;
  font-size: 0.85rem;
  border-left: none;
}

.sidebar-subsection .sidebar-sublink:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.sidebar-subsection .sidebar-sublink.active {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.sidebar-subsection .sidebar-sublink i {
  width: 14px;
  font-size: 0.75rem;
}