/* ───────────────────────────────────────────────────────────
   T24 Admin / Platform — advanced components (pm- prefix)
   Depends on tokens.css + dashboard.css. (avoid ad- prefix → adblock)
   ─────────────────────────────────────────────────────────── */

/* env badge + topbar extras */
.pm-env { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-success); border: 1px solid #BBE9CF; background: #E7F7EF; padding: 4px 9px; border-radius: var(--r-pill); }
.pm-cmd { width: 300px; }

/* ── KPI ROW ── */
.pm-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); margin-bottom: 16px; }
.pm-kpi { background: var(--color-white); padding: 18px 20px; }
.pm-kpi .l { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-ink-3); font-weight: 700; }
.pm-kpi .v { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; margin: 10px 0 6px; }
.pm-kpi .d { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.pm-kpi .d.up { color: var(--color-success); } .pm-kpi .d.down { color: var(--color-danger); } .pm-kpi .d.warn { color: #B26A00; }
.pm-kpi svg.spark { width: 100%; height: 26px; margin-top: 10px; display: block; }

/* ── LAYOUT ── */
.pm-grid2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-bottom: 16px; }
.pm-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.pm-card { background: var(--color-white); border: 1px solid var(--color-line); padding: 22px 24px; }
.pm-card.flush { padding: 0; }
.pm-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.pm-card-head h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.pm-card-head .a { font-size: 13px; font-weight: 600; color: var(--color-primary); cursor: pointer; }
.pm-card-head .sub { font-size: 12.5px; color: var(--color-ink-3); }

/* ── AREA CHART ── */
.pm-chart { position: relative; }
.pm-chart svg { width: 100%; height: 180px; display: block; overflow: visible; }
.pm-chart .gl { stroke: var(--color-line); stroke-width: 1; }
.pm-chart .xlab { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--color-ink-3); }
.pm-chart-legend { display: flex; gap: 18px; margin-bottom: 14px; }
.pm-chart-legend span { font-size: 12px; color: var(--color-ink-2); display: inline-flex; align-items: center; gap: 7px; }
.pm-chart-legend .dot { width: 9px; height: 9px; border-radius: 2px; }

/* ── BARS ── */
.pm-bar { display: grid; grid-template-columns: 120px 1fr 56px; gap: 12px; align-items: center; padding: 9px 0; }
.pm-bar .bl { font-size: 13px; color: var(--color-ink-1); font-weight: 500; }
.pm-bar .bt { height: 8px; background: var(--color-bg-soft); border-radius: 99px; overflow: hidden; }
.pm-bar .bt i { display: block; height: 100%; border-radius: 99px; background: var(--color-primary); }
.pm-bar .bt i.pink { background: var(--color-secondary-deep); }
.pm-bar .bv { font-size: 12.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--color-ink-2); }

/* ── ACTIVITY FEED ── */
.pm-feed { display: flex; flex-direction: column; }
.pm-feed-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-line); }
.pm-feed-item:last-child { border-bottom: none; padding-bottom: 0; }
.pm-feed-item .ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.pm-feed-item .ic.ok { background: #E7F7EF; color: var(--color-success); }
.pm-feed-item .ic.new { background: var(--color-secondary-soft); color: var(--color-secondary-deep); }
.pm-feed-item .ic.info { background: var(--color-primary-soft); color: var(--color-primary); }
.pm-feed-item .ic.warn { background: #FFF3E0; color: #B26A00; }
.pm-feed-item .tx { font-size: 13.5px; color: var(--color-ink-1); line-height: 1.45; }
.pm-feed-item .tx b { font-weight: 700; }
.pm-feed-item .tm { font-size: 11.5px; color: var(--color-ink-3); margin-top: 3px; }

/* ── SYSTEM HEALTH ── */
.pm-health { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--color-line); }
.pm-health:last-child { border-bottom: none; }
.pm-health .nm { font-size: 13.5px; font-weight: 500; flex: 1; }
.pm-health .dot { width: 8px; height: 8px; border-radius: 50%; }
.pm-health .dot.ok { background: var(--color-success); } .pm-health .dot.warn { background: #E89B1C; } .pm-health .dot.bad { background: var(--color-danger); }
.pm-health .val { font-size: 12.5px; font-weight: 700; color: var(--color-ink-2); font-variant-numeric: tabular-nums; }

/* ── QUICK ACTIONS ── */
.pm-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pm-tile { border: 1px solid var(--color-line); background: var(--color-white); padding: 18px 20px; display: block; transition: box-shadow .15s ease; cursor: pointer; }
.pm-tile:hover { box-shadow: var(--shadow-1); }
.pm-tile .ic { width: 38px; height: 38px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); display: grid; place-items: center; margin-bottom: 12px; }
.pm-tile .t { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.pm-tile .s { font-size: 12px; color: var(--color-ink-3); margin-top: 3px; }
.pm-tile .q { font-size: 11px; font-weight: 700; color: var(--color-secondary-deep); margin-top: 8px; }

/* ── FILTER BAR ── */
.pm-filter { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.pm-search { flex: 1; min-width: 200px; height: 42px; border: 1.5px solid var(--color-line); border-radius: var(--r-1); display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--color-white); }
.pm-search:focus-within { border-color: var(--color-primary); }
.pm-search svg { color: var(--color-ink-3); flex-shrink: 0; }
.pm-search input { border: none; outline: none; flex: 1; min-width: 0; font-size: 14px; font-family: var(--font-body); background: transparent; }
.pm-select { height: 42px; border: 1.5px solid var(--color-line); border-radius: var(--r-1); padding: 0 14px; font-size: 13px; font-weight: 600; color: var(--color-ink-1); background: var(--color-white); font-family: var(--font-body); cursor: pointer; }
.pm-seg { display: inline-flex; border: 1px solid var(--color-line); border-radius: var(--r-1); overflow: hidden; }
.pm-seg button { padding: 0 14px; height: 42px; font-size: 13px; font-weight: 600; color: var(--color-ink-2); background: var(--color-white); }
.pm-seg button.on { background: var(--color-black); color: var(--color-white); }

/* ── ADVANCED TABLE ── */
.pm-table { width: 100%; border-collapse: collapse; }
.pm-table thead th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-ink-3); font-weight: 700; padding: 0 14px 12px; border-bottom: 1px solid var(--color-line); white-space: nowrap; cursor: pointer; }
.pm-table thead th.r, .pm-table td.r { text-align: right; }
.pm-table thead th .caret { opacity: .4; margin-left: 4px; }
.pm-table tbody td { padding: 13px 14px; border-bottom: 1px solid var(--color-line); font-size: 13.5px; color: var(--color-ink-1); vertical-align: middle; }
.pm-table tbody tr { transition: background .12s ease; }
.pm-table tbody tr:hover { background: var(--color-bg-soft); cursor: pointer; }
.pm-table .who { display: flex; align-items: center; gap: 11px; }
.pm-table .who .av { width: 34px; height: 34px; border-radius: 50%; background: center/cover var(--color-bg-soft); flex-shrink: 0; }
.pm-table .who .nm { font-weight: 600; } .pm-table .who .sub { font-size: 12px; color: var(--color-ink-3); }
.pm-chk { width: 18px; height: 18px; border: 1.5px solid var(--color-line); border-radius: 4px; display: inline-grid; place-items: center; color: transparent; cursor: pointer; vertical-align: middle; }
.pm-chk.on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pm-pill { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap; }
.pm-pill.ok { background: #E7F7EF; color: var(--color-success); }
.pm-pill.warn { background: #FFF3E0; color: #B26A00; }
.pm-pill.bad { background: #FDE6E7; color: var(--color-danger); }
.pm-pill.new { background: var(--color-secondary-soft); color: var(--color-secondary-deep); }
.pm-pill.info { background: var(--color-primary-soft); color: var(--color-primary); }
.pm-pill.idle { background: var(--neutral-100); color: var(--color-ink-2); }
.pm-rowlink { color: var(--color-primary); font-weight: 600; font-size: 12.5px; }
.pm-pagination { display: flex; align-items: center; justify-content: space-between; padding: 14px; font-size: 12.5px; color: var(--color-ink-3); }
.pm-pagination .pg { display: flex; gap: 4px; }
.pm-pagination .pg button { width: 30px; height: 30px; border: 1px solid var(--color-line); border-radius: var(--r-1); font-size: 12.5px; font-weight: 600; color: var(--color-ink-2); }
.pm-pagination .pg button.on { background: var(--color-black); border-color: var(--color-black); color: #fff; }
.pm-bulk { display: none; align-items: center; gap: 12px; padding: 12px 16px; background: var(--color-primary-soft); border: 1px solid var(--color-primary); margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--color-primary); border-radius: var(--r-1); }
.pm-bulk.on { display: flex; }

/* ── DRILL-DOWN DETAIL ── */
.pm-back { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--color-ink-2); margin-bottom: 16px; cursor: pointer; }
.pm-back:hover { color: var(--color-primary); }
.pm-detail { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.pm-detail-main { min-width: 0; }
.pm-detail-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }

/* review preview (article) */
.pm-review { border: 1px solid var(--color-line); background: var(--color-white); }
.pm-review .cover { aspect-ratio: 21/9; background: center/cover var(--color-bg-soft); }
.pm-review .rb { padding: 28px 32px; }
.pm-review .cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-primary); font-weight: 700; margin-bottom: 10px; }
.pm-review h1 { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 12px; }
.pm-review .byl { font-size: 13px; color: var(--color-ink-3); margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--color-line); }
.pm-review p { font-size: 15px; line-height: 1.7; color: var(--color-ink-1); margin-bottom: 14px; }
.pm-review h2 { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin: 22px 0 10px; }
.pm-review mark { background: #FFF3C4; padding: 0 2px; }

/* checklist */
.pm-check { display: flex; flex-direction: column; }
.pm-check-item { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--color-line); cursor: pointer; }
.pm-check-item:last-child { border-bottom: none; }
.pm-check-item .bx { width: 20px; height: 20px; border: 1.5px solid var(--color-ink-3); border-radius: 4px; flex-shrink: 0; display: grid; place-items: center; color: transparent; transition: all .14s ease; }
.pm-check-item.on .bx { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.pm-check-item .ct { font-size: 13.5px; color: var(--color-ink-1); line-height: 1.4; }
.pm-check-item.on .ct { color: var(--color-ink-3); }
.pm-decide { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.pm-decide textarea { width: 100%; min-height: 80px; border: 1.5px solid var(--color-line); border-radius: var(--r-1); padding: 11px 13px; font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; resize: vertical; outline: none; }
.pm-decide textarea:focus { border-color: var(--color-primary); }

/* user/clinic detail mini */
.pm-profile { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.pm-profile .av { width: 64px; height: 64px; border-radius: 50%; background: center/cover var(--color-bg-soft); flex-shrink: 0; }
.pm-profile .nm { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.pm-profile .sub { font-size: 13px; color: var(--color-ink-3); margin-top: 3px; }
.pm-kv { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--color-line); font-size: 13.5px; }
.pm-kv:last-child { border-bottom: none; }
.pm-kv .k { color: var(--color-ink-3); } .pm-kv .v { font-weight: 600; }

/* roles matrix */
.pm-roles { width: 100%; border-collapse: collapse; }
.pm-roles th, .pm-roles td { padding: 12px 14px; border-bottom: 1px solid var(--color-line); font-size: 13px; text-align: center; }
.pm-roles th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-3); font-weight: 700; }
.pm-roles td:first-child, .pm-roles th:first-child { text-align: left; font-weight: 600; }
.pm-roles .yes { color: var(--color-success); } .pm-roles .no { color: var(--color-line); }

/* feature flags */
.pm-flag { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--color-line); }
.pm-flag:last-child { border-bottom: none; }
.pm-flag .n { font-size: 14px; font-weight: 600; } .pm-flag .s { font-size: 12.5px; color: var(--color-ink-3); margin-top: 2px; }
.pm-flag code { font-family: ui-monospace, monospace; font-size: 11px; background: var(--color-bg-soft); padding: 1px 6px; border-radius: 3px; color: var(--color-ink-2); }

/* ── MESSAGING MODULE ── */
.pm-msg { display: grid; grid-template-columns: 340px 1fr; border: 1px solid var(--color-line); background: var(--color-white); height: calc(100vh - 200px); min-height: 560px; overflow: hidden; }
.pm-msg-list { border-right: 1px solid var(--color-line); display: flex; flex-direction: column; min-height: 0; }
.pm-msg-lhead { padding: 14px 16px; border-bottom: 1px solid var(--color-line); display: flex; flex-direction: column; gap: 12px; }
.pm-msg-lhead .ttl { display: flex; align-items: center; justify-content: space-between; }
.pm-msg-lhead .ttl h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.pm-msg-lhead .ttl .unreadtot { font-size: 11px; font-weight: 700; color: var(--color-secondary-deep); background: var(--color-secondary-soft); border-radius: var(--r-pill); padding: 2px 9px; }
.pm-conv-scroll { overflow-y: auto; flex: 1; min-height: 0; }
.pm-conv { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--color-line); cursor: pointer; position: relative; transition: background .12s ease; }
.pm-conv:hover { background: var(--color-bg-soft); }
.pm-conv.on { background: var(--color-primary-soft); box-shadow: inset 3px 0 0 var(--color-primary); }
.pm-conv .av { width: 44px; height: 44px; border-radius: 50%; background: center/cover var(--color-bg-soft); flex-shrink: 0; }
.pm-conv .cm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pm-conv .top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pm-conv .nm { font-size: 14px; font-weight: 600; color: var(--color-ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-conv .tm { font-size: 11px; color: var(--color-ink-3); flex-shrink: 0; }
.pm-conv .prev { font-size: 12.5px; color: var(--color-ink-2); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-conv.unread .prev { color: var(--color-ink-1); font-weight: 600; }
.pm-conv .pm-unread { position: absolute; right: 16px; bottom: 14px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--color-secondary-deep); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }

.pm-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pm-thread-head { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--color-line); flex-shrink: 0; }
.pm-thread-head .av { width: 42px; height: 42px; border-radius: 50%; background: center/cover var(--color-bg-soft); flex-shrink: 0; }
.pm-thread-head .nm { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.pm-thread-head .st { font-size: 12px; color: var(--color-ink-3); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.pm-thread-head .st .live { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); }
.pm-thread-head .ha { margin-left: auto; display: flex; gap: 8px; }
.pm-thread-body { flex: 1; overflow-y: auto; min-height: 0; padding: 22px; background: var(--color-bg-soft); display: flex; flex-direction: column; gap: 10px; }
.pm-day { align-self: center; font-size: 11px; font-weight: 600; color: var(--color-ink-3); background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--r-pill); padding: 3px 12px; margin: 4px 0; }
.pm-bub { max-width: 72%; padding: 10px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.5; position: relative; }
.pm-bub.in { background: var(--color-white); border: 1px solid var(--color-line); color: var(--color-ink-1); align-self: flex-start; border-bottom-left-radius: 4px; }
.pm-bub.out { background: var(--color-primary); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.pm-bub .bt { font-size: 10px; opacity: .55; margin-top: 5px; text-align: right; }
.pm-composer { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--color-line); background: var(--color-white); align-items: flex-end; flex-shrink: 0; }
.pm-composer textarea { flex: 1; border: 1.5px solid var(--color-line); border-radius: var(--r-2); padding: 11px 14px; font-family: var(--font-body); font-size: 13.5px; line-height: 1.45; resize: none; outline: none; max-height: 120px; }
.pm-composer textarea:focus { border-color: var(--color-primary); }
.pm-send { width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary); color: #fff; display: grid; place-items: center; flex-shrink: 0; transition: background .15s ease; }
.pm-send:hover { background: var(--color-primary-hover); }

@media (max-width: 900px) {
  .pm-msg { grid-template-columns: 1fr; height: calc(100vh - 180px); }
  .pm-msg.show-thread .pm-msg-list { display: none; }
  .pm-msg:not(.show-thread) .pm-thread { display: none; }
  .pm-thread-head .back-m { display: inline-grid !important; }
}
.pm-thread-head .back-m { display: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--color-line); place-items: center; color: var(--color-ink-2); margin-right: 2px; }

@media (max-width: 1100px) {
  .pm-kpis { grid-template-columns: 1fr 1fr 1fr; }
  .pm-grid2, .pm-grid3 { grid-template-columns: 1fr; }
  .pm-quick { grid-template-columns: 1fr 1fr; }
  .pm-detail { grid-template-columns: 1fr; }
  .pm-detail-side { position: relative; top: auto; }
}
@media (max-width: 620px) {
  .pm-kpis { grid-template-columns: 1fr 1fr; }
  .pm-quick { grid-template-columns: 1fr; }
  .pm-cmd, .pm-search { width: auto; }
  .pm-table .hide-sm { display: none; }
}