:root {
    --sd-primary: #f5a623;
    --sd-primary-dark: #d18810;
    --sd-text: #2c2c2c;
    --sd-muted: #666;
    --sd-bg: #fafafa;
    --sd-border: #e5e5e5;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    color: var(--sd-text);
    background: var(--sd-bg);
    line-height: 1.5;
}

a { color: var(--sd-primary-dark); }
a:hover { color: var(--sd-primary); }

.page { display: flex; flex-direction: column; min-height: 100vh; }

header.navbar {
    background: var(--sd-primary);
    color: white;
    padding: 1rem 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
header.navbar .navbar-inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
header.navbar a { color: white; text-decoration: none; }
header.navbar a.brand { font-weight: 700; font-size: 1.05rem; }
header.navbar a.back { font-size: 0.875rem; opacity: 0.9; }
header.navbar a.back:hover { opacity: 1; }

main.container {
    flex: 1;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    padding: 2rem;
}

footer.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    text-align: center;
    color: var(--sd-muted);
    border-top: 1px solid var(--sd-border);
    width: 100%;
}

h1 { margin-top: 0; color: var(--sd-text); }
p.lead { font-size: 1.125rem; color: var(--sd-muted); }

#blazor-error-ui {
    background: #ffd;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ----- Buttons ----- */
.btn-primary, .btn-secondary, .btn-tertiary, .btn-danger {
    display: inline-block;
    padding: 0.65rem 1.4rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 1rem;
}
.btn-primary {
    background: var(--sd-primary);
    color: white;
    border-color: var(--sd-primary-dark);
}
.btn-primary:hover { background: var(--sd-primary-dark); color: white; }

.btn-secondary {
    background: white;
    color: var(--sd-primary-dark);
    border-color: var(--sd-primary);
}
.btn-secondary:hover { background: #fff7e6; }

.btn-tertiary {
    background: transparent;
    color: var(--sd-muted);
    border-color: transparent;
    text-decoration: underline;
    padding-left: 0;
    padding-right: 0;
}
.btn-tertiary:hover { color: var(--sd-text); }

/* Same shape as .btn-secondary (white bg, colored outline) so a Delete
   action in a row reads as a button, not an inline link. Red instead of
   orange to flag the destructive intent. */
.btn-danger {
    background: white;
    color: #b00020;
    border-color: #b00020;
}
.btn-danger:hover { background: #fdf2f3; color: #800015; border-color: #800015; }

/* ----- Forms ----- */
fieldset {
    border: 1px solid var(--sd-border);
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    background: white;
}
legend {
    padding: 0 0.5rem;
    font-weight: 600;
    color: var(--sd-text);
}
.field {
    margin-bottom: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.field label {
    font-weight: 600;
    font-size: 0.95rem;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field select {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--sd-border);
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    background: white;
}
.field input:focus, .field select:focus {
    outline: 2px solid var(--sd-primary);
    outline-offset: -1px;
    border-color: var(--sd-primary);
}
.field small { color: var(--sd-muted); font-size: 0.85rem; }
.validation-message { color: #b00020; font-size: 0.875rem; margin-top: 0.15rem; }

label.check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.45rem 0;
    cursor: pointer;
    line-height: 1.4;
    font-weight: normal;
}
label.check input[type="checkbox"] {
    margin-top: 0.25rem;
    flex-shrink: 0;
}
.field.check-large label.check { font-size: 1rem; }

.form-actions {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

/* ----- Question rendering (OT and future disciplines) ----- */
.field.question .prompt {
    font-weight: 600;
    margin: 0 0 0.4rem;
}
.radio-group {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0.4rem;
}
label.radio {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-weight: normal;
}
.field.question .follow-up {
    margin-top: 0.3rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--sd-border);
    border-radius: 4px;
    font-size: 0.95rem;
    display: none;
}
/* Reveal the follow-up only when the radio matching the question's
   data-follow-trigger value is currently checked. Uses CSS :has(), supported
   in Chrome/Edge/Safari/Firefox since 2023. */
.field.question[data-follow-trigger='yes']:has(input[type='radio'][value='yes']:checked) .follow-up,
.field.question[data-follow-trigger='no']:has(input[type='radio'][value='no']:checked) .follow-up {
    display: block;
}
.field.question textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--sd-border);
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    resize: vertical;
}
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* ----- Step indicator ----- */
.step-indicator { margin: 0 0 1.5rem; }
.step-indicator ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: step;
    font-size: 0.85rem;
    color: var(--sd-muted);
}
.step-indicator li {
    padding: 0.3rem 0.7rem;
    background: white;
    border: 1px solid var(--sd-border);
    border-radius: 999px;
}
.step-indicator li[aria-current="step"] {
    background: var(--sd-primary);
    color: white;
    border-color: var(--sd-primary-dark);
    font-weight: 600;
}

/* ----- Admin area chrome (distinct from the public intake) ----- */
header.navbar.admin {
    background: #2c2c2c;
}
header.navbar.admin .navbar-inner {
    color: #e5e5e5;
}
header.navbar.admin a.brand { color: white; }
header.navbar.admin .signed-in-as { font-size: 0.875rem; color: #cfcfcf; }
header.navbar.admin .signed-in-as a { color: white; }
.page.admin main.container.admin { max-width: 1100px; }
.admin-nav { display: flex; gap: 1rem; }
.admin-nav a { color: #cfcfcf; font-size: 0.9rem; text-decoration: none; }
.admin-nav a:hover { color: white; }

/* Schedule page */
.card {
    background: white;
    border: 1px solid var(--sd-border);
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    margin: 1.25rem 0;
}
.card h2 { margin-top: 0; font-size: 1.1rem; }
.row { display: flex; gap: 1rem; flex-wrap: wrap; }
.row .field { flex: 1; min-width: 180px; }
.inline-form { display: inline-flex; gap: 0.4rem; align-items: center; margin: 0; }
.inline-form select { padding: 0.3rem 0.4rem; }
.btn-danger-link {
    background: none;
    border: none;
    color: #b00020;
    cursor: pointer;
    padding: 0;
    font: inherit;
    text-decoration: underline;
}
.btn-danger-link:hover { color: #800015; }
.alert.success { background: #f0f8ed; border: 1px solid #c2dbb6; color: #2a5418; padding: 0.6rem 1rem; border-radius: 4px; margin-bottom: 1rem; }
.alert.info    { background: #e7f2fa; border: 1px solid #b6cfe1; color: #1b3a52; padding: 0.6rem 1rem; border-radius: 4px; margin-bottom: 1rem; }

/* ----- Slot-picker grid on /book-call ----- */
.slot-day {
    margin-top: 2rem;
    margin-bottom: 0.6rem;
    font-size: 1.05rem;
    color: var(--sd-text);
}
.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.5rem;
}
.slot-form { margin: 0; padding: 0; }
.slot-btn {
    width: 100%;
    padding: 0.5rem 0;
    border: 1px solid var(--sd-border);
    background: white;
    border-radius: 4px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.slot-btn:hover {
    border-color: var(--sd-primary);
    background: #fff7e6;
}

/* Read-only twin of .slot-btn for the admin "open time" preview — looks like
   a slot the way a parent sees it, but isn't clickable (no booking here). */
.slot-chip {
    display: block;
    text-align: center;
    padding: 0.5rem 0;
    border: 1px solid var(--sd-border);
    border-radius: 4px;
    background: #fff7e6;
    font-weight: 600;
    color: var(--sd-text);
}

/* Segmented 30/45-min toggle for the preview. */
.seg-toggle {
    display: inline-flex;
    margin: 0.25rem 0 1rem;
    border: 1px solid var(--sd-primary);
    border-radius: 4px;
    overflow: hidden;
}
.seg-toggle a {
    padding: 0.4rem 1rem;
    font-weight: 600;
    text-decoration: none;
}
.seg-toggle a + a { border-left: 1px solid var(--sd-primary); }
.seg-toggle .seg-on {
    background: var(--sd-primary);
    color: white;
}
.seg-toggle .seg-off {
    background: white;
    color: var(--sd-primary-dark);
}
.seg-toggle .seg-off:hover { background: #fff7e6; }

.alert.error {
    background: #fde8e8;
    border: 1px solid #f5b7b1;
    color: #7a1d18;
    padding: 0.7rem 1rem;
    border-radius: 4px;
    margin: 1rem 0;
}
.confirmation { background: #f0f8ed; border: 1px solid #c2dbb6; padding: 1rem 1.25rem; border-radius: 6px; }
p.empty, p.muted.small { color: var(--sd-muted); }

/* ----- Admin tables + cards ----- */
.filter-bar {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin: 1.5rem 0;
    padding: 0.75rem 1rem;
    background: white;
    border: 1px solid var(--sd-border);
    border-radius: 6px;
}
.filter-bar label { display: inline-flex; gap: 0.5rem; align-items: center; }
.filter-bar select { padding: 0.35rem 0.5rem; font-size: 0.95rem; }
.filter-bar .clear-filter { font-size: 0.85rem; color: var(--sd-muted); }

table.data {
    width: 100%;
    background: white;
    border-collapse: collapse;
    border: 1px solid var(--sd-border);
    border-radius: 6px;
    overflow: hidden;
    font-size: 0.95rem;
}
table.data th, table.data td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--sd-border);
}
table.data th { background: #f4f4f4; font-weight: 600; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: #fffceb; }
table.data .muted { color: var(--sd-muted); font-size: 0.85rem; }

/* Row-action cell: keeps Edit/Delete (and the "in use" placeholder)
   from mashing together. Flex with a gap so a single button, a pair,
   or a button + muted note all read with consistent breathing room. */
table.data td.actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    white-space: nowrap;
}
table.data td.actions .muted { font-size: 0.85rem; padding: 0 0.25rem; }

.status { padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.status-started     { background: #eef; color: #335; }
.status-inprogress  { background: #ffeebb; color: #6a4b00; }
.status-completed   { background: #d6f3d6; color: #0d5e2a; }
.status-offramped   { background: #ffe1e1; color: #8c1c1c; }
.status-abandoned   { background: #eee; color: #555; }

.pagination {
    margin-top: 1rem;
    display: flex;
    gap: 1.5rem;
    align-items: center;
    color: var(--sd-muted);
    font-size: 0.9rem;
}
.empty { padding: 2rem; text-align: center; color: var(--sd-muted); background: white; border: 1px dashed var(--sd-border); border-radius: 6px; }

.kv-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0.5rem 1rem;
    margin: 0.75rem 0 1.5rem;
    padding: 1rem 1.25rem;
    background: white;
    border: 1px solid var(--sd-border);
    border-radius: 6px;
}
.kv-grid div:nth-child(odd) { color: var(--sd-muted); font-size: 0.9rem; padding-top: 0.1rem; }
.kv-grid .muted { color: var(--sd-muted); font-size: 0.85rem; }

blockquote.concerns {
    background: white;
    border-left: 4px solid var(--sd-primary);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0 1.5rem;
    color: var(--sd-text);
    white-space: pre-wrap;
}

fieldset.answers .qa {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px dashed var(--sd-border);
}
fieldset.answers .qa:last-child { border-bottom: none; }
fieldset.answers .prompt { color: var(--sd-text); }
fieldset.answers .answer .follow-up-answer {
    margin-top: 0.25rem;
    padding: 0.4rem 0.6rem;
    background: #fffaeb;
    border-radius: 3px;
    color: var(--sd-text);
    font-style: italic;
}