/* ============================================================================
   public\css\light-theme-fixes.css
   ============================================================================ */

/* ============================================================================
   1. GLOBAL TEXT — works on BOTH themes via variables
   ============================================================================ */

/* Any element still using hardcoded white text */
[data-theme="light"] * {
  /* Only override color if it would produce invisible text */
  border-color: inherit;
}

/* Paragraphs and spans that might be hardcoded */
[data-theme="light"] p,
[data-theme="light"] span:not(.logo-text):not(.project-stat-value):not(.stat-info h3),
[data-theme="light"] li,
[data-theme="light"] small {
  color: var(--text-secondary);
}

/* Headings always dark in light mode */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5 {
  color: var(--text-heading) !important;
}

/* Labels */
[data-theme="light"] label {
  color: var(--text-label) !important;
}

/* ============================================================================
   2. INLINE HARDCODED COLORS — common patterns in dashboard.html & others
   ============================================================================ */

/* Hardcoded rgba white text in inline styles */
[data-theme="light"] .option-desc,
[data-theme="light"] .radio-desc,
[data-theme="light"] .summary-label,
[data-theme="light"] .step-label,
[data-theme="light"] .alert-time,
[data-theme="light"] .alert-message,
[data-theme="light"] .share-info,
[data-theme="light"] .project-stat-label,
[data-theme="light"] .api-key-meta,
[data-theme="light"] .api-key-hint,
[data-theme="light"] .video-description,
[data-theme="light"] .pin-gpio,
[data-theme="light"] .dimmer-value {
  color: var(--text-secondary) !important;
}

/* Option and radio titles */
[data-theme="light"] .option-title,
[data-theme="light"] .radio-title,
[data-theme="light"] .summary-value,
[data-theme="light"] .alert-title,
[data-theme="light"] .api-key-name,
[data-theme="light"] .pin-name,
[data-theme="light"] .video-title,
[data-theme="light"] .category-title {
  color: var(--text-heading) !important;
}

/* Cards with hardcoded dark backgrounds */
[data-theme="light"] .option-card,
[data-theme="light"] .radio-card,
[data-theme="light"] .summary-item,
[data-theme="light"] .info-box,
[data-theme="light"] .threshold-section,
[data-theme="light"] .share-section,
[data-theme="light"] .api-key-card,
[data-theme="light"] .pin-card,
[data-theme="light"] .video-card,
[data-theme="light"] .alert-card,
[data-theme="light"] .ml-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

[data-theme="light"] .option-card:hover,
[data-theme="light"] .radio-card:hover,
[data-theme="light"] .video-card:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--border-hover) !important;
}

/* Auth page form container */
[data-theme="light"] .form-container {
  background: white !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-card) !important;
}

/* Auth page header text */
[data-theme="light"] .header p {
  color: var(--text-secondary) !important;
}

/* Auth tabs */
[data-theme="light"] .tabs {
  background: var(--bg-badge) !important;
}

[data-theme="light"] .tab {
  color: var(--text-muted) !important;
}

[data-theme="light"] .tab.active {
  color: var(--accent) !important;
}

/* Back link in auth */
[data-theme="light"] .back-link a {
  background: var(--bg-badge) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
}

/* Password strength */
[data-theme="light"] .password-strength span {
  font-weight: 700;
}

/* ============================================================================
   3. DASHBOARD-SPECIFIC INLINE STYLES
   ============================================================================ */

/* Quick menu */
[data-theme="light"] .visibility-quick-menu {
  background: white !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-modal) !important;
}

[data-theme="light"] .quick-menu-item {
  color: var(--text-primary) !important;
}

[data-theme="light"] .quick-menu-item:hover {
  background: var(--accent-subtle) !important;
}

/* Share code display */
[data-theme="light"] .share-code-display {
  background: var(--bg-badge) !important;
  color: var(--accent) !important;
}

/* Radio options */
[data-theme="light"] .radio-option {
  background: var(--bg-badge) !important;
  border-color: var(--border) !important;
}

[data-theme="light"] .radio-option.selected {
  background: var(--accent-subtle) !important;
  border-color: var(--accent) !important;
}

[data-theme="light"] .radio-option .option-title {
  color: var(--text-heading) !important;
}

[data-theme="light"] .radio-option .option-desc {
  color: var(--text-secondary) !important;
}

/* Intelligence wizard step numbers */
[data-theme="light"] .step-number {
  background: var(--bg-badge) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

[data-theme="light"] .progress-step.active .step-number {
  background: var(--accent-grad) !important;
  color: white !important;
}

/* Wizard progress line */
[data-theme="light"] .wizard-progress::before {
  background: var(--border) !important;
}

/* Alert cards */
[data-theme="light"] .alert-card {
  background: var(--bg-card) !important;
}

[data-theme="light"] .alert-card.critical {
  background: rgba(220, 38, 38, 0.06) !important;
}

[data-theme="light"] .alert-card.warning {
  background: rgba(249, 115, 22, 0.05) !important;
}

/* Confidence bar */
[data-theme="light"] .confidence-bar {
  background: var(--border) !important;
}

/* Alert stat cards */
[data-theme="light"] .alert-stat {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

[data-theme="light"] .alert-stat-label {
  color: var(--text-secondary) !important;
}

/* ============================================================================
   4. CONTROL PAGE SPECIFIC
   ============================================================================ */
[data-theme="light"] .pin-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

[data-theme="light"] .add-pin-btn {
  background: var(--accent-subtle) !important;
  border-color: rgba(79, 70, 229, 0.3) !important;
  color: var(--accent) !important;
}

[data-theme="light"] .slider {
  background: #cbd5e1 !important;
}

/* ============================================================================
   5. MONITOR PAGE — inline styles fix
   ============================================================================ */
[data-theme="light"] .chart-section,
[data-theme="light"] .data-card,
[data-theme="light"] .ml-section,
[data-theme="light"] .export-section {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

[data-theme="light"] .latest-data {
  background: #f8fafc !important;
  color: #1e293b !important;
  border-color: var(--border) !important;
}

[data-theme="light"] #statistics div {
  background: var(--bg-badge) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

/* ============================================================================
   6. WIDGET SIZING FIX — issue 1
   The grid uses 12 columns. "Small" (span 3) on a wide screen is fine,
   but on smaller screens it needs to collapse properly.
   Also the minimum widget height was too tall.
   ============================================================================ */

/* Tighter column spans so Small actually feels small */
.widget-container[data-cols="3"]  { grid-column: span 3;  min-height: 120px; }
.widget-container[data-cols="6"]  { grid-column: span 6;  min-height: 120px; }
.widget-container[data-cols="9"]  { grid-column: span 9;  min-height: 120px; }
.widget-container[data-cols="12"] { grid-column: span 12; min-height: 120px; }

/* Make the grid use more columns so Small really is small */
.widgets-grid {
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 14px !important;
}

/* Responsive breakpoints for widget grid */
@media (max-width: 1200px) {
  .widget-container[data-cols="3"]  { grid-column: span 4; }
  .widget-container[data-cols="6"]  { grid-column: span 6; }
  .widget-container[data-cols="9"]  { grid-column: span 12; }
  .widget-container[data-cols="12"] { grid-column: span 12; }
}

@media (max-width: 900px) {
  .widget-container[data-cols="3"]  { grid-column: span 6; }
  .widget-container[data-cols="6"]  { grid-column: span 12; }
  .widget-container[data-cols="9"]  { grid-column: span 12; }
  .widget-container[data-cols="12"] { grid-column: span 12; }
}

@media (max-width: 600px) {
  .widget-container[data-cols="3"],
  .widget-container[data-cols="6"],
  .widget-container[data-cols="9"],
  .widget-container[data-cols="12"] { grid-column: span 12; }
}

/* ============================================================================
   7. WIDGET THEME FIXES — cards in light mode
   ============================================================================ */
[data-theme="light"] .widget-container {
  background: white !important;
  border-color: rgba(99, 102, 241, 0.14) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(99, 102, 241, 0.08) !important;
}

[data-theme="light"] .widget-container:hover {
  background: white !important;
  border-color: rgba(79, 70, 229, 0.35) !important;
  box-shadow: 0 4px 20px rgba(79, 70, 229, 0.12) !important;
}

[data-theme="light"] .widget-name {
  color: var(--text-secondary) !important;
}

[data-theme="light"] .gauge-value-text,
[data-theme="light"] .status-card-value,
[data-theme="light"] .value-card-big,
[data-theme="light"] .progress-percent-text,
[data-theme="light"] .toggle-device-name {
  color: var(--text-heading) !important;
}

[data-theme="light"] .gauge-unit-text,
[data-theme="light"] .status-card-label,
[data-theme="light"] .value-card-sub,
[data-theme="light"] .progress-label-text,
[data-theme="light"] .progress-minmax,
[data-theme="light"] .toggle-state-label.off {
  color: var(--text-secondary) !important;
}

[data-theme="light"] .widget-table th {
  background: var(--bg-badge) !important;
  color: var(--text-secondary) !important;
}

[data-theme="light"] .widget-table td {
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

[data-theme="light"] .widget-table tr:hover td {
  background: var(--accent-subtle) !important;
}

/* Edit modal in light */
[data-theme="light"] .edit-modal-tab {
  color: var(--text-secondary) !important;
}

[data-theme="light"] .edit-modal-tab.active {
  color: white !important;
}

[data-theme="light"] .threshold-section {
  background: var(--bg-badge) !important;
  border-color: var(--border) !important;
}

[data-theme="light"] .threshold-section-title {
  color: var(--text-secondary) !important;
}

[data-theme="light"] .key-dropdown {
  background: white !important;
  border-color: var(--border) !important;
}

[data-theme="light"] .key-dropdown-item {
  color: var(--text-primary) !important;
}

[data-theme="light"] .key-dropdown-item .key-value {
  color: var(--text-muted) !important;
}

[data-theme="light"] .size-option {
  background: var(--bg-badge) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

[data-theme="light"] .size-option.selected {
  color: white !important;
}

[data-theme="light"] .w-cat-btn {
  background: var(--bg-badge) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

[data-theme="light"] .w-cat-btn.active {
  color: white !important;
}

[data-theme="light"] .widget-template-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

[data-theme="light"] .widget-template-card:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--border-hover) !important;
}

[data-theme="light"] .template-info h4 {
  color: var(--text-heading) !important;
}

[data-theme="light"] .template-info p {
  color: var(--text-muted) !important;
}

[data-theme="light"] .template-preview-box {
  background: var(--bg-badge) !important;
}

/* Edit mode banner still looks good in light */
[data-theme="light"] .edit-mode-banner {
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.3) !important;
}

/* ============================================================================
   INPUT FIELDS — fix invisible text in light theme
   ============================================================================ */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
  color: #0f172a !important;
  background: #f1f5ff !important;
  border-color: rgba(99, 102, 241, 0.2) !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: #94a3b8 !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  background: #eef2ff !important;
  border-color: #4f46e5 !important;
  color: #0f172a !important;
}

/* ============================================================================
   WIDGET TEXT — fix faint values in light theme
   ============================================================================ */
[data-theme="light"] .gauge-value-text,
[data-theme="light"] .status-card-value,
[data-theme="light"] .value-card-big,
[data-theme="light"] .progress-percent-text,
[data-theme="light"] .progress-label-text,
[data-theme="light"] .toggle-device-name,
[data-theme="light"] .widget-table td {
  color: #0f172a !important;
}

[data-theme="light"] .gauge-unit-text,
[data-theme="light"] .status-card-label,
[data-theme="light"] .progress-minmax,
[data-theme="light"] .widget-name,
[data-theme="light"] .led-label,
[data-theme="light"] .widget-table th {
  color: #475569 !important;
}

/* Inline hardcoded white text inside widget builders */
[data-theme="light"] .widget-body [style*="color:rgba(255,255,255"],
[data-theme="light"] .widget-body [style*="color: rgba(255,255,255"] {
  color: #475569 !important;
}

/* ============================================================================
   AUTH PAGE — fix invisible input fields specifically
   ============================================================================ */
[data-theme="light"] #login-email,
[data-theme="light"] #login-password,
[data-theme="light"] #register-username,
[data-theme="light"] #register-email,
[data-theme="light"] #register-password {
  color: #0f172a !important;
  background: #f8faff !important;
  border: 1px solid rgba(99, 102, 241, 0.25) !important;
}

/* ============================================================================
   INLINE STYLE OVERRIDES — hardcoded rgba white in HTML files
   ============================================================================ */
[data-theme="light"] [style*="color:rgba(255,255,255"],
[data-theme="light"] [style*="color: rgba(255,255,255"] {
  color: #475569 !important;
}

[data-theme="light"] [style*="color:#fff"],
[data-theme="light"] [style*="color: #fff"],
[data-theme="light"] [style*="color:white"],
[data-theme="light"] [style*="color: white"] {
  color: #0f172a !important;
}
/* ============================================================================
   WIDGET CARDS — stronger distinction in light theme
   ============================================================================ */

/* Give cards a proper white background with visible shadow and border */
[data-theme="light"] .widget-container {
  background: #ffffff !important;
  border: 1.5px solid rgba(99, 102, 241, 0.22) !important;
  box-shadow:
    0 2px 8px rgba(99, 102, 241, 0.10),
    0 1px 3px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .widget-container:hover {
  background: #ffffff !important;
  border-color: rgba(79, 70, 229, 0.45) !important;
  box-shadow:
    0 6px 24px rgba(79, 70, 229, 0.16),
    0 2px 6px rgba(15, 23, 42, 0.10) !important;
  transform: translateY(-3px);
}

/* Widget name labels — TEMPERATURE, HUMIDITY, LIVE DATA etc */
[data-theme="light"] .widget-name {
  color: #4f46e5 !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  opacity: 1 !important;
}

/* Main values inside widgets */
[data-theme="light"] .gauge-value-text,
[data-theme="light"] .status-card-value,
[data-theme="light"] .value-card-big,
[data-theme="light"] .progress-percent-text,
[data-theme="light"] .toggle-device-name {
  color: #0f172a !important;
  opacity: 1 !important;
}

/* Sub-labels and units */
[data-theme="light"] .gauge-unit-text,
[data-theme="light"] .status-card-label,
[data-theme="light"] .progress-label-text,
[data-theme="light"] .progress-minmax,
[data-theme="light"] .led-label {
  color: #475569 !important;
  opacity: 1 !important;
}

/* Gauge track ring — make it visible in light */
[data-theme="light"] .gauge-track {
  stroke: #e2e8f0 !important;
}

/* Chart canvas area background */
[data-theme="light"] .chart-canvas-wrap {
  background: #f8fafc !important;
  border-radius: 10px !important;
  padding: 8px !important;
  border: 1px solid rgba(99, 102, 241, 0.10) !important;
}

/* Chart metric select dropdown */
[data-theme="light"] .chart-metric-select {
  background: #f1f5ff !important;
  border-color: rgba(99, 102, 241, 0.25) !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

/* Widget grid background — slight tint so cards stand out */
[data-theme="light"] .widgets-grid {
  background: transparent !important;
}

/* Header section card */
[data-theme="light"] .header-section {
  background: #ffffff !important;
  border: 1.5px solid rgba(99, 102, 241, 0.18) !important;
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.08) !important;
}

/* Info items in header */
[data-theme="light"] .info-item {
  background: #f1f5ff !important;
  border-color: rgba(99, 102, 241, 0.18) !important;
  color: #1e293b !important;
  font-weight: 600 !important;
}

/* Export section */
[data-theme="light"] .export-section {
  background: #ffffff !important;
  border: 1.5px solid rgba(99, 102, 241, 0.18) !important;
}

/* Empty state inside chart while no data */
[data-theme="light"] .widgets-empty-state {
  background: #f8faff !important;
  border-color: rgba(99, 102, 241, 0.25) !important;
}