*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

main,
section,
article,
aside,
header,
footer,
form,
fieldset,
div {
    min-width: 0;
}

img,
video,
canvas {
    max-width: 100%;
    height: auto;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

.boolean-chip {
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
}

.boolean-chip > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.section {
    background: var(--app-surface-muted);
    padding: 16px;
    border-radius: 6px;
    box-sizing: border-box;
    margin-bottom: 24px;
}

body {
    background: var(--app-page);
    color: var(--app-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.section h2 {
    text-align: center;
    color: var(--app-primary-dark);
    margin-bottom: 5px;
    margin-top: 5px;
    font-weight: bold;
}

.section h3 {
    text-align: center;
    color: var(--app-primary-dark);
    margin-bottom: 5px;
    margin-top: 5px;
    font-weight: bold;
    font-size: large;
}

.section h4 {
    text-align: center;
    color: var(--app-primary-dark);
    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 var(--app-accent);
      border-radius: 6px;
      background-color: var(--app-surface);
      color: var(--app-accent);
      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: color-mix(in srgb, var(--app-accent) 12%, var(--app-surface));
    }
.btn-toggle.yes-no-toggle {
    background-color: var(--app-surface) !important;
    color: var(--app-accent);
    border-color: var(--app-accent);
}

.btn-toggle.yes-no-toggle:hover {
    background-color: color-mix(in srgb, var(--app-accent) 10%, var(--app-surface)) !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: var(--app-accent);
      color: white;
      box-shadow: 0 0 8px color-mix(in srgb, var(--app-accent) 45%, transparent);
    }
input[type="radio"].btn-toggle:checked + label.btn-toggle {
            background-color: var(--app-accent);
            color: white;
            box-shadow: 0 0 8px color-mix(in srgb, var(--app-accent) 45%, transparent);
        }
input[type="radio"].btn-toggle:checked + label.btn-toggle.yes-no-toggle {
            background-color: var(--app-accent) !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: var(--app-text-muted); border-color: color-mix(in srgb, var(--app-text-muted) 82%, #000000); }
.app-nav-btn--success { background: var(--app-success); border-color: color-mix(in srgb, var(--app-success) 82%, #000000); }
.app-nav-btn--hub { background: var(--app-primary); border-color: color-mix(in srgb, var(--app-primary) 82%, #000000); }
.app-nav-btn--patients { background: var(--app-accent); border-color: color-mix(in srgb, var(--app-accent) 82%, #000000); }
.app-nav-btn--forms { background: var(--app-text-muted); border-color: color-mix(in srgb, var(--app-text-muted) 82%, #000000); }

.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 color-mix(in srgb, var(--app-warning) 82%, #000000);
    background: var(--app-warning);
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    line-height: 1.1;
}

.app-filter-btn:hover,
.app-filter-btn:focus-visible {
    background: color-mix(in srgb, var(--app-warning) 84%, #000000);
    border-color: color-mix(in srgb, var(--app-warning) 70%, #000000);
    text-decoration: none;
}

.app-filter-btn--secondary {
    border-color: color-mix(in srgb, var(--app-accent) 82%, #000000);
    background: var(--app-accent);
}

.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 color-mix(in srgb, var(--app-accent) 82%, #000000);
    background: var(--app-accent);
    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: var(--app-accent); border-color: color-mix(in srgb, var(--app-accent) 82%, #000000); }
.app-action-btn--visit { background: var(--app-success); border-color: color-mix(in srgb, var(--app-success) 82%, #000000); }
.app-action-btn--edit { background: var(--app-primary); border-color: color-mix(in srgb, var(--app-primary) 82%, #000000); }
.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: var(--app-warning); border-color: color-mix(in srgb, var(--app-warning) 82%, #000000); }

.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 var(--app-border) !important;
    border-radius: 12px;
    border-collapse: separate !important;
    border-spacing: 0;
    background: var(--app-surface) !important;
    box-shadow: var(--app-shadow-soft);
}

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

.app-clean-table thead tr,
.app-clean-table thead th {
    background: var(--app-surface-muted) !important;
    color: var(--app-primary-dark);
    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: color-mix(in srgb, var(--app-accent) 8%, var(--app-surface)) !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;
}

label,
.form-label,
.app-form-label {
    max-width: 100%;
    min-width: 0;
}

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;
    }
}

/* Keep legacy Bootstrap-era mobile rules from stretching every action. */
@media (max-width: 768px) {
    body.linces-app .btn:not(.w-100):not(.btn-block),
    body.linces-app button:not(.w-100):not(.btn-block),
    body.linces-app input[type="button"]:not(.w-100):not(.btn-block),
    body.linces-app input[type="submit"]:not(.w-100):not(.btn-block) {
        width: auto;
    }

    body.linces-app .btn-toggle:not(.w-100):not(.btn-block) {
        flex: 0 1 auto;
        min-width: 0 !important;
        width: auto;
        max-width: 100%;
    }

    body.linces-app .d-grid > .btn,
    body.linces-app .d-grid > button,
    body.linces-app .btn.w-100,
    body.linces-app button.w-100,
    body.linces-app input.w-100[type="button"],
    body.linces-app input.w-100[type="submit"] {
        width: 100% !important;
    }
}

/* 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; }