:root {
    --barbie-blue: #0077a8;
    --deep-blue: #004f80;
    --soft-blue: #e1f5fc;
    --pink: #c72f75;
    --mint: #168a68;
    --sun: #d69b00;
    --ink: #102b3d;
    --muted: #465d6e;
    --surface: #ffffff;
    --line: #91bad0;
    --shadow: 0 18px 45px rgba(0, 79, 128, 0.14);
    --primary: #004f80;
    --focus-ring: #ffb300;
}

html {
    font-size: 18px;
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    font-family: Tahoma, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink);
    background:
        radial-gradient(circle at top left, rgba(0, 167, 225, 0.14), transparent 34rem),
        linear-gradient(180deg, #f1fbff 0%, #fff7fb 46%, #f8fffc 100%);
}

a {
    color: var(--deep-blue);
}

.site-header {
    background: #004f80;
    color: #fff;
    box-shadow: var(--shadow);
}

.site-header-visual {
    position: relative;
    isolation: isolate;
    min-height: 360px;
    overflow: hidden;
    background-color: #dff5fc;
    background-image:
        linear-gradient(90deg, rgba(0, 79, 128, 0.92) 0%, rgba(0, 104, 150, 0.78) 33%, rgba(0, 119, 168, 0.26) 54%, rgba(0, 79, 128, 0.04) 75%),
        url('../images/prevwound-header-motion.jpg?v=20260906');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;
}

.header-content {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 360px;
    align-items: center;
}

.header-copy {
    width: min(52%, 720px);
    text-shadow: 0 2px 8px rgba(0, 48, 82, 0.45);
}

.header-motion {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.header-motion-orb,
.header-motion-pulse,
.header-motion-sweep {
    position: absolute;
    display: block;
}

.header-motion-orb {
    width: 92px;
    height: 92px;
    border: 2px solid rgba(255, 255, 255, 0.34);
    border-radius: 50%;
    box-shadow: 0 0 0 13px rgba(101, 221, 239, 0.08), 0 0 35px rgba(255, 255, 255, 0.16);
    animation: header-float 8s ease-in-out infinite;
}

.header-motion-orb-one {
    top: 15%;
    left: 5%;
}

.header-motion-orb-two {
    right: 44%;
    bottom: 11%;
    width: 54px;
    height: 54px;
    animation-delay: -3.5s;
}

.header-motion-pulse {
    top: 23%;
    left: 44%;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.42);
    animation: header-pulse 3.2s ease-out infinite;
}

.header-motion-sweep {
    top: -35%;
    bottom: -35%;
    left: -18%;
    width: 18%;
    transform: rotate(12deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
    filter: blur(3px);
    animation: header-sweep 12s ease-in-out infinite;
}

@keyframes header-float {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.72; }
    50% { transform: translate3d(16px, -12px, 0) scale(1.08); opacity: 1; }
}

@keyframes header-pulse {
    0% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
    70%, 100% { transform: scale(1); box-shadow: 0 0 0 34px rgba(255, 255, 255, 0); }
}

@keyframes header-sweep {
    0%, 15% { transform: translateX(0) rotate(12deg); opacity: 0; }
    35% { opacity: 1; }
    70%, 100% { transform: translateX(720%) rotate(12deg); opacity: 0; }
}

@media (max-width: 991.98px) {
    .site-header-visual {
        background-image:
            linear-gradient(90deg, rgba(0, 79, 128, 0.94) 0%, rgba(0, 99, 145, 0.78) 58%, rgba(0, 79, 128, 0.25) 100%),
            url('../images/prevwound-header-motion.jpg?v=20260906');
    }

    .header-copy {
        width: min(66%, 620px);
    }
}

@media (max-width: 767.98px) {
    .site-header-visual,
    .header-content {
        min-height: 360px;
    }

    .site-header-visual {
        background-image:
            linear-gradient(90deg, rgba(0, 67, 109, 0.86), rgba(0, 94, 137, 0.68)),
            url('../images/prevwound-header-motion.jpg?v=20260906');
    }

    .header-copy {
        width: 100%;
        padding-inline: 4px;
    }

    .brand-logo {
        width: 94px;
        height: 94px;
    }

    .site-title {
        font-size: clamp(1.75rem, 8.5vw, 2.25rem);
    }

    .site-subtitle {
        max-width: 34rem;
        padding: 4px 9px;
        border-radius: 10px;
        background: rgba(0, 52, 88, 0.28);
    }

    .header-motion-orb-two,
    .header-motion-pulse {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-motion-orb,
    .header-motion-pulse,
    .header-motion-sweep {
        animation: none !important;
    }

    .header-motion-sweep {
        display: none;
    }
}

.brand-logo,
.footer-logo {
    object-fit: contain;
    background: rgba(255, 255, 255, 0.88);
    border: 3px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 12px 28px rgba(18, 48, 71, 0.16);
}

.brand-logo {
    border-radius: 50%;
}

.footer-logo {
    border-radius: 8px;
    padding: 8px;
}

.site-title {
    margin: 0;
    font-size: 2.6rem;
    font-weight: 800;
}

.site-subtitle {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.04rem;
    font-weight: 600;
}

.date-time-pill {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 9px 18px;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-weight: 700;
    backdrop-filter: blur(10px);
}

.app-navbar {
    background: rgba(255, 255, 255, 0.94);
    border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.app-navbar .navbar-brand {
    color: var(--deep-blue);
}

.app-navbar .nav-link {
    margin: 4px 3px;
    padding: 9px 14px;
    border-radius: 999px;
    color: var(--ink);
    font-weight: 700;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus {
    color: #fff;
    background: var(--barbie-blue);
}

.app-navbar .dropdown-menu {
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 14px 30px rgba(18, 48, 71, 0.12);
}

.app-navbar .dropdown-item {
    padding: 9px 12px;
    border-radius: 6px;
    color: var(--ink);
    font-weight: 700;
}

.setting-choice {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 20px;
    border: 2px solid var(--line);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
}

.setting-choice:has(input:checked) {
    border-color: var(--primary);
    background: #eef9ff;
    box-shadow: 0 0 0 3px rgba(0, 79, 128, 0.1);
}

.setting-choice input {
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.15rem;
}

.setting-choice span,
.setting-choice small {
    display: block;
}

.setting-choice strong {
    display: block;
    margin-bottom: 6px;
    color: var(--ink);
}

.setting-choice small {
    color: var(--muted);
    line-height: 1.6;
}

.app-navbar .dropdown-item:hover,
.app-navbar .dropdown-item:focus {
    color: #fff;
    background: var(--barbie-blue);
}

.app-navbar .nav-login {
    color: #fff;
    background: var(--pink);
}

.app-navbar .nav-logout {
    color: #fff;
    background: var(--deep-blue);
}

.page-shell {
    position: relative;
    overflow: hidden;
    padding: 34px 0 20px;
}

.floating-sticker {
    position: fixed;
    z-index: 0;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 900;
    pointer-events: none;
    opacity: 0.64;
    box-shadow: 0 10px 26px rgba(0, 103, 166, 0.14);
}

.sticker-a {
    top: 22%;
    left: 18px;
    background: var(--mint);
}

.sticker-b {
    right: 22px;
    top: 38%;
    background: var(--pink);
}

.sticker-c {
    left: 8%;
    bottom: 10%;
    background: var(--sun);
}

.page-shell > .container,
.content-section,
.site-footer {
    position: relative;
    z-index: 1;
}

.soft-alert {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(18, 48, 71, 0.08);
}

.content-section {
    margin-bottom: 28px;
}

.hero-panel,
.auth-panel,
.install-panel,
.form-panel,
.profile-panel,
.table-panel {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.hero-panel {
    padding: 26px;
}

.auth-panel,
.install-panel,
.form-panel,
.profile-panel,
.table-panel {
    padding: 24px;
}

.auth-panel,
.install-panel {
    max-width: 760px;
}

.section-title {
    font-weight: 800;
    color: var(--deep-blue);
}

.section-kicker {
    color: var(--pink);
    font-weight: 800;
}

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

.feature-card,
.knowledge-card,
.metric-card,
.timeline-card,
.color-card {
    min-height: 100%;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0, 103, 166, 0.08);
}

.feature-card {
    padding: 18px;
}

.feature-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--soft-blue);
    color: var(--deep-blue);
    font-size: 1.8rem;
    font-weight: 900;
}

.btn {
    font-weight: 800;
}

.btn-primary {
    --bs-btn-bg: var(--barbie-blue);
    --bs-btn-border-color: var(--barbie-blue);
    --bs-btn-hover-bg: var(--deep-blue);
    --bs-btn-hover-border-color: var(--deep-blue);
}

.btn-pink {
    color: #fff;
    background: var(--pink);
    border-color: var(--pink);
}

.btn-pink:hover,
.btn-pink:focus {
    color: #fff;
    background: #e93286;
    border-color: #e93286;
}

.rounded-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 999px;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

.prototype-img,
.site-visual {
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--line);
    box-shadow: 0 16px 32px rgba(18, 48, 71, 0.12);
}

.site-visual {
    display: block;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--soft-blue);
}

.home-hero-visual {
    object-position: center;
}

.color-dot {
    width: 14px;
    height: 14px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 6px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.78);
}

.dot-red {
    background: #ef3e3e;
}

.dot-yellow {
    background: #ffc947;
}

.dot-green {
    background: #22b573;
}

.form-control,
.form-select {
    min-height: 46px;
    border-radius: 8px;
    border-color: rgba(0, 103, 166, 0.22);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--barbie-blue);
    box-shadow: 0 0 0 0.22rem rgba(0, 167, 225, 0.18);
}

.account-form-card {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(248, 253, 255, 0.88);
}

.member-edit-panel {
    max-width: 920px;
}

.member-edit-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft-blue);
}

.account-active-check {
    padding: 12px 14px 12px 2.2rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.role-badge,
.risk-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 800;
}

.role-staff {
    color: #0067a6;
    background: #dff5ff;
}

.role-admin {
    color: #8b1d5b;
    background: #ffe4f1;
}

.role-superadmin {
    color: #6a4a00;
    background: #fff0bd;
}

.risk-red {
    color: #8c1212;
    background: #ffe2e2;
}

.risk-yellow {
    color: #725100;
    background: #fff1c2;
}

.risk-green {
    color: #0b6d47;
    background: #dff8ee;
}

.camera-box {
    overflow: hidden;
    min-height: 260px;
    border: 2px dashed rgba(0, 103, 166, 0.22);
    border-radius: 8px;
    background: linear-gradient(180deg, #f2fbff, #fff);
}

.camera-box video,
.camera-box img {
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    display: block;
}

.camera-placeholder {
    min-height: 260px;
    display: grid;
    place-items: center;
    color: var(--muted);
    text-align: center;
    padding: 20px;
}

.assessment-image {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 8px;
}

.site-footer {
    background: #ffffff;
    border-top: 1px solid var(--line);
}

.footer-credit {
    color: var(--deep-blue);
    font-weight: 800;
}

.table {
    vertical-align: middle;
}

.manual-hero {
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 18%, rgba(50, 213, 167, 0.2), transparent 15rem),
        rgba(255, 255, 255, 0.94);
}

.manual-summary-card,
.manual-toc,
.manual-content {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0, 103, 166, 0.08);
}

.manual-summary-card {
    padding: 22px;
}

.manual-summary-card-compact {
    padding: 17px 19px;
}

.manual-toc {
    position: sticky;
    top: 18px;
    padding: 20px;
}

.manual-toc-list {
    padding-left: 1.35rem;
}

.manual-toc-list li + li {
    margin-top: 9px;
}

.manual-toc-list a {
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
}

.manual-toc-list a:hover,
.manual-toc-list a:focus {
    color: var(--deep-blue);
    text-decoration: underline;
}

.manual-content {
    padding: 28px;
}

.manual-section {
    scroll-margin-top: 24px;
}

.manual-section + .manual-section {
    margin-top: 42px;
    padding-top: 34px;
    border-top: 1px solid var(--line);
}

.manual-section p,
.manual-section li,
.manual-table {
    line-height: 1.75;
}

.manual-list li + li {
    margin-top: 7px;
}

.manual-steps {
    display: grid;
    gap: 14px;
    margin-top: 20px;
}

.manual-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fdff;
}

.manual-step-number {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--barbie-blue);
    font-weight: 900;
}

.manual-table thead th {
    color: #fff;
    background: var(--deep-blue);
}

.manual-callout {
    margin-top: 20px;
    padding: 18px;
    border-left: 5px solid var(--mint);
    border-radius: 0 8px 8px 0;
    background: #effcf8;
}

.manual-risk {
    height: 100%;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.risk-red-panel {
    background: #fff4f4;
}

.risk-yellow-panel {
    background: #fffaf0;
}

.risk-green-panel {
    background: #f1fcf8;
}

.manual-accordion .accordion-item {
    overflow: hidden;
    border-color: var(--line);
}

.manual-accordion .accordion-button {
    color: var(--ink);
    font-weight: 800;
}

.manual-accordion .accordion-button:not(.collapsed) {
    color: var(--deep-blue);
    background: var(--soft-blue);
    box-shadow: none;
}

.patient-filter-panel,
.patient-meta-card {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fdff;
}

.patient-result-summary {
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--soft-blue);
}

.patient-record-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.patient-record-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0, 103, 166, 0.12);
}

.patient-edit-panel {
    max-width: 1080px;
    margin-inline: auto;
}

.patient-edit-image {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
}

@media print {
    .site-header,
    .site-footer,
    .floating-sticker,
    .manual-sidebar,
    .manual-print-button,
    .manual-quick-links {
        display: none !important;
    }

    body,
    .page-shell {
        background: #fff;
    }

    .page-shell {
        padding: 0;
    }

    .admin-manual {
        max-width: 100%;
        margin: 0;
    }

    .manual-hero,
    .manual-content {
        border: 0;
        box-shadow: none;
    }

    .manual-step,
    .manual-callout,
    .manual-risk,
    .manual-table tr {
        break-inside: avoid;
    }

    .accordion-collapse {
        display: block !important;
    }
}

/* PrevWound V3: manual Color Protocol, discrete pain scale and healed-case workflow */
.pain-score-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(42px, 1fr));
    gap: 8px;
}

.pain-score-option {
    position: relative;
    cursor: pointer;
}

.pain-score-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pain-score-option span {
    display: grid;
    min-height: 54px;
    place-items: center;
    border: 2px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 800;
    transition: 0.18s ease;
}

.pain-score-option:hover span,
.pain-score-option input:focus-visible + span {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(255, 179, 0, 0.28);
}

.pain-score-option input:checked + span {
    border-color: #102b3d;
    outline: 3px solid #102b3d;
    outline-offset: 2px;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.pain-score-option span { background: var(--pain-bg, #fff); color: #102b3d; border-color: #596b73; }
.pain-score-option[data-pain="0"] { --pain-bg: #c9f5e6; }
.pain-score-option[data-pain="1"] { --pain-bg: #d5f4bf; }
.pain-score-option[data-pain="2"] { --pain-bg: #e5f3aa; }
.pain-score-option[data-pain="3"] { --pain-bg: #f3ef9d; }
.pain-score-option[data-pain="4"] { --pain-bg: #ffe491; }
.pain-score-option[data-pain="5"] { --pain-bg: #ffcf85; }
.pain-score-option[data-pain="6"] { --pain-bg: #ffb67d; }
.pain-score-option[data-pain="7"] { --pain-bg: #ffa184; }
.pain-score-option[data-pain="8"] { --pain-bg: #ff8e8e; }
.pain-score-option[data-pain="9"] { --pain-bg: #fa7a87; }
.pain-score-option[data-pain="10"] { --pain-bg: #ee6c80; }

.manual-color-protocol .wound-color-choice {
    grid-template-columns: auto 52px 1fr;
    min-height: 104px;
    padding: 16px;
}

.protocol-color-dot {
    display: block !important;
    width: 42px;
    height: 42px;
    border: 3px solid rgba(16, 43, 61, 0.16);
    border-radius: 50%;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.72);
}

.color-green .protocol-color-dot { background: #00c978; }
.color-yellow .protocol-color-dot { background: #ffd23f; }
.color-red .protocol-color-dot { background: #ff3434; }

.protocol-recommendation {
    padding: 20px;
    border: 2px solid var(--line);
    border-left-width: 8px;
    border-radius: 14px;
    background: #fff;
}

.protocol-recommendation[hidden] { display: none !important; }
.protocol-recommendation-green { border-left-color: #15966a; background: #f1fff9; }
.protocol-recommendation-yellow { border-left-color: #d69b00; background: #fffaf0; }
.protocol-recommendation-red { border-left-color: #d7343f; background: #fff5f5; }

.healed-confirmation-modal .modal-header {
    border-bottom: 2px solid #d6e6ee;
}

.healed-checklist {
    display: grid;
    gap: 12px;
}

.healed-checklist label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    border: 2px solid var(--line);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}

.healed-checklist label:has(input:checked) {
    border-color: #15966a;
    background: #effcf6;
}

.healed-checklist input {
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.2rem;
}

.healed-checklist span {
    display: grid;
    gap: 3px;
}

.healed-checklist small { color: var(--muted); }

@media (max-width: 991.98px) {
    .pain-score-grid { grid-template-columns: repeat(6, minmax(42px, 1fr)); }
}

@media (max-width: 480px) {
    .pain-score-grid { grid-template-columns: repeat(4, minmax(42px, 1fr)); }
    .manual-color-protocol .wound-color-choice { grid-template-columns: auto 42px 1fr; }
    .protocol-color-dot { width: 36px; height: 36px; }
}

.current-case-card,
.current-case-empty,
.archived-case-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px;
    border: 2px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.current-case-card.status-green { border-color: #15966a; background: #f1fff9; }
.current-case-card.status-yellow { border-color: #d69b00; background: #fffaf0; }
.current-case-card.status-red { border-color: #d7343f; background: #fff5f5; }
.current-case-empty { border-style: dashed; background: linear-gradient(145deg, #effcf6, #f4fbff); }
.empty-case-symbol,
.case-success-icon {
    display: grid;
    flex: 0 0 auto;
    width: 68px;
    height: 68px;
    place-items: center;
    border-radius: 50%;
    background: #15966a;
    color: #fff;
    font-size: 2.3rem;
    font-weight: 800;
}

.archived-cases-panel {
    padding-top: 24px;
    border-top: 2px solid #dbeaf1;
}

.archived-case-card { align-items: flex-start; }
.case-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.case-summary-grid > div,
.case-progression-card {
    padding: 16px;
    border: 2px solid var(--line);
    border-radius: 14px;
    background: #fff;
}
.case-summary-grid span { display: block; color: var(--muted); font-size: 0.9rem; }
.case-summary-grid strong { display: block; margin-top: 4px; font-size: 1.1rem; }
.case-color-progression { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.progression-arrow { color: var(--primary); font-size: 1.4rem; font-weight: 800; }
.case-success-card { border-top: 8px solid #15966a; }

.knowledge-evaluation-count,
.knowledge-result-score {
    display: grid;
    justify-items: center;
    padding: 18px;
    border: 2px solid var(--line);
    border-radius: 16px;
    background: #f3fbff;
}
.knowledge-evaluation-count strong,
.knowledge-result-score strong { color: var(--primary); font-size: 2.5rem; line-height: 1; }
.knowledge-question-list,
.knowledge-result-list { display: grid; gap: 14px; }
.knowledge-question-card {
    padding: 18px;
    border: 2px solid var(--line);
    border-radius: 14px;
    background: #fff;
}
.knowledge-question-card legend { display: flex; gap: 12px; align-items: flex-start; float: none; width: 100%; margin-bottom: 14px; font-size: 1rem; font-weight: 700; }
.knowledge-question-card legend > span,
.knowledge-result-number { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; }
.knowledge-answer-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.knowledge-answer-options label { display: flex; align-items: center; gap: 10px; padding: 13px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; }
.knowledge-answer-options label:has(input:checked) { border-color: var(--primary); background: #eef8ff; }
.knowledge-result-hero { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.knowledge-result-item { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 16px; border: 2px solid var(--line); border-radius: 14px; background: #fff; }
.knowledge-result-item.is-correct { border-left: 7px solid #15966a; }
.knowledge-result-item.is-incorrect { border-left: 7px solid #d7343f; }
.knowledge-reminder-modal { border-top: 7px solid var(--primary); }

@media (max-width: 991.98px) {
    .case-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .current-case-card,
    .current-case-empty,
    .archived-case-card { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 576px) {
    .case-summary-grid { grid-template-columns: 1fr; }
    .knowledge-result-hero { align-items: stretch; flex-direction: column; }
    .knowledge-result-item { grid-template-columns: auto 1fr; }
    .knowledge-result-item > .badge { grid-column: 2; justify-self: start; }
}

@media (max-width: 992px) {
    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .manual-toc {
        position: static;
    }
}

@media (max-width: 576px) {
    .site-title {
        font-size: 2rem;
    }

    .site-subtitle {
        font-size: 0.96rem;
    }

    .hero-panel,
    .auth-panel,
    .install-panel,
    .form-panel,
    .profile-panel,
    .table-panel {
        padding: 18px;
    }

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

    .floating-sticker {
        display: none;
    }

    .date-time-pill {
        width: 100%;
        border-radius: 8px;
    }

}

/* Automated wound assessment */
.assessment-disclaimer {
    background: #eaf7ff;
    color: #164966;
    border-left: 4px solid var(--primary) !important;
}

.step-number {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.95rem;
}

.camera-stage {
    position: relative;
    min-height: 330px;
    border-style: solid;
    background: #071522;
    isolation: isolate;
}

.camera-stage video,
.camera-stage > img {
    width: 100%;
    height: 330px;
    max-height: none;
    object-fit: contain;
    background: #071522;
}

.camera-stage video {
    cursor: crosshair;
}

.camera-stage .camera-placeholder {
    min-height: 330px;
    color: #31536a;
    background: linear-gradient(160deg, #f0faff, #fff9fc);
}

.camera-symbol {
    color: var(--primary);
    font-size: 4rem;
    line-height: 1;
}

.camera-guide {
    position: absolute;
    inset: 14% 12%;
    z-index: 2;
    pointer-events: none;
    border: 3px solid rgba(255, 255, 255, 0.94);
    border-radius: 50%;
    box-shadow: 0 0 0 999px rgba(3, 16, 27, 0.22), inset 0 0 0 2px rgba(0, 103, 166, 0.45);
}

.guide-label {
    position: absolute;
    left: 50%;
    bottom: -52px;
    width: max-content;
    max-width: 90vw;
    transform: translateX(-50%);
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(5, 27, 42, 0.84);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
}

.camera-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.camera-actions .btn,
.gallery-button {
    min-height: 46px;
}

.capture-status {
    min-height: 34px;
    padding: 8px 11px;
    border-radius: 8px;
    background: #f3f6f8;
    color: #4c5b65;
    font-size: 0.9rem;
    font-weight: 650;
}

.capture-status-success {
    background: #e5f8f0;
    color: #096341;
}

.capture-status-warning {
    background: #fff3cd;
    color: #765400;
}

.capture-status-danger {
    background: #ffe5e5;
    color: #821a1a;
}

.source-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 12px;
    color: var(--muted);
    font-size: 0.9rem;
}

.source-divider::before,
.source-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

.image-analysis-panel {
    padding: 18px;
    border: 1px solid #cce4f2;
    border-radius: 12px;
    background: linear-gradient(160deg, #f5fcff, #fff);
}

.color-percentage-row + .color-percentage-row {
    margin-top: 12px;
}

.color-percentage-row .progress {
    height: 10px;
    margin-top: 5px;
    border-radius: 999px;
    background: #e8eef2;
}

.analysis-bar-red {
    background: #df3b46;
}

.analysis-bar-yellow {
    background: #e6ad16;
}

.analysis-bar-green {
    background: #1d9d6c;
}

.quality-message {
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 0.9rem;
}

.quality-warning {
    color: #765400;
}

.quality-success {
    color: #096341;
}

.symptom-checks .form-check {
    min-height: 46px;
    padding: 11px 12px 11px 36px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.assessment-result {
    margin: 24px 0;
    padding: 22px;
    border: 1px solid var(--line);
    border-left-width: 6px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(0, 67, 105, 0.08);
}

.risk-result-red {
    border-left-color: #d7343f;
}

.risk-result-yellow {
    border-left-color: #dca20d;
}

.risk-result-green {
    border-left-color: #16966a;
}

.result-wound-image {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: 10px;
}

.analysis-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.analysis-stat {
    display: flex;
    flex-direction: column;
    padding: 11px;
    border-radius: 8px;
}

.analysis-stat strong {
    font-size: 1.25rem;
}

.analysis-stat-red {
    color: #821a1a;
    background: #ffe8e8;
}

.analysis-stat-yellow {
    color: #725100;
    background: #fff3cc;
}

.analysis-stat-green {
    color: #086341;
    background: #e3f8ef;
}

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

.recommendation-grid > div {
    padding: 14px;
    border-radius: 8px;
    background: #f6f9fb;
}

.recommendation-grid p {
    margin: 5px 0 0;
    color: var(--muted);
}

.education-module {
    padding: 32px;
    border-radius: 16px;
    background: linear-gradient(145deg, #eefaff, #fff5fa);
}

.education-card {
    position: relative;
    padding: 24px;
    overflow: hidden;
    border: 1px solid rgba(0, 103, 166, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 14px 28px rgba(0, 67, 105, 0.07);
}

.education-card p {
    margin-bottom: 0;
    color: var(--muted);
}

.education-number {
    display: block;
    margin-bottom: 14px;
    color: var(--primary);
    font-size: 1.5rem;
    font-weight: 900;
}

.usage-boundary-panel {
    padding: 30px;
    border: 1px solid #f2d7df;
    border-radius: 16px;
    background: linear-gradient(145deg, #fff8fa, #f6fbff);
    box-shadow: 0 16px 34px rgba(87, 40, 62, 0.07);
}

.boundary-warning-list {
    display: grid;
    gap: 10px;
}

.boundary-warning-list > div {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border-left: 4px solid #c82f49;
    border-radius: 8px;
    background: #fff;
}

.boundary-warning-list span {
    color: var(--muted);
}

.progress-chart-panel {
    padding: 22px;
    border: 1px solid #cfe5f1;
    border-radius: 14px;
    background: linear-gradient(145deg, #f5fcff, #fff);
}

.wound-progress-chart-wrap {
    width: 100%;
    min-height: 300px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

#wound-progress-chart {
    display: block;
    max-width: 100%;
}

.timeline-color-mix {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.timeline-color-mix span {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
}

.mix-red {
    color: #821a1a;
    background: #ffe8e8;
}

.mix-yellow {
    color: #725100;
    background: #fff3cc;
}

.mix-green {
    color: #086341;
    background: #e3f8ef;
}

@media (max-width: 576px) {
    .camera-stage,
    .camera-stage .camera-placeholder,
    .camera-stage video,
    .camera-stage > img {
        min-height: 270px;
        height: 270px;
    }

    .camera-actions .btn {
        flex: 1 1 100%;
    }

    .analysis-summary-grid,
    .recommendation-grid {
        grid-template-columns: 1fr;
    }

    .education-module {
        padding: 20px 14px;
    }

    .usage-boundary-panel {
        padding: 20px;
    }

    .progress-chart-panel {
        padding: 16px;
    }
}

/* Administration and data center */
.admin-hero-panel {
    padding: 30px;
    border: 1px solid rgba(0, 103, 166, 0.18);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(229, 248, 255, 0.96), rgba(255, 245, 250, 0.96)),
        #fff;
    box-shadow: var(--shadow);
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
}

.admin-stat-card {
    position: relative;
    display: flex;
    min-height: 155px;
    flex-direction: column;
    overflow: hidden;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 14px;
    color: #fff;
    box-shadow: 0 16px 32px rgba(18, 48, 71, 0.13);
}

.admin-stat-card::after {
    position: absolute;
    right: -28px;
    bottom: -45px;
    width: 120px;
    height: 120px;
    border: 22px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    content: "";
}

.admin-stat-card span,
.admin-stat-card small,
.admin-stat-card strong {
    position: relative;
    z-index: 1;
}

.admin-stat-card span {
    font-weight: 800;
}

.admin-stat-card strong {
    margin: 5px 0;
    font-size: 2.45rem;
    line-height: 1;
}

.admin-stat-card small {
    margin-top: auto;
    color: rgba(255, 255, 255, 0.92);
}

.stat-blue {
    background: linear-gradient(135deg, #073b70, #0879b8);
}

.stat-cyan {
    background: linear-gradient(135deg, #078fae, #1bc4d7);
}

.stat-pink {
    background: linear-gradient(135deg, #c92f79, #f34e9a);
}

.stat-green {
    background: linear-gradient(135deg, #15845f, #32c99b);
}

.admin-mini-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.admin-mini-stats > div {
    display: flex;
    min-height: 100px;
    flex-direction: column;
    justify-content: center;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: linear-gradient(145deg, #f4fbff, #fff);
    text-align: center;
}

.admin-mini-stats strong {
    color: var(--deep-blue);
    font-size: 1.8rem;
}

.admin-mini-stats span {
    color: var(--muted);
    font-weight: 700;
}

.member-admin-card {
    display: flex;
    flex-direction: column;
}

.member-delete-panel {
    max-width: 820px;
}

.admin-search-results {
    display: grid;
    gap: 20px;
}

.admin-result-group {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.admin-result-group .table {
    margin-bottom: 0;
}

.admin-risk-row + .admin-risk-row {
    margin-top: 18px;
}

.admin-risk-row .progress {
    height: 12px;
    margin-top: 7px;
    border-radius: 999px;
    background: #e8eef2;
}

.admin-report-card,
.admin-backup-section {
    display: flex;
    flex-direction: column;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(145deg, #fff, #f5fbff);
    box-shadow: 0 12px 26px rgba(0, 67, 105, 0.07);
}

.admin-backup-card {
    border-color: rgba(243, 78, 154, 0.28);
    background: linear-gradient(145deg, #fff8fb, #f4fbff);
}

.admin-backup-section .feature-icon {
    margin-bottom: 16px;
}

.admin-backup-section.import-section {
    border-color: rgba(200, 47, 73, 0.22);
    background: linear-gradient(145deg, #fff, #fff8fa);
}

.report-export-page {
    background:
        radial-gradient(circle at top left, rgba(19, 183, 213, 0.18), transparent 32rem),
        linear-gradient(145deg, #eefaff, #fff7fb);
}

.report-export-panel {
    max-width: 720px;
    padding: 42px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow);
}

.report-export-icon {
    border-radius: 22px;
    box-shadow: 0 14px 30px rgba(7, 59, 112, 0.2);
}

@media (max-width: 991.98px) {
    .admin-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .admin-mini-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-hero-panel,
    .report-export-panel {
        padding: 24px;
    }
}

/* Accessibility: large text, high contrast and clear controls for older adults */
body,
.form-control,
.form-select,
.dropdown-menu {
    color: var(--ink);
}

.text-muted,
.form-text,
small,
.small {
    color: var(--muted) !important;
}

small,
.small,
.form-text {
    font-size: 0.92rem;
    line-height: 1.55;
}

p,
li,
td,
th,
label,
.form-label,
.nav-link,
.dropdown-item {
    line-height: 1.65;
}

.site-subtitle,
.lead {
    font-size: 1.12rem;
    line-height: 1.7;
}

.app-navbar {
    border-top-width: 2px;
    border-bottom: 2px solid var(--line);
}

.app-navbar .navbar-brand,
.app-navbar .nav-link,
.app-navbar .dropdown-item {
    font-size: 1rem;
}

.app-navbar .nav-link {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    padding: 10px 15px;
}

.app-navbar .dropdown-item {
    min-height: 48px;
    padding: 10px 14px;
}

.hero-panel,
.auth-panel,
.install-panel,
.form-panel,
.profile-panel,
.table-panel,
.feature-card,
.knowledge-card,
.metric-card,
.timeline-card,
.color-card,
.manual-summary-card,
.manual-toc,
.manual-content,
.account-form-card,
.member-edit-summary,
.choice-card,
.protocol-card,
.appointment-item,
.admin-result-group,
.admin-report-card,
.admin-backup-section,
.report-export-panel {
    border-width: 2px;
}

.section-title {
    color: var(--deep-blue);
    letter-spacing: 0.01em;
    line-height: 1.35;
}

.section-kicker {
    color: #9e1f5b;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.btn {
    min-height: 50px;
    padding: 0.65rem 1.05rem;
    border-width: 2px;
    font-size: 1rem;
    line-height: 1.35;
}

.btn-sm {
    min-height: 44px;
    padding: 0.5rem 0.85rem;
    font-size: 0.92rem;
}

.btn-primary {
    --bs-btn-bg: var(--deep-blue);
    --bs-btn-border-color: var(--deep-blue);
    --bs-btn-hover-bg: #003d64;
    --bs-btn-hover-border-color: #003d64;
    --bs-btn-active-bg: #003653;
    --bs-btn-active-border-color: #003653;
}

.btn-outline-primary {
    --bs-btn-color: var(--deep-blue);
    --bs-btn-border-color: var(--deep-blue);
    --bs-btn-hover-bg: var(--deep-blue);
    --bs-btn-hover-border-color: var(--deep-blue);
    --bs-btn-active-bg: #003d64;
    --bs-btn-active-border-color: #003d64;
}

.rounded-action {
    min-height: 50px;
}

.form-label,
legend.form-label {
    margin-bottom: 0.45rem;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 800;
}

.form-control,
.form-select {
    min-height: 52px;
    padding: 0.62rem 0.78rem;
    border: 2px solid #6d9fba;
    background-color: #fff;
    color: var(--ink);
    font-size: 1rem;
}

textarea.form-control {
    min-height: 110px;
}

.form-control::placeholder {
    color: #5b6f7d;
    opacity: 1;
}

.form-check-input {
    width: 1.3em;
    height: 1.3em;
    border: 2px solid #567f96;
}

.form-check {
    min-height: 42px;
    padding-top: 0.28rem;
    padding-bottom: 0.28rem;
}

.alert {
    border-width: 2px;
    font-size: 1rem;
    line-height: 1.65;
}

.badge,
.role-badge,
.risk-badge {
    font-size: 0.9rem;
    line-height: 1.35;
}

.table {
    color: var(--ink);
    font-size: 0.96rem;
}

.table > :not(caption) > * > * {
    padding: 0.75rem;
    border-color: #8fb4c8;
}

.manual-content {
    font-size: 1.02rem;
}

.manual-section-intro {
    color: #243f51;
    font-size: 1.04rem;
}

.manual-step {
    border-width: 2px;
    border-color: #8fb9ce;
    background: #f4fbff;
}

.manual-step-number {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    background: var(--deep-blue);
    font-size: 1rem;
}

.manual-risk {
    border-width: 2px;
}

.manual-toc-list a {
    display: inline-block;
    padding: 4px 0;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.calendar-event {
    padding: 6px 8px;
    font-size: 0.84rem;
}

.guide-label,
.capture-status,
.source-divider,
.quality-message {
    font-size: 0.92rem;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 4px solid var(--focus-ring) !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 2px #102b3d !important;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--deep-blue);
    box-shadow: 0 0 0 0.22rem rgba(0, 79, 128, 0.24);
}

@media (max-width: 767.98px) {
    .calendar-event {
        padding: 4px;
        font-size: 0.78rem;
    }

    .wound-color-choice small {
        font-size: 0.9rem;
    }

    .manual-content {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .admin-stat-grid {
        grid-template-columns: 1fr;
    }

    .admin-stat-card {
        min-height: 135px;
    }
}

/* PrevWound V2: member profiles, clinical protocol and appointments */
.auth-panel-wide {
    max-width: 980px;
}

.user-type-grid,
.exudate-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.exudate-choice-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.choice-card {
    display: flex;
    min-height: 64px;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.choice-card:hover,
.choice-card:has(input:checked) {
    border-color: var(--barbie-blue);
    box-shadow: 0 8px 20px rgba(0, 103, 166, 0.12);
    transform: translateY(-1px);
}

.choice-card-compact {
    min-height: 52px;
    padding: 11px 13px;
}

.wound-color-choice-grid {
    display: grid;
    gap: 12px;
}

.wound-color-choice {
    display: grid;
    grid-template-columns: auto 112px 1fr;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 2px solid var(--line);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wound-color-choice img {
    width: 112px;
    height: 78px;
    border-radius: 9px;
    object-fit: cover;
}

.wound-color-choice span {
    display: grid;
    gap: 3px;
}

.wound-color-choice small {
    color: var(--muted);
    line-height: 1.45;
}

.wound-color-choice.color-green:has(input:checked) { border-color: #16966a; box-shadow: 0 8px 24px rgba(22, 150, 106, 0.15); }
.wound-color-choice.color-yellow:has(input:checked) { border-color: #dca20d; box-shadow: 0 8px 24px rgba(220, 162, 13, 0.16); }
.wound-color-choice.color-red:has(input:checked) { border-color: #d7343f; box-shadow: 0 8px 24px rgba(215, 52, 63, 0.15); }

.knowledge-jump {
    scroll-margin-top: 1rem;
}

#color-protocol,
#nutrition,
#wound-kit,
#handwashing,
#clinic-preparation {
    scroll-margin-top: 20px;
}

.protocol-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-top-width: 6px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 28px rgba(0, 67, 105, 0.08);
}

.protocol-card > img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.protocol-card li + li,
.care-steps li + li,
.check-list li + li {
    margin-top: 8px;
}

.protocol-green { border-top-color: #16966a; }
.protocol-yellow { border-top-color: #dca20d; }
.protocol-red { border-top-color: #d7343f; }

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

.nutrition-targets p,
.condition-note {
    margin: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f7fcff;
}

.condition-note p {
    margin: 6px 0 0;
    color: var(--muted);
}

.menu-table thead th {
    color: #fff;
    background: var(--deep-blue);
}

.menu-table td,
.menu-table th {
    min-width: 150px;
    vertical-align: top;
}

.menu-table td:first-child,
.menu-table th:first-child {
    min-width: 90px;
}

.video-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.care-steps,
.check-list {
    padding-left: 1.35rem;
    line-height: 1.7;
}

.handwashing-source {
    aspect-ratio: auto;
    object-fit: contain;
    background: #fff;
}

.timing-grid {
    display: grid;
    gap: 10px;
}

.timing-grid > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    border-left: 4px solid var(--barbie-blue);
    border-radius: 8px;
    background: #f4fbff;
}

.calendar-weekdays,
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays span {
    padding: 8px;
    color: var(--deep-blue);
    font-weight: 900;
    text-align: center;
}

.calendar-grid {
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-radius: 10px;
}

.calendar-day {
    min-height: 112px;
    padding: 8px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.calendar-day-empty {
    background: #f5f7f8;
}

.calendar-today {
    background: #eaf8ff;
    box-shadow: inset 0 0 0 2px var(--barbie-blue);
}

.calendar-event {
    display: block;
    margin-top: 6px;
    padding: 4px 6px;
    overflow: hidden;
    border-radius: 6px;
    background: #dff5ff;
    color: #075c91;
    font-size: 0.76rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-completed { background: #dff8ee; color: #0b6d47; }
.status-cancelled, .status-missed { background: #ffe2e2; color: #8c1212; }

.appointment-list {
    display: grid;
    gap: 12px;
}

.appointment-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8fdff;
}

/* Satisfaction survey and analytics */
.satisfaction-hero,
.satisfaction-result-hero,
.satisfaction-report-hero {
    border-top: 6px solid var(--pink);
}

.satisfaction-progress-card {
    padding: 22px;
    border: 2px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 28px rgba(0, 79, 128, 0.12);
}

.satisfaction-progress-card strong {
    display: block;
    color: var(--deep-blue);
    font-size: 1.8rem;
}

.satisfaction-progress-card span {
    color: var(--muted);
    font-weight: 700;
}

.satisfaction-progress-card .progress,
.satisfaction-dimension-row .progress,
.satisfaction-distribution-row .progress,
.satisfaction-score-card .progress {
    height: 12px;
    border: 1px solid #6c9cb5;
    background: #e7f1f6;
}

.satisfaction-progress-card .progress-bar,
.satisfaction-distribution-row .progress-bar {
    background: linear-gradient(90deg, var(--deep-blue), var(--barbie-blue), var(--pink));
}

.satisfaction-form-panel {
    max-width: 1120px;
}

.satisfaction-category {
    margin-top: 32px;
    overflow: hidden;
    border: 2px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.satisfaction-category-heading {
    padding: 22px;
    border-bottom: 2px solid var(--line);
    background: linear-gradient(135deg, #eaf8ff, #fff1f8);
}

.satisfaction-question {
    margin: 0;
    padding: 22px;
    border: 0;
    border-bottom: 1px solid var(--line);
}

.satisfaction-question:last-child {
    border-bottom: 0;
}

.satisfaction-question:nth-of-type(odd) {
    background: #f8fcff;
}

.satisfaction-question legend {
    width: 100%;
    margin-bottom: 15px;
    color: var(--ink);
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.55;
}

.satisfaction-question legend > span:first-child {
    color: var(--deep-blue);
}

.satisfaction-scale {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.satisfaction-option {
    display: grid;
    min-height: 86px;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 9px;
    padding: 12px;
    border: 2px solid #79a9c1;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.satisfaction-option:hover,
.satisfaction-option:focus-within {
    border-color: var(--deep-blue);
    background: #e8f7ff;
    transform: translateY(-1px);
}

.satisfaction-option:has(input:checked) {
    border-color: var(--deep-blue);
    background: #dff4ff;
    box-shadow: inset 0 0 0 1px var(--deep-blue);
}

.satisfaction-option input {
    width: 1.25rem;
    height: 1.25rem;
    grid-row: 1 / span 2;
    margin: 0;
}

.satisfaction-option strong {
    color: var(--deep-blue);
    font-size: 1.18rem;
    line-height: 1.1;
}

.satisfaction-option span {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.25;
}

.satisfaction-question.question-incomplete {
    background: #fff0f0;
    box-shadow: inset 6px 0 0 #b51e2d;
}

.satisfaction-comment-section {
    margin-top: 28px;
    padding: 22px;
    border: 2px solid var(--line);
    border-radius: 14px;
    background: #f8fcff;
}

.satisfaction-overall-score {
    display: flex;
    min-height: 180px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px;
    border: 3px solid rgba(255, 255, 255, 0.8);
    border-radius: 18px;
    color: #fff;
    text-align: center;
    box-shadow: 0 16px 36px rgba(16, 43, 61, 0.18);
}

.satisfaction-overall-score span,
.satisfaction-overall-score small {
    font-weight: 800;
}

.satisfaction-overall-score strong {
    font-size: 3.4rem;
    line-height: 1.05;
}

.score-success { background: linear-gradient(135deg, #0d7451, #22ad7e); }
.score-primary { background: linear-gradient(135deg, #004f80, #168fbe); }
.score-warning { background: linear-gradient(135deg, #946500, #d69b00); }
.score-danger { background: linear-gradient(135deg, #8d1825, #cf3d4c); }

.satisfaction-score-card {
    padding: 22px;
    border: 2px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(145deg, #fff, #f2fbff);
    box-shadow: 0 12px 26px rgba(0, 79, 128, 0.1);
}

.satisfaction-score-card > span,
.satisfaction-score-card > small {
    display: block;
    color: var(--muted);
    font-weight: 800;
}

.satisfaction-score-card > strong {
    display: block;
    margin: 5px 0;
    color: var(--deep-blue);
    font-size: 2.35rem;
    line-height: 1.1;
}

.satisfaction-criteria-list,
.satisfaction-group-list {
    display: grid;
    gap: 10px;
}

.satisfaction-criteria-list > div,
.satisfaction-group-list > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #f5fbff;
}

.satisfaction-saved-comment,
.satisfaction-comment-list article {
    padding: 16px;
    border: 1px solid var(--line);
    border-left: 5px solid var(--pink);
    border-radius: 10px;
    background: #fff7fb;
}

.satisfaction-comment-list {
    display: grid;
    gap: 12px;
}

.satisfaction-dimension-row,
.satisfaction-distribution-row {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.satisfaction-dimension-row:last-child,
.satisfaction-distribution-row:last-child {
    border-bottom: 0;
}

.satisfaction-analysis-table th,
.satisfaction-analysis-table td,
.satisfaction-result-table th,
.satisfaction-result-table td {
    min-width: 72px;
    vertical-align: middle;
}

.satisfaction-analysis-table th:nth-child(2),
.satisfaction-analysis-table td:nth-child(2),
.satisfaction-result-table th:nth-child(2),
.satisfaction-result-table td:nth-child(2) {
    min-width: 340px;
}

.stat-purple {
    background: linear-gradient(135deg, #68408d, #a660c0);
}

.satisfaction-stat-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1199.98px) {
    .satisfaction-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .satisfaction-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .user-type-grid,
    .exudate-choice-grid,
    .nutrition-targets {
        grid-template-columns: 1fr;
    }

    .wound-color-choice {
        grid-template-columns: auto 84px 1fr;
    }

    .wound-color-choice img {
        width: 84px;
        height: 70px;
    }

    .calendar-day {
        min-height: 72px;
        padding: 5px;
    }

    .calendar-event {
        padding: 2px 3px;
        font-size: 0.62rem;
    }

    .appointment-item,
    .timing-grid > div {
        flex-direction: column;
    }

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

    .satisfaction-option:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

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

@media (max-width: 480px) {
    .satisfaction-scale,
    .satisfaction-stat-grid {
        grid-template-columns: 1fr;
    }

    .satisfaction-option:last-child:nth-child(odd) {
        grid-column: auto;
    }
}

@media print {
    .satisfaction-result-hero,
    .satisfaction-report-hero,
    .satisfaction-score-card,
    .satisfaction-overall-score,
    .satisfaction-dimension-row,
    .satisfaction-comment-list article {
        break-inside: avoid;
    }
}