/* Cron Status Heartbeat — Dark theme */
:root{
  --bg:#0f1216;
  --bg-elev:#141922;
  --bg-hover:#1a2030;
  --text:#e6eaf0;
  --muted:#9aa3af;
  --accent:#22c55e; /* green */
  --accent-weak:#1a7f3a;
  --danger:#ef4444;
  --late:#f59e0b;
  --ok:#22c55e;
  --missed:#ef4444;
  --paused:#6b7280;
  --border:#253041;
  --shadow: 0 8px 24px rgba(0,0,0,0.35);
  --radius:12px;
  --space:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial; background:var(--bg); color:var(--text)}
img{display:inline-block; vertical-align:middle}
a{color:var(--text)}

.app-header{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); position:sticky; top:0; background:rgba(15,18,22,0.85); backdrop-filter:saturate(150%) blur(6px); z-index:10}
.brand{display:flex; gap:10px; align-items:center}
.brand strong{font-weight:700}
.header-actions{display:flex; gap:8px; align-items:center}
.container{max-width:1100px; margin:20px auto; padding:0 16px}

.card{background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); margin-bottom:18px}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px}
.card.monitor{display:flex; flex-direction:column}
.monitor-header{display:flex; align-items:baseline; justify-content:space-between; gap:10px; border-bottom:1px solid var(--border); padding-bottom:10px; margin-bottom:10px}
.monitor-header .title{display:flex; gap:10px; align-items:center}
.monitor-header h3{margin:0;font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px}
.monitor-actions .btn{margin-left:6px}
.row{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:10px 0}
@media (max-width:800px){.row{grid-template-columns:1fr 1fr}}
.label{color:var(--muted); font-size:12px; margin-bottom:6px}
.copyline{display:flex; gap:8px; align-items:center}
.copyline code{background:var(--bg); border:1px dashed var(--border); padding:6px 8px; border-radius:8px; display:inline-block; max-width:100%; overflow:auto}

.field{display:flex; flex-direction:column; gap:6px}
.field.checkbox{justify-content:flex-end}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}

input, select, textarea{background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:10px; outline:none}
input:focus, textarea:focus{border-color:var(--accent)}

.btn{appearance:none; background:var(--bg-hover); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:8px 12px; cursor:pointer}
.btn:hover{background:var(--bg-hover); border-color:var(--accent)}
.btn.primary{background:linear-gradient(180deg, #1db954, #169c46); border-color:#128a3d}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent}
.btn.small{font-size:12px; padding:6px 8px}
.btn.danger{border-color:var(--danger); color:var(--danger)}

.badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:4px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.4px; border:1px solid transparent}
.badge.ok{background:rgba(34,197,94,0.1); color:var(--ok); border-color:rgba(34,197,94,0.3)}
.badge.late{background:rgba(245,158,11,0.12); color:var(--late); border-color:rgba(245,158,11,0.3)}
.badge.missed{background:rgba(239,68,68,0.12); color:var(--missed); border-color:rgba(239,68,68,0.3)}
.badge.paused{background:rgba(107,114,128,0.12); color:var(--paused); border-color:rgba(107,114,128,0.3)}

.pill{display:inline-block; padding:2px 8px; border-radius:8px; font-size:12px; border:1px solid var(--border)}
.pill.ok{background:rgba(34,197,94,0.1); color:var(--ok)}
.pill.fail{background:rgba(239,68,68,0.1); color:var(--missed)}

.table{display:grid; gap:6px}
.table .thead{display:grid; grid-template-columns:2fr 0.6fr 1fr 2fr; gap:8px; color:var(--muted); font-size:12px}
.table .row{display:grid; grid-template-columns:2fr 0.6fr 1fr 2fr; gap:8px; padding:6px; border:1px solid var(--border); border-radius:8px; background:var(--bg)}

.alert{border:1px solid var(--border); padding:12px 14px; border-radius:10px; margin:10px 0}
.alert.error{border-color:rgba(239,68,68,0.5); background:rgba(239,68,68,0.08)}
.alert.success{border-color:rgba(34,197,94,0.5); background:rgba(34,197,94,0.08)}

.code{background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:12px; overflow:auto}
.muted{color:var(--muted)}
.inline{display:inline}
.link{color:var(--accent)}

.app-footer{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:16px; border-top:1px solid var(--border); color:var(--muted)}

.toast{position:fixed; left:50%; bottom:20px; transform:translateX(-50%); background:var(--bg-elev); color:var(--text); border:1px solid var(--border); padding:8px 12px; border-radius:999px; opacity:0; transition:opacity .2s ease, transform .2s ease}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-4px)}

.empty{text-align:center; color:var(--muted)}