.section {
    background: #f4f8fb;
    padding: 16px;
    border-radius: 6px;
    box-sizing: border-box;
    margin-bottom: 24px;
}

body {
    background: #eaf1f8;
    color: #1f2d3a;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.section h2 {
    text-align: center;
    color: #3498db;
    margin-bottom: 5px;
    margin-top: 5px;
    font-weight: bold;
}

.section h3 {
    text-align: center;
    color: #3498db;
    margin-bottom: 5px;
    margin-top: 5px;
    font-weight: bold;
    font-size: large;
}

.section h4 {
    text-align: center;
    color: #3498db;
    margin-bottom: 5px;
    margin-top: 5px;
    font-weight: bold;
    font-size: medium;
}

.section h4.priority1 {
    color: #e74c3c; /* Red for Priority 1 */
}
.section h4.priority2 {
    color: #f39c12; /* Orange for Priority 2 */
}
.section h4.priority3 {
    color: #e6e60b; /* Yellow for Priority 3 */ 
}
.section h4.priority4 {
    color: #2ecc71; /* Green for Priority 4 */
} 

/* More contrast for Bootstrap floating labels */
.form-floating > label {
    color: #212529;
    font-weight: 500;
}

/* Custom styles for buttons */
.btn-toggle {
      display: inline-block;
      padding: 5px 5px;
      margin: 5px;
      border: 2px solid #007BFF;
      border-radius: 6px;
      background-color: white;
      color: #007BFF;
      cursor: pointer;
      user-select: none;
      transition: background-color 0.3s, color 0.3s;
      font-weight: 600;
      min-width: 160px;
      text-align: center;
    }
.btn-toggle:hover {
      background-color: #e6f0ff;
    }
.btn-toggle.yes-no-toggle {
    background-color: #ffffff !important;
    color: #007BFF;
    border-color: #007BFF;
}

.btn-toggle.yes-no-toggle:hover {
    background-color: #f8fbff !important;
}
.btn-toggle.priority1 {
    border-color: #870e00; /* Red for Priority 1 */
    background-color: #e74c3c;
    color: #ffffff;
}
.btn-toggle.priority1:hover {
    background-color: #a62517; /* Darker red on hover */
}
.btn-toggle.priority2 {
    border-color: #f39c12; /* Orange for Priority 2 */
    background-color: #f39c12;
    color: #000000;
}
.btn-toggle.priority2:hover {
    background-color: #d9822b; /* Darker orange on hover */
}   
.btn-toggle.priority3 {
    border-color: #e6e60b; /* Yellow for Priority 3 */
    background-color: #ffff5f;
    color: #000000;
}
.btn-toggle.priority3:hover {
    background-color: #8d8d03; /* Darker yellow on hover */
}
.btn-toggle.priority4 {
    border-color: #0da54c; /* Green for Priority 4 */
    background-color: #2ecc71;
    color: #ffffff;
}
.btn-toggle.priority4:hover {
    background-color: #21b452; /* Darker green on hover */
}
input[type="checkbox"].btn-toggle {
            display: none;
        }
input[type="radio"].btn-toggle {
                        display: none;
                }
input[type="checkbox"].btn-toggle:checked + label.btn-toggle {
      background-color: #007BFF;
      color: white;
      box-shadow: 0 0 8px rgba(0,123,255,0.6);
    }
input[type="radio"].btn-toggle:checked + label.btn-toggle {
            background-color: #007BFF;
            color: white;
            box-shadow: 0 0 8px rgba(0,123,255,0.6);
        }
input[type="radio"].btn-toggle:checked + label.btn-toggle.yes-no-toggle {
            background-color: #007BFF !important;
            color: #ffffff !important;
        }
input[type="checkbox"].btn-toggle:checked + label.btn-toggle.priority1 {
      background-color: #560b02;
      color: white;
    }
input[type="checkbox"].btn-toggle:checked + label.btn-toggle.priority2 {
      background-color: #af6011;
      color: white;
    }
input[type="checkbox"].btn-toggle:checked + label.btn-toggle.priority3 {
      background-color: #8d8d03;
      color: white;
    }
input[type="checkbox"].btn-toggle:checked + label.btn-toggle.priority4 {
      background-color: #1e7a3c;
      color: white;
    }

/* Touch-friendly controls across the app */
button,
input[type="button"],
input[type="submit"],
.btn,
a[style*="background:"] {
        min-height: 44px;
        padding: 0.55rem 0.9rem !important;
        line-height: 1.2;
        touch-action: manipulation;
}

.btn {
    border-radius: 8px;
    font-weight: 600;
}

/* Shared PDF action style so all PDF generators look distinct and consistent. */
.pdf-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    min-height: 38px;
    padding: 0.36rem 0.66rem;
    border: 1px solid transparent;
    border-radius: 2px;
    color: #fff !important;
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: normal;
    text-align: center;
    justify-content: center;
    max-width: 240px;
}

.pdf-action-btn--two-line {
    min-height: 56px;
    min-width: 190px;
    line-height: 1.1;
}

.pdf-action-btn:hover,
.pdf-action-btn:focus-visible {
    filter: brightness(0.95);
    text-decoration: none;
}

.pdf-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.2rem;
    padding: 0 0.2rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.pdf-action-btn--medical { background: #5f3dc4; border-color: #5031a6; }
.pdf-action-btn--death { background: #b02a37; border-color: #912430; }
.pdf-action-btn--birth { background: #c05621; border-color: #9c4418; }
.pdf-action-btn--psychosocial { background: #5b21b6; border-color: #4c1d95; }
.pdf-action-btn--referral { background: #0f766e; border-color: #0c5f59; }
.pdf-action-btn--generic { background: #495057; border-color: #3d4349; }

.app-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    min-height: 36px;
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    border: 1px solid transparent;
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    line-height: 1.15;
}

.app-nav-btn--neutral { background: #6c757d; border-color: #5d656d; }
.app-nav-btn--success { background: #198754; border-color: #157347; }
.app-nav-btn--hub { background: #365e8d; border-color: #2c4d72; }
.app-nav-btn--patients { background: #1f6fd1; border-color: #1857a5; }
.app-nav-btn--forms { background: #6c757d; border-color: #5d656d; }

.app-nav-btn--hub::before {
    content: "\1F3E0";
    font-size: 0.9rem;
    line-height: 1;
}

.app-nav-btn--patients::before {
    content: "\1F3E5";
    font-size: 0.9rem;
    line-height: 1;
}

.app-nav-btn--forms::before {
    content: "\2190";
    font-size: 0.9rem;
    line-height: 1;
}

.app-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    min-height: 38px;
    padding: 0.42rem 0.74rem;
    border-radius: 8px;
    border: 1px solid #b45309;
    background: #d97706;
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    line-height: 1.1;
}

.app-filter-btn:hover,
.app-filter-btn:focus-visible {
    background: #b45309;
    border-color: #9a4708;
    text-decoration: none;
}

.app-filter-btn--secondary {
    border-color: #bd7309;
    background: #e58a10;
}

.app-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 38px;
    padding: 0.45rem 0.85rem;
    border-radius: 6px;
    border: 1px solid #1556a0;
    background: #1f6fd1;
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    line-height: 1.15;
}

.app-action-btn:hover,
.app-action-btn:focus-visible {
    filter: brightness(0.95);
    text-decoration: none;
}

.app-action-btn--patient { background: #1f6fd1; border-color: #1857a5; }
.app-action-btn--visit { background: #1f8f5f; border-color: #197449; }
.app-action-btn--edit { background: #365e8d; border-color: #2c4d72; }
.app-action-btn--visit-create {
    background: #8ccf57;
    border-color: #6ea63f;
    color: #1f3d16 !important;
    box-shadow: 0 2px 8px rgba(110, 166, 63, 0.28);
}
.app-action-btn--reload { background: #d97706; border-color: #b45309; }

.app-action-btn--edit::before {
    content: "\270E";
    font-size: 0.82rem;
    line-height: 1;
}

/* Global responsive guardrails for dense data-entry pages */
img,
svg,
canvas {
    max-width: 100%;
    height: auto;
}

table {
    width: 100%;
}

.app-clean-table {
    overflow: hidden;
    border: 1px solid #d7dde6 !important;
    border-radius: 12px;
    border-collapse: separate !important;
    border-spacing: 0;
    background: #ffffff !important;
    box-shadow: 0 10px 24px rgba(12, 45, 74, 0.05);
}

.app-clean-table th,
.app-clean-table td {
    border: 0 !important;
    border-bottom: 1px solid #e5e9ef !important;
    padding: 0.85rem 0.8rem !important;
    vertical-align: middle;
}

.app-clean-table thead tr,
.app-clean-table thead th {
    background: #f8fafc !important;
    color: #111827;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0;
}

.app-clean-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.app-clean-table tbody tr:hover {
    background: #f8fbff !important;
}

.table-responsive,
.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

input,
select,
textarea,
.form-control,
.form-select {
    max-width: 100%;
    font-size: 1rem;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea,
.form-control,
.form-select {
    min-height: 44px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.admin-filter-date-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    white-space: nowrap;
}

.admin-filter-date-inline--stretch {
    width: 100%;
}

.admin-filter-date-inline--stretch .admin-filter-date-input {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-filter-date-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #334e68;
    letter-spacing: 0.01em;
}

.admin-filter-date-input {
    min-height: 44px;
    padding: 0.45rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    min-width: 150px;
}

.admin-filter-help-text {
    margin-top: 0.2rem;
    font-size: 0.82rem;
    color: #52667a;
}

@media (max-width: 992px) {
    .section {
        padding: 12px;
    }

    .section h2,
    .section h3,
    .section h4 {
        text-align: left;
    }
}

@media (max-width: 768px) {
    .section {
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 14px;
    }

    .btn-toggle {
        min-width: 120px;
        width: 100%;
    }

    .btn,
    button,
    input[type="button"],
    input[type="submit"] {
        width: 100%;
    }

    .row {
        margin-left: 0;
        margin-right: 0;
    }

    .row > * {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }
}

/* Compact patient table styles for denser lists */
.patient-compact .app-clean-table th,
.patient-compact .app-clean-table td {
    padding: 0.45rem 0.5rem !important;
}
.patient-compact .app-clean-table td > div { line-height: 1.05; }
.patient-compact .app-clean-table td .manual-id { font-size: 0.85rem; color: #666; margin-top: 0.12rem; }