/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-bg:       #f5f5f5;
  --color-surface:  #ffffff;
  --color-border:   #e0e0e0;
  --color-primary:  #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-danger:   #dc2626;
  --color-success:  #16a34a;
  --color-muted:    #6b7280;
  --color-text:     #111827;
  --radius:         8px;
  --shadow:         0 1px 3px rgba(0,0,0,.1);
  --max-w:          760px;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  background: var(--color-bg);
  color: var(--color-text);
  padding: 1rem;
}

/* ── Layout ──────────────────────────────────────────────────────────────────*/
.app { max-width: var(--max-w); margin: 0 auto; }

header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
header h1 { font-size: 1.4rem; }
header p  { color: var(--color-muted); font-size: .875rem; }

/* ── Sections ─────────────────────────────────────────────────────────────── */
section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 1.25rem;
  overflow: hidden;
}
section h2 {
  font-size: .875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-muted);
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: #fafafa;
}

/* ── Form ─────────────────────────────────────────────────────────────────── */
.form-body { padding: 1rem; display: grid; gap: .75rem; }

.field { display: flex; flex-direction: column; gap: .25rem; }
.field label { font-size: .8125rem; font-weight: 500; color: var(--color-muted); }
.field input, .field select {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: .45rem .65rem;
  font-size: .9375rem;
  width: 100%;
  background: white;
}
.field input:focus, .field select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
  border-color: var(--color-primary);
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

.checkbox-group {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: .25rem 0;
}
.checkbox-group label {
  display: flex; align-items: center; gap: .3rem;
  font-size: .875rem; font-weight: 400; color: var(--color-text);
  cursor: pointer;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: .2rem .65rem;
}
.checkbox-group input[type=checkbox] { accent-color: var(--color-primary); }
.checkbox-group label:has(input:checked) {
  background: #eff6ff;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.hint { font-size: .8rem; color: var(--color-muted); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .875rem; font-weight: 500;
  padding: .45rem .9rem;
  border-radius: 6px;
  border: none; cursor: pointer;
  transition: background .15s;
}
.btn-primary   { background: var(--color-primary); color: white; }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-secondary { background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); }
.btn-secondary:hover { background: var(--color-border); }
.btn-danger    { background: white; color: var(--color-danger); border: 1px solid #fca5a5; }
.btn-danger:hover { background: #fef2f2; }
.btn-sm { padding: .25rem .6rem; font-size: .8125rem; }

.form-actions {
  display: flex; gap: .5rem; justify-content: flex-end;
  padding: .75rem 1rem;
  border-top: 1px solid var(--color-border);
  background: #fafafa;
}

/* ── Monitor list ─────────────────────────────────────────────────────────── */
.monitor-list { list-style: none; }
.monitor-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--color-border);
}
.monitor-item:last-child { border-bottom: none; }
.monitor-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.monitor-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monitor-meta { font-size: .8125rem; color: var(--color-muted); }
.monitor-actions { display: flex; gap: .4rem; flex-shrink: 0; }

/* Active/inactive badge */
.badge {
  display: inline-block;
  font-size: .7rem; font-weight: 600;
  padding: .1rem .4rem; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .04em;
}
.badge-active   { background: #dcfce7; color: var(--color-success); }
.badge-inactive { background: #f3f4f6; color: var(--color-muted); }

/* ── Notifications table ──────────────────────────────────────────────────── */
.table-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th {
  text-align: left; padding: .5rem 1rem;
  font-size: .75rem; font-weight: 600; color: var(--color-muted);
  text-transform: uppercase; letter-spacing: .04em;
  background: #fafafa; border-bottom: 1px solid var(--color-border);
}
td { padding: .6rem 1rem; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
.status-sent   { color: var(--color-success); }
.status-failed { color: var(--color-danger); }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.empty {
  text-align: center; padding: 2rem 1rem;
  color: var(--color-muted); font-size: .9375rem;
}

/* ── Toast ────────────────────────────────────────────────────────────────── */
#toast {
  position: fixed; bottom: 1.25rem; right: 1.25rem;
  background: var(--color-text); color: white;
  padding: .6rem 1rem; border-radius: var(--radius);
  font-size: .875rem; box-shadow: 0 4px 12px rgba(0,0,0,.2);
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s, transform .2s;
  pointer-events: none; z-index: 100;
  max-width: 320px;
}
#toast.show { opacity: 1; transform: translateY(0); }
#toast.error { background: var(--color-danger); }

/* ── Loading spinner ──────────────────────────────────────────────────────── */
.spinner {
  display: inline-block; width: 1em; height: 1em;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .field-row { grid-template-columns: 1fr; }
  header { flex-direction: column; gap: .25rem; }
  th:nth-child(4), td:nth-child(4) { display: none; } /* hide court on small screens */
}