/* Design Charge Meter — styles.css (Light Theme) */
:root{
  --bg:#f7f9fc;
  --panel:#ffffff;
  --muted:#6b7280;
  --card:#ffffff;
  --accent:#3b82f6;
  --accent-2:#06b6d4;
  --danger:#ef4444;
  --ok:#16a34a;
  --text:#1f2937;
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color:var(--text);
  font-family:var(--font);
  line-height:1.5;
}

.container{max-width:1100px;margin:0 auto;padding:0 16px}

.app-header{
  position:sticky;top:0;z-index:10;
  backdrop-filter:saturate(180%) blur(12px);
  background:rgba(255,255,255,0.9);
  border-bottom:1px solid #e5e7eb;
}
.app-header .container{
  display:flex;align-items:center;gap:16px;justify-content:space-between;
  padding:14px 16px;
}
h1{font-size:20px;margin:0;font-weight:700;letter-spacing:.2px}
.header-actions{display:flex;gap:10px;flex-wrap:wrap}

.app-footer{border-top:1px solid #e5e7eb;margin-top:32px;background:var(--panel)}
.app-footer .container{display:flex;gap:10px;align-items:center;padding:16px 0;flex-wrap:wrap}
.dot{opacity:.4}

.board{margin:22px 0}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.input{
  background:#ffffff;border:1px solid #d1d5db;border-radius:8px;
  padding:10px 12px;color:var(--text);outline:0;min-width:220px;
}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.2)}

.btn{
  --bg:#f3f4f6;--bd:#d1d5db;--fg:var(--text);
  background:var(--bg);border:1px solid var(--bd);color:var(--fg);
  padding:10px 12px;border-radius:8px;cursor:pointer;transition:.2s; font-weight:600;
}
.btn:hover{transform:translateY(-1px); border-color:#9ca3af}
.btn.primary{--bg:linear-gradient(135deg, var(--accent), var(--accent-2));--bd:transparent;color:#ffffff}
.btn.subtle{--bg:#f9fafb;--bd:#d1d5db;color:#6b7280}
.btn.danger{--bg:#fee2e2;--bd:#fecaca;color:#b91c1c}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

.jobs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.card{
  background:var(--card);
  border:1px solid #e5e7eb;border-radius:12px;padding:14px;box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.card-head{display:flex;gap:10px;align-items:center}
.card .job-name{flex:1}

.badge.status{font-size:12px;padding:6px 10px;border-radius:999px;background:#f3f4f6;border:1px solid #d1d5db;color:var(--muted)}
.badge.status.running{border-color:#bbf7d0;background:#dcfce7;color:var(--ok)}
.badge.status.paused{border-color:#e5e7eb;background:#f3f4f6;color:var(--muted)}
.badge.status.stopped{border-color:#fecaca;background:#fee2e2;color:var(--danger)}

.row{display:flex;align-items:center;gap:10px;margin:10px 0}
.label{font-size:12px;color:var(--muted);min-width:94px}

.timer{display:flex;align-items:baseline;justify-content:space-between;margin:6px 0 8px}
.big{font-size:28px;font-weight:800;letter-spacing:.5px}
.muted{color:var(--muted)}

.controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px;font-size:12px;color:var(--muted)}

.table-wrap{overflow:auto;border:1px solid #e5e7eb;border-radius:8px;background:#fff}
table{width:100%;border-collapse:separate;border-spacing:0;min-width:720px}
thead th{position:sticky;top:0;background:#f9fafb;color:var(--text);text-align:left;padding:10px;border-bottom:1px solid #e5e7eb}
tbody td{padding:10px;border-bottom:1px solid #f3f4f6}
tbody tr:hover{background:#f9fafb}
tbody tr.details td{background:#f3f4f6}
.code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace}