/* Public survey page (Views/LandingPage/PublicSurvey.cshtml).
   White rounded cards on the tenant-primary canvas; one accent colour
   (--primary-rgb from Settings/GetRootCss), everything else neutral. */

body {
    background: rgb(var(--primary-rgb, 33, 31, 96));
    -webkit-font-smoothing: antialiased;
}

/* ---------- Cards ---------- */

.card {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(33, 31, 96, .07);
    overflow: hidden; /* keeps the tinted header inside the rounded corners */
}

.card-logo {
    padding: 2rem 2rem 0;
    text-align: center;
}

    .card-logo img {
        max-height: 64px;
        max-width: 280px;
    }

/* Section heading: soft primary-tinted band with a short accent bar. */
.card-header {
    background: rgba(var(--primary-rgb, 33, 31, 96), .05);
    border-bottom: 1px solid rgba(var(--primary-rgb, 33, 31, 96), .08);
    padding: 1.1rem 2rem;
}

    .card-header h5 {
        display: flex;
        align-items: center;
        gap: .7rem;
        font-size: 1.08rem;
        font-weight: 600;
        color: #2b2d3a;
    }

        .card-header h5::before {
            content: "";
            width: 4px;
            height: 1.15em;
            border-radius: 2px;
            background: rgb(var(--primary-rgb, 33, 31, 96));
            flex: 0 0 auto;
        }

/* First card only: when the section has a title, breathe between logo and band. */
.card-logo + .card-header { margin-top: 1.5rem; }

.card-body { padding: 1.25rem 2rem 1.75rem; }

    /* Question blocks: breathing room only. Visual separators are the author's call
       via Divider questions (which have their own style setting), not automatic. */
    .card-body > .mb-3 {
        padding: .85rem 0 .35rem;
        margin-bottom: 0 !important;
    }

    .card-body .fw-semibold {
        font-size: 1.02rem;
        color: #2b2d3a;
        margin-bottom: .6rem;
    }

/* ---------- Inputs ---------- */

.form-control,
.form-select {
    border-radius: 9px;
    border-color: #dcdfe7;
    padding: .55rem .8rem;
    background-color: #fbfbfd;
    transition: border-color .12s, box-shadow .12s, background-color .12s;
}

    .form-control:hover,
    .form-select:hover {
        border-color: #c6cad6;
    }

    .form-control:focus,
    .form-select:focus {
        background-color: #fff;
        border-color: rgba(var(--primary-rgb, 33, 31, 96), .55);
        box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb, 33, 31, 96), .1);
    }

textarea.form-control { min-height: 6rem; }

/* Standard radio/checkbox lists: brand accent, roomier rows, whole row clickable. */
.form-check-label {
    padding: .28rem 0;
    cursor: pointer;
}

    .form-check-label input[type="radio"],
    .form-check-label input[type="checkbox"] {
        accent-color: rgb(var(--primary-rgb, 33, 31, 96));
        width: 1.05rem;
        height: 1.05rem;
        margin-right: .55rem;
        vertical-align: -.15rem;
        cursor: pointer;
    }

/* ---------- Tables (tabular questions) ---------- */

/* The responsive wrapper draws the frame so the rounded corners survive scrolling. */
.card-body .table-responsive {
    border: 1px solid #e5e7ee;
    border-radius: 10px;
    margin-top: .35rem;
}

.card-body .table {
    /* The shared table partial carries an mt-2 utility (which is !important);
       inside the framed wrapper that renders as a white strip above the header band. */
    margin-top: 0 !important;
    margin-bottom: 0;
    --bs-table-bg: transparent;
}

    /* Kill Bootstrap's full bordered grid; keep row separators only.
       (.table-bordered borders both the rows and the cells, so zero both.) */
    .card-body .table > :not(caption) > * { border-width: 0; }

    .card-body .table > :not(caption) > * > * {
        border: 0;
        border-bottom: 1px solid #eef0f5;
        padding: .55rem .85rem;
        vertical-align: middle;
        background-color: transparent;
    }

    .card-body .table > tbody > tr:last-child > * { border-bottom: 0; }

    .card-body .table thead th {
        background-color: #f6f7fa;
        color: #6b7080;
        font-size: .78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        white-space: nowrap;
    }

    .card-body .table tbody tr:nth-child(even) > * { background-color: #fbfcfe; }

    /* Row label column */
    .card-body .table tbody td.fw-semibold {
        font-size: .95rem;
        color: #40434f;
    }

    /* Input columns shrink to fit their content; the label column takes all the
       spare width. Every table's inputs then line up against the right edge at
       the same position, which scans consistently as you scroll the page. */
    .card-body .table th:not(:first-child),
    .card-body .table td:not(:first-child) {
        width: 1%;
        white-space: nowrap;
    }

    /* Inputs inside table cells: compact, defined sizes (the shrink-to-fit
       columns above make these the actual column widths). */
    .card-body .table .form-control,
    .card-body .table .form-select {
        padding: .4rem .65rem;
        width: 12rem;
        max-width: 100%;
    }

    .card-body .table input[type="number"].form-control {
        width: 9rem;
        text-align: center;
    }

/* ---------- Submit ---------- */

button[type="submit"] {
    border-radius: 10px;
    padding: .85rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

    button[type="submit"]:hover {
        filter: brightness(.96);
    }