/* ============================================================================
   Dox — shared site stylesheet
   A light sidebar shell + card-based content, shared by every page.
   ============================================================================ */

:root {
    --primary: #2f5fb3;
    --primary-dark: #234a8f;
    --primary-light: #e8f0fe;
    --success: #1f9d55;
    --success-bg: #e6f7ec;
    --danger: #d9364a;
    --danger-bg: #fceaec;
    --warning: #b8860b;
    --warning-bg: #fdf3d9;
    --info: #1a7fa0;
    --bg: #f3f5f9;
    --surface: #ffffff;
    --border: #e3e7ee;
    --text: #1f2733;
    --text-muted: #6b7480;
    --sidebar-bg: #16223f;
    --sidebar-bg-active: #1f3266;
    --sidebar-text: #c7d0e6;
    --sidebar-text-active: #ffffff;
    --radius: 10px;
    --shadow: 0 2px 10px rgba(20, 30, 60, 0.06);
    --shadow-lg: 0 10px 30px rgba(20, 30, 60, 0.12);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
}

a {
    color: var(--primary);
    text-decoration: none;
}

/* ---------------------------------------------------------------------------
   App shell
   --------------------------------------------------------------------------- */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 250px;
    flex-shrink: 0;
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

/* The DeepMed wordmark. The sidebar is dark, so it shows the white variant of
   the logo; every other surface is light and shows the colour one. */
.brand-logo {
    display: block;
    width: auto;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    padding: 22px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

    .sidebar-brand .brand-logo {
        height: 28px;
    }

.sidebar-nav {
    list-style: none;
    margin: 16px 0 0 0;
    padding: 0 12px;
    flex: 1;
}

    .sidebar-nav li {
        margin-bottom: 4px;
    }

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 8px;
    color: var(--sidebar-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

    .sidebar-link i {
        width: 18px;
        text-align: center;
        font-size: 15px;
    }

    .sidebar-link:hover {
        background: rgba(255, 255, 255, 0.06);
        color: #ffffff;
    }

    .sidebar-link.active {
        background: var(--sidebar-bg-active);
        color: var(--sidebar-text-active);
    }

.sidebar-footer {
    padding: 16px 24px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 32px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.topbar-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 13px;
}

.topbar-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #6fa0ff);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

.content {
    flex: 1;
    padding: 28px 32px 48px;
    max-width: 1100px;
    width: 100%;
}

.footer-note {
    padding: 16px 32px 28px;
    color: var(--text-muted);
    font-size: 12px;
}

@media (max-width: 860px) {
    .app-shell {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    .sidebar-brand {
        border-bottom: none;
    }

    .sidebar-nav {
        display: flex;
        margin: 0;
        padding: 0 12px 12px;
        flex: none;
    }
}

/* ---------------------------------------------------------------------------
   Auth screen (Login)
   --------------------------------------------------------------------------- */

.auth-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #16223f 0%, #234a8f 45%, #2f5fb3 100%);
    padding: 24px;
}

.auth-card {
    background: var(--surface);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    padding: 40px 36px;
    width: 100%;
    max-width: 400px;
}

.auth-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 6px;
}

    .auth-brand .brand-logo {
        height: 34px;
    }

.auth-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 28px;
}

/* 0056: the demo box on Register.aspx - the whole card is the label, so the tick is hard to miss */
.auth-demo {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--primary-light);
    cursor: pointer;
}

    .auth-demo input {
        margin-top: 3px;
        flex-shrink: 0;
    }

.auth-demo-text {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-muted);
}

    .auth-demo-text b {
        display: block;
        margin-bottom: 2px;
        font-size: 13.5px;
        color: var(--text);
    }

/* ---------------------------------------------------------------------------
   Login (rendered inside the normal content area, under the shared shell)
   --------------------------------------------------------------------------- */

.login-wrap {
    display: flex;
    justify-content: center;
    padding-top: 40px;
}

.login-card {
    width: 100%;
    max-width: 380px;
}

/* ---------------------------------------------------------------------------
   Cards / panels
   --------------------------------------------------------------------------- */

.card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 26px 28px;
    margin-bottom: 24px;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.card-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.card-subtitle {
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 4px;
}

/* ---------------------------------------------------------------------------
   Profile header
   --------------------------------------------------------------------------- */

.profile-banner {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 24px;
}

.profile-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #6fa0ff);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    flex-shrink: 0;
}

.profile-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px 0;
}

.profile-email {
    color: var(--text-muted);
    font-size: 13.5px;
    margin: 0 0 10px 0;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-right: 8px;
}

.badge-primary {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.badge-success {
    background: var(--success-bg);
    color: var(--success);
}

.badge-danger {
    background: var(--danger-bg);
    color: var(--danger);
}

.badge-warning {
    background: var(--warning-bg);
    color: var(--warning);
}

.badge-neutral {
    background: var(--bg);
    color: var(--text-muted);
}

/* The three chart statuses side by side (Chart Details header) */
.status-set {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 0;
}

.status-set-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 6px 0 4px;
}

/* ---------------------------------------------------------------------------
   Tabs
   --------------------------------------------------------------------------- */

.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 22px;
    overflow-x: auto;
}

.tab-btn {
    padding: 11px 18px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}

    .tab-btn:hover {
        color: var(--primary);
    }

    .tab-btn.active {
        color: var(--primary);
        border-bottom-color: var(--primary);
    }

.tab-panel {
    display: none;
}

    .tab-panel.active {
        display: block;
    }

/* ---------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------- */

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px 22px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .form-field.full-width {
        grid-column: 1 / -1;
    }

    /* 0052 / 0053: a field the chosen mode does not use - shown, greyed, its control disabled (coding-mode.js) */
    .form-field-off {
        opacity: .55;
    }

        .form-field-off .form-control[disabled] {
            background: var(--bg);
            cursor: not-allowed;
        }

.form-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
}

.form-hint {
    font-size: 11.5px;
    color: var(--text-muted);
}

.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .form-control:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(47, 95, 179, 0.14);
    }

    .form-control[readonly], .form-control:disabled {
        background: var(--bg);
        color: var(--text-muted);
        cursor: not-allowed;
    }

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7480'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.field-error {
    color: var(--danger);
    font-size: 11.5px;
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
}

    .btn-primary:hover {
        background: var(--primary-dark);
    }

.btn-secondary {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
}

    .btn-secondary:hover {
        background: #e9ecf3;
    }

.btn-block {
    width: 100%;
    justify-content: center;
}

/* ---------------------------------------------------------------------------
   Alerts / notifications
   --------------------------------------------------------------------------- */

.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 20px;
}

/* 0035: shown on every page while an Administrator acts as another user */
.acting-as-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 24px;
    background: var(--warning-bg);
    color: #6b4e00;
    border-bottom: 1px solid #f0dca0;
    font-size: 13px;
    font-weight: 500;
}

.acting-as-bar span {
    flex: 1;
}

/* 0036: work lists - sub-items under Charts in the menu, counts that ask for action */
.sidebar-link.sidebar-sub {
    padding-left: 34px;
    font-size: 13px;
}

.work-attention {
    display: inline-block;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--warning-bg);
    color: #8a5a00;
    font-weight: 600;
    text-align: center;
}

.work-zero {
    color: var(--text-muted);
}

.role-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding-top: 6px;
}

.role-checks label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.alert-success {
    background: var(--success-bg);
    color: #146336;
}

.alert-danger {
    background: var(--danger-bg);
    color: #93202f;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.info-item {
    background: var(--bg);
    border-radius: 8px;
    padding: 12px 14px;
    border-left: 3px solid var(--primary);
}

.info-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.info-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

/* ---------------------------------------------------------------------------
   Charts list / filters / data table
   --------------------------------------------------------------------------- */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 16px;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 160px;
}

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

/* List pages (Charts, Doctors, Packages, Subscriptions): the page fits the screen and the
   table scrolls inside its card - both ways, with a sticky header - instead of the page growing
   with the rows. The filter / form cards above keep their height; on a screen too short for
   them the page scrolls as a whole (.main overflow auto). The list card is the last card of the
   page and takes the remaining height; its scrolling div is .list-scroll (on Charts inside the
   UpdatePanel #upnlCharts). */

.main:has(.list-card) {
    height: 100vh;
    overflow: auto;
}

    .main:has(.list-card) .footer-note {
        display: none;
    }

.content:has(.list-card) {
    max-width: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 20px 24px;
}

    .content:has(.list-card) > * {
        flex-shrink: 0;
    }

    .content:has(.list-card) > .list-card {
        flex: 1 1 auto;
        min-height: 220px;
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
        padding: 16px 20px;
    }

.list-card > .filter-bar {
    margin-bottom: 12px;
}

#upnlCharts {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.list-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* 0043: the pager under a chart list (Controls\ListPager.ascx) */
.list-pager {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding-top: 10px;
    margin-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
}

    .list-pager b {
        color: var(--text);
        font-weight: 600;
    }

.list-pager-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.list-pager-size {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 8px 0 0;
    font-size: 13px;
}

    .list-pager-size .form-control {
        width: auto;
        padding: 4px 8px;
        font-size: 13px;
    }

.list-pager-page {
    min-width: 92px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.list-pager .btn.disabled {
    opacity: 0.45;
    pointer-events: none;
}

    .list-scroll .data-table thead th {
        position: sticky;
        top: 0;
        background: var(--surface);
        z-index: 1;
    }

    .data-table th {
        text-align: left;
        padding: 10px 12px;
        border-bottom: 2px solid var(--border);
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        white-space: nowrap;
    }

    .data-table td {
        padding: 12px;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
        white-space: nowrap;
    }

    .data-table tbody tr:hover td {
        background: var(--bg);
    }

/* A list with many columns (Charts): tighter cells and badges, long names cut with an ellipsis and the full
   text in the cell's tooltip, icon-only row actions - the 14 columns measured 1433px before and 1237px after,
   so the table fits the screen instead of scrolling sideways. */
.data-table-compact {
    font-size: 12.5px;
}

    .data-table-compact th,
    .data-table-compact td {
        padding: 7px 9px;
    }

    .data-table-compact th {
        font-size: 10.5px;
        letter-spacing: 0.2px;
    }

    .data-table-compact .badge {
        padding: 2px 6px;
        font-size: 10.5px;
    }

    .data-table-compact .cell-trunc {
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .data-table-compact .row-actions {
        gap: 4px;
    }

@media (max-width: 1500px) {
    .data-table-compact .cell-trunc {
        max-width: 90px;
    }
}

.btn.btn-icon {
    padding: 4px 6px;
}

    .btn.btn-icon i {
        margin: 0;
    }

.row-actions {
    display: flex;
    gap: 6px;
}

.btn-xs {
    padding: 6px 12px;
    font-size: 12px;
}

/* 0067: a small button under a form field (User Profile: "Withdraw request") keeps its own width */
.form-field > .btn-xs {
    align-self: flex-start;
}

/* 0067: the join requests on the Users page - a long list scrolls inside its card */
.join-requests-scroll {
    max-height: 40vh;
    overflow: auto;
}

/* ---------------------------------------------------------------------------
   Add Chart - document rows
   --------------------------------------------------------------------------- */

.doc-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 14px;
    align-items: end;
}

/* ---------------------------------------------------------------------------
   Multi-file picker (AddChart, BulkAddCharts) - Scripts/file-picker.js
   --------------------------------------------------------------------------- */

.file-picker-type-template {
    display: none;
}

.file-picker-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 22px;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text-muted);
    margin-bottom: 16px;
    transition: border-color 0.15s, background 0.15s;
}

    .file-picker-zone i {
        font-size: 22px;
        color: var(--primary);
    }

    .file-picker-zone.is-dragover {
        border-color: var(--primary);
        background: var(--primary-light);
    }

.file-picker-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 8px;
}

    .file-picker-toolbar .form-control {
        width: auto;
        min-width: 200px;
    }

.alert-info {
    background: var(--primary-light);
    color: var(--primary-dark);
}

/* 0067: asks the user to confirm before anything is saved (User Profile: joining an existing group) */
.alert-warning {
    background: var(--warning-bg);
    color: #6b4e00;
}

.alert-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.empty-msg {
    color: var(--text-muted);
    font-size: 13px;
    padding: 10px 0;
}

/* ---------------------------------------------------------------------------
   Hidable menu (Site.Master toggle, remembered in localStorage)
   --------------------------------------------------------------------------- */

.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sidebar-toggle {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 15px;
    flex-shrink: 0;
}

    .sidebar-toggle:hover {
        background: var(--bg);
        color: var(--primary);
    }

html.sidebar-collapsed .sidebar {
    display: none;
}

/* ---------------------------------------------------------------------------
   Chart viewer - a full-height workspace: the page itself never scrolls, each
   pane scrolls on its own. Colours, pills and affirmation styles are ported
   from the legacy CodeDoctorWeb RepDetails.aspx.
   --------------------------------------------------------------------------- */

.main:has(.viewer-page) {
    height: 100vh;
    overflow: hidden;
}

    .main:has(.viewer-page) .topbar {
        padding: 10px 20px;
    }

    .main:has(.viewer-page) .topbar-title {
        font-size: 17px;
    }

    .main:has(.viewer-page) .footer-note {
        display: none;
    }

.content:has(.viewer-page) {
    max-width: none;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.viewer-page {
    --negated: #dc3545;
    --selected-color: #ff6b6b;
    --c-symptom: #ffcccc;
    --c-medication: #ccffcc;
    --c-anatomy: #ccccff;
    --c-lab: #ffffcc;
    --c-disease: #ffccff;
    --c-procedure: #ccffff;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.viewer-pane {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Toolbar: back / chart / document tabs / actions on one row */

.viewer-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 8px 12px;
    flex-shrink: 0;
}

.viewer-back {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
}

    .viewer-back:hover {
        background: var(--bg);
        color: var(--primary);
    }

.viewer-chart {
    flex-shrink: 0;
    padding-right: 14px;
    border-right: 1px solid var(--border);
    max-width: 280px;
}

.viewer-chart-title {
    font-size: 15px;
    font-weight: 700;
    display: flex;
    flex-wrap: wrap;        /* five status badges on the Coding page: wrap inside the box instead of overflowing onto the document tabs */
    align-items: center;
    gap: 4px 8px;
}

    .viewer-chart-title .badge {
        font-size: 10px;
        padding: 2px 8px;
        margin: 0;
        white-space: nowrap;
    }

.viewer-chart-no {
    white-space: nowrap;
}

.coding-page .viewer-chart {
    max-width: 340px;
}

.viewer-chart-sub {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.viewer-doc-tabs {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 0;
    scrollbar-width: thin;
}

.viewer-doc {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    color: var(--text);
    flex-shrink: 0;
    max-width: 240px;
}

    .viewer-doc i {
        color: var(--text-muted);
    }

    .viewer-doc:hover {
        background: var(--bg);
    }

    .viewer-doc.active {
        background: var(--primary-light);
        border-color: var(--primary);
    }

        .viewer-doc.active i {
            color: var(--primary);
        }

.viewer-doc-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.viewer-doc-name {
    font-weight: 600;
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.viewer-doc-meta {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.viewer-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Body: text pane + side column, filling the remaining height */

.viewer-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px 12px;
}

.viewer-text-pane {
    overflow: hidden;
}

.viewer-filters {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 7px 12px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.viewer-hint {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

.filter-section {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.filter-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    margin-right: 2px;
}

.pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid var(--border);
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 600;
    transition: all 0.2s ease;
    background: #fff;
    color: #666;
    white-space: nowrap;
}

    .pill input {
        margin: 0 5px 0 0;
        cursor: pointer;
    }

    .pill:has(input:not(:checked)) {
        background: #f8f9fa !important;
        border-color: #ddd !important;
        color: #999 !important;
        opacity: 0.7;
    }

    .pill.p-symptom:has(input:checked) { background-color: var(--c-symptom); border-color: #f8a8a8; color: #721c24; }
    .pill.p-medication:has(input:checked) { background-color: var(--c-medication); border-color: #a8f8a8; color: #155724; }
    .pill.p-anatomy:has(input:checked) { background-color: var(--c-anatomy); border-color: #a8a8f8; color: #0c0c52; }
    .pill.p-lab:has(input:checked) { background-color: var(--c-lab); border-color: #f8f8a8; color: #856404; }
    .pill.p-disease:has(input:checked) { background-color: var(--c-disease); border-color: #f8a8f8; color: #520c52; }
    .pill.p-procedure:has(input:checked) { background-color: var(--c-procedure); border-color: #a8f8f8; color: #0c5252; }
    .pill.p-affirmed:has(input:checked) { background-color: #e2e3e5; border-color: #d6d8db; color: #383d41; }
    .pill.p-uncertain:has(input:checked) { background-color: #fff3cd; border-color: #ffeeba; color: #d97706; }
    .pill.p-negated:has(input:checked) { background-color: #f8d7da; border-color: #f5c6cb; color: var(--negated); }

.viewer-notice {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 14px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 12.5px;
    flex-shrink: 0;
}

/* cdi-query.js: a query changed while the CDI page was open (the physician answered) - Reload */
.cq-live-notice {
    border-radius: var(--radius);
    background: var(--warning-bg);
    color: var(--warning);
}

    .cq-live-notice > span {
        flex: 1;
    }

.viewer-report-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
}

.report-display {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 20px;
    line-height: 1.6;
    font-family: 'Consolas', monospace;
    font-size: 13.5px;
    white-space: pre-wrap;
}

.med-item {
    transition: 0.2s;
    border-radius: 3px;
    cursor: pointer;
    padding: 1px 0;
    position: relative;
}

    .med-item.selected {
        box-shadow: 0 0 0 2px var(--selected-color);
        z-index: 5;
        animation: pulse-selection 1.5s ease-in-out infinite;
    }

@keyframes pulse-selection {
    0% { box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.7); }
    50% { box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.4); }
    100% { box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.7); }
}

.hl-symptom { background-color: var(--c-symptom) !important; }
.hl-medication { background-color: var(--c-medication) !important; }
.hl-anatomy { background-color: var(--c-anatomy) !important; }
.hl-lab { background-color: var(--c-lab) !important; }
.hl-disease { background-color: var(--c-disease) !important; }
.hl-procedure { background-color: var(--c-procedure) !important; }
.hl-txt-negated { color: var(--negated) !important; font-weight: 600; text-decoration: line-through; }
.hl-txt-uncertain { color: #d97706 !important; font-weight: 600; font-style: italic; }

/* Side column: Entity Mapping (top) and summaries (bottom) share the height */

/* minmax(0, 1fr) columns: an implicit (auto) column grows to its widest min-content - a one-line
   code title (.xcard-title) is as wide as its whole text - and pushed the panes, the ellipsis and
   the Accept / Reject links past the right edge of the screen. */
.viewer-side {
    min-height: 0;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 2fr) minmax(0, 3fr);
    gap: 12px;
}

/* ---------------------------------------------------------------------------
   Coding page (ChartCoding.aspx) - the viewer workspace with a wider side column
   holding the Selected Codes pane and the Suggested | Search pane. The side
   column is an UpdatePanel (#upSide) rendered as display:contents so its two
   sections stay direct grid items of .viewer-side.
   --------------------------------------------------------------------------- */

.coding-page .viewer-body {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 520px);
}

/* The auto-refresh timer's UpdatePanel renders an empty span inside the .viewer-body grid; hidden,
   so it never takes a grid cell (it did, and collapsed the document pane to 0 px). */
#upTimer {
    display: none;
}

/* Tab strips inside the Selected pane (Diagnoses | Procedures) and the Suggested Codes pane
   (Diagnoses | Procedures | Search | Audit | Log); count badges inside the buttons */
.coding-tabs .tab-btn .coding-count {
    margin-left: 4px;
}

.coding-selected .coding-tabs,
.coding-bottom .coding-tabs {
    flex-shrink: 0;
}

#upSide {
    display: contents;
}

/* From Note: the supporting text, via the CSS Custom Highlight API */
::highlight(from-note) {
    background: #ffd54f;
    color: #000;
}

.coding-toast {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    background: var(--text);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12.5px;
    box-shadow: var(--shadow-lg);
    z-index: 20;
    white-space: nowrap;
}

.viewer-text-pane {
    position: relative;
}

.coding-readonly {
    border-radius: var(--radius);
    background: var(--warning-bg);
    color: var(--warning);
}

.coding-alert {
    margin: 8px 12px 0;
    padding: 8px 12px;
    font-size: 12.5px;
}

.coding-count {
    display: inline-block;
    min-width: 20px;
    padding: 0 6px;
    margin-left: 4px;
    border-radius: 10px;
    background: var(--primary-light);
    color: var(--primary-dark);
    text-align: center;
    font-size: 10.5px;
}

.ai-status {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 8px 10px;
    margin: 6px 0 8px;
    border-radius: 8px;
    background: var(--bg);
    color: var(--text-muted);
    font-size: 12px;
}

    .ai-status i {
        color: var(--primary);
        margin-top: 2px;
    }

    .ai-status.ai-status-done {
        background: var(--success-bg);
        color: #146336;
    }

    .ai-status.ai-status-failed {
        background: var(--danger-bg);
        color: #93202f;
    }

        .ai-status.ai-status-failed i {
            color: var(--danger);
        }

.code-group {
    margin-bottom: 10px;
}

.code-group-title {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    padding: 8px 0 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2px;
}

/* One selected code / search hit */
.code-row {
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
}

/* One AI suggestion */
.suggest-card {
    padding: 8px 10px;
    margin: 6px 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

    .suggest-card.is-selected {
        background: var(--success-bg);
        border-color: #b2f5ea;
    }

.code-row-main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

.code-code {
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

.code-desc {
    font-size: 12.5px;
    color: var(--text);
    min-width: 0;
}

.code-hint {
    color: var(--text-muted);
    font-size: 11.5px;
}

.code-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--text-muted);
}

.code-reason {
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--text-muted);
}

    .code-reason b {
        color: var(--text);
        font-weight: 600;
    }

.code-note {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--primary);
    cursor: pointer;
}

    .code-note:hover {
        text-decoration: underline;
    }

    .code-note i {
        margin-right: 3px;
        color: #c9a000;
    }

.code-actions {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.btn-link {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
}

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

    .btn-link.btn-link-danger {
        color: var(--danger);
    }

.source-badge {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--bg);
    color: var(--text-muted);
}

    .source-badge.source-ai { background: #ede7f6; color: #4527a0; }
    .source-badge.source-suggested { background: var(--primary-light); color: var(--primary-dark); }
    .source-badge.source-search { background: #e0f2f1; color: #00695c; }
    .source-badge.source-audit { background: #fff3e0; color: #b45309; }

/* ---- Audit tab: the latest run header, the proposal cards, the history (W2) ---- */

/* The audit buttons are a second group in the toolbar, separated from the coding ones (W3) */
.viewer-actions.viewer-actions-audit {
    margin-left: 6px;
    padding-left: 8px;
    border-left: 1px solid var(--border);
}

.audit-run {
    padding: 8px 10px;
    margin: 6px 0 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
}

.audit-run-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11.5px;
    color: var(--text-muted);
}

/* The LLM's summary keeps its line breaks but nothing else (it is HtmlEncode'd) */
.audit-summary {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--text);
    white-space: pre-line;
}

/* Quality score 0-100: >= 85 good, 60-84 mid, < 60 bad, none neutral (W4) */
.score-pill {
    font-size: 11px;
    font-weight: 800;
    padding: 2px 9px;
    border-radius: 12px;
    font-variant-numeric: tabular-nums;
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

    .score-pill.score-good { background: var(--success-bg); color: var(--success); border-color: transparent; }
    .score-pill.score-mid { background: var(--warning-bg); color: var(--warning); border-color: transparent; }
    .score-pill.score-bad { background: var(--danger-bg); color: var(--danger); border-color: transparent; }

/* One proposed / reviewed audit change */
.audit-card {
    padding: 8px 10px;
    margin: 6px 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

    .audit-card.audit-accepted,
    .audit-card.audit-applied { background: var(--success-bg); border-color: #b2f5ea; }
    .audit-card.audit-rejected { background: var(--danger-bg); border-color: #feb2b2; }
    .audit-card.audit-invalid { background: var(--warning-bg); border-color: #fbd38d; }
    .audit-card.audit-superseded,
    .audit-card.audit-dismissed { opacity: 0.75; }

/* ADD / REMOVE / CHANGE TYPE */
.audit-badge {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--bg);
    color: var(--text-muted);
    white-space: nowrap;
}

    .audit-badge.audit-badge-add { background: #e6fffa; color: #234e52; }
    .audit-badge.audit-badge-remove { background: #fff5f5; color: #822727; }
    .audit-badge.audit-badge-type { background: #fffaf0; color: #7b341e; }

/* Superseded / Dismissed status tags */
.status-tag.tag-muted {
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* Reason box + Accept / Reject on a proposed change */
.audit-review {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

    .audit-review .audit-reason {
        flex: 1;
        min-width: 160px;
        padding: 5px 8px;
        font-size: 12px;
        font-family: inherit;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface);
        color: var(--text);
    }

    .audit-review .code-actions {
        margin-top: 0;
    }

/* Reviewed / applied / invalid changes, collapsed by default */
.audit-history {
    margin-top: 10px;
}

    .audit-history > summary {
        cursor: pointer;
        font-size: 11.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--text-muted);
        padding: 6px 0;
    }

/* ---------------------------------------------------------------------------
   CDI page (ChartCdi.aspx, 0028): the Coding workspace (coding-page column widths)
   with ONE side pane - the Clinical Documentation Integrity pane - holding the
   Documentation Review tab (more CDI tabs later).
   --------------------------------------------------------------------------- */

.cdi-side {
    grid-template-rows: minmax(0, 1fr);
}

/* ---- Documentation Review (0028): the summary by category and one card per item ---- */

.review-summary {
    padding: 8px 10px;
    margin: 6px 0 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    font-size: 12px;
}

.review-summary-title {
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

    .review-summary-title i {
        color: var(--primary);
        margin-right: 4px;
    }

.review-summary-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    color: var(--text-muted);
}

/* The four category colours: red / orange / yellow for the issues, green for well supported */
.review-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border);
}

    .review-dot.review-dot-needs_clarification { background: #e53e3e; }
    .review-dot.review-dot-conflicting_documentation { background: #ed8936; }
    .review-dot.review-dot-possible_missing_documentation { background: #ecc94b; }
    .review-dot.review-dot-well_supported { background: #38a169; }

.review-card {
    padding: 8px 10px;
    margin: 6px 0;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 8px;
    background: var(--surface);
}

    .review-card.review-needs_clarification { border-left-color: #e53e3e; }
    .review-card.review-conflicting_documentation { border-left-color: #ed8936; }
    .review-card.review-possible_missing_documentation { border-left-color: #ecc94b; }
    .review-card.review-well_supported { border-left-color: #38a169; }

.review-badge {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--bg);
    color: var(--text-muted);
    white-space: nowrap;
}

    .review-badge.review-badge-needs_clarification { background: #fff5f5; color: #822727; }
    .review-badge.review-badge-conflicting_documentation { background: #fffaf0; color: #7b341e; }
    .review-badge.review-badge-possible_missing_documentation { background: #fffff0; color: #744210; }
    .review-badge.review-badge-well_supported { background: #f0fff4; color: #22543d; }

.review-condition {
    white-space: normal;
}

    /* the three clarification kinds of an opportunity share one muted blue */
    .review-badge.review-badge-specificity_clarification,
    .review-badge.review-badge-acuity_clarification,
    .review-badge.review-badge-etiology_clarification { background: #ebf8ff; color: #2a4365; }

.review-summary-note {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--text-muted);
}

/* ---- CDI Opportunities (0030): one card per opportunity, the priority on the left edge ---- */

.opp-card {
    padding: 8px 10px;
    margin: 6px 0;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 8px;
    background: var(--surface);
}

    .opp-card.opp-high { border-left-color: #c53030; }
    .opp-card.opp-medium { border-left-color: #dd6b20; }
    .opp-card.opp-low { border-left-color: #a0aec0; }

.opp-priority {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

    .opp-priority.opp-priority-high { background: #fff5f5; color: #822727; border-color: #feb2b2; }
    .opp-priority.opp-priority-medium { background: #fffaf0; color: #7b341e; border-color: #fbd38d; }

.opp-indicators {
    margin: 2px 0 0 18px;
    padding: 0;
    color: var(--text);
}

    .opp-indicators li {
        margin: 1px 0;
    }

/* "View Evidence (n)" opens the excerpts, grouped into provider documentation / clinical evidence */
.review-evidence {
    margin-top: 4px;
}

    .review-evidence > summary {
        cursor: pointer;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--primary);
        padding: 3px 0;
    }

        .review-evidence > summary:hover {
            text-decoration: underline;
        }

        .review-evidence > summary i {
            margin-right: 3px;
            color: #c9a000;
        }

.review-evidence-group {
    margin: 2px 0 4px 8px;
}

    .review-evidence-group .code-group-title {
        padding: 4px 0 2px;
    }

.review-note .review-doc {
    font-weight: 600;
    color: var(--text-muted);
}

/* ---- Log tab: the chart's audit log as a compact table ---- */
.log-table {
    font-size: 12px;
}

    .log-table th {
        padding: 6px 8px;
    }

    .log-table td {
        padding: 6px 8px;
        white-space: normal;
        vertical-align: top;
    }

    .log-table .log-when {
        white-space: nowrap;
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
    }

    .log-table .log-details,
    .log-table .log-reason {
        max-width: 260px;
        overflow-wrap: anywhere;
    }

.conf-pill {
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--success-bg);
    color: var(--success);
    font-variant-numeric: tabular-nums;
}

.code-warn {
    color: var(--warning);
    font-size: 12px;
    cursor: help;
}

.code-warn-badge {
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--warning-bg);
    color: var(--warning);
}

.code-selected-check {
    font-size: 11px;
    font-weight: 700;
    color: var(--success);
}

.code-by {
    font-size: 11px;
}

.search-row.is-category .code-code {
    color: var(--text-muted);
}

/* Search tab: scheme radios + text box + button */
.coding-search {
    padding: 8px 0 6px;
}

.coding-search-scheme {
    display: flex;
    gap: 14px;
    font-size: 12.5px;
    margin-bottom: 8px;
}

    .coding-search-scheme input {
        margin: 0 4px 0 0;
    }

    .coding-search-scheme label {
        cursor: pointer;
    }

.coding-search-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .coding-search-row .form-control {
        padding: 7px 10px;
        font-size: 12.5px;
    }

.viewer-section-title {
    margin: 0;
    padding: 10px 14px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

    .viewer-section-title i {
        margin-right: 6px;
        color: var(--primary);
    }

.viewer-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 14px 10px;
}

.viewer-tabs {
    margin: 0;
    padding: 0 8px;
    flex-shrink: 0;
}

    .viewer-tabs .tab-btn {
        padding: 9px 9px;
        font-size: 12px;
    }

.entity-card {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

    .entity-card:last-child {
        border-bottom: none;
    }

.entity-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.entity-term {
    font-weight: 700;
    font-size: 13px;
    margin-right: auto;
}

.entity-cat {
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--bg);
    color: var(--text-muted);
}

    .entity-cat.cat-symptom { background: var(--c-symptom); color: #721c24; }
    .entity-cat.cat-medication { background: var(--c-medication); color: #155724; }
    .entity-cat.cat-anatomy { background: var(--c-anatomy); color: #0c0c52; }
    .entity-cat.cat-lab { background: var(--c-lab); color: #856404; }
    .entity-cat.cat-disease { background: var(--c-disease); color: #520c52; }
    .entity-cat.cat-procedure { background: var(--c-procedure); color: #0c5252; }

.entity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

    .entity-meta b {
        color: var(--text);
        font-weight: 600;
    }

.status-tag {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
}

.tag-affirmed { background: #e6fffa; color: #234e52; border: 1px solid #b2f5ea; }
.tag-negated { background: #fff5f5; color: #822727; border: 1px solid #feb2b2; }
.tag-uncertain { background: #fffaf0; color: #7b341e; border: 1px solid #fbd38d; }

.summary-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}

.count-badge {
    min-width: 28px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: var(--bg);
    color: var(--text);
    font-size: 11.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.item-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.item-title {
    font-weight: 600;
    font-size: 12.5px;
}

/* Narrow screens: stack the panes and let the page scroll again */
@media (max-width: 1000px) {
    .main:has(.viewer-page) {
        height: auto;
        overflow: visible;
    }

    .viewer-toolbar {
        flex-wrap: wrap;
    }

    .viewer-chart {
        border-right: none;
    }

    .viewer-body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
    }

    .coding-page .viewer-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .report-display {
        max-height: 70vh;
    }

    .viewer-side {
        grid-template-rows: auto auto;
    }

    .viewer-scroll {
        max-height: 50vh;
    }
}

/* ---------------------------------------------------------------------------
   Packages / Subscriptions tables
   --------------------------------------------------------------------------- */

.data-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cell-title {
    font-weight: 600;
}

.cell-sub {
    font-size: 12px;
    color: var(--text-muted);
    white-space: normal;
    max-width: 360px;
}

.data-table tr.row-deleted td {
    color: var(--text-muted);
}

    .data-table tr.row-deleted .cell-title {
        text-decoration: line-through;
    }

.usage {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 110px;
}

.usage-text {
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.usage-bar {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--border);
    overflow: hidden;
}

.usage-fill {
    display: block;
    height: 100%;
    background: var(--primary);
}

    .usage-fill.usage-full {
        background: var(--danger);
    }

/* ---------------------------------------------------------------------------
   Subscribe - package cards, Square checkout, result
   --------------------------------------------------------------------------- */

.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.package-card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .package-card:hover {
        border-color: var(--primary);
        box-shadow: var(--shadow-lg);
    }

.package-head {
    background: linear-gradient(135deg, var(--sidebar-bg), var(--primary));
    color: #fff;
    padding: 22px 20px;
    text-align: center;
}

.package-name {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
}

.package-price {
    font-size: 30px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.package-period {
    font-size: 13px;
    font-weight: 400;
    opacity: 0.85;
}

.package-body {
    padding: 16px 20px;
    flex: 1;
}

.package-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

    .package-feature i {
        color: var(--primary);
        width: 16px;
        text-align: center;
    }

.package-desc {
    margin: 12px 0 0;
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.5;
}

.package-foot {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    display: grid;
    gap: 10px;
}

.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 860px) {
    .checkout-grid {
        grid-template-columns: 1fr;
    }
}

.order-detail {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

    .order-detail span {
        color: var(--text-muted);
    }

.order-price {
    font-size: 20px;
    color: var(--primary);
}

.square-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f0f6ff;
    border: 1px solid #cce0ff;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.sq-logo {
    background: #006aff;
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    padding: 3px 7px;
    border-radius: 4px;
    white-space: nowrap;
}

#card-container {
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 4px 2px;
    margin-bottom: 14px;
    min-height: 90px;
    background: #fff;
}

.card-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 13px;
    min-height: 88px;
}

.btn-pay {
    background: #006aff;
    font-size: 15px;
    padding: 14px 20px;
}

    .btn-pay:hover {
        background: #004ec2;
    }

    .btn-pay:disabled {
        background: #adb5bd;
        cursor: not-allowed;
    }

.result-box {
    max-width: 560px;
    margin: 40px auto;
    text-align: center;
}

.result-icon {
    font-size: 52px;
    margin-bottom: 12px;
}

    .result-icon.result-success {
        color: var(--success);
    }

    .result-icon.result-error {
        color: var(--danger);
    }

.add-row-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 20px;
}

/* ---------------------------------------------------------------------------
   CDI Query Generator + Review/Edit (ChartCdi.aspx, 0031): the "Initiate CDI
   Query" panel replaces the CDI pane (Scripts/cdi-query.js) while a draft is
   worked on; the document pane and "View Evidence" stay in use on the left.
   --------------------------------------------------------------------------- */

.cdi-pane[hidden],
.cdi-query-pane[hidden] {
    display: none;
}

.opp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.cdi-query-back {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--primary);
    font-size: 13px;
    padding: 0 6px 0 0;
    font-family: inherit;
}

    .cdi-query-back:hover {
        text-decoration: underline;
    }

.cq-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 2px;
    font-size: 13px;
    font-weight: 700;
}

.cq-banner {
    font-size: 11.5px;
    color: #7b341e;
    background: #fffaf0;
    border: 1px solid #fbd38d;
    border-radius: 8px;
    padding: 6px 10px;
    margin: 6px 0;
}

.cq-why {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 10px 6px;
    margin: 6px 0;
    background: var(--bg);
    font-size: 12px;
}

    .cq-why > summary {
        cursor: pointer;
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--text-muted);
        padding: 4px 0;
    }

    .cq-why .opp-card {
        margin: 4px 0 0;
    }

.cq-evidence-used {
    background: #fff8d6;
    border-radius: 4px;
}

.cq-restore {
    color: var(--primary);
    font-weight: 600;
    white-space: nowrap;
}

.cdi-query-form .form-field {
    margin-top: 10px;
}

.cdi-query-form .form-control {
    font-size: 12.5px;
    padding: 8px 10px;
}

.cdi-query-form textarea.form-control {
    min-height: 74px;
    resize: vertical;
    line-height: 1.4;
}

.cq-options {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cq-option {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 4px 0;
}

    .cq-option input {
        flex: 1;
        min-width: 0;
    }

.cq-handle {
    color: var(--text-muted);
    cursor: default;
    font-size: 12px;
    padding: 0 2px;
}

.cq-opt-btn {
    padding: 6px 8px;
    line-height: 1;
}

.cq-rationale {
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--text-muted);
}

    .cq-rationale b {
        color: var(--text);
    }

.cq-warnings {
    margin: 8px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fffaf0;
    color: #7b341e;
    font-size: 12px;
}

    .cq-warnings ul {
        margin: 4px 0 0 18px;
        padding: 0;
    }

.cq-meta {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
}

.cq-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

    .cq-actions .btn[disabled] {
        opacity: 0.55;
        cursor: not-allowed;
    }

/* ---------------------------------------------------------------------------
   CDI Query Workflow (ChartCdi.aspx, 0032): the lifecycle line, the read-only
   sent query, the physician response, the confirmations and the timeline in
   the query panel - and the physician page (PhysicianQuery.aspx, .pq-*).
   --------------------------------------------------------------------------- */

.cq-workflow-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 6px;
    font-size: 12px;
    color: var(--text-muted);
}

    .cq-workflow-line .badge {
        margin-right: 2px;
    }

.cq-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    margin: 12px 0 4px;
}

.cq-sent,
.cq-response,
.cq-outcome {
    margin-top: 8px;
}

.cq-original {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 10px 8px;
    background: var(--surface);
    font-size: 12.5px;
}

    .cq-original > summary {
        cursor: pointer;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--text-muted);
        padding: 4px 0;
    }

.cq-ro-field {
    margin-top: 8px;
}

    .cq-ro-field .form-label {
        display: block;
        margin-bottom: 2px;
    }

.cq-ro {
    white-space: pre-wrap;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text);
}

.cq-ro-strong {
    font-weight: 600;
}

.cq-ro-options {
    margin: 2px 0 0 18px;
    padding: 0;
    font-size: 12.5px;
}

.cq-response {
    border: 1px solid #f6d58a;
    background: #fffbea;
    border-radius: 8px;
    padding: 6px 10px 10px;
}

    .cq-response .cq-section-title {
        margin-top: 4px;
        color: #7b5a00;
    }

.cq-outcome {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px 10px;
    background: var(--bg);
}

    .cq-outcome .cq-section-title {
        margin-top: 4px;
    }

.cq-confirm {
    margin-top: 12px;
    border: 1px solid var(--primary);
    border-radius: 8px;
    padding: 8px 12px 10px;
    background: var(--primary-light);
}

.cq-confirm-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark);
}

.cq-confirm-text {
    font-size: 12px;
    color: var(--text);
    margin: 8px 0 0;
}

.cq-confirm .form-field {
    margin-top: 8px;
}

.cq-confirm select.form-control,
.cq-confirm input.form-control,
.cq-confirm textarea.form-control {
    font-size: 12.5px;
    padding: 7px 10px;
}

.cq-confirm .cq-actions {
    border-top: none;
    padding-top: 0;
    margin-top: 10px;
}

.cq-timeline {
    margin-top: 14px;
    font-size: 12px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}

    .cq-timeline > summary {
        cursor: pointer;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--text-muted);
    }

    .cq-timeline ul {
        list-style: none;
        margin: 6px 0 0;
        padding: 0 0 0 14px;
        border-left: 2px solid var(--border);
    }

    .cq-timeline li {
        position: relative;
        margin: 0 0 8px;
    }

        .cq-timeline li::before {
            content: "";
            position: absolute;
            left: -19px;
            top: 5px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--primary);
        }

        .cq-timeline li.cq-tl-old::before {
            background: var(--text-muted);
        }

        .cq-timeline li.cq-tl-old {
            color: var(--text-muted);
        }

    .cq-timeline .cq-tl-when {
        display: block;
        font-size: 11px;
        color: var(--text-muted);
    }

.opp-query-status {
    flex-basis: 100%;
    font-size: 11.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

    .opp-query-status:empty {
        display: none;
    }

    .opp-query-status .badge {
        margin-right: 0;
    }

/* ---- the physician page (no sidebar, one card, plain reading) ---- */

.pq-body {
    margin: 0;
    background: var(--bg);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--text);
}

.pq-wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 28px 16px 48px;
}

.pq-card {
    padding: 28px 32px 24px;
}

.pq-brand {
    display: flex;
}

    .pq-brand .brand-logo {
        height: 22px;
    }

.pq-title {
    font-size: 22px;
    font-weight: 700;
    margin: 10px 0 4px;
}

.pq-intro {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 0 0 16px;
}

.pq-encounter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px 16px;
    margin: 0 0 8px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--bg);
    font-size: 13px;
}

    .pq-encounter > div {
        min-width: 0;
    }

    .pq-encounter dt {
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--text-muted);
    }

    .pq-encounter dd {
        margin: 2px 0 0;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

.pq-section {
    margin-top: 18px;
}

    .pq-section h2 {
        font-size: 11.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted);
        margin: 0 0 4px;
    }

.pq-subject {
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

.pq-text {
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0;
    white-space: pre-wrap;
}

.pq-question {
    font-weight: 500;
}

.pq-evidence {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 12px 8px;
    font-size: 13px;
}

    .pq-evidence > summary {
        cursor: pointer;
        font-weight: 600;
        color: var(--primary);
        padding: 4px 0;
    }

.pq-evidence-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    margin: 10px 0 4px;
}

.pq-excerpt {
    padding: 6px 10px;
    margin: 4px 0;
    border-left: 3px solid #f6d58a;
    background: #fffbea;
    border-radius: 0 6px 6px 0;
    line-height: 1.45;
}

.pq-excerpt-doc {
    font-weight: 600;
    color: var(--text-muted);
}

.pq-response {
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

.pq-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 4px 0 12px;
}

.pq-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    background: var(--surface);
}

    .pq-option:hover {
        border-color: var(--primary);
    }

    .pq-option input {
        margin-top: 3px;
    }

.pq-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.pq-confirm {
    margin-top: 12px;
    border: 1px solid var(--primary);
    border-radius: 8px;
    padding: 12px 16px;
    background: var(--primary-light);
    font-size: 13.5px;
}

    .pq-confirm p {
        margin: 6px 0 0;
    }

.pq-confirm-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-dark);
}

.pq-confirm-summary {
    margin-top: 8px;
    font-size: 13px;
    white-space: pre-wrap;
}

.pq-done {
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

.pq-footer {
    margin: 24px 0 0;
    font-size: 11.5px;
    color: var(--text-muted);
}

@media (max-width: 600px) {
    .pq-card {
        padding: 20px 16px;
    }

    .pq-actions {
        flex-direction: column;
    }
}

/* The hidden attribute must win over display: flex / grid on the panel and the physician page (0032). */
.cdi-query-pane [hidden],
.pq-body [hidden] {
    display: none !important;
}

/* 0033: the send block is a form, not a confirmation - the checkboxes of "another physician" */
.cq-check {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    cursor: pointer;
}

    .cq-check input {
        margin: 0;
    }

.cq-send .cq-ro-field {
    margin-top: 10px;
}

/* ---- Documentation & Coding Reconciliation (0034) ---- */

/* Suggested Codes: a suggestion from a physician's CDI response, a flagged one, a rejected one */
.source-badge.source-cdi { background: #e6fffa; color: #234e52; border: 1px solid #b2f5ea; }

.status-tag.tag-review { background: #fffaf0; color: #7b341e; border: 1px solid #fbd38d; }

.suggest-card.review-required {
    border-left: 4px solid #dd6b20;
}

.suggest-card.from-cdi {
    border-color: #b2f5ea;
}

    .suggest-card.from-cdi.review-required {
        border-left-color: #2c7a7b;
    }

.suggest-card.is-rejected {
    opacity: 0.6;
    background: var(--bg);
}

.suggest-card.is-focused {
    box-shadow: 0 0 0 3px rgba(47, 95, 179, 0.35);
    transition: box-shadow 0.4s;
}

.code-review-note b {
    color: #7b341e;
}

.code-clarification {
    font-size: 11.5px;
    font-style: italic;
    color: var(--text);
    padding: 2px 0 4px 6px;
    border-left: 3px solid #b2f5ea;
    margin: 2px 0 4px 8px;
}

.coding-count.review-count {
    background: #fffaf0;
    color: #7b341e;
}

/* The CDI page: the reconciliation block under the physician response */
.cq-recon {
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px 10px;
    background: var(--surface);
}

    .cq-recon .cq-section-title {
        margin-top: 2px;
    }

.cq-recon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0 14px;
}

.cq-recon-role {
    margin-top: 8px;
    font-size: 12px;
    color: #7b341e;
    background: #fffaf0;
    border: 1px solid #fbd38d;
    border-radius: 6px;
    padding: 4px 8px;
}

.cq-recon-codes {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    font-size: 12.5px;
}

    .cq-recon-codes li {
        padding: 4px 0;
        border-top: 1px solid var(--border);
    }

    .cq-recon-codes .status-tag {
        margin-right: 4px;
    }

.cq-recon-reason {
    font-size: 11.5px;
    color: var(--text-muted);
    margin: 1px 0 0 2px;
}

/* ---------------------------------------------------------------------------
   Collapsible cards (Suggested Codes, Audit, CDI Opportunities, Documentation Review):
   one quiet line per item - chevron, a soft status dot, code / title, short hints -
   and the details and actions open under it (coding-from-note.js, data-xcard-toggle).
   The boxes, thick coloured edges and tinted backgrounds of the older cards are
   flattened into a plain list so the pane reads calmly.
   --------------------------------------------------------------------------- */

.xcard.xcard {
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #edf0f4;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

    .xcard.xcard.is-open {
        background: #fafbfc;
    }

    .xcard.xcard.is-focused {
        box-shadow: inset 3px 0 0 #8fb0e0;
    }

.xcard-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 9px 8px;
    cursor: pointer;
    user-select: none;
    border-radius: 6px;
}

    .xcard-head:hover {
        background: #f4f6f9;
    }

    .xcard-head:focus-visible {
        outline: 2px solid rgba(47, 95, 179, 0.3);
        outline-offset: -2px;
    }

    .xcard-head .code-code {
        flex: none;
        font-size: 13px;
        font-weight: 600;
        color: #2d3643;
    }

.xcard-chev {
    flex: none;
    width: 10px;
    font-size: 9px;
    color: #aab2bd;
    transition: transform 0.15s ease;
}

.xcard.is-open .xcard-chev {
    transform: rotate(90deg);
}

.xcard-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    color: #4a5361;
}

.xcard.is-open .xcard-title {
    white-space: normal;
}

.xcard-aside {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.xcard-hint {
    font-size: 11px;
    color: #939ba6;
    white-space: nowrap;
}

    .xcard-hint.xcard-hint-review { color: #b7791f; }
    .xcard-hint.xcard-hint-cdi { color: #3b8586; }

.xcard-check {
    font-size: 13px;
    color: #5fae86;
}

/* The status dot: muted tones of the old badge colours */
.xdot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d3d9e1;
}

    .xdot.xdot-selected { background: #6dbb93; }
    .xdot.xdot-review { background: #e2ab5c; }
    .xdot.xdot-cdi { background: #63aeb0; }
    .xdot.xdot-opp-high { background: #e08c8c; }
    .xdot.xdot-opp-medium { background: #e6b673; }
    .xdot.xdot-opp-low { background: #cbd2db; }
    .xdot.xdot-needs_clarification { background: #e08c8c; }
    .xdot.xdot-conflicting_documentation { background: #e6a973; }
    .xdot.xdot-possible_missing_documentation { background: #e3cc74; }
    .xdot.xdot-well_supported { background: #86c6a4; }
    .xdot.xdot-audit-add { background: #86c6a4; }
    .xdot.xdot-audit-remove { background: #e08c8c; }
    .xdot.xdot-audit-type { background: #e6b673; }

/* The opened part */
.xcard-body {
    display: none;
    padding: 0 12px 12px 34px;
    font-size: 12.5px;
    line-height: 1.55;
}

.xcard.is-open .xcard-body {
    display: block;
}

.xcard-body .code-row-main,
.xcard-body .code-meta {
    margin-top: 2px;
    gap: 8px;
}

.xcard-body .code-reason {
    margin-top: 6px;
    font-size: 12.5px;
    color: #5b6573;
}

    .xcard-body .code-reason b {
        font-weight: 600;
        color: #3a4350;
    }

.xcard-body .code-actions,
.xcard-body .opp-actions {
    gap: 16px;
    margin-top: 10px;
    align-items: center;
}

.xcard-body .code-note,
.xcard-body .review-evidence > summary {
    font-weight: 500;
}

/* Quieter tags inside a card: no borders, lighter weight */
.xcard-body .status-tag,
.xcard-body .review-badge,
.xcard-body .opp-priority,
.xcard-body .audit-badge,
.xcard-body .source-badge {
    border: 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 2px 7px;
}

.xcard-body .conf-pill {
    font-weight: 600;
    background: #eef5f1;
    color: #3f7f5f;
}

/* The tab summaries: one light line instead of a boxed panel */
.review-summary {
    padding: 2px 8px 10px;
    margin: 4px 0 4px;
    border: 0;
    border-bottom: 1px solid #edf0f4;
    border-radius: 0;
    background: transparent;
}

.review-summary-title {
    font-weight: 600;
    color: #3a4350;
}

    .review-summary-title i {
        color: #8ea5c8;
    }

.review-summary-row {
    display: inline-flex;
    margin-right: 14px;
}

.review-summary-note {
    color: #939ba6;
    font-size: 11.5px;
}

/* The opportunity card copied into the query panel ("why") shows its details, without the toggle */
.cq-why .xcard-body {
    display: block;
    padding-left: 8px;
}

.cq-why .xcard-chev {
    display: none;
}

.cq-why .xcard-head {
    cursor: default;
}

    .cq-why .xcard-head:hover {
        background: transparent;
    }

/* ---------------------------------------------------------------------------
   Dashboard (Default.aspx, 0037): stat tiles per area, health table, performance
   tables with a thin one-hue magnitude bar. Numbers and labels stay in text colours;
   a pending count above zero gets an icon + amber edge, status an icon + word.
   --------------------------------------------------------------------------- */

.dash-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.dash-welcome {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 600;
}

.dash-period {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
}

.dash-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 26px 0 12px;
    font-size: 16px;
    font-weight: 600;
}

    .dash-section-title i {
        color: var(--primary);
    }

.dash-areas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 16px;
    margin-bottom: 4px;
}

    .dash-areas > .card {
        margin-bottom: 0;
    }

.dash-caption {
    margin: 4px 0 8px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.dash-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.dash-tile {
    display: block;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
}

a.dash-tile:hover {
    border-color: #b9c6dc;
    background: #f8fafd;
}

.dash-tile.is-attention {
    border-left: 4px solid var(--warning);
    padding-left: 9px;
}

.dash-value {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.dash-label {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--text-muted);
}

    .dash-tile.is-attention .dash-label i {
        color: var(--warning);
    }

.dash-two {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 16px;
}

    .dash-two > .card {
        margin-bottom: 0;
    }

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

.dash-table th.num {
    text-align: right;
}

.dash-table td {
    vertical-align: middle;
}

.dash-muted {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
}

.dash-note {
    color: var(--text-muted);
    font-size: 12.5px;
    max-width: 340px;
}

.health {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 12.5px;
    white-space: nowrap;
}

    .health-ok i { color: var(--success); }
    .health-warning i { color: var(--warning); }
    .health-error i { color: var(--danger); }
    .health-error { color: #93202f; }

.perf-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 130px;
}

.perf-num {
    min-width: 44px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.perf-bar {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: #eef1f5;
    overflow: hidden;
}

    .perf-bar > span {
        display: block;
        height: 100%;
        border-radius: 3px;
        background: var(--primary);
    }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* 0038: New Opportunity (CDI page) */
.opp-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 2px 0 8px;
}

.opp-new.card {
    padding: 12px 14px;
    margin: 0 0 12px;
    border: 1px solid var(--border);
    box-shadow: none;
}

.opp-new-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    margin-bottom: 10px;
}

    .opp-new-grid label {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--text);
    }

        .opp-new-grid label.full {
            grid-column: 1 / -1;
        }

    .opp-new-grid .form-control {
        font-weight: 400;
    }

.opp-new-evidence {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 180px;
    overflow-y: auto;
    margin-bottom: 10px;
    font-size: 12.5px;
}

    .opp-new-evidence label {
        display: flex;
        gap: 6px;
        align-items: baseline;
    }

.opp-new .opp-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   0041: account pages, notifications, trends, CDI close, print
   --------------------------------------------------------------------------- */

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

.topbar-bell {
    position: relative;
    margin-left: auto;
    margin-right: 16px;
    color: var(--text-muted);
    font-size: 18px;
    text-decoration: none;
}

    .topbar-bell:hover {
        color: var(--primary);
    }

.topbar-bell-count {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 18px;
    padding: 1px 5px;
    border-radius: 9px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.notification {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 6px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
}

    .notification:hover {
        background: #f8fafd;
    }

    .notification > i {
        margin-top: 3px;
        color: var(--primary);
        width: 18px;
        text-align: center;
    }

    .notification.is-unread .notification-title {
        font-weight: 600;
    }

.notification-text {
    flex: 1;
}

.notification-body {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.notification-when {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.cdi-close-message {
    align-self: center;
    font-size: 12.5px;
    color: var(--text-muted);
    max-width: 360px;
}

.dash-export {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.trend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.card.trend-card {
    margin-bottom: 0;
    padding: 12px 14px 8px;
}

.trend-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.trend-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.trend-value {
    font-size: 20px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.trend-sub {
    margin-bottom: 4px;
}

.trend-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.trend-grid-line {
    stroke: #e8ecf2;
    stroke-width: 1;
}

.trend-axis {
    fill: var(--text-muted);
    font-size: 9px;
}

.trend-line {
    fill: none;
    stroke: var(--primary);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.trend-dot {
    fill: var(--primary);
    stroke: var(--surface);
    stroke-width: 1.5;
}

    .trend-dot.is-last {
        stroke-width: 2;
    }

.trend-hit {
    fill: transparent;
    cursor: default;
}

.trend-point:hover .trend-dot {
    r: 4.5;
}

@media print {
    .sidebar, .topbar, .acting-as-bar, .footer-note, .no-print, .dash-period, input[type=submit], .btn {
        display: none !important;
    }

    .main {
        margin: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    .card {
        box-shadow: none !important;
        break-inside: avoid;
    }

    body {
        background: #fff !important;
    }
}

/* ---------------------------------------------------------------------------
   My Subscriptions - points (0071): the active subscription's points card, the
   points bar (spent / remaining / overdrawn segments on the .usage-bar track),
   "Where the points went" (one row per report, each opening its steps) and
   the "How points are charged" rate card
   --------------------------------------------------------------------------- */

.usage-bar.points-bar {
    display: flex;
}

.points-bar-lg {
    height: 14px;
    border-radius: 7px;
}

.points-seg {
    display: block;
    height: 100%;
    min-width: 3px;
}

    .points-seg + .points-seg {
        border-left: 2px solid var(--surface);
    }

.points-seg-spent,
.points-swatch-spent {
    background: var(--primary);
}

.points-seg-left,
.points-swatch-left {
    background: var(--success);
}

.points-seg-over {
    background: var(--danger);
}

.points-low .points-seg-left,
.points-low .points-swatch-left {
    background: var(--warning);
}

.points-danger .points-swatch-left {
    background: var(--danger);
}

.points-low {
    color: var(--warning);
    font-weight: 600;
}

.points-danger {
    color: var(--danger);
    font-weight: 600;
}

/* The "Points" column of the list: "Spent X" and "Y of N left" above the bar, the report count under it */
.points-usage {
    min-width: 180px;
}

.points-text {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

    .points-text .btn-link,
    .points-legend .btn-link {
        font-size: inherit;
    }

/* The active subscription's card */
.card.points-card {
    padding: 18px 24px;
}

.points-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 12px;
}

.points-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
}

.points-package {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
}

.points-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 16px;
    margin-top: 10px;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

.points-key {
    display: inline-flex;
    align-items: center;
}

.points-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 7px;
    flex-shrink: 0;
}

.points-none,
.points-muted {
    color: var(--text-muted);
}

.points-rates {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

    .points-rates > summary {
        cursor: pointer;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--primary);
    }

        .points-rates > summary:hover {
            text-decoration: underline;
        }

    .points-rates .data-table {
        width: auto;
        margin-top: 8px;
    }

        /* long step names wrap instead of widening a narrow screen */
        .points-rates .data-table td {
            white-space: normal;
        }

.points-rates-note {
    margin-top: 8px;
    max-width: 640px;
    font-size: 12px;
    color: var(--text-muted);
}

/* "Where the points went": the table scrolls inside the card so the list below stays in reach */
.points-table-wrap {
    max-height: 50vh;
    overflow: auto;
}

    .points-table > thead th {
        position: sticky;
        top: 0;
        background: var(--surface);
        z-index: 1;
    }

.points-chart-row {
    cursor: pointer;
}

.points-toggle {
    border: none;
    background: none;
    padding: 2px 6px;
    color: var(--text-muted);
    cursor: pointer;
}

    .points-toggle i {
        transition: transform 0.15s;
    }

    .points-toggle[aria-expanded='true'] i {
        transform: rotate(90deg);
    }

.data-table tr.points-steps-row > td {
    padding-top: 0;
    background: var(--bg);
}

    /* the steps stay white - the list's row hover (.data-table tbody tr:hover td) would grey them all */
    .data-table tr.points-steps-row .points-steps td {
        background: var(--surface);
    }

    .points-steps td.points-detail {
        white-space: normal;
        min-width: 220px;
    }

.points-refund {
    color: var(--success);
}

.points-table > tfoot td {
    padding: 12px;
    font-weight: 700;
    border-top: 2px solid var(--border);
}

/* ---------------------------------------------------------------------------
   0074: User Activity (UserActivity.aspx) - people, time by step, the session timeline
   --------------------------------------------------------------------------- */

/* a report of wide tables: more room than the 1100px of a form page */
.content:has(.activity-page) {
    max-width: 1600px;
}

.activity-people tr.is-selected td {
    background: var(--primary-light);
}

    .activity-people .perf-cell {
        min-width: 110px;
    }

.activity-presence {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

    .activity-presence i {
        font-size: 8px;
    }

    .activity-presence.is-active {
        color: var(--success);
    }

.activity-quiet {
    margin-top: 12px;
    line-height: 1.7;
}

.activity-num {
    min-width: 92px;
    white-space: nowrap;
}

.activity-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    white-space: nowrap;
}

    .activity-step i {
        width: 16px;
        text-align: center;
        color: var(--text-muted);
    }

    .activity-step-coding i { color: var(--primary); }
    .activity-step-auditing i { color: var(--warning); }
    .activity-step-cdi i { color: var(--info); }
    .activity-step-documents i { color: var(--success); }

.card.activity-session {
    padding: 18px 22px;
    margin-bottom: 16px;
}

.activity-session-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.activity-session-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

    .activity-session-title .badge {
        margin-right: 0;
    }

.activity-steps td {
    vertical-align: top;
}

.activity-time {
    font-variant-numeric: tabular-nums;
}

.data-table td.activity-did {
    white-space: normal;
    min-width: 260px;
}

.activity-items {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
}

    .activity-items li {
        padding: 1px 0;
    }

    .activity-items i {
        width: 14px;
        color: var(--text-muted);
    }

    .activity-items li.is-change i {
        color: var(--primary);
    }

.activity-at {
    display: inline-block;
    min-width: 42px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   DRG (0076): the Coding page's DRG tab (DrgView) and the encounter information
   card (EncounterFacts - Chart Details). Every state is said in words; colour
   only repeats it.
   --------------------------------------------------------------------------- */

.ai-status.ai-status-warn {
    background: var(--warning-bg);
    color: #6e5206;
}

    .ai-status.ai-status-warn i {
        color: var(--warning);
    }

.drg-head {
    padding: 4px 0 2px;
}

.drg-head-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    font-size: 12.5px;
}

.drg-mode {
    font-weight: 700;
}

.drg-tag {
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
    white-space: nowrap;
}

    .drg-tag.drg-tag-ok,
    .drg-tag.drg-tag-final {
        background: var(--success-bg);
        color: #146336;
        border-color: transparent;
    }

    .drg-tag.drg-tag-prov {
        background: var(--primary-light);
        color: var(--primary-dark);
        border-color: transparent;
    }

    .drg-tag.drg-tag-warn {
        background: var(--warning-bg);
        color: #6e5206;
        border-color: transparent;
    }

.drg-result {
    padding: 8px 10px;
    margin: 6px 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

    .drg-result.is-accepted {
        border-color: #9fd9b5;
        background: var(--success-bg);
    }

    .drg-result.is-rejected,
    .drg-result.has-errors {
        border-color: #f1b5bd;
    }

    .drg-result.is-outdated {
        border-style: dashed;
        background: var(--bg);
    }

.drg-result-title {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
}

.drg-result-main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 3px 0;
}

.drg-code {
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
}

.drg-desc {
    font-size: 12.5px;
    min-width: 0;
}

.drg-facts {
    font-size: 12px;
    margin-top: 2px;
}

.drg-message {
    font-size: 12px;
    margin-top: 4px;
    padding: 4px 8px;
    border-radius: 6px;
}

    .drg-message.is-error {
        background: var(--danger-bg);
        color: #93202f;
    }

    .drg-message.is-warning {
        background: var(--warning-bg);
        color: #6e5206;
    }

.drg-unvalidated {
    color: #6e5206;
    font-weight: 600;
}

.drg-decision {
    font-size: 12px;
    margin-top: 4px;
}

    .drg-decision.is-accepted {
        color: #146336;
    }

    .drg-decision.is-rejected {
        color: #93202f;
    }

.drg-explain {
    font-size: 12px;
    margin-top: 4px;
}

    .drg-explain > summary {
        cursor: pointer;
        color: var(--text-muted);
    }

    .drg-explain ul {
        margin: 4px 0 0 18px;
        padding: 0;
    }

.drg-issues {
    margin-bottom: 6px;
}

.drg-issue {
    padding: 6px 8px;
    margin: 5px 0;
    border-left: 3px solid var(--border);
    border-radius: 0 6px 6px 0;
    background: var(--bg);
    font-size: 12px;
}

    .drg-issue.sev-blocking {
        border-left-color: var(--danger);
    }

        .drg-issue.sev-blocking .drg-issue-main i {
            color: var(--danger);
        }

    .drg-issue.sev-warning {
        border-left-color: var(--warning);
    }

        .drg-issue.sev-warning .drg-issue-main i {
            color: var(--warning);
        }

    .drg-issue.sev-info {
        border-left-color: var(--info);
    }

        .drg-issue.sev-info .drg-issue-main i {
            color: var(--info);
        }

    .drg-issue .code-actions {
        margin-top: 4px;
    }

.drg-issue-main {
    font-weight: 600;
}

.drg-issue-why {
    color: var(--text-muted);
    margin-top: 2px;
}

.drg-inputs {
    margin: 4px 0 8px;
}

    .drg-inputs td {
        vertical-align: top;
    }

.form-control.drg-small {
    display: inline-block;
    width: auto;
    max-width: 170px;
    padding: 3px 6px;
    font-size: 12px;
    margin-right: 6px;
}

.drg-occ {
    display: inline-block;
    margin: 0 10px 3px 0;
    white-space: nowrap;
}

.drg-occ-add {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.drg-tools {
    margin-top: 10px;
}

    .drg-tools > summary,
    .encounter-history > summary {
        cursor: pointer;
        font-size: 11.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--text-muted);
        padding: 6px 0;
    }

    .drg-tools .audit-review {
        margin-bottom: 10px;
    }

        .drg-tools .audit-review > .code-hint {
            flex-basis: 100%;
        }

    .drg-tools .form-control.drg-version {
        width: auto;
        max-width: 100%;
        padding: 5px 8px;
        font-size: 12px;
    }

.drg-run {
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}

.drg-run-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
}

.drg-changes {
    margin-top: 3px;
    font-size: 11.5px;
}

    .drg-changes ul {
        margin: 2px 0 0 18px;
        padding: 0;
    }

/* The encounter information: label / value + recorded state / source, one row per field */
.encounter-grid {
    display: grid;
    grid-template-columns: minmax(170px, 1.1fr) minmax(240px, 1.5fr) minmax(200px, 1.3fr);
    margin-bottom: 14px;
}

.encounter-row {
    display: contents;
}

    .encounter-row > div {
        padding: 8px 6px;
        border-bottom: 1px solid var(--border);
    }

    .encounter-row.is-missing .encounter-label label::before {
        content: "\f06a";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        color: var(--warning);
        margin-right: 5px;
    }

.encounter-label label {
    font-weight: 600;
    font-size: 13px;
}

.encounter-tag {
    font-size: 10px;
    padding: 0 6px;
    border-radius: 8px;
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* 0080: a value the AI coding read from the documents - recorded, but nobody has checked it yet */
.encounter-tag.is-ai {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary-light);
}

.encounter-req {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

    .encounter-req.is-needed {
        color: #6e5206;
    }

.encounter-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

    .encounter-input .form-control {
        width: auto;
        flex: 1 1 140px;
        min-width: 0;
        padding: 6px 8px;
        font-size: 13px;
    }

    .encounter-input .form-control.encounter-state {
        flex: 0 0 auto;
        width: 140px;
    }

.encounter-unit {
    font-size: 12px;
    color: var(--text-muted);
}

.encounter-meta {
    font-size: 11.5px;
    color: var(--text-muted);
}

.encounter-help {
    margin-top: 2px;
    font-style: italic;
}

.encounter-source {
    margin-bottom: 8px;
}

@media (max-width: 900px) {
    .encounter-grid {
        grid-template-columns: 1fr;
    }

    .encounter-row {
        display: block;
        border-bottom: 1px solid var(--border);
        padding: 4px 0;
    }

        .encounter-row > div {
            border-bottom: none;
            padding: 3px 4px;
        }
}