/* Custom styles for Monitor app */
:root {
  /* Slightly larger base font for readability */
  --base-font-size: 17px;
  --brand: #5b6cff;
  --brand-dark: #3f4ed6;
  --ok: #2ecc71;
  --warn: #f1c40f;
  --down: #e74c3c;
}

body {
  padding-bottom: 48px;
  font-size: var(--base-font-size);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  background: #f7f8fb;
}

.navbar-dark.bg-dark {
  background: #1f2330 !important;
}

.status-badge {
  font-weight: 600;
  padding: .50rem .70rem;
  font-size: 1.05rem;
  border-radius: .6rem;
}

.table td, .table th { vertical-align: middle; }
.table { font-size: 1.06rem; }

/* Emphasize Name and URL cells */
.monitor-name { font-size: 1.25rem; font-weight: 700; }
.monitor-url { font-size: 1.18rem; font-weight: 600; }
.table-hover tbody tr:hover { background: #f2f4f8; }

/* Dashboard stat cards */
.stat-card {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(30, 42, 58, 0.08);
}
.stat-card .card-body { padding: 20px 22px; }
.stat-label { color: #6b7280; font-weight: 600; letter-spacing: .02em; }
.stat-value { font-size: 2rem; font-weight: 800; line-height: 1; }
.stat-icon {
  width: 42px; height: 42px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(91,108,255,.12); color: var(--brand);
}
.stat-ok .stat-icon { background: rgba(46,204,113,.12); color: var(--ok); }
.stat-warn .stat-icon { background: rgba(241,196,15,.15); color: var(--warn); }
.stat-down .stat-icon { background: rgba(231,76,60,.12); color: var(--down); }

/* Buttons */
.btn-primary {
  background-color: var(--brand);
  border-color: var(--brand);
}
.btn-primary:hover, .btn-primary:focus { background-color: var(--brand-dark); border-color: var(--brand-dark); }

/* Cards */
.card.shadow-sm { border-radius: 14px; }

/* Colored backgrounds like the previous version */
.stat-card.stat-total { background: #f8f9fa; }
.stat-card.stat-ok { background: #198754; color: #fff; }
.stat-card.stat-down { background: #dc3545; color: #fff; }
.stat-card.stat-warn { background: #ffc107; color: #111; }

/* Make icons blend on colored cards */
.stat-card.stat-ok .stat-icon,
.stat-card.stat-down .stat-icon,
.stat-card.stat-warn .stat-icon { background: transparent; color: inherit; }

/* Tweak text colors on colored cards */
.stat-card.stat-ok .stat-label,
.stat-card.stat-down .stat-label { color: rgba(255,255,255,.9); }
.stat-card.stat-warn .stat-label { color: #5c4a00; }