/* The platform's shared SaaS design system. Started with the
   provider-connection settings pages -- fax, email and SMS -- and is now
   what every new surface is built from: pages (.ps-page), cards, toggles,
   fields, buttons, data tables (.ps-table) and dialogs (.ps-dialog).
   Global rather than scoped on purpose: hand-maintained copies drift, and
   these surfaces are meant to be indistinguishable from each other. New
   additions inherit the look by using these class names rather than
   restyling MudBlazor defaults per page.

   The palette lives on :root so a dialog rendered into MudBlazor's own
   overlay -- outside any .ps-page -- still resolves the same tokens. */

:root {
    --navy: #0b2f52;
    --navy-deep: #082138;
    --teal: #0f9f95;
    --line: #e4e9f1;
    --muted: #5d6b82;
    --ink: #0f172a;
    --surface: #fff;
    --surface-2: #f6f8fb;
    --ok: #137a49;
    --bad: #dc2626;
    --warn: #b45309;
}

.ps-page {
    color: var(--ink);
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 20px 60px;
}

.ps-back { color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 700; }
.ps-back:hover { color: var(--navy); }

.ps-head {
    margin: 16px 0 18px; padding: 26px 30px; border-radius: 20px;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
    box-shadow: 0 12px 28px -12px rgba(8, 33, 56, .45);
}
.ps-head span { font-size: 11px; text-transform: uppercase; letter-spacing: .16em; color: #6fe0a6; font-weight: 800; }
.ps-head h1 { margin: 8px 0 6px; color: #fff; font-size: 30px; letter-spacing: -.015em; }
.ps-head p { margin: 0; color: #cbd8e6; max-width: 620px; font-size: 14px; line-height: 1.6; }

.ps-note {
    display: flex; gap: 14px; align-items: flex-start; background: #eaf8f0;
    border: 1px solid #b8cde8; border-radius: 16px; padding: 16px 20px; margin-bottom: 18px;
}
.ps-note-glyph {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; display: grid;
    place-items: center; background: var(--teal); color: #fff; font-size: 16px; font-weight: 800;
}
.ps-note strong { display: block; color: #137a49; font-size: 14px; font-weight: 800; margin-bottom: 3px; }
.ps-note p { margin: 0; color: #15355e; font-size: 13px; line-height: 1.6; }

.ps-state { display: flex; justify-content: center; padding: 60px; }

.ps-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
    padding: 22px 26px 24px; margin-bottom: 16px; box-shadow: 0 4px 16px rgba(15, 23, 42, .05);
}
.ps-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.ps-card-head h2 { margin: 0; font-size: 16px; font-weight: 800; color: var(--navy); letter-spacing: -.01em; }

/* Enable toggle: teal and glowing when live, near-black when off. */
.ps-toggle {
    display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none;
    padding: 10px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface);
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ps-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.ps-toggle.on { border-color: #6fe0a6; background: #eef9f2; box-shadow: 0 0 0 4px rgba(15, 77, 159, .13), 0 0 22px -2px rgba(15, 77, 159, .55); }
.ps-toggle.off { border-color: #2b3440; background: #f8fafc; box-shadow: 0 0 0 4px rgba(15,23,42,.07), 0 0 18px -4px rgba(15,23,42,.45); }
.ps-toggle-track { position: relative; flex-shrink: 0; width: 46px; height: 26px; border-radius: 999px; transition: background .18s ease, box-shadow .18s ease; }
.ps-toggle.on .ps-toggle-track { background: var(--teal); box-shadow: inset 0 0 0 1px rgba(9, 110, 104, .5), 0 0 12px rgba(15, 159, 149, .7); }
.ps-toggle.off .ps-toggle-track { background: #1b2430; box-shadow: inset 0 0 0 1px rgba(0,0,0,.55); }
.ps-toggle-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,.45); transition: transform .18s cubic-bezier(.4,0,.2,1); }
.ps-toggle.on .ps-toggle-knob { transform: translateX(20px); }
.ps-toggle input:focus-visible + .ps-toggle-track { outline: 3px solid rgba(15, 77, 159, .45); outline-offset: 3px; }
.ps-toggle-text { display: flex; align-items: center; gap: 9px; }
.ps-toggle-text strong { font-size: 13px; font-weight: 800; color: var(--navy); }
.ps-toggle-text em { font-style: normal; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; border-radius: 999px; padding: 3px 10px; }
.ps-toggle.on .ps-toggle-text em { background: var(--teal); color: #fff; box-shadow: 0 0 10px rgba(15, 159, 149, .6); }
.ps-toggle.off .ps-toggle-text em { background: #1b2430; color: #cbd5e1; }

.ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ps-field { display: flex; flex-direction: column; }
.ps-field label { font-size: 12px; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
.ps-field small { margin-top: 6px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.ps-field small.err { color: var(--bad); font-weight: 700; }

.ps-input, .ps-select {
    width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
    padding: 10px 13px; font-size: 13.5px; color: var(--ink); font-family: inherit;
    transition: border-color .14s ease, box-shadow .14s ease;
}
.ps-input:focus, .ps-select:focus { outline: 0; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15, 159, 149, .15); }
.ps-input::placeholder { color: #9aa7ba; }
.ps-input.invalid { border-color: #f0b4b4; background: #fffafa; }

.ps-security { margin: 16px 0 0; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; font-size: 12px; line-height: 1.6; color: var(--muted); }

.ps-warn { display: flex; gap: 12px; align-items: flex-start; background: #fff8ed; border: 1px solid #f6ddb6; border-radius: 14px; padding: 14px 18px; margin-bottom: 16px; }
.ps-warn span { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #f0b429; color: #fff; font-weight: 800; }
.ps-warn strong { display: block; color: #8a4b04; font-size: 13.5px; font-weight: 800; margin-bottom: 2px; }
.ps-warn p { margin: 0; color: #7c4a08; font-size: 12.5px; line-height: 1.55; }
.ps-warn em { font-style: normal; font-weight: 800; }

.ps-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.ps-btn { border: 0; border-radius: 11px; padding: 12px 22px; font-size: 13.5px; font-weight: 800; cursor: pointer; transition: background .14s ease, transform .12s ease; }
.ps-btn:active { transform: translateY(1px); }
.ps-btn:disabled { opacity: .6; cursor: not-allowed; }
.ps-btn.primary { background: var(--teal); color: #fff; box-shadow: 0 8px 18px -9px rgba(15, 159, 149, .9); }
.ps-btn.primary:hover:not(:disabled) { background: #0c7f77; }
.ps-btn.ghost { background: var(--surface); color: var(--navy); border: 1px solid var(--line); }
.ps-btn.ghost:hover:not(:disabled) { background: var(--surface-2); border-color: #c7d3e3; }

.ps-result { font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.ps-result.ok { color: var(--ok); }
.ps-result.bad { color: var(--bad); }

.ps-testrow { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.ps-testrow .ps-field { flex: 1 1 240px; }

@media (max-width: 700px) {
    .ps-grid { grid-template-columns: minmax(0, 1fr); }
    .ps-head { padding: 22px 20px; }
    .ps-head h1 { font-size: 25px; }
}

/* ---------------------------------------------------------------------------
   Section headers, data tables, status chips, row actions and dialogs.
   Used by the patient Documents list first; anything with rows of records
   and per-row actions should use these rather than a bare <table>.
   --------------------------------------------------------------------------- */

.ps-section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.ps-section-head h3 {
    margin: 0; font-size: 19px; font-weight: 800; color: var(--navy);
    letter-spacing: -.015em;
}
.ps-section-head p {
    margin: 3px 0 0; font-size: 13px; color: var(--muted); line-height: 1.55;
}
.ps-section-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.ps-btn.sm { padding: 9px 16px; font-size: 12.5px; border-radius: 10px; }
.ps-btn.danger { background: var(--bad); color: #fff; }
.ps-btn.danger:hover:not(:disabled) { background: #b91c1c; }

.ps-sortbar {
    display: flex; align-items: center; gap: 8px; font-size: 12px;
    color: var(--muted); font-weight: 700;
}
.ps-sortbar .ps-select { padding: 8px 12px; font-size: 12.5px; border-radius: 10px; }

.ps-tablewrap {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 26px -22px rgba(11,47,82,.35);
}
.ps-tablescroll { overflow-x: auto; }
.ps-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ps-table thead th {
    text-align: left; padding: 12px 18px; background: var(--surface-2);
    border-bottom: 1px solid var(--line); color: var(--muted);
    font-size: 10.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .09em; white-space: nowrap;
}
.ps-table thead th.sortable { cursor: pointer; user-select: none; }
.ps-table thead th.sortable:hover { color: var(--navy); }
.ps-table thead th .arrow { margin-left: 5px; color: var(--teal); }
.ps-table tbody td {
    padding: 14px 18px; border-bottom: 1px solid #eef2f7;
    vertical-align: middle; color: var(--ink);
}
.ps-table tbody tr:last-child td { border-bottom: 0; }
.ps-table tbody tr:hover { background: #fafcff; }
.ps-table tbody tr.is-current { background: #eef9f2; }

.ps-cell-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ps-cell-glyph {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center; font-size: 15px;
    background: linear-gradient(155deg, var(--navy), var(--navy-deep));
    color: #6fe0a6;
}
.ps-cell-main { min-width: 0; }
.ps-cell-main strong {
    display: block; font-size: 13.5px; font-weight: 700; color: var(--navy);
    line-height: 1.35; word-break: break-word;
}
.ps-cell-meta {
    margin-top: 3px; font-size: 11.5px; color: var(--muted);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ps-cell-meta code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px; background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 6px; padding: 1px 6px; color: var(--navy); font-weight: 700;
}

.ps-tag {
    display: inline-block; font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em; border-radius: 999px;
    padding: 3px 9px; background: #eef4fb; color: var(--navy);
    border: 1px solid #dbe6f3; white-space: nowrap;
}

.ps-date strong { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.ps-date small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.ps-date em {
    font-style: normal; font-size: 10px; font-weight: 800; color: var(--warn);
    text-transform: uppercase; letter-spacing: .06em;
}

.ps-chips { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.ps-chip {
    display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
    padding: 3px 10px 3px 8px; font-size: 11px; font-weight: 800;
    border: 1px solid transparent; white-space: nowrap;
}
.ps-chip .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ps-chip b { font-weight: 800; }
.ps-chip.sent { background: #ecfdf5; color: #05674f; border-color: #b9ead9; }
.ps-chip.sent .dot { background: #059669; }
.ps-chip.pending { background: #fffbeb; color: #92620a; border-color: #f5e0b0; }
.ps-chip.pending .dot { background: #d97706; box-shadow: 0 0 0 3px rgba(217,119,6,.16); }
.ps-chip.failed { background: #fef2f2; color: #991b1b; border-color: #f4c9c9; }
.ps-chip.failed .dot { background: #dc2626; }
.ps-chip.neutral { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.ps-chip.neutral .dot { background: #94a3b8; }
.ps-nodelivery { font-size: 11.5px; color: #94a3b8; font-style: italic; }

.ps-rowactions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.ps-iconbtn {
    display: inline-grid; place-items: center; width: 32px; height: 32px;
    border-radius: 9px; border: 1px solid var(--line); background: var(--surface);
    color: var(--navy); font-size: 14px; cursor: pointer; padding: 0;
    transition: background .13s ease, border-color .13s ease, color .13s ease;
}
.ps-iconbtn:hover:not(:disabled) { background: #eef4fb; border-color: #c7d8ec; }
.ps-iconbtn:disabled { opacity: .45; cursor: not-allowed; }
.ps-iconbtn.accent { color: var(--teal); }
.ps-iconbtn.accent:hover:not(:disabled) { background: #e8f8f6; border-color: #8fd6cd; }
.ps-iconbtn.badge { position: relative; }
.ps-iconbtn.badge span {
    position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px;
    border-radius: 999px; background: var(--navy); color: #fff; font-size: 9.5px;
    font-weight: 800; display: grid; place-items: center; padding: 0 4px;
}

.ps-menuitem { font-size: 13px; font-weight: 600; color: var(--navy); }
.ps-menuitem.danger { color: var(--bad); }

.ps-empty {
    background: var(--surface); border: 1px dashed #cfdbea; border-radius: 16px;
    padding: 42px 24px; text-align: center; color: var(--muted); font-size: 13.5px;
}
.ps-empty strong { display: block; color: var(--navy); font-size: 15px; margin-bottom: 5px; }

/* Dialogs -- same shell for every pop-up so they read as one product. */
.ps-dialog { min-width: 320px; max-width: 100%; }
.ps-dialog-head {
    display: flex; gap: 14px; align-items: center;
    background: linear-gradient(140deg, var(--navy), var(--navy-deep));
    margin: -24px -24px 20px; padding: 20px 24px;
}
.ps-dialog-glyph {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px;
    display: grid; place-items: center; font-size: 18px;
    background: rgba(255,255,255,.12); color: #6fe0a6;
}
.ps-dialog-head h2 { margin: 0; color: #fff; font-size: 17px; font-weight: 800; }
.ps-dialog-head p { margin: 2px 0 0; color: #b9cbdd; font-size: 12.5px; line-height: 1.5; }
.ps-dialog-body { display: flex; flex-direction: column; gap: 16px; }
.ps-dialog-foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line);
}
.ps-dialog-foot .spacer { margin-right: auto; }
.ps-textarea {
    width: 100%; min-height: 110px; resize: vertical; font: inherit;
    border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px;
    background: var(--surface); color: var(--ink); line-height: 1.55;
}
.ps-textarea:focus {
    outline: 0; border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(15, 159, 149, .15);
}
.ps-check {
    display: flex; gap: 11px; align-items: flex-start; background: var(--surface-2);
    border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px;
    cursor: pointer;
}
.ps-check input { margin: 2px 0 0; width: 17px; height: 17px; accent-color: var(--teal); flex-shrink: 0; }
.ps-check strong { display: block; font-size: 12.5px; font-weight: 800; color: var(--navy); }
.ps-check span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); line-height: 1.55; }
.ps-check.invalid { border-color: #f0b4b4; background: #fffafa; }

.ps-timeline { display: flex; flex-direction: column; gap: 10px; }
.ps-timeline-item {
    display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
}
.ps-timeline-item strong { font-size: 12.5px; font-weight: 800; color: var(--navy); }
.ps-timeline-item small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }

@media (max-width: 760px) {
    .ps-table thead th, .ps-table tbody td { padding: 11px 12px; }
    .ps-section-head { align-items: flex-start; }
}

/* Row action menu. Hand-rolled rather than a component library popover so it
   inherits this design system and can't be styled out from under us. */
.ps-menu-wrap { position: relative; display: inline-block; }
.ps-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
    min-width: 210px; padding: 6px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 13px;
    box-shadow: 0 20px 44px -20px rgba(11,47,82,.5), 0 2px 6px rgba(15,23,42,.07);
}
.ps-menu button {
    display: block; width: 100%; text-align: left; background: none; border: 0;
    padding: 9px 12px; border-radius: 9px; font-size: 13px; font-weight: 650;
    color: var(--navy); cursor: pointer;
}
.ps-menu button:hover { background: var(--surface-2); }
.ps-menu button.danger { color: var(--bad); }
.ps-menu button.danger:hover { background: #fef2f2; }
.ps-menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 4px; }
.ps-menu-backdrop { position: fixed; inset: 0; z-index: 20; background: transparent; }
/* An open menu must escape the table's horizontal scroll box, which would
   otherwise clip it. */
.ps-tablescroll.menu-open, .ps-tablewrap.menu-open { overflow: visible; }

/* One icon size and weight everywhere, inheriting the button's colour. */
.ps-icon { width: 17px; height: 17px; display: block; }
.ps-cell-glyph .ps-icon { width: 17px; height: 17px; }

/* Dialogs that carry their own header pass an empty title; the component
   library still renders the empty bar, which shows as a blank strip above
   the header. */
.mud-dialog-title:empty { display: none; }