/* SDS WebUI — Option A: "A Little" colorful
 * Vanilla CSS, no framework. Adds per-mode accent colors, gradient header,
 * icon support, and richer card treatment while staying close to the
 * original minimal aesthetic. */

:root {
  /* Surface */
  --bg:           #f5f6f8;
  --bg-elev:      #ffffff;
  --fg:           #0f172a;
  --muted:        #64748b;
  --border:       #e2e8f0;
  --border-soft:  #eef2f7;

  /* Brand & mode accents */
  --brand:        #0b5fff;
  --brand-fg:     #ffffff;
  --mode-1:       #0ea5e9;   /* Generate — sky blue */
  --mode-1-soft:  #e0f2fe;
  --mode-2:       #f59e0b;   /* Validate — amber */
  --mode-2-soft:  #fef3c7;
  --mode-3:       #10b981;   /* Decode — emerald */
  --mode-3-soft:  #d1fae5;

  /* Status */
  --ok:           #047857;
  --ok-soft:      #d1fae5;
  --warn:         #b45309;
  --warn-soft:    #fef3c7;
  --fail:         #b91c1c;
  --fail-soft:    #fee2e2;

  /* Effects */
  --shadow-sm:    0 1px 2px rgba(15,23,42,0.04), 0 1px 1px rgba(15,23,42,0.03);
  --shadow:       0 1px 2px rgba(15,23,42,0.05), 0 4px 12px rgba(15,23,42,0.04);
  --shadow-lg:    0 1px 2px rgba(15,23,42,0.05), 0 12px 32px rgba(15,23,42,0.08);
  --radius:       10px;
  --radius-sm:    6px;
  --radius-lg:    14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  background-image:
    radial-gradient(at 0% 0%,  rgba(14,165,233,0.06) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(16,185,129,0.05) 0px, transparent 50%);
  background-attachment: fixed;
  color: var(--fg);
  line-height: 1.5;
  font-size: 15px;
}

.container { max-width: 1040px; margin: 0 auto; padding: 0 1.5rem; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em; background: rgba(15,23,42,0.05); padding: 0.05em 0.35em; border-radius: 3px; }

/* ── Header (gradient bar) ─────────────────────────────────── */
header {
  background: linear-gradient(135deg, #0b5fff 0%, #0ea5e9 50%, #10b981 100%);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding: 0.9rem 0;
  box-shadow: var(--shadow);
  color: #fff;
}
header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
header .brand {
  font-weight: 700; font-size: 1.1rem; color: #fff;
  display: flex; align-items: center; gap: 0.5rem;
}
header .brand:hover { text-decoration: none; }
header .brand .logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  background: rgba(255,255,255,0.2); backdrop-filter: blur(8px);
  font-size: 1rem;
}
header .brand .subtle { color: rgba(255,255,255,0.85); font-weight: 400; font-size: 0.85em; }
header nav { display: flex; align-items: center; gap: 0.25rem; }
header nav a {
  margin-left: 0.5rem; color: rgba(255,255,255,0.92); font-weight: 500;
  padding: 0.4rem 0.75rem; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; gap: 0.35rem;
  transition: background 0.1s, color 0.1s;
}
header nav a:hover { background: rgba(255,255,255,0.18); color: #fff; text-decoration: none; }
header nav a .icon { font-size: 1.05em; line-height: 1; }
.subtle { color: var(--muted); font-weight: normal; font-size: 0.9em; }

/* ── Main ─────────────────────────────────── */
main { padding: 2rem 0 4rem; }
h1 {
  font-size: 1.9rem; margin: 0 0 0.5rem;
  display: flex; align-items: center; gap: 0.5rem;
}
h1 .icon { font-size: 1.2em; }
h2 { font-size: 1.25rem; margin: 1.5rem 0 0.5rem; }
h3 { font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }
.lede { font-size: 1.05rem; color: var(--muted); margin: 0 0 2rem; max-width: 60ch; }
.client-tag {
  font-size: 0.85rem; color: var(--muted); margin-bottom: 1.5rem;
  background: var(--bg-elev); border: 1px solid var(--border);
  padding: 0.35rem 0.75rem; border-radius: var(--radius-sm);
  display: inline-block;
}

/* ── Footer ─────────────────────────────────── */
footer {
  border-top: 1px solid var(--border); padding: 1.5rem 0;
  background: #fff; color: var(--muted); font-size: 0.9rem;
}
footer p { margin: 0.25rem 0; }
footer strong { color: var(--warn); }

/* ── Mode card grid (landing page) ───────────────────── */
.card-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.25rem; margin: 1.5rem 0 2rem; }
@media (max-width: 980px) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .card-grid { grid-template-columns: 1fr; } }
.mode-card {
  display: block; padding: 1.75rem 1.5rem 1.5rem;
  background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); color: var(--fg);
  position: relative; overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.mode-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--mode-1);
}
.mode-card.mode-generate::before { background: var(--mode-1); }
.mode-card.mode-decode::before   { background: var(--mode-3); }
.mode-card.mode-validate::before { background: var(--mode-2); }
.mode-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--mode-1); text-decoration: none; }
.mode-card.mode-decode:hover   { border-color: var(--mode-3); }
.mode-card.mode-validate:hover { border-color: var(--mode-2); }
.mode-card .badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.25rem 0.6rem; border-radius: 99px;
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--mode-1-soft); color: var(--mode-1);
  margin-bottom: 0.75rem;
}
.mode-card.mode-decode .badge   { background: var(--mode-3-soft); color: var(--mode-3); }
.mode-card.mode-validate .badge { background: var(--mode-2-soft); color: var(--mode-2); }
.mode-card h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.mode-card p { color: var(--muted); margin: 0 0 1rem; font-size: 0.95rem; }
.mode-card .cta { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.5rem; font-weight: 600; color: var(--mode-1); }
.mode-card.mode-decode .cta   { color: var(--mode-3); }
.mode-card.mode-validate .cta { color: var(--mode-2); }

.result-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem 2rem; box-shadow: var(--shadow); }
.result-card dl { display: grid; grid-template-columns: 160px 1fr; gap: 0.5rem 1rem; margin: 0; }
.result-card dt { color: var(--muted); }
.result-card dd { margin: 0; }

/* ── Forms ─────────────────────────────────── */
.sds-form fieldset {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem 1.5rem 1.5rem;
  margin: 0 0 1.25rem; box-shadow: var(--shadow);
  position: relative;
}
.sds-form fieldset > legend {
  font-weight: 600; padding: 0 0.5rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.sds-form fieldset > legend .icon { color: var(--brand); }
.sds-form label { display: block; margin-top: 1rem; font-weight: 500; }
.sds-form label.checkbox { font-weight: normal; display: flex; align-items: center; gap: 0.5rem; }
.sds-form input[type=text], .sds-form input[type=email], .sds-form input[type=number], .sds-form input[type=file], .sds-form textarea {
  display: block; width: 100%; max-width: 540px; margin-top: 0.25rem;
  padding: 0.55rem 0.8rem; font: inherit; color: inherit;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color 0.1s, box-shadow 0.1s;
}
.sds-form input:focus, .sds-form textarea:focus, .sds-form select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(11,95,255,0.15);
}
.sds-form textarea { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9em; }
.sds-form small { display: block; color: var(--muted); margin-top: 0.25rem; }
.sds-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 720px) { .sds-form .row { grid-template-columns: 1fr; } }
.sds-form .req { color: var(--fail); }
.sds-form .actions { display: flex; gap: 0.75rem; align-items: center; margin-top: 1rem; }
.sds-form button {
  background: linear-gradient(180deg, var(--brand) 0%, #084acc 100%);
  color: var(--brand-fg); border: none;
  padding: 0.7rem 1.6rem; border-radius: var(--radius-sm);
  font: inherit; font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 1px 2px rgba(11,95,255,0.3);
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: filter 0.1s, transform 0.05s;
}
.sds-form button:hover { filter: brightness(1.05); }
.sds-form button:active { transform: translateY(1px); }

/* ── Buttons (link-styled) ─────────────────────────────────── */
.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.55rem 1.1rem; border-radius: var(--radius-sm); font-weight: 500;
  margin-right: 0.5rem; margin-top: 0.5rem;
  transition: filter 0.1s, background 0.1s;
}
.btn-primary {
  background: linear-gradient(180deg, var(--brand) 0%, #084acc 100%);
  color: var(--brand-fg);
  box-shadow: 0 1px 2px rgba(11,95,255,0.25);
}
.btn-primary:hover { filter: brightness(1.05); text-decoration: none; color: var(--brand-fg); }
.btn-secondary { background: #fff; color: var(--fg); border: 1px solid var(--border); }
.btn-secondary:hover { background: #f8fafc; text-decoration: none; }
.actions-row { margin-top: 2rem; }

/* ── Status badges ─────────────────────────────────── */
.status {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2em 0.65em; border-radius: 99px;
  font-size: 0.85em; font-weight: 500;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.status::before { content: "●"; font-size: 0.7em; }
.status-ok, .status-match, .status-running, .status-present {
  background: var(--ok-soft); color: var(--ok);
}
.status-warn, .status-stale, .status-drifted, .status-needs_refresh, .status-missing {
  background: var(--warn-soft); color: var(--warn);
}
.status-fail, .status-error, .status-not_in_cache {
  background: var(--fail-soft); color: var(--fail);
}
.status-pending { background: rgba(15,23,42,0.06); color: var(--muted); }
.status-pending::before { color: var(--muted); }

/* ── Tables ─────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.data-table th, .data-table td { padding: 0.65rem 0.95rem; text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.data-table th { background: #f8fafc; font-weight: 600; font-size: 0.9rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: #f8fafc; }
.data-table .notes { font-size: 0.85rem; color: var(--muted); }
.data-table .row-stale td, .data-table .row-drifted td { background: rgba(245,158,11,0.05); }
.data-table .row-not_in_cache td { background: rgba(185,28,28,0.04); }

.count-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.count-list li {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.65rem 1.1rem; display: flex; flex-direction: column;
  min-width: 100px;
}
.count-list .count-num { font-size: 1.6rem; font-weight: 700; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.count-list .count-num.status-ok   { color: var(--ok); }
.count-list .count-num.status-warn { color: var(--warn); }
.count-list .count-num.status-fail { color: var(--fail); }

.pictogram {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2em 0.65em; margin: 0.1em 0.3em 0.1em 0;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  border: 1px solid var(--border); border-radius: 99px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.85rem; font-weight: 500;
}

.info {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem 1.5rem; margin: 1.5rem 0; box-shadow: var(--shadow);
}
.info ul { padding-left: 1.5rem; margin: 0.5rem 0; }
.info li { margin: 0.4rem 0; }
.info h3::before { content: "ℹ️ "; }

.downloads { margin-top: 1.5rem; }

/* ── Info banners (prefill, LLM, warnings) ───────── */
.info-banner {
  background: linear-gradient(90deg, var(--mode-3-soft) 0%, #ffffff 100%);
  border: 1px solid var(--mode-3);
  border-left-width: 4px;
  padding: 0.85rem 1.1rem; border-radius: var(--radius);
  margin: 0 0 1.5rem;
  color: #064e3b;
  display: flex; align-items: flex-start; gap: 0.6rem;
}
.info-banner::before { content: "✨"; }
.warning {
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  border-left-width: 4px;
  padding: 0.85rem 1.1rem; border-radius: var(--radius);
  margin: 0 0 1.5rem;
  color: #78350f;
  display: flex; align-items: flex-start; gap: 0.6rem;
}
.warning::before { content: "⚠️"; }
.error-banner {
  background: var(--fail-soft);
  border: 1px solid var(--fail);
  border-left-width: 4px;
  padding: 0.85rem 1.1rem; border-radius: var(--radius);
  color: #7f1d1d;
  display: flex; align-items: flex-start; gap: 0.6rem;
}
.error-banner::before { content: "❌"; }

/* ── Mode 3 review table ───────── */
.review-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.review-table th, .review-table td {
  border-bottom: 1px solid var(--border-soft);
  padding: 0.5rem 0.6rem;
  text-align: left;
  vertical-align: top;
}
.review-table th { background: #f8fafc; font-weight: 600; font-size: 0.85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.review-table input[type="text"] { width: 100%; box-sizing: border-box; padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.review-table input[type="text"]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(11,95,255,0.15); }
.raw-text {
  background: #1e293b; color: #e2e8f0;
  border: 1px solid #0f172a;
  padding: 1rem; border-radius: var(--radius);
  max-height: 30em; overflow: auto;
  font-size: 0.82em; line-height: 1.4;
  white-space: pre-wrap;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* ── Template list (admin) ───────── */
.template-list { width: 100%; border-collapse: collapse; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.template-list th, .template-list td { padding: 0.85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-soft); }
.template-list th { background: #f8fafc; font-weight: 600; font-size: 0.9rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.template-list tr:last-child td { border-bottom: none; }
.template-list tr.missing { opacity: 0.55; }
.template-list tr.missing td { background: rgba(185,28,28,0.04); }
.template-list td.actions { white-space: nowrap; }
.template-list td.actions form { display: inline; }
.placeholder-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.placeholder-chips code { font-size: 0.78em; padding: 0.1em 0.45em; background: rgba(11,95,255,0.08); color: var(--brand); border-radius: 99px; }
.badge-builtin { display: inline-block; font-size: 0.7em; padding: 0.15em 0.55em; border-radius: 99px; background: var(--mode-3-soft); color: var(--mode-3); font-weight: 600; vertical-align: middle; margin-left: 0.4rem; }
.badge-warn { display: inline-block; font-size: 0.7em; padding: 0.15em 0.55em; border-radius: 99px; background: var(--fail-soft); color: var(--fail); font-weight: 600; vertical-align: middle; margin-left: 0.4rem; }
.btn-danger { background: var(--fail); color: white; border: none; padding: 0.4rem 0.85rem; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.85rem; font-weight: 500; }
.btn-danger:hover { filter: brightness(0.92); }