/* ==========================================================================
   PHC - Shared responsive/mobile UI layer
   Used by:
     application/views/patients/view_single_patient_profile.php
     application/views/patients/view_edit_single_patient_profile.php
     application/views/admin/patient/view_edit_single_patient_profile.php

   Bootstrap 3 compatible. Works on both the public theme and the
   Gentelella admin theme. Everything is namespaced with .phc- so it can
   never leak into pages that do not opt in.
   ========================================================================== */

:root {
    --phc-accent: #1b8a5a;
    --phc-accent-dark: #146f48;
    --phc-accent-soft: #e8f5ee;
    --phc-ink: #22303c;
    --phc-muted: #6b7c8a;
    --phc-line: #dfe6ec;
    --phc-bg: #f4f7f9;
    --phc-radius: 6px;
}

/* --------------------------------------------------------------------------
   1. Page shell
   -------------------------------------------------------------------------- */

.phc-page {
    color: #22303c;
    color: var(--phc-ink);
}

/* The legacy markup wraps pages in .well.well-lg, which adds a heavy inset
   box plus 24px of padding that wastes most of a phone screen. */
.phc-page.well,
.phc-page .well {
    background: #fff;
    border: 1px solid #dfe6ec;
    border: 1px solid var(--phc-line);
    border-radius: 6px;
    border-radius: var(--phc-radius);
    box-shadow: none;
    padding: 18px;
}

.phc-page legend,
.phc-page .phc-title {
    font-size: 20px;
    font-weight: 600;
    color: #22303c;
    color: var(--phc-ink);
    border: 0;
    border-bottom: 2px solid #1b8a5a;
    border-bottom: 2px solid var(--phc-accent);
    display: inline-block;
    width: auto;
    padding-bottom: 6px;
    margin-bottom: 18px;
}

/* Section heading inside a tab (was <center><h4>) */
.phc-page .phc-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #22303c;
    color: var(--phc-ink);
    margin: 4px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #dfe6ec;
    border-bottom: 1px solid var(--phc-line);
}

.breadcrumb {
    background: transparent;
    padding: 8px 0;
    margin-bottom: 8px;
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   2. Cards
   -------------------------------------------------------------------------- */

.phc-card {
    background: #fff;
    border: 1px solid #dfe6ec;
    border: 1px solid var(--phc-line);
    border-radius: 6px;
    border-radius: var(--phc-radius);
    margin-bottom: 16px;
    overflow: hidden;
}

.phc-card > .phc-card-head {
    padding: 12px 16px;
    border-bottom: 1px solid #dfe6ec;
    border-bottom: 1px solid var(--phc-line);
    background: #fafcfd;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6b7c8a;
    color: var(--phc-muted);
}

.phc-card > .phc-card-head .phc-card-head-action {
    float: right;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.phc-card > .phc-card-body {
    padding: 16px;
}

.phc-card > .phc-card-body.phc-flush {
    padding: 0;
}

/* --------------------------------------------------------------------------
   3. Patient identity header
   -------------------------------------------------------------------------- */

.phc-patient-head {
    display: block;
    background: #fff;
    border: 1px solid #dfe6ec;
    border: 1px solid var(--phc-line);
    border-left: 4px solid #1b8a5a;
    border-left: 4px solid var(--phc-accent);
    border-radius: 6px;
    border-radius: var(--phc-radius);
    padding: 14px 16px;
    margin-bottom: 16px;
    overflow: hidden;
}

.phc-patient-head .phc-avatar {
    float: left;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #dfe6ec;
    border: 2px solid var(--phc-line);
    background: #fff;
    margin-right: 14px;
}

.phc-patient-head .phc-identity {
    overflow: hidden;
}

.phc-patient-head .phc-name {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px;
    line-height: 1.25;
    word-break: break-word;
}

.phc-chips {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
}

.phc-chips > li {
    display: inline-block;
    font-size: 12px;
    line-height: 18px;
    background: #f0f4f7;
    color: #4a5b69;
    border-radius: 12px;
    padding: 2px 10px;
    margin: 0 6px 6px 0;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.phc-chips > li .phc-chip-label {
    color: #8b9aa6;
    margin-right: 4px;
}

.phc-chips > li.phc-chip-accent {
    background: #e8f5ee;
    background: var(--phc-accent-soft);
    color: #146f48;
    color: var(--phc-accent-dark);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   4. Tab navigation (round icon tabs -> scrollable labelled strip)
   -------------------------------------------------------------------------- */

.phc-tabstrip {
    position: relative;
}

/* Desktop keeps the existing round icon tabs (they have title tooltips), so
   the text label is a phone-only affordance. */
.phc-tablabel {
    display: none;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    color: #6b7c8a;
    color: var(--phc-muted);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board .nav-tabs > li.active .phc-tablabel {
    color: #146f48;
    color: var(--phc-accent-dark);
    font-weight: 600;
}

/* Phone/tablet: the 9 round tabs squeeze to ~30px and become untappable.
   Turn the strip into a horizontally scrollable row of real, labelled,
   44px-tall touch targets. */
@media (max-width: 767px) {
    .board > div.board-inner {
        background: #fff;
        border-bottom: 1px solid #dfe6ec;
        border-bottom: 1px solid var(--phc-line);
    }

    .board .nav-tabs {
        display: block;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        border-bottom: 0;
        margin: 0;
        padding: 6px 4px;
        scrollbar-width: none;
    }

    .board .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .board .nav-tabs > li,
    .board .nav-tabs > li.active {
        display: inline-block;
        float: none;
        width: auto;
        padding: 0;
        margin: 0 4px;
    }

    .board .nav-tabs > li > a {
        width: auto;
        height: auto;
        min-width: 62px;
        margin: 0;
        padding: 6px 10px;
        border: 1px solid transparent;
        border-radius: 6px;
        border-radius: var(--phc-radius);
        background: #f4f7f9;
        background: var(--phc-bg);
    }

    .board .nav-tabs > li.active > a,
    .board .nav-tabs > li.active > a:hover,
    .board .nav-tabs > li.active > a:focus {
        background: #e8f5ee;
        background: var(--phc-accent-soft);
        border: 1px solid #1b8a5a;
        border: 1px solid var(--phc-accent);
    }

    .board span.round-tabs {
        position: static;
        display: block;
        width: auto;
        height: auto;
        line-height: 1;
        border: 0 !important;
        background: transparent !important;
        border-radius: 0;
        font-size: 20px;
    }

    /* The decorative connector line and active caret only make sense for the
       circular desktop layout. */
    .board .liner,
    .board li:after,
    .board li.active:after {
        display: none;
    }

    .phc-tablabel {
        display: block;
        font-size: 11px;
        margin-top: 3px;
    }
}

/* --------------------------------------------------------------------------
   5. Tables
   -------------------------------------------------------------------------- */

/* Horizontal scroll container for wide data tables. Bootstrap 3's
   .table-responsive only kicks in below 768px; clinical tables here have 20+
   columns and need it at every width. */
.phc-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #dfe6ec;
    border: 1px solid var(--phc-line);
    border-radius: 6px;
    border-radius: var(--phc-radius);
    margin-bottom: 16px;
    background:
        linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center,
        linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0)) left center,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0)) right center;
    background-repeat: no-repeat;
    background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

.phc-table-wrap > .table {
    margin-bottom: 0;
    border: 0;
}

/* Bootstrap 3 only makes .table-responsive scroll below 768px, so on a tablet
   a 30-column checkup table still pushes the page sideways. */
.phc-page .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.phc-table-wrap > .table > thead > tr > th {
    white-space: nowrap;
    border-bottom-width: 1px;
    background: #fafcfd;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #6b7c8a;
    color: var(--phc-muted);
    position: sticky;
    top: 0;
    z-index: 2;
}

.phc-table-wrap > .table > tbody > tr > td {
    vertical-align: middle;
}

.phc-scroll-hint {
    display: none;
    font-size: 12px;
    color: #6b7c8a;
    color: var(--phc-muted);
    margin: -8px 0 8px;
}

@media (max-width: 767px) {
    .phc-scroll-hint {
        display: block;
    }
}

/* Key/value tables (profile facts). On a phone the two-column layout
   collapses into stacked label-over-value rows so nothing is truncated. */
.phc-kv {
    width: 100%;
    margin-bottom: 0;
}

.phc-kv > tbody > tr > td,
.phc-kv > tr > td {
    padding: 10px 12px;
    border-top: 1px solid #eef2f5;
    word-break: break-word;
}

.phc-kv > tbody > tr:first-child > td,
.phc-kv > tr:first-child > td {
    border-top: 0;
}

.phc-kv .phc-kv-label {
    width: 34%;
    color: #6b7c8a;
    color: var(--phc-muted);
    font-weight: 600;
    font-size: 13px;
}

@media (max-width: 767px) {
    .phc-kv,
    .phc-kv > tbody,
    .phc-kv > tbody > tr,
    .phc-kv > tbody > tr > td,
    .phc-kv > tr,
    .phc-kv > tr > td {
        display: block;
        width: 100% !important;
    }

    .phc-kv > tbody > tr,
    .phc-kv > tr {
        padding: 10px 12px;
        border-top: 1px solid #eef2f5;
    }

    .phc-kv > tbody > tr:first-child,
    .phc-kv > tr:first-child {
        border-top: 0;
    }

    .phc-kv > tbody > tr > td,
    .phc-kv > tr > td {
        padding: 0;
        border-top: 0;
    }

    .phc-kv .phc-kv-label {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .03em;
        margin-bottom: 2px;
    }
}

/* --------------------------------------------------------------------------
   5b. Charts

   The Highcharts containers used to carry an inline min-width:500px, which
   pushed the whole page sideways on any phone.
   -------------------------------------------------------------------------- */

.phc-chart {
    width: 100%;
    min-width: 0;
    height: 400px;
    margin: 0 auto 16px;
}

@media (max-width: 991px) {
    .phc-chart {
        height: 340px;
    }
}

@media (max-width: 767px) {
    .phc-chart {
        height: 280px;
    }
}

/* --------------------------------------------------------------------------
   6. Forms
   -------------------------------------------------------------------------- */

.phc-form .form-group {
    margin-bottom: 18px;
}

.phc-form .control-label,
.phc-form .phc-label {
    font-weight: 600;
    color: #4a5b69;
    font-size: 13px;
}

.phc-form .required,
.phc-form .phc-required {
    color: #d9534f;
    margin-left: 2px;
}

.phc-form .form-control {
    /* The admin theme narrows controls inside .form-horizontal. */
    width: 100%;
    border-color: #d3dde5;
    border-radius: 6px;
    border-radius: var(--phc-radius);
    box-shadow: none;
    min-height: 40px;
}

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

.phc-form .form-control:focus {
    border-color: #1b8a5a;
    border-color: var(--phc-accent);
    box-shadow: 0 0 0 3px rgba(27, 138, 90, .12);
}

.phc-form .help-block,
.phc-help {
    font-size: 12px;
    color: #8b9aa6;
    margin-top: 4px;
}

/* Read-only facts shown inside a form (username, patient id, ...) */
.phc-static {
    display: block;
    padding: 9px 12px;
    background: #f4f7f9;
    background: var(--phc-bg);
    border: 1px dashed #d3dde5;
    border-radius: 6px;
    border-radius: var(--phc-radius);
    color: #4a5b69;
    min-height: 40px;
    word-break: break-word;
}

/* Segmented radio groups (gender / marital status) */
.phc-segmented {
    display: block;
    font-size: 0;
}

.phc-segmented > .btn {
    font-size: 14px;
    min-height: 40px;
    padding: 9px 16px;
    margin: 0 6px 6px 0;
    border-radius: 6px !important;
    border-radius: var(--phc-radius) !important;
    border: 1px solid #d3dde5;
    background: #fff;
}

.phc-segmented > .btn.active,
.phc-segmented > .btn:active {
    background: #e8f5ee;
    background: var(--phc-accent-soft);
    border-color: #1b8a5a;
    border-color: var(--phc-accent);
    color: #146f48;
    color: var(--phc-accent-dark);
    box-shadow: none;
    font-weight: 600;
}

@media (max-width: 767px) {
    /* iOS zooms the page in when a focused input's font-size is under 16px. */
    .phc-form .form-control,
    .phc-form .form-control:focus {
        font-size: 16px;
    }

    .phc-form .form-control,
    .phc-segmented > .btn {
        min-height: 44px;
    }

    .phc-segmented {
        display: flex;
        flex-wrap: wrap;
    }

    .phc-segmented > .btn {
        flex: 1 1 30%;
        margin-right: 6px;
    }

    /* Horizontal forms put the label in a floated column; stack instead. */
    .phc-form .control-label {
        text-align: left !important;
        padding-bottom: 6px;
    }
}

/* --------------------------------------------------------------------------
   7. Actions
   -------------------------------------------------------------------------- */

.phc-actions {
    padding-top: 8px;
    border-top: 1px solid #dfe6ec;
    border-top: 1px solid var(--phc-line);
    margin-top: 8px;
    overflow: hidden;
}

.phc-actions .btn {
    min-height: 40px;
}

.phc-btn-primary,
.phc-actions .btn-primary {
    background: #1b8a5a;
    background: var(--phc-accent);
    border-color: #146f48;
    border-color: var(--phc-accent-dark);
    color: #fff;
}

.phc-btn-primary:hover,
.phc-btn-primary:focus,
.phc-actions .btn-primary:hover,
.phc-actions .btn-primary:focus {
    background: #146f48;
    background: var(--phc-accent-dark);
    border-color: #0f5a3a;
    color: #fff;
}

/* On a phone the save button sits below a long form; pin it so it is always
   one tap away. */
@media (max-width: 767px) {
    .phc-actions.phc-actions-sticky {
        position: sticky;
        position: -webkit-sticky;
        bottom: 0;
        z-index: 20;
        background: #fff;
        margin: 16px 0 0;
        padding: 10px 0;
        border-top: 1px solid #dfe6ec;
        border-top: 1px solid var(--phc-line);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
        display: flex;
        gap: 8px;
    }

    .phc-actions.phc-actions-sticky .btn {
        flex: 1 1 auto;
        min-height: 46px;
        float: none !important;
        margin: 0;
    }

    .phc-actions.phc-actions-sticky .btn + .btn {
        margin-left: 8px;
    }
}

/* Toolbars above tables (Add checkup / Add survey ...) */
.phc-toolbar {
    overflow: hidden;
    margin-bottom: 12px;
}

.phc-toolbar .btn {
    min-height: 36px;
}

@media (max-width: 767px) {
    .phc-toolbar .btn {
        display: block;
        width: 100%;
        float: none !important;
        min-height: 44px;
        margin-bottom: 8px;
    }

    /* Row action buttons (view/edit/delete) are btn-xs: too small to hit. */
    .phc-table-wrap .btn-xs {
        padding: 6px 10px;
        font-size: 13px;
        margin: 2px 1px;
    }
}

/* --------------------------------------------------------------------------
   8. Quick links / side panels
   -------------------------------------------------------------------------- */

.phc-linklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.phc-linklist > li {
    border-top: 1px solid #eef2f5;
}

.phc-linklist > li:first-child {
    border-top: 0;
}

.phc-linklist > li > a {
    display: block;
    padding: 12px 16px;
    color: #22303c;
    color: var(--phc-ink);
    text-decoration: none;
}

.phc-linklist > li > a:hover,
.phc-linklist > li > a:focus {
    background: #f4f7f9;
    background: var(--phc-bg);
    color: #146f48;
    color: var(--phc-accent-dark);
}

.phc-linklist > li > a .fa,
.phc-linklist > li > a .glyphicon {
    width: 18px;
    margin-right: 8px;
    color: #1b8a5a;
    color: var(--phc-accent);
}

.phc-linklist > li > a:after {
    content: "\203A";
    float: right;
    color: #b8c4cd;
    font-size: 18px;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   8b. Admin patient profile (admin/patient/profile.php)

   That page pairs a stacked pill nav with a tab-content column. On a phone the
   nav is a full-width list of up to 12 items, so the record itself starts a
   screen and a half down the page.
   -------------------------------------------------------------------------- */

/* Panels on that page get the same card treatment as .phc-card. */
.phc-page .panel.panel-custom {
    border: 1px solid #dfe6ec;
    border: 1px solid var(--phc-line);
    border-radius: 6px;
    border-radius: var(--phc-radius);
    box-shadow: none;
}

.phc-page .panel-custom > .panel-heading {
    background: #fafcfd;
    border-bottom: 1px solid #dfe6ec;
    border-bottom: 1px solid var(--phc-line);
    padding: 12px 16px;
}

.phc-page .panel-custom > .panel-heading .panel-title {
    font-size: 15px;
    font-weight: 600;
    color: #22303c;
    color: var(--phc-ink);
    overflow: hidden;
}

.phc-patient-head .phc-identity-actions {
    margin-top: 4px;
}

@media (min-width: 768px) {
    .phc-patient-head .phc-identity-actions {
        float: right;
        margin-top: -34px;
    }
}

/* Tablet: the nav column was col-sm-2 (~120px), too narrow for its labels. */
@media (min-width: 768px) {
    .phc-sidenav .nav-stacked > li > a {
        padding: 9px 10px;
        font-size: 13px;
    }

    .phc-sidenav .nav-stacked > li > a .fa {
        width: 16px;
        margin-right: 6px;
    }
}

@media (max-width: 767px) {
    /* Page heading and the patient-ID search fought over one row. */
    .page-title {
        height: auto;
        display: block;
        margin-bottom: 10px;
    }

    .page-title .title_left,
    .page-title .title_right {
        width: 100%;
        float: none;
        text-align: left;
    }

    .page-title .title_left h3 {
        font-size: 18px;
        margin: 0 0 10px;
    }

    .page-title .title_right .top_search {
        float: none !important;
        width: 100%;
        padding: 0;
        margin-bottom: 6px;
    }

    .phc-sidenav {
        /* Sticks to the top so switching section never means scrolling back
           past a long checkup table first. */
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        z-index: 30;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 14px;
        background: #fff;
    }

    .phc-sidenav .nav-stacked {
        display: flex;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 6px 8px;
        background: #fff;
        border-top: 1px solid #dfe6ec;
        border-top: 1px solid var(--phc-line);
        border-bottom: 1px solid #dfe6ec;
        border-bottom: 1px solid var(--phc-line);
        scrollbar-width: none;
    }

    .phc-sidenav .nav-stacked::-webkit-scrollbar {
        display: none;
    }

    .phc-sidenav .nav-stacked > li,
    .phc-page .phc-sidenav .nav > li.active {
        float: none;
        flex: 0 0 auto;
        background: transparent;
    }

    .phc-sidenav .nav-stacked > li + li {
        margin-top: 0;
        margin-left: 6px;
    }

    .phc-sidenav .nav-stacked > li > a {
        min-width: 74px;
        min-height: 54px;
        padding: 7px 10px;
        border-radius: 6px;
        border-radius: var(--phc-radius);
        background: #f4f7f9;
        background: var(--phc-bg);
        color: #4a5b69;
        font-size: 11px;
        line-height: 1.25;
        text-align: center;
        white-space: normal;
    }

    .phc-sidenav .nav-stacked > li > a .fa {
        display: block;
        font-size: 17px;
        margin: 0 0 3px;
    }

    .phc-page .phc-sidenav .nav-pills > li.active > a,
    .phc-page .phc-sidenav .nav-pills > li.active > a:hover,
    .phc-page .phc-sidenav .nav-pills > li.active > a:focus {
        background-color: #e8f5ee;
        background-color: var(--phc-accent-soft);
        color: #146f48;
        color: var(--phc-accent-dark);
        font-weight: 600;
        box-shadow: inset 0 0 0 1px #1b8a5a;
        box-shadow: inset 0 0 0 1px var(--phc-accent);
    }

    /* Sub-tabs inside a pane (pathology reports) scroll rather than wrap into
       a four-line block. */
    .phc-page .tab-content .nav-tabs {
        display: block;
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .phc-page .tab-content .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .phc-page .tab-content .nav-tabs > li {
        display: inline-block;
        float: none;
    }

    .phc-page .tab-content .nav-tabs > li > a {
        min-width: 0;
        min-height: 40px;
        font-size: 13px;
        margin-right: 4px;
    }

    /* Read-only field pairs in the basic-info panel. The theme keeps these
       half-width even on a phone, so long values spill out of their column.
       Give each pair the full row and put the label above its value. */
    .phc-page .panel-body.form-horizontal > .form-group[class*="col-"] {
        width: 100%;
        float: none;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 12px;
    }

    .phc-page .panel-body.form-horizontal .control-label,
    .phc-page .panel-body.form-horizontal .control-label + div[class*="col-"] {
        float: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .phc-page .panel-body.form-horizontal .control-label {
        text-align: left;
        padding-bottom: 2px;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: #6b7c8a;
        color: var(--phc-muted);
    }

    .phc-page .panel-body.form-horizontal .control-label strong {
        font-weight: 600;
    }

    .phc-page .form-control-static {
        padding-top: 0;
        min-height: 0;
        word-break: break-word;
    }
}

/* --------------------------------------------------------------------------
   8c. Admin sidebar drawer (all admin pages)

   Below 992px the theme sets `.nav-md .left_col { display: none }`, and the
   hamburger swaps the body to `.nav-sm` - a 70px icon-only rail with hover
   flyouts, which is unusable on a touch screen. Instead the hamburger now
   toggles `body.phc-drawer`, which slides the full-width menu in as an
   off-canvas panel. The body keeps its `.nav-md` class throughout, so every
   label and click-to-expand submenu behaves exactly as it does on desktop.
   -------------------------------------------------------------------------- */

.phc-drawer-backdrop {
    display: none;
}

.phc-drawer-close {
    display: none;
}

@media (max-width: 991px) {
    .phc-drawer-backdrop {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(20, 28, 36, .5);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility .2s ease;
    }

    body.phc-drawer .phc-drawer-backdrop {
        opacity: 1;
        visibility: visible;
    }

    /* Rendered but parked off-screen so the panel can animate; visibility
       keeps it out of the tab order and away from touches while closed. */
    body .container.body .col-md-3.left_col,
    body.nav-md .container.body .col-md-3.left_col {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 270px;
        max-width: 84vw;
        margin: 0;
        padding: 0;
        z-index: 9999;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .22s ease, visibility .22s ease;
        box-shadow: 2px 0 18px rgba(0, 0, 0, .35);
    }

    body.phc-drawer .container.body .col-md-3.left_col,
    body.phc-drawer.nav-md .container.body .col-md-3.left_col {
        transform: translateX(0);
        visibility: visible;
    }

    /* Fallback: if this file's JS never runs, the theme's own toggle still
       applies .nav-sm - open the panel for that too, so the menu can never
       become unreachable on a phone. */
    body.nav-sm .container.body .col-md-3.left_col {
        transform: translateX(0);
        visibility: visible;
        width: 270px;
    }

    /* The content column must not reserve space for the panel. */
    body .container.body .right_col,
    body.nav-md .container.body .right_col,
    body.nav-sm .container.body .right_col {
        width: 100%;
        margin-left: 0;
        padding-right: 0;
    }

    body.nav-sm .main_container .top_nav {
        margin-left: 0;
    }

    /* Background must not scroll behind the open panel. */
    body.phc-drawer {
        overflow: hidden;
    }

    /* The panel is its own scroll container; the theme's custom scrollbar
       plugin caps the inner box at a computed height. */
    .container.body .col-md-3.left_col .mCustomScrollBox,
    .container.body .col-md-3.left_col .mCSB_container {
        max-height: none;
        height: auto;
    }

    .container.body .col-md-3.left_col .mCSB_scrollTools {
        display: none;
    }

    /* Give the menu itself room to breathe on a touch screen. */
    .left_col .nav.side-menu > li > a,
    .left_col .nav.child_menu > li > a {
        padding-top: 12px;
        padding-bottom: 12px;
        font-size: 14px;
    }

    .phc-drawer-close {
        display: block;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 2;
        width: 38px;
        height: 38px;
        line-height: 36px;
        padding: 0;
        text-align: center;
        font-size: 20px;
        color: #fff;
        background: rgba(255, 255, 255, .12);
        border: 0;
        border-radius: 50%;
    }

    .phc-drawer-close:focus,
    .phc-drawer-close:hover {
        background: rgba(255, 255, 255, .25);
        color: #fff;
        outline: none;
    }

    /* The hamburger is the drawer handle, so make it a real touch target. */
    .nav_menu .nav.toggle > a#menu_toggle {
        display: inline-block;
        min-width: 44px;
        min-height: 44px;
        line-height: 44px;
        text-align: center;
        cursor: pointer;
    }
}

/* --------------------------------------------------------------------------
   8c-2. Admin top bar (admin/components/top_nav.php)

   The theme pins .top_nav .navbar-right to width:70% at every viewport. On a
   375px screen that is 262px shared by the avatar, the full name, the caret
   and the language flag - so a name like "Muhammad Abdul Rahman Khan" wrapped
   onto three lines, the flag was pushed to a second row and clipped at the
   right edge, and the bar grew to 148px before any content.
   -------------------------------------------------------------------------- */

/* The name lives in the bar on a wide screen and in the dropdown on a narrow
   one; exactly one of the two is visible at a time. Scoped through .top_nav
   because the theme sets `.top_nav .navbar-right li { display: inline-block }`,
   which out-specifies a bare class. */
.top_nav .navbar-right li.phc-username-compact {
    display: none;
}

.nav_menu .phc-flag {
    width: 25px;
    height: auto;
    vertical-align: middle;
}

.top_nav .dropdown-menu.msg_list {
    min-width: 160px;
}

.top_nav .dropdown-menu.msg_list > li > a {
    padding: 10px 16px;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .top_nav .navbar-right {
        width: auto;
        max-width: calc(100% - 60px);   /* leave the hamburger its own space */
        margin: 0;
    }

    /* Keep the whole bar on one line. */
    .nav_menu nav {
        white-space: nowrap;
    }

    .top_nav .navbar-right > li {
        float: none;
        display: inline-block;
        vertical-align: middle;
    }

    /* Avatar and caret only - the name moves into the dropdown. */
    .top_nav .navbar-right .phc-username {
        display: none;
    }

    .top_nav .navbar-right li.phc-username-compact {
        display: block;
        max-width: 70vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 600;
        color: #22303c;
        color: var(--phc-ink);
    }

    .top_nav a.user-profile {
        padding-left: 10px;
        padding-right: 10px;
    }

    .user-profile img {
        margin-right: 4px;
    }

    /* Both menus are opened by a control near the right edge, so anchor them
       there rather than letting them run off-screen. */
    .top_nav .navbar-right .dropdown-menu {
        right: 0;
        left: auto;
        max-width: 92vw;
    }

    .nav_menu .phc-langmenu > a {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Between the phone and the desktop layout the name is shown but capped, so a
   long one cannot push the language menu off the bar. */
@media (min-width: 768px) and (max-width: 1199px) {
    .top_nav .navbar-right .phc-username {
        display: inline-block;
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }
}

/* --------------------------------------------------------------------------
   8d. Call request bar (admin/components/call_request.php)
   -------------------------------------------------------------------------- */

.phc-callbar {
    background: #fff;
    border: 1px solid #dfe6ec;
    border: 1px solid var(--phc-line);
    border-left: 4px solid #d9534f;
    border-radius: 6px;
    border-radius: var(--phc-radius);
    padding: 12px 16px;
    margin-bottom: 16px;
    overflow: hidden;
}

.phc-callbar .phc-callbar-facts {
    overflow: hidden;
}

.phc-callbar .phc-callbar-action {
    float: right;
    margin-left: 16px;
}

.phc-callbar .phc-callbar-action .btn {
    min-height: 40px;
    white-space: normal;
}

/* Skype's injected button sizes itself; just keep it from stretching. */
.phc-callbar #SkypeButton_Call {
    display: inline-block;
    vertical-align: middle;
}

@media (max-width: 767px) {
    /* Stack, and put the patient's details above the button - the action
       markup comes first in source so it can float right on wider screens. */
    .phc-callbar {
        display: flex;
        flex-direction: column;
        padding: 12px;
    }

    .phc-callbar .phc-callbar-facts {
        order: 1;
    }

    .phc-callbar .phc-callbar-action {
        order: 2;
        float: none;
        margin: 12px 0 0;
    }

    .phc-callbar .phc-callbar-action .btn {
        display: block;
        width: 100%;
        min-height: 46px;
    }

    .phc-callbar #SkypeButton_Call {
        display: block;
    }
}

/* --------------------------------------------------------------------------
   8e. MCH checkup entry forms
   -------------------------------------------------------------------------- */

.phc-page .panel-warning > .panel-heading h2,
.phc-page .panel > .panel-heading > h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 4px 0;
}

.phc-page .control-label {
    font-size: 13px;
}

/* Compact patient banner above a checkup form */
.phc-checkup-patient {
    background: #fff;
    border: 1px solid #dfe6ec;
    border: 1px solid var(--phc-line);
    border-left: 4px solid #1b8a5a;
    border-left: 4px solid var(--phc-accent);
    border-radius: 6px;
    border-radius: var(--phc-radius);
    padding: 12px 16px;
    margin-bottom: 16px;
}

.phc-checkup-patient .phc-chips {
    margin: 0;
}

/* Antenatal gestational metadata panel (LMP, EDD, GA, Checkup #).
   Labels sit above the inputs at every breakpoint so the panel never
   collapses into invisible floated columns on a phone. */
.phc-antenatal-meta {
    margin-bottom: 16px;
}

.phc-antenatal-meta .panel-body {
    padding: 16px;
}

.phc-antenatal-meta label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: #4a5b69;
    margin-bottom: 4px;
}

.phc-antenatal-meta .form-control {
    width: 100%;
}

.phc-antenatal-meta .form-group {
    margin-bottom: 14px;
}

@media (max-width: 767px) {
    .phc-antenatal-meta .form-control {
        min-height: 44px;
        font-size: 16px;
    }
}

/* Range hint under a bounded numeric field */
.phc-range {
    display: block;
    font-size: 11px;
    color: #8b9aa6;
    margin-top: 3px;
}

/* A field the browser has rejected, or that our own range check flagged. */
.phc-form .form-group.has-error .form-control {
    border-color: #d9534f;
    box-shadow: 0 0 0 3px rgba(217, 83, 79, .1);
}

.phc-field-error {
    display: block;
    font-size: 12px;
    color: #d9534f;
    margin-top: 4px;
}

/* Conditional follow-up fields (e.g. "how many?" after answering Yes).
   These used to be hidden with visibility:hidden on the wrapper while the
   script toggled visibility on the input, so they never actually appeared. */
.phc-conditional[hidden] {
    display: none !important;
}

/* Form action bar at the bottom of a checkup form */
.phc-formactions {
    overflow: hidden;
    padding: 12px 0 0;
    margin-top: 8px;
    border-top: 1px solid #dfe6ec;
    border-top: 1px solid var(--phc-line);
}

.phc-formactions .btn {
    min-height: 40px;
}

@media (max-width: 767px) {
    /* Below 768px Bootstrap stops giving col-sm and col-md columns a width,
       but the admin theme still floats them - so instead of stacking they
       shrink to fit their content, leaving fields about 88px wide on a 375px
       screen. Give those columns the full row back. Anything that states an
       explicit col-xs width is left alone: that author asked for a
       side-by-side layout on small screens and should get it. */
    .phc-page [class*="col-sm-"]:not([class*="col-xs-"]),
    .phc-page [class*="col-md-"]:not([class*="col-xs-"]),
    .phc-page [class*="col-lg-"]:not([class*="col-xs-"]) {
        width: 100%;
        float: none;
    }
}

/* Same problem one breakpoint up: a column that only states a col-md or col-lg
   width has no width at all between 768 and 991px, so it shrinks to fit there
   too. Columns that also carry a col-sm (or col-xs) class are left alone -
   Bootstrap is already giving those a width at this size. */
@media (min-width: 768px) and (max-width: 991px) {
    .phc-page [class*="col-md-"]:not([class*="col-sm-"]):not([class*="col-xs-"]),
    .phc-page [class*="col-lg-"]:not([class*="col-sm-"]):not([class*="col-xs-"]) {
        width: 100%;
        float: none;
    }
}

@media (max-width: 767px) {

    /* Inline min-heights reserve empty space on a phone. */
    .phc-page .panel-body {
        min-height: 0 !important;
    }

    .phc-page .panel > .panel-heading > h2,
    .phc-page .panel-warning > .panel-heading h2 {
        font-size: 15px;
    }

    /* The icon banners heading each panel are decorative and eat a third of
       the screen. */
    .phc-page .panel-heading .panel-title > img {
        max-height: 56px;
        width: auto;
    }

    .phc-formactions {
        display: flex;
        gap: 8px;
    }

    .phc-formactions .btn {
        flex: 1 1 auto;
        float: none !important;
        min-height: 46px;
        margin: 0;
    }

    .phc-formactions .btn + .btn {
        margin-left: 8px;
    }

    /* USG entries: the fixed 140px label column leaves almost nothing for
       the field on a phone. */
    .phc-page .usg-input-group {
        display: block;
        height: auto;
        overflow: visible;
        margin-bottom: 14px;
    }

    .phc-page .usg-label {
        display: block;
        flex: none;
        margin-bottom: 4px;
    }

    .phc-page .usg-value {
        width: 100%;
        height: 44px;
        font-size: 16px;
    }

    .phc-page .usg-section {
        padding: 12px 0;
    }
}

/* --------------------------------------------------------------------------
   8f. Prescription pages (admin/doctor/*)

   phc_prescription_style.css lays the prescription out as a fixed 780px print
   canvas: a 210px vitals rail floated beside a 540px form. That is right for
   the printable views, so none of it is changed globally - these overrides are
   scoped to .phc-page (only the data-entry screens opt in) and to `screen`, so
   printing keeps the fixed canvas.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 991px) {
    .phc-page #firstDiv,
    .phc-page .prescription_container,
    .phc-page .prescription_header,
    .phc-page .prescription_personal_info_div,
    .phc-page .prescription_date_div,
    .phc-page .report_prescription_body_div {
        width: 100%;
        max-width: 100%;
    }

    .phc-page .prescription_header {
        height: auto;
        overflow: hidden;
        padding-bottom: 8px;
    }

    /* The header's centred blocks are 430px wide, so the clinic name and
       address were clipped inside the narrower canvas. */
    .phc-page .prescription_header_gramhealth,
    .phc-page .prescription_header_text,
    .phc-page .prescription_header_initiative {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .phc-page .prescription_header_gramhealth {
        font-size: 16px;
        line-height: 1.3;
    }

    .phc-page .gramweb_logo {
        float: none;
        width: auto;
        text-align: center;
    }

    .phc-page .prescription_header .site_logo {
        position: static;
        width: auto;
        text-align: center;
    }

    /* The vitals rail and the prescription form stop being columns and
       become sections. */
    .phc-page .report_div,
    .phc-page .prescription_body_div,
    .phc-page .prescription_body_bg_doctor_create_prescription,
    .phc-page .doc_name_div,
    .phc-page .doc_name_div_left {
        float: none;
        width: 100%;
        max-width: 100%;
    }

    .phc-page .prescription_body_bg_doctor_create_prescription {
        padding: 12px;
        /* The whole form was italic at 11px, which is hard going on a phone. */
        font-style: normal;
        font-size: 13px;
    }

    .phc-page .prescription_body_div {
        margin-top: 0;
    }

    /* Vitals read as a two-up grid rather than a single 200px column. */
    .phc-page .report_div {
        margin-top: 12px;
        padding-left: 0;
    }

    .phc-page .report_result_block {
        width: 100%;
        height: auto;
        min-height: 40px;
        font-size: 12px;
        padding: 4px 8px;
        margin-top: 6px;
    }

    .phc-page .drag_div,
    .phc-page .symptoms,
    .phc-page .advice_div {
        float: none;
        width: 100%;
        font-size: 13px;
    }

    .phc-page .drag_div {
        padding: 10px;
    }

    /* The drug row nests three levels of grid columns, so their gutters stack
       up and left the selects ~60px narrower than the row. */
    .phc-page .drag_div [class*="col-"],
    .phc-page .advice_div [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }

    .phc-page .drag_div [class*="col-"] + [class*="col-"] {
        margin-top: 8px;
    }

    .phc-page #preview {
        font-size: 13px;
    }

    /* Selects, token inputs and select2 all need to fill the row. */
    .phc-page .prescription_body_bg_doctor_create_prescription .form-control,
    .phc-page .select2-container,
    .phc-page ul.token-input-list-facebook,
    .phc-page .cc_textarea {
        width: 100% !important;
        max-width: 100%;
    }

    .phc-page .prescription_body_bg_doctor_create_prescription .form-control,
    .phc-page .select2-container .select2-selection--single {
        min-height: 40px;
        font-size: 16px;   /* stops iOS zooming in on focus */
    }

    .phc-page ul.token-input-list-facebook {
        box-sizing: border-box;
    }

    .phc-page ul.token-input-list-facebook input {
        font-size: 16px;
    }
}

@media screen and (max-width: 767px) {
    .phc-page .report_result_block {
        font-size: 13px;
    }

    /* The prescription header table packs seven percentage-width cells into
       one row; let each label/value pair take its own line instead. */
    .phc-page .prescription_personal_info_div .table,
    .phc-page .prescription_personal_info_div .table tbody,
    .phc-page .prescription_personal_info_div .table tr,
    .phc-page .prescription_personal_info_div .table td {
        display: block;
        width: 100% !important;
    }

    .phc-page .prescription_personal_info_div .table tr {
        overflow: hidden;
        border-bottom: 1px solid #eef2f5;
        padding: 4px 0;
    }

    .phc-page .prescription_personal_info_div .table td {
        padding: 2px 0 !important;
    }

    /* Label cell, then value cell, side by side on one line. */
    .phc-page .prescription_personal_info_div .table td:nth-child(odd) {
        float: left;
        width: 42% !important;
        color: #6b7c8a;
        color: var(--phc-muted);
        clear: left;
    }

    .phc-page .prescription_personal_info_div .table td:nth-child(even) {
        float: left;
        width: 58% !important;
    }

    /* The title row and the barcode span the full width. */
    .phc-page .prescription_personal_info_div .table td[colspan],
    .phc-page .prescription_personal_info_div .table td[rowspan] {
        float: none;
        width: 100% !important;
        text-align: center;
    }

    .phc-page .prescription_header .gramweb_logo img,
    .phc-page .prescription_header .site_logo img {
        max-width: 64px;
        height: auto;
    }

    .phc-page .prescription_header .site_logo,
    .phc-page .prescription_header .site_logo img.pull-right {
        float: none !important;
    }
}

/* --------------------------------------------------------------------------
   8g. Non-blocking notices

   Replaces the "value looks unusual" Bootstrap modal that had to be dismissed
   before data entry could continue.
   -------------------------------------------------------------------------- */

.phc-toast-host {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 20000;
    width: 340px;
    max-width: calc(100vw - 24px);
    pointer-events: none;
}

.phc-toast {
    position: relative;
    pointer-events: auto;
    background: #fff;
    border: 1px solid #dfe6ec;
    border: 1px solid var(--phc-line);
    border-left: 4px solid #6b7c8a;
    border-left: 4px solid var(--phc-muted);
    border-radius: 6px;
    border-radius: var(--phc-radius);
    box-shadow: 0 4px 16px rgba(20, 28, 36, .18);
    padding: 12px 34px 12px 14px;
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.4;
    color: #22303c;
    color: var(--phc-ink);
    animation: phc-toast-in .18s ease-out;
}

.phc-toast-warning {
    border-left-color: #f0ad4e;
}

.phc-toast-danger {
    border-left-color: #d9534f;
}

.phc-toast-success {
    border-left-color: #1b8a5a;
    border-left-color: var(--phc-accent);
}

.phc-toast-close {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8b9aa6;
    font-size: 20px;
    line-height: 1;
}

.phc-toast-close:hover,
.phc-toast-close:focus {
    color: #22303c;
    color: var(--phc-ink);
    outline: none;
}

.phc-toast-out {
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .2s ease, transform .2s ease;
}

@keyframes phc-toast-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* Inline, field-bound warning. Advisory only - it never blocks the save,
   because an unusual reading can still be the correct one. */
.phc-field-warning {
    display: block;
    margin-top: 4px;
    padding: 6px 8px;
    border-radius: 4px;
    background: #fdf5e6;
    border: 1px solid #f3e0bb;
    color: #8a6120;
    font-size: 12px;
    line-height: 1.35;
}

.phc-field-warning .glyphicon {
    margin-right: 4px;
}

@media (max-width: 767px) {
    .phc-toast-host {
        top: auto;
        bottom: 12px;
        left: 12px;
        right: 12px;
        width: auto;
    }

    .phc-toast {
        font-size: 14px;
    }
}

@media print {
    .phc-toast-host,
    .phc-field-warning {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   8h. Patient list pages
       admin/patient/patient_list_body.php (list + search results)
       patients/view_patient_user_list_details.php

   Search: one quick box (name / barcode / mobile / username) is always in
   view; the specific filters fold behind "Filters" on a phone, and the active
   ones show as removable chips, so the results start right under the search
   instead of a screen and a half down.

   Results: a table on wider screens. On a phone each patient is one compact
   row (~80px instead of a ~390px card - 40 per page made that a 15,000px
   scroll): photo, name, then "barcode · gender · age · blood group", then
   mobile and sites. The whole row opens the profile (the View link is
   stretched over it); Edit / Create stay as their own buttons on the right.

   Deliberately not inside Bootstrap's .table-responsive: below 768px it
   forces white-space:nowrap on every cell.
   -------------------------------------------------------------------------- */

.phc-filter {
    background: #fafcfd;
    border: 1px solid #dfe6ec;
    border: 1px solid var(--phc-line);
    border-radius: 6px;
    border-radius: var(--phc-radius);
    padding: 12px;
    margin-bottom: 12px;
}

/* Quick search row */
.phc-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.phc-quick > * {
    margin: 0 8px 0 0;
}

.phc-quick > :last-child {
    margin-right: 0;
}

.phc-quick-box {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
}

.phc-quick-box .glyphicon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8b9aa6;
    pointer-events: none;
}

.phc-quick-box .form-control {
    width: 100%;
    height: 38px;
    padding-left: 34px;
    border-color: #d3dde5;
    box-shadow: none;
}

.phc-quick .btn {
    height: 38px;
    padding-left: 16px;
    padding-right: 16px;
}

/* Phone-only pieces */
.phc-collapse-toggle,
.phc-filter-chips,
.phc-filter-apply {
    display: none;
}

/* Specific filters (always open on wider screens) */
.phc-collapse-body {
    margin-top: 12px;
}

.phc-filter .row {
    margin-left: -6px;
    margin-right: -6px;
}

.phc-filter .row > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
    margin-bottom: 10px;
}

.phc-filter-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #6b7c8a;
    color: var(--phc-muted);
    margin-bottom: 4px;
}

.phc-filter .phc-filter-fields .form-control {
    width: 100%;
    border-color: #d3dde5;
    box-shadow: none;
}

/* One row of filters on a desktop instead of two. */
@media (min-width: 992px) {
    .phc-filter .phc-filter-fields {
        display: flex;
    }

    .phc-filter .phc-filter-fields > [class*="col-"] {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        float: none;
        margin-bottom: 0;
    }
}

.phc-result-count {
    font-size: 13px;
    color: #6b7c8a;
    color: var(--phc-muted);
    margin: 0 0 8px;
}

.phc-result-count strong {
    color: #22303c;
    color: var(--phc-ink);
}

/* Results table */
.phc-list-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 8px;
}

.phc-patient-list > thead > tr > th {
    white-space: nowrap;
}

.phc-patient-list > tbody > tr > td {
    vertical-align: middle;
}

.phc-patient-list .phc-list-avatar {
    width: 44px;
    height: 44px;
    object-fit: cover;
}

.phc-patient-list .phc-cell-avatar,
.phc-patient-list .phc-cell-actions {
    text-align: center;
}

.phc-patient-list .phc-cell-actions {
    white-space: nowrap;
}

.phc-patient-list .phc-cell-actions .btn {
    margin: 2px 1px;
}

.phc-patient-list .phc-cell-sites .label {
    display: inline-block;
    margin: 1px 2px 1px 0;
    white-space: normal;
    text-align: left;
}

.phc-pager .pagination {
    margin: 8px 0 16px;
}

@media (max-width: 767px) {
    /* ---- search ---- */
    .phc-filter {
        padding: 10px;
    }

    .phc-quick-box {
        flex: 1 1 100%;
        margin: 0 0 8px;
    }

    /* iOS zooms the page in when a focused input's font-size is under 16px. */
    .phc-quick-box .form-control,
    .phc-filter .phc-filter-fields .form-control {
        height: 44px;
        font-size: 16px;
    }

    .phc-quick .btn {
        flex: 1 1 0;
        height: 44px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .phc-collapse-toggle {
        display: inline-block;
    }

    .phc-collapse-toggle[aria-expanded="true"] {
        background: #e8f5ee;
        background: var(--phc-accent-soft);
        border-color: #1b8a5a;
        border-color: var(--phc-accent);
    }

    .phc-filter-chips {
        display: block;
        margin-top: 8px;
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .phc-filter-chips::-webkit-scrollbar {
        display: none;
    }

    .phc-filter-chips > li {
        padding: 0;
        margin-bottom: 0;
    }

    .phc-filter-chips > li > button {
        background: none;
        border: 0;
        color: inherit;
        font: inherit;
        line-height: 20px;
        padding: 6px 12px;
    }

    .phc-collapse-body {
        display: none;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #dfe6ec;
        border-top: 1px solid var(--phc-line);
    }

    .phc-filter.phc-open .phc-collapse-body {
        display: block;
    }

    .phc-filter-apply {
        display: block;
    }

    .phc-filter-apply .btn {
        width: 100%;
        min-height: 44px;
    }

    .phc-filter .phc-toolbar,
    .phc-toolbar {
        margin-bottom: 8px;
    }

    .phc-list-wrap {
        overflow: visible;
    }

    /* ---- results: one compact row per patient ---- */
    .table.phc-patient-list,
    .table.phc-patient-list > tbody {
        display: block;
        width: 100%;
        border: 0;
        background: transparent;
        margin: 0;
    }

    .table.phc-patient-list > thead {
        display: none;
    }

    .table.phc-patient-list > tbody > tr {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        min-height: 66px;
        padding: 10px 12px 10px 64px;
        margin-bottom: 8px;
        background: #fff;
        border: 1px solid #dfe6ec;
        border: 1px solid var(--phc-line);
        border-radius: 6px;
        border-radius: var(--phc-radius);
    }

    .table.phc-patient-list.table-striped > tbody > tr:nth-of-type(odd) {
        background: #fff;
    }

    /* Tapping anywhere on the row opens it. */
    .table.phc-patient-list > tbody > tr:active {
        background: #f4f7f9;
        background: var(--phc-bg);
    }

    .table.phc-patient-list > tbody > tr > td {
        flex: 0 1 auto;
        max-width: 100%;
        padding: 0;
        border: 0;
        font-size: 13px;
        line-height: 1.55;
        color: #6b7c8a;
        color: var(--phc-muted);
        white-space: normal;
        word-break: break-word;
    }

    .table.phc-patient-list > tbody > tr > td.phc-cell-sl,
    .table.phc-patient-list > tbody > tr > td.phc-cell-user,
    .table.phc-patient-list > tbody > tr > td.phc-is-empty {
        display: none;
    }

    .table.phc-patient-list > tbody > tr > td.phc-cell-avatar {
        position: absolute;
        left: 12px;
        top: 11px;
        padding: 0;
    }

    .table.phc-patient-list .phc-list-avatar {
        width: 40px;
        height: 40px;
    }

    .table.phc-patient-list > tbody > tr > td.phc-cell-name {
        flex: 1 1 100%;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.35;
        color: #22303c;
        color: var(--phc-ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* "1000012345 · Female · 27 y · B+" */
    .table.phc-patient-list > tbody > tr > td.phc-cell-meta ~ td.phc-cell-meta::before {
        content: "\00B7";
        margin: 0 6px;
        color: #b5c1ca;
    }

    .table.phc-patient-list > tbody > tr > td.phc-cell-barcode {
        color: #22303c;
        color: var(--phc-ink);
        font-variant-numeric: tabular-nums;
    }

    .table.phc-patient-list > tbody > tr > td.phc-cell-age::after {
        content: " y";
    }

    /* Mobile and sites share the third line. */
    .table.phc-patient-list > tbody > tr::after {
        content: "";
        flex-basis: 100%;
        order: 2;
    }

    .table.phc-patient-list > tbody > tr > td.phc-cell-mobile,
    .table.phc-patient-list > tbody > tr > td.phc-cell-sites {
        order: 3;
    }

    .table.phc-patient-list > tbody > tr > td.phc-cell-mobile {
        margin-right: 8px;
    }

    .table.phc-patient-list > tbody > tr > td.phc-cell-mobile::before {
        font-family: 'Glyphicons Halflings';
        content: "\e145";
        font-size: 10px;
        margin-right: 4px;
        color: #b5c1ca;
    }

    /* A real basis, not 0: with no mobile number before it, a zero-basis cell
       squeezed onto the (full-width) line-break item at 0px and pushed Edit
       onto a fourth line. */
    .table.phc-patient-list > tbody > tr > td.phc-cell-sites {
        flex: 1 1 48px;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .table.phc-patient-list > tbody > tr > td.phc-cell-sites .label {
        font-size: 10px;
        font-weight: 600;
        padding: 2px 6px;
        white-space: nowrap;
    }

    /* Edit / Create close line 3 on the right. The cell stays unpositioned so
       the View link's overlay below still stretches over the whole row. */
    .table.phc-patient-list > tbody > tr > td.phc-cell-actions {
        order: 3;
        margin-left: auto;
        padding: 0 0 0 8px;
    }

    /* The View link covers the whole row but has no box of its own. */
    .table.phc-patient-list .phc-row-link {
        font-size: 0;
        padding: 0;
        border: 0;
        margin: 0;
        min-height: 0;
        background: none;
        box-shadow: none;
    }

    .table.phc-patient-list .phc-row-link::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        border-radius: 6px;
        border-radius: var(--phc-radius);
    }

    .table.phc-patient-list .phc-row-link:focus-visible::after {
        outline: 2px solid #1b8a5a;
        outline: 2px solid var(--phc-accent);
        outline-offset: -2px;
    }

    .table.phc-patient-list .phc-cell-actions .btn:not(.phc-row-link) {
        position: relative;
        z-index: 2;
        min-width: 64px;
        min-height: 36px;
        margin: 0;
        padding: 7px 12px;
        font-size: 13px;
        line-height: 20px;
    }

    .table.phc-patient-list > tbody > tr.phc-empty {
        display: block;
        padding: 16px;
        text-align: center;
    }

    .table.phc-patient-list > tbody > tr.phc-empty > td {
        display: block;
    }

    /* Keep the pager on one line that scrolls, with finger-sized targets. */
    .phc-pager {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .phc-pager .pagination {
        display: flex;
        white-space: nowrap;
    }

    .phc-pager .pagination > li > a,
    .phc-pager .pagination > li > span {
        min-width: 40px;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   8i. Sign-in page (views/sign_in.php)

   Was a half-width Bootstrap panel inside a grey .well with a product photo
   floating beside it. Now one centred card: brand + HealthBox panel on the
   left (desktop only), the form on the right with labelled 46px fields, a
   show-password button and one full-width submit.
   -------------------------------------------------------------------------- */

.phc-auth {
    padding: 8px 0 28px;
}

.phc-auth-card {
    display: flex;
    max-width: 880px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #dfe6ec;
    border: 1px solid var(--phc-line);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(34, 48, 60, .08);
}

.phc-auth-aside {
    flex: 0 0 42%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 28px;
    text-align: center;
    background: #eef6f1;
    background: linear-gradient(160deg, #e8f5ee 0%, #f4f7f9 100%);
    border-right: 1px solid #dfe6ec;
    border-right: 1px solid var(--phc-line);
}

.phc-auth-logo {
    max-width: 200px;
    width: 100%;
    height: auto;
    margin-bottom: 24px;
}

.phc-auth-box {
    max-width: 230px;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.phc-auth-tagline {
    max-width: 260px;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #6b7c8a;
    color: var(--phc-muted);
}

.phc-auth-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 40px 44px 36px;
}

.phc-auth-title {
    margin: 0 0 4px;
    font-size: 26px;
    font-weight: 700;
    color: #22303c;
    color: var(--phc-ink);
}

.phc-auth-sub {
    margin: 0 0 26px;
    font-size: 14px;
    color: #6b7c8a;
    color: var(--phc-muted);
}

.phc-auth-alert {
    padding: 10px 36px 10px 12px;
    margin-bottom: 20px;
    border-radius: 6px;
    border-radius: var(--phc-radius);
    font-size: 14px;
    background-image: none;
}

.phc-auth-alert > .glyphicon {
    margin-right: 6px;
}

.phc-auth-form .form-group {
    margin-bottom: 18px;
}

.phc-auth-form label {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #4a5b69;
}

.phc-auth-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.phc-auth-link {
    font-size: 13px;
    color: #146f48;
    color: var(--phc-accent-dark);
}

.phc-auth-field {
    position: relative;
}

.phc-auth-field > .glyphicon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    color: #8b9aa6;
    pointer-events: none;
}

.phc-auth-field .form-control {
    height: 46px;
    padding-left: 40px;
    /* 16px also stops iOS from zooming in on focus. */
    font-size: 16px;
    border-color: #d3dde5;
    border-radius: 6px;
    border-radius: var(--phc-radius);
    box-shadow: none;
}

.phc-auth-field .form-control:focus {
    border-color: #1b8a5a;
    border-color: var(--phc-accent);
    box-shadow: 0 0 0 3px rgba(27, 138, 90, .15);
}

.phc-auth-field.phc-has-reveal .form-control {
    padding-right: 50px;
}

.phc-auth-reveal {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 42px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    color: #6b7c8a;
    color: var(--phc-muted);
}

.phc-auth-reveal:hover,
.phc-auth-reveal:focus {
    color: #22303c;
    color: var(--phc-ink);
    background: #f4f7f9;
    background: var(--phc-bg);
}

.phc-auth-form .has-error .form-control {
    border-color: #d9534f;
}

.phc-auth-form .help-block {
    margin: 6px 0 0;
    font-size: 13px;
}

.phc-auth-caps {
    margin: 6px 0 0;
    font-size: 12px;
    color: #8a6d3b;
}

.phc-auth-remember {
    margin: 4px 0 22px;
}

.phc-auth-remember label {
    font-size: 14px;
    font-weight: 400;
    color: #4a5b69;
}

.phc-auth-submit,
.phc-auth-submit:hover,
.phc-auth-submit:focus {
    width: 100%;
    height: 48px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    border-radius: var(--phc-radius);
    /* bootstrap-theme.css puts a gradient on .btn-primary */
    background-image: none;
    text-shadow: none;
}

.phc-auth-submit[disabled] {
    opacity: .75;
}

.phc-spin {
    animation: phc-spin 1s linear infinite;
}

@keyframes phc-spin {
    to {
        transform: rotate(360deg);
    }
}

.phc-auth-foot {
    margin: 22px 0 0;
    padding-top: 16px;
    border-top: 1px solid #dfe6ec;
    border-top: 1px solid var(--phc-line);
    text-align: center;
    font-size: 14px;
    color: #6b7c8a;
    color: var(--phc-muted);
}

.phc-auth-third {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.phc-auth-third > li {
    display: inline-block;
    margin: 0 4px;
}

@media (max-width: 767px) {
    .phc-auth {
        padding: 0 0 16px;
    }

    /* On a phone the card is the page: no frame, no photo. */
    .phc-auth-card {
        display: block;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .phc-auth-main {
        padding: 18px 2px 8px;
    }

    .phc-auth-title {
        font-size: 22px;
    }

    .phc-auth-sub {
        margin-bottom: 20px;
    }
}

/* --------------------------------------------------------------------------
   9. Back to top
   -------------------------------------------------------------------------- */

.phc-totop {
    position: fixed;
    right: 14px;
    /* Clears the sticky save bar on the edit screens. */
    bottom: 72px;
    z-index: 1030;
    width: 44px;
    height: 44px;
    line-height: 42px;
    text-align: center;
    border-radius: 50%;
    background: rgba(34, 48, 60, .78);
    color: #fff;
    border: 0;
    font-size: 18px;
    display: none;
    padding: 0;
}

.phc-totop:hover,
.phc-totop:focus {
    background: #22303c;
    background: var(--phc-ink);
    color: #fff;
    outline: none;
}

.phc-totop.phc-visible {
    display: block;
}

@media (min-width: 768px) {
    .phc-totop {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   10. Small-screen general clean-up
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .phc-page.well,
    .phc-page .well {
        padding: 12px;
        margin-bottom: 12px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .phc-page legend,
    .phc-page .phc-title {
        font-size: 17px;
        margin-bottom: 14px;
    }

    .breadcrumb {
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 12px;
    }

    .breadcrumb > li {
        display: inline-block;
        float: none;
    }

    /* Legacy inline font-size:11px on data tables is unreadable on a phone. */
    .phc-table-wrap > .table {
        font-size: 13px !important;
    }

    .phc-card > .phc-card-body {
        padding: 12px;
    }

    .phc-patient-head .phc-avatar {
        width: 52px;
        height: 52px;
        margin-right: 12px;
    }

    .phc-patient-head .phc-name {
        font-size: 16px;
    }
}

@media print {
    .phc-totop,
    .phc-toolbar,
    .phc-scroll-hint,
    .phc-actions {
        display: none !important;
    }

    .phc-table-wrap {
        overflow: visible;
        border: 0;
        background: none;
    }
}