/* =====================================================================
   Patient profile > Communication Logs > Call History tab
   Mirrors the Call Center (telnyxCallHistorypopup) list design.
   Prefixed pch- so nothing here can clash with the popup's ehnote-ch-*.
   ===================================================================== */

/* ---- sub tabs (Communication | Call History) ---- */
.pch-subtabs {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pch-subtabs > li > a {
    display: block;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #656565;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.pch-subtabs > li > a:hover {
    color: #1D5558;
    text-decoration: none;
}

.pch-subtabs > li.active > a {
    color: #1D5558;
    border-bottom-color: #1D5558;
}

/* ---- stat cards ---- */
.pch-stats {
    display: flex;
    gap: 10px;
    padding: 8px 10px 0 10px;
}

.pch-stat {
    flex: 1;
    background: #F7F7F7;
    border: 1px solid #E4E4E4;
    border-radius: 6px;
    padding: 10px 14px;
    min-width: 0;
}

.pch-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: #656565;
}

.pch-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #1D1D1D;
    line-height: 30px;
}

.pch-stat-value.pch-green {
    color: #1BA345;
}

.pch-stat-value.pch-red {
    color: #C71D27;
}

/* ---- filter bar ---- */
.pch-filters {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    background: #F7981C1A;
    border: 1px solid #E4E4E4;
    border-radius: 4px;
    padding: 8px 10px;
    margin: 8px 10px 0 10px;
}

.pch-filters .form__group {
    margin-bottom: 0;
    min-width: 150px;
}

/* ---- direction / status pills ---- */
.pch-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px 0 10px;
}

.pch-pills button {
    border: 1px solid #DEDEDE;
    background: #FFFFFF;
    color: #656565;
    border-radius: 16px;
    padding: 5px 16px;
    font-size: 13px;
    font-weight: 500;
}

.pch-pills button.active {
    border-color: #1BA345;
    background: #EAF7EE;
    color: #1BA345;
}

/* ---- rows ---- */
.pch-table {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.pch-thead,
.pch-row {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #EEEEEE;
}

.pch-thead {
    background: #FAFAFA;
    font-weight: 600;
    color: #1D1D1D;
    font-size: 13px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.pch-row {
    font-size: 13px;
    color: #1D1D1D;
}

.pch-row:hover {
    background: #FAFBFC;
}

.pch-col-icon { width: 46px; flex: none; }
.pch-col-caller { flex: 1 1 22%; min-width: 0; }
.pch-col-time { flex: 0 0 13%; }
.pch-col-dur { flex: 0 0 8%; }
.pch-col-by { flex: 0 0 13%; }
.pch-col-log { flex: 0 0 19%; min-width: 0; }
.pch-col-status { flex: 0 0 12%; }
.pch-col-action { flex: 0 0 90px; text-align: right; }

/* Log column: the remarks written for this call, so the log does not have to be
   hunted for over on the Communication tab. Clamped to two lines - the full text
   is in a hover popover, so clamping loses nothing and every row keeps its height
   however much was typed. */
.pch-nolog { color: #9CA3AF; }

.pch-log-cell {
    display: block;
    min-width: 0;
    cursor: pointer;
}

.pch-log-note {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    color: #1F2937;
    word-break: break-word;
}

.pch-log-muted { color: #9CA3AF; }

/* carries the follow-up date AND its remarks, so it clamps like the line above */
.pch-log-sub {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    color: #B45309;
    margin-top: 2px;
    word-break: break-word;
}

/* Shared by every clamped remarks cell - the patient Call History Log column, the
   Call Center Log column and the Follow-Ups remarks. It lives here rather than in
   the Call Center template because the popover is append-to-body, so it renders
   outside whichever panel opened it, and index.html always has this file. */
.ehnote-notes-popover {
    max-width: 360px;
}

.ehnote-notes-popover .popover-content {
    font-size: 12px;
    line-height: 1.5;
    color: #1F2937;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 240px;
    overflow-y: auto;
}

.pch-name {
    font-weight: 600;
    color: #1D1D1D;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pch-sub {
    font-size: 12px;
    color: #8A8A8A;
    margin-top: 2px;
}

.pch-dir.pch-dir-out { color: #1BA345; }
.pch-dir.pch-dir-in { color: #2E6FE0; }

/* status dot in the first column */
.pch-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #EFEFEF;
    color: #8A8A8A;
    font-size: 12px;
}

.pch-dot.dot-answered,
.pch-dot.dot-out { background: #EAF7EE; color: #1BA345; }
.pch-dot.dot-missed { background: #FDECEC; color: #C71D27; }
.pch-dot.dot-noanswer { background: #FFF4E5; color: #B26A00; }

/* ---- status badge ---- */
.pch-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    background: #EFEFEF;
    color: #656565;
}

.pch-badge.badge-answered { background: #EAF7EE; color: #1BA345; }
.pch-badge.badge-missed { background: #FDECEC; color: #C71D27; }
.pch-badge.badge-noanswer { background: #F2F2F2; color: #767676; }

/* ---- actions ---- */
.pch-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

.pch-callbtn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #F0C48A;
    background: #FFF7EC;
    color: #E28B00;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pch-callbtn:hover:enabled {
    background: #E28B00;
    color: #FFFFFF;
}

.pch-callbtn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.pch-morebtn {
    border: 0;
    background: transparent;
    color: #656565;
    padding: 4px 8px;
}

.pch-menu > li > a {
    cursor: pointer;
    padding: 6px 14px;
    display: block;
    font-size: 13px;
}

.pch-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 0;
    color: #4A4A4A;
}

/* Count next to a pill label: same number the list shows for that pill in the
   selected date range, so the two can be read against each other at a glance. */
.pch-pills button .pch-pill-count {
    margin-left: 5px;
    font-weight: 600;
    opacity: .75;
}

/* The range control sets its own width through .input__fromTo--; the filter row
   only has to stop it collapsing next to the buttons. */
.pch-filters .form__group--1 {
    margin-bottom: 0;
    min-width: 260px;
}


/* Call recording - the button on an answered row, and the player it opens */
.pch-recbtn {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: #EFF6FF;
    color: #2563EB;
    cursor: pointer;
    flex-shrink: 0;
}

.pch-recbtn:hover,
.pch-recbtn.is-open {
    background: #2563EB;
    color: #FFFFFF;
}

.pch-rec {
    padding: 10px 12px 12px 56px;
    background: #F9FAFB;
    border-bottom: 1px solid #F3F4F6;
}

.pch-rec-msg {
    font-size: 13px;
    color: #6B7280;
}

.pch-rec-msg i {
    margin-right: 6px;
}

.pch-rec-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pch-rec-item > i {
    color: #2563EB;
}

.pch-rec-item audio {
    height: 36px;
    width: 360px;
    max-width: 100%;
}

.pch-rec-saved {
    font-size: 12px;
    color: #6B7280;
}


/* Busy and Cancelled: distinct from Failed, which is ours going wrong */
.pch-badge.badge-busy {
    background: #FEF3C7;
    color: #92400E;
}

.pch-badge.badge-cancelled {
    background: #E5E7EB;
    color: #4B5563;
}

.pch-dot.dot-busy {
    background: #F59E0B;
}

.pch-dot.dot-cancelled {
    background: #9CA3AF;
}