/* Base reset */
* { margin:0; padding:0; box-sizing:border-box; }

/* ------------------------- COLOR VARIABLES ------------------------- */
:root {
  --bg-primary:#0f172a;
  --bg-secondary:#1e293b;
  --bg-tertiary:#0f172a;
  --text-primary:#e2e8f0;
  --text-secondary:#94a3b8;
  --border-color:#334155;
  --border-subtle:#64748b;

  --hc-color:#3b82f6; /* Healthchecks host accent */
}
[data-theme="light"] {
  --bg-primary:#f8fafc;
  --bg-secondary:#ffffff;
  --bg-tertiary:#f1f5f9;
  --text-primary:#0f172a;
  --text-secondary:#64748b;
  --border-color:#e2e8f0;
  --border-subtle:#cbd5e1;
}

/* ------------------------- BASE ELEMENTS ------------------------- */
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg-primary);
  color:var(--text-primary);
  padding:20px;
  transition:background-color .3s,color .3s;
}

/* ------------------------- HEADER ------------------------- */
.header {
  background:var(--bg-secondary);
  padding:20px;
  border-radius:8px;
  margin-bottom:20px;
  border-left:4px solid #3b82f6;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}
.header-content { margin-right:20px; }
.header-content h1 { font-size:24px; margin-bottom:8px; }
.subtitle { color:var(--text-secondary); font-size:14px; }

/* ------------------------- CONTROLS ------------------------- */
.controls {
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.user-info {
  font-size:14px; color:#3b82f6;
  padding:8px 12px; border-radius:4px;
  background:var(--bg-tertiary);
  border:1px solid var(--border-color);
  white-space:nowrap;
}
.logout-btn, .theme-toggle, .sort-dropdown, .filter-input {
  padding:8px 12px;
  border-radius:4px;
  border:1px solid var(--border-color);
  background:var(--bg-tertiary);
  color:var(--text-primary);
  cursor:pointer;
  font-size:14px;
}
.logout-btn:hover, .theme-toggle:hover { background:var(--border-color); }

/* ------------------------- TENANTS ------------------------- */
.tenant {
  background:var(--bg-secondary);
  border-radius:8px;
  padding:20px;
  margin-bottom:20px;
  border-left:4px solid var(--border-subtle);
}
.tenant.error  { border-left-color:#ef4444; }
.tenant.issues { border-left-color:#f59e0b; }
.tenant.ok     { border-left-color:#10b981; }

.tenant-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px;
  flex-wrap:wrap;
}
.tenant-name {
  font-size:20px;
  font-weight:600;
  cursor:pointer;
}
.tenant-name:hover { color:#3b82f6; }
.tenant-url {
  color:var(--text-secondary);
  font-size:12px;
  margin-top:4px;
}
.status-badge {
  padding:4px 12px;
  border-radius:4px;
  font-size:12px;
  font-weight:600;
}
.badge-error{background:#ef4444;color:#fff;}
.badge-warning{background:#f59e0b;color:#fff;}
.badge-ok{background:#10b981;color:#fff;}

/* ------------------------- HOST CARDS ------------------------- */
.hosts {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px,1fr));
  gap:10px;
  margin-top:15px;
}
.host {
  background:var(--bg-tertiary);
  padding:12px;
  border-radius:6px;
  border:1px solid var(--border-color);
  cursor:pointer;
  transition:transform .2s,border-color .2s;
  display:block;
}
.host.hidden{display:none;}
.host:hover{ transform:translateY(-2px); border-color:#3b82f6; }

/* Status color variations */
.host.error{ border-color:#ef4444; }
[data-theme="dark"] .host.error{ background:#3a1a1c; color:#fff; }
[data-theme="light"] .host.error{ background:#fee2e2; color:#7f1d1d; }

/* Warn cards */
.host.warn { border-color:#f59e0b; }
[data-theme="dark"] .host.warn { background:#3a2e1a; color:#fff; }
[data-theme="light"] .host.warn { background:#fff7ed; color:#7c2d12; }

/* Healthchecks hosts */
.host.healthchecks {
  border-color: var(--hc-color);
  border-style: dashed;            /* visually distinguish from M/Monit */
  position: relative;
  box-shadow: 0 0 0 1px rgba(59,130,246,.15) inset;
}
.host.healthchecks:hover {
  border-color: var(--hc-color);
  box-shadow: 0 0 0 2px rgba(59,130,246,.25) inset;
}
.host.healthchecks::before {
  content: "HC";
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 10px;
  font-weight: 600;
  background: var(--hc-color);
  color: #fff;
  padding: 2px 5px;
  border-radius: 4px;
}

/* Hide generic CPU/Mem row & OS line for Healthchecks cards */
.host.healthchecks .host-status .os-info { display: none !important; }
.host.healthchecks .host-details { display: none !important; }

/* Simplify status row layout for HC */
.host.healthchecks .host-status { justify-content: flex-start; gap: 8px; }

/* Remove separator above issues for HC cards */
.host.healthchecks .host-issues {
  border-top: 0;
  padding-top: 0;
  margin-top: 6px;
}

.host-name{ font-weight:500; margin-bottom:4px; }
.host-status{ font-size:12px; color:var(--text-secondary); display:flex; justify-content:space-between; align-items:center; }
.host-status .os-info{ font-size:11px; color:var(--text-secondary); margin-left:8px; white-space:nowrap; }
.host-status.down{ color:#ef4444; }
.host-details{ font-size:11px; color:var(--text-secondary); margin-top:4px; }
.host-issues{ font-size:11px; color:#ef4444; margin-top:6px; padding-top:6px; border-top:1px solid var(--border-color); font-weight:500; }
.host-issues.warning{ color:#f59e0b; }

/* ------------------------- DASHBOARD STATS ------------------------- */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px,1fr));
  gap:15px;
  margin-bottom:10px;
}
.stat-card{
  background:var(--bg-secondary);
  padding:15px;
  border-radius:8px;
  text-align:center;
}
.stat-value{ font-size:32px; font-weight:700; margin-bottom:4px; }
.stat-label{ color:var(--text-secondary); font-size:12px; text-transform:uppercase; }

#issues-card{
  cursor:pointer;
  transition:transform .1s ease, box-shadow .1s ease;
}
#issues-card:hover{
  transform:translateY(-2px);
}
#issues-card:focus-visible{
  outline:3px solid rgba(59,130,246,.65);
  outline-offset:2px;
}
#issues-card.issues-toggle-active{
  box-shadow:0 0 0 3px rgba(59,130,246,.45);
}

#os-stats-container .os-stat-card{
  cursor:pointer;
  transition:transform .1s ease, box-shadow .1s ease;
}
#os-stats-container .os-stat-card:hover{
  transform:translateY(-2px);
}
#os-stats-container .os-stat-card:focus-visible{
  outline:3px solid rgba(59,130,246,.65);
  outline-offset:2px;
}
#os-stats-container .os-stat-card.os-card-active{
  box-shadow:0 0 0 3px rgba(59,130,246,.45);
}

.error-msg{ color:#ef4444; font-size:14px; }
.refresh-info{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
  margin-bottom:20px;
  border-bottom:1px solid var(--border-color);
  font-size:13px;
  color:var(--text-secondary);
}
.refresh-interval{ color:#3b82f6; }

/* ------------------------- MODAL ------------------------- */
.modal{
  display:none;
  position:fixed;
  z-index:1000;
  left:0; top:0;
  width:100%; height:100%;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(4px);
}
.modal.show{ display:flex; align-items:center; justify-content:center; }
.modal-content{
  background:var(--bg-secondary);
  border-radius:12px;
  padding:30px;
  max-width:600px;
  width:90%;
  max-height:80vh;
  overflow-y:auto;
  border:1px solid var(--border-color);
}
.modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  padding-bottom:15px;
  border-bottom:1px solid var(--border-color);
}
.modal-title{ font-size:24px; font-weight:600; }
.modal-close{
  background:none;
  border:none;
  font-size:28px;
  cursor:pointer;
  color:var(--text-secondary);
  padding:0;
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border-radius:4px;
}
.modal-close:hover{ background:var(--border-color); }

.detail-row{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border-color); }
.detail-row:last-child{ border-bottom:none; }
.detail-label{ color:var(--text-secondary); font-weight:500; }
.detail-value{ color:var(--text-primary); }

.status-indicator{
  display:inline-block;
  padding:4px 12px;
  border-radius:9999px;
  font-size:12px;
  font-weight:700;
}
.status-indicator.ok{ background:#10b981; color:#fff; }
.status-indicator.warning{ background:#f59e0b; color:#fff; }
.status-indicator.error{ background:#ef4444; color:#fff; }

/* ------------------------- ISSUE CARD COLORS ------------------------- */
.issue-card-error{ background:#ef4444; color:#fff; border:1px solid #b91c1c; }
.issue-card-warn{ background:#f59e0b; color:#fff; border:1px solid #d97706; }
.issue-card-ok{ background:#10b981; color:#fff; border:1px solid #047857; }
.issue-card-error .stat-value, .issue-card-error .stat-label,
.issue-card-warn .stat-value, .issue-card-warn .stat-label,
.issue-card-ok .stat-value, .issue-card-ok .stat-label {
  color:#fff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}

/* ------------------------- SERVICES LIST ------------------------- */
.services-row{ flex-direction:column; align-items:stretch; }
.services-row .detail-label{ margin-bottom:8px; }
.service-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:6px 0;
  border-bottom:1px solid var(--border-color);
}
.service-item:last-child{ border-bottom:0; }

/* ------------------------- RESPONSIVE ------------------------- */
@media (max-width:768px){
  body{ padding:10px; }
  .header{ flex-direction:column; align-items:flex-start; padding:15px; }
  .controls{ margin-top:15px; width:100%; flex-direction:column; align-items:stretch; }
  .sort-dropdown{ margin-top:8px; font-size:16px; }
  .theme-toggle{ font-size:16px; }
  .user-logout-group{ display:flex; width:100%; justify-content:space-between; margin-bottom:8px; }
  .user-info{ flex-grow:1; margin-right:8px; text-align:center; }
  .stats{ grid-template-columns:1fr 1fr; gap:10px; margin-bottom:15px; }
  .stat-card{ padding:12px; } .stat-value{ font-size:28px; } .stat-label{ font-size:11px; }
  .tenant-header{ flex-direction:column; align-items:flex-start; gap:10px; }
  .tenant-name{ font-size:22px; }
  .hosts{ grid-template-columns:1fr; gap:10px; }
  .host{ padding:15px; }
  .refresh-info{ flex-direction:column; align-items:center; gap:5px; font-size:12px; }
  .host-status{ flex-direction:column; align-items:flex-start; gap:2px; font-size:12px; }
  .host-status .os-info{ margin-left:0; white-space:normal; text-align:left; }
}