/* Vida Agency OS — platform stylesheet (redesign "2a": white rail + console dashboard).
 * Server-rendered Jinja2 templates use these classes: .card, .badge (+ status
 * variants .queued/.running/.succeeded/.failed), .muted, .errors. Class names the
 * templates rely on are preserved. Plain CSS, no build step. */

:root{
  --ink:#0f172a; --ink-soft:#334155; --muted:#64748b; --faint:#94a3b8;
  --line:#e6e8ec; --line-2:#eef1f4; --bg:#f6f7f9; --surface:#fff;
  --accent:#e94f38; --accent-hover:#d8452f; --accent-weak:#fdece9; --accent-border:#f3c6be;
  --sidebar-muted:#6b6880;
  --sans:-apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box;}

body{
  font:15px/1.5 var(--sans);
  color:var(--ink);
  background:var(--bg);
  margin:0;
  display:flex;
  min-height:100vh;
}

/* ---------- sidebar ---------- */
.sidebar{
  width:216px; flex:none;
  background:var(--surface);
  border-right:1px solid var(--line);
  padding:20px 14px;
  display:flex; flex-direction:column; gap:4px;
  position:sticky; top:0; height:100vh;
}
.brand{display:flex; align-items:center; gap:10px; padding:4px 8px 18px; text-decoration:none;}
.brand svg{flex:none;}
.brand-name{font-weight:800; font-size:17px; letter-spacing:.01em; color:#1c1e2e; line-height:1.05;}
.brand-name small{display:block; font-size:10px; font-weight:600; letter-spacing:.14em; color:var(--faint); margin-top:2px;}
.nav{display:flex; flex-direction:column; gap:4px;}
.nav a{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:10px;
  color:var(--sidebar-muted); text-decoration:none; font-weight:600; font-size:14px;
}
.nav a svg{flex:none;}
.nav a:hover{background:var(--bg);}
.nav a.active{background:var(--accent-weak); color:var(--accent);}
.user{
  margin-top:auto; display:flex; align-items:center; gap:10px;
  background:var(--bg); border-radius:12px; padding:12px;
}
.avatar{
  width:30px; height:30px; flex:none; border-radius:50%;
  background:#e2dfef; color:#5b5677;
  display:flex; align-items:center; justify-content:center;
}
.user-meta{font-size:12px; line-height:1.2; min-width:0;}
.user-meta strong{display:block; font-weight:700; color:#1c1e2e;}
.user-meta a{color:var(--faint); text-decoration:none;}
.user-meta a:hover{color:var(--accent);}

/* ---------- main / page shell ---------- */
main.content{flex:1; min-width:0; display:flex; flex-direction:column;}
.page-head{
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:22px 28px 18px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.page-head h1{margin:0; font-size:22px; font-weight:700; letter-spacing:-.02em;}
.page-head .sub{margin:3px 0 0; color:var(--muted); font-size:13px;}
.page-body{padding:20px 28px; max-width:1120px; width:100%;}
.count{font:500 12px/1 var(--mono); color:var(--muted); padding:6px 10px; background:#f1f5f9; border-radius:6px; white-space:nowrap;}
a.link-count{color:var(--muted); text-decoration:none;}
a.link-count:hover{color:var(--accent);}

h1{font-size:22px; margin:0 0 4px;}
h2{font-size:16px; font-weight:700; letter-spacing:-.01em; margin:0 0 12px;}
.muted{color:var(--muted);}
.mono{font-family:var(--mono);}
a{color:var(--accent);}

/* ---------- cards / tools grid ---------- */
.card{
  display:block; border:1px solid var(--line); border-radius:12px;
  padding:16px; margin:0; background:var(--surface);
  text-decoration:none; color:inherit;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.card:hover{border-color:var(--accent);}
.tool-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px;}
.card.tool{display:flex; flex-direction:column; gap:8px; padding:18px; transition:border-color .15s;}
.tool-top{display:flex; align-items:center; gap:10px; justify-content:space-between;}
.tool-top strong{font-size:15px;}
.tool-key{font-size:11px; color:var(--faint); margin-top:-4px;}
.tool-desc{font-size:13px; line-height:1.45;}
.tool-cta{margin-top:6px; display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--muted);}
.card.tool:hover .tool-cta{color:var(--accent);}
.tool-cta .arrow{transition:transform .15s;}
.card.tool:hover .tool-cta .arrow{transform:translateX(3px);}

/* ---------- forms ---------- */
.field{display:flex; flex-direction:column; min-width:0;}
.field label{
  font-size:11px; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; margin:0 0 5px;
}
.field label .lower{text-transform:none; letter-spacing:0; font-weight:400; color:var(--faint);}
.req{color:var(--accent);}
label{display:block; font-weight:600; font-size:13px; color:var(--ink-soft); margin:0 0 6px;}
input[type=text],input[type=number],input[type=file],input[type=password],select{
  width:100%; padding:9px 11px;
  border:1px solid #d7dbe0; border-radius:8px; background:var(--surface);
  color:var(--ink); font:inherit; font-size:14px;
}
input:focus,select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(233,79,56,.15);}
input[type=file]{padding:8px 10px; color:var(--muted); background:#fbfbfc;}
.panel{border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:20px 22px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 20px;}
.form-grid .full{grid-column:1/-1;}
.run-btn{margin-top:20px;}

/* ---------- buttons ---------- */
button,.btn{
  padding:10px 18px; border:0; border-radius:8px;
  background:var(--accent); color:#fff; font:inherit; font-weight:600; font-size:14px; cursor:pointer;
}
button:hover,.btn:hover{background:var(--accent-hover);}
.btn-block{width:100%;}
.btn-secondary{background:var(--surface); border:1px solid #d7dbe0; color:var(--ink-soft);}
.btn-secondary:hover{background:#f8fafc;}
.btn-soft{background:var(--accent-weak); border:1px solid var(--accent-border); color:var(--accent);}
.btn-soft:hover{background:#fbddd6;}

/* ---------- filters row ---------- */
.filters{display:flex; gap:10px; align-items:flex-end; margin-bottom:16px; flex-wrap:wrap;}
.filters .field{flex:1; min-width:140px;}
.filters .btn{flex:none;}

/* ---------- tables ---------- */
.table-wrap{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface);}
table{width:100%; border-collapse:collapse; font-size:13px;}
thead th{
  background:#f8fafc; text-align:left; color:var(--muted);
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  padding:10px 14px; border-bottom:1px solid var(--line);
}
tbody td{padding:11px 14px; border-top:1px solid var(--line-2); vertical-align:middle;}
tbody tr:first-child td{border-top:0;}
tbody tr:hover{background:#fafbfc;}
.tool-cell strong{display:block; font-weight:600;}
.tool-cell .key{display:block; font-family:var(--mono); font-size:11px; color:var(--faint); margin-top:2px;}
.job-link{font-family:var(--mono); font-size:12px; color:var(--accent); text-decoration:none;}
.job-link:hover{text-decoration:underline;}
td.mono{font-family:var(--mono); font-size:12px;}
.empty{margin-top:16px;}

/* ---------- schedules ---------- */
.section-label{font-size:11px; font-weight:600; color:var(--faint); text-transform:uppercase; letter-spacing:.05em; margin:24px 0 8px;}
.list .schedule{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px;}
.list .schedule + .schedule{border-top:1px solid var(--line-2);}
.schedule-main{min-width:0;}
.schedule-title{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.schedule-title strong{font-weight:600;}
.schedule-title .muted{font-size:13px;}
.cron{font:500 12px/1 var(--mono); color:var(--ink-soft); background:#f1f5f9; padding:4px 8px; border-radius:6px;}
.schedule-meta{color:var(--faint); font-family:var(--mono); font-size:12px; margin-top:8px;}
.schedule form{margin:0;}
.schedule .btn{padding:7px 14px; font-size:13px;}
.add-schedule{margin-bottom:4px;}

/* ---------- errors ---------- */
.errors{
  background:#fef2f2; border:1px solid #fecaca; border-radius:10px;
  padding:12px 14px; margin:0 0 16px; color:#991b1b; font-size:13px;
}
.errors strong{display:block; margin-bottom:4px;}
.errors ul{margin:4px 0 0; padding-left:18px;}
.errors li{margin:2px 0;}

/* ---------- badges ---------- */
.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; line-height:1.5; white-space:nowrap;}
.queued{background:#eef2f6; color:#475569;}
.running{background:#fef3c7; color:#92400e;}
.succeeded{background:#dcfce7; color:#166534;}
.failed{background:#fee2e2; color:#991b1b;}
.cancelled{background:#eef2f6; color:#475569;}

/* ---------- job detail ---------- */
.job-panel{padding:18px 20px;}
.prog-head{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.prog-msg{font-weight:600; font-size:14px; color:var(--ink);}
.pct{font:500 12px/1 var(--mono); color:var(--accent);}
.track{height:8px; border-radius:999px; background:var(--line-2); overflow:hidden; margin-top:10px;}
.bar{height:100%; width:0; border-radius:999px; background:var(--accent); transition:width .4s ease;}
.hint{color:#92400e; font-size:13px; margin-top:10px;}
.result{margin-top:14px;}
.result ul{margin:6px 0 0; padding-left:18px;}
.result li{margin:3px 0;}
.result a{font-family:var(--mono); font-size:13px;}
pre{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:12px; overflow:auto;}

/* ---------- auth (login) ---------- */
main.auth{
  flex:1; display:flex; align-items:center; justify-content:center; padding:56px 20px;
  background-image:radial-gradient(circle at 1px 1px,#e2e5ea 1px,transparent 0);
  background-size:22px 22px;
}
.auth-card{
  width:100%; max-width:372px; background:var(--surface);
  border:1px solid var(--line); border-radius:16px; padding:34px 32px;
  box-shadow:0 18px 40px -18px rgba(20,20,40,.22);
}
.auth-head{display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:24px;}
.auth-head h1{margin:14px 0 0; font-size:21px; font-weight:800; letter-spacing:-.01em; color:#1c1e2e;}
.auth-head .muted{font-size:13px; margin:6px 0 0; line-height:1.45;}
.auth-card .field{margin-bottom:0;}
.auth-card .errors{margin-bottom:14px;}
.auth-card .btn{margin-top:16px;}

/* ---------- responsive ---------- */
@media (max-width:860px){
  body{flex-direction:column;}
  .sidebar{width:auto; height:auto; position:static; flex-direction:row; align-items:center; gap:8px; border-right:0; border-bottom:1px solid var(--line); padding:12px 16px;}
  .brand{padding:0 8px 0 0;}
  .brand-name small{display:none;}
  .nav{flex-direction:row; gap:2px;}
  .nav a{padding:8px 10px;}
  .user{display:none;}
  .page-head,.page-body{padding-left:18px; padding-right:18px;}
  .form-grid{grid-template-columns:1fr;}
}

/* ---------- job detail: live progress + meta (added with the live-ETA work) ---------- */
.job-prog .pct{font:600 15px/1 var(--mono); font-variant-numeric:tabular-nums;}
.timing{margin-top:9px; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums;}
.track.indeterminate .bar{width:30%; animation:prog-sweep 1.2s ease-in-out infinite;}
@keyframes prog-sweep{0%{margin-left:-30%;}100%{margin-left:100%;}}
@media (prefers-reduced-motion: reduce){
  .track.indeterminate .bar{animation:none; width:100%; opacity:.35;}
  .bar{transition:none;}
}
.job-meta{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:14px 24px; margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line-2);
}
.job-meta dt{
  font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  color:var(--faint); margin-bottom:3px;
}
.job-meta dd{
  margin:0; font:400 13px/1.4 var(--mono); font-variant-numeric:tabular-nums;
  color:var(--ink-soft); word-break:break-word;
}
.job-meta.job-inputs{margin-top:14px; padding-top:14px;}
.backlink{margin-top:14px; font-size:13px;}
.backlink a{color:var(--muted); text-decoration:none;}
.backlink a:hover{color:var(--accent);}
tr.rowlink{cursor:pointer;}
tr.rowlink:hover td{background:var(--bg);}