/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Action button style (matched with noreply) */
.action-btn {
  background: var(--action);
  border: 1px solid var(--action-border);
}

.action-btn:hover {
  background: var(--action-hover);
  border-color: var(--action-border-hover);
}

.switch-track { background-color: var(--switch-track); }
.peer:checked ~ .switch-track { background-color: var(--switch-track-active); }
.switch-thumb { background-color: var(--switch-thumb); }

.save-btn {
  background: var(--action);
  border: 1px solid var(--action-border);
  color: var(--text);
}

.save-btn:hover {
  background: var(--action-hover);
  border-color: var(--action-border-hover);
}

:root[data-theme="light"] .save-btn {
  background: var(--success-vivid);
  border: 1px solid transparent;
  color: #ffffff;
}

:root[data-theme="light"] .save-btn:hover {
  filter: brightness(1.1);
  background: var(--success-vivid);
  border-color: transparent;
}

.cancel-btn {
  background: var(--surface);
  border: 1px solid var(--action-border);
  color: var(--text);
}

.cancel-btn:hover {
  background: var(--surface-hover);
  border-color: var(--action-border-hover);
  color: var(--text);
}

:root[data-theme="dark"] input[type="checkbox"] {
  accent-color: #4a5a6e;
}

:root[data-theme="doppler"] input[type="checkbox"] {
  accent-color: #5c7a9e;
}

:root[data-theme="dark"] .config-title {
  color: rgb(229 231 235 / 0.4);
}

:root[data-theme="dark"] .config-section-title {
  color: rgb(229 231 235 / 0.45);
}

[data-theme-target="option"][data-active="true"] {
  border-color: var(--theme-select-border);
  box-shadow: 0 0 0 1px var(--theme-select-ring);
}
[data-theme-target="option"][data-active="true"] svg {
  color: var(--theme-select-border);
}

:root[data-theme="dark"] .incident-badge[data-state="down"] {
  border-color: var(--danger-vivid);
}
:root[data-theme="dark"] .incident-badge[data-state="down"] .incident-badge-fill {
  background-color: transparent;
}
:root[data-theme="dark"] .incident-badge[data-state="down"] .incident-badge-count {
  color: var(--danger-vivid);
}