/*
 * NexSanté cabinet panel: white cards on a cool grey page, teal actions,
 * navy text, blue for navigation and links. Loaded after Filament's own CSS.
 */
:root {
    --nx-page: #f4f6f9;
    --nx-card: #ffffff;
    --nx-line: #e3e8ef;
    --nx-line-soft: #eef1f5;
    --nx-ink: #17284a;
    --nx-ink-2: #3b4a66;
    --nx-muted: #6b778c;
    --nx-teal: #0f7c78;
    --nx-teal-soft: #eaf6f4;
    --nx-teal-line: #cde9e4;
    --nx-blue: #1f5fae;
    --nx-blue-soft: #e4eefb;
    --nx-red: #c62828;
    --nx-red-soft: #fde8e8;
    --nx-red-line: #f6c4c4;
    --nx-radius: 12px;
}

/* ---------- Shell ---------- */

.fi-body {
    background: var(--nx-page);
    color: var(--nx-ink);
}

.fi-sidebar {
    background: var(--nx-card);
    border-inline-end: 1px solid var(--nx-line);
}

.fi-sidebar-header,
.fi-topbar {
    background: var(--nx-card);
    box-shadow: none;
    border-bottom: 1px solid var(--nx-line);
}

.fi-sidebar-nav {
    padding-inline: 0.75rem;
}

.fi-sidebar-item-btn {
    border-radius: 10px;
    padding-block: 0.7rem;
    gap: 0.9rem;
}

.fi-sidebar-item-label {
    color: var(--nx-ink-2);
    font-size: 0.95rem;
    font-weight: 500;
}

.fi-sidebar-item-icon {
    color: var(--nx-ink-2);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--nx-blue-soft);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon {
    color: var(--nx-blue);
    font-weight: 600;
}

.nx-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--nx-ink);
}

.nx-brand-mark {
    width: 1.9rem;
    height: 1.9rem;
    color: var(--nx-teal);
}

.nx-brand-name {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.fi-global-search-field .fi-input-wrp {
    background: var(--nx-page);
    border-color: transparent;
    box-shadow: none;
    min-width: min(32rem, 45vw);
}

.nx-fictional {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-inline: 0.75rem;
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    background: var(--nx-blue-soft);
    color: var(--nx-blue);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

.fi-breadcrumbs a,
.fi-breadcrumbs .fi-breadcrumbs-item-label {
    color: var(--nx-blue);
}

.fi-breadcrumbs li:last-child .fi-breadcrumbs-item-label {
    color: var(--nx-ink);
    font-weight: 600;
}

.fi-header-heading {
    color: var(--nx-ink);
}

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    border-radius: var(--nx-radius);
    box-shadow: none;
    border: 1px solid var(--nx-line);
}

/* Filament picks a lighter shade of a dark brand colour for contrast; the
   mockups use the deep teal itself, with white text. */
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link) {
    background: var(--nx-teal);
    color: #fff;
}

.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link):hover {
    background: #0b6662;
}

.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link) .fi-icon {
    color: #fff;
}

.fi-badge {
    white-space: nowrap;
}

/* ---------- Icons ---------- */

.nx-icon {
    width: 1.35rem;
    height: 1.35rem;
    flex: none;
}

.nx-icon-sm {
    width: 1rem;
    height: 1rem;
    flex: none;
}

/* ---------- Dossier patient: header card ---------- */

.nx-record-head {
    display: grid;
    gap: 0.9rem;
}

.nx-identity {
    background: var(--nx-card);
    border: 1px solid var(--nx-line);
    border-bottom: 0;
    border-radius: var(--nx-radius) var(--nx-radius) 0 0;
    padding: 1.25rem 1.5rem 0.75rem;
    margin-bottom: -2rem; /* the tab bar below joins this card */
}

.nx-identity-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}

.nx-avatar {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #dbe7f7;
    color: var(--nx-ink);
    font-weight: 600;
}

.nx-avatar-lg {
    width: 5rem;
    height: 5rem;
    font-size: 1.75rem;
}

.nx-identity-main {
    flex: 1 1 16rem;
    min-width: 0;
}

.nx-identity-name {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--nx-ink);
}

.nx-identity-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0;
    margin-top: 0.35rem;
    color: var(--nx-ink-2);
}

.nx-identity-meta > * + *::before {
    content: "·";
    margin-inline: 0.6rem;
    color: var(--nx-muted);
}

.nx-identity-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.nx-identity-actions .fi-btn {
    min-height: 2.9rem;
    padding-inline: 1.15rem;
    font-size: 0.95rem;
}

.nx-allergy {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.1rem;
    padding: 0.7rem 1rem;
    border: 1px solid var(--nx-red-line);
    border-radius: 8px;
    background: var(--nx-red-soft);
    color: var(--nx-red);
    font-weight: 600;
}

/* The relation tabs sit inside the header card. */
.fi-resource-view-record-page.fi-resource-patients .fi-page-content > .fi-sc > .fi-grid-col > .fi-sc-component > .fi-sc-tabs > .fi-tabs {
    background: var(--nx-card);
    border: 1px solid var(--nx-line);
    border-top: 0;
    border-radius: 0 0 var(--nx-radius) var(--nx-radius);
    padding: 0 1.5rem;
    margin-bottom: 1.25rem;
    justify-content: flex-start;
    box-shadow: none;
    max-width: none;
    width: 100%;
    overflow-x: auto;
}

.fi-resource-view-record-page.fi-resource-patients .fi-tabs .fi-tabs-item {
    border-radius: 0;
    padding: 0.9rem 1.1rem;
    border-bottom: 2px solid transparent;
    background: none;
}

.fi-resource-view-record-page.fi-resource-patients .fi-tabs .fi-tabs-item.fi-active {
    border-bottom-color: var(--nx-teal);
}

.fi-resource-view-record-page.fi-resource-patients .fi-tabs .fi-tabs-item .fi-tabs-item-label {
    color: var(--nx-ink-2);
    font-size: 0.95rem;
}

.fi-resource-view-record-page.fi-resource-patients .fi-tabs .fi-tabs-item.fi-active .fi-tabs-item-label {
    color: var(--nx-ink);
    font-weight: 600;
}

/* ---------- Dossier patient: overview ---------- */

.nx-overview {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
}

.nx-overview-clinical {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1.05fr);
}

@media (max-width: 1100px) {
    .nx-overview,
    .nx-overview-clinical {
        grid-template-columns: minmax(0, 1fr);
    }
}

.nx-col {
    display: grid;
    gap: 1.25rem;
}

.nx-card {
    background: var(--nx-card);
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius);
    padding: 1.25rem;
}

.nx-card-title {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1rem;
    color: var(--nx-ink);
    font-size: 1.05rem;
    font-weight: 600;
}

.nx-card-title-stacked {
    align-items: flex-start;
}

.nx-card-title small {
    display: block;
    margin-top: 0.15rem;
    color: var(--nx-muted);
    font-size: 0.78rem;
    font-weight: 400;
}

.nx-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-inline-start: auto;
    color: var(--nx-blue);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}

.nx-card-link:hover {
    text-decoration: underline;
}

.nx-facts > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 1rem;
    padding: 0.8rem 0.25rem;
    border-top: 1px solid var(--nx-line-soft);
    font-size: 0.9rem;
}

.nx-facts dt {
    color: var(--nx-ink-2);
}

.nx-facts dd {
    color: var(--nx-ink);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.nx-facts dd small {
    display: block;
    color: var(--nx-muted);
    font-weight: 400;
}

.nx-facts em,
.nx-well-empty {
    color: var(--nx-muted);
    font-style: italic;
    font-weight: 400;
}

.nx-summary {
    display: grid;
    gap: 1rem;
}

.nx-summary-item {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.75rem;
}

.nx-summary-icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: var(--nx-page);
    color: var(--nx-ink-2);
}

.nx-summary-item h3 {
    margin: 0.3rem 0 0.5rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--nx-ink);
}

.nx-well {
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    background: var(--nx-page);
    color: var(--nx-ink-2);
    font-size: 0.88rem;
    white-space: pre-line;
}

.nx-timeline {
    position: relative;
    display: grid;
    gap: 1.1rem;
    padding-inline-start: 1.6rem;
}

.nx-timeline::before {
    content: "";
    position: absolute;
    inset-block: 0.5rem 0.5rem;
    inset-inline-start: 0.4rem;
    width: 2px;
    background: var(--nx-line);
}

.nx-timeline li {
    position: relative;
}

.nx-timeline li::before {
    content: "";
    position: absolute;
    inset-inline-start: -1.55rem;
    top: 0.2rem;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: #c9d6e6;
    box-shadow: 0 0 0 3px var(--nx-card);
}

.nx-timeline li:first-child::before {
    background: var(--nx-teal);
}

.nx-timeline-link {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 1rem;
    border-radius: 8px;
}

.nx-timeline-link:hover strong {
    color: var(--nx-blue);
}

.nx-timeline strong {
    display: block;
    color: var(--nx-ink);
    font-size: 0.9rem;
    font-weight: 600;
}

.nx-timeline span {
    display: block;
    color: var(--nx-muted);
    font-size: 0.82rem;
}

.nx-timeline-what span {
    color: var(--nx-ink-2);
}

.nx-timeline p {
    margin-top: 0.35rem;
    color: var(--nx-muted);
    font-size: 0.82rem;
}

.nx-files {
    display: grid;
    gap: 0.5rem;
}

.nx-files li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--nx-line);
    border-radius: 8px;
}

.nx-file-badge {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2.3rem;
    border-radius: 4px;
    background: #d93025;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
}

.nx-file-main {
    flex: 1;
    min-width: 0;
}

.nx-file-main strong {
    display: block;
    color: var(--nx-ink);
    font-size: 0.88rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nx-file-main span {
    color: var(--nx-muted);
    font-size: 0.78rem;
}

.nx-next {
    display: grid;
    gap: 0.6rem;
    padding: 1rem;
    border: 1px solid var(--nx-teal-line);
    border-radius: 10px;
    background: var(--nx-teal-soft);
}

.nx-next-head {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.nx-next-head > div {
    flex: 1;
}

.nx-next-icon {
    width: 2rem;
    height: 2rem;
    color: var(--nx-teal);
}

.nx-next strong {
    display: block;
    color: var(--nx-ink);
    font-weight: 600;
}

.nx-next-head strong {
    font-size: 1.05rem;
}

.nx-next-head > div > span,
.nx-next-what span {
    display: block;
    color: var(--nx-ink-2);
    font-size: 0.88rem;
}

.nx-next-what {
    margin: 0.2rem 0 0.3rem;
}

.nx-block,
.nx-block-action .fi-btn {
    width: 100%;
    justify-content: center;
}

.nx-next .fi-btn.fi-outlined,
.nx-card > .nx-block.fi-outlined {
    background: var(--nx-card);
}

.nx-vitals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.nx-vital {
    padding: 0.8rem 0.7rem;
    border: 1px solid var(--nx-line);
    border-radius: 10px;
    text-align: center;
}

.nx-vital-icon {
    width: 1.3rem;
    height: 1.3rem;
    margin: 0 auto 0.35rem;
    color: var(--nx-blue);
}

.nx-vital strong {
    display: block;
    color: var(--nx-ink);
    font-size: 1.15rem;
    font-weight: 700;
    white-space: nowrap;
}

.nx-vital strong small,
.nx-vital > small {
    color: var(--nx-ink-2);
    font-size: 0.75rem;
    font-weight: 600;
}

.nx-vital > small {
    display: block;
}

.nx-vital > span {
    display: block;
    margin-top: 0.3rem;
    color: var(--nx-muted);
    font-size: 0.78rem;
}

.nx-balance-label {
    color: var(--nx-ink-2);
    font-size: 0.85rem;
}

.nx-balance {
    margin-bottom: 0.4rem;
    color: var(--nx-ink);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.nx-hint {
    margin-bottom: 0.9rem;
    color: var(--nx-muted);
    font-size: 0.78rem;
}

.nx-empty {
    margin-bottom: 0.8rem;
    color: var(--nx-muted);
    font-size: 0.88rem;
}

.nx-empty a {
    color: var(--nx-blue);
    font-weight: 500;
}

/* ---------- Lists ---------- */

.fi-header-subheading {
    color: var(--nx-ink-2);
}

.fi-ta-ctn {
    overflow: hidden;
}

.fi-ta-header-cell {
    background: #f8fafc;
}

.fi-ta-header-cell-label {
    color: var(--nx-ink-2);
    font-weight: 600;
}

.fi-ta-row:hover {
    background: #f5fafa;
}

.nx-person {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
}

.nx-person-name {
    color: var(--nx-ink);
    font-weight: 600;
}

.nx-avatar-sm {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 0.85rem;
}

.nx-avatar-md {
    width: 3rem;
    height: 3rem;
    font-size: 1rem;
}

.nx-tint-0 { background: #fde2e7; color: #b4234a; }
.nx-tint-1 { background: #dbe7f7; color: #1f4f8f; }
.nx-tint-2 { background: #ece3fb; color: #6b3fb5; }
.nx-tint-3 { background: #d9f2ec; color: #0f6b5c; }
.nx-tint-4 { background: #fdf0d2; color: #8a5a00; }
.nx-tint-5 { background: #e3e8ef; color: #34445f; }

.nx-note {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius);
    background: var(--nx-card);
    color: var(--nx-muted);
}

.nx-note strong {
    display: block;
    color: var(--nx-ink);
    font-size: 0.92rem;
}

.nx-note span {
    font-size: 0.85rem;
}


/* Filters above a table: one quiet row, applied as you choose. */
.fi-ta-filters-above-content-ctn {
    padding: 1rem 1.25rem 0.25rem;
    border-bottom: 0;
}

.fi-ta-filters-above-content-ctn .fi-ta-filters-header {
    display: none;
}

.fi-ta-header-toolbar {
    padding-inline: 1.25rem;
}

.fi-ta-search-field {
    flex: 1;
    max-width: 36rem;
}

.fi-ta-header-toolbar > div:first-child:empty + div,
.fi-ta-header-toolbar > div:last-child {
    flex: 1;
    justify-content: flex-start;
}

.fi-badge {
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-weight: 600;
}

/* Row actions as outlined squares. */
.fi-ta-actions .fi-icon-btn {
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--nx-line);
    border-radius: 8px;
    color: var(--nx-ink-2);
}

.fi-ta-actions .fi-icon-btn:hover {
    background: var(--nx-page);
    color: var(--nx-blue);
}


/* ---------- Dashboard ---------- */

.nx-dash {
    display: grid;
    gap: 1.25rem;
}

.nx-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.nx-kpi {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius);
    background: var(--nx-card);
}

.nx-kpi-icon,
.nx-follow-icon,
.nx-activity-icon {
    display: grid;
    flex: none;
    place-items: center;
    border-radius: 50%;
}

.nx-kpi-icon {
    width: 3.25rem;
    height: 3.25rem;
}

.nx-kpi-icon .nx-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.nx-kpi-label {
    color: var(--nx-ink-2);
    font-size: 0.9rem;
}

.nx-kpi-value {
    color: var(--nx-ink);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}

.nx-tone-blue { background: var(--nx-blue-soft); color: var(--nx-blue); }
.nx-tone-orange { background: #fdeedd; color: #c76a12; }
.nx-tone-teal { background: var(--nx-teal-soft); color: var(--nx-teal); }
.nx-tone-violet { background: #eee8fb; color: #6b3fb5; }
.nx-tone-red { background: var(--nx-red-soft); color: var(--nx-red); }

.nx-dash-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.nx-dash-row-main {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.nx-card-flush {
    padding: 0;
    overflow: hidden;
}

.nx-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--nx-line);
}

.nx-card-head h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--nx-ink);
    font-size: 1.05rem;
    font-weight: 700;
}

.nx-link {
    color: var(--nx-teal);
    font-size: 0.88rem;
    font-weight: 600;
}

.nx-link:hover {
    text-decoration: underline;
}

.nx-count {
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: var(--nx-page);
    color: var(--nx-ink-2);
    font-size: 0.8rem;
}

.nx-card-flush > .nx-empty {
    padding: 1.5rem 1.25rem;
}

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

.nx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.nx-table th {
    padding: 0.7rem 1rem;
    background: #f8fafc;
    color: var(--nx-ink-2);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.nx-table td {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--nx-line);
    color: var(--nx-ink-2);
    vertical-align: middle;
}

.nx-table tr.is-next td {
    background: var(--nx-teal-soft);
}

.nx-table tr.is-next .nx-time {
    color: var(--nx-teal);
    font-weight: 700;
}

.nx-time {
    color: var(--nx-ink);
    font-variant-numeric: tabular-nums;
}

.nx-cell-action {
    text-align: right;
    white-space: nowrap;
}

.nx-person-meta {
    display: block;
    color: var(--nx-muted);
    font-size: 0.8rem;
}

.nx-waiting li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--nx-line);
}

.nx-waiting li:first-child {
    border-top: 0;
}

.nx-wait {
    color: #15803d;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.nx-wait.is-long {
    color: #c76a12;
}

.nx-activity,
.nx-follow {
    padding: 0.25rem 0;
}

.nx-activity li {
    position: relative;
    display: grid;
    grid-template-columns: 3rem auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 1.25rem 0.7rem 2rem;
}

.nx-activity li::before {
    position: absolute;
    top: 50%;
    left: 1.1rem;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: -0.25rem;
    border-radius: 50%;
    background: var(--nx-teal);
    content: '';
}

.nx-activity li + li {
    border-top: 1px solid var(--nx-line);
}

.nx-activity time {
    color: var(--nx-muted);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.nx-activity-icon {
    width: 2.4rem;
    height: 2.4rem;
    background: var(--nx-blue-soft);
    color: var(--nx-blue);
}

.nx-activity-body strong,
.nx-follow-body strong {
    display: block;
    color: var(--nx-ink);
    font-size: 0.9rem;
}

.nx-activity-body span,
.nx-follow-body span {
    display: block;
    color: var(--nx-ink-2);
    font-size: 0.84rem;
}

.nx-activity-by {
    color: var(--nx-muted);
    font-size: 0.82rem;
    white-space: nowrap;
}

.nx-follow li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1.25rem;
}

.nx-follow li + li {
    border-top: 1px solid var(--nx-line);
}

.nx-follow-icon {
    width: 2.6rem;
    height: 2.6rem;
}

.nx-follow-body small {
    display: block;
    color: var(--nx-muted);
    font-size: 0.8rem;
}

.nx-activity-body:hover strong,
.nx-follow-body:hover strong {
    color: var(--nx-teal);
}

@media (max-width: 1200px) {
    .nx-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nx-dash-row,
    .nx-dash-row-main {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .nx-kpis {
        grid-template-columns: minmax(0, 1fr);
    }

    .nx-activity li {
        grid-template-columns: 3rem minmax(0, 1fr);
    }

    .nx-activity-icon,
    .nx-activity-by {
        display: none;
    }

    .nx-waiting li {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}


/* Names and phones stay on one line; the table scrolls on narrow screens. */
.nx-table .nx-person-name,
.nx-table .nx-person-meta {
    white-space: nowrap;
}

.nx-table .fi-badge,
.nx-waiting .fi-badge {
    max-width: none;
}

.nx-table .fi-badge .fi-badge-label-ctn,
.nx-table .fi-badge .truncate {
    overflow: visible;
    text-overflow: clip;
}

.nx-table .fi-badge-label {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

.nx-person .nx-avatar {
    flex: none;
}

.nx-waiting .nx-person {
    min-width: 0;
}

.nx-waiting .nx-person-name {
    white-space: normal;
}


/* ---------- Agenda ---------- */

.nx-agenda {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.nx-agenda.has-panel {
    grid-template-columns: minmax(0, 1fr) 20rem;
}

.nx-cal-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--nx-line);
}

.nx-cal-nav,
.nx-cal-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.nx-cal-step {
    border: 1px solid var(--nx-line);
    border-radius: 8px;
}

.nx-cal-range {
    margin-left: 0.5rem;
    color: var(--nx-ink);
    font-size: 1.15rem;
    font-weight: 600;
}

.nx-select {
    padding: 0.45rem 2rem 0.45rem 0.75rem;
    border: 1px solid var(--nx-line);
    border-radius: 8px;
    background-color: var(--nx-card);
    color: var(--nx-ink-2);
    font-size: 0.88rem;
}

.nx-segmented {
    display: inline-flex;
    padding: 0.2rem;
    border: 1px solid var(--nx-line);
    border-radius: 10px;
    background: var(--nx-card);
}

.nx-segmented button {
    padding: 0.4rem 0.95rem;
    border-radius: 8px;
    color: var(--nx-ink-2);
    font-size: 0.88rem;
    font-weight: 500;
}

.nx-segmented button.is-active {
    background: var(--nx-teal);
    color: #fff;
}

.nx-segmented button:focus-visible,
.nx-event:focus-visible,
.nx-month-day:focus-visible {
    outline: 2px solid var(--nx-blue);
    outline-offset: 2px;
}

.nx-grid-scroll {
    overflow-x: auto;
    overflow-y: hidden;
}

.nx-grid {
    --nx-hour: 5rem;
    display: grid;
    grid-template-columns: 4rem repeat(var(--nx-days), minmax(7.5rem, 1fr));
    grid-template-rows: auto calc(var(--nx-hour) * 10);
    min-width: calc(4rem + var(--nx-days) * 7.5rem);
}

.nx-grid-corner,
.nx-grid-dayhead {
    border-bottom: 1px solid var(--nx-line);
}

.nx-grid-dayhead {
    padding: 0.75rem 0.5rem;
    border-left: 1px solid var(--nx-line);
    text-align: center;
}

.nx-grid-dayhead strong {
    display: block;
    color: var(--nx-ink);
    font-size: 0.92rem;
}

.nx-grid-dayhead span {
    color: var(--nx-muted);
    font-size: 0.82rem;
}

.nx-grid-dayhead.is-today {
    background: var(--nx-blue-soft);
}

.nx-grid-dayhead.is-today strong,
.nx-grid-dayhead.is-today span {
    color: var(--nx-blue);
}

.nx-grid-hours {
    position: relative;
}

.nx-grid-hours span {
    position: absolute;
    right: 0.6rem;
    transform: translateY(-50%);
    color: var(--nx-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.nx-grid-hours span:first-child {
    transform: none;
}

.nx-grid-hours span:last-child {
    transform: translateY(-100%);
}

.nx-grid-col {
    position: relative;
    border-left: 1px solid var(--nx-line);
}

.nx-grid-col.is-today {
    background: #f6f9fe;
}

.nx-grid-line {
    position: absolute;
    right: 0;
    left: 0;
    border-top: 1px dashed #edf0f5;
}

.nx-grid-lunch {
    position: absolute;
    right: 0;
    left: 0;
    display: grid;
    place-items: center;
    background: #fbf6ea;
    color: #9a8a66;
    font-size: 0.78rem;
    text-align: center;
}

.nx-grid-now {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 3;
    border-top: 2px solid var(--nx-red);
    pointer-events: none;
}

.nx-grid-now::before {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nx-red);
    content: '';
}

.nx-event {
    position: absolute;
    right: 0.3rem;
    left: 0.3rem;
    z-index: 2;
    min-height: 1.5rem;
    overflow: hidden;
    padding: 0.2rem 0.5rem;
    border: 1px solid transparent;
    border-left-width: 3px;
    border-radius: 6px;
    text-align: left;
    line-height: 1.25;
}

.nx-event-time {
    display: block;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.nx-event-name {
    display: block;
    overflow: hidden;
    font-size: 0.82rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nx-event.is-short {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-block: 0;
}

.nx-event.is-short .nx-event-time {
    flex: none;
}

.nx-event.is-short .nx-event-time::after {
    content: ' ·';
}

.nx-event-teal { background: #d9f2ec; border-color: #9fd9cc; border-left-color: var(--nx-teal); color: #0d4f4c; }
.nx-event-orange { background: #fdeccd; border-color: #f6cf8e; border-left-color: #e08a1e; color: #6b4206; }
.nx-event-blue { background: #dde9fb; border-color: #a9c6f0; border-left-color: var(--nx-blue); color: #173f73; }
.nx-event-done { background: #eef1f6; border-color: #d6dce6; border-left-color: #7d8aa3; color: #3b4a66; }
.nx-event-gray { background: #f1f2f4; border-color: #dfe1e5; border-left-color: #a4a9b3; color: #7a808b; }
.nx-event-gray .nx-event-name { text-decoration: line-through; }

.nx-event:hover {
    filter: brightness(0.97);
}

.nx-event.is-selected {
    z-index: 4;
    box-shadow: 0 0 0 2px var(--nx-card), 0 0 0 4px var(--nx-blue);
}

.nx-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
    padding: 0.9rem 1.25rem;
    border-top: 1px solid var(--nx-line);
    color: var(--nx-ink-2);
    font-size: 0.85rem;
}

.nx-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.nx-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
}

.nx-dot-teal { background: var(--nx-teal); }
.nx-dot-orange { background: #e08a1e; }
.nx-dot-blue { background: var(--nx-blue); }
.nx-dot-done { background: #7d8aa3; }
.nx-dot-gray { background: #b8bcc4; }

.nx-month {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.nx-month-head {
    padding: 0.6rem;
    border-bottom: 1px solid var(--nx-line);
    color: var(--nx-ink-2);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

.nx-month-day {
    display: flex;
    min-height: 6rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.6rem;
    border-right: 1px solid var(--nx-line);
    border-bottom: 1px solid var(--nx-line);
    text-align: left;
}

.nx-month-day:nth-child(7n) {
    border-right: 0;
}

.nx-month-day:hover {
    background: var(--nx-page);
}

.nx-month-day.is-other .nx-month-num {
    color: #b3bccb;
}

.nx-month-day.is-today .nx-month-num {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border-radius: 50%;
    background: var(--nx-blue);
    color: #fff;
}

.nx-month-num {
    color: var(--nx-ink);
    font-weight: 600;
}

.nx-month-count {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--nx-teal-soft);
    color: var(--nx-teal);
    font-size: 0.78rem;
    font-weight: 600;
}

.nx-cal-panel {
    position: sticky;
    top: 5rem;
    display: grid;
    gap: 1.25rem;
}

.nx-cal-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nx-cal-panel-head h2 {
    color: var(--nx-ink);
    font-size: 1.05rem;
    font-weight: 700;
}

.nx-cal-who .nx-person-name {
    font-size: 1.05rem;
}

.nx-cal-facts {
    display: grid;
    gap: 0.85rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--nx-line);
}

.nx-cal-facts div {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--nx-ink-2);
    font-size: 0.92rem;
}

.nx-cal-facts dt {
    color: var(--nx-muted);
}

.nx-cal-facts a {
    color: var(--nx-ink-2);
}

.nx-cal-actions {
    display: grid;
    gap: 0.6rem;
}

.nx-cal-actions .fi-btn {
    width: 100%;
    justify-content: center;
}

@media (max-width: 1280px) {
    .nx-agenda.has-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .nx-cal-panel {
        position: static;
    }
}


/* ---------- Consultation workspace ---------- */

.nx-work-head {
    gap: 0.6rem;
}

.nx-work-title {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.nx-work-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.nx-work-patient,
.nx-work-side > .nx-card {
    display: grid;
    gap: 0.9rem;
    align-content: start;
}

.nx-work-side {
    display: grid;
    gap: 1.25rem;
}

.nx-work-contact {
    display: grid;
    gap: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--nx-line);
    color: var(--nx-ink-2);
    font-size: 0.92rem;
}

.nx-work-contact li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.nx-work-subtitle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    color: var(--nx-ink);
    font-size: 0.92rem;
    font-weight: 600;
}

.nx-work-note {
    color: var(--nx-muted);
    font-size: 0.9rem;
}

.nx-work-box {
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    background: var(--nx-page);
    color: var(--nx-ink-2);
    font-size: 0.92rem;
    white-space: pre-line;
}

.nx-work-box.is-warning {
    background: #fdf3dc;
    color: #7a5410;
}

.nx-work-vitals {
    display: grid;
    gap: 0.55rem;
    padding: 0.8rem 0.9rem;
    border-radius: 8px;
    background: var(--nx-page);
    font-size: 0.9rem;
}

.nx-work-vitals div {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.nx-work-vitals dt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--nx-ink-2);
}

.nx-work-vitals dd {
    color: var(--nx-ink);
    font-weight: 600;
    white-space: nowrap;
}

.nx-work-tiles {
    display: grid;
    gap: 0.6rem;
}

.nx-work-tile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--nx-line);
    border-radius: 10px;
    background: var(--nx-card);
    color: var(--nx-ink);
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
}

.nx-work-tile span {
    flex: 1;
}

.nx-work-tile:hover {
    border-color: var(--nx-teal);
    background: var(--nx-teal-soft);
}

.nx-work-tile:focus-visible {
    outline: 2px solid var(--nx-blue);
    outline-offset: 2px;
}

.nx-work-docs {
    display: grid;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.nx-work-docs li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.nx-work-docs a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--nx-blue);
    font-weight: 500;
}

.nx-work-docs small {
    color: var(--nx-muted);
}

.nx-work-history {
    display: grid;
}

.nx-work-history li {
    position: relative;
    display: grid;
    gap: 0.3rem;
    padding: 0 0 1.1rem 1.4rem;
    border-left: 2px solid var(--nx-line);
    margin-left: 0.3rem;
}

.nx-work-history li:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
}

.nx-work-history li::before {
    position: absolute;
    top: 0.3rem;
    left: -0.4rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: #b8c2d3;
    content: '';
}

.nx-work-history-when {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--nx-muted);
    font-size: 0.85rem;
}

.nx-work-history strong {
    color: var(--nx-ink);
    font-size: 0.95rem;
}

.nx-work-history p {
    color: var(--nx-ink-2);
    font-size: 0.88rem;
}


/* ---------- Billing ---------- */

.nx-kpi-hint {
    margin-top: 0.15rem;
    color: var(--nx-muted);
    font-size: 0.85rem;
}

.nx-billing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 1.25rem;
    align-items: start;
}

.nx-billing-main {
    overflow: hidden;
}

.nx-billing-main .fi-ta-ctn {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.nx-tabs {
    display: flex;
    gap: 1.5rem;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--nx-line);
    overflow-x: auto;
    overflow-y: hidden;
}

.nx-tabs button {
    padding: 0.95rem 0 0.8rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--nx-ink-2);
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
}

.nx-tabs button.is-active {
    border-bottom-color: var(--nx-teal);
    color: var(--nx-teal);
    font-weight: 600;
}

.nx-tabs button:focus-visible {
    outline: 2px solid var(--nx-blue);
    outline-offset: 2px;
}

.nx-billing-side {
    display: grid;
    gap: 1rem;
    position: sticky;
    top: 5rem;
}

.nx-billing-form {
    display: grid;
    gap: 1rem;
}

.nx-billing-submit {
    width: 100%;
}

.nx-pay-balance {
    padding: 0.65rem 0.9rem;
    border-radius: 8px;
    background: #fdeedd;
    color: #8a4a0c;
    font-weight: 600;
}

@media (max-width: 1280px) {
    .nx-billing {
        grid-template-columns: minmax(0, 1fr);
    }

    .nx-billing-side {
        position: static;
    }
}

.nx-billing-kpis .nx-kpi-value {
    font-size: 1.4rem;
    white-space: nowrap;
}

.nx-pay-modes.fi-fo-toggle-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    row-gap: 0.5rem;
}

.nx-pay-modes.fi-fo-toggle-buttons > * {
    margin: 0;
}

.nx-pay-modes.fi-fo-toggle-buttons .fi-fo-toggle-buttons-input + .fi-btn.fi-btn.fi-color-primary {
    justify-content: flex-start;
    width: 100%;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--nx-line);
    border-radius: 8px;
    white-space: nowrap;
    font-size: 0.9rem;
    background: var(--nx-card);
    box-shadow: none;
    color: var(--nx-ink);
}

.nx-pay-modes.fi-fo-toggle-buttons .fi-fo-toggle-buttons-input + .fi-btn.fi-btn.fi-color-primary .fi-icon {
    color: var(--nx-muted);
}

.nx-pay-modes.fi-fo-toggle-buttons .fi-fo-toggle-buttons-input:checked + .fi-btn.fi-btn.fi-color-primary {
    border-color: var(--nx-teal);
    background: var(--nx-teal-soft);
    color: var(--nx-teal);
    box-shadow: inset 0 0 0 1px var(--nx-teal);
}

.nx-pay-modes.fi-fo-toggle-buttons .fi-fo-toggle-buttons-input:checked + .fi-btn.fi-btn.fi-color-primary .fi-icon {
    color: var(--nx-teal);
}

.nx-pay-modes .fi-fo-toggle-buttons-input:focus-visible + .fi-btn {
    outline: 2px solid var(--nx-blue);
    outline-offset: 2px;
}

/* An .sr-only label is absolutely positioned; a scrolling table must be its
   containing block, or the label escapes the scroll box and widens the page. */
.nx-table-wrap {
    position: relative;
}

/* Filament's build does not ship every Tailwind utility. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    margin: -1px;
    padding: 0;
    border: 0;
    white-space: nowrap;
}

/* In the narrow side column, the call button takes its own row so the
   patient's name and the waiting time never overlap. */
.nx-waiting {
    container-type: inline-size;
}

@container (max-width: 26rem) {
    .nx-waiting li {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 0.6rem;
    }

    .nx-waiting li > :last-child {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

/* On a phone the topbar is too narrow for search, the demo pill and the user
   menu; the pill keeps its icon, and its text stays for screen readers. */
@media (max-width: 640px) {
    .nx-fictional {
        position: relative;
        margin-inline: 0.25rem;
        padding: 0.35rem;
    }

    .nx-fictional-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

.nx-nowrap {
    white-space: nowrap;
}

/* The day's table needs about 700px. Up to 1366px the waiting room goes
   under it; above, it sits beside it, and long names wrap within a column
   that never drops below 14rem. Phone numbers stay whole. */
@media (max-width: 1366px) {
    .nx-dash-row-main {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 1367px) {
    .nx-dash-row-main .nx-table th,
    .nx-dash-row-main .nx-table td {
        padding-inline: 0.75rem;
    }

    .nx-dash-row-main .nx-table td:nth-child(2) {
        min-width: 14rem;
    }

    .nx-dash-row-main .nx-table .nx-person-name,
    .nx-dash-row-main .nx-table .nx-person-meta {
        white-space: normal;
    }
}

/* NXS-13: consultation privacy. */
.nx-private-note {
    margin: 0 0 0.6rem;
    color: var(--nx-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.nx-shares {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

.nx-shares li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--nx-line);
    border-radius: 8px;
}

.nx-shares li > span {
    display: grid;
    min-width: 0;
}

.nx-shares small {
    color: var(--nx-muted);
    font-size: 0.78rem;
}

/* Access log (NXS-22): emergency accesses stand out. */
.nx-log-emergency {
    background: #fef2f2;
}