/* HR business modules (attendance · leaves · payroll · contracts · advances · dashboard).
   Plain CSS on purpose so the pages render correctly even before `npm run css:build`. */

.hm-flash { display:flex; align-items:center; gap:.6rem; padding:.75rem 1rem; border-radius:12px; margin-bottom:1rem; font-size:.875rem; font-weight:600; }
.hm-flash.ok  { background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.hm-flash.err { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

.hm-tabs { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1rem; }
.hm-tab { padding:.45rem .9rem; border-radius:999px; font-size:.8rem; font-weight:700; background:#fff; border:1px solid #e2e8f0; color:#475569; text-decoration:none; }
.hm-tab.active { background:var(--hr-primary,#1a2744); border-color:var(--hr-primary,#1a2744); color:#fff; }

.hm-grid { display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width: 1024px) {
  .hm-grid.cols-2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hm-grid.cols-3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .hm-span-2 { grid-column: span 2 / span 2; }
}
.hm-pad { padding:1rem 1.25rem; }
.hm-muted { color:#7f8c9a; }
.hm-small { font-size:.75rem; }
.hm-num { font-variant-numeric: tabular-nums; direction:ltr; unicode-bidi:isolate; }
.hm-strong { font-weight:800; }
.hm-right { text-align:end; }
.hm-center { text-align:center; }
.hm-nowrap { white-space:nowrap; }
.hm-inline { display:inline; }
.hm-row { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.hm-spacer { flex:1; }

/* form grid inside modals / pages */
.hm-form { display:grid; gap:.85rem; grid-template-columns:1fr; }
@media (min-width: 640px) { .hm-form.two { grid-template-columns:repeat(2, minmax(0,1fr)); } .hm-form .full { grid-column:1 / -1; } }
.hm-form .auth-input, .hm-form select.auth-input, .hm-form textarea.auth-input { width:100%; }
.hm-section-title { font-size:.8rem; font-weight:800; color:var(--hr-primary,#1a2744); margin:.5rem 0 .1rem; grid-column:1/-1; border-bottom:1px dashed #e2e8f0; padding-bottom:.3rem; }
.hm-hint { font-size:.72rem; color:#7f8c9a; margin-top:.2rem; }

/* compact inputs inside tables */
.hm-cell-input { width:100%; min-width:5.5rem; padding:.3rem .45rem; border:1px solid #e2e8f0; border-radius:8px; font-size:.8rem; background:#fff; }
.hm-cell-input:focus { outline:2px solid var(--hr-accent,#c8a84b); outline-offset:0; }
select.hm-cell-input { min-width:7.5rem; }
.hm-time { min-width:6.2rem; direction:ltr; }

/* status pills in the attendance sheet */
.hm-status-row[data-status="absent"]  { background:#fff7f7; }
.hm-status-row[data-status="late"]    { background:#fffbeb; }
.hm-status-row[data-status="leave"],
.hm-status-row[data-status="holiday"] { background:#f8fafc; }

/* monthly matrix */
.hm-matrix { border-collapse:separate; border-spacing:2px; font-size:.7rem; }
.hm-matrix th { font-weight:700; color:#64748b; padding:.2rem; text-align:center; }
.hm-matrix td { padding:0; text-align:center; }
.hm-matrix .nm { text-align:start; padding:.25rem .5rem; white-space:nowrap; font-weight:600; font-size:.78rem; position:sticky; inset-inline-start:0; background:#fff; z-index:1; }
.hm-dot { display:inline-flex; width:1.35rem; height:1.35rem; border-radius:6px; align-items:center; justify-content:center; font-weight:800; font-size:.62rem; color:#fff; }
.hm-dot.present { background:#16a34a; } .hm-dot.late { background:#f59e0b; } .hm-dot.absent { background:#dc2626; }
.hm-dot.leave { background:#3b82f6; } .hm-dot.remote { background:#0ea5e9; } .hm-dot.holiday { background:#cbd5e1; color:#475569; }
.hm-dot.none { background:#f1f5f9; color:#cbd5e1; }
.hm-legend { display:flex; gap:.8rem; flex-wrap:wrap; font-size:.75rem; color:#475569; }
.hm-legend span { display:inline-flex; align-items:center; gap:.3rem; }

/* bars (dashboard + breakdowns) */
.hm-bars { display:flex; flex-direction:column; gap:.6rem; }
.hm-bar-row { display:grid; grid-template-columns: minmax(6rem, 9rem) 1fr auto; align-items:center; gap:.6rem; font-size:.8rem; }
.hm-bar-track { height:.6rem; background:#f1f5f9; border-radius:999px; overflow:hidden; }
.hm-bar-fill { height:100%; border-radius:999px; background:var(--bar, var(--hr-primary,#1a2744)); }
.hm-cols { display:flex; align-items:flex-end; gap:.5rem; height:150px; padding-top:.5rem; }
.hm-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:.3rem; height:100%; justify-content:flex-end; }
.hm-col-bar { width:100%; max-width:42px; border-radius:8px 8px 3px 3px; background:var(--bar, var(--hr-accent,#c8a84b)); min-height:3px; }
.hm-col-val { font-size:.65rem; font-weight:700; color:#475569; direction:ltr; }
.hm-col-lbl { font-size:.68rem; color:#7f8c9a; white-space:nowrap; }
.hm-donut { --p:0; width:120px; height:120px; border-radius:50%; background:conic-gradient(#16a34a calc(var(--p)*1%), #e2e8f0 0); display:grid; place-items:center; flex-shrink:0; }
.hm-donut > div { width:86px; height:86px; border-radius:50%; background:#fff; display:grid; place-items:center; text-align:center; }
.hm-donut b { font-size:1.25rem; color:#1a2744; } .hm-donut small { display:block; font-size:.62rem; color:#7f8c9a; }

/* lists */
.hm-list { list-style:none; margin:0; padding:0; }
.hm-list li { display:flex; align-items:center; gap:.7rem; padding:.65rem 1.25rem; border-top:1px solid #f1f5f9; font-size:.82rem; }
.hm-list li:first-child { border-top:0; }
.hm-avatar { width:2rem; height:2rem; border-radius:10px; display:grid; place-items:center; font-weight:800; font-size:.7rem; color:#fff; background:var(--hr-primary,#1a2744); flex-shrink:0; }

/* summary strip (payroll totals) */
.hm-summary { display:grid; gap:.75rem; grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (min-width: 1024px) { .hm-summary { grid-template-columns:repeat(5, minmax(0,1fr)); } }
.hm-summary > div { background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:.8rem 1rem; }
.hm-summary small { display:block; font-size:.7rem; color:#7f8c9a; font-weight:700; }
.hm-summary b { font-size:1.15rem; color:#1a2744; }
.hm-summary .net b { color:#15803d; }
.hm-summary .ded b { color:#b91c1c; }

.hm-progress { height:.4rem; background:#f1f5f9; border-radius:999px; overflow:hidden; min-width:5rem; }
.hm-progress > i { display:block; height:100%; background:#16a34a; }

.hm-tfoot td { font-weight:800; background:#f8fafc; }
.hm-note { background:#f8fafc; border:1px dashed #cbd5e1; border-radius:12px; padding:.75rem 1rem; font-size:.78rem; color:#475569; }

/* Stat cards — mirror of the .stats-grid / .stat-card components in app.css, so the module pages
   look right even when app.min.css was compiled before any view used them (Tailwind purges unused classes). */
.stats-grid { display:grid; gap:.75rem; margin-bottom:1rem; grid-template-columns:repeat(1, minmax(0,1fr)); }
@media (min-width: 768px)  { .stats-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .stats-grid { grid-template-columns:repeat(4, minmax(0,1fr)); } }
.stat-card { background:#fff; border-radius:16px; border:1px solid #e2e8f0; padding:1rem; display:flex; align-items:center; gap:.75rem; transition:box-shadow .15s; border-top:3px solid var(--stat-color, #1a2744); }
.stat-card:hover { box-shadow:0 1px 3px rgba(0,0,0,.1); }
.stat-icon { width:3rem; height:3rem; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.125rem; flex-shrink:0; background:var(--stat-color, #1a2744); }
.stat-info { flex:1; min-width:0; }
.stat-info h3 { font-size:1.5rem; font-weight:700; color:#1a2744; line-height:1.25; margin:0; }
.stat-info p { font-size:.75rem; color:#7f8c9a; margin:.125rem 0 0; }

/* ─── Alerts page (docs/features/hr-alerts.md) — from the Claude Design "التنبيهات" artboard ─── */
.al-page { color:#111a2e; font-size:14px; line-height:22px; }
.al-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:24px; }
.al-head-text { display:flex; flex-direction:column; gap:4px; }
.al-head h1 { margin:0; font-size:26px; line-height:36px; font-weight:700; color:#111a2e; }
.al-head p { margin:0; color:#566077; }
.al-head-actions { display:flex; flex-wrap:wrap; gap:8px; }
.al-btn { height:44px; padding:0 16px; border-radius:8px; font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:8px; cursor:pointer; text-decoration:none; font-family:inherit; white-space:nowrap; }
.al-btn.sm { height:36px; padding:0 12px; font-size:13px; }
.al-btn-outline { border:1px solid #8a93a5; background:#fff; color:#111a2e; }
.al-btn-outline:hover { background:#f4f6fa; color:#111a2e; }
.al-btn-primary { border:0; background:#16233f; color:#fff; }
.al-btn-primary:hover { background:#24365e; color:#fff; }
.al-btn:focus-visible, .al-tab:focus-visible, .al-unread-toggle:focus-visible { outline:2px solid #2c57cc; outline-offset:2px; }

.al-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-bottom:24px; }
.al-stat { background:#fff; border:1px solid #e1e5ed; border-radius:16px; padding:20px 24px; box-shadow:0 1px 2px rgba(17,26,46,.06), 0 1px 3px rgba(17,26,46,.04); border-bottom:3px solid #c29b3c; display:flex; flex-direction:column; gap:4px; }
.al-stat .lbl { font-size:12px; line-height:16px; font-weight:600; color:#566077; }
.al-stat .val { font-size:22px; line-height:28px; font-weight:700; }

.al-layout { display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start; }
.al-main { flex:999 1 640px; min-width:0; display:flex; flex-direction:column; gap:16px; }
.al-aside { flex:1 1 300px; min-width:0; display:flex; flex-direction:column; gap:16px; }

.al-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.al-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.al-tab { height:44px; padding:0 14px; border-radius:999px; border:1px solid #e1e5ed; background:#fff; color:#111a2e; font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.al-tab:hover { color:#111a2e; border-color:#8a93a5; }
.al-tab .chip { min-width:22px; height:22px; padding:0 7px; box-sizing:border-box; border-radius:999px; background:#eef1f6; color:#566077; font-size:12px; line-height:22px; text-align:center; }
.al-tab.on { background:#16233f; border-color:#16233f; color:#fff; }
.al-tab.on .chip { background:rgba(255,255,255,.18); color:#fff; }
.al-unread-toggle { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:#111a2e; font-weight:500; text-decoration:none; }
.al-unread-toggle:hover { color:#111a2e; }
.al-unread-toggle .box { width:18px; height:18px; border-radius:4px; border:1.5px solid #8a93a5; display:inline-flex; align-items:center; justify-content:center; color:#fff; box-sizing:border-box; }
.al-unread-toggle .box.on { background:#2c57cc; border-color:#2c57cc; }

.al-undo { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-radius:12px; background:#e5f3eb; color:#1a7248; font-weight:600; }
.al-undo button { height:36px; padding:0 14px; border-radius:8px; border:1px solid #1a7248; background:transparent; color:#1a7248; font-weight:600; cursor:pointer; font-family:inherit; }

.al-card { background:#fff; border:1px solid #e1e5ed; border-radius:16px; box-shadow:0 1px 2px rgba(17,26,46,.06), 0 1px 3px rgba(17,26,46,.04); overflow:hidden; }
.al-pad { padding:24px; display:flex; flex-direction:column; gap:14px; }
.al-group-head { display:flex; align-items:center; gap:10px; padding:14px 24px; background:#eef1f6; border-bottom:1px solid #e1e5ed; flex-wrap:wrap; }
.al-group-head .dot { width:10px; height:10px; border-radius:999px; }
.al-group-head h2, .al-h2 { margin:0; font-size:17px; line-height:26px; font-weight:700; color:#111a2e; }
.al-group-head .sub { color:#566077; font-size:12.5px; line-height:18px; }
.al-group-head .count { margin-inline-start:auto; min-width:24px; height:24px; padding:0 8px; box-sizing:border-box; border-radius:999px; background:#fff; border:1px solid #e1e5ed; font-size:12px; line-height:22px; font-weight:600; text-align:center; }

.al-list { list-style:none; margin:0; padding:0; }
.al-list li { display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px; padding:18px 24px; border-bottom:1px solid #e1e5ed; background:#fff; }
.al-list li:last-child { border-bottom:0; }
.al-list li.unread { background:#f7f9ff; }
.al-ico { width:44px; height:44px; flex:0 0 44px; border-radius:12px; background:#e9edf6; color:#16233f; display:flex; align-items:center; justify-content:center; }
.al-body { flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:4px; }
.al-title-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.al-unread-dot { width:8px; height:8px; border-radius:999px; background:#2c57cc; }
.al-title { font-size:15px; line-height:22px; font-weight:500; color:#111a2e; }
.al-list li.unread .al-title { font-weight:700; }
.al-badge { display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; font-size:12px; font-weight:600; }
.al-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:12.5px; line-height:18px; color:#566077; }
.al-meta .who { font-weight:600; color:#111a2e; }
.al-meta .code { font-family:'IBM Plex Mono', Consolas, monospace; font-size:11.5px; color:#5f687d; }
.al-detail { margin:2px 0 0; color:#566077; }
.al-side { flex:0 1 auto; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.al-when { font-size:12.5px; line-height:18px; color:#566077; }
.al-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.al-actions form { margin:0; }

.al-empty { background:#fff; border:1px dashed #8a93a5; border-radius:16px; padding:48px 24px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.al-empty .ok { width:56px; height:56px; border-radius:999px; background:#e5f3eb; color:#1a7248; display:flex; align-items:center; justify-content:center; }
.al-empty h2 { margin:0; font-size:17px; font-weight:700; }
.al-empty p { margin:0; color:#566077; }

.al-muted { color:#566077; margin:0; }
.al-muted.sm { font-size:12.5px; line-height:18px; }
.al-co { display:flex; flex-direction:column; gap:6px; }
.al-co .row { display:flex; justify-content:space-between; gap:8px; font-size:12.5px; line-height:18px; }
.al-co .track { height:8px; border-radius:999px; background:#eef1f6; overflow:hidden; }
.al-co .fill { height:8px; border-radius:999px; background:#16233f; }
.al-rules { margin:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); border:1px solid #e1e5ed; border-radius:12px; overflow:hidden; }
.al-rules dt { padding:10px 14px; background:#eef1f6; font-weight:600; border-bottom:1px solid #e1e5ed; }
.al-rules dd { margin:0; padding:10px 14px; border-bottom:1px solid #e1e5ed; }
.al-rules dt:last-of-type, .al-rules dd:last-of-type { border-bottom:0; }
.al-tip { background:#f7f0dd; border-radius:16px; padding:20px 24px; display:flex; gap:12px; color:#6f520f; }
.al-tip svg { flex:0 0 20px; margin-top:2px; }
.al-tip p { margin:0; font-size:12.5px; line-height:20px; }

/* bell in the top bar */
.al-bell { position:relative; }
.al-bell .al-bell-count { position:absolute; top:2px; inset-inline-end:2px; min-width:18px; height:18px; padding:0 5px; box-sizing:border-box; border-radius:999px; background:#d6b25c; color:#16233f; font-size:11px; line-height:18px; font-weight:700; text-align:center; }
@media (max-width: 640px) { .al-side { align-items:flex-start; width:100%; } .al-actions { justify-content:flex-start; } }

/* ─── Attendance dashboard (docs/features/attendance-dashboard.md) ─── */
.ad-filters { padding:1rem 1.25rem; display:flex; flex-direction:column; gap:.75rem; margin-bottom:1rem; }
.ad-filter-bar { padding:0 !important; border:0 !important; flex-wrap:wrap; gap:.5rem; }
.ad-inline { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:700; color:#475569; }
@media (min-width: 1024px) { .ad-stats { grid-template-columns:repeat(6, minmax(0,1fr)); } }
.ad-stats .stat-info h3 small { font-weight:600; }
.ad-legend { display:flex; flex-wrap:wrap; gap:.9rem; font-size:.75rem; color:#475569; margin-bottom:.6rem; }
.ad-legend span { display:inline-flex; align-items:center; gap:.35rem; }
.ad-legend i { width:.7rem; height:.7rem; border-radius:3px; display:inline-block; }
.ad-chart-scroll { overflow-x:auto; padding-bottom:.25rem; }
.ad-chart { display:flex; align-items:stretch; gap:4px; height:200px; }
.ad-col { flex:1 1 0; min-width:14px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:.3rem; }
.ad-col.is-weekend { opacity:.45; }
.ad-stack { width:100%; max-width:34px; display:flex; flex-direction:column; border-radius:6px 6px 2px 2px; overflow:hidden; min-height:2px; background:#eef1f6; }
.ad-stack i { display:block; min-height:0; }
.ad-col-lbl { font-size:.62rem; color:#7f8c9a; white-space:nowrap; }
.ad-who { flex:1; min-width:0; color:inherit; text-decoration:none; }
.ad-who b { display:block; font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ad-who small { display:block; font-size:.7rem; color:#7f8c9a; }
.ad-who:hover b { color:var(--hr-primary,#1a2744); text-decoration:underline; }
.ad-pager { display:flex; align-items:center; justify-content:center; gap:.75rem; padding:.75rem 1rem; border-top:1px solid #f1f5f9; }
.ad-btn-pdf { background:#fcebe9; color:#b3261e; border:1px solid #f3c7c2; }
.ad-btn-pdf:hover { background:#f9dcd8; color:#b3261e; }
.ad-btn-excel { background:#e5f3eb; color:#1a7248; border:1px solid #bfe0cc; }
.ad-btn-excel:hover { background:#d4ecdf; color:#1a7248; }
.ad-print-only { display:none; }
@media print {
  body > :not(main) { display:none !important; }
  .page-area { padding:0 !important; }
  .page-head-actions, .ad-filters, .ad-pager, .ad-hint-screen { display:none !important; }
  .ad-print-only { display:block; color:#475569; }
  .data-card, .stat-card { break-inside:avoid; box-shadow:none !important; }
  .ad-chart-scroll { overflow:visible; }
  * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* Daily sheet — late duration (hours + minutes) instead of check-in/out */
.att-late { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; }
.att-late-f { display:inline-flex; align-items:center; gap:.2rem; font-size:.75rem; color:#475569; }
.att-late-f input { width:3.6rem; min-width:3.6rem; text-align:center; direction:ltr; }
.hm-status-row:not([data-status="late"]) .att-late { display:none; }
.hm-status-row[data-status="late"] .att-late-na { display:none; }

/* Monthly attendance entry (docs/features/attendance-monthly-entry.md) */
.me-num { width:4.5rem; min-width:4.5rem; text-align:center; direction:ltr; font-weight:700; }
.me-present { color:#1a7248; }
.me-absent { color:#b3261e; }
.me-tag { display:inline-block; margin-top:.2rem; font-size:.65rem; font-weight:700; padding:.05rem .45rem; border-radius:999px; }
.me-saved { background:#e5f3eb; color:#1a7248; }
.me-daily { background:#e8eefc; color:#2c57cc; }
tr.me-over td { background:#fff4f2 !important; }
tr.me-over .me-num { border-color:#b3261e; }

/* ─── مسيرات الرواتب (docs/features/payroll.md) ─── */
.pr-warn { background:#fffbeb; border:1px solid #fcd34d; border-radius:14px; padding:.8rem 1rem; margin-bottom:1rem; font-size:.8rem; color:#78350f; }
.pr-warn-head { font-weight:800; margin-bottom:.4rem; }
.pr-warn details { margin:.25rem 0; }
.pr-warn summary { cursor:pointer; font-weight:700; }
.pr-warn ul { margin:.3rem 1.2rem .3rem 0; padding:0; list-style:disc; }
[dir="ltr"] .pr-warn ul { margin:.3rem 0 .3rem 1.2rem; }
.pr-warn li { margin:.1rem 0; }
/* recheck 2026-11-06 #11: IBAN problems — red, always open */
.pr-alert { background:#fef2f2; border:1px solid #fca5a5; border-radius:14px; padding:.8rem 1rem; margin-bottom:1rem; font-size:.8rem; color:#7f1d1d; }
.pr-alert ul { margin:.3rem 1.2rem .3rem 0; padding:0; list-style:disc; }
[dir="ltr"] .pr-alert ul { margin:.3rem 0 .3rem 1.2rem; }
.pr-tag { display:inline-block; font-size:.65rem; font-weight:700; padding:.05rem .45rem; border-radius:999px; background:#fef3c7; color:#92400e; }
tr.pr-row-neg td { background:#fff4f2 !important; }
.pr-table th { white-space:nowrap; }
.pr-table th.pr-grp-earn { background:#ecfdf5; color:#065f46; }
.pr-table th.pr-grp-ded { background:#fef2f2; color:#991b1b; }
.pr-days label { display:flex; align-items:center; gap:.5rem; font-weight:700; }
.pr-settings { display:grid; gap:1rem; grid-template-columns:repeat(1, minmax(0,1fr)); }
@media (min-width: 900px) { .pr-settings { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.pr-settings fieldset { border:1px solid #e2e8f0; border-radius:14px; padding:.9rem 1rem; background:#fff; margin:0; }
.pr-settings legend { font-weight:800; font-size:.85rem; color:#1a2744; padding:0 .4rem; }
.pr-settings .pr-field { margin-bottom:.7rem; }
.pr-settings .pr-field:last-child { margin-bottom:0; }
.pr-settings .pr-radio { display:flex; align-items:center; gap:.45rem; font-size:.82rem; margin:.25rem 0; }
.pr-settings .pr-suffix { display:flex; align-items:center; gap:.4rem; }
.pr-settings .pr-suffix span { font-size:.8rem; color:#64748b; }
.me-locked { background:#f1f5f9; color:#475569; }