/**
 * PackSense overrides — forces dark theme on all templates regardless of OS preference.
 * All variables resolve to the dark palette defined in packsense-native-controls.css.
 */

/* Force dark background on html/body even when OS is in light mode */
html, html.ps-app, html.ps-app body, body {
  background-color: #0a0a0b !important;
  color: #f9fafb !important;
}

/* Only sticky nav bars get the header background, not hero/content .header divs */
.ps-app .site-header,
.ps-app .nav-header,
.ps-app header.sticky,
.ps-app .main-nav {
  background: var(--ps-header-bg) !important;
  border-color: var(--ps-border) !important;
  color: var(--ps-text) !important;
}

.ps-app .sidebar,
.ps-app .sidebar-section,
.ps-app .analysis-section,
.ps-app .metric-card,
.ps-app .review-card,
.ps-app .card,
.ps-app .login-card,
.ps-app .form-container,
.ps-app .modal-content,
.ps-app .product-grid .card,
.ps-app .card-featured {
  background: var(--ps-card-bg) !important;
  border-color: var(--ps-border) !important;
  color: var(--ps-text) !important;
}

.ps-app .nav-link,
.ps-app .review-filter,
.ps-app .action-btn,
.ps-app .btn-secondary {
  color: var(--ps-text) !important;
  border-color: var(--ps-border) !important;
}

.ps-app .nav-link:hover,
.ps-app .review-filter:hover {
  background: var(--ps-accent-soft) !important;
}

.ps-app h1,
.ps-app h2,
.ps-app h3,
.ps-app h4,
.ps-app h5,
.ps-app h6,
.ps-app p,
.ps-app label,
.ps-app .metric-label,
.ps-app .metric-value,
.ps-app .page-heading,
.ps-app .form-title,
.ps-app .title {
  color: inherit;
}

.ps-app .page-sub,
.ps-app .sub,
.ps-app .meta,
.ps-app .metric-label,
.ps-app .filter-count {
  color: var(--ps-text-muted) !important;
}

.ps-app .bg-layer {
  background: var(--ps-bg-gradient) !important;
}

.ps-app .main-container,
.ps-app .page-main,
.ps-app .main-layout {
  color: var(--ps-text);
}

/* Index / analyze form */
.ps-app .form-group label {
  color: var(--ps-text-secondary) !important;
}

.ps-app .form-group input,
.ps-app .form-group select,
.ps-app .form-group textarea {
  background: var(--ps-input-bg) !important;
  color: var(--ps-input-text) !important;
  border-color: var(--ps-input-border) !important;
}

/* Analysis page selects forced dark in inline CSS */
.ps-app select,
.ps-app select:focus,
.ps-app select:hover,
.ps-app select:active,
.ps-app .filter-select {
  background: var(--ps-input-bg) !important;
  background-color: var(--ps-input-bg) !important;
  color: var(--ps-input-text) !important;
  border-color: var(--ps-input-border) !important;
}

.ps-app select option {
  background: var(--ps-bg-elevated) !important;
  color: var(--ps-text) !important;
}

/* Buttons */
.ps-app .btn-primary,
.ps-app .btn-success,
.ps-app .submit-btn,
.ps-app .action-btn.btn-success {
  background: var(--ps-accent-gradient) !important;
  color: #fff !important;
  border: none !important;
}

.ps-app .btn-secondary,
.ps-app .cta-button {
  background: var(--ps-surface) !important;
  color: var(--ps-text) !important;
  border: 1px solid var(--ps-border) !important;
}

/* Tables */
.ps-app table th,
.ps-app table td {
  border-color: var(--ps-border) !important;
}

.ps-app table.cmp tr:hover td {
  background: var(--ps-accent-soft) !important;
}

/* Emotion / CEB components */
.ps-app .ceb-legend-item strong,
.ps-app .ceb-chip-stats strong {
  color: var(--ps-text) !important;
}

.ps-app .ceb-sub-empty,
.ps-app .ceb-sub-hint {
  color: var(--ps-text-muted) !important;
}

/* Scraping progress card */
.ps-app .card[style*="background"] {
  backdrop-filter: blur(12px);
}

/* Tailwind / Intro page dark classes — always active */
.ps-app .bg-charcoal,
.ps-app .bg-charcoal-800,
.ps-app .bg-charcoal-700 {
  background-color: var(--ps-bg-elevated) !important;
}

/* Keep white text white even on light-mode OS */
.ps-app .text-white {
  color: #ffffff !important;
}

.ps-app .glass {
  background: var(--ps-surface) !important;
  border-color: var(--ps-border) !important;
}

.ps-app .border-white\/5,
.ps-app .border-white\/10 {
  border-color: var(--ps-border) !important;
}

.ps-app .bg-dots {
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) !important;
}

/* Mobile sidebar overlay */
@media (max-width: 1024px) {
  .ps-app .sidebar {
    max-width: min(92vw, 360px);
  }

  .ps-app .main-layout {
    flex-direction: column;
  }

  .ps-app .header {
    padding-top: calc(12px + var(--ps-safe-top));
  }

  .ps-app .actions-bar,
  .ps-app .actions-inner {
    padding-bottom: calc(12px + var(--ps-safe-bottom));
  }
}

@media (max-width: 768px) {
  .ps-app .nav-links {
    flex-wrap: wrap;
    gap: 8px;
  }

  .ps-app .product-grid--five {
    grid-template-columns: 1fr !important;
  }

  .ps-app .metric-card {
    min-width: 0;
  }

  .ps-app .review-card {
    padding: 14px !important;
  }
}

/* Landscape phones */
@media (max-height: 500px) and (orientation: landscape) {
  .ps-app .header {
    min-height: auto !important;
  }
}