/* ============================================================================
   SurveyApp — shared styles layered on Bootstrap 5.3
   ----------------------------------------------------------------------------
   This file is the single source of brand truth. Before it existed, #D7230E was
   hardcoded 32 times across 8 files, with three different hover shades and two
   page-background greys. Page-local <style> blocks should now only hold what is
   genuinely unique to that page.
   ========================================================================= */

:root {
    /* ── Brand ──────────────────────────────────────────────────────────── */
    --rdac-red:        #D7230E;
    --rdac-red-hover:  #B91C0B;   /* unified from #C91F0D / #b91c0b / #c01c0b */
    --rdac-red-ring:   rgba(215, 35, 14, .15);   /* :focus ring on form controls */

    /* ── Ink ────────────────────────────────────────────────────────────── */
    --ink:        #1A1A2E;   /* headings */
    --ink-body:   #4A5568;   /* body copy / lead text */
    --ink-muted:  #6C757D;   /* secondary text */
    --ink-subtle: #ADB5BD;   /* eyebrows, drag handles, meta */
    --ink-dark:   #2D3748;   /* dark buttons */

    /* ── Surfaces ───────────────────────────────────────────────────────── */
    --surface-page: #F5F7FA;   /* unified from #f5f7fa / #f4f5f7 */
    --surface-card: #FFFFFF;
    --surface-alt:  #F8F9FA;
    --hairline:     #E9ECEF;
    --border:       #DEE2E6;

    --success:       #198754;
    --success-tint:  #D1FAE5;
    --success-ink:   #065F46;

    /* ── Radii (maps the existing vocabulary, nothing invented) ─────────── */
    --r-pill:    50px;
    --r-pill-sm: 25px;
    --r-pill-xs: 20px;
    --r-lg: 18px;  --r-md: 14px;  --r-sm: 12px;  --r-xs: 10px;

    /* ── Elevation ──────────────────────────────────────────────────────── */
    --shadow-sm: 0 2px 8px rgba(0,0,0,.07);
    --shadow-md: 0 3px 14px rgba(0,0,0,.08);
    --shadow-lg: 0 8px 28px rgba(0,0,0,.13);
    --shadow-card: 0 8px 32px rgba(0,0,0,.10);

    /* ── Layout ─────────────────────────────────────────────────────────── */
    --content-max: 1800px;
    --content-pad: 34px;
    --nav-offset:  90px;   /* sticky offset + scroll-margin under the navbar */

    /* Survey-taker aliases. This file used to ship Bootstrap blue here, which is
       why the progress bar and choice pills were off-brand. */
    --brand:       var(--rdac-red);
    --brand-hover: var(--rdac-red-hover);
    --accent:      var(--rdac-red);
}

body { background: var(--surface-page); }

/* ============================================================================
   Layout
   ========================================================================= */

/* Wider page container — use more of the viewport on big screens. js/navbar.js
   emits this too, so the nav gutter lines up with the page gutter. */
.container-wide {
    max-width: var(--content-max);
    width: 95%;
    padding-left: var(--content-pad);
    padding-right: var(--content-pad);
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================================
   Navbar
   ========================================================================= */
.navbar-brand { font-weight: 700; letter-spacing: .5px; }
/* The <img> also carries width="175" so the logo stays correct if this file fails
   to load; this only shrinks it on narrow screens. */
.navbar-logo  { width: 175px; max-width: min(175px, 42vw); height: auto; }

/* ============================================================================
   Typography
   ========================================================================= */
.page-title { font-weight: 800; color: var(--ink); }

.section-heading {
    font-size: 1.25rem; font-weight: 600;
    color: var(--ink-muted); text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 1.8rem;
}

/* ============================================================================
   Buttons
   ----------------------------------------------------------------------------
   One brand fill, several sizes. The aliases exist so promoting these rules did
   not require touching markup on every page; prefer .btn-rdac in new code.
   ========================================================================= */
.btn-rdac,
.btn-primary-red,
.btn-new,
.btn-begin,
.btn-begin-survey,
.btn-delete {
    background: var(--rdac-red);
    color: #fff;
    border: none;
    border-radius: var(--r-pill);
    font-weight: 600;
}
.btn-rdac:hover,
.btn-primary-red:hover,
.btn-new:hover,
.btn-begin:hover,
.btn-begin-survey:hover,
.btn-delete:hover {
    background: var(--rdac-red-hover);
    color: #fff;
}

/* Per-variant sizing — preserves each page's existing proportions */
.btn-rdac         { padding: 12px; }
.btn-primary-red  { padding: 13px 30px; font-size: 1rem; }
.btn-begin-survey { padding: 17px 41px; font-size: 1.32rem; }
.btn-begin        { padding: 15px 38px; font-size: 1.2rem; }
.btn-new          { padding: 9px 22px;  font-size: .95rem; border-radius: var(--r-pill-sm); }
.btn-delete       { padding: 5px 12px;  font-size: .8rem;  border-radius: var(--r-pill-xs);
                    display: inline-flex; align-items: center; transition: background .15s; }

/* Dark outline pill. Named rather than overriding Bootstrap's .btn-outline-dark,
   which used to be hijacked page-locally on index.html. */
.btn-rdac-ghost {
    border: 2px solid var(--ink-dark); color: var(--ink-dark);
    border-radius: var(--r-pill); padding: 11px 28px;
    font-weight: 600; font-size: 1rem; background: transparent;
}
.btn-rdac-ghost:hover { background: var(--ink-dark); color: #fff; }

/* Larger outline pills used on the org portal hero */
.btn-security, .btn-share {
    border-radius: var(--r-pill); padding: 15px 36px;
    font-weight: 600; font-size: 1.32rem; background: transparent;
}
.btn-security       { border: 2px solid var(--ink-muted); color: var(--ink-muted); }
.btn-security:hover { background: var(--ink-muted); color: #fff; }
.btn-share          { border: 2px solid var(--ink); color: var(--ink); }
.btn-share:hover    { background: var(--ink); color: #fff; }

/* Small dark action pill (admin rows) */
.btn-action {
    background: var(--ink-dark); color: #fff; border: none;
    border-radius: var(--r-pill-xs); padding: 5px 14px; font-size: .8rem; font-weight: 600;
    text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
    transition: background .15s;
}
.btn-action:hover { background: #1A202C; color: #fff; }

/* ============================================================================
   Forms
   ========================================================================= */
.form-control:focus, .form-select:focus {
    border-color: var(--rdac-red);
    box-shadow: 0 0 0 .2rem var(--rdac-red-ring);
}
.form-check-label { cursor: pointer; }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

/* ============================================================================
   Cards & tiles
   ========================================================================= */

/* Generic tile — marketing features, followed-org cards, admin org picker */
.feature-card {
    border: none; border-radius: var(--r-md);
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    transition: transform .15s, box-shadow .15s;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.13); }
.feature-icon { font-size: 2rem; color: var(--rdac-red); }

/* Public org portal survey grid (was .survey-card in survey-home.html) */
.portal-survey-card {
    border: none;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    transition: transform .15s, box-shadow .15s;
}
.portal-survey-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.portal-survey-card .card-title { font-size: 1.5rem; font-weight: 600; }
.portal-survey-card .card-text  { font-size: 1.2rem; line-height: 1.55; }

/* Admin survey list row (was .survey-card in admin/index.html) */
.admin-survey-row {
    background: var(--surface-card);
    border-radius: var(--r-sm);
    border: none;
    border-left: 4px solid var(--success);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease;
    padding: 20px 24px;
}
.admin-survey-row.is-inactive { border-left-color: var(--ink-subtle); }
.admin-survey-row:hover { box-shadow: 0 6px 20px rgba(0,0,0,.11); transform: translateY(-2px); }

/* KPI tile */
.stat-card {
    background: var(--surface-card); border-radius: var(--r-xs);
    padding: 1.25rem 1.5rem; box-shadow: 0 2px 6px rgba(0,0,0,.06);
    text-align: center;
}
.stat-card .value { font-size: 2rem; font-weight: 700; }
.stat-card .label { font-size: .85rem; color: var(--ink-muted); }

/* Centred auth panel (login, change-password) */
.auth-card {
    max-width: 440px; margin: 60px auto;
    background: var(--surface-card); border-radius: var(--r-lg);
    box-shadow: var(--shadow-card); padding: 48px 40px;
}
.rdac-logo { max-width: 180px; margin-bottom: 24px; }

.empty-state {
    border: 2px dashed var(--border);
    padding: 2.5rem; border-radius: var(--r-xs);
    text-align: center; color: var(--ink-muted);
}

/* ============================================================================
   Badges
   ========================================================================= */
.badge-active, .badge-inactive, .badge-draft {
    border-radius: var(--r-pill-xs); padding: 3px 10px;
    font-size: .75rem; font-weight: 600;
}
.badge-active   { background: var(--success-tint); color: var(--success-ink); }
.badge-inactive { background: var(--hairline);     color: var(--ink-muted); }
.badge-draft    { background: #FFF3CD;             color: #664D03; }

/* ============================================================================
   Drag-to-reorder (SortableJS)
   ========================================================================= */
.drag-handle {
    cursor: grab; color: var(--ink-subtle);
    font-size: 1.2rem; padding: 0 10px 0 0; user-select: none;
}
.drag-handle:active { cursor: grabbing; color: var(--ink-muted); }
.drag-handle:hover  { color: var(--ink-muted); }
.sortable-ghost     { opacity: .35; }
.sortable-chosen    { box-shadow: 0 10px 28px rgba(0,0,0,.16) !important; }

/* ============================================================================
   Toasts
   ========================================================================= */
.toast-stack { position: fixed; top: 70px; right: 16px; z-index: 1080; }

/* ============================================================================
   Survey taking
   ========================================================================= */
.modal-survey  { max-width: 1040px; }   /* wider since the question list moved inside */
.modal-content { border-radius: var(--r-md); }

.question-slide { padding: 1rem .5rem .5rem; }
.question-slide h5 { font-size: 1.1rem; font-weight: 600; margin-bottom: 1.25rem; }

.progress { height: 8px; border-radius: 4px; }
.progress-bar { background-color: var(--brand); transition: width .4s ease; }

.btn-choice {
    min-width: 90px; border-radius: var(--r-pill-xs);
    transition: background-color .2s, color .2s;
}
.btn-choice.active, .btn-choice:focus {
    background-color: var(--accent); border-color: var(--accent); color: #fff;
}

.star-group { display: flex; flex-direction: row-reverse; gap: 4px; }
.star-group input[type="radio"] { display: none; }
.star-group label {
    font-size: 1.8rem; color: #DDD; cursor: pointer;
    line-height: 1; transition: color .15s;
}
.star-group input[type="radio"]:checked ~ label,
.star-group label:hover,
.star-group label:hover ~ label { color: #F5A623; }

.nps-group { display: flex; flex-wrap: wrap; gap: 6px; }
.nps-group input[type="radio"] { display: none; }
.nps-group label {
    width: 42px; height: 42px; line-height: 42px; text-align: center;
    border: 1px solid #CCC; border-radius: 6px;
    cursor: pointer; font-size: .9rem;
    transition: background-color .15s, color .15s;
}
.nps-group input[type="radio"]:checked + label {
    background-color: var(--accent); border-color: var(--accent); color: #fff;
}

.likert-group .form-check { padding: .35rem 0; }

#reviewPanel { display: none; }
.review-item {
    background: var(--surface-alt); border-radius: 8px;
    padding: .9rem 1rem; margin-bottom: .6rem;
}
.review-item strong { display: block; margin-bottom: .2rem; }

/* ============================================================================
   Tables
   ========================================================================= */
.table th {
    font-weight: 600; font-size: .85rem;
    text-transform: uppercase; color: var(--ink-muted);
}

/* ============================================================================
   Survey lifecycle stage bar (admin editor)
   ----------------------------------------------------------------------------
   Each chevron OWNS THE TRANSITION INTO ITS STATE, so the control is where you would
   look for it: Go Live sits in the Live chevron, Close Survey in Closed, and Revert /
   Clear All Responses in Draft. The chevron itself is still never clickable — only the
   buttons inside it are — because every transition is destructive and some are guarded
   by a type-to-confirm prompt.

   clip-path gives the notch. It also clips overflow and hit-testing, so stages need
   enough horizontal padding to keep buttons clear of the tapered edges.
   ========================================================================= */
.stage-bar { display: flex; gap: 4px; flex-wrap: wrap; align-items: stretch; }

.stage {
    flex: 1 1 0;
    min-width: 190px;
    min-height: 104px;
    padding: .9rem 1.75rem .9rem 2.5rem;
    background: var(--surface-card);
    color: var(--ink-muted);
    font-weight: 600;
    font-size: .95rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
}
.stage:first-child {
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
    padding-left: 1.5rem;
    border-radius: var(--r-xs) 0 0 var(--r-xs);
}
.stage:last-child {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 18px 50%);
    padding-right: 1.5rem;
    border-radius: 0 var(--r-xs) var(--r-xs) 0;
}

.stage-name  { line-height: 1.2; }
.stage-name small { display: block; font-weight: 500; font-size: .75rem; opacity: .85; }

.stage-actions {
    display: flex; flex-direction: column; align-items: center;
    gap: .4rem; width: 100%;
}
.stage-actions .btn { font-size: .8rem; padding: .3rem .8rem; white-space: nowrap; }
.stage-actions .form-check { margin: 0; font-size: .75rem; font-weight: 500; text-align: left; }
.stage-actions .form-check-label { line-height: 1.25; }

.stage.is-done    { background: var(--success-tint); color: var(--success-ink); }
.stage.is-current { background: var(--rdac-red);     color: #fff; }
/* No opacity here: these chevrons can hold the primary action (Go Live), and a faded
   button reads as disabled. Mute the text colour instead. */
.stage.is-ahead   { background: var(--surface-alt);  color: var(--ink-subtle); }

/* Buttons on the red chevron need light styling regardless of which btn-* variant
   the action declares. */
.stage.is-current .btn {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.65);
    color: #fff;
}
.stage.is-current .btn:hover {
    background: #fff;
    border-color: #fff;
    color: var(--rdac-red);
}
.stage.is-current .form-check-label { color: #fff; }
.stage.is-current .form-check-input {
    background-color: rgba(255,255,255,.25);
    border-color: rgba(255,255,255,.65);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.stage.is-current .form-check-input:checked {
    background-color: #fff;
    border-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23D7230E'/%3e%3c/svg%3e");
}
.stage.is-current .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(255,255,255,.3); }

/* Three chevrons are illegible on a phone — stack them as plain blocks. */
@media (max-width: 575.98px) {
    .stage-bar { flex-direction: column; gap: 6px; }
    .stage,
    .stage:first-child,
    .stage:last-child {
        clip-path: none;
        border-radius: var(--r-xs);
        padding: .75rem 1rem;
        min-height: 0;
        /* The base rule is flex:1 1 0 for the horizontal bar. Once the bar is a COLUMN that
           zero basis applies to height, collapsing every stage on top of its own content. */
        flex: 0 0 auto;
    }
    .stage-actions .btn { width: 100%; }
}

/* ============================================================================
   Question table-of-contents rail (admin editor)
   ========================================================================= */
.q-rail { max-height: none; }

.q-rail-item {
    display: flex; align-items: baseline; gap: .5rem;
    padding: .4rem .6rem;
    border-radius: var(--r-xs);
    border-left: 3px solid transparent;
    color: var(--ink-muted);
    text-decoration: none;
    font-size: .875rem;
    line-height: 1.35;
}
.q-rail-item:hover { background: var(--surface-alt); color: var(--ink); }
.q-rail-item.is-active {
    background: var(--surface-alt);
    border-left-color: var(--rdac-red);
    color: var(--ink);
    font-weight: 600;
}
.q-rail-num  { flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--ink-subtle); }
.q-rail-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sticky only on desktop: below lg the rail is a Bootstrap collapse, and sticky
   positioning fights the expand/collapse. */
@media (min-width: 992px) {
    .q-rail {
        position: sticky;
        top: var(--nav-offset);
        max-height: calc(100vh - 110px);
        overflow-y: auto;
    }
}

/* Answered state — used by the survey taker's question list, which reuses .q-rail-item. */
.q-rail-item.is-answered { color: var(--ink); }
.q-rail-tick { margin-left: auto; flex-shrink: 0; color: var(--success); visibility: hidden; }
.q-rail-item.is-answered .q-rail-tick { visibility: visible; }

/* The taker's list lives inside a modal, so it scrolls within the dialog rather than
   sticking to the viewport. */
.s-rail-head {
    font-size: .75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: var(--ink-subtle); margin-bottom: .5rem;
}
@media (min-width: 992px) {
    .s-rail { max-height: 50vh; overflow-y: auto; padding-right: 4px; }
}
@media (max-width: 991.98px) {
    .s-rail { max-height: 40vh; overflow-y: auto; margin-bottom: .5rem; }
}

/* Anchor targets clear the navbar without any JS scroll maths. */
.question-item { scroll-margin-top: var(--nav-offset); }

/* ============================================================================
   Small-screen adjustments
   ----------------------------------------------------------------------------
   Deliberately NOT using `body { overflow-x: hidden }` to close out the responsive
   pass: it hides overflow bugs rather than fixing them, and it breaks position:sticky
   (which the editor's question rail depends on).
   ========================================================================= */
@media (max-width: 575.98px) {
    /* An 11-point NPS scale at 42px plus gaps needs 462px. It wraps, but two tidy
       rows of six read far better than a ragged three. */
    .nps-group { gap: 4px; }
    .nps-group label {
        width: 36px; height: 36px; line-height: 36px;
        font-size: .8rem;
    }

    /* Yes/No + True/False pills */
    .btn-choice { min-width: 76px; }

    /* Small admin pills were ~26px tall — well under the 44px touch guideline. */
    .btn-action, .btn-delete { min-height: 38px; }

    /* Pill CTAs get tall fast at their desktop padding. */
    .btn-begin, .btn-begin-survey { padding: 13px 26px; font-size: 1.05rem; }
    .btn-security, .btn-share     { padding: 12px 24px; font-size: 1.05rem; }
    .btn-rdac-ghost               { padding: 10px 22px; }

    /* Cards and section headings tighten up */
    .section-heading { font-size: 1.05rem; margin-bottom: 1.1rem; }
    .stat-card       { padding: 1rem; }
    .stat-card .value { font-size: 1.6rem; }
    .auth-card       { margin: 24px auto; padding: 32px 22px; }
    .empty-state     { padding: 1.75rem 1rem; }

    /* The wide container's 34px gutters are too generous on a phone. */
    .container-wide { width: 100%; padding-left: 16px; padding-right: 16px; }

    /* The brand (logo + title) and a back button do not fit 358px together. Let the bar wrap
       and the title truncate rather than pushing the button off-screen. */
    .navbar > .container-wide { flex-wrap: wrap; row-gap: 8px; }
    .navbar-brand { min-width: 0; }
    .navbar-brand > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .navbar-logo { width: 130px; }
    #navBack { flex-shrink: 0; }

    /* Bootstrap row gutters are implemented as negative margins, so a g-5 row (-24px per
       side) pokes 8px outside this container's 16px padding and makes the page
       horizontally scrollable. Cap the gutter rather than widening the gutter back up. */
    .container-wide .row { --bs-gutter-x: 1.5rem; }
}

/* ============================================================================
   Site footer (injected by js/footer.js)
   ========================================================================= */
.site-footer {
    border-top: 1px solid var(--hairline);
    background: var(--surface-card);
    padding: 1.25rem 0;
    margin-top: 3rem;
    font-size: .875rem;
    color: var(--ink-muted);
}
.site-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-align: center;
}
.site-footer-link { color: var(--ink-muted); text-decoration: none; }
.site-footer-link:hover { color: var(--rdac-red); text-decoration: underline; }
.site-footer-sep { color: var(--ink-subtle); }

/* The separators read as clutter once the links wrap onto their own lines. */
@media (max-width: 575.98px) {
    .site-footer { margin-top: 2rem; padding: 1rem 0; }
    .site-footer-sep { display: none; }
    .site-footer-inner { gap: .35rem 1rem; }
}