/**
 * Custom layout styles for card collection checklists
 * Extends the default Dimension template to better utilize screen space
 */

/* ============================================================================
   CARDS ARTICLE - WIDER LAYOUT
   ============================================================================ */

/**
 * Make the cards article significantly wider to accommodate tables
 * Default articles are 40rem (640px) which is too narrow for multi-column tables
 */
#main article#cards {
  width: 90rem; /* 1440px - much wider for tables */
  max-width: 95vw; /* On smaller screens, use 95% of viewport width */
}

/* Adjust padding on larger screens for better use of space */
@media screen and (min-width: 1281px) {
  #main article#cards {
    padding: 4.5rem 3.5rem 2rem 3.5rem; /* More horizontal padding on large screens */
  }
}

/* Medium screens - still keep it wider than default */
@media screen and (min-width: 737px) and (max-width: 1280px) {
  #main article#cards {
    width: 85vw;
    padding: 4.5rem 2.5rem 1.5rem 2.5rem;
  }
}

/* Tablet and below - let it breathe to edges */
@media screen and (max-width: 736px) {
  #main article#cards {
    width: 95vw;
    padding: 3.5rem 1.5rem 1rem 1.5rem;
  }
}

/* Mobile - maximize space */
@media screen and (max-width: 480px) {
  #main article#cards {
    width: 98vw;
    padding: 3rem 1rem 0.5rem 1rem;
  }
}

/* ============================================================================
   TABLE IMPROVEMENTS
   ============================================================================ */

/**
 * Better table layout within cards article
 */
#main article#cards .table-wrapper {
  margin: 0 -0.5rem; /* Negative margin to extend table to edges */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Improve table cell spacing for readability with more columns */
#main article#cards table th,
#main article#cards table td {
  padding: 0.6em 0.5em; /* Slightly tighter padding for more columns */
  white-space: nowrap; /* Prevent text wrapping in cells */
}

/* Card number column - keep narrow */
#main article#cards table th:first-child,
#main article#cards table td:first-child {
  width: 3em;
  text-align: center;
}

/* Card name column - allow more space */
#main article#cards table th:nth-child(2),
#main article#cards table td:nth-child(2) {
  min-width: 12em;
  white-space: normal; /* Allow card names to wrap if needed */
}

/* ============================================================================
   CONTROLS BAR
   ============================================================================ */

/**
 * Improve controls layout for wider article
 */
#main article#cards .controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: center;
}

#main article#cards .controls input[type="text"] {
  flex: 1 1 300px; /* Search input grows, minimum 300px */
  min-width: 0; /* Allow flexbox to shrink below content size */
}

#main article#cards .controls label {
  flex: 0 0 auto; /* Checkbox label stays fixed size */
  white-space: nowrap;
}

@media screen and (max-width: 480px) {
  #main article#cards .controls {
    gap: 0.75rem;
  }

  #main article#cards .controls input[type="text"] {
    flex: 1 1 100%; /* Full width on mobile */
  }
}

/* ============================================================================
   TAB NAVIGATION
   ============================================================================ */

/**
 * Better series tab layout in wider space
 */
#main article#cards .cards-tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  justify-content: flex-start;
}

#main article#cards .cards-tab-nav button {
  flex: 0 1 auto; /* Buttons size to content */
}

/* Stack tabs on smaller screens */
@media screen and (max-width: 480px) {
  #main article#cards .cards-tab-nav {
    gap: 0.5rem;
  }

  #main article#cards .cards-tab-nav button {
    flex: 1 1 calc(50% - 0.25rem); /* Two buttons per row on mobile */
    min-width: 0;
  }
}

/* ============================================================================
   EXPORT BUTTON
   ============================================================================ */

/**
 * Position export button for easy access
 */
#main article#cards .export-csv {
  margin-bottom: 1rem;
}

/* ============================================================================
   RESPONSIVE FONT SIZES
   ============================================================================ */

/**
 * Slightly smaller fonts in tables on large screens to fit more content
 */
@media screen and (min-width: 1281px) {
  #main article#cards table {
    font-size: 0.95em;
  }

  #main article#cards table th {
    font-size: 0.85em;
  }
}

/* Increase font size on mobile for better readability */
@media screen and (max-width: 480px) {
  #main article#cards table {
    font-size: 0.85em;
  }

  #main article#cards table th,
  #main article#cards table td {
    padding: 0.5em 0.4em;
  }
}

/* ============================================================================
   SCROLLBAR STYLING (for webkit browsers)
   ============================================================================ */

/**
 * Custom scrollbar for table wrapper on desktop
 */
@media screen and (min-width: 737px) {
  #main article#cards .table-wrapper::-webkit-scrollbar {
    height: 8px;
  }

  #main article#cards .table-wrapper::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
  }

  #main article#cards .table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
  }

  #main article#cards .table-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
  }
}

/* ============================================================================
   LOADING AND ERROR STATES
   ============================================================================ */

/**
 * Center loading/error messages in wider layout
 */
#main article#cards table tbody td[colspan] {
  text-align: center;
  padding: 2em 1em;
}

/* ============================================================================
   HIGHLIGHT NEEDS MODE - Visual Focus System
   ============================================================================ */

/**
 * When "Show only needs" is checked, visually emphasize needed cards
 * while dimming owned and extra cards for better focus
 */

/* Dim owned cards (✓) when highlight mode is active */
#cards-container.highlight-needs-mode td.own {
  opacity: 0.3;
  color: #666 !important;
  transition: opacity 0.2s ease, color 0.2s ease;
}

/* Dim extra cards (+#) when highlight mode is active */
#cards-container.highlight-needs-mode td.extra {
  opacity: 0.3;
  color: #555 !important;
  transition: opacity 0.2s ease, color 0.2s ease;
}

/* Enhance "need" cells with brighter background and visual emphasis */
#cards-container.highlight-needs-mode td.need {
  background-color: rgba(255, 80, 80, 0.25) !important;
  color: #ff9999 !important;
  font-weight: 600;
  box-shadow: inset 0 0 8px rgba(255, 80, 80, 0.3);
  transition: all 0.2s ease;
}

/* Add subtle pulse animation to need cells for extra attention */
@keyframes needPulse {
  0%, 100% {
    box-shadow: inset 0 0 8px rgba(255, 80, 80, 0.3);
  }
  50% {
    box-shadow: inset 0 0 12px rgba(255, 80, 80, 0.5);
  }
}

#cards-container.highlight-needs-mode td.need {
  animation: needPulse 2s ease-in-out infinite;
}

/* Add red left border to rows containing needs */
#cards-container.highlight-needs-mode tr.has-need {
  border-left: 3px solid #ff5050;
  background-color: rgba(255, 80, 80, 0.05);
}

/* Keep card number and name at normal opacity for context */
#cards-container.highlight-needs-mode tr.has-need td:first-child,
#cards-container.highlight-needs-mode tr.has-need td:nth-child(2) {
  opacity: 1;
  font-weight: 500;
}

/* Hover effect: restore full opacity to see what you have */
#cards-container.highlight-needs-mode tr:hover td.own,
#cards-container.highlight-needs-mode tr:hover td.extra {
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

/* Row hover state enhancement in highlight mode */
#cards-container.highlight-needs-mode tr.has-need:hover {
  background-color: rgba(255, 80, 80, 0.1);
}

/* Reduce animation on mobile to save battery */
@media screen and (max-width: 736px) {
  #cards-container.highlight-needs-mode td.need {
    animation: none;
  }
}