/* Tema moderno com claro/escuro via CSS variables */
:root {
  --bg: #0b0f14;
  --bg-soft: #11161d;
  --surface: #151b23;
  --surface-2: #1b222c;
  --text: #e7edf5;
  --text-muted: #a9b4c2;
  --primary: #4f7cfb;
  --primary-contrast: #ffffff;
  --accent: #22c55e;
  --danger: #ef4444;
  --border: #263041;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
}

:root[data-theme="light"] {
  --bg: #f6f7f9;
  --bg-soft: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f4f6;
  --text: #0b0f14;
  --text-muted: #506176;
  --primary: #3b82f6;
  --primary-contrast: #ffffff;
  --accent: #16a34a;
  --danger: #dc2626;
  --border: #e5e7eb;
}

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
}

.container-fluid { max-width: 1440px; }

/* Header */
.page-header h1 { color: var(--text); }
.page-actions .btn { margin-left: .5rem; }

/* Cards */
.card { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow); }
.card-header { background: var(--surface-2); border-bottom-color: var(--border); color: var(--text-muted); }
.card-footer { background: var(--surface-2); border-top-color: var(--border); color: var(--text-muted); }

/* Table */
.table { color: var(--text); }
.table thead th { color: var(--text); border-bottom-color: var(--border); }
.table tbody tr { border-color: var(--border); }
.table-hover tbody tr:hover { background: var(--surface-2); }

/* Buttons */
.btn { border-radius: 10px; border: 1.5px solid var(--border); color: var(--text); transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.25); border-color: var(--primary); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
.btn-outline-primary { border-color: var(--primary); color: var(--text); }
.btn-outline-secondary { border-color: var(--border); color: var(--text); }
.btn-outline-dark { border-color: var(--border); color: var(--text); }
.btn-success { background: var(--accent); border-color: var(--accent); }
.btn-danger { background: var(--danger); border-color: var(--danger); }

/* Inputs */
.form-control, .form-select { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.form-control::placeholder { color: var(--text-muted); }
.form-label { color: var(--text); }

/* Modals */
.modal-content { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: var(--shadow); }
.modal-header, .modal-footer { background: var(--surface-2); border-color: var(--border); }
.modal-title { color: var(--text); }

/* Tabs */
.nav-tabs .nav-link { color: var(--text-muted); border-color: var(--border); border-radius: 10px 10px 0 0; }
.nav-tabs .nav-link.active { color: var(--text); background-color: var(--surface); border-color: var(--primary); box-shadow: inset 0 -2px 0 var(--primary); }

/* Test status indicator */
.status-pill { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border); background: transparent; }
.status-pill.ok { border-color: var(--accent); background: var(--accent); }
.status-pill.fail { border-color: var(--danger); background: var(--danger); }

/* Improve contrast for muted text in dark mode */
.text-muted { color: var(--text) !important; }

/* Map */
#map { width: 100%; }
.leaflet-container { background: var(--surface-2); }
.leaflet-marker-selected { filter: hue-rotate(90deg) brightness(1.2); }

/* Theme Toggle */
#btnTheme { min-width: 38px; }