/* =============================================================================
   SAMS Health.AI PRM — Blue theme
   Tokens lifted verbatim from ref/SAMS-Health-Partner-Onboarding-Prototype.html
   ============================================================================= */

:root {
    --navy: #0f1f3d;
    --navy-2: #16264a;
    --primary: #1f5fff;
    --primary-600: #1a4fd6;            /* spec name — primary hover */
    --primary-dark: var(--primary-600); /* back-compat alias (pre-reconciliation name) */
    --teal: #0fb5ba;
    --teal-dk: #0a8a8e;                /* spec name — teal hover */
    --teal-dark: var(--teal-dk);        /* back-compat alias */
    --green: #16a34a;
    --amber: #d97706;
    --red: #dc2626;
    --bg: #f4f6fb;
    --card: #ffffff;
    --line: #e3e8f2;
    --line-2: #eef1f7;                 /* inner dividers */
    --txt: #11203a;
    --muted: #5b6b88;
    --muted-2: #8493ad;               /* tertiary text / captions */
    --chip: #eef3ff;
    --radius: 14px;
    --radius-sm: 10px;                /* inputs, buttons, chips */
    --shadow: 0 1px 2px rgba(16, 32, 64, .06), 0 8px 24px rgba(16, 32, 64, .06);
    --shadow-lg: 0 12px 40px rgba(16, 32, 64, .16);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--txt);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .4rem; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------------------------------------ app shell --- */

.prm-shell {
    display: grid;
    grid-template-columns: 248px 1fr;
    min-height: 100vh;
}

.prm-sidebar {
    background: linear-gradient(180deg, var(--navy), var(--navy-2));
    color: #dfe7f6;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.prm-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.prm-logo {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--primary), var(--teal));
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    flex: 0 0 auto;
}

.prm-brand-name { font-weight: 700; color: #fff; font-size: 15px; line-height: 1.1; }
.prm-brand-sub { font-size: 11.5px; color: #8ea3c8; }

.prm-nav { flex: 1; padding: 10px 10px 16px; }

.prm-nav-group {
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7c90b8;
    margin: 16px 8px 6px;
}

.prm-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 9px;
    color: #cdd9ef;
    font-size: 13.5px;
    margin-bottom: 2px;
}

.prm-nav-item:hover { background: rgba(255, 255, 255, .07); text-decoration: none; }

.prm-nav-item.active {
    background: linear-gradient(90deg, rgba(31, 95, 255, .95), rgba(15, 181, 186, .6));
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(31, 95, 255, .3);
}

.prm-nav-item.disabled { color: #64789f; cursor: default; }
.prm-nav-item.disabled:hover { background: transparent; }

.prm-nav-icon { width: 20px; text-align: center; flex: 0 0 auto; }

.prm-soon {
    margin-left: auto;
    font-size: 9.5px;
    background: rgba(255, 255, 255, .1);
    color: #8ea3c8;
    border-radius: 999px;
    padding: 2px 7px;
    letter-spacing: .04em;
}

.prm-sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.prm-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--teal);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    flex: 0 0 auto;
}

.prm-user-name { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.15; }
.prm-user-sub { font-size: 11px; color: #8ea3c8; }

.prm-logout-btn {
    margin-left: auto;
    background: none;
    border: 1px solid rgba(255, 255, 255, .2);
    color: #cdd9ef;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
}

.prm-logout-btn:hover { background: rgba(255, 255, 255, .1); }

.prm-main { padding: 26px 30px; min-width: 0; }

.prm-page-header { margin-bottom: 20px; }
.prm-page-title { font-size: 21px; font-weight: 700; }
.prm-page-sub { color: var(--muted); font-size: 13.5px; }

/* ----------------------------------------------------------------- cards --- */

.prm-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
}

/* Sectioned card (prototype .card + .card-h + .card-b): a bordered header with title + adjacent
   subtitle, then a padded body. Used by Card.razor. */
.prm-card-sectioned {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.prm-card-h {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line-2);
}
.prm-card-h h3 { font-size: 15px; font-weight: 700; margin: 0; }
.prm-card-h .sub { font-size: 12px; color: var(--muted); }
.prm-card-h .prm-card-h-trailing { margin-left: auto; }
.prm-card-b { padding: 18px 20px; }

.prm-grid { display: grid; gap: 16px; }
.prm-grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.prm-grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.prm-kpi { display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; }
.prm-kpi-label { color: var(--muted); font-size: 12px; font-weight: 600; }
.prm-kpi-value { font-size: 28px; font-weight: 800; letter-spacing: -.5px; margin: 6px 0 2px; }
.prm-kpi-hint { color: var(--muted); font-size: 12px; }

/* KPI corner icon tile + delta line (design-system §5.2). */
.prm-kpi-ic {
    position: absolute; top: 16px; right: 16px;
    width: 40px; height: 40px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; background: var(--chip); color: var(--primary);
}
.prm-kpi-delta { font-size: 12px; font-weight: 600; color: var(--muted); }
.prm-kpi-delta.up { color: var(--green); }
.prm-kpi-delta.dn { color: var(--red); }

/* ---------------------------------------------------------------- badges --- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* Fills + darkened text per design-system 00 §1 (tinted fill / darker label). */
.b-green { background: #e7f7ee; color: #0f7a3d; }
.b-amber { background: #fdf2e0; color: #a5650a; }
.b-red { background: #fdeaea; color: #c01c1c; }
.b-blue { background: #e9f0ff; color: #1a4fd6; }
.b-gray { background: #eef1f7; color: #5b6b88; }
.b-teal { background: #e2f7f7; color: #0a7a7e; }

/* Optional leading status dot (design-system §5.3). */
.badge .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ----------------------------------------------------------------- forms --- */

.prm-field { margin-bottom: 14px; }

.prm-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--txt);
    margin-bottom: 5px;
}

.prm-input, .prm-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: var(--txt);
}

.prm-input:focus, .prm-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(31, 95, 255, .12);
}

.prm-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }

.prm-error {
    background: #fdeaea;
    color: var(--red);
    border: 1px solid #f6c7c7;
    border-radius: 9px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 14px;
}

.prm-success {
    background: #e8f7ee;
    color: var(--green);
    border: 1px solid #bce5cc;
    border-radius: 9px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 14px;
}

.prm-info {
    background: var(--chip);
    color: var(--primary);
    border: 1px solid #cfdcff;
    border-radius: 9px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 14px;
}

/* --------------------------------------------------------------- buttons --- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: var(--radius-sm);
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .14s, border-color .14s, color .14s;
}

.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--primary-600); }

.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover:not(:disabled) { background: var(--teal-dk); }

.btn-outline { background: #fff; color: var(--txt); border-color: var(--line); }
.btn-outline:hover:not(:disabled) { background: var(--bg); }

.btn-danger { background: #fff; color: var(--red); border-color: #f3c4c4; }
.btn-danger:hover:not(:disabled) { background: #fdeaea; }

.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 7px; }
.btn-block { width: 100%; }

/* ---------------------------------------------------------------- tables --- */

.prm-table-wrap { overflow-x: auto; }

.prm-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

.prm-table th {
    text-align: left;
    color: var(--muted);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.prm-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.prm-table tr:last-child td { border-bottom: none; }
.prm-table tbody tr:hover { background: #f8faff; }

/* ------------------------------------------------------------ auth pages --- */

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background:
        radial-gradient(900px 400px at 85% -10%, rgba(15, 181, 186, .18), transparent),
        radial-gradient(900px 500px at -10% 110%, rgba(31, 95, 255, .14), transparent),
        var(--bg);
    padding: 24px;
}

.auth-card {
    width: 100%;
    max-width: 430px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 30px 30px 26px;
}

.auth-card.wide { max-width: 620px; }

.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.auth-title { font-size: 19px; font-weight: 800; }
.auth-sub { color: var(--muted); font-size: 13px; }

.auth-footer {
    margin-top: 18px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

.auth-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.prm-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 14px;
}

/* -------------------------------------------------------------- utility --- */

/* Progress bar (design-system §5.13) — Quick Apply meter + wizard. */
.pbar { height: 8px; background: #eef1f7; border-radius: 20px; overflow: hidden; }
.pbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--teal)); border-radius: 20px; transition: width .4s; }

/* Gradient hero header (Quick Apply, spec 3.3). */
.prm-hero {
    background: linear-gradient(120deg, var(--navy), var(--primary));
    color: #fff;
    padding: 26px 28px;
    border-radius: var(--radius) var(--radius) 0 0;
}
.prm-hero-title { font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.prm-hero-sub { opacity: .92; font-size: 13px; margin-top: 6px; }

/* Section title (design-system §5.9). */
.sec-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--muted);
    margin: 24px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-2);
}
.sec-title:first-child { margin-top: 0; }
.sec-title-sm {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--muted-2);
    margin: 0 0 8px;
}

.prm-flex { display: flex; align-items: center; gap: 10px; }
.prm-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; }
.muted { color: var(--muted); }
.text-sm { font-size: 12.5px; }

/* ===================================================== Phase 8 — dashboards === */

/* KPI tile as a click-through (AR101 drill-down). */
.prm-kpi-link {
    text-decoration: none;
    color: inherit;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.prm-kpi-link:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 6px rgba(31, 95, 255, .14), 0 10px 28px rgba(17, 32, 58, .08);
    transform: translateY(-1px);
}
.prm-kpi-drill {
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--primary);
    opacity: 0;
    transition: opacity .12s ease;
}
.prm-kpi-link:hover .prm-kpi-drill { opacity: 1; }

/* Horizontal proportion bars (revenue by tier, deal mix, geo, …). */
.prm-bar-track {
    background: var(--chip);
    border-radius: 6px;
    height: 8px;
    margin-top: 4px;
    overflow: hidden;
}
.prm-bar-fill { height: 100%; border-radius: 6px; min-width: 2px; }

/* Vertical bar "sparkline" for trend series (monthly referrals, payout trend). */
.prm-spark {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 140px;
    padding-top: 8px;
}
.prm-spark-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    min-width: 0;
}
.prm-spark-bar {
    width: 100%;
    max-width: 34px;
    background: var(--primary);
    border-radius: 6px 6px 0 0;
    min-height: 3px;
}
.prm-spark-label {
    margin-top: 6px;
    font-size: 10.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Top bar (breadcrumb + page title · search · notification bell · help) — matches prototype .topbar. */
.prm-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: -26px -30px 20px;
    padding: 12px 30px;
    border-bottom: 1px solid var(--line);
    background: var(--card);
    position: sticky;
    top: 0;
    z-index: 20;
}
.prm-topbar-lead { display: flex; flex-direction: column; min-width: 0; }
.prm-crumb { font-size: 12px; color: var(--muted-2); }
.prm-topbar-title { font-size: 18px; font-weight: 700; color: var(--txt); line-height: 1.2; }
.prm-topbar-sp { flex: 1; }
.prm-search {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 8px 12px;
    width: 260px;
    max-width: 32vw;
    font-size: 13px;
    color: var(--txt);
    font-family: inherit;
}
.prm-search:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31, 95, 255, .12); }
.prm-topbar-actions { display: flex; align-items: center; gap: 10px; }
.prm-help {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 15px;
    text-decoration: none;
}
.prm-help:hover { background: var(--chip); text-decoration: none; }
.prm-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--bg);
    border: 1px solid var(--line);
    text-decoration: none;
    line-height: 1;
}
.prm-bell:hover { background: var(--chip); }
/* Simple red unread dot (prototype parity). */
.prm-bell-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    border: 1.5px solid var(--card);
}

/* ── Phase 8 Stage 2 — score rings, criterion bars, notification & report chrome ── */

/* Three-ring scorecard (Partner Quality / Referral Quality / Activation Readiness). */
.prm-rings { display: flex; flex-wrap: wrap; gap: 28px; }
.prm-ring { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 150px; }
.prm-ring-dial {
    width: 118px;
    height: 118px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* --pct (0..100) and --ring (colour) are supplied inline. */
    background: conic-gradient(var(--ring, var(--primary)) calc(var(--pct, 0) * 1%), var(--chip) 0);
}
.prm-ring-hole {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: var(--card);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.prm-ring-num { font-size: 24px; font-weight: 800; line-height: 1; }
.prm-ring-den { font-size: 11px; color: var(--muted); margin-top: 2px; }
.prm-ring-pending { font-size: 12px; font-weight: 700; color: var(--muted); }
.prm-ring-label { font-weight: 600; font-size: 13px; text-align: center; }
.prm-ring-sub { font-size: 11.5px; color: var(--muted); text-align: center; }

/* One of the six criterion bars (reuses .prm-bar-track / .prm-bar-fill). */
.prm-criterion { margin-bottom: 14px; }
.prm-criterion-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.prm-criterion-name { font-weight: 600; font-size: 13.5px; }
.prm-criterion-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.prm-demo-chip {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 1px 6px;
    border-radius: 6px;
    background: #efe7fb;
    color: #6b3fc0;
    margin-left: 6px;
    vertical-align: middle;
}

/* Notification inbox rows + category chips. */
.prm-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.prm-chip {
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--txt);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.prm-chip:hover { background: var(--chip); }
.prm-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.prm-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 8px;
    background: var(--card);
}
.prm-note.unread { border-left: 3px solid var(--primary); background: var(--chip); }
.prm-note-ico { font-size: 18px; line-height: 1.3; }
.prm-note-main { flex: 1 1 auto; min-width: 0; }
.prm-note-title { font-weight: 600; }
.prm-note-body { font-size: 13px; color: var(--muted); margin-top: 2px; }
.prm-note-meta { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.prm-note-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; white-space: nowrap; }

/* Report catalog cards. */
.prm-report-card { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.prm-report-card:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(0,0,0,.06); }

/* Sample-document card thumbnail (design-system 4.7). */
.prm-sample-thumb {
    height: 96px;
    border-radius: 9px;
    background: linear-gradient(135deg, #f5f8ff, #e2f7f7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--primary);
    border: 1px solid var(--line);
    margin-bottom: 10px;
}
.prm-bell-icon { font-size: 18px; }
.prm-bell-count {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--card);
}

/* Sidebar count badge (Approvals / Activation Queue — D33). */
.prm-nav-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.prm-nav-item.active .prm-nav-badge { background: #fff; color: var(--primary); }

/* ===================================================== DocPaper (serif "printed document") === */
/* Global (not scoped) because DocPaper templates pass their body/field grid as child content.
   Names prm-prefixed; values lifted from the prototype .docpaper/.dp-*/.seal/.sig-line/.docview. */
.prm-docpaper {
    background: #fff; border: 1px solid #ddd;
    box-shadow: inset 0 0 0 1px #fff, 0 1px 6px rgba(0, 0, 0, .08);
    padding: 30px 34px; font-family: 'Times New Roman', Georgia, serif; color: #1a1a1a;
}
.prm-docpaper h2 { text-align: center; font-size: 17px; letter-spacing: 1px; margin-bottom: 2px; font-family: 'Times New Roman', serif; }
.prm-docpaper .prm-dp-gov { text-align: center; font-size: 10px; color: #666; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.prm-docpaper p { font-size: 12px; line-height: 1.6; margin-bottom: 9px; }
.prm-dp-grid { display: grid; border: 1px solid #333; margin-top: 10px; }
.prm-dp-row { display: grid; grid-template-columns: 1fr 1fr; }
.prm-dp-row.one { grid-template-columns: 1fr; }
.prm-dp-row.three { grid-template-columns: 1fr 1fr 1fr; }
.prm-dp-cell { border: .5px solid #aaa; padding: 6px 9px; }
.prm-dp-cell .l { font-size: 8.5px; text-transform: uppercase; color: #555; letter-spacing: .4px; }
.prm-dp-cell .v { font-size: 13px; font-weight: 600; }
.prm-seal {
    width: 88px; height: 88px; border-radius: 50%; border: 3px double var(--teal-dk);
    display: flex; align-items: center; justify-content: center; color: var(--teal-dk);
    font-weight: 800; font-size: 10px; text-align: center; line-height: 1.3; margin: 16px auto; transform: rotate(-7px);
}
.prm-sig-line { border-top: 1px solid #333; margin-top: 30px; padding-top: 4px; font-size: 11px; color: #555; }

/* Two-pane document preview (paper + side panel). */
.prm-docview { display: grid; grid-template-columns: 1fr 256px; gap: 0; }
@media (max-width: 820px) { .prm-docview { grid-template-columns: 1fr; } }
.prm-docview .prm-dvmain { padding: 20px; background: var(--bg); max-height: 62vh; overflow: auto; }
.prm-docview .prm-dvside { border-left: 1px solid var(--line); padding: 18px; max-height: 62vh; overflow: auto; }
.prm-ver-row { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 12px; }
.prm-ver-row .vd { width: 26px; height: 26px; border-radius: 7px; background: var(--chip); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }

/* Wider modal panel when it hosts a document preview. */
.prm-modal.prm-modal-wide { max-width: 960px; }

#blazor-error-ui { color-scheme: light only; display: none; left: 0; position: fixed; width: 100%; z-index: 1000;
    background: #fdf1e3; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); box-sizing: border-box; padding: .6rem 1.25rem .7rem; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }