/*  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-parambar,
.pat-activation .pa-kpis { flex: 0 0 auto; }

/* The page title, its description and the header row that held them are gone - the CRM tab
   strip already names the screen, and the band they occupied was pushing the care gap chips
   onto a second row. Export list / Start outreach campaign moved into the parameter bar. */

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

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

/* margin-left:auto pushes these to the far end of the row, keeping the separation they had
   as header actions. On a narrow window the bar wraps and they simply drop to a new line. */
.pat-activation .pa-parambar-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: auto;
}

.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: 5px;
    padding: 10px 16px;
    border-bottom: 1px solid #dfe3e6;
}

/* Eight chips carrying their full category names have to fit one row, so the chip itself is
   as small as it can be while still reading as a button. The names are deliberately NOT
   abbreviated - they are what tells a user what the chip does - so the size does the work
   instead. nowrap keeps a chip from breaking mid-name if the row does run out of width. */
.pat-activation .pa-tab {
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid #cfd5d9;
    background: #ffffff;
    color: #3f4a52;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

/* The count has to read as a count, not as the last word of the category name - "Missed
   follow-up 12" ran together at one weight and one colour. Bold and the brand teal separate
   it without a badge, which would have cost width the chip row does not have. */
.pat-activation .pa-tab-count {
    margin-left: 3px;
    font-weight: 700;
    color: #1c5754;
}

/* on the selected chip the ground is dark, so the teal would disappear - plain white at full
   weight against the label's softer white does the same job */
.pat-activation .pa-tab.active .pa-tab-count {
    color: #ffffff;
}

.pat-activation .pa-tab.active {
    border-color: #15232e;
    background: #15232e;
    /* slightly off full white, so the count above it reads as the brighter element -
       otherwise both are pure white and only the weight separates them */
    color: rgba(255, 255, 255, 0.85);
    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; }
/* Missed appointment - the only category that is about a day the patient did not turn up
   rather than care that was advised, so it is the one warm neutral in the set. */
.pat-activation .pa-gap-missedappt { background: #fdf0e3; color: #8a5a12; }

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

.pat-activation .pa-btn-ghost[disabled] {
    opacity: .55;
    cursor: not-allowed;
    border-color: #cfd5d9;
}