/* Custom styles beyond Tailwind */
.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* Search results styling */
#search-results, #home-search-results {
    max-height: 300px;
    overflow-y: auto;
}

.search-result-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
}

.search-result-item:hover {
    background-color: #f8fafc;
}

.search-result-item:last-child {
    border-bottom: none;
}

.ticker {
    font-weight: 600;
    color: #1e293b;
}

.company-name {
    color: #64748b;
}

.sector {
    font-size: 0.75rem;
    color: #94a3b8;
}
/* Button states and transitions */
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

th, td {
    transition: all 0.2s ease-in-out;
}

.bg-green-100 {
    background-color: #dcfce7;
    transition: background-color 0.3s ease;
}

.bg-red-100 {
    background-color: #fee2e2;
    transition: background-color 0.3s ease;
}

/* Add to style.css */

/* Base table styles */
table {
  width: 100%;
  table-layout: auto;
  transition: all 0.3s ease;
}

/* Make sure the table container takes full width */
.overflow-x-auto {
  width: 100%;
}

/* First two columns (Account and Code) have fixed widths */
table th:first-child,
table td:first-child {
  width: 30%;
  min-width: 180px;
}

table th:nth-child(2),
table td:nth-child(2) {
  width: 10%;
  min-width: 60px;
}

/* Year columns should expand/contract */
table th:nth-child(n+3),
table td:nth-child(n+3) {
  transition: width 0.3s ease;
}

/* Responsive widths based on number of visible columns */
.table-columns-1 th:nth-child(n+3),
.table-columns-1 td:nth-child(n+3) {
  width: 60%;
}

.table-columns-2 th:nth-child(n+3),
.table-columns-2 td:nth-child(n+3) {
  width: 30%;
}

.table-columns-3 th:nth-child(n+3),
.table-columns-3 td:nth-child(n+3) {
  width: 20%;
}

.table-columns-4 th:nth-child(n+3),
.table-columns-4 td:nth-child(n+3) {
  width: 15%;
}

.table-columns-5 th:nth-child(n+3),
.table-columns-5 td:nth-child(n+3) {
  width: 12%;
}

/* Ensure table fits container on small screens */
@media (max-width: 768px) {
  .overflow-x-auto {
    overflow-x: auto;
  }
  
  table {
    min-width: 100%;
  }
  
  table th:first-child,
  table td:first-child {
    min-width: 140px;
  }
  
  table th:nth-child(2),
  table td:nth-child(2) {
    min-width: 40px;
  }
}