/* app/assets/stylesheets/fixed_table.css */

/* ===== Fixed Table Layout Structure ===== */
body.listings-page {
  overflow: hidden;
}

/* Main container for listings view */
:root {
  --navbar-height: 64px; /* Default value, will be updated by JS */
}

.listings-layout {
  position: fixed; /* Fixed positioning relative to viewport */
  top: var(--navbar-height); /* Use CSS variable */
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #ffffff;
  margin: 0;
  padding: 0;
  z-index: 10; /* Above other content but below the navbar */
  height: calc(100vh - var(--navbar-height)); /* Calculate height dynamically */
}

/* Dark mode for listings layout */
:is(.dark) .listings-layout {
  background-color: #111827; /* dark bg-gray-900 */
}

/* Fixed header at the top */
.fixed-header {
  flex-shrink: 0;
  background-color: #ffffff;
  z-index: 30;
  /* Remove shadow for cleaner look */
  box-shadow: none;
  border-bottom: 1px solid #e5e7eb;
}

:is(.dark) .fixed-header {
  background-color: #1f2937; /* dark bg-gray-800 */
  box-shadow: none;
  border-bottom: 1px solid #374151; /* dark border-gray-700 */
}

/* Filter bar inside the fixed header */
.filter-bar {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: #ffffff !important;
  color: #111827;
}

:is(.dark) .filter-bar {
  background-color: #1f2937 !important; /* dark bg-gray-800 */
  color: #f9fafb;
  border-bottom: 1px solid #374151; /* dark border-gray-700 */
}

/* Table info row inside the fixed header */
.table-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background-color: #ffffff;
}

:is(.dark) .table-info {
  background-color: #1f2937; /* dark bg-gray-800 */
}

/* Scrollable content area between header and footer */
.scrollable-content {
  flex: 1 1 auto;
  overflow: auto;
  position: relative;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(203, 213, 225, 0.5) transparent; /* Firefox */
  scrollbar-gutter: stable; /* Prevent layout shift */
}

:is(.dark) .scrollable-content {
  scrollbar-color: rgba(55, 65, 81, 0.5) transparent; /* dark mode scrollbar colors for Firefox */
}

/* Fixed footer at the bottom */
.fixed-footer {
  flex-shrink: 0;
  background: white;
  z-index: 40;
  border-top: 1px solid #e5e7eb;
  /* Remove shadow for cleaner look */
  box-shadow: none;
  width: 100%;
  /* Set explicit height to prevent growing */
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0;
  overflow: visible; /* Allow select dropdown to appear */
}

:is(.dark) .fixed-footer {
  background: #1f2937; /* dark bg-gray-800 */
  border-top: 1px solid #374151; /* dark border-gray-700 */
  box-shadow: none;
}

/* Footer content wrapper */
.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  height: 100%;
  width: 100%;
  /* Enforce single line layout */
  white-space: nowrap;
}

/* ===== Fixed Table Styling ===== */
/* Table with sticky header and first column */
.fixed-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

/* ALL table headers - explicitly remove ALL shadows */
.fixed-table th {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: #f9fafb; /* light bg-gray-50 */
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  color: #6b7280;
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
  height: auto;
  /* Explicitly remove ALL shadows - important */
  box-shadow: none !important;
  /* Ensure solid background */
  background-clip: padding-box;
}

:is(.dark) .fixed-table th {
  background-color: #111827; /* dark bg-gray-900 */
  color: #9ca3af; /* dark text-gray-400 */
  border-bottom: 1px solid #374151; /* dark border-gray-700 */
}

/* Table header links - improve hover behavior */
.fixed-table th a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
  color: #6b7280;
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

:is(.dark) .fixed-table th a {
  color: #9ca3af; /* dark text-gray-400 */
}

.fixed-table th a:hover {
  color: #4f46e5;
}

:is(.dark) .fixed-table th a:hover {
  color: #818cf8; /* dark indigo-400 */
}

/* Active sort header */
.fixed-table th a svg.text-indigo-500 {
  color: #4f46e5;
}

:is(.dark) .fixed-table th a svg.text-indigo-500 {
  color: #818cf8; /* dark indigo-400 */
}

/* First column header (corner) */
.fixed-table th.sticky.left-0 {
  z-index: 30;
  background-color: #f9fafb; /* light bg-gray-50 */
  /* Right border that won't scroll away */
  border-right: 1px solid #e5e7eb; /* light border-gray-200 */
}

:is(.dark) .fixed-table th.sticky.left-0 {
  background-color: #111827; /* dark bg-gray-900 */
  border-right: 1px solid #374151; /* dark border-gray-700 */
}

/* First column cells */
.fixed-table td.sticky.left-0 {
  position: sticky;
  left: 0;
  background-color: #f9fafb; /* light bg-gray-50 */
  z-index: 10;
  /* Right border that won't scroll away */
  border-right: 1px solid #e5e7eb; /* light border-gray-200 */
}

:is(.dark) .fixed-table td.sticky.left-0 {
  background-color: #1f2937; /* dark bg-gray-800 */
  border-right: 1px solid #374151; /* dark border-gray-700 */
}

/* Table cells */
.fixed-table td {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-bottom: 1px solid #e5e7eb;
  height: auto;
}

/* Listing text colors */
.fixed-table td.listing-amount, .listing-number {
  color: #111827; /* text-gray-900 */
}

.listing-text {
  color: #6b7280; /* text-gray-500 */
}

.listing-title {
  color: #111827; /* text-gray-900 */
}

:is(.dark) .fixed-table td.listing-amount, 
:is(.dark) .listing-number,
:is(.dark) .listing-title {
  color: #f9fafb; /* text-gray-50 */
}

:is(.dark) .listing-text {
  color: #9ca3af; /* dark:text-gray-400 */
}

:is(.dark) .fixed-table td {
  border-bottom: 1px solid #374151; /* dark border-gray-700 */
}

/* Row hover effect */
.fixed-table tbody tr:hover {
  background-color: #f9fafb;
}

:is(.dark) .fixed-table tbody tr:hover {
  background-color: #1e293b; /* dark bg-slate-800 for a subtle hover */
}

/* Ensure sticky cells maintain proper background when row is hovered */
.fixed-table tr:hover td.sticky.left-0 {
  background-color: #f3f4f6; /* light bg-gray-100 */
}

:is(.dark) .fixed-table tr:hover td.sticky.left-0 {
  background-color: #1e293b; /* dark bg-slate-800 */
}

/* Shadow styles have been removed */

/* Column minimum widths */
.min-w-250 { min-width: 250px; }
.min-w-170 { min-width: 170px; }
.min-w-150 { min-width: 150px; }
.min-w-130 { min-width: 130px; }
.min-w-120 { min-width: 120px; }
.min-w-100 { min-width: 100px; }

/* ===== Custom Scrollbars ===== */
/* WebKit browsers (Chrome, Safari, Edge) */
.scrollable-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: transparent;
}

.scrollable-content::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

:is(.dark) .scrollable-content::-webkit-scrollbar-track {
  background-color: #1f2937; /* dark bg-gray-800 */
}

.scrollable-content::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 4px;
}

:is(.dark) .scrollable-content::-webkit-scrollbar-thumb {
  background-color: #4b5563; /* dark bg-gray-600 */
}

.scrollable-content::-webkit-scrollbar-thumb:hover {
  background-color: #a1a1a1;
}

:is(.dark) .scrollable-content::-webkit-scrollbar-thumb:hover {
  background-color: #6b7280; /* dark bg-gray-500 */
}

/* ===== Conditional Formatting ===== */
/* These classes are used to highlight cells based on value conditions */
.highlight-red {
  color: #dc2626;
  font-weight: 500;
}
:is(.dark) .highlight-red {
  color: #ef4444; /* red-500 */
}

.highlight-yellow {
  color: #d97706;
  font-weight: 500;
}
:is(.dark) .highlight-yellow {
  color: #f59e0b; /* amber-500 */
}

.highlight-blue {
  color: #2563eb;
  font-weight: 500;
}
:is(.dark) .highlight-blue {
  color: #3b82f6; /* blue-500 */
}

.highlight-green {
  color: #059669;
  font-weight: 500;
}
:is(.dark) .highlight-green {
  color: #10b981; /* green-500 */
}

/* ===== Filter Dropdown ===== */
.filter-dropdown {
  position: relative;
}

/* Light mode styles for filter buttons */
.filter-dropdown button {
  background-color: #ffffff !important;
  color: #111827 !important;
  border-color: #d1d5db !important;
}

:is(.dark) .filter-dropdown button {
  background-color: #1f2937 !important; /* dark bg-gray-800 */
  color: #f9fafb !important;
  border-color: #4b5563 !important; /* dark border-gray-600 */
}

.filter-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;  /* Changed from left:0 to right:0 to align to the right edge */
  z-index: 50;
  min-width: 14rem;
  max-width: 20rem;
  background-color: white;
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  margin-top: 0.25rem;
  padding: 0.5rem;
}

:is(.dark) .filter-dropdown-menu {
  background-color: #1f2937; /* dark bg-gray-800 */
  border: 1px solid #374151; /* dark border-gray-700 */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

.filter-dropdown-menu-item {
  padding: 0.5rem;
  font-size: 0.875rem;
}

/* Light mode label colors explicitly set */
.filter-dropdown-menu-item label {
  color: #374151; /* text-gray-700 */
}

:is(.dark) .filter-dropdown-menu-item label {
  color: #d1d5db; /* dark text-gray-300 */
}

.filter-dropdown-menu-item:hover {
  background-color: #f9fafb;
  border-radius: 0.25rem;
}

:is(.dark) .filter-dropdown-menu-item:hover {
  background-color: #374151; /* dark bg-gray-700 */
}

/* ===== Search Input ===== */
.search-container {
  position: relative;
  flex-grow: 1;
  /* Restore to original full width */
  max-width: 24rem;
}

.search-input {
  width: 100%;
  padding-right: 2.5rem;
  color: #111827 !important; /* text-gray-900 for light mode */
  background-color: #ffffff !important;
}

:is(.dark) .search-input {
  color: #f9fafb !important; /* text-gray-50 for dark mode */
  background-color: #1f2937 !important; /* dark bg-gray-800 */
}

.search-icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
}

:is(.dark) .search-icon {
  color: #d1d5db; /* dark:text-gray-300 */
}

/* ===== Pagination Styling ===== */
.pagination {
  display: inline-flex;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 28px;
}

.pagination li {
  margin: 0 2px;
}

/* Simplified pagination button styles */
.pagination a,
.pagination span,
.pagination em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 4px;
  font-size: 0.75rem;
  color: #4b5563;
  text-decoration: none;
  /* Remove borders for cleaner look */
  border: none;
  background: transparent;
}

:is(.dark) .pagination a,
:is(.dark) .pagination span,
:is(.dark) .pagination em {
  color: #9ca3af; /* dark text-gray-400 */
}

.pagination a:hover {
  background-color: #f9fafb;
  border-radius: 0.25rem;
}

:is(.dark) .pagination a:hover {
  background-color: #374151; /* dark bg-gray-700 */
}

.pagination .current,
.pagination em {
  background-color: #eef2ff;
  border-radius: 0.25rem;
  color: #4f46e5;
  font-style: normal;
  font-weight: 500;
}

:is(.dark) .pagination .current,
:is(.dark) .pagination em {
  background-color: #312e81; /* dark indigo-900 */
  color: #818cf8; /* dark indigo-400 */
}

.pagination .next a,
.pagination .last a,
.pagination .prev a,
.pagination .first a {
  color: #6b7280;
}

:is(.dark) .pagination .next a,
:is(.dark) .pagination .last a,
:is(.dark) .pagination .prev a,
:is(.dark) .pagination .first a {
  color: #9ca3af; /* dark text-gray-400 */
}

/* ===== Per Page Selector ===== */
.pagination-select {
  padding: 1px 18px 1px 6px !important;
  font-size: 0.75rem !important;
  height: 1.75rem !important;
  border-radius: 0.25rem !important;
  border: 1px solid #d1d5db !important;
  background-position: right 0.25rem center !important;
  appearance: menulist !important;
  background-color: #ffffff !important;
  color: #111827 !important;
}

:is(.dark) .pagination-select {
  background-color: #1f2937 !important; /* dark bg-gray-800 */
  color: #f9fafb !important; /* text-gray-50 */
  border-color: #374151 !important; /* dark border-gray-700 */
}

/* ===== JavaScript-Enhanced Class Names ===== */
/* These classes are applied by the fixed_table_controller.js */
.sticky {
  position: -webkit-sticky;
  position: sticky;
}

/* ===== Enhanced badge styling for occupancy percentages ===== */
.rounded-full {
  border-radius: 9999px;
}

/* Badge hover effect for better user experience */
span.rounded-full {
  transition: all 0.15s ease-in-out;
}

span.rounded-full:hover {
  transform: scale(1.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Checkbox & radio button styling for filters */
.filter-dropdown-menu input[type="checkbox"],
.filter-dropdown-menu input[type="radio"] {
  border-color: #d1d5db; /* border-gray-300 */
  background-color: #ffffff;
}

:is(.dark) .filter-dropdown-menu input[type="checkbox"],
:is(.dark) .filter-dropdown-menu input[type="radio"] {
  border-color: #4b5563; /* border-gray-600 */
  background-color: #1f2937; /* bg-gray-800 */
}

/* Ensure filter area text and toggle labels are properly styled */
.filter-bar span {
  color: #374151 !important; /* text-gray-700 for light mode */
}

:is(.dark) .filter-bar span {
  color: #f9fafb !important; /* text-gray-50 for dark mode */
}

/* More vibrant badge colors */
.bg-red-100 { background-color: #fee2e2; }
.text-red-800 { color: #991b1b; }

.bg-amber-100 { background-color: #fef3c7; }
.text-amber-800 { color: #92400e; }

.bg-green-100 { background-color: #d1fae5; }
.text-green-800 { color: #065f46; }

.bg-blue-100 { background-color: #dbeafe; }
.text-blue-800 { color: #1e40af; }

.bg-gray-100 { background-color: #f3f4f6; }
.text-gray-600 { color: #4b5563; }

/* Ensure badge text is centered and properly spaced */
.text-center .rounded-full {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding-left: 8px;
  padding-right: 8px;
  min-width: 40px;
}