/* ==========================================================
   PAGE BACKGROUND
   ========================================================== */

body {
    margin: 0;
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    font-family: Arial, sans-serif;
    background: #dbdbdb;
}


/* ==========================================================
   OVERALL PAGE LAYOUT
   Keeps the footer at the bottom of the page
   ========================================================== */

.layout {
    flex: 1;
}


/* ==========================================================
   TOP NAVIGATION BAR
   ========================================================== */

.sidebar {
    width: 100%;
    height: 120px;

    display: flex;
    align-items: center;
    gap: 25px;

    padding: 0 30px;

    position: fixed;
    top: 0;
    left: 0;

    background: #ffffff;
    border-bottom: 8px solid #e02b20;

    box-sizing: border-box;
    z-index: 1000;
}


/* ==========================================================
   TOP NAVIGATION LOGO
   ========================================================== */

.sidebar-logo {
    height: 80px;
    width: auto;
    display: block;
}


/* ==========================================================
   NORMAL TOP NAVIGATION LINKS
   ========================================================== */

.sidebar a {
    display: inline-flex;
    align-items: center;

    padding: 10px 14px;

    color: black;
    text-decoration: none;
    font-size: 16px;

    border-radius: 6px;
}

.sidebar a:hover {
    background: #ff8c5b;
}


/* ==========================================================
   MAIN PAGE CONTENT
   Padding at the top prevents the fixed navigation bar
   from covering the page content
   ========================================================== */

.content {
    padding: 180px 30px 60px;
}


/* ==========================================================
   CARDS
   ========================================================== */

.card {
    margin: 20px;
    padding: 30px;

    background: white;

    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}


/* ==========================================================
   FORM QUESTION GROUPS
   ========================================================== */

.question-group {
    margin-bottom: 20px;
}


/* ==========================================================
   NORMAL FORM LABELS
   ========================================================== */

label {
    display: block;
    margin-top: 15px;
    font-weight: bold;
}


/* ==========================================================
   NORMAL FORM FIELDS
   This avoids applying full width and padding to checkboxes
   and radio buttons
   ========================================================== */

input[type="text"],
input[type="date"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;

    font-family: inherit;
    font-size: 16px;

    border: 1px solid #bfbfbf;
    border-radius: 3px;

    background: white;

    box-sizing: border-box;
}


/* ==========================================================
   STANDARD CARD FORM FIELD HEIGHTS
   ========================================================== */

.card select,
.card input[type="text"],
.card input[type="date"],
.card input[type="number"],
.card input[type="email"],
.card input[type="password"] {
    height: 44px;
    padding: 10px 14px;
}


/* ==========================================================
   TEXTAREA STYLING
   ========================================================== */

textarea {
    min-height: 100px;
    resize: vertical;

    /* Same typeface as every other field, but kept at the larger size
       these boxes have always had. */
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
}


/* ==========================================================
   FORM FIELD FOCUS
   ========================================================== */

.card input:focus,
.card select:focus,
.card textarea:focus,
.multi-dropdown summary:focus {
    outline: 2px solid #006cff;
    outline-offset: 1px;
}


/* ==========================================================
   NORMAL BUTTONS
   ========================================================== */

button {
    margin-top: 0;
    padding: 12px 20px;

    background: #2b2b2b;
    color: white;

    border: none;
    border-radius: 6px;

    font-size: 16px;

    cursor: pointer;
}

button:hover {
    background: #444;
}

/* A button that deletes something: same shape as a normal button,
   in red so it can't be mistaken for Save. */
button.danger-button {
    background: #c62828;
}

button.danger-button:hover {
    background: #a51f1f;
}


/* ==========================================================
   FORM ACTION BUTTON CONTAINER
   ========================================================== */

.form-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;

    margin-top: 25px;
}


/* ==========================================================
   TABLES
   ========================================================== */

table {
    width: 100%;
    margin-top: 20px;

    border-collapse: collapse;
}

th,
td {
    padding: 12px;

    border: 1px solid black;

    text-align: left;
}

th {
    background: #989898;
    color: white;
}

td {
    background: white;
}

tr:hover td {
    background: #ff8c5b;
}


/* ==========================================================
   FOOTER
   ========================================================== */

footer {
    width: 100%;
    margin-top: 50px;
    padding: 20px;

    background: white;
    border-top: 8px solid #e02b20;

    text-align: center;

    box-sizing: border-box;
}

footer p {
    margin: 0;
    color: #555;
}


/* ==========================================================
   DROPDOWN MENU CONTAINER
   ========================================================== */

.dropdown {
    position: relative;

    display: flex;
    align-items: center;
}


/* ==========================================================
   DROPDOWN BUTTON
   ========================================================== */

.dropdown-button {
    height: auto;
    margin: 0;
    padding: 10px 14px;

    display: flex;
    align-items: center;

    background: transparent;
    color: black;

    border: none;

    font-size: 16px;

    cursor: pointer;
}

.dropdown-button:hover {
    background: #ff8c5b;
    border-radius: 6px;
}


/* ==========================================================
   HIDDEN DROPDOWN CONTENT
   ========================================================== */

.dropdown-content {
    display: none;

    position: absolute;
    top: 100%;
    left: 0;

    min-width: 220px;

    background: white;

    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

    z-index: 2000;
}


/* ==========================================================
   DROPDOWN LINKS
   ========================================================== */

.dropdown-content a {
    display: block;
    padding: 14px;

    color: black;
    text-decoration: none;
}

.dropdown-content a:hover {
    background: #ff8c5b;
}


/* ==========================================================
   SHOW DROPDOWN ON HOVER
   ========================================================== */

.dropdown:hover .dropdown-content {
    display: block;
}


/* ==========================================================
   HYPERLINK BUTTONS
   Used when an anchor needs to look like a button
   ========================================================== */

.button-link {
    display: inline-block;

    margin-top: 20px;
    padding: 12px 20px;

    background: #2b2b2b;
    color: white;

    text-decoration: none;

    border-radius: 6px;
}

.button-link:hover {
    background: #444;
}


/* ==========================================================
   INSPECTION STATUS COLOURS
   ========================================================== */

.completed {
    color: green;
    font-weight: bold;
}

.in_progress {
    color: red;
    font-weight: bold;
}


/* ==========================================================
   MULTI-SELECT DROPDOWN
   ========================================================== */

.multi-dropdown {
    width: 100%;
    margin-top: 15px;
}

.multi-dropdown > label {
    display: block;

    margin-top: 0;
    margin-bottom: 6px;

    font-weight: bold;
}


/* ==========================================================
   MULTI-SELECT OUTER BOX
   ========================================================== */

.multi-dropdown details {
    width: 100%;

    background: white;

    border: 1px solid #bfbfbf;
    border-radius: 3px;

    box-sizing: border-box;
    overflow: hidden;
}


/* ==========================================================
   MULTI-SELECT CLOSED SUMMARY BOX
   ========================================================== */

.multi-dropdown summary {
    height: 44px;
    padding: 0 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    list-style: none;

    font-size: 16px;
    font-weight: normal;

    cursor: pointer;

    box-sizing: border-box;
}

.multi-dropdown summary::-webkit-details-marker {
    display: none;
}


/* ==========================================================
   MULTI-SELECT PLUS AND MINUS ICON
   ========================================================== */

.multi-dropdown summary::after {
    content: "+";

    color: #666;
    font-size: 12px;
}

.multi-dropdown details[open] summary::after {
    content: "-";
}


/* ==========================================================
   MULTI-SELECT CHECKBOX ROWS
   ========================================================== */

.multi-dropdown details label {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 0;
    padding: 12px 14px;

    background: white;

    border-top: 1px solid #e5e5e5;

    font-size: 16px;
    font-weight: normal;
}

.multi-dropdown details label:hover {
    background: #f5f5f5;
}


/* ==========================================================
   MULTI-SELECT CHECKBOX SIZE
   ========================================================== */

.multi-dropdown input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;

    flex-shrink: 0;

    cursor: pointer;
}


/* ==========================================================
   YES / NO BUTTON CONTAINER
   ========================================================== */

.pass-fail-small {
    display: flex;
    gap: 10px;

    margin-top: 8px;
}


/* ==========================================================
   HIDE THE ACTUAL YES / NO RADIO BUTTONS
   The labels become the visible buttons
   ========================================================== */

.pass-fail-small input[type="radio"] {
    display: none;
}


/* ==========================================================
   BASE STYLING FOR YES / NO BUTTONS
   ========================================================== */

.pass-button,
.fail-button, 
.na-button {
    display: inline-block;

    width: 55px;
    margin: 0;
    padding: 8px 10px;

    background: #f5f5f5;
    color: #222;

    border: 1px solid #bdbdbd;
    border-radius: 6px;

    text-align: center;
    font-size: 16px;
    font-weight: normal;

    cursor: pointer;
    user-select: none;

    box-sizing: border-box;

    transition: all 0.2s ease;
}


/* ==========================================================
   DEFAULT YES / NO COLOURS
   YES = GREEN
   NO = RED
   N/A = GREY
   ========================================================== */

/* Default YES selected */
.pass-fail-small input[type="radio"]:checked + .pass-button {
    background: #2e7d32;
    border-color: #2e7d32;
    color: white;
}

/* Default NO selected */
.pass-fail-small input[type="radio"]:checked + .fail-button {
    background: #d32f2f;
    border-color: #d32f2f;
    color: white;
}

/* Default N/A selected */
.pass-fail-small input[type="radio"]:checked + .na-button {
    background: #787878;
    border-color: #787878;
    color: white;
}

/* ==========================================================
   FIRE DETECTION SYSTEM CHECKBOX OPTIONS
   Displays the checkbox first and the text second
   Each option appears on its own line
   ========================================================== */

.system-type {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-top: 10px;
}


/* ==========================================================
   INDIVIDUAL FIRE DETECTION CHECKBOX ROW
   ========================================================== */

.checkbox-option {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* ==========================================================
   FIRE DETECTION CHECKBOX SIZE
   ========================================================== */

.checkbox-option input[type="checkbox"] {
    width: 18px;
    height: 18px;

    margin: 0;
    padding: 0;

    flex-shrink: 0;

    cursor: pointer;
}


/* ==========================================================
   FIRE DETECTION CHECKBOX LABEL
   ========================================================== */

.checkbox-option label {
    display: inline;

    margin: 0;

    font-size: 16px;
    font-weight: normal;

    cursor: pointer;
}


/* ==========================================================
   PRINT STYLING
   Prints only the report card and hides navigation items
   ========================================================== */

@media print {

    @page {
        size: A4 portrait;
        margin: 15mm;
    }

    body {
        margin: 0 !important;
        padding: 0 !important;

        background: white !important;
    }

    .sidebar,
    footer,
    .print-button {
        display: none !important;
    }

    .content {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .report-card {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 20px !important;

        background: white !important;

        border-radius: 0 !important;
        box-shadow: none !important;

        box-sizing: border-box;
    }
}

/* ==========================================================
   SINGLE CHECKBOX
   Prints the question with a checkbox and looks 
   like the rest of the questions
   ========================================================== */

.checkbox-option label {
    display: inline;
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    cursor: pointer;
}

/* Must come after the rule above */
.checkbox-option label.question-checkbox {
    font-size: 16px;
    font-weight: bold;
}

/* ==========================================================
   IMAGE PREVIEW & DEFECT BOX
   Allows the user to see the image they upbloaded
   
   ========================================================== */
.defect-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.image-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
}

.image-preview-container img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.defect-yes {
    color: #c70022;
    font-weight: bold;
}

.defect-no {
    color: #81b532;
    font-weight: bold;
}

.multi-select {
    position: relative;
}

.multi-select-button {
    border: 1px solid #ccc;
    padding: 10px;
    cursor: pointer;
    background: white;
}

.multi-select-options {
    display: none;
    border: 1px solid #ccc;
    background: white;
    padding: 10px;
}

.multi-select-options label {
    font-weight: normal;
}

.multi-select-options label {
    display: block;
    margin-bottom: 8px;
}

.performance-compliant {
    color: #81b532;
}

.performance-critical {
    color: #c70022;
}

.performance-noncritical {
    color: #fe8601;
}

.performance-nonconformance {
    color: #ffb100;
}

.performance-recommendation {
    color: #c22dd5;
}

.performance-isolated {
    color: black;
}

.performance-defect {
    color: #c70022;
}

.performance-na {
    color: black;
}

.service-group-heading {
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 4px;
}

/* ==========================================================
   PILL SELECT
   Defect Classification and Client Advised of Defects, styled to
   match the appliance Type / Size pickers on the PFE form: a
   summary line showing what's picked as small coloured chips, and
   an option list of tick box + colour swatch + label.

   Colours match CompletedInspectionFlow.performanceRequirementColor()
   so a classification looks the same on every form, on the
   completed report and in the PDF.
   ========================================================== */

details.pill-select > summary {
    cursor: pointer;
    padding: 4px 0;
}

/* --- the picked options, shown on the summary line ---
   Kept at a single class so the per-colour rules below, which are
   also single-class, win on source order rather than losing to a
   more specific grey default. --- */
.pill-chip {
    display: inline-block;

    padding: 2px 8px;
    margin: 2px 4px 2px 0;

    background: #666666;
    border-radius: 10px;
    color: #ffffff;

    font-size: 12px;
    font-weight: normal;
}

.pill-chip.performance-compliant      { background:#81b532; color:#ffffff; }
.pill-chip.performance-critical       { background:#c70022; color:#ffffff; }
.pill-chip.performance-noncritical    { background:#fe8601; color:#ffffff; }
.pill-chip.performance-nonconformance { background:#ffb100; color:#222222; }
.pill-chip.performance-recommendation { background:#c22dd5; color:#ffffff; }
.pill-chip.performance-isolated       { background:#9e9e9e; color:#ffffff; }
.pill-chip.performance-defect         { background:#c70022; color:#ffffff; }
.pill-chip.performance-na             { background:#9e9e9e; color:#ffffff; }

.pill-chip.advised-yes    { background:#81b532; color:#ffffff; }
.pill-chip.advised-no     { background:#c70022; color:#ffffff; }
.pill-chip.advised-direct { background:#1e6fd9; color:#ffffff; }
.pill-chip.advised-report { background:#7b3fbf; color:#ffffff; }
.pill-chip.advised-na     { background:#9e9e9e; color:#ffffff; }

/* --- the option list --- */
.multi-select label[class*="performance-"],
.multi-select label[class*="advised-"] {
    display: block;

    margin: 0 0 8px 0;
    padding: 0;

    color: #222222;
    font-weight: bold;

    cursor: pointer;
}

/* A colour swatch between the tick box and the label, the same way
   the appliance Type and Size pickers show theirs. */
.multi-select label[class*="performance-"]::before,
.multi-select label[class*="advised-"]::before {
    content: "";

    display: inline-block;
    width: 12px;
    height: 12px;

    margin: 0 6px;
    vertical-align: middle;

    background: #9e9e9e;
    border-radius: 3px;
}

.multi-select label.performance-compliant::before      { background:#81b532; }
.multi-select label.performance-critical::before       { background:#c70022; }
.multi-select label.performance-noncritical::before    { background:#fe8601; }
.multi-select label.performance-nonconformance::before { background:#ffb100; }
.multi-select label.performance-recommendation::before { background:#c22dd5; }
.multi-select label.performance-isolated::before       { background:#9e9e9e; }
.multi-select label.performance-defect::before         { background:#c70022; }
.multi-select label.performance-na::before             { background:#9e9e9e; }

.multi-select label.advised-yes::before    { background:#81b532; }
.multi-select label.advised-no::before     { background:#c70022; }
.multi-select label.advised-direct::before { background:#1e6fd9; }
.multi-select label.advised-report::before { background:#7b3fbf; }
.multi-select label.advised-na::before     { background:#9e9e9e; }

/* --- System(s) Impacted --- the same widget as Defect Classification
   and Client Advised, with a colour per service group so a picked
   system reads at a glance. Scoped to details.pill-select so the
   Callout form's own service list is left exactly as it was. --- */
details.pill-select label[class*="service-"] {
    display: block;

    margin: 0 0 8px 0;
    padding: 0;

    color: #222222;
    font-weight: bold;

    cursor: pointer;
}

details.pill-select label[class*="service-"]::before {
    content: "";

    display: inline-block;
    width: 12px;
    height: 12px;

    margin: 0 6px;
    vertical-align: middle;

    background: #9e9e9e;
    border-radius: 3px;
}

details.pill-select label.service-fdcie::before   { background:#c70022; }
details.pill-select label.service-emli::before    { background:#1b5e20; }
details.pill-select label.service-pfe::before     { background:#fe8601; }
details.pill-select label.service-hydrant::before { background:#1e6fd9; }
details.pill-select label.service-spk::before     { background:#e91e8c; }
details.pill-select label.service-pump::before    { background:#4a4a4a; }
details.pill-select label.service-plans::before   { background:#81b532; }
details.pill-select label.service-passive::before { background:#8a5a2b; }
details.pill-select label.service-ac::before      { background:#4fc3f7; }

/* The group headings sit inside the dropdown, so they line up with
   the tick boxes rather than with the swatches. */
details.pill-select .service-group-heading {
    margin-top: 12px;
    margin-bottom: 6px;
}

.pill-chip.service-fdcie   { background:#c70022; color:#ffffff; }
.pill-chip.service-emli    { background:#1b5e20; color:#ffffff; }
.pill-chip.service-pfe     { background:#fe8601; color:#ffffff; }
.pill-chip.service-hydrant { background:#1e6fd9; color:#ffffff; }
.pill-chip.service-spk     { background:#e91e8c; color:#ffffff; }
.pill-chip.service-pump    { background:#4a4a4a; color:#ffffff; }
.pill-chip.service-plans   { background:#81b532; color:#ffffff; }
.pill-chip.service-passive { background:#8a5a2b; color:#ffffff; }
.pill-chip.service-ac      { background:#4fc3f7; color:#222222; }


/* ------------------------------------------------------------------
   HORIZONTALLY SCROLLING TABLES

   A <table> will not scroll on its own -- it either squashes its
   columns or spills out of its card. Wrapping it in this container
   lets the wide tables (Open Inspections, All Inspections, Sites)
   slide sideways instead of being clipped when the window is narrow.
   ------------------------------------------------------------------ */
.table-scroll {
    width: 100%;
    max-width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
}

.table-scroll table {
    width: 100%;
    min-width: max-content;
}

/* Stop the cells collapsing into two-line text -- we want the table
   to stay wide and scroll, not to squash. */
.table-scroll th,
.table-scroll td {
    white-space: nowrap;
}

/* ------------------------------------------------------------------
   SECTION DIVIDER

   A breather between two unrelated blocks on the same form -- e.g.
   the FDCIE sign-off and the BOWS tick box that follows it, which
   otherwise sit flush against each other.
   ------------------------------------------------------------------ */
hr.section-divider {
    height: 0;

    margin: 32px 0 24px 0;

    border: 0;
    border-top: 1px solid #dcdcdc;
}

/* ------------------------------------------------------------------
   PHRASE SUGGESTIONS

   The type-ahead on the callout form's long text boxes. The wrapper
   only exists to anchor the dropdown under its own textarea, so it
   must not change the box's own layout.
   ------------------------------------------------------------------ */
.phrase-suggest {
    position: relative;
    display: block;
    width: 100%;
}

.phrase-suggest-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;

    max-height: 240px;
    overflow-y: auto;

    margin-top: -2px;

    background: white;
    border: 1px solid #bfbfbf;
    border-radius: 3px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.phrase-suggest-item {
    padding: 9px 12px;

    font-size: 15px;
    line-height: 1.35;

    cursor: pointer;
}

.phrase-suggest-item + .phrase-suggest-item {
    border-top: 1px solid #f0f0f0;
}

.phrase-suggest-item:hover,
.phrase-suggest-item.active {
    background: #eceef5;
}

/* ------------------------------------------------------------------
   DEFECTS STILL OUTSTANDING

   The read-only list of systems a callout hasn't closed out. The chips
   themselves reuse .pill-chip and the .service-* colours from the
   System(s) Impacted picker, so a system looks the same wherever it
   appears.
   ------------------------------------------------------------------ */
.remaining-systems {
    margin: 6px 0 16px 0;
    min-height: 24px;
}

.remaining-systems .pill-chip {
    font-size: 13px;
    padding: 4px 10px;
}

/* ------------------------------------------------------------------
   PLACEHOLDER NOTE

   Marks a section whose own questions haven't been written yet, so
   it's obvious on screen that the page is a stub rather than a
   section with nothing to ask.
   ------------------------------------------------------------------ */
.placeholder-note {
    padding: 14px 16px;

    background: #f5f6fa;
    border: 1px dashed #c3c7d6;
    border-radius: 6px;

    color: #555555;
}

.placeholder-note p {
    margin: 0;
}

/* ------------------------------------------------------------------
   FLOW NAV -- the jump bar down the left of an inspection

   A fixed rail below the top bar listing the pages this inspection
   covers, so a technician can move several pages at once. Clicking one
   saves the current page first (see flow-nav.js), so nothing typed is
   lost on the way.

   It sits beside the content rather than inside the top bar -- that
   bar is a fixed 120px flex row, and a stack of links inside it
   overflows across the page.
   ------------------------------------------------------------------ */
.flow-nav {
    position: fixed;
    top: 128px;
    left: 0;
    bottom: 0;
    z-index: 900;

    width: 230px;
    padding: 20px 12px;

    background: #f4f5f8;
    border-right: 1px solid #d7d9e3;

    overflow-y: auto;
    box-sizing: border-box;
}

/* The rail is fixed, so the page content needs room made for it. */
.flow-nav ~ .content {
    padding-left: 270px;
}

.flow-nav-heading {
    margin: 0 0 12px 10px;

    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: #777777;
}

.flow-nav .flow-step {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 9px 10px;
    margin-bottom: 2px;

    border-radius: 6px;

    color: #222222;
    font-size: 13px;
    line-height: 1.25;
    text-decoration: none;

    cursor: pointer;
}

.flow-nav .flow-step:hover {
    background: #e4e7ef;
}

.flow-nav .flow-step.current {
    background: #ffffff;
    border: 1px solid #d7d9e3;
    font-weight: bold;
}

.flow-step-number {
    flex: 0 0 22px;

    height: 22px;
    line-height: 22px;

    border-radius: 50%;

    background: #d7d9e3;
    color: #333333;

    font-size: 11px;
    text-align: center;
}

.flow-step.current .flow-step-number {
    background: #c70022;
    color: #ffffff;
}

.flow-step-label {
    flex: 1 1 auto;
}

/* On a narrow window the rail would sit on top of the form, so it
   becomes an ordinary strip above it instead. */
@media (max-width: 900px) {

    .flow-nav {
        position: static;
        width: auto;
        bottom: auto;

        margin: 128px 0 0 0;

        border-right: none;
        border-bottom: 1px solid #d7d9e3;
    }

    .flow-nav ~ .content {
        padding-top: 20px;
        padding-left: 30px;
    }

    .flow-nav .flow-step {
        display: inline-flex;
        margin-right: 6px;
    }
}

/* ------------------------------------------------------------------
   RECORD KEEPING  (Service Sign Off)

   How a copy of the report was given to the client. Uses the same
   pill picker as the other pickers, with its own colours.
   ------------------------------------------------------------------ */
details.pill-select label[class*="record-"] {
    display: block;

    margin: 0 0 8px 0;
    padding: 0;

    color: #222222;
    font-weight: bold;

    cursor: pointer;
}

details.pill-select label[class*="record-"]::before {
    content: "";

    display: inline-block;
    width: 12px;
    height: 12px;

    margin: 0 6px;
    vertical-align: middle;

    background: #9e9e9e;
    border-radius: 3px;
}

details.pill-select label.record-print::before { background:#123a8f; }
details.pill-select label.record-cloud::before { background:#4fc3f7; }
details.pill-select label.record-email::before { background:#81b532; }

.pill-chip.record-print { background:#123a8f; color:#ffffff; }
.pill-chip.record-cloud { background:#4fc3f7; color:#222222; }
.pill-chip.record-email { background:#81b532; color:#ffffff; }


/* ------------------------------------------------------------------
   DECLARATION NOTE

   The statement shown on Service Sign Off once defects are declared.
   Plain text -- it reads as part of the form, not as a warning.
   ------------------------------------------------------------------ */
.declaration-note {
    margin: 8px 0 18px 0;
}

.declaration-note p {
    margin: 0;
    line-height: 1.5;
}

/* ------------------------------------------------------------------
   COMBINED CLASSIFICATION  (Service Sign Off)

   Read-only: the rolled-up defect classification for the whole
   inspection, so it reads as an answer rather than something to pick.
   ------------------------------------------------------------------ */
.combined-classification {
    margin: 8px 0 18px 0;
}

.combined-classification em {
    color: #666666;
}

/* ------------------------------------------------------------------
   SEARCHABLE SELECT

   A type-to-filter box built over a normal <select> (see
   searchable-select.js). The select itself stays in the form holding
   the value -- it is just hidden -- so the form still submits what it
   always did, and the plain dropdown remains if the script doesn't run.
   ------------------------------------------------------------------ */
.searchable-select {
    position: relative;
    display: block;
    width: 100%;
}

/* Hidden, not removed -- it is still the field that gets submitted. */
select.searchable-hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

.searchable-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;

    max-height: 260px;
    overflow-y: auto;

    margin-top: -2px;

    background: white;
    border: 1px solid #bfbfbf;
    border-radius: 3px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.searchable-item {
    padding: 10px 12px;

    font-size: 15px;
    line-height: 1.3;

    cursor: pointer;
}

.searchable-item + .searchable-item {
    border-top: 1px solid #f0f0f0;
}

.searchable-item:hover,
.searchable-item.active {
    background: #eceef5;
}

.searchable-empty {
    padding: 10px 12px;

    color: #777777;
    font-size: 15px;
    font-style: italic;
}

/* ---------------------------------------------------------------
   SLIDER ANSWERS (e.g. Sprinkler alarm response time)
   The slider only submits once it has been moved -- until then the
   value reads "Not set" and the hidden field stays blank.
   --------------------------------------------------------------- */
/* Same look as the Hydrant flow-test sliders: a plain slider with
   the number box to its right. */
.slider-group {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 10px;
    align-items: center;
}

.slider-group > label {
    grid-column: 1 / -1;
}

.slider-group .slider-input {
    grid-column: 1;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    cursor: pointer;
}

.slider-group .slider-scale {
    grid-column: 2;
    display: flex;
    align-items: center;
}

/* The min / max numbers aren't shown. */
.slider-group .slider-scale span {
    display: none;
}

.card .slider-group .slider-scale input.slider-readout {
    width: 90px;
    margin: 0;
}

/* ---------------------------------------------------------------
   TABLE FILTER ROW (see table-filter.js)
   --------------------------------------------------------------- */
.table-filter-row td,
.table-filter-row:hover td {
    background: #ececec;
    padding: 8px;
}

.card .table-filter-row input,
.card .table-filter-row select {
    width: 100%;
    height: 34px;
    padding: 4px 8px;
    margin: 0;
    font-size: 14px;
    box-sizing: border-box;
}

.table-filter-clear {
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
}

.table-filter-empty td,
.table-filter-empty:hover td {
    background: white;
    color: #666;
    text-align: center;
    font-style: italic;
}

/* Click-to-sort headers (see table-filter.js) */
th.sortable-header {
    cursor: pointer;
    user-select: none;
}

th.sortable-header:hover {
    background: #7d7d7d;
}

th .sort-arrow {
    font-size: 12px;
}

/* Search box above a table (see table-filter.js) */
.table-search {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 4px;
}

.card .table-search input[type="search"] {
    width: 100%;
    max-width: 520px;
    height: 44px;
    padding: 10px 14px;
    margin: 0;
    font-family: inherit;
    font-size: 16px;
    border: 1px solid #bfbfbf;
    border-radius: 3px;
    background: white;
    box-sizing: border-box;
}

.card .table-search input[type="search"]:focus {
    outline: none;
    border-color: #ff8c5b;
}

.table-search-count {
    color: #666;
    font-size: 14px;
    white-space: nowrap;
}

/* Delete button that looks like the "Edit" link beside it (employees table) */
.link-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    width: auto;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* Change password + Log out sit together on the far right of the top bar */
.sidebar a.nav-right {
    margin-left: auto;
    margin-right: -15px;
}

/* Error message box (login and change password) */
.login-error {
    background: #fdecea;
    color: #b3261e;
}

/* admin-only: admins only.  manager-up: managers and admins.  staff-only: everyone except clients. (role.js adds role-user / role-manager) */
html.role-user .admin-only,
html.role-manager .admin-only,
html.role-client .admin-only,
html.role-user .manager-up,
html.role-client .manager-up,
html.role-client .staff-only {
    display: none !important;
}

/* Auditor grid */
.auditor-table th, .auditor-table td { white-space: nowrap; }
.auditor-table td.aud-ok, .auditor-table td.aud-miss,
.auditor-table td.aud-na, .auditor-table td.aud-due,
.aud-key { text-align: center; }
.aud-ok   { background: #a6e22e; }
.aud-miss { background: #e53935; color: #fff; }
.aud-na   { background: #d9d9d9; }
.aud-due  { background: #fff3cd; color: #8a6d00; font-size: 12px; }
.aud-key  { display: inline-block; min-width: 34px; padding: 2px 6px; border-radius: 4px; }

/* Report sign-off box (under Download PDF on a report) */
.signoff-box {
    margin-top: 20px;
    padding: 16px 20px;
    border: 3px solid #d32f2f;
    border-radius: 8px;
    background: #fff5f5;
}
.signoff-text {
    color: #d32f2f;
    font-weight: bold;
    font-size: 17px;
    margin: 0 0 10px 0;
}
.signoff-declare {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}
.signoff-declare input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Client dashboard: one table per site */
#client-search { margin-bottom: 8px; }
.client-site h2 { margin: 28px 0 10px 0; font-size: 22px; }

/* Same column widths in every site's table */
.client-site table { table-layout: fixed; width: 100%; }
.client-site th:nth-child(1) { width: 17%; }
.client-site th:nth-child(2) { width: 33%; }
.client-site th:nth-child(3) { width: 14%; }
.client-site th:nth-child(4) { width: 18%; }
.client-site th:nth-child(5) { width: 8%; }
.client-site th:nth-child(6) { width: 10%; }


/* ------------------------------------------------------------------
   REPAIR QUOTE  (report sign-off box)

   Under the "I have read this report" tick: quoted (with the quote
   attached as a PDF) or no quote required.
   ------------------------------------------------------------------ */
.quote-declaration {
    margin: 4px 0 14px 0;
}

.quote-declaration .quote-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin: 10px 0;

    line-height: 1.5;
    cursor: pointer;
}

.quote-declaration .quote-option input[type="radio"] {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    flex-shrink: 0;
}

.quote-declaration .quote-file-label {
    display: block;
    color: #222222;
    font-weight: bold;
}

.quote-declaration .quote-file-label input {
    display: block;
    margin-top: 6px;
    font-weight: normal;
}

.quote-declaration .quote-upload {
    margin: 4px 0 12px 30px;
}

.quote-declaration .quote-existing {
    margin: 0 0 8px 0;
}

.quote-declaration .quote-hint {
    color: #666666;
    font-size: 0.9em;
}

.quote-declaration .login-error {
    padding: 8px 12px;
    border-radius: 6px;
}


/* ==========================================================
   PHOTO BUTTONS  (Upload Photo / Take Photo, added by
   photo-capture.js in place of the "Choose files" control)
   ========================================================== */

/* The real file field: kept in the form so it still submits,
   but out of sight. Not display:none, so .click() works on
   every phone browser. */
input[type="file"].photo-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.photo-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px 0;
}

button.photo-button {
    padding: 10px 18px;
    font-size: 15px;
    background: #6c757d;
}

button.photo-button:hover {
    background: #545b62;
}

/* ==========================================================
   TOP BAR ON PHONES AND NARROW WINDOWS
   The links don't fit on one line, so they wrap onto a second
   row (Change password + Log out stay on the right). The bar
   gets taller, so everything placed below it moves down too.
   ========================================================== */

@media (max-width: 1100px) {

    .sidebar {
        height: 176px;
        flex-wrap: wrap;
        align-content: center;
        row-gap: 4px;
        column-gap: 10px;
        padding: 8px 16px;
    }

    .sidebar-logo {
        height: 64px;
    }

    .sidebar a.nav-right {
        margin-right: 0;
    }

    .content {
        padding-top: 236px;
    }

    .flow-nav {
        top: 184px;
    }
}

@media (max-width: 900px) {

    .flow-nav {
        margin-top: 184px;
    }
}

/* The logo in the top bar is a link to Home: no padding or hover colour */
.sidebar a.sidebar-logo-link {
    padding: 0;
    border-radius: 0;
}

.sidebar a.sidebar-logo-link:hover {
    background: none;
}