/*  CRM > Patient Activation
 *
 *  Scoped to .pat-activation so none of it reaches the rest of the app. Same shape as
 *  CRM > AI Calls (css/aicalls.css): a dense work queue on the left, one patient's
 *  detail on the right. The values are the design's own - the generic utility classes
 *  could not carry the care-gap chips or the priority dots it needs.
 */

/* A definite height, not 100%: one of the CRM wrappers above this screen is height:auto,
   so 100% resolved to "as tall as the rows" - the list never scrolled and the pager was
   pushed below the window. 44px is the fixed #header__main-- (css/s1.css). */
.pat-activation {
    background: #f4f5f6;
    color: #1d2327;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 44px);
    overflow: hidden;
}

/* On a short window the filters and tiles scroll away, and the list keeps its own
   scroller and pager underneath them (see .pa-card min-height). */
.pat-activation .pa-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

.pat-activation .pa-head,
.pat-activation .pa-parambar,
.pat-activation .pa-kpis { flex: 0 0 auto; }

/* ── Header ── */

.pat-activation .pa-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
}

.pat-activation .pa-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1d2327;
}

.pat-activation .pa-subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    color: #5b6770;
}

.pat-activation .pa-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* ── Parameter bar: location, doctor, date window ── */

.pat-activation .pa-parambar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #dfe3e6;
    border-radius: 10px;
}

.pat-activation .pa-field-location select { min-width: 190px; }
.pat-activation .pa-field-doctor select { min-width: 190px; }
.pat-activation .pa-field-date input { min-width: 150px; background: #ffffff; }

/* ── KPI tiles ── */

.pat-activation .pa-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.pat-activation .pa-kpi {
    background: #ffffff;
    border: 1px solid #dfe3e6;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pat-activation .pa-kpi-label {
    font-size: 12px;
    color: #5b6770;
}

.pat-activation .pa-kpi-value {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
}

/* ── The card holding chips, filters, list and panel ── */

.pat-activation .pa-card {
    background: #ffffff;
    border: 1px solid #dfe3e6;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 460px;
    flex: 1 1 auto;
}

.pat-activation .pa-tabs,
.pat-activation .pa-filters { flex: 0 0 auto; }

.pat-activation .pa-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 16px;
    border-bottom: 1px solid #dfe3e6;
}

.pat-activation .pa-tab {
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid #cfd5d9;
    background: #ffffff;
    color: #3f4a52;
    font-size: 13px;
    cursor: pointer;
}

.pat-activation .pa-tab.active {
    border-color: #15232e;
    background: #15232e;
    color: #ffffff;
    font-weight: 500;
}

.pat-activation .pa-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    align-items: flex-end;
    border-bottom: 1px solid #eceef0;
}

.pat-activation .pa-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

.pat-activation .pa-field > label {
    font-size: 12px;
    font-weight: 400;
    color: #5b6770;
    margin: 0;
}

.pat-activation .pa-field select,
.pat-activation .pa-field input[type="text"] {
    height: 36px;
    border: 1px solid #cfd5d9;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 13px;
    background: #ffffff;
    color: #1d2327;
    box-sizing: border-box;
}

.pat-activation .pa-field select:focus,
.pat-activation .pa-field input[type="text"]:focus {
    outline: none;
    border-color: #1c5754;
}

.pat-activation .pa-field-search { flex: 1 1 260px; }
.pat-activation .pa-field-search input { width: 100%; }
.pat-activation .pa-field-sort select { min-width: 220px; }

/* nowrap matters: in a wrapping flex row each line is as tall as its tallest item, so the
   list grew to the height of all its rows and ran out of the card instead of scrolling.
   On one line the list and the panel are held to the card's height and scroll inside it. */
.pat-activation .pa-split {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

/* ── List ── */

.pat-activation .pa-list {
    flex: 1 1 680px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pat-activation .pa-scroll {
    overflow: auto;
    min-height: 0;
    flex: 1 1 auto;
}

.pat-activation .pa-grid {
    min-width: 900px;
}

.pat-activation .pa-row {
    display: grid;
    grid-template-columns: 1.1fr 2fr 1fr 1.1fr .8fr 1fr;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 16px;
    border-bottom: 1px solid #eceef0;
    background: #ffffff;
    cursor: pointer;
}

.pat-activation .pa-head-row {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f1f3f4;
    border-bottom: 1px solid #dfe3e6;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #5b6770;
    cursor: default;
    align-items: center;
}

.pat-activation .pa-row-selected {
    background: #eef6f5;
    box-shadow: inset 3px 0 0 #1c5754;
}

.pat-activation .pa-cell { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pat-activation .pa-name { font-size: 14px; font-weight: 600; }
.pat-activation .pa-sub { font-size: 12px; color: #5b6770; line-height: 1.45; }
.pat-activation .pa-strong { font-size: 13px; font-weight: 500; color: #1d2327; }

/* ── Care-gap chips ── */

.pat-activation .pa-gap {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    width: fit-content;
}

.pat-activation .pa-gap-followup { background: #fde8e7; color: #8f1d14; }
.pat-activation .pa-gap-surgery { background: #e8eef8; color: #1d4f91; }
.pat-activation .pa-gap-glasses { background: #e9edf1; color: #3f4a52; }
.pat-activation .pa-gap-retina { background: #fdeee0; color: #8a4b12; }
.pat-activation .pa-gap-glaucoma { background: #f1e9f8; color: #5b2c86; }
.pat-activation .pa-gap-diabetic { background: #e6f4ec; color: #17693a; }

/* ── Priority ── */

.pat-activation .pa-priority {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #3f4a52;
}

.pat-activation .pa-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.pat-activation .pa-dot-high { background: #d93025; }
.pat-activation .pa-dot-medium { background: #e8930c; }
.pat-activation .pa-dot-low { background: #9aa3aa; }

.pat-activation .pa-muted { font-size: 13px; color: #5b6770; }

/* flex: 0 0 auto so the row count and the pager keep their place at the bottom of the
   list however short the card gets - they must never be the thing that gets squeezed */
.pat-activation .pa-foot {
    flex: 0 0 auto;
    padding: 8px 16px;
    font-size: 12px;
    color: #5b6770;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-top: 1px solid #eceef0;
    background: #ffffff;
}

/* uib-pagination renders a <ul class="pagination"> with its own large margins */
.pat-activation .pa-foot .EH-pagination .pagination {
    margin: 0;
}

.pat-activation .pa-empty {
    padding: 40px 16px;
    text-align: center;
    font-size: 14px;
    color: #5b6770;
}

.pat-activation .pa-empty img {
    max-width: 180px;
    opacity: .9;
}

.pat-activation .pa-empty-text {
    margin: 12px 0 0;
    font-size: 14px;
    color: #5b6770;
}

/* ── Buttons ── */

.pat-activation .pa-btn {
    height: 36px;
    padding: 0 14px;
    border: 1px solid #cfd5d9;
    border-radius: 6px;
    background: #ffffff;
    color: #1c5754;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.pat-activation .pa-btn:hover { border-color: #1c5754; }

.pat-activation .pa-btn-dark {
    height: 36px;
    padding: 0 14px;
    border: none;
    border-radius: 6px;
    background: #1c5754;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

/* ── Side panel ── */

.pat-activation .pa-panel {
    flex: 0 1 400px;
    min-width: 310px;
    border-left: 1px solid #dfe3e6;
    background: #fbfcfc;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: auto;
}

.pat-activation .pa-panel-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #5b6770;
}

.pat-activation .pa-panel-name { margin: 2px 0 0; font-size: 17px; font-weight: 600; }
.pat-activation .pa-panel-meta { font-size: 13px; color: #5b6770; }

.pat-activation .pa-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border: 1px solid #dfe3e6;
    border-radius: 8px;
    background: #ffffff;
}

.pat-activation .pa-box-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.pat-activation .pa-box-label { font-size: 12px; color: #5b6770; }
.pat-activation .pa-box-value { font-size: 13px; font-weight: 600; }
.pat-activation .pa-box-text { font-size: 13px; color: #3f4a52; line-height: 1.5; }

.pat-activation .pa-section-title {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
}

.pat-activation .pa-history {
    margin: 0;
    padding-left: 16px;
    font-size: 13px;
    color: #3f4a52;
    line-height: 1.6;
}

.pat-activation .pa-nextstep {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border: 1px solid #dfe3e6;
    border-radius: 8px;
    background: #f4f6f7;
}

.pat-activation .pa-panel-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.pat-activation .pa-btn-primary {
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    border-radius: 8px;
    background: #1c5754;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.pat-activation .pa-btn-ghost {
    height: 40px;
    border: 1px solid #cfd5d9;
    border-radius: 8px;
    background: #ffffff;
    color: #1d2327;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.pat-activation .pa-btn-ghost:hover { border-color: #1c5754; }

.pat-activation .pa-decline {
    align-self: center;
    border: none;
    background: none;
    padding: 0;
    font-size: 13px;
    color: #5b6770;
    text-decoration: underline;
    cursor: pointer;
}

/* Narrow screens: the panel goes under the list. The list keeps a fixed height with its
   own scroller and pager, and the card scrolls to reach the panel below it. */
@media (max-width: 1200px) {
    .pat-activation .pa-split { flex-direction: column; overflow-y: auto; }
    .pat-activation .pa-list { flex: 0 0 auto; height: 480px; }
    .pat-activation .pa-panel {
        flex: 0 0 auto;
        min-width: 0;
        overflow: visible;
        border-left: none;
        border-top: 1px solid #dfe3e6;
    }
}

/* a field the proc has no data for yet reads as missing, not as a value */
.pat-activation .pa-box-empty { color: #9aa3aa; font-weight: 400; }

.pat-activation .pa-btn[disabled],
.pat-activation .pa-btn-dark[disabled] { opacity: .55; cursor: not-allowed; }

/* ── Advised by : doctor multi-check, sized and drawn like the selects beside it ── */

.pat-activation .pa-doctor-dropdown { position: relative; }

.pat-activation .pa-doctor-toggle {
    height: 36px;
    min-width: 220px;
    max-width: 280px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid #cfd5d9;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 13px;
    background: #ffffff;
    color: #1d2327;
    text-align: left;
    cursor: pointer;
}

.pat-activation .pa-doctor-toggle span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pat-activation .pa-doctor-toggle i { font-size: 11px; color: #5b6770; }
.pat-activation .pa-doctor-toggle:focus { outline: none; border-color: #1c5754; }

/* the list scrolls inside the menu rather than pushing down the whole screen */
.pat-activation .pa-doctor-menu { min-width: 280px; z-index: 20; }
.pat-activation .pa-doctor-menu .apptsearchdroplist { max-height: 280px; overflow-y: auto; }

/* ── Log outcome popup: the patient's Communication Logs tab ──
   Rendered by $uibModal at the top of the page, outside .pat-activation, so these
   rules carry their own pa-comm- names instead of the .pat-activation scope. */

.pa-comm-popup .modal__header-- h1 {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.pa-comm-popup .pa-comm-patient {
    font-size: 13px;
    font-weight: 400;
    color: #5b6770;
}

/* a fixed height, so the log table scrolls and its pager stays in view */
.pa-comm-popup .pa-comm-body {
    height: 72vh;
    padding: 0;
    overflow: hidden;
}