/**
 * Dinesafe Data Explorer - Specialized Styles
 * Additional styling specifically for the data exploration interface
 * Extends the base design system from main.css and components.css
 */

/* ==========================================================================
   Data Explorer Layout
   ========================================================================== */

.data-explorer-page {
  --explorer-sidebar-width: 350px;
  --explorer-header-height: 60px;
}

.data-explorer-main {
  display: flex;
  min-height: calc(100vh - var(--explorer-header-height));
  background: var(--color-background);
}

/* Header adjustments for data explorer */
.data-explorer-page .app-title .title-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.data-explorer-page .app-title .title-link:hover {
  opacity: 0.8;
}

/* ==========================================================================
   Controls Panel
   ========================================================================== */

.data-controls-panel {
  width: var(--explorer-sidebar-width);
  background: var(--color-white);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  height: calc(100vh - var(--explorer-header-height));
  position: sticky;
  top: 0;
}

.controls-content {
  padding: var(--spacing-6);
}

.section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-4) 0;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: var(--spacing-2);
}

.subsection-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: var(--spacing-4) 0 var(--spacing-3) 0;
}

/* Dataset Overview */
.dataset-overview {
  margin-bottom: var(--spacing-6);
}

.overview-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-3);
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-4);
  text-align: center;
}

.stat-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--spacing-1);
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

/* Quick Filters */
.quick-filters {
  margin-bottom: var(--spacing-6);
}

.quick-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2);
}

.quick-filter-btn {
  padding: var(--spacing-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.quick-filter-btn:hover {
  background: var(--color-gray-50);
  border-color: var(--color-border-dark);
  transform: translateY(-1px);
}

.quick-filter-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.quick-filter-btn.severity-critical.active {
  background: var(--color-danger);
  border-color: var(--color-danger);
}

.quick-filter-btn.severity-significant.active {
  background: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--color-text-primary);
}

.quick-filter-btn.severity-minor.active {
  background: var(--color-info);
  border-color: var(--color-info);
}

.quick-filter-btn.has-fines.active {
  background: var(--color-success);
  border-color: var(--color-success);
}

/* Advanced Filters */
.advanced-filters {
  margin-bottom: var(--spacing-6);
}

.filter-group {
  margin-bottom: var(--spacing-4);
}

.filter-label {
  display: block;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-sm);
}

.filter-select,
.search-input,
.date-input,
.range-input {
  width: 100%;
  padding: var(--spacing-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  background: var(--color-white);
}

.filter-select:focus,
.search-input:focus,
.date-input:focus,
.range-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}

.date-range-inputs,
.range-inputs {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.date-separator,
.range-separator {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.checkbox-option input[type="checkbox"] {
  margin: 0;
}

.clear-filters-btn {
  width: 100%;
  padding: var(--spacing-3);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.2s ease;
}

.clear-filters-btn:hover {
  background: var(--color-gray-50);
  border-color: var(--color-border-dark);
}

/* Analysis Tools */
.analysis-tools {
  margin-bottom: var(--spacing-4);
}

.analysis-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.analysis-btn {
  width: 100%;
  padding: var(--spacing-3);
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-white);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.2s ease;
}

.analysis-btn:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-1px);
}

/* ==========================================================================
   Data Display Area
   ========================================================================== */

.data-display-area {
  flex: 1;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex scrolling */
}

/* Data Tabs */
.data-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.tab-button {
  padding: var(--spacing-4) var(--spacing-6);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.2s ease;
}

.tab-button:hover {
  color: var(--color-text-primary);
  background: var(--color-gray-50);
}

.tab-button.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background: var(--color-white);
}

/* Data Views */
.data-view {
  flex: 1;
  padding: var(--spacing-6);
  display: none;
  overflow: hidden;
}

.data-view.active {
  display: flex;
  flex-direction: column;
}

/* Table View */
.table-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-4);
  gap: var(--spacing-4);
  flex-wrap: wrap;
}

.table-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.table-options {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  flex-wrap: wrap;
}

.page-size-select {
  padding: var(--spacing-1) var(--spacing-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.pagination-btn {
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
  background: var(--color-gray-50);
  border-color: var(--color-border-dark);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#page-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.table-container {
  flex: 1;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
}

.data-table th,
.data-table td {
  padding: var(--spacing-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}

.data-table th {
  background: var(--color-surface);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  position: sticky;
  top: 0;
  z-index: 10;
}

.data-table th.sortable {
  cursor: pointer;
  user-select: none;
}

.data-table th.sortable:hover {
  background: var(--color-gray-100);
}

.data-table th.sortable::after {
  content: " ↕";
  opacity: 0.5;
}

.data-table th.sorted-asc::after {
  content: " ↑";
  opacity: 1;
}

.data-table th.sorted-desc::after {
  content: " ↓";
  opacity: 1;
}

.data-table tbody tr:hover {
  background: var(--color-gray-50);
}

.data-table tbody tr {
  cursor: pointer;
}

/* Status indicators */
.status-pass { color: var(--color-success); font-weight: var(--font-weight-medium); }
.status-conditional { color: var(--color-warning); font-weight: var(--font-weight-medium); }
.status-fail { color: var(--color-danger); font-weight: var(--font-weight-medium); }

.severity-critical { color: var(--color-danger); font-weight: var(--font-weight-medium); }
.severity-significant { color: var(--color-warning); font-weight: var(--font-weight-medium); }
.severity-minor { color: var(--color-info); font-weight: var(--font-weight-medium); }

.fine-amount {
  font-weight: var(--font-weight-medium);
  color: var(--color-success);
}

/* Analytics View */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-6);
  height: 100%;
  overflow-y: auto;
}

.chart-container {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
}

.chart-container.full-width {
  grid-column: 1 / -1;
}

.chart-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-4) 0;
  text-align: center;
}

.chart {
  flex: 1;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Insights View */
.insights-container {
  height: 100%;
  overflow-y: auto;
}

#insights-content {
  max-width: 800px;
  margin: 0 auto;
}

.insight-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-6);
  margin-bottom: var(--spacing-4);
  box-shadow: var(--shadow-sm);
}

.insight-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-3) 0;
}

.insight-content {
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.insight-highlight {
  background: var(--color-primary-light);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
  .data-explorer-main {
    flex-direction: column;
  }

  .data-controls-panel {
    width: 100%;
    height: auto;
    position: static;
    max-height: 50vh;
    order: 2;
  }

  .data-display-area {
    order: 1;
    min-height: 50vh;
  }

  .table-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .table-options {
    justify-content: center;
  }

  .analytics-grid {
    grid-template-columns: 1fr;
  }

  .overview-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .quick-filter-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .data-controls-panel {
    display: none;
  }

  .data-tabs {
    display: none;
  }

  .data-display-area {
    width: 100%;
  }

  .table-controls {
    display: none;
  }
}