:root {
    /* Page colors */
    --color-page-background: #ffffff;
    --color-navbar-background: #eaf4ff;
    /* Pastel block colors */
    --color-block-green: #e9f8ee;
    --color-block-green-border: #c9e5d2;
    --color-block-blue: #eaf4ff;
    --color-block-blue-border: #cbddec;
    --color-block-yellow: #fff6d9;
    --color-block-yellow-border: #eadca8;
    --color-block-lavender: #f3ecff;
    --color-block-lavender-border: #ddd0f0;
    --color-block-pink: #fdecef;
    --color-block-pink-border: #efcdd4;
    /* Primary name and identity information */
    --color-block-peach: #fce8d5;
    --color-block-peach-border: #e8c5a4;
    /* Form controls */
    --control-height: 40px;
    --control-font-size: 18px;
    --label-font-size: 16px;
    /* Layout */
    --block-border-radius: 10px;
    --block-padding: 15px;
    --block-gap: 12px;
    /* General appearance */
    --block-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --heading-color: #1f2937;
    --secondary-text-color: #587086;
}


/* =========================================================
   REUSABLE INFORMATION BLOCKS
   ========================================================= */

.info-block {
    padding: var(--block-padding);
    border: 1px solid transparent;
    border-radius: var(--block-border-radius);
    box-shadow: var(--block-shadow);
}

.block-green {
    background-color: var(--color-block-green);
    border-color: var(--color-block-green-border);
}

.block-blue {
    background-color: var(--color-block-blue);
    border-color: var(--color-block-blue-border);
}

.block-yellow {
    background-color: var(--color-block-yellow);
    border-color: var(--color-block-yellow-border);
}

.block-lavender {
    background-color: var(--color-block-lavender);
    border-color: var(--color-block-lavender-border);
}

.block-pink {
    background-color: var(--color-block-pink);
    border-color: var(--color-block-pink-border);
}

.block-peach {
    background-color: var(--color-block-peach);
    border-color: var(--color-block-peach-border);
}

.info-block-title {
    margin-bottom: 14px;
    padding-bottom: 6px;
    color: var(--heading-color);
    border-bottom: 1px solid rgba(31, 41, 55, 0.15);
    font-size: 18px;
    font-weight: 600;
}


/* =========================================================
   STANDARD COMPACT FORM DIMENSIONS
   ========================================================= */

.compact-form .form-control,
.compact-form .form-select {
    min-height: var(--control-height);
    height: var(--control-height);
    padding: 6px 12px;
    font-size: var(--control-font-size);
    line-height: 1.25;
}

.compact-form textarea.form-control {
    height: auto;
    min-height: 80px;
}

.compact-form .form-label {
    margin-bottom: 5px;
    font-size: var(--label-font-size);
    font-weight: 500;
}


/* =========================================================
   GENERAL PAGE STYLES
   ========================================================= */

html {
    position: relative;
    min-height: 100%;
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
    background-color: var(--color-page-background);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}


/* =========================================================
   NURSING FLOW SHEET
   Compact layout used by Create and Edit
   ========================================================= */

.nfs-main {
    margin-bottom: 10px;
    padding: 10px 12px;
    background-color: #f0fbfb;
    border: 1px solid #20a4a8;
    border-radius: 6px;
}

.nfs-main-title {
    margin: -10px -12px 10px;
    padding: 7px 12px;
    color: white;
    background-color: #20a4a8;
    border-radius: 6px 6px 0 0;
    text-align: center;
    font-weight: 700;
}

    .nfs-main-title h1,
    .nfs-main-title h2,
    .nfs-main-title h3 {
        margin: 0;
        font-size: 1.35rem;
        line-height: 1.25;
    }

.nfs-section {
    margin-bottom: 9px;
    padding: 10px 12px;
    background-color: #ffffff;
    border: 1px solid #d9e2ec;
    border-radius: 6px;
}

.nfs-section-title {
    margin: -10px -12px 8px;
    padding: 5px 10px;
    border-radius: 6px 6px 0 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}


/* =========================================================
   NURSING FLOW SHEET SECTION COLORS
   ========================================================= */

/* Blue */
.nfs-blue {
    background-color: #f4f9ff;
    border-color: #9ecdf5;
}

    .nfs-blue .nfs-section-title {
        color: #173b5f;
        background-color: #cfe8ff;
    }

/* Green */
.nfs-green {
    background-color: #f4fcf5;
    border-color: #9ed9a7;
}

    .nfs-green .nfs-section-title {
        color: #214d29;
        background-color: #ccefcf;
    }

/* Pink */
.nfs-pink {
    background-color: #fff7f7;
    border-color: #efb3b3;
}

    .nfs-pink .nfs-section-title {
        color: #702727;
        background-color: #ffd6d6;
    }

/* Yellow */
.nfs-yellow {
    background-color: #fffdf3;
    border-color: #ead38a;
}

    .nfs-yellow .nfs-section-title {
        color: #55430a;
        background-color: #ffedaa;
    }

/* Light blue */
.nfs-lightblue {
    background-color: #f3faff;
    border-color: #9dcff0;
}

    .nfs-lightblue .nfs-section-title {
        color: #174c6b;
        background-color: #c8e8fb;
    }

/* Lavender */
.nfs-lavender {
    background-color: #faf7ff;
    border-color: #c7b3ed;
}

    .nfs-lavender .nfs-section-title {
        color: #432d70;
        background-color: #dfd2fa;
    }


/* =========================================================
   COMPACT NURSING NOTE FORM CONTROLS
   ========================================================= */

/* Reduce Bootstrap row spacing inside the nursing form */
.nfs-main .row.g-3 {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.5rem;
}

/* Reduce common Bootstrap vertical margins */
.nfs-main .mt-3 {
    margin-top: 0.5rem !important;
}

.nfs-main .mt-4 {
    margin-top: 0.75rem !important;
}

.nfs-main .mb-3 {
    margin-bottom: 0.5rem !important;
}

.nfs-main .mb-4 {
    margin-bottom: 0.75rem !important;
}

/* Labels and legends */
.nfs-main .form-label,
.nfs-main legend {
    margin-bottom: 3px;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.2;
}

/* Text inputs, number inputs, date inputs and dropdowns */
.nfs-main input.form-control,
.nfs-main select.form-select {
    min-height: 34px;
    height: 34px;
    padding: 4px 8px;
    font-size: 0.9rem;
    line-height: 1.2;
}

/* Text areas */
.nfs-main textarea.form-control {
    min-height: 54px;
    padding: 5px 8px;
    font-size: 0.9rem;
    line-height: 1.3;
    resize: vertical;
}

/*
   Keep the main observation/narrative area large enough
   for practical nursing documentation.
*/
.nfs-main textarea[name="ObservationText"],
.nfs-main textarea[id="ObservationText"],
.nfs-main textarea[name="Observations"],
.nfs-main textarea[id="Observations"] {
    min-height: 250px;
}

/* Input groups */
.nfs-main .input-group > .form-control,
.nfs-main .input-group > .form-select,
.nfs-main .input-group > .input-group-text,
.nfs-main .input-group > .btn {
    min-height: 34px;
    height: 34px;
}

.nfs-main .input-group-text {
    padding: 4px 8px;
    font-size: 0.88rem;
}

/* Checkboxes and radio buttons */
.nfs-main .form-check {
    min-height: 1.25rem;
    margin-bottom: 2px;
}

.nfs-main .form-check-input {
    margin-top: 0.15rem;
}

.nfs-main .form-check-label {
    font-size: 0.88rem;
    line-height: 1.25;
}

/* Compact validation messages */
.nfs-main .text-danger,
.nfs-main .field-validation-error {
    font-size: 0.8rem;
    line-height: 1.2;
}

/* Compact buttons inside the nursing form */
.nfs-main .btn {
    padding: 0.3rem 0.65rem;
    font-size: 0.9rem;
    line-height: 1.25;
}

/* Compact tables inside the nursing form */
.nfs-main .table {
    margin-bottom: 0.5rem;
}

    .nfs-main .table th,
    .nfs-main .table td {
        padding: 0.35rem 0.45rem;
        vertical-align: middle;
        font-size: 0.88rem;
    }

    .nfs-main .table input.form-control,
    .nfs-main .table select.form-select {
        min-height: 32px;
        height: 32px;
        padding: 3px 6px;
        font-size: 0.86rem;
    }


/* =========================================================
   MAIN NAVIGATION
   ========================================================= */

/* Spacing between top-level main menu items */
.navbar > .container-fluid > .navbar-collapse > .navbar-nav > .nav-item,
.navbar > .container > .navbar-collapse > .navbar-nav > .nav-item {
    margin-right: 14px;
}

/* Logo displayed on the main navigation bar */
img.main-navbar-logo {
    display: block;
    width: auto;
    height: 45px;
    max-width: 110px;
    object-fit: contain;
}

/* Light-blue main navigation bar */
.main-navbar {
    background-color: var(--color-navbar-background);
}


/* =========================================================
   SHARED PATIENT WORKSPACE
   Used by every page containing the patient record tabs
   ========================================================= */

.patient-record-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.patient-record-name {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 700;
    text-transform: uppercase;
}

.patient-header-divider {
    color: #c8ced5;
    font-size: 1.25rem;
}

.patient-record-layout {
    display: grid;
    grid-template-columns: 245px minmax(0, 1fr);
    gap: 0.7rem;
    align-items: start;
}

.patient-record-tabs {
    overflow: hidden;
    background: #f3faf5;
    border: 1px solid #cfe3d5;
    border-radius: 8px;
}

.patient-record-tab {
    display: block;
    padding: 0.55rem 0.75rem;
    color: #234a35;
    background: #f3faf5;
    border-bottom: 1px solid #cfe3d5;
    font-size: 0.95rem;
    text-decoration: none;
}

    .patient-record-tab:last-child {
        border-bottom: 0;
    }

    .patient-record-tab:hover {
        color: #123b25;
        background: #e7f5eb;
        text-decoration: none;
    }

    .patient-record-tab.active {
        padding-left: calc(0.75rem - 4px);
        color: #133c25;
        background: #dff2e4;
        border-left: 4px solid #29975a;
        font-weight: 700;
    }


/* =========================================================
   PATIENT ALERT TAB
   ========================================================= */

.patient-alert-tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.65rem;
    color: #a32121 !important;
    background: #fff1f1 !important;
    border-top: 1px solid #efbcbc;
}

    .patient-alert-tab:hover {
        color: #781616 !important;
        background: #ffe4e4 !important;
    }

.patient-record-tab.patient-alert-tab.active {
    padding-left: calc(0.75rem - 4px);
    color: #781616 !important;
    background: #ffdada !important;
    border-left: 4px solid #c62828;
    font-weight: 700;
}

.patient-alert-count {
    min-width: 1.65rem;
    padding: 0.1rem 0.4rem;
    color: white;
    background: #c62828;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}


/* =========================================================
   PATIENT REPORT
   ========================================================= */

.patient-report {
    min-height: 300px;
    padding: 0.75rem 1rem;
    background: #fcfcfd;
    border: 1px solid #d8dde3;
    border-radius: 8px;
}

.patient-report-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid #dfe3e7;
}

    .patient-report-heading h2 {
        margin: 0;
        font-size: 1.3rem;
        font-weight: 700;
    }

.report-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e1e4e8;
}

    .report-row:last-child {
        border-bottom: 0;
    }

    .report-row.one-column {
        grid-template-columns: 1fr;
    }

    .report-row.two-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.report-label {
    margin-bottom: 0.1rem;
    color: #687383;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.03rem;
    text-transform: uppercase;
}

.report-value {
    color: #182337;
    font-size: 0.95rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.report-subsection-title {
    margin: 0.75rem -1rem 0;
    padding: 0.4rem 1rem;
    color: #24573a;
    background: #edf7f0;
    border-top: 1px solid #d4e7da;
    border-bottom: 1px solid #d4e7da;
    font-size: 0.85rem;
    font-weight: 700;
}

    .report-subsection-title:first-child {
        margin-top: 0;
    }

.empty-section {
    padding: 1.5rem 0.75rem;
    color: #6c757d;
    text-align: center;
}

.missing-value {
    color: #c62828;
    font-weight: 700;
}


/* =========================================================
   RESPONSIVE PATIENT WORKSPACE
   ========================================================= */

@media (max-width: 900px) {
    .patient-record-layout {
        grid-template-columns: 1fr;
    }

    .patient-record-tabs {
        display: flex;
        overflow-x: auto;
    }

    .patient-record-tab {
        min-width: max-content;
        border-right: 1px solid #cfe3d5;
        border-bottom: 0;
    }

    .report-row,
    .report-row.two-columns {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   RESPONSIVE NURSING NOTE FORM
   ========================================================= */

@media (max-width: 767px) {
    .nfs-main {
        padding: 8px;
    }

    .nfs-main-title {
        margin: -8px -8px 8px;
    }

    .nfs-section {
        padding: 9px;
    }

    .nfs-section-title {
        margin: -9px -9px 8px;
    }

    .nfs-main input.form-control,
    .nfs-main select.form-select {
        min-height: 38px;
        height: 38px;
    }

    .nfs-main .input-group > .form-control,
    .nfs-main .input-group > .form-select,
    .nfs-main .input-group > .input-group-text,
    .nfs-main .input-group > .btn {
        min-height: 38px;
        height: 38px;
    }
}
/* =========================================================
   READ-ONLY NURSING NOTE
   Used only by the Nursing Note Details/View page

   Green headers
   Light gray section bodies
   White fields
   Blue checked controls
   ========================================================= */


/* ---------------------------------------------------------
   MAIN FLOW SHEET AND SECTION BODIES
   --------------------------------------------------------- */

.nursing-note-readonly .nfs-main,
.nursing-note-readonly .nfs-section {
    background-color: #f5f6f7 !important;
    border-color: #b7d8c2 !important;
}


/* ---------------------------------------------------------
   ALL HEADERS = GREEN
   --------------------------------------------------------- */

.nursing-note-readonly .nfs-main-title,
.nursing-note-readonly .nfs-section-title,
.nursing-note-readonly .nfs-blue .nfs-section-title,
.nursing-note-readonly .nfs-green .nfs-section-title,
.nursing-note-readonly .nfs-pink .nfs-section-title,
.nursing-note-readonly .nfs-yellow .nfs-section-title,
.nursing-note-readonly .nfs-lightblue .nfs-section-title,
.nursing-note-readonly .nfs-lavender .nfs-section-title {
    color: #0f5132 !important;
    background-color: #d1e7dd !important;
    border-color: #b7d8c2 !important;
}


/* ---------------------------------------------------------
   READ-ONLY FIELDS = WHITE
   --------------------------------------------------------- */

.nursing-note-readonly .form-control,
.nursing-note-readonly .form-select,
.nursing-note-readonly .form-control:read-only,
.nursing-note-readonly .form-control:disabled,
.nursing-note-readonly .form-select:disabled {
    color: #343a40 !important;
    background-color: #ffffff !important;
    border-color: #c5cbd1 !important;
    opacity: 1 !important;
}


/* Input-group labels such as %, Other, etc. */

.nursing-note-readonly .input-group-text {
    color: #343a40 !important;
    background-color: #ffffff !important;
    border-color: #c5cbd1 !important;
}


/* ---------------------------------------------------------
   CHECKED CHECKBOXES / RADIO BUTTONS = BLUE
   --------------------------------------------------------- */

.nursing-note-readonly .form-check-input:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    opacity: 1 !important;
}


/* Keep checked controls blue even though they are disabled */

.nursing-note-readonly .form-check-input:disabled:checked,
.nursing-note-readonly .form-check-input[disabled]:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    opacity: 1 !important;
}


/* Unchecked controls = white */

.nursing-note-readonly .form-check-input:disabled:not(:checked),
.nursing-note-readonly .form-check-input[disabled]:not(:checked) {
    background-color: #ffffff !important;
    border-color: #ced4da !important;
    opacity: 1 !important;
}


/* Keep checkbox/radio labels fully visible */

.nursing-note-readonly .form-check-input:disabled ~ .form-check-label,
.nursing-note-readonly .form-check-input[disabled] ~ .form-check-label {
    color: #212529 !important;
    opacity: 1 !important;
}


/* ---------------------------------------------------------
   TABLES
   --------------------------------------------------------- */

.nursing-note-readonly .table,
.nursing-note-readonly .table td {
    background-color: #ffffff !important;
    border-color: #c9ced3 !important;
}


    /* Table headings stay neutral gray */

    .nursing-note-readonly .table th,
    .nursing-note-readonly .table thead th {
        color: #343a40 !important;
        background-color: #e9ecef !important;
        border-color: #c9ced3 !important;
    }


    /* Fields inside tables remain white */

    .nursing-note-readonly .table .form-control,
    .nursing-note-readonly .table .form-select,
    .nursing-note-readonly .table .form-control:disabled,
    .nursing-note-readonly .table .form-select:disabled {
        color: #343a40 !important;
        background-color: #ffffff !important;
        border-color: #c5cbd1 !important;
        opacity: 1 !important;
    }

/* =========================================================
   PATIENTS DASHBOARD WORKSPACE
   Shared by Dashboard, Search Patients, and Add Patient
   ========================================================= */

.patients-workspace-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.65rem;
}

.patients-workspace-title {
    margin: 0;
    color: #182337;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
}

    .patients-workspace-title a {
        color: inherit;
        text-decoration: none;
    }

        .patients-workspace-title a:hover {
            color: #0d6efd;
            text-decoration: none;
        }

.patients-workspace-description {
    margin: 0.25rem 0 0;
    color: #587086;
    font-size: 1rem;
}

.patients-workspace-action {
    flex-shrink: 0;
}

.patients-workspace-divider {
    margin-top: 0;
    margin-bottom: 1.25rem;
}

.patients-page-heading {
    margin: 0 0 1rem;
    color: #182337;
    font-size: 1.55rem;
    font-weight: 700;
}

@media (max-width: 600px) {
    .patients-workspace-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .patients-workspace-title {
        font-size: 1.7rem;
    }
}