/* Itinerary Platform: shared layout. Full-width content up to a sensible maximum; light and dark. */
:root { --bg:#f6f7f9; --card:#fff; --ink:#1c2430; --muted:#5b6675; --line:#dde2ea; --accent:#0b5fff; --accent-ink:#fff; --soft:#eef2f8; --bad:#b42318; --good:#067647; --max:1440px; }
@media (prefers-color-scheme: dark) {
    :root { --bg:#12161c; --card:#1b212a; --ink:#e8ecf2; --muted:#9aa6b5; --line:#2c3541; --accent:#6ea0ff; --accent-ink:#0b1220; --soft:#222a35; --bad:#ff8a80; --good:#5fd39a; }
}
* { box-sizing:border-box }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif }
a { color:var(--accent) }
code { word-break:break-all }
.muted { color:var(--muted) }
.ok { color:var(--good) }
.err { color:var(--bad); margin:8px 0 }

/* ---- top bar and menu (always present once signed in) ---- */
.topbar { background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20 }
.bar { max-width:var(--max); margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:20px; min-height:56px; flex-wrap:wrap }
.brand { font-weight:700; color:var(--ink); text-decoration:none; display:flex; flex-direction:column; line-height:1.15; padding:8px 0 }
.brand small { font-weight:500; color:var(--muted); font-size:.75rem }
.menu { display:flex; gap:4px; flex-wrap:wrap; flex:1 }
.menu a, .who summary { display:inline-block; padding:8px 12px; border-radius:6px; color:var(--ink); text-decoration:none; font-size:.95rem }
.menu a:hover, .who summary:hover { background:var(--soft) }
.menu a.on { background:var(--soft); font-weight:600; box-shadow:inset 0 -2px 0 var(--accent) }
.who { margin-left:auto; position:relative }
.who summary { cursor:pointer; list-style:none }
.who summary::-webkit-details-marker { display:none }
.who summary::after { content:" \25BE"; color:var(--muted) }
.who .drop { position:absolute; right:0; top:100%; min-width:230px; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:6px; box-shadow:0 8px 24px rgba(0,0,0,.12) }
.who .drop a, .who .drop .who-line { display:block; padding:8px 10px; border-radius:6px; text-decoration:none; color:var(--ink) }
.who .drop a:hover { background:var(--soft) }
.who .drop .who-line { color:var(--muted); font-size:.85rem; word-break:break-all }
.acting { background:#fff4d6; color:#5c4300; border-bottom:1px solid #ecd48a; font-size:.9rem }
.acting .bar { min-height:38px }
.acting form { margin:0 0 0 auto }
.acting button { margin:0; padding:3px 12px; background:#5c4300; color:#fff }
@media (prefers-color-scheme: dark) { .acting { background:#3a2e07; color:#f3e2a8; border-color:#6b5513 } .acting button { background:#f3e2a8; color:#3a2e07 } }

/* ---- page ---- */
main { max-width:var(--max); margin:24px auto; padding:0 24px }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px }
.page-head h1 { margin:0; font-size:1.6rem }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:20px; margin-bottom:16px }
.card.narrow, .narrow { max-width:680px }
.card h1 { margin-top:0 }

/* ---- admin tabs ---- */
.tabs { display:flex; gap:2px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin:0 0 20px }
.tabs a { padding:10px 16px; text-decoration:none; color:var(--muted); border-bottom:3px solid transparent; margin-bottom:-1px; font-weight:500 }
.tabs a:hover { color:var(--ink) }
.tabs a.on { color:var(--ink); border-bottom-color:var(--accent); font-weight:600 }

/* ---- forms ---- */
label { display:block; margin:12px 0 4px; font-weight:600 }
input, select, textarea { width:100%; padding:10px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--ink); font:inherit }
input[type=checkbox], input[type=radio] { width:auto; margin-right:8px }
label:has(> input[type=checkbox]), label:has(> input[type=radio]) { font-weight:600; display:flex; align-items:flex-start; gap:2px }
button, .btn { margin-top:16px; padding:10px 18px; border:0; border-radius:6px; background:var(--accent); color:var(--accent-ink); font:inherit; cursor:pointer; text-decoration:none; display:inline-block }
button.secondary, .btn.secondary { background:transparent; color:var(--accent); border:1px solid var(--accent) }
.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:.85rem; 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 }
table { width:100%; border-collapse:collapse }
th, td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top }
thead th { font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); white-space:nowrap }
tbody tr:hover { background:var(--soft) }
td.actions { white-space:nowrap }
.badge { display:inline-block; padding:1px 8px; border-radius:999px; font-size:.78rem; background:var(--soft); color:var(--muted); border:1px solid var(--line) }
.badge.good { color:var(--good) }
.badge.bad { 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:6px; text-decoration:none; color:var(--ink); 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) }

@media (max-width: 720px) {
    .bar, main { padding-left:14px; padding-right:14px }
    .who { margin-left:0 }
}

/* 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 }