/* AppzCart Clinic manual UI testing: one stylesheet for every page in docs/test (Modern Aqua colours). */
:root {
  --bg: #ffffff; --surface: #f6f9fb; --border: #dde5eb; --text: #1b2228; --muted: #5a6670;
  --accent: #1e9fe3; --accent-2: #12b5d3; --accent-dark: #0f6fa6; --accent-soft: #e6f5fc;
  --ok: #1e7f4f; --ok-soft: #e5f5ec; --fail: #c0392b; --fail-soft: #fdecea; --warn: #9a5b00; --warn-soft: #fff4dc;
  --idle: #6b7680; --idle-soft: #eef1f4; --code-bg: #eef3f6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12171b; --surface: #1a2127; --border: #2c363e; --text: #e8eef2; --muted: #9daab4;
    --accent: #45b6f0; --accent-2: #3ccbe3; --accent-dark: #8fd3f7; --accent-soft: #15293a;
    --ok: #5cc995; --ok-soft: #15291f; --fail: #f08070; --fail-soft: #33191a; --warn: #f0c060; --warn-soft: #2c2412;
    --idle: #a0abb4; --idle-soft: #232b31; --code-bg: #222a31;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; }
main { max-width: 1180px; margin: 0 auto; padding: 24px 16px 64px; }

.topbar { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.topbar a { color: var(--muted); text-decoration: none; }
.topbar a:hover, .topbar a.here { color: var(--accent); }

header { border-bottom: 3px solid var(--accent); border-image: linear-gradient(90deg, var(--accent), var(--accent-2)) 1; padding-bottom: 16px; margin-bottom: 28px; }
.eyebrow { color: var(--accent); font-weight: 600; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
h1 { font-size: 30px; margin: 4px 0 6px; }
h2 { font-size: 21px; margin: 40px 0 10px; padding-top: 8px; border-top: 1px solid var(--border); }
h3 { font-size: 16px; margin: 22px 0 6px; }
p, li { max-width: 82ch; }
.meta { color: var(--muted); font-size: 13px; }
a { color: var(--accent-dark); }

nav.toc { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 18px; margin: 20px 0; }
nav.toc ol { margin: 4px 0; padding-left: 20px; columns: 2; column-gap: 32px; }
nav.toc a { color: var(--text); }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; margin: 12px 0; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--border); }
th { background: var(--surface); font-weight: 600; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.id { font-weight: 600; white-space: nowrap; color: var(--accent-dark); }
td ol, td ul { margin: 0; padding-left: 18px; }
td li { margin: 0 0 2px; }

/* Tags */
.tag { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); white-space: nowrap; }
.tag.critical { background: var(--fail-soft); color: var(--fail); border-color: transparent; }
.tag.high { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.tag.medium { background: var(--accent-soft); color: var(--accent-dark); border-color: transparent; }
.tag.low { color: var(--muted); }
.tag.role { background: var(--accent-soft); color: var(--accent-dark); border-color: transparent; }

/* Call-outs */
.note, .warn, .tip { border-radius: 10px; padding: 12px 16px; margin: 14px 0; }
.note { background: var(--accent-soft); }
.warn { background: var(--warn-soft); }
.tip { background: var(--ok-soft); }
.note strong:first-child, .warn strong:first-child, .tip strong:first-child { display: block; margin-bottom: 2px; }

code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; background: var(--code-bg); padding: 1px 5px; border-radius: 4px; }
.ui { font-weight: 600; }

/* Flows */
.flow { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.flow li { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 8px; padding: 4px 10px; font-size: 14px; }
.flow li:not(:last-child)::after { content: "→"; margin-left: 10px; color: var(--muted); }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin: 14px 0; }
.card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; color: var(--text); text-decoration: none; }
a.card:hover { border-color: var(--accent); }
.card b { display: block; margin-bottom: 2px; }
.card span { color: var(--muted); font-size: 14px; }

/* Scenario blocks (high-level page) */
.scenario { border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px; padding: 12px 16px; margin: 14px 0; background: var(--bg); }
.scenario h3 { margin: 0 0 4px; }
.scenario .meta { margin-bottom: 6px; }
.scenario ol { margin: 6px 0; padding-left: 22px; }
.scenario .expect { background: var(--ok-soft); border-radius: 8px; padding: 8px 12px; margin-top: 8px; font-size: 14px; }

/* Filters and toolbar */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0; }
.toolbar input, .toolbar select, .field input { font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); }
.toolbar input[type=search] { flex: 1 1 220px; min-width: 0; }
.btn { font: inherit; font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: 0; }
.btn.primary:hover { filter: brightness(1.05); }
.count { color: var(--muted); font-size: 13px; }

/* Team plan: status tracking */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 14px 0; }
.stat { border-radius: 10px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); }
.stat b { display: block; font-size: 24px; line-height: 1.2; }
.stat span { font-size: 13px; color: var(--muted); }
.stat.pass b { color: var(--ok); } .stat.fail b { color: var(--fail); } .stat.blocked b { color: var(--warn); } .stat.notrun b { color: var(--idle); }
.bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--idle-soft); margin: 8px 0 4px; }
.bar i { display: block; height: 100%; }
.bar .pass { background: var(--ok); } .bar .fail { background: var(--fail); } .bar .blocked { background: #e0a020; }

.tester { border: 1px solid var(--border); border-radius: 12px; margin: 18px 0; overflow: hidden; }
.tester > .head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.tester > .head h3 { margin: 0; flex: 1 1 200px; }
.tester > .head .field { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); }
.tester > .head .field input { width: 170px; }
.tester > .body { padding: 4px 16px 12px; }
select.status { font: inherit; font-size: 13px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
select.status.Pass { background: var(--ok-soft); color: var(--ok); }
select.status.Fail { background: var(--fail-soft); color: var(--fail); }
select.status.Blocked { background: var(--warn-soft); color: var(--warn); }
textarea.notes { font: inherit; font-size: 13px; width: 100%; min-width: 160px; min-height: 34px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); resize: vertical; }
tr.Pass td:first-child { box-shadow: inset 4px 0 var(--ok); }
tr.Fail td:first-child { box-shadow: inset 4px 0 var(--fail); }
tr.Blocked td:first-child { box-shadow: inset 4px 0 #e0a020; }

.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 14px; }
.pager a { text-decoration: none; }

@media (max-width: 640px) { nav.toc ol { columns: 1; } h1 { font-size: 25px; } .tester > .head .field input { width: 130px; } }
@media print {
  nav.toc, .topbar, .pager, .toolbar, .no-print { display: none !important; }
  .table-wrap { overflow: visible; }
  body { font-size: 12px; }
}