:root {
    --kiosk-ink: #102e4a;
    --kiosk-sky: #d8ecff;
    --kiosk-panel: rgba(255, 255, 255, 0.96);
    --kiosk-line: rgba(16, 46, 74, 0.16);
    --kiosk-accent: #2a7de1;
    --kiosk-accent-dark: #185eb4;
    --kiosk-danger: #b42318;
    --kiosk-shadow: 0 32px 80px rgba(16, 46, 74, 0.16);
}

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body.kiosk-shell {
    margin: 0;
    min-height: 100vh;
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857;
    color: var(--kiosk-ink);
    background: #eeeeee;
}

.kiosk-stage {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 18px;
}

.kiosk-card {
    width: min(100%, 520px);
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    padding: 20px;
}

.kiosk-card--narrow {
    width: min(100%, 460px);
}

.kiosk-card--wide {
    width: min(100%, 900px);
}

.kiosk-card--step1 {
    width: min(100%, 360px);
    min-height: 360px;
    border-radius: 0;
    border-color: #ddd;
    box-shadow: none;
    padding: 26px 38px 34px;
}

.kiosk-brand {
    display: grid;
    gap: 16px;
    justify-items: center;
    text-align: center;
    margin-bottom: 20px;
}

.kiosk-brand--compact {
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
    text-align: left;
}

.kiosk-brand__image {
    width: min(100%, 200px);
    height: auto;
    display: block;
}

.kiosk-brand__image--small {
    width: 116px;
}

.kiosk-eyebrow {
    margin: 0 0 8px;
    color: #777;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.kiosk-card h1 {
    margin: 0;
    font-size: clamp(1.9rem, 3vw, 2.35rem);
    line-height: 1.1;
    font-weight: 500;
}

.kiosk-copy {
    margin: 12px 0 0;
    font-size: 1rem;
    color: #555;
}

.kiosk-form {
    display: grid;
    gap: 14px;
}

.kiosk-form--step1 {
    gap: 20px;
}

.kiosk-label {
    font-size: 1rem;
    font-weight: 500;
}

.kiosk-step1__header {
    text-align: center;
    margin-bottom: 36px;
}

.kiosk-step1__header h1 {
    /* Match PHP patient_self_checkin_step1.php: 33px, weight 600, line-height 1em, #102E4A. */
    color: #102e4a;
    font-size: 33px;
    font-weight: 600;
    line-height: 1em;
    letter-spacing: 0.01em;
}

.kiosk-step1__copy {
    margin: 28px 0 0;
    font-size: 1rem;
    color: rgba(16, 46, 74, 0.92);
}

.kiosk-step1__field {
    /* padding-top reserves room for the label to float above the input line */
    padding: 16px 0 0 0;
    border-bottom: 1px solid #d2d6de;
}

.kiosk-step1__field--floating {
    position: relative;
}

.kiosk-step1__field-label {
    /* Default: sits in the field at the input line (acts as placeholder). JS floats it to top:0
       (small) on focus/fill — matching PHP's Material floating label. */
    position: absolute;
    left: 0;
    top: 20px;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    color: #102e4a;
    pointer-events: none;
    transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease;
}

.kiosk-step1__field-input {
    width: 100%;
    /* text sits just above the bottom underline */
    padding: 4px 0 6px 0;
    border: none;
    border-radius: 0;
    min-height: 0;
    background: transparent;
    box-shadow: none;
    font-size: 1rem;
}

/* Placeholder hidden until focused so it doesn't collide with the in-field "Customer ID" label. */
.kiosk-step1__field-input::placeholder {
    color: transparent;
}

.kiosk-step1__field-input:focus::placeholder {
    color: #9aa4af;
}

.kiosk-step1__field-input:focus {
    border: none;
    box-shadow: none;
}

/* Float the "Customer ID" label up (small) on focus or when the field has a value.
   Requires the input to carry a placeholder attribute (so :placeholder-shown works) and the
   label to follow the input in the DOM (general-sibling ~). Pure CSS — no JS/recompile needed. */
.kiosk-step1__field-input:focus ~ .kiosk-step1__field-label,
.kiosk-step1__field-input:not(:placeholder-shown) ~ .kiosk-step1__field-label {
    top: 0;
    font-size: 0.78rem;
    color: #102e4a;
}

/* Red underline on focus (matches the PHP focused state). */
.kiosk-step1__field--floating:focus-within {
    border-bottom-color: #d9534f;
}

.kiosk-button--step1 {
    margin-top: 16px;
    min-height: 42px;
    border-radius: 3px;
    box-shadow: none;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.kiosk-input,
/* Match PHP material-dashboard .form-control: underline field — transparent bg, no box border
   (only a bottom line), vertical-only padding, 14px. Keeps the 34px height for parity. This makes
   every intake field consistent with the login fields and the PHP original.

   The underline itself is NOT drawn here - material-dashboard.css:12085-12089 already draws it via
   a two-layer background-image gradient on the base .form-control rule (a thin 1px always-visible
   gray line + a 2px navy line whose background-size animates 0% -> 100% width on :focus, i.e. the
   "line grows in solid when you start typing" effect). This rule previously used the `background:
   transparent` SHORTHAND, which per the CSS spec resets every background sub-property not listed -
   including background-image/background-size - wiping out that gradient/animation entirely and
   silently replacing it with a flat, static `border-bottom` re-implementation that can't animate.
   Using `background-color` (longhand) instead only touches the color layer and leaves material
   -dashboard's own background-image/size rules (loaded earlier in the cascade) intact - no need to
   re-implement the line at all, and no `border` of our own to conflict with it. */
.form-control:not([type="radio"]):not([type="checkbox"]),
textarea.form-control,
select.form-control {
    width: 100%;
    min-height: 34px;
    padding: 0.4375rem 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: var(--kiosk-ink);
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
}

.kiosk-input:focus {
    outline: none;
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

.form-control:focus {
    outline: none;
    box-shadow: none;
}

textarea.kiosk-input,
textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

select.kiosk-input,
select.form-control,
input[type="date"].kiosk-input,
input[type="date"].form-control {
    height: 34px;
}

.kiosk-input[readonly],
.kiosk-input:disabled,
.form-control[readonly],
.form-control:disabled {
    background: rgba(16, 46, 74, 0.05);
    color: rgba(16, 46, 74, 0.8);
}

.kiosk-button,
.kiosk-link--button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #2196f3;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase; /* PHP material .btn is uppercase (CHECK IN, SIGN IN, NEXT) */
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
    box-shadow: none;
}

.kiosk-button:hover,
.kiosk-link--button:hover {
    background: #1e88e5;
    opacity: 1;
}

.kiosk-button:disabled,
.kiosk-link--button:disabled,
.kiosk-button[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

.kiosk-button--secondary,
.kiosk-button--ghost {
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
    box-shadow: none;
}

.kiosk-link {
    color: var(--kiosk-accent-dark);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
}

.kiosk-link:hover {
    text-decoration: underline;
}

.kiosk-hint {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.kiosk-banner,
/* PHP shows this message as plain centered red text (login-box-msg), not a filled box. */
.kiosk-alert {
    margin: 0 0 18px;
    font-size: 1rem;
    text-align: center;
    color: var(--kiosk-danger);
}

.kiosk-banner {
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(42, 125, 225, 0.12);
    color: var(--kiosk-accent-dark);
}

.kiosk-pillset {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.kiosk-pill {
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(16, 46, 74, 0.08);
    color: rgba(16, 46, 74, 0.72);
    font-size: 0.98rem;
    font-weight: 700;
}

.kiosk-pill--active {
    background: rgba(42, 125, 225, 0.14);
    color: var(--kiosk-accent-dark);
}

.kiosk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.kiosk-actions .kiosk-button,
.kiosk-actions .kiosk-link--button {
    flex: 1 1 220px;
}

.kiosk-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kiosk-detail {
    display: grid;
    gap: 6px;
    padding: 18px;
    border: 1px solid var(--kiosk-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.7);
}

.kiosk-detail--full {
    grid-column: 1 / -1;
}

.kiosk-detail__label {
    font-size: 0.96rem;
    font-weight: 700;
    color: rgba(16, 46, 74, 0.72);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kiosk-detail__value {
    font-size: 1.08rem;
    font-weight: 600;
    word-break: break-word;
}

.kiosk-tableWrap {
    overflow-x: auto;
    margin-top: 18px;
}

.kiosk-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
}

.kiosk-table th,
.kiosk-table td {
    padding: 16px 18px;
    text-align: left;
    border-bottom: 1px solid rgba(16, 46, 74, 0.08);
    font-size: 1rem;
}

.kiosk-table th {
    background: rgba(42, 125, 225, 0.1);
    font-weight: 700;
}

.kiosk-table__link {
    color: var(--kiosk-accent-dark);
    font-weight: 700;
    text-decoration: none;
}

.kiosk-table__link:hover {
    text-decoration: underline;
}

.kiosk-status {
    font-weight: 700;
}

.kiosk-status--done {
    color: #047857;
}

.kiosk-status--todo {
    color: #92400e;
}

.validation-summary ul {
    margin: 0 0 18px;
    padding-left: 20px;
    color: var(--kiosk-danger);
    font-size: 1rem;
}

.field-error,
.field-validation-error {
    color: var(--kiosk-danger);
    font-size: 0.95rem;
    font-weight: 600;
}

.validation-summary {
    margin-bottom: 18px;
}

.intake-shell {
    min-height: 100vh;
    width: 100%;
}

.intake-content {
    /* PHP material-dashboard.css:15622 .main-panel > .content is "padding: 30px 15px;" with an
       explicit "padding-top: 0px;" override right after — so the computed padding is
       top:0 right:15px bottom:30px left:15px (content starts flush at the top, but still has the
       normal 30px bottom gutter before the page ends). */
    padding: 30px 15px 30px;
    padding-top: 0;
}

.intake-container {
    /* PHP .container-fluid (bootstrap.css) only sets padding-left/right:15px (no top/bottom) -
       the bottom-of-page gutter already comes from .intake-content's 30px bottom padding above.
       This rule previously added an extra 20px bottom padding with no PHP basis, stacking with
       .intake-content's 30px to produce 50px of bottom whitespace instead of PHP's 30px. */
    padding: 0 15px;
}

.personal-information-page__row {
    margin-top: 15px !important;
}

.personal-information-page .form-group {
    /* PHP material-dashboard.css .form-group: margin:8px 0 0; padding-bottom:10px (not zeroed -
       this is PHP's real per-field vertical rhythm, on top of each .row's own 15px top margin). */
    margin: 8px 0 0;
    padding-bottom: 10px;
}

.personal-information-page .bmd-label-floating {
    /* PHP material-dashboard.css: label font-size 0.875rem (14px @ 16px root; material-dashboard.css:13573),
       color #3C4858 !important (material-dashboard.css:12082). */
    color: #3c4858;
    font-size: 14px;
    line-height: 1.4;
}

.personal-information-page .form-control {
    /* No border/background overrides here - the base .form-control rule (kiosk.css:219-246) already
       gives this a border:0 + background-color:transparent, leaving material-dashboard.css's own
       background-image gradient (the animated underline) intact. This rule previously re-added
       border-bottom + background-image:none !important, which silently killed that gradient again
       on every field on this page - the same bug the base rule's comment documents fixing globally. */
    font-size: 16px;
    color: #3c4858;
    padding-left: 0;
    padding-right: 0;
}

.personal-information-page .field-error {
    display: block;
    margin-top: 6px;
}

.personal-information-page__dob-group {
    min-height: 68px;
}

.personal-information-page__phone-input {
    width: 65% !important;
}

.personal-information-page__phone-type {
    width: 30% !important;
    margin-left: 15px !important;
    margin-right: 5px !important;
}

.personal-information-page__actions {
    margin-top: 18px !important;
}

.personal-information-page__actions .btn {
    margin-left: 10px;
    min-width: 120px;
}

.personal-information-page select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.intake-panel {
    /* PHP's .card/.panel inside .container-fluid has no max-width — it stretches to fill the
       available width (main-panel > content > container-fluid), it isn't centered. */
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    padding: 20px;
}

.intake-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 18px;
    margin-bottom: 18px;
}

.intake-panel__header h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 400;
}

.intake-panel__copy {
    margin: 10px 0 0;
    color: #666;
    font-size: 14px;
}

.intake-form {
    display: grid;
    gap: 22px;
}

/* PHP _header.php:214-233 - this div is always position:absolute, so it never occupies space in the
   page's normal flow. kiosk.css had no rule for it at all, leaving it position:static; even with the
   port's own visibility:hidden;opacity:0 inline style, a static block still reserves its line-height
   box, producing a real ~22px gap between the card header and the page's first content on every
   intake page that renders it (Complaint, AdditionalIntakeQuestions, OutcomeAssessments, etc.) that
   PHP never has. */
.savestatus {
    width: 350px;
    padding: 2px 5px;
    border: 1px solid gray;
    background: #f5f5f5;
    box-shadow: 0 0 8px #818181;
    border-radius: 5px;
    position: absolute;
    top: 35%;
    left: 35%;
    z-index: 10000;
    margin-left: auto;
    margin-right: auto;
    color: black;
    font-weight: 900;
    font-size: 14px;
}

.intake-grid {
    display: grid;
    gap: 15px;
}

.intake-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.intake-field {
    display: grid;
    gap: 6px;
}

.intake-field span:first-child {
    font-weight: 500;
    font-size: 14px;
}

.intake-field--wide {
    grid-column: span 2;
}

.intake-actions {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 16px;
}

.intake-checkboxRow,
.intake-checkboxGrid,
.intake-radioGrid {
    display: grid;
    gap: 12px;
}

.intake-checkboxRow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.intake-checkboxGrid,
.intake-radioGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.intake-checkboxGrid label,
.intake-checkboxRow label,
.intake-radio {
    display: flex;
    gap: 10px;
    align-items: start;
    padding: 14px 16px;
    border: 1px solid rgba(16, 46, 74, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.84);
}

.intake-notice {
    margin-bottom: 18px;
    padding: 14px 18px;
    border-radius: 10px;
    background: rgba(34, 139, 34, 0.12);
    color: #235b23;
    font-weight: 700;
}

.intake-section {
    display: grid;
    gap: 18px;
    padding: 22px;
    border: 1px solid rgba(16, 46, 74, 0.09);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
}

.intake-section__header h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
}

.intake-section__header p {
    margin: 8px 0 0;
    color: rgba(16, 46, 74, 0.8);
    font-size: 0.98rem;
}

.complaint-existingList {
    display: grid;
    gap: 16px;
}

.complaint-existingCard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 18px;
    align-items: center;
    padding: 18px;
    border: 1px solid rgba(16, 46, 74, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
}

.complaint-existingCard__title {
    font-size: 1.1rem;
    font-weight: 700;
}

.complaint-existingCard__meta {
    margin-top: 6px;
    color: rgba(16, 46, 74, 0.72);
}

.complaint-severityEditor,
.complaint-severityPanel {
    display: grid;
    gap: 12px;
}

.complaint-severityEditor label,
.complaint-severityPanel label {
    display: grid;
    gap: 10px;
}

.complaint-severityEditor output,
.complaint-severityPanel output {
    width: fit-content;
    min-width: 52px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(16, 46, 74, 0.08);
    text-align: center;
    font-weight: 700;
}

.complaint-actions {
    justify-content: space-between;
}

.complaint-page .card {
    margin-bottom: 0;
}

/* PHP complaint.php:909 - card-header only has style="display: inline !important;", no
   margin/padding/border-radius override at all. The invented values here were flattening the
   header to sit flush with the card edges instead of Material Dashboard's real "floating inset"
   header look every other page gets (negative top margin + its own border-radius). */
.complaint-page__header {
    display: inline !important;
}

.complaint-page__header .card-title {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
}

.complaint-page__body {
    padding-top: 4px;
}

.complaint-page__message {
    margin-bottom: 12px;
}

.complaint-page__article {
    position: relative;
    padding: 0 0 20px 100px;
    /* PHP assets/css/theme.css:2855-2870 .entry base rule (border-bottom + margin-bottom: 30px)
       is NOT overridden by .entry.entry__with-icon's media-query padding override, so both the
       divider line and the full 30px gap survive between question articles. theme.css itself is
       not linked by the ported layout, so reproduce its effective computed style here directly. */
    margin-bottom: 30px;
    border-bottom: 1px solid #dcdcdc;
}

.complaint-page__existing-form,
.complaint-page__article {
    display: flow-root;
}

.complaint-page__add-another {
    clear: both;
    margin-top: 22px;
}

.complaint-page__article--add-another {
    position: relative;
    padding: 0 0 20px 100px;
    margin-left: 0;
}

.complaint-page__article-content {
    padding-left: 0;
}

.complaint-page__article .entry-icon {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 70px;
    height: 70px;
    line-height: 62px;
    margin-right: 30px;
    font-size: 28px;
    text-align: center;
    background-color: #dc2a0b;
    background-image: url('/assets/img/noise.png');
    border-radius: 50%;
    border: 4px solid #ebebeb;
    color: #fff;
}

.complaint-page__article .entry-icon i {
    color: #fff !important;
    padding-top: 15px !important;
}

.complaint-page__question,
.complaint-page__existing-title,
.complaint-page__existing-opened {
    font-family: Arial, sans-serif;
}

.complaint-page__question {
    margin-bottom: 12px;
    font-size: 16pt;
}

.complaint-page__question--spaced {
    margin-top: 20px;
}

.complaint-page__existing-title {
    font-size: 18pt;
    margin-bottom: 6px;
}

.complaint-page__existing-opened {
    font-size: 16pt;
    margin-bottom: 0;
}

.complaint-page__existing-form {
    padding-top: 15px;
    padding-right: 15px;
    padding-left: 5px;
    border-bottom: 1px solid #d8d8d8;
    margin-bottom: 34px;
    padding-bottom: 22px;
}

.complaint-page__existing-form:last-child {
    margin-bottom: 8px;
}

.complaint-page__existing-form .entry {
    margin-bottom: 0;
}

/* .complaint-page__existing-form already supplies its own divider (border-bottom:1px solid #d8d8d8,
   margin-bottom:34px above) between repeated existing-complaint blocks. Prevent the article's own
   .entry border-bottom (added for the plain create/edit-form question articles) from stacking a
   second, redundant divider line directly on top of it here. */
.complaint-page__existing-form .complaint-page__article--existing {
    border-bottom: none;
}

@media (min-width: 992px) {
    .complaint-page__article--existing {
        padding: 0 0 20px 100px;
    }
}

.complaint-page__article--existing .entry-icon i {
    color: #fff !important;
    padding-top: 15px !important;
}

.complaint-page__existing-heading-shell {
    margin-left: -35px;
}

.complaint-page__question--existing {
    margin-right: 40px;
}

.complaint-page__severity-row {
    margin-right: 10px;
}

.complaint-page__severity-well {
    margin: 0;
    min-height: 20px;
    padding: 19px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
}

.complaint-page__severity-well > .row,
.complaint-page__severity-well > .complaint-page__least-most-row {
    margin-right: 0;
    margin-left: 0;
}

.complaint-page__last-visit-row {
    margin-bottom: 6px;
    /* .well carries the "row" class too (material-dashboard.css .row is display:flex), making this
       row's own flex-item sizing matter - unlike its sibling .complaint-page__least-most-row (which
       already has width:100% below), this row had no width/flex-basis at all, so it shrink-wrapped
       to its own content width as a flex item of .well, before its child's own 100% width (below)
       ever got a chance to apply against a full-size parent. */
    width: 100%;
    flex: 0 0 100%;
}

.complaint-page__last-visit-text {
    font-family: Arial, sans-serif;
    font-size: 14pt;
    text-align: center;
    /* .row (material-dashboard.css) is display:flex, and .col-md-12 only gets flex:0 0 100%
       inside a @media (min-width:992px) block - below that breakpoint this div is a bare flex
       item with no explicit basis, so it shrink-wraps to its own text instead of stretching full
       width, making "center" look left-hugging against the wider .well background. Force full
       width unconditionally so centering doesn't depend on any breakpoint. */
    width: 100%;
    flex: 0 0 100%;
}

.complaint-page__least-most-row {
    margin-bottom: 4px;
    font-family: Arial, sans-serif;
    font-size: 14pt;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.complaint-page__least-label {
    flex: 0 0 50%;
    max-width: 50%;
    text-align: left;
    padding-left: 10px;
    white-space: nowrap;
}

.complaint-page__most-label {
    flex: 0 0 50%;
    max-width: 50%;
    text-align: right;
    padding-right: 7px;
    white-space: nowrap;
    margin-top: 0;
}

.complaint-page__least-label .form-group,
.complaint-page__most-label .form-group {
    margin: 0;
    display: inline-block;
}

.complaint-page__slider-input {
    width: 100%;
}

.complaint-page__article--existing .slider.slider-horizontal {
    width: 100%;
    height: 20px;
}

.complaint-page__article--existing .slider-track {
    background-image: linear-gradient(to bottom, #f5f5f5 0%, #f9f9f9 100%);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
}

.complaint-page__article--existing .slider-selection,
.complaint-page__article--existing .slider-tick.in-selection {
    background-image: linear-gradient(to bottom, #102e4a 0%, #102e4a 100%) !important;
}

.complaint-page__article--existing .slider-handle,
.complaint-page__article--existing .slider-tick {
    background: #fff;
    border: 1px solid #e6e6e6;
    box-shadow: none;
    opacity: 1;
}

.complaint-page__article--existing .slider-handle {
    background: #102e4a;
    border-color: #102e4a;
}

.complaint-page__article--existing .slider-tick-label-container {
    margin-top: 20px;
}

.complaint-page__article--existing .slider-tick-label {
    padding-top: 4px;
    font-family: Arial, sans-serif;
    font-size: 14pt;
    color: #1f2937;
}

.complaint-page__add-another {
    margin-left: 30px;
    margin-bottom: 18px;
}

.complaint-page__yes-no-table {
    width: 100%;
}

.complaint-page__yes-no-question {
    width: 86%;
    border: #d8d8d8 1px solid;
}

.complaint-page__box {
    border: solid 1px #cccccc;
    padding: 5px;
    margin: 0 auto;
}

.selectBodyRegion,
.selectBodyRegionRadiatesTo {
    display: flex;
    align-items: center;
}

.complaint-page__body-map-panel {
    padding: 0 !important;
    padding-right: 10px !important;
    padding-top: 10px !important;
}

.complaint-page__body-map {
    /* PHP complaint.php's .map/.mapSmall have no responsive width rule outside the
       600px media query below - the image is always rendered at its native pixel
       size (292x606) and simply overflows its column if the container is too narrow,
       rather than shrinking. That's deliberate: since the image is never resized,
       PHP never needs to rescale <area coords> and the highlight never drifts.
       Matching that exactly here (was previously max-width:100%; height:auto, which
       made the port responsively shrink the image - something PHP never does - and
       required extra JS to keep <area coords> in sync on every resize). */
    cursor: pointer;
    display: block;
}

@media only screen and (max-width: 600px) {
    .complaint-page__body-map {
        width: 290px;
    }
}

.complaint-page__body-map-panel area {
    cursor: pointer;
}

.complaint-page__panel-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

/* The body-map image is deliberately never CSS-resized (see .complaint-page__body-map above -
   avoids needing JS to rescale <area coords>), so if this column's Bootstrap col-md-5 width ever
   computes narrower than the image's own ~292px + panel padding/border, the image overflows past
   the column edge into the neighboring "Primary area of pain"/"Effected Areas" column instead of
   the row reflowing - confirmed live on iPad (2026-08-13): that overlap covered the left hand on
   the radiates-to body map, making it untappable. min-width forces flex-wrap (already set above)
   to wrap this column onto its own line whenever the row is too narrow for both columns to fit
   the image at full size side-by-side, instead of letting them overlap. */
.complaint-page__panel-row > .col-md-5 {
    min-width: 320px;
}

.complaint-page__panel-heading-large {
    font-size: 18px;
}

.complaint-page__panel-body {
    padding: 15px !important;
}

.complaint-page__summary-panel {
    min-height: 100px;
}

.complaint-page__summary-panel--with-edit {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.complaint-page__summary-panel--centered {
    text-align: center;
}

.complaint-page__summary-text {
    font-size: 17px;
    padding: 20px;
}

/* PHP complaint.php:4988-4996 - one row per selected radiates-to region, left-aligned (overriding
   the empty-state .complaint-page__summary-panel--centered text-align:center - that's only correct
   for the plain "Effected Areas:" placeholder text, not a real row list). */
.complaint-page__radiates-summary-row {
    text-align: left;
}

.complaint-page__radiates-summary-item {
    padding: 10px 0;
}

/* PHP complaint.php:1443-1450 (base/desktop) and :1528-1536 (mobile-only, max-width:600px).
   Base was previously just "margin-left: 10px" on the wrong assumption that PHP's desktop style
   is plain Bootstrap .btn.btn-primary - re-read against complaint.php:1443-1450 directly, 2026-08-01:
   PHP sets width/padding/float/border-radius explicitly, floating the button to the row's own
   right edge - without that here, each row's "Remove" button sat immediately after its own text
   with no fixed-width column, instead of every row lining up on a shared right edge like PHP's. */
.effectedAreaFromRadiatesToEditButtonClass {
    width: 100px;
    padding: 3px 12px;
    margin-left: 40px;
    float: right;
    border-radius: 5px;
    display: inline;
}

@media only screen and (max-width: 600px) {
    .lbjs-item {
        height: 40px;
    }

    .effectedAreaFromRadiatesToEditButtonClass {
        width: 100px;
        padding: 3px 12px;
        border-radius: 5px;
        display: block;
        margin-left: 65px;
        float: none;
    }
}

.complaint-page__edit-panel {
    padding-top: 25px;
}

.complaint-page__small-button {
    width: 100px;
}

.complaint-page__centered-button-row {
    width: 100%;
    text-align: center;
}

.complaint-page__hint {
    margin-top: 8px;
    color: #6b7280;
    font-size: 13px;
}

.complaint-page__field-row,
.complaint-page__field-col {
    margin-bottom: 10px;
}

.complaint-page__select,
.complaint-page__wide-select {
    display: inline !important;
}

/* PHP complaint.php:1796-1798 keeps "Times per" and the unit <select> on one row
   (select style="display:inline !important; width:60%; margin-left:10px"). A flex row is
   more robust here than relying on display:inline surviving the cascade — guarantees the
   label and dropdown share the same row/baseline as the paired duration/frequency <select>,
   instead of "Times per" wrapping onto its own line above the dropdown. */
.complaint-page__timeper-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-height: 34px;
}

.complaint-page__timeper-row > span {
    white-space: nowrap;
    color: #333;
}

.complaint-page__inline-select {
    flex: 1 1 auto;
    width: auto;
    margin-left: 0;
}

.complaint-page__binary-table {
    width: 100%;
}

/* PHP Site.css:220-243 .yeshead/.nohead are 16pt Arial, color #9B9B9B (not overridden
   by complaint.php's page-level <style> block the way .longynquestion is at php:1552). */
.complaint-page__binary-table .yeshead,
.complaint-page__binary-table .nohead {
    width: 54px;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 16pt;
    color: #9B9B9B;
    border: 1px solid #d8d8d8;
}

.complaint-page__binary-table .yesbox,
.complaint-page__binary-table .nobox {
    width: 54px;
    text-align: center;
    border: 1px solid #d8d8d8;
}

.complaint-page__binary-table .yesbox label,
.complaint-page__binary-table .nobox label {
    display: block;
    margin: 0;
    padding: 6px 0;
}

.complaint-page__binary-table .longynquestion {
    font-size: 13pt !important;
    padding-left: 10px;
    border: 1px solid #d8d8d8;
    vertical-align: middle;
}

.complaint-page__binary-table .questionSpacer {
    height: 8px;
    border: 0;
}

.complaint-page__binary-radio {
    width: 32px;
    height: 32px;
    accent-color: #4fc3f7;
}

.complaint-page__add-another .complaint-page__binary-table {
    /* Was width:860px + table-layout:fixed, sized for an 860px+ desktop layout - with two 60px
       fixed Yes/No columns and the question cell's inline width:86% (Complaint.cshtml), the
       column math only resolves without overflowing past ~857px of available width, and this
       control also sits inside 100px of left padding reserved for its icon
       (.complaint-page__article--add-another). Confirmed live on iPad (2026-08-13): the Yes/No
       radios render off the right edge of the screen in portrait, and STILL do in landscape once
       that padding and the browser's own chrome are subtracted from the ~1024px viewport.
       table-layout:auto (the default, and what every OTHER .complaint-page__binary-table on this
       page already uses without issue) lets the question cell's text wrap and the table shrink to
       fit any available width instead of demanding a fixed one. */
    width: 100%;
    max-width: 860px;
    border-collapse: collapse;
}

.complaint-page__add-another .complaint-page__binary-table .yeshead,
.complaint-page__add-another .complaint-page__binary-table .nohead {
    width: 60px;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 16pt;
    color: #9B9B9B;
    border: 1px solid #d8d8d8;
    vertical-align: middle;
    line-height: 1.1;
    padding: 2px 0;
}

.complaint-page__add-another .complaint-page__binary-table .yesbox,
.complaint-page__add-another .complaint-page__binary-table .nobox {
    width: 60px;
    text-align: center;
    border: 1px solid #d8d8d8;
    vertical-align: middle;
}

.complaint-page__add-another .complaint-page__binary-table .yesbox label,
.complaint-page__add-another .complaint-page__binary-table .nobox label {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0;
    padding: 7px 0;
    cursor: pointer;
}

/* PHP Site.css's .yesbox/.nobox rules are global (unscoped), applying to every yes/no table on
   the complaint page — not just "Would you like to add another complaint?". Matching that here:
   these three rules apply to any .complaint-page__binary-table, not just the .complaint-page__add-
   another one, so the quality/aggravating/relieving/adl-choice factor tables get the same custom
   radio + checked-color treatment instead of falling back to an unstyled native radio. */
.complaint-page__binary-table .yesbox input,
.complaint-page__binary-table .nobox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.complaint-page__binary-table .yesbox span,
.complaint-page__binary-table .nobox span {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: inset 0 0 0 1px #d8d8d8;
    background: #ffffff;
}

/* PHP Site.css:328-338 deliberately uses two different checked colors here: navy for Yes,
   light cyan for No — not a typo, keep them distinct. */
.complaint-page__binary-table .yesbox input:checked + span {
    background: #102e4a;
}

.complaint-page__binary-table .nobox input:checked + span {
    background: #43cffb;
}

.complaint-page__add-another .longynquestion {
    font-size: 13pt !important;
    padding-left: 10px;
    vertical-align: middle;
    background: #fbfbfb;
    height: 46px;
}

.complaint-page__add-another .entry-icon i {
    color: #fff !important;
    padding-top: 15px !important;
}

.complaint-page__visually-hidden {
    display: none;
}

.complaint-page__modal-content {
    border-radius: 2px;
}

.complaint-page__modal-footer {
    text-align: center;
    padding: 8px;
    background: #fff;
    border-top: 0;
}

.complaint-page__modal-header {
    padding: 8px;
    display: none;
}

#myModalComplaintMainRegionList .modal-dialog {
    width: 760px;
    max-width: calc(100vw - 40px);
    margin: 0 auto !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
}

#myModalComplaintMainRegionList.fade .modal-dialog,
#myModalComplaintMainRegionList.in .modal-dialog,
#myModalComplaintMainRegionList.show .modal-dialog {
    transform: translate(-50%, -50%) !important;
}

#myModalComplaintMainRegionList {
    padding-right: 0 !important;
}

.complaint-page__modal-body {
    padding: 0 !important;
    padding-top: 10px !important;
    padding-left: 10px !important;
    height: 465px;
    overflow: auto;
    overflow-x: hidden;
}

.complaint-page__modal-row {
    margin-right: 0;
    margin-left: -10px;
}

.complaint-page__modal-column {
    margin-right: 0;
    padding-right: 0;
}

.complaint-page__modal-column + .complaint-page__modal-column {
    margin-left: -10px;
}

.complaint-page__modal-panel-body {
    padding: 0 !important;
    padding-right: 0 !important;
    padding-top: 10px !important;
    height: 621px;
}

.complaint-page__modal-panel-body--list {
    overflow: visible;
}

.complaint-page__listbox {
    background: white;
}

.complaint-page__region-list,
.complaint-page__complaint-list {
    display: block;
    min-height: 260px;
}

.complaint-page__region-option,
.complaint-page__modal-option {
    display: block;
    margin: 5px;
    padding: 5px;
    padding-top: 3px;
    border: 1px solid #cccccc;
    cursor: pointer;
    background: #eeeeee;
    color: inherit;
    height: 30px;
    line-height: 24px;
}

.complaint-page__region-option:hover,
.complaint-page__modal-option:hover {
    background: lightblue;
}

.complaint-page__region-option[selected],
.complaint-page__modal-option[selected],
.complaint-page__region-option.selected,
.complaint-page__modal-option.selected {
    background: lightblue;
    color: inherit;
}

.complaint-page__complaint-list {
    overflow-y: auto;
}

.complaint-page__modal-option {
    margin: 5px;
}

.complaint-page__modal-actions {
    margin-right: 0 !important;
    padding-top: 10px;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.mist-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
}

.mist-list {
    display: grid;
    gap: 16px;
}

.mist-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
    padding: 18px;
    border: 1px solid rgba(16, 46, 74, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
}

.mist-card--compact {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.mist-card__content,
.mist-card__aside {
    display: grid;
    gap: 14px;
}

.mist-card__titleRow {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: start;
}

.mist-card__title {
    font-size: 1.1rem;
    font-weight: 700;
}

.mist-meta {
    margin-top: 6px;
    color: rgba(16, 46, 74, 0.72);
    font-size: 0.95rem;
}

.mist-lockNote {
    margin-top: 8px;
    color: var(--kiosk-danger);
    font-size: 0.94rem;
    font-weight: 600;
}

.mist-empty {
    padding: 16px 18px;
    border: 1px dashed rgba(16, 46, 74, 0.2);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.56);
    color: rgba(16, 46, 74, 0.78);
}

.ros-category__header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: start;
}

.ros-list {
    display: grid;
    gap: 16px;
}

/* NOTE: bare .ros-item/.ros-item__answers/.ros-choice/.ros-item__comment container-styling
   rules used to live here (a card/pill design from an earlier pass). Removed 2026-07-02 -
   ReviewOfSystems.cshtml's ".ros-page ..." inline styles are the sole, actively-maintained
   PHP-parity styling for these classes now, and this bare-class block was still matching
   (lower specificity, so it only leaked through for properties the inline rule didn't
   re-declare) producing an unwanted boxed-card look + inflated row padding. Only
   .ros-item__title's display:block survives below - both ReviewOfSystems and
   OutcomeAssessments.cshtml (.outcome-questionRow__prompt .ros-item__title) rely on it and
   neither page-scoped override re-declares "display". */
.ros-item__title {
    display: block;
    font-weight: 700;
}


.outcome-page__body {
    padding-top: 12px;
}

.outcome-form {
    gap: 16px;
}

.outcome-assessment__heading label {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.outcome-assessment__summary {
    margin-bottom: 8px;
}

.outcome-assessment__summary .panel-body {
    font-size: 15px;
    line-height: 1.5;
}

.outcome-section {
    margin-bottom: 12px;
}

.outcome-section__header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
}

.outcome-section__heading a {
    color: #333;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
}

.outcome-section__body {
    padding-top: 5px !important;
}

.outcome-groupedGrid,
.outcome-questionTable {
    display: grid;
    gap: 12px;
}

.outcome-groupedChoice {
    display: grid;
    grid-template-columns: auto 68px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    background: #e5e5e5;
    border: 1px solid #d0d0d0;
}

.outcome-groupedChoice__label {
    display: inline-block;
    min-width: 56px;
    text-align: center;
    padding: 7px 10px;
    background: #fff;
    border: 1px solid #c8c8c8;
    font-weight: 600;
}

.outcome-groupedChoice__text {
    display: block;
    color: #333;
    font-size: 14px;
}

.outcome-questionRow {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding: 8px 0;
    border-bottom: 1px solid #ededed;
}

.outcome-questionRow:last-child {
    border-bottom: 0;
}

.outcome-questionRow__prompt {
    padding-top: 8px;
}

.outcome-questionRow__scale {
    display: grid;
    grid-auto-flow: column;
    gap: 8px;
}

.outcome-scaleCell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 42px;
    padding: 4px 8px;
    background: #e5e5e5;
    border: 1px solid #cfcfcf;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

.outcome-scaleCell input,
.outcome-groupedChoice input {
    margin: 0 0 4px;
}

.outcome-empty {
    font-size: 18px;
    text-align: center;
    padding: 20px 0;
}

/* PHP home.php has no bare ".card"/".card-title" overrides for the Welcome page — margin-bottom
   (20px via material-dashboard.css .card), header display:inline, and button styling are handled
   by the theme plus the page-scoped <style> block in Welcome.cshtml (home.php:234,236,259). Prior
   versions of this block invented margin-bottom:0, display:block!important (the opposite of PHP's
   display:inline), a fabricated min-height, and min-width/uppercase button styling with no PHP
   basis — removed 2026-07-07 for exact parity. */

@media (max-width: 640px) {
    body.kiosk-shell {
        font-size: 17px;
    }

    .kiosk-stage {
        padding: 16px;
    }

    .kiosk-card {
        padding: 22px;
        border-radius: 22px;
    }

    .kiosk-card--step1 {
        width: min(100%, 360px);
        min-height: 0;
        border-radius: 0;
        padding: 24px 28px 30px;
    }

    .kiosk-step1__header {
        margin-bottom: 28px;
    }

    .kiosk-step1__header h1 {
        font-size: 33px;
    }

    .kiosk-step1__field-input {
        padding-left: 108px;
    }

    .kiosk-brand--compact {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .kiosk-grid {
        grid-template-columns: 1fr;
    }

    .kiosk-actions {
        flex-direction: column;
    }

    .intake-panel {
        padding: 20px;
    }

    .intake-panel__header {
        flex-direction: column;
    }

    .intake-grid--three,
    .intake-checkboxRow,
    .intake-checkboxGrid,
    .intake-radioGrid {
        grid-template-columns: 1fr;
    }

    .intake-field--wide {
        grid-column: auto;
    }

    .intake-actions {
        flex-direction: column;
    }

    .complaint-existingCard {
        grid-template-columns: 1fr;
    }

    .mist-toolbar,
    .mist-card,
    .mist-card--compact {
        grid-template-columns: 1fr;
    }

    .ros-category__header,
    .outcome-section__header,
    .ros-item {
        grid-template-columns: 1fr;
    }

    .outcome-groupedChoice {
        grid-template-columns: auto 1fr;
    }

    .outcome-groupedChoice__label {
        grid-column: 2;
        justify-self: start;
    }

    .outcome-questionRow {
        grid-template-columns: 1fr;
    }

    .outcome-questionRow__scale {
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
    }
}