/* Build My Trip App: shared design system and layout. Light by default, dark when the device asks for it.
   Tokens first: every other stylesheet (builder, chat, suppliers) reads these names, so change a value here, not in each file. */
:root {
    color-scheme: light dark;
    --navy:#0f1e3d; --navy-2:#172c57;
    --bg:#f1f5f9; --card:#fff; --ink:#0f172a; --body:#334155; --muted:#64748b; --line:#e2e8f0; --field:#f8fafc; --soft:#f1f5f9;
    --accent:#1d6cf2; --accent-hover:#1559cc; --accent-ink:#fff; --accent-soft:#eef4ff;
    --good:#047857; --good-bg:#ecfdf5; --warn:#b45309; --warn-bg:#fffbeb; --bad:#b91c1c; --bad-bg:#fef2f2;
    --ring:rgba(29,108,242,.18); --line-strong:#cbd5e1; --row-hover:#f8fafd;
    --shadow:0 1px 2px rgba(15,23,42,.04), 0 12px 32px -16px rgba(15,23,42,.10);
    --pop-shadow:0 16px 40px -12px rgba(15,23,42,.25);
    --max:1440px;
    --font:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* aliases used by the design mockups and older stylesheets */
    --blue:var(--accent); --blue-hover:var(--accent-hover); --blue-soft:var(--accent-soft);
}
@media (prefers-color-scheme: dark) {
    :root {
        --navy:#0a1530; --navy-2:#112247;
        --bg:#0b1220; --card:#121b2d; --ink:#e8edf5; --body:#c5cfdd; --muted:#8f9bb0; --line:#23304a; --field:#0d1526; --soft:#18233a;
        --accent:#6ea0ff; --accent-hover:#8ab4ff; --accent-ink:#0b1220; --accent-soft:#16264a;
        --good:#5fd39a; --good-bg:#0f2a20; --warn:#f0b35a; --warn-bg:#2c2210; --bad:#ff8a80; --bad-bg:#321416;
        --ring:rgba(110,160,255,.28); --line-strong:#33425f; --row-hover:#16213a;
        --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -16px rgba(0,0,0,.5);
        --pop-shadow:0 16px 40px -12px rgba(0,0,0,.6);
    }
}
* { box-sizing:border-box }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--body); font:15px/1.55 var(--font); -webkit-font-smoothing:antialiased }
h1, h2, h3 { color:var(--ink) }
a { color:var(--accent) }
code { word-break:break-all }
.muted { color:var(--muted) }
.ok { color:var(--good) }
.err { color:var(--bad); margin:8px 0 }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px }

/* ---- top bar and menu (always present once signed in) ---- */
.topbar { background:linear-gradient(160deg, var(--navy-2), var(--navy)); position:sticky; top:0; z-index:20; box-shadow:0 1px 0 rgba(255,255,255,.06), 0 6px 20px -12px rgba(15,23,42,.5) }
.bar { max-width:var(--max); margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:24px; min-height:64px }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; padding:8px 0; flex:none }
.brand small { padding:3px 9px; border-radius:999px; background:rgba(255,255,255,.12); color:#cfe0ff; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap }
/* The supplied logo is dark lettering on white, so it sits on a white chip on the navy bar. Swap for a white logo file when one exists. */
.brand-logo { display:block; height:36px; width:auto; background:#fff; border-radius:8px; padding:3px 8px }
.menu { display:flex; gap:4px; flex:1; min-width:0 }
.menu a, .who summary { display:inline-block; padding:8px 14px; border-radius:8px; color:rgba(255,255,255,.74); text-decoration:none; font-weight:500; white-space:nowrap; transition:background .15s, color .15s }
.menu a:hover { color:#fff; background:rgba(255,255,255,.09) }
.menu a.on { color:#fff; background:rgba(255,255,255,.16) }
.menu a[target="_blank"]::after { content:" \2197"; opacity:.7 }
.who { margin-left:auto; position:relative }
.who summary { display:flex; align-items:center; gap:10px; list-style:none; cursor:pointer; padding:4px 12px 4px 4px; border-radius:999px; color:#fff }
.who summary::-webkit-details-marker { display:none }
.who summary:hover, .who[open] summary { background:rgba(255,255,255,.1) }
.who summary::before { content:attr(data-initial); display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-size:13px; font-weight:700 }
.who summary::after { content:""; width:7px; height:7px; margin-left:2px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.7 }
.who .drop { position:absolute; right:0; top:calc(100% + 8px); min-width:240px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:6px; box-shadow:var(--pop-shadow) }
.who .drop a, .who .drop .who-line { display:block; padding:9px 12px; border-radius:8px; text-decoration:none; color:var(--body); font-weight:500 }
.who .drop a:hover { background:var(--soft); color:var(--ink) }
.who .drop .who-line { color:var(--muted); font-size:.85rem; font-weight:400; margin-bottom:4px; padding-bottom:12px; border-bottom:1px solid var(--line); border-radius:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
/* "Working as" strip (super admin inside an agency): amber, so it stands apart from the navy bar */
.acting { background:#fef3c7; color:#78350f; border-bottom:1px solid #fcd34d; font-size:.9rem }
.acting .bar { min-height:40px; gap:12px }
.acting .bar > span::before { content:""; display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:#d97706 }
.acting form { margin:0 0 0 auto }
.acting button { margin:0; padding:0 12px; height:28px; border-radius:8px; background:#78350f; color:#fff; font-size:13px }
.acting button:hover { background:#5b2a0c }
@media (prefers-color-scheme: dark) { .acting { background:#33260a; color:#f6dfa0; border-color:#6b5513 } .acting .bar > span::before { background:#f0b35a } .acting button { background:#f6dfa0; color:#33260a } .acting button:hover { background:#fff0c4 } }

/* ---- page ---- */
main { max-width:var(--max); margin:0 auto; padding:32px 24px 64px }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; margin-bottom:24px }
.page-head h1 { display:flex; align-items:center; gap:12px; margin:0 0 4px; font-size:1.75rem; font-weight:700; letter-spacing:-.02em }
.page-head .muted { margin:0; max-width:64ch; line-height:1.55 }
.count { padding:2px 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:13px; font-weight:600; letter-spacing:0 }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px; margin-bottom:20px; box-shadow:var(--shadow) }
.card.narrow, .narrow { max-width:680px }
.card h1 { margin-top:0 }
.card h2 { letter-spacing:-.01em }
.empty { padding:48px 24px; text-align:center; color:var(--muted) }
.empty strong { display:block; margin-bottom:4px; color:var(--ink); font-size:1rem }

/* ---- admin tabs ---- */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--line); margin:0 0 24px; overflow-x:auto; scrollbar-width:none }
.tabs::-webkit-scrollbar { display:none }
.tabs a { padding:10px 16px; text-decoration:none; color:var(--muted); border-bottom:3px solid transparent; margin-bottom:-1px; font-weight:500; white-space:nowrap }
.tabs a:hover { color:var(--ink) }
.tabs a.on { color:var(--accent); border-bottom-color:var(--accent); font-weight:600 }

/* ---- forms ---- */
label { display:block; margin:14px 0 6px; font-size:.9rem; font-weight:600; color:var(--body) }
input, select, textarea { width:100%; min-height:42px; padding:9px 13px; border:1px solid var(--line); border-radius:10px; background:var(--field); color:var(--ink); font:inherit; transition:border-color .15s, box-shadow .15s, background .15s }
input:hover, select:hover, textarea:hover { border-color:var(--line-strong) }
input:focus, select:focus, textarea:focus { outline:none; background:var(--card); border-color:var(--accent); box-shadow:0 0 0 4px var(--ring) }
input::placeholder, textarea::placeholder { color:var(--muted); opacity:.8 }
input[type=checkbox], input[type=radio] { width:auto; min-height:0; margin-right:8px; accent-color:var(--accent) }
label:has(> input[type=checkbox]), label:has(> input[type=radio]) { font-weight:600; display:flex; align-items:flex-start; gap:2px }
button, .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; margin-top:16px; padding:0 18px; border:1px solid transparent; border-radius:10px; background:var(--accent); color:var(--accent-ink); font:inherit; font-size:.93rem; font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap; transition:background .15s, border-color .15s, color .15s }
button:hover, .btn:hover { background:var(--accent-hover) }
button:disabled { opacity:.55; cursor:not-allowed }
button.secondary, .btn.secondary { background:var(--card); color:var(--body); border-color:var(--line) }
button.secondary:hover, .btn.secondary:hover { background:var(--soft); border-color:var(--line-strong); color:var(--ink) }
button.danger, .btn.danger { background:var(--bad); color:#fff }
button.secondary.danger, .btn.secondary.danger { background:var(--card); color:var(--body); border-color:var(--line) }
button.secondary.danger:hover, .btn.secondary.danger:hover { background:var(--bad-bg); border-color:var(--bad); color:var(--bad) }
input[type=color] { width:64px; height:42px; padding:3px; cursor:pointer }
.colour-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.colour-row label.inline { margin:0 }
.agency-logo-preview { display:block; max-width:220px; height:auto; background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px }
.phone-form { display:flex; gap:6px; align-items:center }
.phone-form input { width:12em; min-height:34px; padding:4px 10px }
.phone-form button { margin:0; min-height:34px; padding:0 12px }
.stat { display:flex; align-items:baseline; gap:12px; margin:4px 0 12px }
.stat .num { font-size:3rem; font-weight:700; line-height:1; color:var(--ink) }
.stat .what { font-size:1.1rem }
.copyrow { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0 }
.copyrow input { flex:1 1 22em; width:auto; min-width:0 }
.copyrow button { margin:0 }
.filters { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end }
.filters > div { flex:0 1 auto }
.filters label { margin:0 0 4px; font-size:.82rem; color:var(--muted); font-weight:600 }
.filters input, .filters select { width:auto; min-width:150px }
.filters input[type=search] { min-width:260px }
.filters button, .filters .btn { margin:0 }

/* ---- tables ---- */
.table-wrap { overflow-x:auto; border-radius:12px }
table { width:100%; border-collapse:collapse }
th, td { padding:14px 16px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top }
thead th { font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); white-space:nowrap; background:var(--field); font-weight:600 }
tbody tr:last-child td { border-bottom:0 }
tbody tr:hover { background:var(--row-hover) }
td.actions { white-space:nowrap }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums }
code { padding:2px 6px; border-radius:6px; background:var(--soft); color:var(--body); font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:.85em }
.badge { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:600; background:var(--soft); color:var(--muted) }
.badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor }
.badge.good { background:var(--good-bg); color:var(--good) }
.badge.warn { background:var(--warn-bg); color:var(--warn) }
.badge.bad { background:var(--bad-bg); color:var(--bad) }

/* ---- pagination ---- */
.pager { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:16px }
.pager a, .pager span { padding:6px 12px; border:1px solid var(--line); border-radius:8px; text-decoration:none; color:var(--body); background:var(--card) }
.pager a:hover { background:var(--soft) }
.pager .on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent) }
.pager .gap { border:0; background:none; color:var(--muted) }
.pager .total { margin-left:auto; border:0; background:none; color:var(--muted) }

/* table cells: dates and references stay on one line; only titles and text wrap */
td code { white-space:nowrap; word-break:normal }
tbody td:first-child { white-space:nowrap }
.admin-body h1 { font-size:1.25rem }
.prepared { display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; margin:0 0 12px; }
.prepared label { margin:0; }
.prepared input[type=text] { width:240px; max-width:100%; margin:0 0 0 8px; }
.prepared-for { font-size:.82em; font-style:italic; color:var(--muted); margin-top:2px; }

main.narrow { max-width:1200px }
.back { display:inline-flex; align-items:center; gap:6px; margin:0 0 20px; color:var(--muted); font-weight:500; text-decoration:none }
.back:hover { color:var(--accent) }

/* ---- Agency tab: vanity addresses ---- */
.vanity-rows { display:flex; flex-direction:column; gap:10px; margin:12px 0 }
.vanity-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:10px; align-items:center }
.vanity-row select, .vanity-row input, .vanity-row button { margin:0 }

/* ---- phones ---- */
@media (max-width: 720px) {
    .bar, main { padding-left:16px; padding-right:16px }
    main { padding-top:24px; padding-bottom:48px }
    .page-head h1 { font-size:1.5rem }
    .card { padding:18px }
}
@media (max-width: 640px) {
    .bar { gap:12px }
    .brand small, .who summary span, .who summary::after { display:none }
    .brand-logo { height:30px }
    .menu { overflow-x:auto; scrollbar-width:none; gap:2px }
    .menu::-webkit-scrollbar { display:none }
    .menu a { padding:8px 10px }
    .who { margin-left:0 }
    .who summary { padding:4px }
    .who .drop { position:fixed; right:12px; left:12px; top:68px; min-width:0 }
    .page-head .btn { width:100% }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important } }