:root {
  --bg: #0f1117;
  --panel: #171a23;
  --panel-2: #1e222d;
  --border: #2a2f3c;
  --text: #e6e8ee;
  --muted: #8b93a7;
  --primary: #6c5ce7;
  --primary-2: #8a7bff;
  --green: #27c093;
  --red: #ff5f6d;
  --amber: #ffb020;
  --radius: 10px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}
.hidden { display: none !important; }
.muted { color: var(--muted); font-weight: 400; }
.error { color: var(--red); min-height: 1.2em; margin: 0.5rem 0 0; }

button {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.15s, opacity 0.15s;
}
button:disabled { opacity: 0.5; cursor: default; }
.primary { background: var(--primary); color: #fff; }
.primary:hover:not(:disabled) { background: var(--primary-2); }
.secondary { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }
.secondary:hover:not(:disabled) { background: var(--border); }
.ghost { background: transparent; color: var(--muted); }
.ghost:hover { color: var(--text); }
.tiny { padding: 0.3rem 0.55rem; font-size: 0.78rem; }

input, textarea, select {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
  font-size: 0.9rem;
  margin-top: 0.25rem;
}
textarea { min-height: 70px; resize: vertical; }
label { display: block; margin-top: 0.75rem; font-size: 0.85rem; color: var(--muted); }
label.checkbox { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem; color: var(--text); }
label.checkbox input { width: auto; margin: 0; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

/* Login */
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.login-card { width: 100%; max-width: 340px; text-align: center; }
.login-card h1 { margin: 0 0 0.25rem; }
.login-card input, .login-card button { margin-top: 0.75rem; }

/* Layout */
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg); z-index: 5; flex-wrap: wrap; gap: 0.75rem;
}
header h1 { font-size: 1.25rem; margin: 0; }
.header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem; gap: 1rem; flex-wrap: wrap;
}
.schedule { display: flex; align-items: center; gap: 0.5rem; }
.schedule label { margin: 0; }
.schedule input { width: 200px; margin: 0; }

.banner { margin: 0 1.5rem 1rem; padding: 0.7rem 1rem; border-radius: 8px; font-size: 0.88rem; }
.banner.info { background: rgba(108,92,231,0.15); border: 1px solid var(--primary); }
.banner.warn { background: rgba(255,176,32,0.12); border: 1px solid var(--amber); }

#profiles { padding: 0 1.5rem 1rem; display: grid; gap: 1rem; }

.profile {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.profile-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.1rem; background: var(--panel-2); flex-wrap: wrap; gap: 0.5rem;
}
.profile-head .name { font-weight: 700; font-size: 1.05rem; }
.profile-head .actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.6rem 1.1rem; border-top: 1px solid var(--border); font-size: 0.88rem; vertical-align: middle; }
th { color: var(--muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
td .site { font-weight: 600; }
td a { color: var(--primary-2); text-decoration: none; word-break: break-all; }
td a:hover { text-decoration: underline; }
.row-actions { display: flex; gap: 0.35rem; justify-content: flex-end; }
.empty { padding: 1rem 1.1rem; color: var(--muted); font-size: 0.88rem; }

.badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.55rem; border-radius: 20px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.badge .dot { width: 8px; height: 8px; border-radius: 50%; }
.badge.online { background: rgba(39,192,147,0.15); color: var(--green); }
.badge.online .dot { background: var(--green); }
.badge.offline { background: rgba(255,95,109,0.15); color: var(--red); }
.badge.offline .dot { background: var(--red); }
.badge.error { background: rgba(255,176,32,0.15); color: var(--amber); }
.badge.error .dot { background: var(--amber); }
.badge.unknown, .badge.manual { background: var(--panel-2); color: var(--muted); }
.badge.unknown .dot, .badge.manual .dot { background: var(--muted); }

.stamp { color: var(--muted); font-size: 0.78rem; }

.log-section { padding: 0 1.5rem 3rem; }
.log-section h2 { font-size: 1rem; }
.log { display: grid; gap: 0.35rem; font-size: 0.83rem; }
.log-row { display: flex; gap: 0.75rem; padding: 0.4rem 0.6rem; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; }
.log-row .r-ok { color: var(--green); }
.log-row .r-manual { color: var(--amber); }
.log-row .r-error { color: var(--red); }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 20; }
.modal-card { width: 100%; max-width: 440px; }
.modal-card h2 { margin-top: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem; }

.team-list { display: grid; gap: 0.4rem; margin: 0.5rem 0 1rem; max-height: 42vh; overflow: auto; }
.team-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
            padding: 0.5rem 0.6rem; background: var(--panel-2); border: 1px solid var(--border);
            border-radius: 8px; font-size: 0.9rem; }
.team-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; }
#tenant-switch { max-width: 180px; }

@media (max-width: 640px) {
  th.hide-sm, td.hide-sm { display: none; }
  .schedule { width: 100%; }
  .schedule input { flex: 1; width: auto; }
}