/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * With Propshaft (Rails 8 default), we use CSS @import statements instead of Sprockets manifest syntax.
 * These @import statements will be processed by the browser directly.
 */

/* Import all modular CSS files in order */
@import url("/assets/00_base-10a3b5a0.css");
@import url("/assets/01_header-6c6c066b.css");
@import url("/assets/02_mobile_navigation-9815b674.css");
@import url("/assets/03_footer-89fdc48e.css");
@import url("/assets/04_legacy_header-a5314c8d.css");
@import url("/assets/05_responsive-5eb9620a.css");
@import url("/assets/06_quotes-02c8760c.css");
@import url("/assets/07_discover-8c2b12dc.css");
@import url("/assets/08_admin-b1f8a773.css");
@import url("/assets/09_profile-385e731b.css");
@import url("/assets/10_profile_dropdown-808e1fa0.css");
@import url("/assets/11_flash_messages-0dc4962b.css");

/* Visually hidden but focusable when targeted (for skip links & captions) */
.sr-only:not(:focus):not(:active) {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Mobile viewport optimization for scrollable tables */
@media (max-width: 768px) {
  html, body {
    overflow-x: auto; /* Allow horizontal scrolling */
  }
  
  /* Ensure main content containers don't prevent scrolling */
  .admin-main-content,
  .main-content {
    overflow-x: visible;
    min-width: 0; /* Allow shrinking */
  }
}

/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ========================================
   SORTABLE TABLE CONTROLLER INTEGRATION
   Ensures JavaScript sortable controller works with unified styling
   ======================================== */

/* Basic sortable table setup */
table[data-controller="sortable-table"] th {
  position: relative;
  user-select: none;
}

table[data-controller="sortable-table"] th[tabindex] {
  cursor: pointer;
}

/* Unified sorting indicators for sortable controller */
table[data-controller="sortable-table"] th[aria-sort="none"]::after {
  display: none; /* No indicator for unsorted columns */
}

table[data-controller="sortable-table"] th[aria-sort="ascending"]::after {
  content: ' ▲';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: #8b7355;
  font-size: 0.75rem;
  font-weight: normal;
}

table[data-controller="sortable-table"] th[aria-sort="descending"]::after {
  content: ' ▼';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: #8b7355;
  font-size: 0.75rem;
  font-weight: normal;
}

table[data-controller="sortable-table"] th:focus {
  outline: 2px solid #8b7355;
  outline-offset: 2px;
}

/* Table Section Container - Mobile-First Design */
.app-table-section {
  background: rgba(245, 240, 232, 0.1);
  backdrop-filter: blur(2px);
  border-radius: 12px;
  padding: 0rem;
  border: 2px solid #8b7355;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  width: 100%;
  overflow-x: auto; /* Always allow horizontal scrolling */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Mobile optimizations for table sections */
@media (max-width: 768px) {
  .app-table-section {
    padding: 0rem;
    border-radius: 8px;
    margin: 0;
    width: 100%;
    /* CRITICAL: Maintain horizontal scrolling on mobile */
    overflow-x: auto;
    position: relative;
    /* Force hardware acceleration for smooth scrolling */
    transform: translateZ(0);
    will-change: scroll-position;
  }
}

/* Main Table Class - Unified for All Tables */
.app-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.9rem;
  min-width: 600px; /* Ensure horizontal scroll on small screens */
}

/* Mobile specific table improvements */
@media (max-width: 768px) {
  .app-table {
    font-size: 0.8rem;
    min-width: 900px; /* Increased to ensure all columns fit */
    table-layout: auto; /* Changed from fixed to auto for flexible column sizing */
    margin: 0;
  }
  
  .app-table th,
  .app-table td {
    padding: 0.75rem 0.5rem;
    white-space: nowrap;
    min-width: 100px; /* Increased base minimum width */
  }
  
  /* Ensure action columns have adequate space */
  .app-table th:last-child,
  .app-table td:last-child {
    min-width: 120px; /* Increased from 60px to prevent cutoff */
    width: auto; /* Allow flexible width instead of fixed */
    padding-right: 1rem; /* Extra padding for visual breathing room */
  }
  
  /* Content columns get proper minimum widths */
  .app-table th:nth-child(1),
  .app-table td:nth-child(1) {
    min-width: 120px; /* First column (usually name/ID) */
  }
  
  .app-table th:nth-child(2),
  .app-table td:nth-child(2) {
    min-width: 150px; /* Second column (usually email/description) */
  }
  
  .app-table th:nth-child(3),
  .app-table td:nth-child(3) {
    min-width: 100px; /* Third column */
  }
  
  /* Remove overly restrictive max-width constraints */
  .app-table td {
    /* Removed max-width that was causing cutoff */
    overflow: visible;
    text-overflow: initial;
  }
  
  /* Only apply truncation to very long content types */
  .app-table td[data-label*="Email"],
  .app-table td[data-label*="Description"],
  .app-table td[data-label*="Content"] {
    max-width: 200px; /* Increased from 120px */
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .app-table td[data-label*="Date"],
  .app-table td[data-label*="Time"] {
    min-width: 120px; /* Ensure date columns are readable */
    font-size: 0.75rem;
  }
}

/* Table Headers - Unified Styling */
.app-table th {
  background: rgba(139, 115, 85, 0.1);
  color: #3d2c1d;
  padding: 1rem;
  text-align: left;
  border-bottom: 2px solid rgba(139, 115, 85, 0.3);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
  outline: none;
}

.app-table th:focus {
  outline: 2px solid #8b7355;
  outline-offset: 2px;
}

.app-table th:hover {
  background: rgba(139, 115, 85, 0.2);
}

/* Unified Sorting Indicators - Clean Triangles */
.app-table th[data-type][aria-sort="none"]::after {
  display: none; /* Remove the unsorted state arrow completely */
}

.app-table th[aria-sort="ascending"]::after {
  content: ' ▲';
  color: #8b7355;
  font-size: 0.75rem;
  margin-left: 0.25rem;
}

.app-table th[aria-sort="descending"]::after {
  content: ' ▼';
  color: #8b7355;
  font-size: 0.75rem;
  margin-left: 0.25rem;
}

/* Table Cells - Unified Styling */
.app-table td {
  padding: 1rem;
  border-bottom: 1px solid rgba(139, 115, 85, 0.2);
  color: #3d2c1d;
  vertical-align: top;
}

/* Table Rows - Unified Styling */
.app-table tr {
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.app-table tbody tr:hover {
  background: rgba(139, 115, 85, 0.05);
}

/* Responsive breakpoints for column priority system */
@media screen and (max-width: 1024px) {
  .col-priority-low {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .col-priority-medium {
    display: none;
  }
}

@media screen and (max-width: 576px) {
  .col-priority-high {
    display: none;
  }
}

/* Specialized Cell Types */
.app-table .date-cell {
  font-weight: 500;
  min-width: 150px;
  width: 150px;
  white-space: nowrap;
}

.app-table .quote-preview {
  max-width: 300px;
  font-style: italic;
  line-height: 1.4;
}

.app-table .content-preview {
  max-width: 300px;
  line-height: 1.4;
}

/* Tag and Badge Styling */
.app-table .tag-list {
  display: flex;
  gap: 0.25rem;
  min-width: 150px;
  max-width: 300px;
}

.app-table .tag-badge,
.app-tag-badge {
  background: rgba(139, 115, 85, 0.15);
  color: #3d2c1d;
  padding: 0.15rem 0.5rem;
  border-radius: 8px;
  font-size: 0.75rem;
  white-space: nowrap;
  border: 1px solid rgba(139, 115, 85, 0.2);
}

.app-table .tag-more {
  color: #8b7355;
  font-size: 0.75rem;
  font-style: italic;
}

/* Status Badges */
.app-table .status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 16px;
  font-size: 0.875rem;
  font-weight: 500;
  background: rgba(139, 115, 85, 0.1);
  color: #3d2c1d;
}

.app-table .role-badge {
  background: rgba(139, 115, 85, 0.1);
  color: #3d2c1d;
  padding: 0.125rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
}

.app-table .user-info {
  font-weight: 500;
  color: #3d2c1d;
}

.app-table .secondary-info {
  color: #8b7355;
  font-size: 0.875rem;
}

.app-table .monospace {
  font-family: monospace;
  color: #6c757d;
  font-size: 0.875rem;
}

/* Empty State */
.app-table .empty-state {
  text-align: center;
  padding: 3rem;
  color: #8b7355;
}

.app-table .empty-state h3 {
  margin: 0 0 1rem 0;
  color: #3d2c1d;
  font-family: 'Crimson Text', serif;
}

.app-table .empty-state p {
  margin: 0 0 1.5rem 0;
  font-style: italic;
}

/* Checkbox Column */
.app-table .checkbox-cell {
  width: 50px;
  max-width: 50px;
  min-width: 50px;
  padding: 1rem 0.5rem;
  text-align: center;
  vertical-align: middle;
}

.app-table .checkbox-cell input[type="checkbox"] {
  margin: 0;
  transform: scale(1.1);
}

/* Mobile responsive checkbox columns */
@media (max-width: 768px) {
  .app-table .checkbox-cell {
    width: 40px;
    max-width: 40px;
    min-width: 40px !important;
    padding: 0.75rem 0.25rem;
  }
}

/* Action Links */
.app-table .action-link {
  color: #8b7355;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.app-table .action-link:hover {
  color: #3d2c1d;
  text-decoration: underline;
}

/* Focus and accessibility enhancements */
.app-table th[tabindex]:focus,
.app-table tr[tabindex]:focus {
  outline: 2px solid #8b7355;
  outline-offset: 2px;
}

.app-table tr[data-controller="row-link"] {
  cursor: pointer;
}

.app-table tr[data-controller="row-link"]:focus {
  background-color: rgba(139, 115, 85, 0.1);
}

/* Table badges and status indicators - Legacy Support */
.table-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: rgba(139, 115, 85, 0.1);
  color: #3d2c1d;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.table-badge-admin {
  background: rgba(139, 69, 19, 0.1);
  color: #8b4513;
}

/* Empty state styling - Legacy Support */
.table-empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #8b7355;
}

.table-empty-state h3 {
  margin: 0 0 0.5rem 0;
  color: #3d2c1d;
}