/* ==========================================================================
   Phone Book - the CJROS call log's totals, colour-coded log and player.
   The directory screens reuse the pharmacy master / grid styles.
   ========================================================================== */

.pb-log { display: flex; gap: 10px; align-items: stretch; }
.pb-left { width: 400px; flex: 0 0 400px; display: flex; flex-direction: column; gap: 8px; }
.pb-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pb-body { min-height: 380px; max-height: 620px; }

.pb-now {
    padding: 22px 10px;
    background: #6a5acd;
    color: #fff;
    font-size: 22px;
    text-align: center;
}

.pb-stats { display: flex; flex-direction: column; gap: 3px; }
.pb-stat { display: grid; grid-template-columns: 1fr 110px 90px; gap: 3px; font-size: 16px; font-weight: 700; }
.pb-stat > * { padding: 6px 8px; }
.pb-stat b { text-align: center; }
.pb-stat-wide { grid-template-columns: 1fr 90px; font-size: 13px; }
.pb-stat-total > * { background: #1e88e5; color: #fff; }
.pb-stat-in > * { background: #8fe38f; }
.pb-stat-out > * { background: #fdfbd8; }
.pb-stat-missed > * { background: #f8b8c0; }

.pb-criteria { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; }
.pb-criteria .entry-input { width: 175px; }

.pb-row-in { background: #9ce89c !important; }
.pb-row-out { background: #fdfbd8 !important; }
.pb-row-missed { background: #f8b8c0 !important; }
.pb-direction { font-weight: 700; text-align: center; }

.pb-player {
    width: 300px;
    flex: 0 0 300px;
    background: #111;
    color: #ddd;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px;
    min-height: 300px;
    align-self: flex-start;
}
.pb-player audio { width: 100%; }
.pb-player-note { font-size: 11px; text-align: center; }

/* The follow-up grid is narrower than the log's: tighter columns so all five fit. */
.pb-left .ph-col-date { width: 112px; }
.pb-left .ph-col-dept { width: 92px; }
.pb-left .ph-col-tiny { width: 40px; text-align: center; }