/* ===== Base Styles ===== */
.container {
  padding: 0 10px;
}
.datatable-center-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ===== Responsive Styles ===== */
@media (max-width: 768px) {
  .container {
    padding: 0 5px;
  }
  h2 {
    font-size: 1.3rem;
    margin-bottom: 15px;
  }
  .form-label {
    font-size: 1rem;
    font-weight: 600;
  }
  #cbo-table {
    font-size: 1rem !important;
  }
  .tabulator-cell {
    padding: 8px 4px !important;
    font-size: 1rem !important;
    line-height: 1.4;
  }
  .tabulator-header-cell {
    padding: 10px 4px !important;
    font-size: 1rem !important;
    font-weight: 600;
    background-color: #f8f9fa !important;
  }
  .tabulator-footer {
    font-size: 1rem;
  }
  .tabulator-paginator {
    font-size: 1rem;
  }
  .tabulator-paginator button {
    padding: 8px 12px;
    font-size: 1rem;
    margin: 2px;
  }
  .occupation-link {
    font-size: 1rem !important;
    word-break: break-word;
    line-height: 1.4;
  }
  .number-cell, .currency-cell {
    font-size: 1rem !important;
    font-weight: 500;
  }
  /* Make table more readable on mobile */
  .tabulator-row {
    border-bottom: 2px solid #e9ecef;
  }
  .tabulator-row:nth-child(even) {
    background-color: #f8f9fa;
  }
  /* Increase touch targets */
  .tabulator-header-filter input {
    font-size: 1rem !important;
    padding: 6px 8px !important;
    height: auto !important;
  }
  /* Better spacing for filter */
  .ts-wrapper {
    font-size: 1rem;
  }
  .ts-control {
    min-height: 44px;
    padding: 8px 12px;
  }
  .ts-dropdown {
    font-size: 1rem;
  }
  /* Ensure proper table layout on mobile */
  .table-wrapper {
    position: relative;
  }
  /* Set minimum width to ensure CBO + Occupation columns are visible */
  .tabulator {
    min-width: 520px; /* CBO (120px) + Occupation (400px) = 520px */
    width: 100% !important;
  }
  .table-wrapper {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: auto !important;
  }
  /* Custom scrollbar for better UX */
  .table-wrapper::-webkit-scrollbar {
    height: 6px;
  }
  .table-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
  .table-wrapper::-webkit-scrollbar-thumb {
    background: #007bff;
    border-radius: 3px;
  }
  .table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #0056b3;
  }
}
@media (max-width: 600px) {
  .tabulator-footer {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
  }
  .tabulator-paginator {
    min-width: 0 !important;
    width: 100% !important;
    flex-shrink: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Hide the page size selector, label, and navigation buttons (first, previous, next, last) in the Tabulator paginator on small screens, so only the page number buttons remain visible. */
  .tabulator-paginator .tabulator-page-size,
  .tabulator-paginator label,
  .tabulator-paginator button[data-page="first"],
  .tabulator-paginator button[data-page="prev"],
  .tabulator-paginator button[data-page="next"],
  .tabulator-paginator button[data-page="last"] {
    display: none !important;
  }
  /* Decrease datatable font-size for small screens */
  .tabulator .tabulator-cell,
  .tabulator .tabulator-col,
  .tabulator .tabulator-group,
  .tabulator .tabulator-group .tabulator-group-header,
  .tabulator .tabulator-row .tabulator-cell *,
  .tabulator .tabulator-responsive-collapse,
  .tabulator .tabulator-responsive-collapse * {
    font-size: 0.9rem !important;
  }  
}
h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #2c3e50;
}
#cbo-table {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  background-color: #ffffff;
}
.table-wrapper {
  width: 100%;
  min-width: 0 !important;
  overflow-x: visible !important;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.tabulator {
  min-width: 0 !important;
  width: 100% !important;
}
.occupation-link {
  color: #007bff;
  text-decoration: none;
}
.occupation-link:hover {
  color: #0056b3;
  text-decoration: underline;
}
.number-cell {
  text-align: right;
  font-family: 'Courier New', monospace;
}
.currency-cell {
  text-align: right;
  font-family: 'Courier New', monospace;
  color: #28a745;
}